91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
|
import {
|
||
|
|
Description,
|
||
|
|
Dialog,
|
||
|
|
DialogBackdrop,
|
||
|
|
DialogPanel,
|
||
|
|
DialogTitle,
|
||
|
|
} from '@headlessui/react'
|
||
|
|
import { useEffect, type Dispatch, type SetStateAction } from 'react'
|
||
|
|
import toast from 'react-hot-toast'
|
||
|
|
import { useFetcher } from 'react-router'
|
||
|
|
|
||
|
|
import type { TSubscribePlanResponse } from '~/apis/common/get-subscribe-plan'
|
||
|
|
import { Button } from '~/components/ui/button'
|
||
|
|
import { formatNumberWithPeriods } from '~/utils/formatter'
|
||
|
|
|
||
|
|
type TProperties = {
|
||
|
|
selectedItem?: TSubscribePlanResponse
|
||
|
|
setSelectedItem: Dispatch<SetStateAction<TSubscribePlanResponse | undefined>>
|
||
|
|
}
|
||
|
|
|
||
|
|
export const DialogDelete = (properties: TProperties) => {
|
||
|
|
const { selectedItem, setSelectedItem } = properties || {}
|
||
|
|
const fetcher = useFetcher()
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (fetcher.data?.success === false) {
|
||
|
|
toast.error(fetcher.data?.message)
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (fetcher.data?.success === true) {
|
||
|
|
setSelectedItem(undefined)
|
||
|
|
toast.success('Subscribe plan berhasil dihapus!')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
|
|
}, [fetcher.data])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Dialog
|
||
|
|
open={!!selectedItem}
|
||
|
|
onClose={() => {
|
||
|
|
if (fetcher.state === 'idle') {
|
||
|
|
setSelectedItem(undefined)
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
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-0 max-sm:bg-white sm:items-center sm:p-4">
|
||
|
|
<DialogPanel
|
||
|
|
transition
|
||
|
|
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-start text-xl font-bold">
|
||
|
|
Anda akan menghapus subscribe plan berikut?
|
||
|
|
</DialogTitle>
|
||
|
|
<Description className="space-y-1 text-center text-[#565658]">
|
||
|
|
<p>{selectedItem?.name}</p>
|
||
|
|
<p>Length: {selectedItem?.length}</p>
|
||
|
|
<p>
|
||
|
|
Harga: Rp. {formatNumberWithPeriods(selectedItem?.price || 0)}
|
||
|
|
</p>
|
||
|
|
</Description>
|
||
|
|
<div className="flex justify-end">
|
||
|
|
<fetcher.Form
|
||
|
|
method="POST"
|
||
|
|
action={`/actions/admin/subscribe-plan/delete/${selectedItem?.id}`}
|
||
|
|
className="grid"
|
||
|
|
>
|
||
|
|
<Button
|
||
|
|
type="submit"
|
||
|
|
variant="newsDanger"
|
||
|
|
className="text-md h-[42px] rounded-md"
|
||
|
|
disabled={fetcher.state !== 'idle'}
|
||
|
|
isLoading={fetcher.state !== 'idle'}
|
||
|
|
>
|
||
|
|
Hapus
|
||
|
|
</Button>
|
||
|
|
</fetcher.Form>
|
||
|
|
</div>
|
||
|
|
</DialogPanel>
|
||
|
|
</div>
|
||
|
|
</Dialog>
|
||
|
|
)
|
||
|
|
}
|