Merge pull request #13 from IMPHNEN/feat/register-form

Feat/register form

.github/PULL_REQUEST_TEMPLATE/pull_request_template.md

@@ -0,0 +1,30 @@
+## Issue
+
+<!-- #GitHubIssueNumber / Issue Link / Describe the problem here (if the issue hasn't been defined)  -->
+
+## What did you do?
+
+<!--
+- Describe what did you do in this code
+- Example:
+  - [CORRECT] Add auth feature / Modify auth feature.
+  - [WRONG] Create file /controllers/auth.ts, /models/user.ts, modify /routes/web.ts
+-->
+
+## Screenshot / Video
+
+<!--
+Attach pictures of this work / video explanation about this work
+-->
+
+## Note for Deployment
+
+<!--
+- Tell to DevOps what should he do to deploy this change
+- example:
+  - Please run migration when deploy this
+  - Please upload these files into folder xxx
+  - Please create folder `xxx` and give permission `777`
+  - Please run this SQL after deploy ```sql INSERT INTO xxx (...) ```
+  - etc...
+-->

apps/gacha/src/app/_components/form/modal-form-forgot-password.tsx

@@ -4,24 +4,28 @@ import {
   Modal,
   Stepper,
 } from '@imphnen-frontend-service/ui/molecules';
