legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ardeman 2025-03-02 15:46:44 +08:00
parent 82c0894ccd
commit b0f96c33a5
1 changed files with 56 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
app/components/popup/success-modal.tsx
View File

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