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>

app/api/web/add-card-callback/[lang]/route.ts

@@ -0,0 +1,47 @@
+import { NextRequest } from "next/server"
+import { env } from "process"
+
+import { Lang } from "@/constants/languages"
+import { serverClient } from "@/lib/trpc/server"
+import { badRequest, internalServerError } from "@/server/errors/next"
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { lang: string } }
+) {
+  try {
+    const lang = params.lang as Lang
+
+    const searchParams = request.nextUrl.searchParams
+    const success = searchParams.get("success")
+    const failure = searchParams.get("failure")
+    const trxId = searchParams.get("datatransTrxId")
+
+    const returnUrl = new URL(
+      `${env.PUBLIC_URL}/${lang ?? Lang.en}/scandic-friends/my-pages/profile`
+    )
+
+    if (success) {
+      if (!trxId) {
+        return badRequest("Missing datatransTrxId param")
+      }
+
+      const saveCardSuccess = await serverClient().user.saveCard({
+        transactionId: trxId,
+      })
+
+      if (saveCardSuccess) {
+        returnUrl.searchParams.set("success", "true")
+      } else {
+        returnUrl.searchParams.set("failure", "true")
+      }
+    } else if (failure) {
+      returnUrl.searchParams.set("failure", "true")
+    }
+
+    return Response.redirect(returnUrl, 307)
+  } catch (error) {
+    console.error(error)
+    return internalServerError()
+  }
+}