From 76994f6e013f85a01a4b4a844c1cf931d2b7a2d0 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Wed, 21 May 2025 16:34:56 +0200
Subject: [PATCH] fix: replace temp design system components with design system
 package in surprises

---
 .../components/MyPages/Surprises/Card.tsx     |  9 ++-
 .../components/MyPages/Surprises/Client.tsx   | 27 ++++---
 .../components/MyPages/Surprises/Initial.tsx  | 77 ++++++++++---------
 .../MyPages/Surprises/Navigation.tsx          | 19 +++--
 .../components/MyPages/Surprises/Slide.tsx    |  9 ++-
 .../MyPages/Surprises/surprises.module.css    | 27 +++++--
 .../Rewards/ExpirationDate/index.tsx          | 31 ++++----
 7 files changed, 113 insertions(+), 86 deletions(-)

diff --git a/apps/scandic-web/components/MyPages/Surprises/Card.tsx b/apps/scandic-web/components/MyPages/Surprises/Card.tsx
index 23f39250f..52709406d 100644
--- a/apps/scandic-web/components/MyPages/Surprises/Card.tsx
+++ b/apps/scandic-web/components/MyPages/Surprises/Card.tsx
@@ -1,7 +1,8 @@
 import { useIntl } from "react-intl"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import Image from "@/components/Image"
-import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./surprises.module.css"
 
@@ -21,9 +22,9 @@ export default function Card({ title, children }: CardProps) {
         })}
       />
       <header>
-        <Title textAlign="center" level="h4">
-          {title}
-        </Title>
+        <Typography variant="Title/smRegular">
+          <h4 className={styles.title}>{title}</h4>
+        </Typography>
       </header>
 
       {children}
diff --git a/apps/scandic-web/components/MyPages/Surprises/Client.tsx b/apps/scandic-web/components/MyPages/Surprises/Client.tsx
index bfb40dbf6..c4882409e 100644
--- a/apps/scandic-web/components/MyPages/Surprises/Client.tsx
+++ b/apps/scandic-web/components/MyPages/Surprises/Client.tsx
@@ -6,6 +6,8 @@ import React, { useState } from "react"
 import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { benefits } from "@/constants/routes/myPages"
 import {
   benefits as webviewBenefits,
@@ -15,7 +17,6 @@ import { customerService } from "@/constants/webHrefs"
 import { trpc } from "@/lib/trpc/client"
 
 import Link from "@/components/TempDesignSystem/Link"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 
@@ -186,17 +187,19 @@ export default function SurprisesNotification({
                       }}
                     >
                       {showSurprises && totalSurprises > 1 && (
-                        <Caption type="label" uppercase>
-                          {intl.formatMessage(
-                            {
-                              defaultMessage: "{amount} out of {total}",
-                            },
-                            {
-                              amount: selectedSurprise + 1,
-                              total: totalSurprises,
-                            }
-                          )}
-                        </Caption>
+                        <Typography variant="Tag/sm">
+                          <p>
+                            {intl.formatMessage(
+                              {
+                                defaultMessage: "{amount} out of {total}",
+                              },
+                              {
+                                amount: selectedSurprise + 1,
+                                total: totalSurprises,
+                              }
+                            )}
+                          </p>
+                        </Typography>
                       )}
                     </Header>
 
diff --git a/apps/scandic-web/components/MyPages/Surprises/Initial.tsx b/apps/scandic-web/components/MyPages/Surprises/Initial.tsx
index 7827ac8ed..64a3a6cc3 100644
--- a/apps/scandic-web/components/MyPages/Surprises/Initial.tsx
+++ b/apps/scandic-web/components/MyPages/Surprises/Initial.tsx
@@ -1,11 +1,12 @@
 import { useIntl } from "react-intl"
 
-import Button from "@/components/TempDesignSystem/Button"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { Button } from "@scandic-hotels/design-system/Button"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import Card from "./Card"
 
+import styles from "./surprises.module.css"
+
 import type { InitialProps } from "@/types/components/blocks/surprises"
 
 export default function Initial({ totalSurprises, onOpen }: InitialProps) {
@@ -17,43 +18,47 @@ export default function Initial({ totalSurprises, onOpen }: InitialProps) {
         defaultMessage: "Surprise!",
       })}
     >
