DeletePaymentMethodModal() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Billing/Payment/PaymentMethods/DeletePaymentMethodModal.tsx lines 14–67

const DeletePaymentMethodModal = ({
  selectedPaymentMethod,
  onClose,
}: DeletePaymentMethodModalProps) => {
  const { slug } = useParams()

  const { mutate: deletePayment, isPending: isDeleting } =
    useOrganizationPaymentMethodDeleteMutation({
      onSuccess: () => {
        toast.success(
          `Successfully removed payment method ending with ${selectedPaymentMethod?.card?.last4}`
        )
        onClose()
      },
    })

  const onConfirmDelete = async () => {
    if (!slug) return console.error('Slug is required')
    if (!selectedPaymentMethod) return console.error('Card ID is required')
    deletePayment({ slug, cardId: selectedPaymentMethod.id })
  }

  return (
    <Modal
      visible={selectedPaymentMethod !== undefined}
      size="medium"
      header={`Confirm to delete payment method ending with ${selectedPaymentMethod?.card?.last4}`}
      onCancel={() => onClose()}
      customFooter={
        <div className="flex items-center gap-2">
          <Button type="default" disabled={isDeleting} onClick={() => onClose()}>
            Cancel
          </Button>
          <Button
            type="primary"
            disabled={isDeleting}
            loading={isDeleting}
            onClick={onConfirmDelete}
          >
            Confirm
          </Button>
        </div>
      }
    >
      <Modal.Content>
        <Admonition
          type="default"
          title="This will permanently delete your payment method."
          description="You can re-add the payment method any time."
        />
      </Modal.Content>
    </Modal>
  )
}