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

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<ModalProperties['isOpen'], undefined>]: 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 (
     <Dialog
-      open={isOpen}
+      open={!!isOpen}
       onClose={onClose}
       className="relative z-50"
       transition
@@ -84,11 +73,7 @@ export const SuccessModal = ({
           <div className="relative">
             <div className="relative flex flex-col items-center justify-center">
               <div className="mb-4 p-4 text-center">
-                {[
-                  'success-reset-password',
-                  'success-register',
-                  'success-payment',
-                ].includes(type) && (
+                {['resetPassword', 'register', 'payment'].includes(isOpen) && (
                   <div className="justify-center">
                     <img
                       src={'/images/back-to-home.svg'}
@@ -104,7 +89,7 @@ export const SuccessModal = ({
                     </Button>
                   </div>
                 )}
-                {type === 'warning' && (
+                {isOpen === 'warning' && (
                   <div className="justify-center">
                     <img
                       src={'/images/warning.svg'}