-      <Body textAlign="center">
-        {totalSurprises > 1 ? (
-          <>
-            {intl.formatMessage(
-              {
-                defaultMessage:
-                  "You have <b>{amount}</b> gifts waiting for you!",
-              },
-              {
-                amount: totalSurprises,
-                b: (str) => <b>{str}</b>,
-              }
-            )}
-            <br />
-            {intl.formatMessage({
-              defaultMessage: "Hurry up and use them before they expire!",
-            })}
-          </>
-        ) : (
-          intl.formatMessage({
-            defaultMessage: "We have a special gift waiting for you!",
-          })
-        )}
-      </Body>
-      <Caption>
-        {intl.formatMessage({
-          defaultMessage: "You'll find all your gifts in 'My benefits'",
-        })}
-      </Caption>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p className={styles.textCenter}>
+          {totalSurprises > 1 ? (
+            <>
+              {intl.formatMessage(
+                {
+                  defaultMessage:
+                    "You have <b>{amount}</b> gifts waiting for you!",
+                },
+                {
+                  amount: totalSurprises,
+                  b: (str) => <b>{str}</b>,
+                }
+              )}
+              <br />
+              {intl.formatMessage({
+                defaultMessage: "Hurry up and use them before they expire!",
+              })}
+            </>
+          ) : (
+            intl.formatMessage({
+              defaultMessage: "We have a special gift waiting for you!",
+            })
+          )}
+        </p>
+      </Typography>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p>
+          {intl.formatMessage({
+            defaultMessage: "You'll find all your gifts in 'My benefits'",
+          })}
+        </p>
+      </Typography>
 
       <Button
-        intent="primary"
+        variant="Primary"
         onPress={onOpen}
-        size="medium"
-        theme="base"
-        fullWidth
+        size="Medium"
         autoFocus
