100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
Dialog,
|
|
DialogTrigger,
|
|
Heading,
|
|
Modal,
|
|
ModalOverlay,
|
|
} from "react-aria-components"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { trpc } from "@/lib/trpc/client"
|
|
|
|
import { Delete } from "@/components/Icons"
|
|
import LoadingSpinner from "@/components/LoadingSpinner"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import { toast } from "@/components/TempDesignSystem/Toasts"
|
|
|
|
import styles from "./deleteCreditCardConfirmation.module.css"
|
|
|
|
import type { DeleteCreditCardConfirmationProps } from "@/types/components/myPages/myProfile/creditCards"
|
|
|
|
export default function DeleteCreditCardConfirmation({
|
|
card,
|
|
}: DeleteCreditCardConfirmationProps) {
|
|
const intl = useIntl()
|
|
const trpcUtils = trpc.useUtils()
|
|
|
|
const deleteCard = trpc.user.creditCard.delete.useMutation({
|
|
onSuccess() {
|
|
trpcUtils.user.creditCards.invalidate()
|
|
|
|
toast.success(
|
|
intl.formatMessage({ id: "Your card was successfully removed!" })
|
|
)
|
|
},
|
|
onError() {
|
|
toast.error(
|
|
intl.formatMessage({
|
|
id: "Something went wrong and we couldn't remove your card. Please try again later.",
|
|
})
|
|
)
|
|
},
|
|
})
|
|
|
|
const lastFourDigits = card.truncatedNumber.slice(-4)
|
|
|
|
return (
|
|
<div>
|
|
<DialogTrigger>
|
|
<Button variant="icon" theme="base" intent="text">
|
|
<Delete color="burgundy" />
|
|
</Button>
|
|
<ModalOverlay className={styles.overlay} isDismissable>
|
|
<Modal className={styles.modal}>
|
|
<Dialog role="alertdialog">
|
|
{({ close }) => (
|
|
<div className={styles.container}>
|
|
<Heading slot="title" className={styles.title}>
|
|
{intl.formatMessage({
|
|
id: "Remove card from member profile",
|
|
})}
|
|
</Heading>
|
|
<p className={styles.bodyText}>
|
|
{`${intl.formatMessage({
|
|
id: "Are you sure you want to remove the card ending with",
|
|
})} ${lastFourDigits} ${intl.formatMessage({ id: "from your member profile?" })}`}
|
|
</p>
|
|
|
|
{deleteCard.isPending ? (
|
|
<LoadingSpinner />
|
|
) : (
|
|
<div className={styles.buttonContainer}>
|
|
<Button intent="secondary" theme="base" onClick={close}>
|
|
{intl.formatMessage({ id: "No, keep card" })}
|
|
</Button>
|
|
<Button
|
|
intent="primary"
|
|
theme="base"
|
|
onClick={() => {
|
|
deleteCard.mutate(
|
|
{ creditCardId: card.id },
|
|
{ onSettled: close }
|
|
)
|
|
}}
|
|
>
|
|
{intl.formatMessage({ id: "Yes, remove my card" })}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</Dialog>
|
|
</Modal>
|
|
</ModalOverlay>
|
|
</DialogTrigger>
|
|
</div>
|
|
)
|
|
}
|