From 84f5e74f00135b2dd0dddfa2070bf7bc03abd82b Mon Sep 17 00:00:00 2001
From: Tobias Johansson <tobias.johansson@scandichotels.com>
Date: Tue, 20 Aug 2024 15:04:02 +0000
Subject: [PATCH] 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
---
 .../my-pages/profile/@creditCards/page.tsx    |  7 +-
 app/[lang]/(live)/layout.tsx                  |  2 +
 app/api/web/add-card-callback/[lang]/route.ts | 47 +++++++++
 components/Icons/CloseLarge.tsx               | 40 ++++++++
 components/Icons/CrossCircle.tsx              | 40 ++++++++
 components/Icons/WarningTriangle.tsx          | 40 ++++++++
 components/Icons/get-icon-by-icon-name.ts     |  9 ++
 components/Icons/icon.module.css              |  2 +-
 components/Icons/index.tsx                    |  3 +
 .../addCreditCardButton.module.css            |  3 +
 .../Profile/AddCreditCardButton/index.tsx     | 72 ++++++++++++--
 components/TempDesignSystem/Toasts/index.tsx  | 96 +++++++++++++++++++
 .../TempDesignSystem/Toasts/toasts.module.css | 38 ++++++++
 components/TempDesignSystem/Toasts/toasts.ts  | 10 ++
 .../TempDesignSystem/Toasts/variants.ts       | 14 +++
 i18n/dictionaries/da.json                     |  1 +
 i18n/dictionaries/de.json                     |  1 +
 i18n/dictionaries/en.json                     |  1 +
 i18n/dictionaries/fi.json                     |  3 +-
 i18n/dictionaries/no.json                     |  1 +
 i18n/dictionaries/sv.json                     |  1 +
 lib/api/endpoints.ts                          |  1 +
 lib/api/index.ts                              |  2 +-
 package-lock.json                             | 10 ++
 package.json                                  |  1 +
 server/routers/user/input.ts                  | 11 +++
 server/routers/user/output.ts                 | 13 +++
 server/routers/user/query.ts                  | 77 ++++++++++++++-
 types/components/icon.ts                      |  3 +
 .../myPages/myProfile/addCreditCardButton.ts  |  3 +
 30 files changed, 537 insertions(+), 15 deletions(-)
 create mode 100644 app/api/web/add-card-callback/[lang]/route.ts
 create mode 100644 components/Icons/CloseLarge.tsx
 create mode 100644 components/Icons/CrossCircle.tsx
 create mode 100644 components/Icons/WarningTriangle.tsx
 create mode 100644 components/Profile/AddCreditCardButton/addCreditCardButton.module.css
 create mode 100644 components/TempDesignSystem/Toasts/index.tsx
 create mode 100644 components/TempDesignSystem/Toasts/toasts.module.css
 create mode 100644 components/TempDesignSystem/Toasts/toasts.ts
 create mode 100644 components/TempDesignSystem/Toasts/variants.ts
 create mode 100644 types/components/myPages/myProfile/addCreditCardButton.ts

diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx
index 6fe1f7e01..a3cff5783 100644
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@creditCards/page.tsx
+++ b/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>
   )
 }
diff --git a/app/[lang]/(live)/layout.tsx b/app/[lang]/(live)/layout.tsx
index 35144b8d9..fe70a0371 100644
--- a/app/[lang]/(live)/layout.tsx
+++ b/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>
diff --git a/app/api/web/add-card-callback/[lang]/route.ts b/app/api/web/add-card-callback/[lang]/route.ts
new file mode 100644
index 000000000..17527a66e
--- /dev/null
+++ b/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()
+  }
+}
diff --git a/components/Icons/CloseLarge.tsx b/components/Icons/CloseLarge.tsx
new file mode 100644
index 000000000..e6692f914
--- /dev/null
+++ b/components/Icons/CloseLarge.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function CloseLargeIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        id="mask0_1756_2612"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_1756_2612)">
+        <path
+          d="M12 13.5422L6.34057 19.2016C6.12719 19.415 5.87017 19.5193 5.5695 19.5144C5.26882 19.5096 5.0118 19.4004 4.79842 19.1871C4.59474 18.9737 4.49532 18.7191 4.50017 18.4233C4.50502 18.1274 4.60928 17.8777 4.81297 17.674L10.4578 12L4.81297 6.32606C4.60928 6.12237 4.50744 5.87262 4.50744 5.5768C4.50744 5.28098 4.60928 5.02638 4.81297 4.813C5.01665 4.59961 5.26882 4.4905 5.5695 4.48565C5.87017 4.4808 6.12719 4.58507 6.34057 4.79845L12 10.4579L17.6594 4.79845C17.8728 4.58507 18.1298 4.4808 18.4305 4.48565C18.7312 4.4905 18.9882 4.59961 19.2016 4.813C19.4053 5.02638 19.5047 5.28098 19.4998 5.5768C19.495 5.87262 19.3907 6.12237 19.187 6.32606L13.5422 12L19.187 17.674C19.3907 17.8777 19.4926 18.1274 19.4926 18.4233C19.4926 18.7191 19.3907 18.9737 19.187 19.1871C18.9834 19.4004 18.7312 19.5096 18.4305 19.5144C18.1298 19.5193 17.8728 19.415 17.6594 19.2016L12 13.5422Z"
+          fill="#57514E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/CrossCircle.tsx b/components/Icons/CrossCircle.tsx
new file mode 100644
index 000000000..f4c4c258a
--- /dev/null
+++ b/components/Icons/CrossCircle.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function CrossCircleIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        id="mask0_1756_2637"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_1756_2637)">
+        <path
+          d="M12 13.3L14.9 16.2C15.075 16.375 15.2917 16.4625 15.55 16.4625C15.8083 16.4625 16.025 16.375 16.2 16.2C16.375 16.025 16.4625 15.8083 16.4625 15.55C16.4625 15.2917 16.375 15.075 16.2 14.9L13.3 12L16.2 9.1C16.375 8.925 16.4625 8.70833 16.4625 8.45C16.4625 8.19167 16.375 7.975 16.2 7.8C16.025 7.625 15.8083 7.5375 15.55 7.5375C15.2917 7.5375 15.075 7.625 14.9 7.8L12 10.7L9.1 7.8C8.925 7.625 8.70833 7.5375 8.45 7.5375C8.19167 7.5375 7.975 7.625 7.8 7.8C7.625 7.975 7.5375 8.19167 7.5375 8.45C7.5375 8.70833 7.625 8.925 7.8 9.1L10.7 12L7.8 14.9C7.625 15.075 7.5375 15.2917 7.5375 15.55C7.5375 15.8083 7.625 16.025 7.8 16.2C7.975 16.375 8.19167 16.4625 8.45 16.4625C8.70833 16.4625 8.925 16.375 9.1 16.2L12 13.3ZM12 21.75C10.6516 21.75 9.38434 21.4936 8.19838 20.9809C7.01239 20.4682 5.98075 19.7724 5.10345 18.8934C4.22615 18.0145 3.53125 16.9826 3.01875 15.7978C2.50625 14.613 2.25 13.3471 2.25 12C2.25 10.6516 2.50636 9.38434 3.01908 8.19838C3.53179 7.01239 4.22762 5.98075 5.10658 5.10345C5.98553 4.22615 7.01739 3.53125 8.20218 3.01875C9.38698 2.50625 10.6529 2.25 12 2.25C13.3484 2.25 14.6157 2.50636 15.8016 3.01908C16.9876 3.53179 18.0193 4.22762 18.8966 5.10658C19.7739 5.98553 20.4688 7.01739 20.9813 8.20217C21.4938 9.38697 21.75 10.6529 21.75 12C21.75 13.3484 21.4936 14.6157 20.9809 15.8016C20.4682 16.9876 19.7724 18.0193 18.8934 18.8966C18.0145 19.7739 16.9826 20.4688 15.7978 20.9813C14.613 21.4938 13.3471 21.75 12 21.75Z"
+          fill="white"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/WarningTriangle.tsx b/components/Icons/WarningTriangle.tsx
new file mode 100644
index 000000000..78d47d60a
--- /dev/null
+++ b/components/Icons/WarningTriangle.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function WarningTriangleIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        id="mask0_1756_2606"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_1756_2606)">
+        <path
+          d="M2.95563 20.775C2.7768 20.775 2.61564 20.7315 2.47216 20.6444C2.32869 20.5573 2.2171 20.4425 2.13738 20.3C2.05405 20.1583 2.0103 20.0063 2.00613 19.8438C2.00196 19.6813 2.04571 19.5208 2.13738 19.3625L11.1874 3.75001C11.279 3.59167 11.3986 3.47501 11.546 3.40001C11.6934 3.32501 11.8447 3.28751 11.9999 3.28751C12.155 3.28751 12.3063 3.32501 12.4538 3.40001C12.6012 3.47501 12.7207 3.59167 12.8124 3.75001L21.8624 19.3625C21.954 19.5208 21.9978 19.6813 21.9936 19.8438C21.9895 20.0063 21.9457 20.1583 21.8624 20.3C21.779 20.4417 21.6663 20.5563 21.524 20.6438C21.3818 20.7313 21.2237 20.775 21.0499 20.775H2.95563ZM11.9973 17.875C12.2657 17.875 12.4915 17.7842 12.6749 17.6026C12.8582 17.4211 12.9499 17.1961 12.9499 16.9276C12.9499 16.6592 12.8591 16.4333 12.6775 16.25C12.4959 16.0667 12.2709 15.975 12.0025 15.975C11.7341 15.975 11.5082 16.0658 11.3249 16.2474C11.1415 16.4289 11.0499 16.6539 11.0499 16.9224C11.0499 17.1908 11.1407 17.4167 11.3223 17.6C11.5038 17.7833 11.7288 17.875 11.9973 17.875ZM12.0124 15C12.2707 15 12.4915 14.9083 12.6749 14.725C12.8582 14.5417 12.9499 14.3208 12.9499 14.0625V11.0125C12.9499 10.7542 12.8582 10.5333 12.6749 10.35C12.4915 10.1667 12.2707 10.075 12.0124 10.075C11.754 10.075 11.5332 10.1667 11.3499 10.35C11.1665 10.5333 11.0749 10.7542 11.0749 11.0125V14.0625C11.0749 14.3208 11.1665 14.5417 11.3499 14.725C11.5332 14.9083 11.754 15 12.0124 15Z"
+          fill="white"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/get-icon-by-icon-name.ts b/components/Icons/get-icon-by-icon-name.ts
index 897ca8b28..aa20d00ab 100644
--- a/components/Icons/get-icon-by-icon-name.ts
+++ b/components/Icons/get-icon-by-icon-name.ts
@@ -14,8 +14,10 @@ import {
   ChevronDownIcon,
   ChevronRightIcon,
   CloseIcon,
+  CloseLarge,
   CoffeeIcon,
   ConciergeIcon,
+  CrossCircle,
   DoorOpenIcon,
   ElectricBikeIcon,
   EmailIcon,
@@ -34,6 +36,7 @@ import {
   PlusCircleIcon,
   RestaurantIcon,
   TshirtWashIcon,
+  WarningTriangle,
   WifiIcon,
 } from "."
 
@@ -59,6 +62,8 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
       return CellphoneIcon
     case IconName.Check:
       return CheckIcon
+    case IconName.CrossCircle:
+      return CrossCircle
     case IconName.CheckCircle:
       return CheckCircleIcon
     case IconName.ChevronDown:
@@ -67,6 +72,8 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
       return ChevronRightIcon
     case IconName.Close:
       return CloseIcon
+    case IconName.CloseLarge:
+      return CloseLarge
     case IconName.Coffee:
       return CoffeeIcon
     case IconName.Concierge:
@@ -107,6 +114,8 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
       return RestaurantIcon
     case IconName.TshirtWash:
       return TshirtWashIcon
+    case IconName.WarningTriangle:
+      return WarningTriangle
     case IconName.Wifi:
       return WifiIcon
     default:
diff --git a/components/Icons/icon.module.css b/components/Icons/icon.module.css
index bc8715040..ddab46d97 100644
--- a/components/Icons/icon.module.css
+++ b/components/Icons/icon.module.css
@@ -44,5 +44,5 @@
 
 .white,
 .white * {
-  fill: var(--Scandic-Opacity-White-100);
+  fill: var(--UI-Opacity-White-100);
 }
diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx
index 848e701fe..cb797f6dd 100644
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -11,9 +11,11 @@ export { default as CheckCircleIcon } from "./CheckCircle"
 export { default as ChevronDownIcon } from "./ChevronDown"
 export { default as ChevronRightIcon } from "./ChevronRight"
 export { default as CloseIcon } from "./Close"
+export { default as CloseLarge } from "./CloseLarge"
 export { default as CoffeeIcon } from "./Coffee"
 export { default as ConciergeIcon } from "./Concierge"
 export { default as CreditCard } from "./CreditCard"
+export { default as CrossCircle } from "./CrossCircle"
 export { default as Delete } from "./Delete"
 export { default as DoorOpenIcon } from "./DoorOpen"
 export { default as ElectricBikeIcon } from "./ElectricBike"
@@ -34,4 +36,5 @@ export { default as PlusCircleIcon } from "./PlusCircle"
 export { default as RestaurantIcon } from "./Restaurant"
 export { default as ScandicLogoIcon } from "./ScandicLogo"
 export { default as TshirtWashIcon } from "./TshirtWash"
+export { default as WarningTriangle } from "./WarningTriangle"
 export { default as WifiIcon } from "./Wifi"
diff --git a/components/Profile/AddCreditCardButton/addCreditCardButton.module.css b/components/Profile/AddCreditCardButton/addCreditCardButton.module.css
new file mode 100644
index 000000000..3f0f74203
--- /dev/null
+++ b/components/Profile/AddCreditCardButton/addCreditCardButton.module.css
@@ -0,0 +1,3 @@
+.addCreditCardButton {
+  justify-self: flex-start;
+}
diff --git a/components/Profile/AddCreditCardButton/index.tsx b/components/Profile/AddCreditCardButton/index.tsx
index a85ef1cf6..3c6286a7d 100644
--- a/components/Profile/AddCreditCardButton/index.tsx
+++ b/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>
   )
 }
diff --git a/components/TempDesignSystem/Toasts/index.tsx b/components/TempDesignSystem/Toasts/index.tsx
new file mode 100644
index 000000000..5e3ad1922
--- /dev/null
+++ b/components/TempDesignSystem/Toasts/index.tsx
@@ -0,0 +1,96 @@
+import { ExternalToast, toast as sonnerToast, Toaster } from "sonner"
+
+import {
+  CheckCircleIcon,
+  CloseLarge,
+  CrossCircle,
+  InfoCircleIcon,
+  WarningTriangle,
+} from "@/components/Icons"
+
+import Button from "../Button"
+import Body from "../Text/Body"
+import { ToastsProps } from "./toasts"
+import { toastVariants } from "./variants"
+
+import styles from "./toasts.module.css"
+
+export function ToastHandler() {
+  return <Toaster />
+}
+
+function getIcon(variant: ToastsProps["variant"]) {
+  switch (variant) {
+    case "error":
+      return CrossCircle
+    case "info":
+      return InfoCircleIcon
+    case "success":
+      return CheckCircleIcon
+    case "warning":
+      return WarningTriangle
+  }
+}
+
+export function Toast({ message, onClose, variant }: ToastsProps) {
+  const className = toastVariants({ variant })
+  const Icon = getIcon(variant)
+  return (
+    <div className={className}>
+      <div className={styles.iconContainer}>
+        {Icon && <Icon color="white" height={24} width={24} />}
+      </div>
+      <Body className={styles.message}>{message}</Body>
+      <Button onClick={onClose} variant="icon" intent="text">
+        <CloseLarge />
+      </Button>
+    </div>
+  )
+}
+
+export const toast = {
+  success: (message: string, options?: ExternalToast) =>
+    sonnerToast.custom(
+      (t) => (
+        <Toast
+          variant="success"
+          message={message}
+          onClose={() => sonnerToast.dismiss(t)}
+        />
+      ),
+      options
+    ),
+  info: (message: string, options?: ExternalToast) =>
+    sonnerToast.custom(
+      (t) => (
+        <Toast
+          variant="info"
+          message={message}
+          onClose={() => sonnerToast.dismiss(t)}
+        />
+      ),
+      options
+    ),
+  error: (message: string, options?: ExternalToast) =>
+    sonnerToast.custom(
+      (t) => (
+        <Toast
+          variant="error"
+          message={message}
+          onClose={() => sonnerToast.dismiss(t)}
+        />
+      ),
+      options
+    ),
+  warning: (message: string, options?: ExternalToast) =>
+    sonnerToast.custom(
+      (t) => (
+        <Toast
+          variant="warning"
+          message={message}
+          onClose={() => sonnerToast.dismiss(t)}
+        />
+      ),
+      options
+    ),
+}
diff --git a/components/TempDesignSystem/Toasts/toasts.module.css b/components/TempDesignSystem/Toasts/toasts.module.css
new file mode 100644
index 000000000..cc7b305fb
--- /dev/null
+++ b/components/TempDesignSystem/Toasts/toasts.module.css
@@ -0,0 +1,38 @@
+.toast {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  border-radius: var(--Corner-radius-Large);
+  overflow: hidden;
+  background: var(--Base-Surface-Primary-light-Normal);
+  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08);
+  align-items: center;
+  width: var(--width);
+}
+
+.message {
+  padding: var(--Spacing-x2) var(--Spacing-x-one-and-half);
+}
+
+.success {
+  --icon-background-color: var(--UI-Semantic-Success);
+}
+
+.error {
+  --icon-background-color: var(--UI-Semantic-Error);
+}
+
+.warning {
+  --icon-background-color: var(--UI-Semantic-Warning);
+}
+
+.info {
+  --icon-background-color: var(--UI-Semantic-Information);
+}
+
+.iconContainer {
+  display: flex;
+  background-color: var(--icon-background-color);
+  padding: var(--Spacing-x2);
+  align-items: center;
+  justify-content: center;
+}
diff --git a/components/TempDesignSystem/Toasts/toasts.ts b/components/TempDesignSystem/Toasts/toasts.ts
new file mode 100644
index 000000000..457ab67ac
--- /dev/null
+++ b/components/TempDesignSystem/Toasts/toasts.ts
@@ -0,0 +1,10 @@
+import { toastVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface ToastsProps
+  extends Omit<React.AnchorHTMLAttributes<HTMLDivElement>, "color">,
+    VariantProps<typeof toastVariants> {
+  message: string
+  onClose: () => void
+}
diff --git a/components/TempDesignSystem/Toasts/variants.ts b/components/TempDesignSystem/Toasts/variants.ts
new file mode 100644
index 000000000..a215edc77
--- /dev/null
+++ b/components/TempDesignSystem/Toasts/variants.ts
@@ -0,0 +1,14 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./toasts.module.css"
+
+export const toastVariants = cva(styles.toast, {
+  variants: {
+    variant: {
+      success: styles.success,
+      info: styles.info,
+      warning: styles.warning,
+      error: styles.error,
+    },
+  },
+})
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index 5e98028b6..4af82935b 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -128,6 +128,7 @@
   "Year": "År",
   "You have no previous stays.": "Du har ingen tidligere ophold.",
   "You have no upcoming stays.": "Du har ingen kommende ophold.",
+  "Your card was successfully saved!": "Dit kort blev gemt!",
   "Your Challenges Conquer & Earn!": "Dine udfordringer Overvind og tjen!",
   "Your level": "Dit niveau",
   "Zip code": "Postnummer",
diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json
index f3c64bab7..ca524c900 100644
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -122,6 +122,7 @@
   "Year": "Jahr",
   "You have no previous stays.": "Sie haben keine vorherigen Aufenthalte.",
   "You have no upcoming stays.": "Sie haben keine bevorstehenden Aufenthalte.",
+  "Your card was successfully saved!": "Ihre Karte wurde erfolgreich gespeichert!",
   "Your Challenges Conquer & Earn!": "Meistern Sie Ihre Herausforderungen und verdienen Sie Geld!",
   "Your level": "Dein level",
   "Zip code": "PLZ",
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index 28af28045..57f57bfd7 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -133,6 +133,7 @@
   "Year": "Year",
   "You have no previous stays.": "You have no previous stays.",
   "You have no upcoming stays.": "You have no upcoming stays.",
+  "Your card was successfully saved!": "Your card was successfully saved!",
   "Your Challenges Conquer & Earn!": "Your Challenges Conquer & Earn!",
   "Your level": "Your level",
   "Zip code": "Zip code",
diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json
index e1581623e..452693de1 100644
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -127,7 +127,8 @@
   "Which room class suits you the best?": "Mikä huoneluokka sopii sinulle parhaiten?",
   "Year": "Vuosi",
   "You have no previous stays.": "Sinulla ei ole aiempaa oleskelua.",
-  "You have no upcoming stays.": "Sinulla ei ole tulevia majoituksia.",
+  "You have no upcoming stays.": "Sinulla ei ole tulevia oleskeluja.",
+  "Your card was successfully saved!": "Korttisi tallennettu onnistuneesti!",
   "Your Challenges Conquer & Earn!": "Voita ja ansaitse haasteesi!",
   "Your level": "Tasosi",
   "Zip code": "Postinumero",
diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json
index d39a1b64d..a3e2ce356 100644
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -128,6 +128,7 @@
   "Year": "År",
   "You have no previous stays.": "Du har ingen tidligere opphold.",
   "You have no upcoming stays.": "Du har ingen kommende opphold.",
+  "Your card was successfully saved!": "Kortet ditt ble lagret!",
   "Your Challenges Conquer & Earn!": "Dine utfordringer Erobre og tjen!",
   "Your level": "Ditt nivå",
   "Zip code": "Post kode",
diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json
index 9be17ce5c..e0ec7b543 100644
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -130,6 +130,7 @@
   "Year": "År",
   "You have no previous stays.": "Du har inga tidigare vistelser.",
   "You have no upcoming stays.": "Du har inga planerade resor.",
+  "Your card was successfully saved!": "Ditt kort har sparats!",
   "Your Challenges Conquer & Earn!": "Dina utmaningar Erövra och tjäna!",
   "Your level": "Din nivå",
   "Zip code": "Postnummer",
diff --git a/lib/api/endpoints.ts b/lib/api/endpoints.ts
index 1c1570277..739029fe7 100644
--- a/lib/api/endpoints.ts
+++ b/lib/api/endpoints.ts
@@ -8,6 +8,7 @@ export namespace endpoints {
   export const enum v1 {
     profile = "profile/v1/Profile",
     creditCards = `${profile}/creditCards`,
+    initiateSaveCard = `${creditCards}/initiateSaveCard`,
     friendTransactions = "profile/v1/Transaction/friendTransactions",
     upcomingStays = "booking/v1/Stays/future",
     previousStays = "booking/v1/Stays/past",
diff --git a/lib/api/index.ts b/lib/api/index.ts
index 9455a85ed..db751428d 100644
--- a/lib/api/index.ts
+++ b/lib/api/index.ts
@@ -53,7 +53,7 @@ export async function patch(
 }
 
 export async function post(
-  endpoint: Endpoint,
+  endpoint: Endpoint | `${Endpoint}/${string}`,
   options: RequestOptionsWithJSONBody
 ) {
   const { body, ...requestOptions } = options
diff --git a/package-lock.json b/package-lock.json
index 67df4a0a0..95c925618 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
         "react-international-phone": "^4.2.6",
         "react-intl": "^6.6.8",
         "server-only": "^0.0.1",
+        "sonner": "^1.5.0",
         "superjson": "^2.2.1",
         "zod": "^3.22.4",
         "zustand": "^4.5.2"
@@ -16538,6 +16539,15 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/sonner": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-1.5.0.tgz",
+      "integrity": "sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==",
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
diff --git a/package.json b/package.json
index ee6cb94e2..5a3130158 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "react-international-phone": "^4.2.6",
     "react-intl": "^6.6.8",
     "server-only": "^0.0.1",
+    "sonner": "^1.5.0",
     "superjson": "^2.2.1",
     "zod": "^3.22.4",
     "zustand": "^4.5.2"
diff --git a/server/routers/user/input.ts b/server/routers/user/input.ts
index 56a8fe385..c7aa4102b 100644
--- a/server/routers/user/input.ts
+++ b/server/routers/user/input.ts
@@ -18,3 +18,14 @@ export const soonestUpcomingStaysInput = z
     limit: z.number().int().positive(),
   })
   .default({ limit: 3 })
+
+export const initiateSaveCardInput = z.object({
+  language: z.string(),
+  mobileToken: z.boolean(),
+  redirectUrl: z.string(),
+})
+
+export const saveCardInput = z.object({
+  transactionId: z.string(),
+  merchantId: z.string().optional(),
+})
diff --git a/server/routers/user/output.ts b/server/routers/user/output.ts
index ea156f7bf..77f8e992a 100644
--- a/server/routers/user/output.ts
+++ b/server/routers/user/output.ts
@@ -180,6 +180,8 @@ export const getCreditCardsSchema = z.object({
         expirationDate: z.string(),
         cardType: z.string(),
       }),
+      id: z.string(),
+      type: z.string(),
     })
   ),
 })
@@ -193,3 +195,14 @@ export const getMembershipCardsSchema = z.array(
     membershipType: z.string(),
   })
 )
+
+export const initiateSaveCardSchema = z.object({
+  data: z.object({
+    attribute: z.object({
+      transactionId: z.string(),
+      link: z.string(),
+      mobileToken: z.string().optional(),
+    }),
+    type: z.string(),
+  }),
+})
diff --git a/server/routers/user/query.ts b/server/routers/user/query.ts
index 069270bea..055c09766 100644
--- a/server/routers/user/query.ts
+++ b/server/routers/user/query.ts
@@ -1,6 +1,12 @@
 import { Lang } from "@/constants/languages"
 import { env } from "@/env/server"
 import * as api from "@/lib/api"
+import { internalServerError } from "@/server/errors/next"
+import {
+  badRequestError,
+  forbiddenError,
+  unauthorizedError,
+} from "@/server/errors/trpc"
 import {
   protectedProcedure,
   router,
@@ -12,13 +18,19 @@ import * as maskValue from "@/utils/maskValue"
 import { getMembership, getMembershipCards } from "@/utils/user"
 
 import encryptValue from "../utils/encryptValue"
-import { getUserInputSchema, staysInput } from "./input"
+import {
+  getUserInputSchema,
+  initiateSaveCardInput,
+  saveCardInput,
+  staysInput,
+} from "./input"
 import {
   getCreditCardsSchema,
   getFriendTransactionsSchema,
   getMembershipCardsSchema,
   getStaysSchema,
   getUserSchema,
+  initiateSaveCardSchema,
   Stay,
 } from "./output"
 import { benefits, extendedUser, nextLevelPerks } from "./temp"
@@ -517,6 +529,69 @@ export const userQueryRouter = router({
     return verifiedData.data.data
   }),
 
+  initiateSaveCard: protectedProcedure
+    .input(initiateSaveCardInput)
+    .mutation(async function ({ ctx, input }) {
+      const apiResponse = await api.post(api.endpoints.v1.initiateSaveCard, {
+        headers: {
+          Authorization: `Bearer ${ctx.session.token.access_token}`,
+        },
+        body: {
+          language: input.language,
+          mobileToken: input.mobileToken,
+          redirectUrl: input.redirectUrl,
+        },
+      })
+
+      if (!apiResponse.ok) {
+        switch (apiResponse.status) {
+          case 400:
+            throw badRequestError(apiResponse)
+          case 401:
+            throw unauthorizedError(apiResponse)
+          case 403:
+            throw forbiddenError(apiResponse)
+          default:
+            throw internalServerError(apiResponse)
+        }
+      }
+
+      const apiJson = await apiResponse.json()
+      const verifiedData = initiateSaveCardSchema.safeParse(apiJson)
+      if (!verifiedData.success) {
+        console.error(`Failed to initiate save card data`)
+        console.error(`User: (${JSON.stringify(ctx.session.user)})`)
+        console.error(verifiedData.error)
+        return null
+      }
+
+      return verifiedData.data.data
+    }),
+
+  saveCard: protectedProcedure.input(saveCardInput).mutation(async function ({
+    ctx,
+    input,
+  }) {
+    const apiResponse = await api.post(
+      `${api.endpoints.v1.creditCards}/${input.transactionId}`,
+      {
+        headers: {
+          Authorization: `Bearer ${ctx.session.token.access_token}`,
+        },
+        body: {},
+      }
+    )
+
+    if (!apiResponse.ok) {
+      console.error(`API Response Failed - Save card`)
+      console.error(`User: (${JSON.stringify(ctx.session.user)})`)
+      console.error(apiResponse)
+      return null
+    }
+
+    return true
+  }),
+
   membershipCards: protectedProcedure.query(async function ({ ctx }) {
     const apiResponse = await api.get(api.endpoints.v1.profile, {
       cache: "no-store",
diff --git a/types/components/icon.ts b/types/components/icon.ts
index ff76c28eb..8838658e1 100644
--- a/types/components/icon.ts
+++ b/types/components/icon.ts
@@ -16,10 +16,12 @@ export enum IconName {
   Camera = "Camera",
   Cellphone = "Cellphone",
   Check = "Check",
+  CrossCircle = "CrossCircle",
   CheckCircle = "CheckCircle",
   ChevronDown = "ChevronDown",
   ChevronRight = "ChevronRight",
   Close = "Close",
+  CloseLarge = "CloseLarge",
   Coffee = "Coffee",
   Concierge = "Concierge",
   DoorOpen = "DoorOpen",
@@ -41,4 +43,5 @@ export enum IconName {
   Restaurant = "Restaurant",
   TshirtWash = "TshirtWash",
   Wifi = "Wifi",
+  WarningTriangle = "WarningTriangle",
 }
diff --git a/types/components/myPages/myProfile/addCreditCardButton.ts b/types/components/myPages/myProfile/addCreditCardButton.ts
new file mode 100644
index 000000000..61a8e3aef
--- /dev/null
+++ b/types/components/myPages/myProfile/addCreditCardButton.ts
@@ -0,0 +1,3 @@
+export type AddCreditCardButtonProps = {
+  redirectUrl: string
+}