feat: dyamic stepper form forgot password

apps/gacha/src/app/page.tsx

@@ -1,9 +1,10 @@
 import { ArrowDownOutlined } from '@ant-design/icons';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
 import { cn } from '@imphnen-frontend-service/utils';
 import { FC, Fragment, ReactElement, useEffect, useState } from 'react';
-import { Link } from 'react-router';
+import { useQueryState } from '../hooks/use-query-state';
+import ModalFormForgotPassword from './_components/form/modal-form-forgot-password';
+import ModalFormLogin from './_components/form/modal-form-login';
 
 interface GachaItemProps {
   src: string;
@@ -12,8 +13,19 @@ interface GachaItemProps {
 }
 
 export const Components: FC = (): ReactElement => {
-  // Pinjem
-  const [showModal, setShowModal] = useState(false);
+  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 scrollToRoulette = () => {
     const rouletteSection = document.getElementById('roulette');
@@ -65,6 +77,12 @@ export const Components: FC = (): ReactElement => {
     );
   };
 
+  const handleForgotPasswordClick = () => {
+    setShowModalLogin(false);
+    setShowModalForgotPassword(true);
+    resetStep();
+  };
+
   return (
     <Fragment>
       {/* Landing Page */}
@@ -216,64 +234,40 @@ export const Components: FC = (): ReactElement => {
             Spin Now
           </Button>
         </div>
+        {/* TODO:  */}
+        <div className="flex gap-4 col-span-4 md:col-span-8 lg:col-span-6 justify-center items-center">
+          <Button onClick={() => setShowModalLogin(true)}>
+            Open Modal Login
+          </Button>
+          <Button onClick={() => setShowModalForgotPassword(true)}>
+            Open Modal Forgot Password
+          </Button>
+        </div>
       </section>
       {/* Diffuser & Cloud */}
       <div className="sticky bottom-0 h-[86px] md:h-[200px] bg-gradient-to-b from-primary-500/0 to-primary-500/50 to-80%"></div>
 
-      {/**Izin pake untuk debug modals gacha */}
-      <button onClick={() => setShowModal(true)}>Open Modal</button>
-      <Modal
-        className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
-        isOpen={showModal}
-        onClose={() => setShowModal(false)}
-      >
-        <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">
-            Login
-          </h1>
-        </Modal.Header>
-        <Modal.Content className="space-y-4">
-          <InputForm
-            label="Email"
-            placeholder="Masukkan Email"
-            type="email"
-            size="lg"
-            className="w-full"
-          />
-          <InputForm
-            label="Password"
-            placeholder="Masukkan password"
-            type="password"
-            size="lg"
-            className="w-full"
-          />
-          <Link to="/forgot-password">
-            <h1 className="text-end text-primary-500 text-xl font-medium">
-              Lupa Password?
-            </h1>
-          </Link>
-        </Modal.Content>
-        <Modal.Footer className="flex flex-col md:flex-col pt-4">
-          <Button
-            size="md"
-            className="w-full"
-            onClick={() => console.log('Login')}
-          >
-            Login
-          </Button>
-          <div className="flex justify-center gap-2 pt-2.5 font-medium">
-            <p className="text-neutral-500">Belum punya akun?</p>
-            <Link
-              className="text-primary-500 hover:text-primary-600"
-              to="/register"
-            >
-              Daftar disini
-            </Link>
-          </div>
-        </Modal.Footer>
-      </Modal>
-      {/**Izin pake untuk debug modals gacha */}
+      {/* Login Modal */}
+      <ModalFormLogin
+        isOpen={showModalLogin}
+        onClose={() => setShowModalLogin(false)}
+        onForgotPassword={handleForgotPasswordClick}
+        key={currentStep}
+      />
+
+      {/* Forgot Password Modal */}
+      <ModalFormForgotPassword
+        currentStep={currentStep}
+        isOpen={showModalForgotPassword}
+        onClose={() => {
+          setShowModalForgotPassword(false);
+          setShowModalLogin(true);
+        }}
+        nextStep={nextStep}
+        prevStep={prevStep}
+        resetStep={resetStep}
+        key={currentStep}
+      />
     </Fragment>
   );
 };