From acc77625c837674d9b7a93d6a1d89684f50ffe4a Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Wed, 18 Jun 2025 13:57:37 +0200
Subject: [PATCH 1/2] feat(LOY-263): added new link to missing points form

removed soonest stays for redundancy
---
 .../DynamicContent/Stays/Previous/index.tsx   | 32 ++++++++++++++-
 .../Stays/Previous/previous.module.css        | 22 +++++++++++
 .../DynamicContent/Stays/Soonest/index.tsx    | 39 -------------------
 .../DynamicContent/Stays/Upcoming/index.tsx   |  3 +-
 .../Blocks/DynamicContent/index.tsx           |  2 -
 .../ButtonLink/buttonLink.module.css          |  1 +
 6 files changed, 54 insertions(+), 45 deletions(-)
 create mode 100644 apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/previous.module.css
 delete mode 100644 apps/scandic-web/components/Blocks/DynamicContent/Stays/Soonest/index.tsx

diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx
index 3c5efd087..788bc2082 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx
@@ -1,18 +1,25 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { serverClient } from "@/lib/trpc/server"
 
+import ButtonLink from "@/components/ButtonLink"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
+import { getIntl } from "@/i18n"
 
 import ClientPreviousStays from "./Client"
 
+import styles from "./previous.module.css"
+
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function PreviousStays({
   title,
-  subtitle,
   link,
 }: AccountPageComponentProps) {
+  const intl = await getIntl()
   const caller = await serverClient()
   const initialPreviousStays = await caller.user.stays.previous({
     limit: 6,
@@ -24,7 +31,28 @@ export default async function PreviousStays({
 
   return (
     <SectionContainer>
-      <SectionHeader title={title} preamble={subtitle} link={link} />
+      <div className={styles.header}>
+        <SectionHeader title={title} link={link} />
+        <div className={styles.claim}>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>
+              {intl.formatMessage({
+                defaultMessage: "Missing a previous stay?",
+              })}
+            </p>
+          </Typography>
+          <ButtonLink
+            href="https://www.scandichotels.com/forms/missing-points"
+            variant="Text"
+            target="_blank"
+            size="Small"
+            typography="Body/Supporting text (caption)/smBold"
+          >
+            {intl.formatMessage({ defaultMessage: "Claim points" })}
+            <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
+          </ButtonLink>
+        </div>
+      </div>
       <ClientPreviousStays initialPreviousStays={initialPreviousStays} />
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/previous.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/previous.module.css
new file mode 100644
index 000000000..c3f0dfc1f
--- /dev/null
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/previous.module.css
@@ -0,0 +1,22 @@
+.header {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: var(--Space-x1);
+}
+
+.claim {
+  color: var(--Text-Secondary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--Space-x2);
+}
+
+@media screen and (min-width: 1367px) {
+  .header {
+    align-items: center;
+    flex-direction: row;
+    gap: var(--Space-x6);
+  }
+}
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Soonest/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Soonest/index.tsx
deleted file mode 100644
index b72e0aea7..000000000
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Soonest/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { serverClient } from "@/lib/trpc/server"
-
-import SectionContainer from "@/components/Section/Container"
-import SectionHeader from "@/components/Section/Header"
-import SectionLink from "@/components/Section/Link"
-import Grids from "@/components/TempDesignSystem/Grids"
-
-import EmptyUpcomingStaysBlock from "../EmptyUpcomingStays"
-import StayCard from "../StayCard"
-
-import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
-
-export default async function SoonestStays({
-  title,
-  subtitle,
-  link,
-}: AccountPageComponentProps) {
-  const caller = await serverClient()
-  const upcomingStays = await caller.user.stays.upcoming({ limit: 3 })
-  if (!upcomingStays?.data) {
-    return null
-  }
-
-  return (
-    <SectionContainer>
-      <SectionHeader title={title} preamble={subtitle} link={link} />
-      {upcomingStays.data.length ? (
-        <Grids.Stackable>
-          {upcomingStays.data.map((stay) => (
-            <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
-          ))}
-        </Grids.Stackable>
-      ) : (
-        <EmptyUpcomingStaysBlock />
-      )}
-      <SectionLink link={link} variant="mobile" />
-    </SectionContainer>
-  )
-}
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/index.tsx
index 77f4df7dd..3186b07af 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/index.tsx
@@ -13,7 +13,6 @@ import type { AccountPageComponentProps } from "@/types/components/myPages/myPag
 
 export default async function UpcomingStays({
   title,
-  subtitle,
   link,
 }: AccountPageComponentProps) {
   const caller = await serverClient()
@@ -23,7 +22,7 @@ export default async function UpcomingStays({
 
   return (
     <SectionContainer className={styles.container}>
-      <SectionHeader title={title} preamble={subtitle} link={link} />
+      <SectionHeader title={title} link={link} />
       {initialUpcomingStays?.data.length ? (
         <ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
       ) : (
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/index.tsx
index 6c4331e31..fa873cb94 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/index.tsx
@@ -16,7 +16,6 @@ import SASTransferPoints from "@/components/Blocks/DynamicContent/SAS/TransferPo
 import SASTierComparisonBlock from "@/components/Blocks/DynamicContent/SASTierComparison"
 import SignupFormWrapper from "@/components/Blocks/DynamicContent/SignupFormWrapper"
 import PreviousStays from "@/components/Blocks/DynamicContent/Stays/Previous"
-import SoonestStays from "@/components/Blocks/DynamicContent/Stays/Soonest"
 import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/Upcoming"
 import LoadingSpinner from "@/components/LoadingSpinner"
 
@@ -63,7 +62,6 @@ function DynamicContentBlocks(props: DynamicContentProps) {
     case DynamicContentEnum.Blocks.components.sign_up_form:
       return <SignupFormWrapper dynamic_content={dynamic_content} />
     case DynamicContentEnum.Blocks.components.soonest_stays:
-      return <SoonestStays {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.upcoming_stays:
       return <UpcomingStays {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.sas_linked_account:
diff --git a/apps/scandic-web/components/ButtonLink/buttonLink.module.css b/apps/scandic-web/components/ButtonLink/buttonLink.module.css
index d5726026c..2b3a1eb25 100644
--- a/apps/scandic-web/components/ButtonLink/buttonLink.module.css
+++ b/apps/scandic-web/components/ButtonLink/buttonLink.module.css
@@ -6,4 +6,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: var(--Space-x05);
 }

From 56df2cdb2a66481d9818100a9046dbdd75d548a3 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Wed, 18 Jun 2025 14:23:39 +0200
Subject: [PATCH 2/2] feat(LOY-263): add link to missing points form to earn
 and burn

---
 .../Points/ClaimPoints/claimPoints.module.css |  8 ++++
 .../Points/ClaimPoints/index.tsx              | 40 +++++++++++++++++++
 .../Points/EarnAndBurn/earnAndBurn.module.css | 14 +++++++
 .../Points/EarnAndBurn/index.tsx              |  9 ++++-
 .../DynamicContent/Stays/Previous/index.tsx   | 28 ++-----------
 .../Stays/Previous/previous.module.css        |  8 ----
 .../constants/missingPointsHrefs.ts           | 10 +++++
 7 files changed, 83 insertions(+), 34 deletions(-)
 create mode 100644 apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/claimPoints.module.css
 create mode 100644 apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx
 create mode 100644 apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/earnAndBurn.module.css
 create mode 100644 apps/scandic-web/constants/missingPointsHrefs.ts

diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/claimPoints.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/claimPoints.module.css
new file mode 100644
index 000000000..9421503c6
--- /dev/null
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/claimPoints.module.css
@@ -0,0 +1,8 @@
+.claim {
+  color: var(--Text-Secondary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--Space-x2);
+  white-space: nowrap;
+}
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx
new file mode 100644
index 000000000..5bc7d4db2
--- /dev/null
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { missingPoints } from "@/constants/missingPointsHrefs"
+
+import ButtonLink from "@/components/ButtonLink"
+import useLang from "@/hooks/useLang"
+
+import styles from "./claimPoints.module.css"
+
+export default function ClaimPoints() {
+  const intl = useIntl()
+  const lang = useLang()
+
+  return (
+    <div className={styles.claim}>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p>
+          {intl.formatMessage({
+            defaultMessage: "Missing a previous stay?",
+          })}
+        </p>
+      </Typography>
+      <ButtonLink
+        href={missingPoints[lang]}
+        variant="Text"
+        target="_blank"
+        size="Small"
+        typography="Body/Supporting text (caption)/smBold"
+      >
+        {intl.formatMessage({ defaultMessage: "Claim points" })}
+        <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
+      </ButtonLink>
+    </div>
+  )
+}
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/earnAndBurn.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/earnAndBurn.module.css
new file mode 100644
index 000000000..f2ed22bcc
--- /dev/null
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/earnAndBurn.module.css
@@ -0,0 +1,14 @@
+.header {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: var(--Space-x1);
+}
+
+@media screen and (min-width: 1367px) {
+  .header {
+    align-items: center;
+    flex-direction: row;
+    gap: var(--Space-x6);
+  }
+}
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx
index 28b92f18c..2405f053d 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx
@@ -2,8 +2,11 @@ import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 
+import ClaimPoints from "../ClaimPoints"
 import JourneyTable from "./JourneyTable"
 
+import styles from "./earnAndBurn.module.css"
+
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default function EarnAndBurn({
@@ -13,7 +16,11 @@ export default function EarnAndBurn({
 }: AccountPageComponentProps) {
   return (
     <SectionContainer>
-      <SectionHeader title={title} link={link} preamble={subtitle} />
+      <div className={styles.header}>
+        <SectionHeader title={title} link={link} preamble={subtitle} />
+
+        <ClaimPoints />
+      </div>
       <JourneyTable />
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx
index 788bc2082..97febbfe6 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx
@@ -1,13 +1,9 @@
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
 import { serverClient } from "@/lib/trpc/server"
 
-import ButtonLink from "@/components/ButtonLink"
+import ClaimPoints from "@/components/Blocks/DynamicContent/Points/ClaimPoints"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
-import { getIntl } from "@/i18n"
 
 import ClientPreviousStays from "./Client"
 
@@ -19,7 +15,6 @@ export default async function PreviousStays({
   title,
   link,
 }: AccountPageComponentProps) {
-  const intl = await getIntl()
   const caller = await serverClient()
   const initialPreviousStays = await caller.user.stays.previous({
     limit: 6,
@@ -33,25 +28,8 @@ export default async function PreviousStays({
     <SectionContainer>
       <div className={styles.header}>
         <SectionHeader title={title} link={link} />
-        <div className={styles.claim}>
-          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <p>
-              {intl.formatMessage({
-                defaultMessage: "Missing a previous stay?",
-              })}
-            </p>
-          </Typography>
-          <ButtonLink
-            href="https://www.scandichotels.com/forms/missing-points"
-            variant="Text"
-            target="_blank"
-            size="Small"
-            typography="Body/Supporting text (caption)/smBold"
-          >
-            {intl.formatMessage({ defaultMessage: "Claim points" })}
-            <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
-          </ButtonLink>
-        </div>
+
+        <ClaimPoints />
       </div>
       <ClientPreviousStays initialPreviousStays={initialPreviousStays} />
       <SectionLink link={link} variant="mobile" />
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/previous.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/previous.module.css
index c3f0dfc1f..f2ed22bcc 100644
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/previous.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/previous.module.css
@@ -5,14 +5,6 @@
   gap: var(--Space-x1);
 }
 
-.claim {
-  color: var(--Text-Secondary);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--Space-x2);
-}
-
 @media screen and (min-width: 1367px) {
   .header {
     align-items: center;
diff --git a/apps/scandic-web/constants/missingPointsHrefs.ts b/apps/scandic-web/constants/missingPointsHrefs.ts
new file mode 100644
index 000000000..f07e94825
--- /dev/null
+++ b/apps/scandic-web/constants/missingPointsHrefs.ts
@@ -0,0 +1,10 @@
+import type { LangRoute } from "@/types/routes"
+
+export const missingPoints: LangRoute = {
+  da: "https://www.scandichotels.dk/form/manglende-point",
+  de: "https://www.scandichotels.de/formulare/fehlende-punkte",
+  fi: "https://www.scandichotels.fi/forms/puuttuvat-pisteet",
+  en: "https://www.scandichotels.com/forms/missing-points",
+  no: "https://www.scandichotels.no/form/manglende-poeng",
+  sv: "https://www.scandichotels.se/formular/saknade-poang",
+}