feat: remove unused success popups and implement a unified SuccessModal component
This commit is contained in:
fredy.siswanto
@@ -37,16 +37,16 @@ export const PopupModal = ({
|
||||
/>
|
||||
<div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-4 max-sm:bg-white sm:items-center">
|
||||
<DialogPanel className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="top-4 left-4 items-center lg:hidden"
|
||||
>
|
||||
<LeftArrow
|
||||
width={50}
|
||||
height={50}
|
||||
/>
|
||||
</button>
|
||||
<DialogTitle className="flex justify-center">
|
||||
<DialogTitle className="relative flex justify-center">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-0 left-0 items-center lg:hidden"
|
||||
>
|
||||
<LeftArrow
|
||||
width={50}
|
||||
height={50}
|
||||
/>
|
||||
</button>
|
||||
<img
|
||||
src={APP.logo}
|
||||
alt={APP.title}
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
import { Button } from '@headlessui/react'
|
||||
|
||||
import { APP } from '~/data/meta'
|
||||
|
||||
export default function PopupSuccessPayment() {
|
||||
return (
|
||||
<>
|
||||
<div className="relative flex flex-col items-center justify-center">
|
||||
<div className="mb-4 p-4 text-center">
|
||||
<div className="flex justify-center">
|
||||
<img
|
||||
src={'/public/images/back-to-home.svg'}
|
||||
alt={APP.title}
|
||||
className="h-[300px]"
|
||||
/>
|
||||
</div>
|
||||
<Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
|
||||
Back to Home
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<div className="w-full max-w-md p-6">
|
||||
<div className="absolute top-[80px] left-[50px]">
|
||||
<Link
|
||||
to="/#"
|
||||
className="mt-2 h-full py-2"
|
||||
>
|
||||
<LeftArrow
|
||||
width={'70px'}
|
||||
height={'70px'}
|
||||
></LeftArrow>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mb-6 flex justify-center">
|
||||
<Link to="/news">
|
||||
<img
|
||||
src={APP.logo}
|
||||
alt={APP.title}
|
||||
className="h-[80px]"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 p-4 text-center">
|
||||
<p className="text-[#565658]">Selamat! pendaftaran anda berhasil!</p>
|
||||
<div className="my-10 flex justify-center">
|
||||
<img
|
||||
src={'/public/images/back-to-home.svg'}
|
||||
alt={APP.title}
|
||||
className="h-[350px]"
|
||||
/>
|
||||
</div>
|
||||
<Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
|
||||
Back to Home
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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 (
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<div className="w-full max-w-md p-6">
|
||||
<div className="absolute top-[80px] left-[50px]">
|
||||
<Link
|
||||
to="/#"
|
||||
className="mt-2 h-full py-2"
|
||||
>
|
||||
<LeftArrow
|
||||
width={'70px'}
|
||||
height={'70px'}
|
||||
></LeftArrow>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mb-6 flex justify-center">
|
||||
<Link to="/news">
|
||||
<img
|
||||
src={APP.logo}
|
||||
alt={APP.title}
|
||||
className="h-[80px]"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 p-4 text-center">
|
||||
<p className="text-[#565658]">
|
||||
Link Reset Password telah dikirmkan ke email anda
|
||||
</p>
|
||||
<div className="my-10 flex justify-center">
|
||||
<img
|
||||
src={'/public/images/back-to-home.svg'}
|
||||
alt={APP.title}
|
||||
className="h-[350px]"
|
||||
/>
|
||||
</div>
|
||||
<Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
|
||||
Back to Home
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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 (
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
onClose={onClose}
|
||||
className="relative z-50"
|
||||
transition
|
||||
>
|
||||
<DialogBackdrop
|
||||
className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
|
||||
transition
|
||||
/>
|
||||
<div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-4 max-sm:bg-white sm:items-center">
|
||||
<DialogPanel className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg">
|
||||
<DialogTitle className="relative flex justify-center">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-0 left-0 items-center lg:hidden"
|
||||
>
|
||||
<LeftArrow
|
||||
width={50}
|
||||
height={50}
|
||||
/>
|
||||
</button>
|
||||
<img
|
||||
src={APP.logo}
|
||||
alt={APP.title}
|
||||
className="h-[80px]"
|
||||
/>
|
||||
</DialogTitle>
|
||||
|
||||
<Description className="text-center text-[#565658]">
|
||||
{message}
|
||||
</Description>
|
||||
|
||||
<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) && (
|
||||
<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>
|
||||
)}
|
||||
{type === '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>
|
||||
</div>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user