From 6b2ba85642c56960d573c69358d73f9cf86d8eed Mon Sep 17 00:00:00 2001 From: Ardeman Date: Tue, 25 Feb 2025 05:18:40 +0800 Subject: [PATCH] feat: enhance SuccessModal and News context for improved modal management and subscription flow --- app/components/popup/success-modal.tsx | 41 ++++++++------------------ app/contexts/news.tsx | 18 ++++++++--- app/layouts/news/default.tsx | 18 +++++++++-- app/layouts/news/form-login.tsx | 14 ++++----- 4 files changed, 49 insertions(+), 42 deletions(-) diff --git a/app/components/popup/success-modal.tsx b/app/components/popup/success-modal.tsx index 4f7627d..b5519c4 100644 --- a/app/components/popup/success-modal.tsx +++ b/app/components/popup/success-modal.tsx @@ -11,45 +11,34 @@ import { LeftArrow } from '~/components/icons/left-arrow' import { Button } from '~/components/ui/button' import { APP } from '~/data/meta' -type ModalProperties = { - isOpen: boolean +export type ModalProperties = { onClose: () => void children?: ReactNode - type: - | 'success' - | 'error' - | 'warning' - | 'success-reset-password' - | 'success-register' - | 'success-payment' + isOpen?: 'error' | 'warning' | 'resetPassword' | 'register' | 'payment' } + type DescriptionMap = { - [key in ModalProperties['type']]: string + [key in Exclude]: string } const DESCRIPTIONS: DescriptionMap = { - 'success-reset-password': - 'Link Reset Password telah dikirimkan ke email anda', - 'success-register': 'Selamat! pendaftaran anda berhasil!', - 'success-payment': 'Selamat! Pembayaran anda berhasil!', + resetPassword: 'Link Reset Password telah dikirimkan ke email anda', + register: 'Selamat! Pendaftaran anda berhasil!', + payment: 'Selamat! Pembayaran anda berhasil!', warning: 'Mohon maaf fitur berikut hanya untuk anggota yang sudah tersubscribe', error: 'Terjadi kesalahan. Silakan coba lagi.', - success: '', } -export const SuccessModal = ({ - isOpen, - onClose, - type = 'success-register', -}: ModalProperties) => { +export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => { if (!isOpen) return - const message = DESCRIPTIONS[type] || 'Terjadi kesalahan. Silakan coba lagi.' + const message = + DESCRIPTIONS[isOpen] || 'Terjadi kesalahan. Silakan coba lagi.' return (
- {[ - 'success-reset-password', - 'success-register', - 'success-payment', - ].includes(type) && ( + {['resetPassword', 'register', 'payment'].includes(isOpen) && (
)} - {type === 'warning' && ( + {isOpen === 'warning' && (
> isRegisterOpen: boolean setIsRegisterOpen: Dispatch> isForgetOpen: boolean setForgetOpen: Dispatch> - isSuccessModalOpen: boolean - setIsSuccessModalOpen: Dispatch> + isSuccessModalOpen?: ModalProperties['isOpen'] + setIsSuccessModalOpen?: Dispatch< + SetStateAction + > + isInitSubscribeOpen: boolean + setIsInitSubscribeOpen: Dispatch> } const NewsContext = createContext(undefined) @@ -24,7 +30,9 @@ export const NewsProvider = ({ children }: PropsWithChildren) => { const [isLoginOpen, setIsLoginOpen] = useState(false) const [isRegisterOpen, setIsRegisterOpen] = useState(false) const [isForgetOpen, setForgetOpen] = useState(false) - const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(false) + const [isSuccessModalOpen, setIsSuccessModalOpen] = + useState() + const [isInitSubscribeOpen, setIsInitSubscribeOpen] = useState(false) return ( { setForgetOpen, isSuccessModalOpen, setIsSuccessModalOpen, + isInitSubscribeOpen, + setIsInitSubscribeOpen, }} > {children} diff --git a/app/layouts/news/default.tsx b/app/layouts/news/default.tsx index 56d648c..ad4dc32 100644 --- a/app/layouts/news/default.tsx +++ b/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 (
@@ -50,7 +53,7 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => { setIsRegisterOpen={setIsRegisterOpen} setIsLoginOpen={setIsLoginOpen} setIsForgetOpen={setForgetOpen} - setIsSuccessModalOpen={setIsSuccessModalOpen} + setIsInitSubscribeOpen={setIsInitSubscribeOpen} /> @@ -70,12 +73,21 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => { + setIsInitSubscribeOpen(false)} + description="Selamat Datang, silakan Pilih Subscription Anda untuk melanjutkan!" + > + + + { - setIsSuccessModalOpen(false) + if (setIsSuccessModalOpen) { + setIsSuccessModalOpen(undefined) + } }} - type="warning" />
) diff --git a/app/layouts/news/form-login.tsx b/app/layouts/news/form-login.tsx index 2cb5a84..03408e8 100644 --- a/app/layouts/news/form-login.tsx +++ b/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 type TProperties = { - setIsRegisterOpen: Dispatch> - setIsLoginOpen: Dispatch> - setIsForgetOpen: Dispatch> - setIsSuccessModalOpen: Dispatch> + 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({ @@ -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) })