+        typography="Body/Paragraph/mdBold"
+        className={styles.widthFull}
       >
         {intl.formatMessage(
           {
diff --git a/apps/scandic-web/components/MyPages/Surprises/Navigation.tsx b/apps/scandic-web/components/MyPages/Surprises/Navigation.tsx
index d912230f9..8fcbfe736 100644
--- a/apps/scandic-web/components/MyPages/Surprises/Navigation.tsx
+++ b/apps/scandic-web/components/MyPages/Surprises/Navigation.tsx
@@ -1,9 +1,8 @@
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-import Button from "@/components/TempDesignSystem/Button"
-
 import styles from "./surprises.module.css"
 
 import type { NavigationProps } from "@/types/components/blocks/surprises"
@@ -18,11 +17,11 @@ export default function Navigation({
   return (
     <nav className={styles.nav}>
       <Button
-        variant="icon"
-        intent="tertiary"
-        disabled={selectedSurprise === 0}
+        variant="Text"
+        isDisabled={selectedSurprise === 0}
         onPress={() => showSurprise(-1)}
-        size="small"
+        size="Small"
+        typography="Body/Supporting text (caption)/smBold"
       >
         <MaterialIcon
           icon="chevron_right"
@@ -35,11 +34,11 @@ export default function Navigation({
         })}
       </Button>
       <Button
-        variant="icon"
-        intent="tertiary"
-        disabled={selectedSurprise === totalSurprises - 1}
+        variant="Text"
+        isDisabled={selectedSurprise === totalSurprises - 1}
         onPress={() => showSurprise(1)}
-        size="small"
+        size="Small"
+        typography="Body/Supporting text (caption)/smBold"
       >
         {intl.formatMessage({
           defaultMessage: "Next",
diff --git a/apps/scandic-web/components/MyPages/Surprises/Slide.tsx b/apps/scandic-web/components/MyPages/Surprises/Slide.tsx
index 67f6dcaad..05c8b418c 100644
--- a/apps/scandic-web/components/MyPages/Surprises/Slide.tsx
+++ b/apps/scandic-web/components/MyPages/Surprises/Slide.tsx
@@ -1,9 +1,12 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import ExpirationDate from "@/components/Rewards/ExpirationDate"
-import Body from "@/components/TempDesignSystem/Text/Body"
 import { getEarliestExpirationDate } from "@/utils/rewards"
 
 import Card from "./Card"
 
+import styles from "./surprises.module.css"
+
 import type { SlideProps } from "@/types/components/blocks/surprises"
 
 export default function Slide({ surprise }: SlideProps) {
@@ -11,7 +14,9 @@ export default function Slide({ surprise }: SlideProps) {
 
   return (
     <Card title={surprise.label}>
-      <Body textAlign="center">{surprise.description}</Body>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p className={styles.textCenter}>{surprise.description}</p>
+      </Typography>
       {earliestExpirationDate ? (
         <ExpirationDate expirationDate={earliestExpirationDate} />
       ) : null}
diff --git a/apps/scandic-web/components/MyPages/Surprises/surprises.module.css b/apps/scandic-web/components/MyPages/Surprises/surprises.module.css
index 149c3e6a8..37f68530f 100644
--- a/apps/scandic-web/components/MyPages/Surprises/surprises.module.css
+++ b/apps/scandic-web/components/MyPages/Surprises/surprises.module.css
@@ -72,8 +72,8 @@
 .dialog {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
-  padding-bottom: var(--Spacing-x2);
+  gap: var(--Space-x2);
+  padding-bottom: var(--Space-x2);
 
   /* to hide sliding cards */
   position: relative;
@@ -88,7 +88,7 @@
   height: var(--button-height);
   position: relative;
   justify-content: center;
-  padding: var(--Spacing-x2) var(--Spacing-x2) 0;
+  padding: var(--Space-x2) var(--Space-x2) 0;
 }
 
 .content {
@@ -96,17 +96,28 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 0 var(--Spacing-x3);
-  gap: var(--Spacing-x2);
+  padding: 0 var(--Space-x3);
+  gap: var(--Space-x2);
   min-height: 350px;
 }
 
+.title {
+  color: var(--Base-Text-High-contrast);
+}
+
+.widthFull {
+  width: 100%;
+}
+
+.textCenter {
+  text-align: center;
+}
+
 .nav {
   border-top: 1px solid var(--Base-Border-Subtle);
   display: flex;
   justify-content: space-between;
-  padding: 0 var(--Spacing-x2);
-  width: 100%;
+  margin: 0 var(--Space-x2);
 }
 
 .nav button {
@@ -134,7 +145,7 @@
   border: none;
   cursor: pointer;
   position: absolute;
-  right: var(--Spacing-x2);
+  right: var(--Space-x2);
   width: 32px;
   height: var(--button-height);
   display: flex;
diff --git a/apps/scandic-web/components/Rewards/ExpirationDate/index.tsx b/apps/scandic-web/components/Rewards/ExpirationDate/index.tsx
index a963d313a..3eaa3b71d 100644
--- a/apps/scandic-web/components/Rewards/ExpirationDate/index.tsx
+++ b/apps/scandic-web/components/Rewards/ExpirationDate/index.tsx
@@ -2,9 +2,10 @@
 
 import { useIntl } from "react-intl"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { dt } from "@/lib/dt"
 
-import Body from "@/components/TempDesignSystem/Text/Body"
 import useLang from "@/hooks/useLang"
 
 import styles from "./expirationDate.module.css"
@@ -21,19 +22,21 @@ export default function ExpirationDate({
 
   return (
     <div className={styles.badge}>
-      <Body textTransform="bold">
-        {intl.formatMessage(
-          {
-            defaultMessage: "Valid through {expirationDate}",
-          },
-          {
-            expirationDate: dt(expirationDate)
-              .locale(lang)
-              .utc()
-              .format("D MMM YYYY"),
-          }
-        )}
-      </Body>
+      <Typography variant="Body/Supporting text (caption)/smBold">
+        <p>
+          {intl.formatMessage(
+            {
+              defaultMessage: "Valid through {expirationDate}",
+            },
+            {
+              expirationDate: dt(expirationDate)
+                .locale(lang)
+                .utc()
+                .format("D MMM YYYY"),
+            }
+          )}
+        </p>
+      </Typography>
     </div>
   )
 }