DeletePaymentMethodModal.tsx69 lines · main

1	import { useParams } from 'common'
2	import { toast } from 'sonner'
3	import { Button, Modal } from 'ui'
4	import { Admonition } from 'ui-patterns'
5
6	import { useOrganizationPaymentMethodDeleteMutation } from '@/data/organizations/organization-payment-method-delete-mutation'
7	import type { OrganizationPaymentMethod } from '@/data/organizations/organization-payment-methods-query'
8
9	export interface DeletePaymentMethodModalProps {
10	selectedPaymentMethod?: OrganizationPaymentMethod
11	onClose: () => void
12	}
13
14	const DeletePaymentMethodModal = ({
15	selectedPaymentMethod,
16	onClose,
17	}: DeletePaymentMethodModalProps) => {
18	const { slug } = useParams()
19
20	const { mutate: deletePayment, isPending: isDeleting } =
21	useOrganizationPaymentMethodDeleteMutation({
22	onSuccess: () => {
23	toast.success(
24	`Successfully removed payment method ending with ${selectedPaymentMethod?.card?.last4}`
25	)
26	onClose()
27	},
28	})
29
30	const onConfirmDelete = async () => {
31	if (!slug) return console.error('Slug is required')
32	if (!selectedPaymentMethod) return console.error('Card ID is required')
33	deletePayment({ slug, cardId: selectedPaymentMethod.id })
34	}
35
36	return (
37	<Modal
38	visible={selectedPaymentMethod !== undefined}
39	size="medium"
40	header={`Confirm to delete payment method ending with ${selectedPaymentMethod?.card?.last4}`}
41	onCancel={() => onClose()}
42	customFooter={
43	<div className="flex items-center gap-2">
44	<Button type="default" disabled={isDeleting} onClick={() => onClose()}>
45	Cancel
46	</Button>
47	<Button
48	type="primary"
49	disabled={isDeleting}
50	loading={isDeleting}
51	onClick={onConfirmDelete}
52	>
53	Confirm
54	</Button>
55	</div>
56	}
57	>
58	<Modal.Content>
59	<Admonition
60	type="default"
61	title="This will permanently delete your payment method."
62	description="You can re-add the payment method any time."
63	/>
64	</Modal.Content>
65	</Modal>
66	)
67	}
68
69	export default DeletePaymentMethodModal