ChangePaymentMethodModal.tsx75 lines · main

1	import { useParams } from 'common'
2	import { toast } from 'sonner'
3	import { Button, Modal } from 'ui'
4
5	import { useOrganizationPaymentMethodMarkAsDefaultMutation } from '@/data/organizations/organization-payment-method-default-mutation'
6	import type { OrganizationPaymentMethod } from '@/data/organizations/organization-payment-methods-query'
7
8	export interface ChangePaymentMethodModalProps {
9	selectedPaymentMethod?: OrganizationPaymentMethod
10	onClose: () => void
11	}
12
13	const ChangePaymentMethodModal = ({
14	selectedPaymentMethod,
15	onClose,
16	}: ChangePaymentMethodModalProps) => {
17	const { slug } = useParams()
18	const { mutate: markAsDefault, isPending: isUpdating } =
19	useOrganizationPaymentMethodMarkAsDefaultMutation({
20	onSuccess: () => {
21	toast.success(
22	`Successfully changed payment method to the card ending with ${
23	selectedPaymentMethod!.card!.last4
24	}`
25	)
26	onClose()
27	},
28	onError: (error) => {
29	toast.error(`Failed to change payment method: ${error.message}`)
30	},
31	})
32
33	const onConfirmUpdate = async () => {
34	if (!slug) return console.error('Slug is required')
35	if (!selectedPaymentMethod) return console.error('Card ID is required')
36
37	markAsDefault({
38	slug,
39	paymentMethodId: selectedPaymentMethod.id,
40	})
41	}
42
43	return (
44	<Modal
45	visible={selectedPaymentMethod !== undefined}
46	size="medium"
47	header={`Confirm to use payment method ending with ${selectedPaymentMethod?.card?.last4}`}
48	onCancel={() => onClose()}
49	customFooter={
50	<div className="flex items-center gap-2">
51	<Button type="default" disabled={isUpdating} onClick={() => onClose()}>
52	Cancel
53	</Button>
54	<Button
55	type="primary"
56	disabled={isUpdating}
57	loading={isUpdating}
58	onClick={onConfirmUpdate}
59	>
60	Confirm
61	</Button>
62	</div>
63	}
64	>
65	<Modal.Content>
66	<p className="text-sm">
67	Upon clicking confirm, all future charges will be deducted from the card ending with{' '}
68	{selectedPaymentMethod?.card?.last4}. There are no immediate charges.
69	</p>
70	</Modal.Content>
71	</Modal>
72	)
73	}
74
75	export default ChangePaymentMethodModal