feat(SW-245): Delete credit card

components/Profile/DeleteCreditCardButton/index.tsx

@@ -0,0 +1,40 @@
+"use client"
+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"
+
+export default function DeleteCreditCardButton({
+  creditCardId,
+}: {
+  creditCardId: string
+}) {
+  const { formatMessage } = useIntl()
+  const trpcUtils = trpc.useUtils()
+
+  const deleteCreditCardMutation = trpc.user.creditCard.delete.useMutation({
+    onSuccess() {
+      trpcUtils.user.creditCards.invalidate()
+      toast.success(formatMessage({ id: "Credit card deleted successfully" }))
+    },
+    onError() {
+      toast.error(
+        formatMessage({
+          id: "Failed to delete credit card, please try again later.",
+        })
+      )
+    },
+  })
+  async function handleDelete() {
+    deleteCreditCardMutation.mutate({ creditCardId })
+  }
+  return (
+    <Button variant="icon" theme="base" intent="text" onClick={handleDelete}>
+      <Delete color="burgundy" />
+    </Button>
+  )
+}