From a261df3a96dd952c4a74bcaf7a3de0eea363c73c Mon Sep 17 00:00:00 2001 From: "fredy.siswanto" Date: Sun, 23 Feb 2025 14:59:26 +0700 Subject: [PATCH] feat: remove unused success popups and implement a unified SuccessModal component --- app/components/popup/modal.tsx | 20 +-- app/components/popup/succes-payment.tsx | 24 ---- app/components/popup/succes-register.tsx | 49 -------- app/components/popup/succes-reset-pass.tsx | 51 -------- app/components/popup/success-modal.tsx | 137 +++++++++++++++++++++ app/contexts/news.tsx | 5 + app/layouts/news/default.tsx | 11 ++ public/images/warning.svg | 34 +++++ 8 files changed, 197 insertions(+), 134 deletions(-) delete mode 100644 app/components/popup/succes-payment.tsx delete mode 100644 app/components/popup/succes-register.tsx delete mode 100644 app/components/popup/succes-reset-pass.tsx create mode 100644 app/components/popup/success-modal.tsx create mode 100644 public/images/warning.svg diff --git a/app/components/popup/modal.tsx b/app/components/popup/modal.tsx index d814d6f..c7bea37 100644 --- a/app/components/popup/modal.tsx +++ b/app/components/popup/modal.tsx @@ -37,16 +37,16 @@ export const PopupModal = ({ />
- - + + {APP.title} -
-
-
- {APP.title} -
- -
-
- - ) -} diff --git a/app/components/popup/succes-register.tsx b/app/components/popup/succes-register.tsx deleted file mode 100644 index 284ee81..0000000 --- a/app/components/popup/succes-register.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { Button } from '@headlessui/react' -import { Link } from 'react-router' - -import { LeftArrow } from '~/components/icons/left-arrow' -import { APP } from '~/data/meta' - -export default function PopupSuccesRegister() { - return ( -
-
-
- - - -
- -
- - {APP.title} - -
- -
-

Selamat! pendaftaran anda berhasil!

-
- {APP.title} -
- -
-
-
- ) -} diff --git a/app/components/popup/succes-reset-pass.tsx b/app/components/popup/succes-reset-pass.tsx deleted file mode 100644 index 8808d01..0000000 --- a/app/components/popup/succes-reset-pass.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { Button } from '@headlessui/react' -import { Link } from 'react-router' - -import { LeftArrow } from '~/components/icons/left-arrow' -import { APP } from '~/data/meta' - -export default function PopupSuccessResetPass() { - return ( -
-
-
- - - -
- -
- - {APP.title} - -
- -
-

- Link Reset Password telah dikirmkan ke email anda -

-
- {APP.title} -
- -
-
-
- ) -} diff --git a/app/components/popup/success-modal.tsx b/app/components/popup/success-modal.tsx new file mode 100644 index 0000000..4f7627d --- /dev/null +++ b/app/components/popup/success-modal.tsx @@ -0,0 +1,137 @@ +import { + Description, + Dialog, + DialogBackdrop, + DialogPanel, + DialogTitle, +} from '@headlessui/react' +import type { ReactNode } from 'react' + +import { LeftArrow } from '~/components/icons/left-arrow' +import { Button } from '~/components/ui/button' +import { APP } from '~/data/meta' + +type ModalProperties = { + isOpen: boolean + onClose: () => void + children?: ReactNode + type: + | 'success' + | 'error' + | 'warning' + | 'success-reset-password' + | 'success-register' + | 'success-payment' +} +type DescriptionMap = { + [key in ModalProperties['type']]: 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!', + 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) => { + if (!isOpen) return + + const message = DESCRIPTIONS[type] || 'Terjadi kesalahan. Silakan coba lagi.' + + return ( + + +
+ + + + {APP.title} + + + + {message} + + +
+
+
+ {[ + 'success-reset-password', + 'success-register', + 'success-payment', + ].includes(type) && ( +
+ {APP.title} + +
+ )} + {type === 'warning' && ( +
+ {APP.title} +
+ + +
+
+ )} +
+
+
+ +
+ + ) +} diff --git a/app/contexts/news.tsx b/app/contexts/news.tsx index 54a00ea..bedf5a7 100644 --- a/app/contexts/news.tsx +++ b/app/contexts/news.tsx @@ -14,6 +14,8 @@ type NewsContextProperties = { setIsRegisterOpen: Dispatch> isForgetOpen: boolean setForgetOpen: Dispatch> + isSuccessOpen: boolean + setIsSuccessOpen: Dispatch> } const NewsContext = createContext(undefined) @@ -22,6 +24,7 @@ export const NewsProvider = ({ children }: PropsWithChildren) => { const [isLoginOpen, setIsLoginOpen] = useState(false) const [isRegisterOpen, setIsRegisterOpen] = useState(false) const [isForgetOpen, setForgetOpen] = useState(false) + const [isSuccessOpen, setIsSuccessOpen] = useState(true) return ( { setIsRegisterOpen, isForgetOpen, setForgetOpen, + isSuccessOpen, + setIsSuccessOpen, }} > {children} diff --git a/app/layouts/news/default.tsx b/app/layouts/news/default.tsx index 9683fae..12a1327 100644 --- a/app/layouts/news/default.tsx +++ b/app/layouts/news/default.tsx @@ -1,6 +1,7 @@ import { type PropsWithChildren } from 'react' import { PopupModal } from '~/components/popup/modal' +import { SuccessModal } from '~/components/popup/success-modal' import Banner from '~/components/ui/banner' import FormForgotPassword from '~/components/ui/form-forgot-password' import { FormLogin } from '~/components/ui/form-login' @@ -21,6 +22,8 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => { setIsRegisterOpen, isForgetOpen, setForgetOpen, + isSuccessOpen, + setIsSuccessOpen, } = useNewsContext() return (
@@ -65,6 +68,14 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => { > + + { + setIsSuccessOpen(false) + }} + type="warning" + />
) } diff --git a/public/images/warning.svg b/public/images/warning.svg new file mode 100644 index 0000000..4c31590 --- /dev/null +++ b/public/images/warning.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +