Merged in feat/SW-104-add-card (pull request #410)

Feat/SW-104 add card

* feat: add api endpoints for adding and removing credit card

* feat(SW-104): Added Sonner toast lib

* feat(SW-104): Add route handlers for add card flow

* feat(SW-104): Added link to route handler and trigger toast when query params from callback is set

* feat(SW-104): Added translations for add card success toast

* feat(SW-104): Refactored to use client request for initiate save card

* fix(SW-104): Return proper status codes when initiating save card fails

* fix(SW-104): remove delete card endpoint because it was added in SW-245

* fix(SW-104): remove console.log

* fix(SW-104): Use api.post for save card request

* fix(SW-104): move function declaration above export

* fix(SW-104): handle response of save card and use Lang enum

* fix(SW-104): added comment for why setTimeout is needed for toast and also removed lang prop

* fix(SW-104): added type for AddCreditCardButton props

* feat: add toasts

* fix(SW-104): start using toasts from ToastHandler and fix problem with duplicate toasts

* fix(SW-104): remove unnecessary wrapping div


Approved-by: Michael Zetterberg

components/Profile/AddCreditCardButton/addCreditCardButton.module.css

@@ -0,0 +1,3 @@
+.addCreditCardButton {
+  justify-self: flex-start;
+}

components/Profile/AddCreditCardButton/index.tsx

@@ -1,31 +1,83 @@
 "use client"
 
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useEffect } 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 useLang from "@/hooks/useLang"
 
-export default function AddCreditCardButton() {
-  const { formatMessage } = useIntl()
+import styles from "./addCreditCardButton.module.css"
+
+import { type AddCreditCardButtonProps } from "@/types/components/myPages/myProfile/addCreditCardButton"
+
+let hasRunOnce = false
+
+function useAddCardResultToast() {
+  const intl = useIntl()
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    if (hasRunOnce) return
+
+    const success = searchParams.get("success")
+    const failure = searchParams.get("failure")
+
+    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!" }))
+      })
+    }
+
+    router.replace(pathname)
+    hasRunOnce = true
+  }, [intl, pathname, router, searchParams])
+}
+
+export default function AddCreditCardButton({
+  redirectUrl,
+}: AddCreditCardButtonProps) {
+  const intl = useIntl()
+  const router = useRouter()
+  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!" })),
+  })
 
-  async function handleAddCreditCard() {
-    // TODO: initiate add credit card flow and redirect user to planet:
-    // const { url } = trpc.user.creditCard.add.useMutation()
-    // router.redirect(url)
-    console.log("Credit card added!")
-  }
   return (
     <Button
+      className={styles.addCreditCardButton}
       variant="icon"
       theme="base"
       intent="text"
-      onClick={handleAddCreditCard}
+      onClick={() =>
+        initiateAddCard.mutate({
+          language: lang,
+          mobileToken: false,
+          redirectUrl,
+        })
+      }
       wrapping
     >
       <PlusCircleIcon color="burgundy" />
-      {formatMessage({ id: "Add new card" })}
+      {intl.formatMessage({ id: "Add new card" })}
     </Button>
   )
 }