feat(SW-245): Delete credit card

components/Profile/AddCreditCardButton/index.tsx

@@ -1,47 +1,53 @@
 "use client"
 
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import { useEffect } from "react"
+import { useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
-import { toast } from "sonner"
 
 import { trpc } from "@/lib/trpc/client"
 
 import { PlusCircleIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
+import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 
 import styles from "./addCreditCardButton.module.css"
 
-let hasRunOnce = false
-
 function useAddCardResultToast() {
+  const hasRunOnce = useRef(false)
   const intl = useIntl()
   const router = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()
 
   useEffect(() => {
-    if (hasRunOnce) return
+    if (hasRunOnce.current) return
 
     const success = searchParams.get("success")
     const failure = searchParams.get("failure")
+    const cancel = searchParams.get("cancel")
+    const error = searchParams.get("error")
 
     if (success) {
-      // setTimeout is used to make sure DOM is loaded before triggering toast. See documentation for more info: https://sonner.emilkowal.ski/toast#render-toast-on-page-load
-      setTimeout(() => {
-        toast.success(
-          intl.formatMessage({ id: "Your card was successfully saved!" })
-        )
-      })
-    } else if (failure) {
-      setTimeout(() => {
-        toast.error(intl.formatMessage({ id: "Something went wrong!" }))
-      })
+      toast.success(
+        intl.formatMessage({ id: "Your card was successfully saved!" })
+      )
+    } else if (cancel) {
+      toast.warning(
+        intl.formatMessage({
+          id: "You canceled adding a new credit card.",
+        })
+      )
+    } else if (failure || error) {
+      toast.error(
+        intl.formatMessage({
+          id: "Something went wrong and we couldn't add your card. Please try again later.",
+        })
+      )
     }
 
     router.replace(pathname)
-    hasRunOnce = true
+    hasRunOnce.current = true
   }, [intl, pathname, router, searchParams])
 }
 
@@ -51,10 +57,25 @@ export default function AddCreditCardButton() {
   const lang = useLang()
   useAddCardResultToast()
 
-  const initiateAddCard = trpc.user.initiateSaveCard.useMutation({
-    onSuccess: (result) => (result ? router.push(result.attribute.link) : null),
-    onError: () =>
-      toast.error(intl.formatMessage({ id: "Something went wrong!" })),
+  const initiateAddCard = trpc.user.creditCard.add.useMutation({
+    onSuccess: (result) => {
+      if (result?.attribute.link) {
+        router.push(result.attribute.link)
+      } else {
+        toast.error(
+          intl.formatMessage({
+            id: "We could not add a card right now, please try again later.",
+          })
+        )
+      }
+    },
+    onError: () => {
+      toast.error(
+        intl.formatMessage({
+          id: "An error occurred when adding a credit card, please try again later.",
+        })
+      )
+    },
   })
 
   return (