Merge branch 'develop' into feat/backoffice-login

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

@@ -1,19 +1,20 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Modal } from '@imphnen-frontend-service/ui/molecules';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
-import { Link } from 'react-router-dom';
 import { useLogin } from '../../_hooks/use-login';
 
 interface IModalFormLogin {
   isOpen: boolean;
   onClose: () => void;
   onForgotPassword: () => void;
+  setIsOpenRegisterModal: (value: boolean) => void;
 }
 
 const ModalFormLogin = ({
   isOpen,
   onClose,
   onForgotPassword,
+  setIsOpenRegisterModal,
 }: IModalFormLogin) => {
   const { form, onSubmit } = useLogin();
 
@@ -59,12 +60,13 @@ const ModalFormLogin = ({
           </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"
+            <Button
+              variant="text"
+              className="text-primary-500 hover:text-primary-600 m-0 p-0"
+              onClick={() => setIsOpenRegisterModal(true)}
             >
               Daftar
-            </Link>
+            </Button>
           </div>
         </form>
       </Modal.Content>

apps/gacha/src/app/layout.tsx

@@ -1,14 +1,16 @@
-import { FC, ReactElement } from 'react';
-import { Outlet } from 'react-router-dom';
 import { Navbar } from '@imphnen-frontend-service/ui/organisms';
+import { Outlet } from 'react-router-dom';
+import { FC, ReactElement } from 'react';
+import { ModalLoginProvider } from '@imphnen-frontend-service/utils';
 
 export const AppLayout: FC = (): ReactElement => {
   return (
-    <main className="bg-primary-50 min-h-screen">
-      <Navbar />
-      <Outlet />
-    </main>
+    <ModalLoginProvider>
+      <main className="bg-primary-50 min-h-screen">
+        <Navbar />
+        <Outlet />
+      </main>
+    </ModalLoginProvider>
   );
 };
-
 export default AppLayout;

apps/gacha/src/app/page.tsx

@@ -5,10 +5,11 @@ import ModalFormForgotPassword from './_components/form/modal-form-forgot-passwo
 import ModalFormLogin from './_components/form/modal-form-login';
 import ModalFormRegister from './_components/form/modal-form-register';
 import { GachaItem } from './_components/item/gacha-item';
+import { useModalLogin } from '@imphnen-frontend-service/utils';
 
 export const Components: FC = (): ReactElement => {
+  const { showModalLogin, setShowModalLogin } = useModalLogin();
   const [showModalForgotPassword, setShowModalForgotPassword] = useState(false);
-  const [showModalLogin, setShowModalLogin] = useState(false);
   const [showModalRegister, setShowModalRegister] = useState(false);
 
   const scrollToRoulette = () => {
@@ -176,18 +177,6 @@ export const Components: FC = (): ReactElement => {
             Spin Now
           </Button>
         </div>
-
-        <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>
-          <Button onClick={() => setShowModalRegister(true)}>
-            Open Modal Register
-          </Button>
-        </div>
       </section>
       <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>
 
@@ -195,6 +184,7 @@ export const Components: FC = (): ReactElement => {
         isOpen={showModalLogin}
         onClose={() => setShowModalLogin(false)}
         onForgotPassword={handleForgotPasswordClick}
+        setIsOpenRegisterModal={setShowModalRegister}
         key="login"
       />