feat: enhance SuccessModal and conditional rendering for login and subscription options

app/components/popup/success-modal.tsx

@@ -6,10 +6,13 @@ import {
   DialogTitle,
 } from '@headlessui/react'
 import type { ReactNode } from 'react'
+import { useRouteLoaderData } from 'react-router'
 
 import { LeftArrow } from '~/components/icons/left-arrow'
 import { Button } from '~/components/ui/button'
 import { APP } from '~/configs/meta'
+import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_layout'
 
 export type ModalProperties = {
   onClose: () => void
@@ -31,6 +34,10 @@ const DESCRIPTIONS: DescriptionMap = {
 }
 
 export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
+  const { setIsLoginOpen, setIsInitSubscribeOpen } = useNewsContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const userToken = loaderData?.userToken
+
   const message = isOpen
     ? DESCRIPTIONS[isOpen]
     : 'Terjadi kesalahan. Silakan coba lagi.'
@@ -74,10 +81,10 @@ export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
 
           <div className="relative">
             <div className="relative flex flex-col items-center justify-center">
-              <div className="mb-4 p-4 text-center">
-                {isOpen &&
-                  ['resetPassword', 'register', 'payment'].includes(isOpen) && (
-                    <div className="justify-center">
+              {['resetPassword', 'register', 'payment'].includes(
+                isOpen || '',
+              ) && (
+                <>
                   <img
                     src={'/images/back-to-home.svg'}
                     alt={APP.title}
@@ -85,37 +92,45 @@ export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
                   />
                   <Button
                     className="mt-5 w-full rounded-md"
-                        variant={'newsPrimary'}
+                    variant="newsPrimary"
                     onClick={onClose}
                   >
                     Back to Home
                   </Button>
-                    </div>
+                </>
               )}
               {isOpen === 'warning' && (
-                  <div className="justify-center">
+                <>
                   <img
                     src={'/images/warning.svg'}
                     alt={APP.title}
                     className="h-[300px]"
                   />
-                    <div>
+                  {userToken ? (
                     <Button
                       className="mt-5 w-full rounded-md"
-                        variant={'newsPrimary'}
-                      >
-                        Login
-                      </Button>
-                      <Button
-                        className="mt-5 w-full rounded-md"
-                        variant={'newsSecondary'}
+                      variant="newsSecondary"
+                      onClick={() => {
+                        onClose()
+                        setIsInitSubscribeOpen(true)
+                      }}
                     >
                       Select Subscription
                     </Button>
-                    </div>
-                  </div>
+                  ) : (
+                    <Button
+                      className="mt-5 w-full rounded-md"
+                      variant="newsPrimary"
+                      onClick={() => {
+                        onClose()
+                        setIsLoginOpen(true)
+                      }}
+                    >
+                      Login
+                    </Button>
+                  )}
+                </>
               )}
-              </div>
             </div>
           </div>
         </DialogPanel>