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

app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx

@@ -1,3 +1,4 @@
+import { env } from "@/env/server"
 import { serverClient } from "@/lib/trpc/server"
 
 import { CreditCard, Delete } from "@/components/Icons"
@@ -18,6 +19,8 @@ export default async function CreditCardSlot({ params }: PageArgs<LangParams>) {
   const { formatMessage } = await getIntl()
   const creditCards = await serverClient().user.creditCards()
 
+  const { lang } = params
+
   return (
     <section className={styles.container}>
       <article className={styles.content}>
@@ -41,7 +44,9 @@ export default async function CreditCardSlot({ params }: PageArgs<LangParams>) {
           ))}
         </div>
       ) : null}
-      <AddCreditCardButton />
+      <AddCreditCardButton
+        redirectUrl={`${env.PUBLIC_URL}/api/web/add-card-callback/${lang}`}
+      />
     </section>
   )
 }

app/[lang]/(live)/layout.tsx

@@ -9,6 +9,7 @@ import TokenRefresher from "@/components/Auth/TokenRefresher"
 import AdobeSDKScript from "@/components/Current/AdobeSDKScript"
 import Footer from "@/components/Current/Footer"
 import VwoScript from "@/components/Current/VwoScript"
+import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
 import { preloadUserTracking } from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
 import ServerIntlProvider from "@/i18n/Provider"
@@ -59,6 +60,7 @@ export default async function RootLayout({
           <TrpcProvider>
             {header}
             {children}
+            <ToastHandler />
             <Footer />
             <TokenRefresher />
           </TrpcProvider>