+import { useQueryState } from '../../../hooks/use-query-state';
 
 interface IModalFormForgotPasswordProps {
   isOpen: boolean;
   onClose: () => void;
-  currentStep: number;
-  nextStep: () => void;
-  prevStep: () => void;
-  resetStep: () => void;
 }
 
 const ModalFormForgotPassword = ({
   isOpen,
   onClose,
-  currentStep,
-  nextStep,
-  prevStep,
-  resetStep,
 }: IModalFormForgotPasswordProps) => {
+  const {
+    step: currentStep,
+    nextStep,
+    prevStep,
+    resetStep,
+  } = useQueryState('step', {
+    defaultValue: 1,
+    maxValue: 3,
+    minValue: 1,
+  });
+
   return (
     <Modal
       className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"

apps/gacha/src/app/_components/form/modal-form-register.tsx

@@ -0,0 +1,123 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
+import { useQueryState } from '../../../hooks/use-query-state';
+
+interface IModalFormRegisterProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const ModalFormRegister = ({ isOpen, onClose }: IModalFormRegisterProps) => {
+  const {
+    step: currentStep,
+    nextStep,
+    prevStep,
+    resetStep,
+  } = useQueryState('registerStep', {
+    defaultValue: 1,
+    maxValue: 2,
+    minValue: 1,
+  });
+
+  return (
+    <Modal
+      className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
+      isOpen={isOpen}
+      onClose={() => {
+        onClose();
+        resetStep();
+      }}
+    >
+      <Modal.Header className="space-y-4">
+        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+        <h1 className="text-primary-500 text-p1 text-center font-semibold">
+          Register
+        </h1>
+        <h2 className="text-neutral-500 text-lg text-center">
+          {currentStep === 1 ? 'Info Akun' : 'Informasi Pengiriman Hadiah'}
+        </h2>
+      </Modal.Header>
+      <Modal.Content className="space-y-6">
+        {currentStep === 1 && <StepOne nextStep={nextStep} onClose={onClose} />}
+        {currentStep === 2 && (
+          <StepTwo nextStep={nextStep} prevStep={prevStep} />
+        )}
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+interface IStepOneProps {
+  nextStep: () => void;
+  onClose: () => void;
+}
+
+const StepOne = ({ nextStep, onClose }: IStepOneProps) => (
+  <>
+    <InputForm
+      label="Nama Lengkap"
+      placeholder="Masukkan Nama Lengkap"
+      type="text"
+      size="lg"
+      className="w-full"
+    />
+    <InputForm
+      label="Email"
+      placeholder="Masukkan Email Anda"
+      type="email"
+      size="lg"
+      className="w-full"
+    />
+    <InputForm
+      label="Password"
+      placeholder="Masukkan Password"
+      type="password"
+      size="lg"
+      className="w-full"
+    />
+    <InputForm
+      label="Ulangi Password"
+      placeholder="Masukkan Ulang Password"
+      type="password"
+      size="lg"
+      className="w-full"
+    />
+    <Button size="md" className="w-full" onClick={nextStep}>
+      Selanjutnya
+    </Button>
+  </>
+);
+
+interface IStepTwoProps {
+  nextStep: () => void;
+  prevStep: () => void;
+}
+
+const StepTwo = ({ nextStep, prevStep }: IStepTwoProps) => (
+  <>
+    <InputForm
+      label="Nomor Telepon"
+      placeholder="Masukkan Nomor Telepon Aktif"
+      type="text"
+      size="lg"
+      className="w-full"
+    />
+    <InputForm
+      label="Alamat Pengiriman"
+      placeholder="Masukkan Alamat Pengiriman"
+      type="text"
+      size="lg"
+      className="w-full"
+    />
+    <div className="flex gap-6">
+      <Button size="md" variant="text" className="w-[40%]" onClick={prevStep}>
+        Kembali
+      </Button>
+      <Button size="md" className="w-full" onClick={nextStep}>
+        Gacha Sekarang
+      </Button>
+    </div>
+  </>
+);
+
+export default ModalFormRegister;

apps/gacha/src/app/page.tsx

@@ -2,9 +2,9 @@ import { ArrowDownOutlined } from '@ant-design/icons';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { cn } from '@imphnen-frontend-service/utils';
 import { FC, Fragment, ReactElement, useEffect, useState } from 'react';
-import { useQueryState } from '../hooks/use-query-state';
 import ModalFormForgotPassword from './_components/form/modal-form-forgot-password';
 import ModalFormLogin from './_components/form/modal-form-login';
+import ModalFormRegister from './_components/form/modal-form-register';
 
 interface GachaItemProps {
   src: string;
@@ -15,17 +15,7 @@ interface GachaItemProps {
 export const Components: FC = (): ReactElement => {
   const [showModalForgotPassword, setShowModalForgotPassword] = useState(false);
   const [showModalLogin, setShowModalLogin] = useState(false);
-
-  const {
-    step: currentStep,
-    nextStep,
-    prevStep,
-    resetStep,
-  } = useQueryState('step', {
-    defaultValue: 1,
-    maxValue: 3,
-    minValue: 1,
-  });
+  const [showModalRegister, setShowModalRegister] = useState(false);
 
   const scrollToRoulette = () => {
     const rouletteSection = document.getElementById('roulette');
@@ -80,7 +70,6 @@ export const Components: FC = (): ReactElement => {
   const handleForgotPasswordClick = () => {
     setShowModalLogin(false);
     setShowModalForgotPassword(true);
-    resetStep();
   };
 
   return (
@@ -242,6 +231,9 @@ export const Components: FC = (): ReactElement => {
           <Button onClick={() => setShowModalForgotPassword(true)}>
             Open Modal Forgot Password
           </Button>
+          <Button onClick={() => setShowModalRegister(true)}>
+            Open Modal Register
+          </Button>
         </div>
       </section>
       {/* Diffuser & Cloud */}
@@ -252,21 +244,26 @@ export const Components: FC = (): ReactElement => {
         isOpen={showModalLogin}
         onClose={() => setShowModalLogin(false)}
         onForgotPassword={handleForgotPasswordClick}
-        key={currentStep}
+        key="login"
+      />
+
+      {/* Register Modal */}
+      <ModalFormRegister
+        isOpen={showModalRegister}
+        onClose={() => {
+          setShowModalRegister(false);
+        }}
+        key="register"
       />
 
       {/* Forgot Password Modal */}
       <ModalFormForgotPassword
-        currentStep={currentStep}
         isOpen={showModalForgotPassword}
         onClose={() => {
           setShowModalForgotPassword(false);
           setShowModalLogin(true);
         }}
-        nextStep={nextStep}
-        prevStep={prevStep}
-        resetStep={resetStep}
-        key={currentStep}
+        key="forgot-password"
       />
     </Fragment>
   );