From b0f96c33a5c6e2d144ffd6aa5ae5d47f08482f7a Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sun, 2 Mar 2025 15:46:44 +0800
Subject: [PATCH] feat: enhance SuccessModal and conditional rendering for
 login and subscription options

---
 app/components/popup/success-modal.tsx | 97 +++++++++++++++-----------
 1 file changed, 56 insertions(+), 41 deletions(-)

diff --git a/app/components/popup/success-modal.tsx b/app/components/popup/success-modal.tsx
index 1a02e51..d69b4df 100644
--- a/app/components/popup/success-modal.tsx
+++ b/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,48 +81,56 @@ 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">
-                      <img
-                        src={'/images/back-to-home.svg'}
-                        alt={APP.title}
-                        className="h-[300px]"
-                      />
-                      <Button
-                        className="mt-5 w-full rounded-md"
-                        variant={'newsPrimary'}
-                        onClick={onClose}
-                      >
-                        Back to Home
-                      </Button>
-                    </div>
+              {['resetPassword', 'register', 'payment'].includes(
+                isOpen || '',
+              ) && (
+                <>
+                  <img
+                    src={'/images/back-to-home.svg'}
+                    alt={APP.title}
+                    className="h-[300px]"
+                  />
+                  <Button
+                    className="mt-5 w-full rounded-md"
+                    variant="newsPrimary"
+                    onClick={onClose}
+                  >
+                    Back to Home
+                  </Button>
+                </>
+              )}
+              {isOpen === 'warning' && (
+                <>
+                  <img
+                    src={'/images/warning.svg'}
+                    alt={APP.title}
+                    className="h-[300px]"
+                  />
+                  {userToken ? (
+                    <Button
+                      className="mt-5 w-full rounded-md"
+                      variant="newsSecondary"
+                      onClick={() => {
+                        onClose()
+                        setIsInitSubscribeOpen(true)
+                      }}
+                    >
+                      Select Subscription
+                    </Button>
+                  ) : (
+                    <Button
+                      className="mt-5 w-full rounded-md"
+                      variant="newsPrimary"
+                      onClick={() => {
+                        onClose()
+                        setIsLoginOpen(true)
+                      }}
+                    >
+                      Login
+                    </Button>
                   )}
-                {isOpen === 'warning' && (
-                  <div className="justify-center">
-                    <img
-                      src={'/images/warning.svg'}
-                      alt={APP.title}
-                      className="h-[300px]"
-                    />
-                    <div>
-                      <Button
-                        className="mt-5 w-full rounded-md"
-                        variant={'newsPrimary'}
-                      >
-                        Login
-                      </Button>
-                      <Button
-                        className="mt-5 w-full rounded-md"
-                        variant={'newsSecondary'}
-                      >
-                        Select Subscription
-                      </Button>
-                    </div>
-                  </div>
-                )}
-              </div>
+                </>
+              )}
             </div>
           </div>
         </DialogPanel>