feat: enhance SuccessModal and News context for improved modal management and subscription flow

app/layouts/news/default.tsx

@@ -10,6 +10,7 @@ import { FormRegister } from '~/layouts/news/form-register'
 
 import { FooterLinks } from './footer-links'
 import { FooterNewsletter } from './footer-newsletter'
+import FormSubscription from './form-subscription'
 import { HeaderMenu } from './header-menu'
 import { HeaderTop } from './header-top'
 
@@ -24,6 +25,8 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
     setForgetOpen,
     isSuccessModalOpen,
     setIsSuccessModalOpen,
+    isInitSubscribeOpen,
+    setIsInitSubscribeOpen,
   } = useNewsContext()
   return (
     <main className="relative min-h-dvh bg-[#ECECEC]">
@@ -50,7 +53,7 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
           setIsRegisterOpen={setIsRegisterOpen}
           setIsLoginOpen={setIsLoginOpen}
           setIsForgetOpen={setForgetOpen}
-          setIsSuccessModalOpen={setIsSuccessModalOpen}
+          setIsInitSubscribeOpen={setIsInitSubscribeOpen}
         />
       </PopupModal>
 
@@ -70,12 +73,21 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
         <FormForgotPassword />
       </PopupModal>
 
+      <PopupModal
+        isOpen={isInitSubscribeOpen}
+        onClose={() => setIsInitSubscribeOpen(false)}
+        description="Selamat Datang, silakan Pilih Subscription Anda untuk melanjutkan!"
+      >
+        <FormSubscription />
+      </PopupModal>
+
       <SuccessModal
         isOpen={isSuccessModalOpen}
         onClose={() => {
-          setIsSuccessModalOpen(false)
+          if (setIsSuccessModalOpen) {
+            setIsSuccessModalOpen(undefined)
+          }
         }}
-        type="warning"
       />
     </main>
   )

app/layouts/news/form-login.tsx

@@ -1,11 +1,11 @@
 // import { EyeIcon, EyeOffIcon } from 'lucide-react'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { type Dispatch, type SetStateAction } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { z } from 'zod'
 
 import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
+import type { NewsContextProperties } from '~/contexts/news'
 
 const loginSchema = z.object({
   email: z.string().email('Email tidak valid'),
@@ -15,10 +15,10 @@ const loginSchema = z.object({
 type TLoginSchema = z.infer<typeof loginSchema>
 
 type TProperties = {
-  setIsRegisterOpen: Dispatch<SetStateAction<boolean>>
-  setIsLoginOpen: Dispatch<SetStateAction<boolean>>
-  setIsForgetOpen: Dispatch<SetStateAction<boolean>>
-  setIsSuccessModalOpen: Dispatch<SetStateAction<boolean>>
+  setIsRegisterOpen: NewsContextProperties['setIsRegisterOpen']
+  setIsLoginOpen: NewsContextProperties['setIsLoginOpen']
+  setIsForgetOpen: NewsContextProperties['setForgetOpen']
+  setIsInitSubscribeOpen: NewsContextProperties['setIsInitSubscribeOpen']
 }
 
 export const FormLogin = (properties: TProperties) => {
@@ -26,7 +26,7 @@ export const FormLogin = (properties: TProperties) => {
     setIsRegisterOpen,
     setIsLoginOpen,
     setIsForgetOpen,
-    setIsSuccessModalOpen,
+    setIsInitSubscribeOpen,
   } = properties
 
   const formMethods = useForm<TLoginSchema>({
@@ -37,7 +37,7 @@ export const FormLogin = (properties: TProperties) => {
 
   const onSubmit = handleSubmit((data) => {
     console.log('data', data) // eslint-disable-line no-console
-    setIsSuccessModalOpen(true)
+    setIsInitSubscribeOpen(true)
     setIsLoginOpen(false)
   })