mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 19:35:06 +03:00
Gildas Garcia
e26303cf9c
## Problem We still use the deprecated `Modal` for: - Adding a new payment card - Deleting a payment a card - Changing the payment method - Displaying the spend cap details when creating a new org ## Solution - use `Dialog` instead <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Updated billing dialogs (add/change/delete payment methods and spend cap) to use a newer dialog/alert dialog system. * Result: more consistent dialog behavior, clearer confirmation flows, and improved handling of loading/confirmation states for payment actions. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46385?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import { useParams } from 'common'
|
|
import { toast } from 'sonner'
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from 'ui'
|
|
|
|
import { useOrganizationPaymentMethodMarkAsDefaultMutation } from '@/data/organizations/organization-payment-method-default-mutation'
|
|
import type { OrganizationPaymentMethod } from '@/data/organizations/organization-payment-methods-query'
|
|
|
|
export interface ChangePaymentMethodModalProps {
|
|
selectedPaymentMethod?: OrganizationPaymentMethod
|
|
onClose: () => void
|
|
}
|
|
|
|
const ChangePaymentMethodModal = ({
|
|
selectedPaymentMethod,
|
|
onClose,
|
|
}: ChangePaymentMethodModalProps) => {
|
|
const { slug } = useParams()
|
|
const { mutateAsync: markAsDefault } = useOrganizationPaymentMethodMarkAsDefaultMutation({
|
|
onSuccess: () => {
|
|
toast.success(
|
|
`Successfully changed payment method to the card ending with ${
|
|
selectedPaymentMethod!.card!.last4
|
|
}`
|
|
)
|
|
onClose()
|
|
},
|
|
onError: (error) => {
|
|
toast.error(`Failed to change payment method: ${error.message}`)
|
|
},
|
|
})
|
|
|
|
const onConfirmUpdate = async () => {
|
|
if (!slug) return console.error('Slug is required')
|
|
if (!selectedPaymentMethod) return console.error('Card ID is required')
|
|
|
|
await markAsDefault({
|
|
slug,
|
|
paymentMethodId: selectedPaymentMethod.id,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<AlertDialog open={selectedPaymentMethod !== undefined} onOpenChange={() => onClose()}>
|
|
<AlertDialogContent size="medium">
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>{`Confirm to use payment method ending with ${selectedPaymentMethod?.card?.last4}`}</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Upon clicking confirm, all future charges will be deducted from the card ending with{' '}
|
|
{selectedPaymentMethod?.card?.last4}. There are no immediate charges.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction onClick={onConfirmUpdate}>Confirm</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
)
|
|
}
|
|
|
|
export default ChangePaymentMethodModal
|