From ed55f966c7e6085658345aacc64646e9f669931c Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Mon, 7 Oct 2024 09:17:04 +0200
Subject: [PATCH 01/44] feat/sw-561: some design tweaks for container widths

---
 app/[lang]/(live)/(protected)/my-pages/layout.module.css      | 2 ++
 .../(live)/(public)/[contentType]/[uid]/layout.module.css     | 2 ++
 app/[lang]/(live)/(public)/hotelreservation/layout.module.css | 2 ++
 components/HotelReservation/HotelCard/hotelCard.module.css    | 4 ++--
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/[lang]/(live)/(protected)/my-pages/layout.module.css b/app/[lang]/(live)/(protected)/my-pages/layout.module.css
index bee1488c6..a2ff660c4 100644
--- a/app/[lang]/(live)/(protected)/my-pages/layout.module.css
+++ b/app/[lang]/(live)/(protected)/my-pages/layout.module.css
@@ -5,6 +5,8 @@
   gap: var(--Spacing-x3);
   grid-template-rows: auto 1fr;
   min-height: 100dvh;
+  max-width: var(--max-width);
+  margin: 0 auto;
 }
 
 .content {
diff --git a/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css b/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
index edd0b9f96..af1b93963 100644
--- a/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
+++ b/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
@@ -5,4 +5,6 @@
   gap: var(--Spacing-x3);
   grid-template-rows: auto 1fr;
   position: relative;
+  max-width: var(--max-width);
+  margin: 0 auto;
 }
diff --git a/app/[lang]/(live)/(public)/hotelreservation/layout.module.css b/app/[lang]/(live)/(public)/hotelreservation/layout.module.css
index 4478bdb18..e12cfcba6 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/layout.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/layout.module.css
@@ -1,3 +1,5 @@
 .layout {
   min-height: 100dvh;
+  max-width: var(--max-width);
+  margin: 0 auto;
 }
diff --git a/components/HotelReservation/HotelCard/hotelCard.module.css b/components/HotelReservation/HotelCard/hotelCard.module.css
index a6c4a892d..9bb66cfd3 100644
--- a/components/HotelReservation/HotelCard/hotelCard.module.css
+++ b/components/HotelReservation/HotelCard/hotelCard.module.css
@@ -9,7 +9,7 @@
   background-color: var(--Base-Surface-Primary-light-Normal);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Medium);
-  width: 307px;
+  width: 100%;
 }
 
 .imageContainer {
@@ -72,7 +72,7 @@
       "image hotel"
       "image prices";
     overflow: hidden;
-    width: 1050px;
+    width: 100%;
     padding: 0;
   }
 

From 158472524f31f2b727e4a29492d9001e344a811e Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Mon, 7 Oct 2024 14:10:25 +0200
Subject: [PATCH 02/44] More design fixes

---
 components/ContentType/HotelPage/hotelPage.module.css      | 1 +
 components/HotelReservation/HotelCard/hotelCard.module.css | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/ContentType/HotelPage/hotelPage.module.css b/components/ContentType/HotelPage/hotelPage.module.css
index eda544de8..9d38ca1da 100644
--- a/components/ContentType/HotelPage/hotelPage.module.css
+++ b/components/ContentType/HotelPage/hotelPage.module.css
@@ -62,6 +62,7 @@
     ); /* Full height without the header + booking widget */
     max-height: 935px; /* Fixed max according to figma */
     overflow: hidden;
+    width: 100%;
   }
 
   .pageContainer > nav {
diff --git a/components/HotelReservation/HotelCard/hotelCard.module.css b/components/HotelReservation/HotelCard/hotelCard.module.css
index 9bb66cfd3..0ffa5b150 100644
--- a/components/HotelReservation/HotelCard/hotelCard.module.css
+++ b/components/HotelReservation/HotelCard/hotelCard.module.css
@@ -72,7 +72,6 @@
       "image hotel"
       "image prices";
     overflow: hidden;
-    width: 100%;
     padding: 0;
   }
 

From 801da501206c6803e7a23cc4c31bd51003c3d8a8 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Mon, 7 Oct 2024 14:22:43 +0200
Subject: [PATCH 03/44] Remove unnecessary css

---
 components/ContentType/HotelPage/hotelPage.module.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/ContentType/HotelPage/hotelPage.module.css b/components/ContentType/HotelPage/hotelPage.module.css
index 9d38ca1da..c5dd0a038 100644
--- a/components/ContentType/HotelPage/hotelPage.module.css
+++ b/components/ContentType/HotelPage/hotelPage.module.css
@@ -1,7 +1,5 @@
 .pageContainer {
   display: grid;
-  max-width: var(--max-width);
-  margin: 0 auto;
   grid-template-areas:
     "hotelImages"
     "tabNavigation"

From 915657bf156295b84388121d321488ec4184c5b4 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Mon, 7 Oct 2024 14:33:08 +0200
Subject: [PATCH 04/44] Fix for current navigation

---
 components/Current/Header/MainMenu/mainMenu.module.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/Current/Header/MainMenu/mainMenu.module.css b/components/Current/Header/MainMenu/mainMenu.module.css
index 122abdc4f..a7677e895 100644
--- a/components/Current/Header/MainMenu/mainMenu.module.css
+++ b/components/Current/Header/MainMenu/mainMenu.module.css
@@ -9,6 +9,8 @@
   width: 100%;
   z-index: 99999;
   height: var(--current-mobile-site-header-height);
+  max-width: var(--max-width-navigation);
+  margin: 0 auto;
 }
 
 .container {

From 155b6683c48d2702ba87d9820769da930db346f1 Mon Sep 17 00:00:00 2001
From: Simon Emanuelsson <simon.emanuelsson@scandichotels.com>
Date: Tue, 8 Oct 2024 11:06:09 +0200
Subject: [PATCH 05/44] feat: rename form/card to form/choicecard

---
 .../HotelReservation/EnterDetails/BedType/index.tsx |  6 ++----
 .../EnterDetails/Breakfast/index.tsx                |  6 ++----
 .../HotelReservation/EnterDetails/Details/index.tsx |  5 +++--
 .../Form/{Card => ChoiceCard}/Checkbox.tsx          |  4 ++--
 .../Form/{Card => ChoiceCard}/Radio.tsx             |  4 ++--
 .../Form/{Card => ChoiceCard/_Card}/card.module.css |  0
 .../Form/{Card => ChoiceCard/_Card}/card.ts         | 13 +++++++------
 .../Form/{Card => ChoiceCard/_Card}/index.tsx       |  6 +++---
 8 files changed, 21 insertions(+), 23 deletions(-)
 rename components/TempDesignSystem/Form/{Card => ChoiceCard}/Checkbox.tsx (58%)
 rename components/TempDesignSystem/Form/{Card => ChoiceCard}/Radio.tsx (57%)
 rename components/TempDesignSystem/Form/{Card => ChoiceCard/_Card}/card.module.css (100%)
 rename components/TempDesignSystem/Form/{Card => ChoiceCard/_Card}/card.ts (73%)
 rename components/TempDesignSystem/Form/{Card => ChoiceCard/_Card}/index.tsx (94%)

diff --git a/components/HotelReservation/EnterDetails/BedType/index.tsx b/components/HotelReservation/EnterDetails/BedType/index.tsx
index 61633cdcf..955ce740b 100644
--- a/components/HotelReservation/EnterDetails/BedType/index.tsx
+++ b/components/HotelReservation/EnterDetails/BedType/index.tsx
@@ -5,7 +5,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { KingBedIcon } from "@/components/Icons"
-import RadioCard from "@/components/TempDesignSystem/Form/Card/Radio"
+import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
 
 import { bedTypeSchema } from "./schema"
 
@@ -24,9 +24,7 @@ export default function BedType() {
     reValidateMode: "onChange",
   })
 
-  // @ts-expect-error - Types mismatch docs as this is
-  // a pattern that is allowed https://formatjs.io/docs/react-intl/api#usage
-  const text = intl.formatMessage(
+  const text = intl.formatMessage<React.ReactNode>(
     { id: "<b>Included</b> (based on availability)" },
     { b: (str) => <b>{str}</b> }
   )
diff --git a/components/HotelReservation/EnterDetails/Breakfast/index.tsx b/components/HotelReservation/EnterDetails/Breakfast/index.tsx
index b8f00ec83..8551e12dc 100644
--- a/components/HotelReservation/EnterDetails/Breakfast/index.tsx
+++ b/components/HotelReservation/EnterDetails/Breakfast/index.tsx
@@ -5,7 +5,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { BreakfastIcon, NoBreakfastIcon } from "@/components/Icons"
-import RadioCard from "@/components/TempDesignSystem/Form/Card/Radio"
+import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
 
 import { breakfastSchema } from "./schema"
 
@@ -31,9 +31,7 @@ export default function Breakfast() {
           Icon={BreakfastIcon}
           id={breakfastEnum.BREAKFAST}
           name="breakfast"
-          // @ts-expect-error - Types mismatch docs as this is
-          // a pattern that is allowed https://formatjs.io/docs/react-intl/api#usage
-          subtitle={intl.formatMessage(
+          subtitle={intl.formatMessage<React.ReactNode>(
             { id: "<b>{amount} {currency}</b>/night per adult" },
             {
               amount: "150",
diff --git a/components/HotelReservation/EnterDetails/Details/index.tsx b/components/HotelReservation/EnterDetails/Details/index.tsx
index 2dd1b1cdb..15792e384 100644
--- a/components/HotelReservation/EnterDetails/Details/index.tsx
+++ b/components/HotelReservation/EnterDetails/Details/index.tsx
@@ -4,7 +4,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Button from "@/components/TempDesignSystem/Button"
-import CheckboxCard from "@/components/TempDesignSystem/Form/Card/Checkbox"
+import CheckboxCard from "@/components/TempDesignSystem/Form/ChoiceCard/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
@@ -88,8 +88,9 @@ export default function Details({ user }: DetailsProps) {
         <footer className={styles.footer}>
           {user ? null : (
             <CheckboxCard
+              highlightSubtitle
               list={list}
-              saving
+              name="join"
               subtitle={intl.formatMessage(
                 {
                   id: "{difference}{amount} {currency}",
diff --git a/components/TempDesignSystem/Form/Card/Checkbox.tsx b/components/TempDesignSystem/Form/ChoiceCard/Checkbox.tsx
similarity index 58%
rename from components/TempDesignSystem/Form/Card/Checkbox.tsx
rename to components/TempDesignSystem/Form/ChoiceCard/Checkbox.tsx
index 7f0ea428a..ca32951cb 100644
--- a/components/TempDesignSystem/Form/Card/Checkbox.tsx
+++ b/components/TempDesignSystem/Form/ChoiceCard/Checkbox.tsx
@@ -1,6 +1,6 @@
-import Card from "."
+import Card from "./_Card"
 
-import type { CheckboxProps } from "./card"
+import type { CheckboxProps } from "./_Card/card"
 
 export default function CheckboxCard(props: CheckboxProps) {
   return <Card {...props} type="checkbox" />
diff --git a/components/TempDesignSystem/Form/Card/Radio.tsx b/components/TempDesignSystem/Form/ChoiceCard/Radio.tsx
similarity index 57%
rename from components/TempDesignSystem/Form/Card/Radio.tsx
rename to components/TempDesignSystem/Form/ChoiceCard/Radio.tsx
index c1de94782..f35ab6a5e 100644
--- a/components/TempDesignSystem/Form/Card/Radio.tsx
+++ b/components/TempDesignSystem/Form/ChoiceCard/Radio.tsx
@@ -1,6 +1,6 @@
-import Card from "."
+import Card from "./_Card"
 
-import type { RadioProps } from "./card"
+import type { RadioProps } from "./_Card/card"
 
 export default function RadioCard(props: RadioProps) {
   return <Card {...props} type="radio" />
diff --git a/components/TempDesignSystem/Form/Card/card.module.css b/components/TempDesignSystem/Form/ChoiceCard/_Card/card.module.css
similarity index 100%
rename from components/TempDesignSystem/Form/Card/card.module.css
rename to components/TempDesignSystem/Form/ChoiceCard/_Card/card.module.css
diff --git a/components/TempDesignSystem/Form/Card/card.ts b/components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts
similarity index 73%
rename from components/TempDesignSystem/Form/Card/card.ts
rename to components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts
index 167595164..d1a961150 100644
--- a/components/TempDesignSystem/Form/Card/card.ts
+++ b/components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts
@@ -1,14 +1,15 @@
 import type { IconProps } from "@/types/components/icon"
 
-interface BaseCardProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+interface BaseCardProps
+  extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "title"> {
   Icon?: (props: IconProps) => JSX.Element
   declined?: boolean
+  highlightSubtitle?: boolean
   iconHeight?: number
   iconWidth?: number
-  name?: string
-  saving?: boolean
-  subtitle?: string
-  title: string
+  name: string
+  subtitle?: React.ReactNode
+  title: React.ReactNode
   type: "checkbox" | "radio"
   value?: string
 }
@@ -22,7 +23,7 @@ interface ListCardProps extends BaseCardProps {
 
 interface TextCardProps extends BaseCardProps {
   list?: never
-  text: string
+  text: React.ReactNode
 }
 
 export type CardProps = ListCardProps | TextCardProps
diff --git a/components/TempDesignSystem/Form/Card/index.tsx b/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
similarity index 94%
rename from components/TempDesignSystem/Form/Card/index.tsx
rename to components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
index 82f99e80d..8d020ea4d 100644
--- a/components/TempDesignSystem/Form/Card/index.tsx
+++ b/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
@@ -13,10 +13,10 @@ export default function Card({
   iconHeight = 32,
   iconWidth = 32,
   declined = false,
+  highlightSubtitle = false,
   id,
   list,
-  name = "join",
-  saving = false,
+  name,
   subtitle,
   text,
   title,
@@ -31,7 +31,7 @@ export default function Card({
       {subtitle ? (
         <Caption
           className={styles.subtitle}
-          color={saving ? "baseTextAccent" : "uiTextHighContrast"}
+          color={highlightSubtitle ? "baseTextAccent" : "uiTextHighContrast"}
           textTransform="bold"
         >
           {subtitle}

From 4979c22c4a46df623cc821e415c8d97a706218e4 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Fri, 4 Oct 2024 08:36:08 +0200
Subject: [PATCH 06/44] feat(SW-216): added table to contentstack query for
 contentpage

---
 components/Blocks/index.tsx                   |  4 ++
 lib/graphql/Fragments/Blocks/Table.graphql    |  7 +++
 .../Query/ContentPage/ContentPage.graphql     |  2 +
 .../contentstack/contentPage/output.ts        |  8 +++
 .../contentstack/schemas/blocks/table.ts      | 51 +++++++++++++++++++
 types/enums/blocks.ts                         |  1 +
 types/enums/contentPage.ts                    |  1 +
 types/trpc/routers/contentstack/blocks.ts     |  3 ++
 8 files changed, 77 insertions(+)
 create mode 100644 lib/graphql/Fragments/Blocks/Table.graphql
 create mode 100644 server/routers/contentstack/schemas/blocks/table.ts

diff --git a/components/Blocks/index.tsx b/components/Blocks/index.tsx
index 1c6d0bcbc..efd0f2bcb 100644
--- a/components/Blocks/index.tsx
+++ b/components/Blocks/index.tsx
@@ -5,6 +5,8 @@ import TextCols from "@/components/Blocks/TextCols"
 import UspGrid from "@/components/Blocks/UspGrid"
 import JsonToHtml from "@/components/JsonToHtml"
 
+import Table from "../Table"
+
 import type { BlocksProps } from "@/types/components/blocks"
 import { BlocksEnums } from "@/types/enums/blocks"
 
@@ -47,6 +49,8 @@ export default function Blocks({ blocks }: BlocksProps) {
             title={block.shortcuts.title}
           />
         )
+      case BlocksEnums.block.Table:
+        return <Table columns={block.table.columns} rows={block.table.rows} />
       case BlocksEnums.block.TextCols:
         return <TextCols text_cols={block.text_cols} />
       case BlocksEnums.block.TextContent:
diff --git a/lib/graphql/Fragments/Blocks/Table.graphql b/lib/graphql/Fragments/Blocks/Table.graphql
new file mode 100644
index 000000000..bb824f07e
--- /dev/null
+++ b/lib/graphql/Fragments/Blocks/Table.graphql
@@ -0,0 +1,7 @@
+fragment Table_ContentPage on ContentPageBlocksTable {
+  __typename
+  table {
+    column_widths
+    table
+  }
+}
diff --git a/lib/graphql/Query/ContentPage/ContentPage.graphql b/lib/graphql/Query/ContentPage/ContentPage.graphql
index c1e4decc5..2bed1d02d 100644
--- a/lib/graphql/Query/ContentPage/ContentPage.graphql
+++ b/lib/graphql/Query/ContentPage/ContentPage.graphql
@@ -4,6 +4,7 @@
 #import "../../Fragments/Blocks/Content.graphql"
 #import "../../Fragments/Blocks/DynamicContent.graphql"
 #import "../../Fragments/Blocks/Shortcuts.graphql"
+#import "../../Fragments/Blocks/Table.graphql"
 #import "../../Fragments/Blocks/TextCols.graphql"
 #import "../../Fragments/Blocks/UspGrid.graphql"
 
@@ -28,6 +29,7 @@ query GetContentPage($locale: String!, $uid: String!) {
       ...Content_ContentPage
       ...DynamicContent_ContentPage
       ...Shortcuts_ContentPage
+      ...Table_ContentPage
       ...TextCols_ContentPage
       ...UspGrid_ContentPage
     }
diff --git a/server/routers/contentstack/contentPage/output.ts b/server/routers/contentstack/contentPage/output.ts
index d4b02d33e..48ebb0f40 100644
--- a/server/routers/contentstack/contentPage/output.ts
+++ b/server/routers/contentstack/contentPage/output.ts
@@ -18,6 +18,7 @@ import {
   shortcutsRefsSchema,
   shortcutsSchema,
 } from "../schemas/blocks/shortcuts"
+import { tableSchema } from "../schemas/blocks/table"
 import { textColsRefsSchema, textColsSchema } from "../schemas/blocks/textCols"
 import { uspGridRefsSchema, uspGridSchema } from "../schemas/blocks/uspGrid"
 import { tempImageVaultAssetSchema } from "../schemas/imageVault"
@@ -75,11 +76,18 @@ export const contentPageUspGrid = z
   })
   .merge(uspGridSchema)
 
+export const contentPageTable = z
+  .object({
+    __typename: z.literal(ContentPageEnum.ContentStack.blocks.Table),
+  })
+  .merge(tableSchema)
+
 export const blocksSchema = z.discriminatedUnion("__typename", [
   contentPageCards,
   contentPageContent,
   contentPageDynamicContent,
   contentPageShortcuts,
+  contentPageTable,
   contentPageTextCols,
   contentPageUspGrid,
 ])
diff --git a/server/routers/contentstack/schemas/blocks/table.ts b/server/routers/contentstack/schemas/blocks/table.ts
new file mode 100644
index 000000000..74f144608
--- /dev/null
+++ b/server/routers/contentstack/schemas/blocks/table.ts
@@ -0,0 +1,51 @@
+import { z } from "zod"
+
+import { BlocksEnums } from "@/types/enums/blocks"
+
+export const tableSchema = z.object({
+  typename: z
+    .literal(BlocksEnums.block.Table)
+    .optional()
+    .default(BlocksEnums.block.Table),
+  table: z
+    .object({
+      column_widths: z.array(z.number()),
+      table: z.object({
+        tableState: z.object({
+          columns: z.array(
+            z.object({
+              id: z.string(),
+              label: z.string().default(""),
+              accessor: z.string(),
+              dataType: z.string(),
+            })
+          ),
+          data: z.array(z.object({}).catchall(z.string())),
+          skipReset: z.boolean(),
+          tableActionEnabled: z.boolean(),
+          headerRowAdded: z.boolean(),
+        }),
+      }),
+    })
+    .transform((data) => {
+      const columns = data.table.tableState.columns.map((col, idx) => ({
+        id: col.id,
+        Header: col.label || "",
+        accessor: col.accessor,
+        columnWidth: data.column_widths[idx] || 0,
+      }))
+
+      const rows = data.table.tableState.data.map((rowData) => {
+        const transformedRow: Record<string, string> = {}
+        columns.forEach((col) => {
+          transformedRow[col.accessor] = rowData[col.accessor] || ""
+        })
+        return transformedRow
+      })
+
+      return {
+        columns,
+        rows,
+      }
+    }),
+})
diff --git a/types/enums/blocks.ts b/types/enums/blocks.ts
index b91989b2e..81a088bd1 100644
--- a/types/enums/blocks.ts
+++ b/types/enums/blocks.ts
@@ -4,6 +4,7 @@ export namespace BlocksEnums {
     Content = "Content",
     DynamicContent = "DynamicContent",
     Shortcuts = "Shortcuts",
+    Table = "Table",
     TextCols = "TextCols",
     TextContent = "TextContent",
     UspGrid = "UspGrid",
diff --git a/types/enums/contentPage.ts b/types/enums/contentPage.ts
index 99dd48911..df5dab28e 100644
--- a/types/enums/contentPage.ts
+++ b/types/enums/contentPage.ts
@@ -7,6 +7,7 @@ export namespace ContentPageEnum {
       Shortcuts = "ContentPageBlocksShortcuts",
       TextCols = "ContentPageBlocksTextCols",
       UspGrid = "ContentPageBlocksUspGrid",
+      Table = "ContentPageBlocksTable",
     }
 
     export const enum sidebar {
diff --git a/types/trpc/routers/contentstack/blocks.ts b/types/trpc/routers/contentstack/blocks.ts
index 6bffdfc90..e1ff7e923 100644
--- a/types/trpc/routers/contentstack/blocks.ts
+++ b/types/trpc/routers/contentstack/blocks.ts
@@ -4,6 +4,7 @@ import { cardsGridSchema } from "@/server/routers/contentstack/schemas/blocks/ca
 import { contentSchema } from "@/server/routers/contentstack/schemas/blocks/content"
 import { dynamicContentSchema } from "@/server/routers/contentstack/schemas/blocks/dynamicContent"
 import { shortcutsSchema } from "@/server/routers/contentstack/schemas/blocks/shortcuts"
+import { tableSchema } from "@/server/routers/contentstack/schemas/blocks/table"
 import { textColsSchema } from "@/server/routers/contentstack/schemas/blocks/textCols"
 import { uspGridSchema } from "@/server/routers/contentstack/schemas/blocks/uspGrid"
 
@@ -12,5 +13,7 @@ export interface Content extends z.output<typeof contentSchema> {}
 export interface DynamicContent extends z.output<typeof dynamicContentSchema> {}
 export interface Shortcuts extends z.output<typeof shortcutsSchema> {}
 export type Shortcut = Shortcuts["shortcuts"]
+export interface TableBlock extends z.output<typeof tableSchema> {}
+export type Table = TableBlock["table"]
 export interface TextCols extends z.output<typeof textColsSchema> {}
 export interface UspGrid extends z.output<typeof uspGridSchema> {}

From 5e4ef02ebfa251747f6e3c20624d327000000be4 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Fri, 4 Oct 2024 11:51:39 +0200
Subject: [PATCH 07/44] feat(SW-441): Added table block component

---
 components/Blocks/Table/index.tsx             | 97 +++++++++++++++++++
 components/Blocks/Table/table.module.css      |  6 ++
 components/Blocks/index.tsx                   |  4 +-
 .../ContentPage/contentPage.module.css        |  2 +
 .../TempDesignSystem/ScrollWrapper/index.tsx  | 35 +++++++
 .../ScrollWrapper/scrollWrapper.module.css    | 33 +++++++
 .../ScrollWrapper/scrollWrapper.ts            |  2 +
 .../ShowMoreButton/button.module.css          |  4 -
 .../TempDesignSystem/ShowMoreButton/index.tsx | 25 +++--
 .../ShowMoreButton/showMoreButton.module.css  | 23 +++++
 .../ShowMoreButton/showMoreButton.ts          | 11 +++
 .../ShowMoreButton/variants.ts                | 11 +++
 components/TempDesignSystem/Table/TH.tsx      | 10 +-
 components/TempDesignSystem/Table/index.tsx   | 27 +++++-
 .../TempDesignSystem/Table/table.module.css   | 39 +++++++-
 components/TempDesignSystem/Table/table.ts    | 14 +++
 components/TempDesignSystem/Table/variants.ts | 27 ++++++
 hooks/useScrollShadows.ts                     | 36 +++++++
 package-lock.json                             | 32 ++++++
 package.json                                  |  1 +
 .../contentstack/schemas/blocks/table.ts      | 14 ++-
 types/components/blocks/table.ts              |  5 +
 types/trpc/routers/contentstack/blocks.ts     |  2 +-
 23 files changed, 431 insertions(+), 29 deletions(-)
 create mode 100644 components/Blocks/Table/index.tsx
 create mode 100644 components/Blocks/Table/table.module.css
 create mode 100644 components/TempDesignSystem/ScrollWrapper/index.tsx
 create mode 100644 components/TempDesignSystem/ScrollWrapper/scrollWrapper.module.css
 create mode 100644 components/TempDesignSystem/ScrollWrapper/scrollWrapper.ts
 delete mode 100644 components/TempDesignSystem/ShowMoreButton/button.module.css
 create mode 100644 components/TempDesignSystem/ShowMoreButton/showMoreButton.module.css
 create mode 100644 components/TempDesignSystem/ShowMoreButton/showMoreButton.ts
 create mode 100644 components/TempDesignSystem/ShowMoreButton/variants.ts
 create mode 100644 components/TempDesignSystem/Table/table.ts
 create mode 100644 components/TempDesignSystem/Table/variants.ts
 create mode 100644 hooks/useScrollShadows.ts
 create mode 100644 types/components/blocks/table.ts

diff --git a/components/Blocks/Table/index.tsx b/components/Blocks/Table/index.tsx
new file mode 100644
index 000000000..1a84cae17
--- /dev/null
+++ b/components/Blocks/Table/index.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import {
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { useState } from "react"
+
+import ScrollWrapper from "@/components/TempDesignSystem/ScrollWrapper"
+import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
+import Table from "@/components/TempDesignSystem/Table"
+
+import styles from "./table.module.css"
+
+import type { TableProps } from "@/types/components/blocks/table"
+
+export default function TableBlock({ data }: TableProps) {
+  const { columns, rows, totalWidth } = data
+  const initialPageSize = 5
+  const [pageSize, setPageSize] = useState(initialPageSize)
+  const showMoreVisible = rows.length > initialPageSize
+  const showLessVisible = pageSize >= rows.length
+  const columnDefs = columns.map((col) => ({
+    accessorKey: col.id,
+    header: col.header,
+    size: col.width,
+  }))
+
+  const table = useReactTable({
+    columns: columnDefs,
+    data: rows,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    state: {
+      pagination: {
+        pageIndex: 0,
+        pageSize,
+      },
+    },
+  })
+
+  function handleShowMore() {
+    setPageSize(showLessVisible ? initialPageSize : rows.length)
+  }
+
+  return (
+    <div className={styles.tableWrapper}>
+      <ScrollWrapper>
+        <Table
+          width={`${totalWidth}%`}
+          variant="content"
+          intent="striped"
+          layout="fixed"
+          borderRadius="none"
+        >
+          <Table.THead>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <Table.TR key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <Table.TH
+                    key={header.id}
+                    width={`${header.column.columnDef.size}%`}
+                  >
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                  </Table.TH>
+                ))}
+              </Table.TR>
+            ))}
+          </Table.THead>
+          <Table.TBody>
+            {table.getRowModel().rows.map((row) => (
+              <Table.TR key={row.id}>
+                {row.getVisibleCells().map((cell) => (
+                  <Table.TD key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </Table.TD>
+                ))}
+              </Table.TR>
+            ))}
+          </Table.TBody>
+        </Table>
+      </ScrollWrapper>
+      {showMoreVisible ? (
+        <ShowMoreButton
+          loadMoreData={handleShowMore}
+          showLess={showLessVisible}
+          intent="table"
+        />
+      ) : null}
+    </div>
+  )
+}
diff --git a/components/Blocks/Table/table.module.css b/components/Blocks/Table/table.module.css
new file mode 100644
index 000000000..805cb9935
--- /dev/null
+++ b/components/Blocks/Table/table.module.css
@@ -0,0 +1,6 @@
+.tableWrapper {
+  display: grid;
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Small);
+  overflow: hidden;
+}
diff --git a/components/Blocks/index.tsx b/components/Blocks/index.tsx
index efd0f2bcb..2423508d1 100644
--- a/components/Blocks/index.tsx
+++ b/components/Blocks/index.tsx
@@ -5,7 +5,7 @@ import TextCols from "@/components/Blocks/TextCols"
 import UspGrid from "@/components/Blocks/UspGrid"
 import JsonToHtml from "@/components/JsonToHtml"
 
-import Table from "../Table"
+import Table from "./Table"
 
 import type { BlocksProps } from "@/types/components/blocks"
 import { BlocksEnums } from "@/types/enums/blocks"
@@ -50,7 +50,7 @@ export default function Blocks({ blocks }: BlocksProps) {
           />
         )
       case BlocksEnums.block.Table:
-        return <Table columns={block.table.columns} rows={block.table.rows} />
+        return <Table data={block.table} />
       case BlocksEnums.block.TextCols:
         return <TextCols text_cols={block.text_cols} />
       case BlocksEnums.block.TextContent:
diff --git a/components/ContentType/ContentPage/contentPage.module.css b/components/ContentType/ContentPage/contentPage.module.css
index 026aa6065..aa0036f83 100644
--- a/components/ContentType/ContentPage/contentPage.module.css
+++ b/components/ContentType/ContentPage/contentPage.module.css
@@ -40,6 +40,8 @@
 }
 
 .mainContent {
+  display: grid;
+  gap: var(--Spacing-x4);
   width: 100%;
 }
 
diff --git a/components/TempDesignSystem/ScrollWrapper/index.tsx b/components/TempDesignSystem/ScrollWrapper/index.tsx
new file mode 100644
index 000000000..1eb341f90
--- /dev/null
+++ b/components/TempDesignSystem/ScrollWrapper/index.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { useMemo } from "react"
+
+import useScrollShadows from "@/hooks/useScrollShadows"
+
+import { ScrollWrapperProps } from "./scrollWrapper"
+
+import styles from "./scrollWrapper.module.css"
+
+export default function ScrollWrapper({
+  className,
+  children,
+}: ScrollWrapperProps) {
+  const { containerRef, showLeftShadow, showRightShadow } = useScrollShadows()
+
+  const classNames = useMemo(() => {
+    const cls = [styles.scrollWrapper, className]
+    if (showLeftShadow) {
+      cls.push(styles.leftShadow)
+    }
+    if (showRightShadow) {
+      cls.push(styles.rightShadow)
+    }
+    return cls.join(" ")
+  }, [showLeftShadow, showRightShadow, className])
+
+  return (
+    <div className={classNames}>
+      <div className={styles.content} ref={containerRef}>
+        {children}
+      </div>
+    </div>
+  )
+}
diff --git a/components/TempDesignSystem/ScrollWrapper/scrollWrapper.module.css b/components/TempDesignSystem/ScrollWrapper/scrollWrapper.module.css
new file mode 100644
index 000000000..b604a3c24
--- /dev/null
+++ b/components/TempDesignSystem/ScrollWrapper/scrollWrapper.module.css
@@ -0,0 +1,33 @@
+.scrollWrapper {
+  position: relative;
+  overflow: hidden;
+}
+
+.scrollWrapper::before,
+.scrollWrapper::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+  transition: opacity 0.2s ease;
+  opacity: 0;
+  width: 50px;
+}
+
+.scrollWrapper.leftShadow::before {
+  left: 0;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
+  opacity: 1;
+}
+
+.scrollWrapper.rightShadow::after {
+  right: 0;
+  background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent);
+  opacity: 1;
+}
+
+.content {
+  overflow-x: auto;
+}
diff --git a/components/TempDesignSystem/ScrollWrapper/scrollWrapper.ts b/components/TempDesignSystem/ScrollWrapper/scrollWrapper.ts
new file mode 100644
index 000000000..8440abfa5
--- /dev/null
+++ b/components/TempDesignSystem/ScrollWrapper/scrollWrapper.ts
@@ -0,0 +1,2 @@
+export interface ScrollWrapperProps
+  extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>> {}
diff --git a/components/TempDesignSystem/ShowMoreButton/button.module.css b/components/TempDesignSystem/ShowMoreButton/button.module.css
deleted file mode 100644
index f55557f33..000000000
--- a/components/TempDesignSystem/ShowMoreButton/button.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.container {
-  display: flex;
-  justify-content: center;
-}
diff --git a/components/TempDesignSystem/ShowMoreButton/index.tsx b/components/TempDesignSystem/ShowMoreButton/index.tsx
index 6e9cae7bf..ca8a24dcb 100644
--- a/components/TempDesignSystem/ShowMoreButton/index.tsx
+++ b/components/TempDesignSystem/ShowMoreButton/index.tsx
@@ -5,18 +5,29 @@ import { useIntl } from "react-intl"
 import { ChevronDownIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 
-import styles from "./button.module.css"
+import { showMoreButtonVariants } from "./variants"
 
-import type { ShowMoreButtonParams } from "@/types/components/myPages/stays/button"
+import styles from "./showMoreButton.module.css"
+
+import type { ShowMoreButtonProps } from "./showMoreButton"
 
 export default function ShowMoreButton({
+  className,
+  intent,
   disabled,
+  showLess,
   loadMoreData,
-}: ShowMoreButtonParams) {
-  const { formatMessage } = useIntl()
+}: ShowMoreButtonProps) {
+  const intl = useIntl()
+  const classNames = showMoreButtonVariants({
+    className,
+    intent,
+  })
+
   return (
-    <div className={styles.container}>
+    <div className={`${classNames} ${showLess ? styles.showLess : ""}`}>
       <Button
+        className={styles.button}
         disabled={disabled}
         onClick={loadMoreData}
         variant="icon"
@@ -24,8 +35,8 @@ export default function ShowMoreButton({
         theme="base"
         intent="text"
       >
-        <ChevronDownIcon />
-        {formatMessage({ id: "Show more" })}
+        <ChevronDownIcon className={styles.icon} />
+        {intl.formatMessage({ id: showLess ? "Show less" : "Show more" })}
       </Button>
     </div>
   )
diff --git a/components/TempDesignSystem/ShowMoreButton/showMoreButton.module.css b/components/TempDesignSystem/ShowMoreButton/showMoreButton.module.css
new file mode 100644
index 000000000..32299ec80
--- /dev/null
+++ b/components/TempDesignSystem/ShowMoreButton/showMoreButton.module.css
@@ -0,0 +1,23 @@
+.container {
+  display: flex;
+  justify-content: center;
+}
+
+.table {
+  display: grid;
+  justify-content: stretch;
+  border-top: 1px solid var(--Base-Border-Subtle);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+}
+
+.table .button {
+  border-radius: 0;
+}
+
+.icon {
+  transition: transform 0.3s;
+}
+
+.showLess .icon {
+  transform: rotate(180deg);
+}
diff --git a/components/TempDesignSystem/ShowMoreButton/showMoreButton.ts b/components/TempDesignSystem/ShowMoreButton/showMoreButton.ts
new file mode 100644
index 000000000..b6ad929f5
--- /dev/null
+++ b/components/TempDesignSystem/ShowMoreButton/showMoreButton.ts
@@ -0,0 +1,11 @@
+import { showMoreButtonVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface ShowMoreButtonProps
+  extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>,
+    VariantProps<typeof showMoreButtonVariants> {
+  disabled?: boolean
+  showLess?: boolean
+  loadMoreData: () => void
+}
diff --git a/components/TempDesignSystem/ShowMoreButton/variants.ts b/components/TempDesignSystem/ShowMoreButton/variants.ts
new file mode 100644
index 000000000..17f8620f1
--- /dev/null
+++ b/components/TempDesignSystem/ShowMoreButton/variants.ts
@@ -0,0 +1,11 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./showMoreButton.module.css"
+
+export const showMoreButtonVariants = cva(styles.container, {
+  variants: {
+    intent: {
+      table: styles.table,
+    },
+  },
+})
diff --git a/components/TempDesignSystem/Table/TH.tsx b/components/TempDesignSystem/Table/TH.tsx
index ca2377193..657dc2b1d 100644
--- a/components/TempDesignSystem/Table/TH.tsx
+++ b/components/TempDesignSystem/Table/TH.tsx
@@ -1,7 +1,13 @@
 import styles from "./table.module.css"
 
-function TH({ children }: React.PropsWithChildren) {
-  return <th className={styles.th}>{children}</th>
+import type { THeadProps } from "./table"
+
+function TH({ children, width = "auto", ...props }: THeadProps) {
+  return (
+    <th className={styles.th} style={{ width }} {...props}>
+      {children}
+    </th>
+  )
 }
 
 export default TH
diff --git a/components/TempDesignSystem/Table/index.tsx b/components/TempDesignSystem/Table/index.tsx
index 5ba745df5..fb5c4fde6 100644
--- a/components/TempDesignSystem/Table/index.tsx
+++ b/components/TempDesignSystem/Table/index.tsx
@@ -1,13 +1,34 @@
+import { TableProps } from "./table"
 import TBody from "./TBody"
 import TD from "./TD"
 import TH from "./TH"
 import THead from "./THead"
 import TR from "./TR"
+import { tableVariants } from "./variants"
 
-import styles from "./table.module.css"
+function Table({
+  className,
+  intent,
+  borderRadius,
+  variant,
+  layout,
+  width = "100%",
+  children,
+  ...props
+}: TableProps) {
+  const classNames = tableVariants({
+    className,
+    borderRadius,
+    intent,
+    layout,
+    variant,
+  })
 
-function Table({ children }: React.PropsWithChildren) {
-  return <table className={styles.table}>{children}</table>
+  return (
+    <table className={classNames} style={{ width }} {...props}>
+      {children}
+    </table>
+  )
 }
 
 Table.THead = THead
diff --git a/components/TempDesignSystem/Table/table.module.css b/components/TempDesignSystem/Table/table.module.css
index fcbb3fec2..2296b2ecd 100644
--- a/components/TempDesignSystem/Table/table.module.css
+++ b/components/TempDesignSystem/Table/table.module.css
@@ -1,20 +1,20 @@
 .table {
-  border-radius: var(--Corner-radius-Medium);
   border-collapse: collapse;
   overflow: hidden;
-  width: 100%;
+  min-width: 100%;
 }
 
 .thead {
-  background-color: var(--Base-Background-Secondary-Normal, #f7e1d5);
+  color: var(--Base-Text-High-contrast);
+  background-color: var(--Base-Surface-Primary-dark-Normal);
 }
 
 .tbody {
-  background-color: var(--Base-Surface-Primary-light-Normal, #fff);
+  background-color: var(--Base-Surface-Primary-light-Normal);
 }
 
 .tr:not(:last-of-type) {
-  border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider, #f0c1b6);
+  border-bottom: 1px solid var(--Base-Border-Subtle);
 }
 
 .th {
@@ -28,6 +28,35 @@
   padding: var(--Spacing-x2);
 }
 
+.fixed {
+  table-layout: fixed;
+}
+
+.smallRadius {
+  border-radius: var(--Corner-radius-Small);
+}
+.mediumRadius {
+  border-radius: var(--Corner-radius-Medium);
+}
+.largeRadius {
+  border-radius: var(--Corner-radius-Large);
+}
+
+.content .thead {
+  background-color: var(--Base-Surface-Subtle-Hover);
+}
+
+.content .tbody {
+  background-color: var(--Base-Background-Primary-Normal);
+}
+
+.content.striped .tbody .tr:nth-child(odd) {
+  background-color: var(--Base-Surface-Subtle-Normal);
+}
+.content.striped .tbody .tr:nth-child(even) {
+  background-color: var(--Base-Background-Primary-Normal);
+}
+
 @media screen and (min-width: 768px) {
   .th {
     padding: var(--Spacing-x2) var(--Spacing-x3);
diff --git a/components/TempDesignSystem/Table/table.ts b/components/TempDesignSystem/Table/table.ts
new file mode 100644
index 000000000..f2759484d
--- /dev/null
+++ b/components/TempDesignSystem/Table/table.ts
@@ -0,0 +1,14 @@
+import { tableVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface TableProps
+  extends React.PropsWithChildren<React.HTMLAttributes<HTMLTableElement>>,
+    VariantProps<typeof tableVariants> {
+  width?: string
+}
+
+export interface THeadProps
+  extends React.PropsWithChildren<React.HTMLAttributes<HTMLTableCellElement>> {
+  width?: string
+}
diff --git a/components/TempDesignSystem/Table/variants.ts b/components/TempDesignSystem/Table/variants.ts
new file mode 100644
index 000000000..c70202dcf
--- /dev/null
+++ b/components/TempDesignSystem/Table/variants.ts
@@ -0,0 +1,27 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./table.module.css"
+
+export const tableVariants = cva(styles.table, {
+  variants: {
+    intent: {
+      light: styles.light,
+      striped: styles.striped,
+    },
+    variant: {
+      content: styles.content,
+    },
+    borderRadius: {
+      none: "",
+      small: styles.smallRadius,
+      medium: styles.mediumRadius,
+      large: styles.largeRadius,
+    },
+    layout: {
+      fixed: styles.fixed,
+    },
+  },
+  defaultVariants: {
+    borderRadius: "medium",
+  },
+})
diff --git a/hooks/useScrollShadows.ts b/hooks/useScrollShadows.ts
new file mode 100644
index 000000000..7073d110e
--- /dev/null
+++ b/hooks/useScrollShadows.ts
@@ -0,0 +1,36 @@
+import { useEffect, useRef, useState } from "react"
+
+const useScrollShadows = () => {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const [showLeftShadow, setShowLeftShadow] = useState<boolean>(false)
+  const [showRightShadow, setShowRightShadow] = useState<boolean>(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const container = containerRef.current
+      if (!container) return
+
+      setShowLeftShadow(container.scrollLeft > 0)
+      setShowRightShadow(
+        container.scrollLeft < container.scrollWidth - container.clientWidth
+      )
+    }
+
+    const container = containerRef.current
+    if (container) {
+      container.addEventListener("scroll", handleScroll)
+    }
+
+    handleScroll()
+
+    return () => {
+      if (container) {
+        container.removeEventListener("scroll", handleScroll)
+      }
+    }
+  }, [])
+
+  return { containerRef, showLeftShadow, showRightShadow }
+}
+
+export default useScrollShadows
diff --git a/package-lock.json b/package-lock.json
index 35805d69e..c12152ff6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.9",
         "@t3-oss/env-nextjs": "^0.9.2",
         "@tanstack/react-query": "^5.28.6",
+        "@tanstack/react-table": "^8.20.5",
         "@trpc/client": "^11.0.0-rc.467",
         "@trpc/react-query": "^11.0.0-rc.467",
         "@trpc/server": "^11.0.0-rc.467",
@@ -5971,6 +5972,37 @@
         "react": "^18.0.0"
       }
     },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.20.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.5.tgz",
+      "integrity": "sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==",
+      "dependencies": {
+        "@tanstack/table-core": "8.20.5"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.20.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.5.tgz",
+      "integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.1.0.tgz",
diff --git a/package.json b/package.json
index 2be8bd832..ab79709d3 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.9",
     "@t3-oss/env-nextjs": "^0.9.2",
     "@tanstack/react-query": "^5.28.6",
+    "@tanstack/react-table": "^8.20.5",
     "@trpc/client": "^11.0.0-rc.467",
     "@trpc/react-query": "^11.0.0-rc.467",
     "@trpc/server": "^11.0.0-rc.467",
diff --git a/server/routers/contentstack/schemas/blocks/table.ts b/server/routers/contentstack/schemas/blocks/table.ts
index 74f144608..5109d487b 100644
--- a/server/routers/contentstack/schemas/blocks/table.ts
+++ b/server/routers/contentstack/schemas/blocks/table.ts
@@ -28,17 +28,20 @@ export const tableSchema = z.object({
       }),
     })
     .transform((data) => {
+      const totalWidth = data.column_widths.reduce(
+        (acc, width) => acc + width,
+        0
+      )
       const columns = data.table.tableState.columns.map((col, idx) => ({
         id: col.id,
-        Header: col.label || "",
-        accessor: col.accessor,
-        columnWidth: data.column_widths[idx] || 0,
+        header: col.label || "",
+        width: data.column_widths[idx] || 0,
       }))
 
       const rows = data.table.tableState.data.map((rowData) => {
         const transformedRow: Record<string, string> = {}
-        columns.forEach((col) => {
-          transformedRow[col.accessor] = rowData[col.accessor] || ""
+        columns.forEach((header) => {
+          transformedRow[header.id] = rowData[header.id] || ""
         })
         return transformedRow
       })
@@ -46,6 +49,7 @@ export const tableSchema = z.object({
       return {
         columns,
         rows,
+        totalWidth,
       }
     }),
 })
diff --git a/types/components/blocks/table.ts b/types/components/blocks/table.ts
new file mode 100644
index 000000000..ee7d961d0
--- /dev/null
+++ b/types/components/blocks/table.ts
@@ -0,0 +1,5 @@
+import type { TableData } from "@/types/trpc/routers/contentstack/blocks"
+
+export interface TableProps {
+  data: TableData
+}
diff --git a/types/trpc/routers/contentstack/blocks.ts b/types/trpc/routers/contentstack/blocks.ts
index e1ff7e923..1c46dda93 100644
--- a/types/trpc/routers/contentstack/blocks.ts
+++ b/types/trpc/routers/contentstack/blocks.ts
@@ -14,6 +14,6 @@ export interface DynamicContent extends z.output<typeof dynamicContentSchema> {}
 export interface Shortcuts extends z.output<typeof shortcutsSchema> {}
 export type Shortcut = Shortcuts["shortcuts"]
 export interface TableBlock extends z.output<typeof tableSchema> {}
-export type Table = TableBlock["table"]
+export type TableData = TableBlock["table"]
 export interface TextCols extends z.output<typeof textColsSchema> {}
 export interface UspGrid extends z.output<typeof uspGridSchema> {}

From bc43f79c2452e0d1bc09b3cd4b8a27b7a80339fc Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Tue, 8 Oct 2024 08:13:38 +0200
Subject: [PATCH 08/44] fix(SW-216): Fixes after PR

---
 components/Blocks/Table/index.tsx                   |  4 ++--
 components/TempDesignSystem/ScrollWrapper/index.tsx |  3 ++-
 hooks/useScrollShadows.ts                           |  6 ++----
 server/routers/contentstack/schemas/blocks/table.ts | 13 ++++++-------
 types/components/blocks/table.ts                    |  2 +-
 5 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/components/Blocks/Table/index.tsx b/components/Blocks/Table/index.tsx
index 1a84cae17..cb41f674e 100644
--- a/components/Blocks/Table/index.tsx
+++ b/components/Blocks/Table/index.tsx
@@ -14,9 +14,9 @@ import Table from "@/components/TempDesignSystem/Table"
 
 import styles from "./table.module.css"
 
-import type { TableProps } from "@/types/components/blocks/table"
+import type { TableBlockProps } from "@/types/components/blocks/table"
 
-export default function TableBlock({ data }: TableProps) {
+export default function TableBlock({ data }: TableBlockProps) {
   const { columns, rows, totalWidth } = data
   const initialPageSize = 5
   const [pageSize, setPageSize] = useState(initialPageSize)
diff --git a/components/TempDesignSystem/ScrollWrapper/index.tsx b/components/TempDesignSystem/ScrollWrapper/index.tsx
index 1eb341f90..15b4bf845 100644
--- a/components/TempDesignSystem/ScrollWrapper/index.tsx
+++ b/components/TempDesignSystem/ScrollWrapper/index.tsx
@@ -12,7 +12,8 @@ export default function ScrollWrapper({
   className,
   children,
 }: ScrollWrapperProps) {
-  const { containerRef, showLeftShadow, showRightShadow } = useScrollShadows()
+  const { containerRef, showLeftShadow, showRightShadow } =
+    useScrollShadows<HTMLDivElement>()
 
   const classNames = useMemo(() => {
     const cls = [styles.scrollWrapper, className]
diff --git a/hooks/useScrollShadows.ts b/hooks/useScrollShadows.ts
index 7073d110e..3fde382f1 100644
--- a/hooks/useScrollShadows.ts
+++ b/hooks/useScrollShadows.ts
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react"
 
-const useScrollShadows = () => {
-  const containerRef = useRef<HTMLDivElement | null>(null)
+export default function useScrollShadows<T extends HTMLElement>() {
+  const containerRef = useRef<T>(null)
   const [showLeftShadow, setShowLeftShadow] = useState<boolean>(false)
   const [showRightShadow, setShowRightShadow] = useState<boolean>(false)
 
@@ -32,5 +32,3 @@ const useScrollShadows = () => {
 
   return { containerRef, showLeftShadow, showRightShadow }
 }
-
-export default useScrollShadows
diff --git a/server/routers/contentstack/schemas/blocks/table.ts b/server/routers/contentstack/schemas/blocks/table.ts
index 5109d487b..fc694d71f 100644
--- a/server/routers/contentstack/schemas/blocks/table.ts
+++ b/server/routers/contentstack/schemas/blocks/table.ts
@@ -38,13 +38,12 @@ export const tableSchema = z.object({
         width: data.column_widths[idx] || 0,
       }))
 
-      const rows = data.table.tableState.data.map((rowData) => {
-        const transformedRow: Record<string, string> = {}
-        columns.forEach((header) => {
-          transformedRow[header.id] = rowData[header.id] || ""
-        })
-        return transformedRow
-      })
+      const rows = data.table.tableState.data.map((rowData) =>
+        columns.reduce<Record<string, string>>((transformedRow, column) => {
+          transformedRow[column.id] = rowData[column.id] || ""
+          return transformedRow
+        }, {})
+      )
 
       return {
         columns,
diff --git a/types/components/blocks/table.ts b/types/components/blocks/table.ts
index ee7d961d0..9438f7d43 100644
--- a/types/components/blocks/table.ts
+++ b/types/components/blocks/table.ts
@@ -1,5 +1,5 @@
 import type { TableData } from "@/types/trpc/routers/contentstack/blocks"
 
-export interface TableProps {
+export interface TableBlockProps {
   data: TableData
 }

From 4b9a6d2e8e76bac3763e1bc3ad44027026a5b31a Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Tue, 8 Oct 2024 11:06:33 +0200
Subject: [PATCH 09/44] feat(SW-216): Added heading and preamble text to table
 block

---
 components/Blocks/Table/index.tsx             | 104 ++++++++++--------
 .../TempDesignSystem/ScrollWrapper/index.tsx  |   4 +-
 components/TempDesignSystem/Table/index.tsx   |   3 +-
 lib/graphql/Fragments/Blocks/Table.graphql    |   2 +
 .../contentstack/schemas/blocks/table.ts      |   4 +
 5 files changed, 67 insertions(+), 50 deletions(-)

diff --git a/components/Blocks/Table/index.tsx b/components/Blocks/Table/index.tsx
index cb41f674e..7d7d0c457 100644
--- a/components/Blocks/Table/index.tsx
+++ b/components/Blocks/Table/index.tsx
@@ -8,6 +8,8 @@ import {
 } from "@tanstack/react-table"
 import { useState } from "react"
 
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
 import ScrollWrapper from "@/components/TempDesignSystem/ScrollWrapper"
 import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 import Table from "@/components/TempDesignSystem/Table"
@@ -17,7 +19,7 @@ import styles from "./table.module.css"
 import type { TableBlockProps } from "@/types/components/blocks/table"
 
 export default function TableBlock({ data }: TableBlockProps) {
-  const { columns, rows, totalWidth } = data
+  const { columns, rows, totalWidth, heading, preamble } = data
   const initialPageSize = 5
   const [pageSize, setPageSize] = useState(initialPageSize)
   const showMoreVisible = rows.length > initialPageSize
@@ -46,52 +48,60 @@ export default function TableBlock({ data }: TableBlockProps) {
   }
 
   return (
-    <div className={styles.tableWrapper}>
-      <ScrollWrapper>
-        <Table
-          width={`${totalWidth}%`}
-          variant="content"
-          intent="striped"
-          layout="fixed"
-          borderRadius="none"
-        >
-          <Table.THead>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <Table.TR key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <Table.TH
-                    key={header.id}
-                    width={`${header.column.columnDef.size}%`}
-                  >
-                    {flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )}
-                  </Table.TH>
-                ))}
-              </Table.TR>
-            ))}
-          </Table.THead>
-          <Table.TBody>
-            {table.getRowModel().rows.map((row) => (
-              <Table.TR key={row.id}>
-                {row.getVisibleCells().map((cell) => (
-                  <Table.TD key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </Table.TD>
-                ))}
-              </Table.TR>
-            ))}
-          </Table.TBody>
-        </Table>
-      </ScrollWrapper>
-      {showMoreVisible ? (
-        <ShowMoreButton
-          loadMoreData={handleShowMore}
-          showLess={showLessVisible}
-          intent="table"
-        />
+    <SectionContainer>
+      {heading ? (
+        <SectionHeader preamble={data.preamble} title={heading} />
       ) : null}
-    </div>
+      <div className={styles.tableWrapper}>
+        <ScrollWrapper>
+          <Table
+            width={`${totalWidth}%`}
+            variant="content"
+            intent="striped"
+            layout="fixed"
+            borderRadius="none"
+          >
+            <Table.THead>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <Table.TR key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <Table.TH
+                      key={header.id}
+                      width={`${header.column.columnDef.size}%`}
+                    >
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                    </Table.TH>
+                  ))}
+                </Table.TR>
+              ))}
+            </Table.THead>
+            <Table.TBody>
+              {table.getRowModel().rows.map((row) => (
+                <Table.TR key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <Table.TD key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </Table.TD>
+                  ))}
+                </Table.TR>
+              ))}
+            </Table.TBody>
+          </Table>
+        </ScrollWrapper>
+        {showMoreVisible ? (
+          <ShowMoreButton
+            loadMoreData={handleShowMore}
+            showLess={showLessVisible}
+            intent="table"
+          />
+        ) : null}
+      </div>
+    </SectionContainer>
   )
 }
diff --git a/components/TempDesignSystem/ScrollWrapper/index.tsx b/components/TempDesignSystem/ScrollWrapper/index.tsx
index 15b4bf845..529836f20 100644
--- a/components/TempDesignSystem/ScrollWrapper/index.tsx
+++ b/components/TempDesignSystem/ScrollWrapper/index.tsx
@@ -4,10 +4,10 @@ import { useMemo } from "react"
 
 import useScrollShadows from "@/hooks/useScrollShadows"
 
-import { ScrollWrapperProps } from "./scrollWrapper"
-
 import styles from "./scrollWrapper.module.css"
 
+import type { ScrollWrapperProps } from "./scrollWrapper"
+
 export default function ScrollWrapper({
   className,
   children,
diff --git a/components/TempDesignSystem/Table/index.tsx b/components/TempDesignSystem/Table/index.tsx
index fb5c4fde6..87f50326a 100644
--- a/components/TempDesignSystem/Table/index.tsx
+++ b/components/TempDesignSystem/Table/index.tsx
@@ -1,4 +1,3 @@
-import { TableProps } from "./table"
 import TBody from "./TBody"
 import TD from "./TD"
 import TH from "./TH"
@@ -6,6 +5,8 @@ import THead from "./THead"
 import TR from "./TR"
 import { tableVariants } from "./variants"
 
+import type { TableProps } from "./table"
+
 function Table({
   className,
   intent,
diff --git a/lib/graphql/Fragments/Blocks/Table.graphql b/lib/graphql/Fragments/Blocks/Table.graphql
index bb824f07e..66736296b 100644
--- a/lib/graphql/Fragments/Blocks/Table.graphql
+++ b/lib/graphql/Fragments/Blocks/Table.graphql
@@ -1,6 +1,8 @@
 fragment Table_ContentPage on ContentPageBlocksTable {
   __typename
   table {
+    heading
+    preamble
     column_widths
     table
   }
diff --git a/server/routers/contentstack/schemas/blocks/table.ts b/server/routers/contentstack/schemas/blocks/table.ts
index fc694d71f..905c20603 100644
--- a/server/routers/contentstack/schemas/blocks/table.ts
+++ b/server/routers/contentstack/schemas/blocks/table.ts
@@ -9,6 +9,8 @@ export const tableSchema = z.object({
     .default(BlocksEnums.block.Table),
   table: z
     .object({
+      heading: z.string().optional(),
+      preamble: z.string().optional().default(""),
       column_widths: z.array(z.number()),
       table: z.object({
         tableState: z.object({
@@ -46,6 +48,8 @@ export const tableSchema = z.object({
       )
 
       return {
+        heading: data.heading,
+        preamble: data.preamble,
         columns,
         rows,
         totalWidth,

From baf6ed9f2b0be5aae8ae26351e3c6a31e78d7657 Mon Sep 17 00:00:00 2001
From: Niclas Edenvin <niclas.edenvin@scandichotels.com>
Date: Tue, 8 Oct 2024 15:22:51 +0200
Subject: [PATCH 10/44] SW-454 Use the API on select room page

---
 .../hotelreservation/select-rate/page.tsx     |  28 ++--
 .../RoomSelection/FlexibilityOption/index.tsx |  35 ++++-
 .../RoomSelection/RoomCard/index.tsx          |  80 +++++++----
 .../SelectRate/RoomSelection/index.tsx        |  51 ++++---
 .../RoomSelection/roomSelection.module.css    |   2 +
 lib/api/endpoints.ts                          |   1 +
 server/routers/hotels/input.ts                |  11 ++
 server/routers/hotels/output.ts               |  80 +++++++++++
 server/routers/hotels/query.ts                | 129 ++++++++++++++++++
 .../selectRate/flexibilityOption.ts           |   6 +-
 .../hotelReservation/selectRate/roomCard.ts   |  11 +-
 .../selectRate/roomSelection.ts               |   6 +-
 12 files changed, 348 insertions(+), 92 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
index 235eeda52..796c0fedb 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
@@ -2,7 +2,6 @@ import { serverClient } from "@/lib/trpc/server"
 import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
 
 import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
-import { getIntl } from "@/i18n"
 import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
@@ -19,18 +18,15 @@ export default async function SelectRatePage({
   // TODO: Use real endpoint.
   const hotel = tempHotelData.data.attributes
 
-  const rates = await serverClient().hotel.rates.get({
-    // TODO: pass the correct hotel ID and all other parameters that should be included in the search
-    hotelId: searchParams.hotel,
+  const roomConfigurations = await serverClient().hotel.availability.rooms({
+    hotelId: parseInt(searchParams.hotel, 10),
+    roomStayStartDate: "2024-11-02",
+    roomStayEndDate: "2024-11-03",
+    adults: 1,
   })
-
-  // const rates = await serverClient().hotel.availability.getForHotel({
-  // hotelId: 811,
-  // roomStayStartDate: "2024-11-02",
-  // roomStayEndDate: "2024-11-03",
-  // adults: 1,
-  // })
-  const intl = await getIntl()
+  if (!roomConfigurations) {
+    return "No rooms found"
+  }
 
   return (
     <div>
@@ -39,13 +35,7 @@ export default async function SelectRatePage({
 
       <div className={styles.content}>
         <div className={styles.main}>
-          <RoomSelection
-            rates={rates}
-            // TODO: Get real value
-            nrOfNights={1}
-            // TODO: Get real value
-            nrOfAdults={1}
-          />
+          <RoomSelection roomConfigurations={roomConfigurations} />
         </div>
       </div>
     </div>
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
index 5760c219f..dd92ab7f8 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
@@ -9,17 +9,23 @@ import styles from "./flexibilityOption.module.css"
 import { FlexibilityOptionProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
 
 export default function FlexibilityOption({
-  currency,
-  standardPrice,
-  memberPrice,
+  product,
   name,
-  value,
   paymentTerm,
 }: FlexibilityOptionProps) {
   const intl = useIntl()
+
+  if (!product) {
+    // TODO: Implement empty state when this rate can't be booked
+    return <div>TBI: Rate not available</div>
+  }
   return (
     <label>
-      <input type="radio" name="flexibility" value={value} />
+      <input
+        type="radio"
+        name="rateCode"
+        value={product.productType.public.rateCode}
+      />
       <div className={styles.card}>
         <div className={styles.header}>
           <Body>{name}</Body>
@@ -29,15 +35,30 @@ export default function FlexibilityOption({
           <div>
             <dt>{intl.formatMessage({ id: "Standard price" })}</dt>
             <dd>
-              {standardPrice} {currency}
+              {product.productType.public.localPrice.pricePerNight}{" "}
+              {product.productType.public.localPrice.currency}/
+              {intl.formatMessage({ id: "night" })}
             </dd>
           </div>
           <div>
             <dt>{intl.formatMessage({ id: "Member price" })}</dt>
             <dd>
-              {memberPrice} {currency}
+              {product.productType.member.localPrice.pricePerNight}{" "}
+              {product.productType.member.localPrice.currency}/
+              {intl.formatMessage({ id: "night" })}
             </dd>
           </div>
+          {product.productType.public.requestedPrice &&
+            product.productType.member.requestedPrice && (
+              <div>
+                <dt>{intl.formatMessage({ id: "Approx." })}</dt>
+                <dd>
+                  {product.productType.public.requestedPrice.pricePerNight}/
+                  {product.productType.member.requestedPrice.pricePerNight}{" "}
+                  {product.productType.public.requestedPrice.currency}
+                </dd>
+              </div>
+            )}
         </dl>
       </div>
     </label>
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
index ea4c0540c..70e165a9d 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
@@ -11,20 +11,54 @@ import styles from "./roomCard.module.css"
 import { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"
 
 export default function RoomCard({
-  room,
-  nrOfAdults,
-  nrOfNights,
-  breakfastIncluded,
+  rateDefinitions,
+  roomConfiguration,
 }: RoomCardProps) {
   const intl = useIntl()
+
+  const saveRate = rateDefinitions.find(
+    // TODO: Update string when API has decided
+    (rate) => rate.cancellationRule === "NonCancellable"
+  )
+  const changeRate = rateDefinitions.find(
+    // TODO: Update string when API has decided
+    (rate) => rate.cancellationRule === "Modifiable"
+  )
+  const flexRate = rateDefinitions.find(
+    // TODO: Update string when API has decided
+    (rate) => rate.cancellationRule === "CancellableBefore6PM"
+  )
+
+  const saveProduct = saveRate
+    ? roomConfiguration.products.find(
+        (product) =>
+          product.productType.public.rateCode === saveRate.rateCode ||
+          product.productType.member.rateCode === saveRate.rateCode
+      )
+    : undefined
+  const changeProduct = changeRate
+    ? roomConfiguration.products.find(
+        (product) =>
+          product.productType.public.rateCode === changeRate.rateCode ||
+          product.productType.member.rateCode === changeRate.rateCode
+      )
+    : undefined
+  const flexProduct = flexRate
+    ? roomConfiguration.products.find(
+        (product) =>
+          product.productType.public.rateCode === flexRate.rateCode ||
+          product.productType.member.rateCode === flexRate.rateCode
+      )
+    : undefined
+
   return (
     <div className={styles.card}>
       <div className={styles.cardBody}>
         <div className={styles.specification}>
           <Subtitle className={styles.name} type="two">
-            {room.name}
+            {roomConfiguration.roomType}
           </Subtitle>
-          <Caption>{room.size}</Caption>
+          <Caption>Room size TBI</Caption>
           <Button intent="text" type="button" size="small" theme="base">
             {intl.formatMessage({ id: "See room details" })}
           </Button>
@@ -32,20 +66,15 @@ export default function RoomCard({
             {/*TODO: Handle pluralisation*/}
             {intl.formatMessage(
               {
-                id: "Nr night, nr adult",
-                defaultMessage:
-                  "{nights, number} night, {adults, number} adult",
+                id: "Max {nrOfGuests} guests",
+                defaultMessage: "Max {nrOfGuests} guests",
               },
-              { nights: nrOfNights, adults: nrOfAdults }
+              // TODO: Correct number
+              { nrOfGuests: 2 }
             )}
-            {" | "}
-            {breakfastIncluded
-              ? intl.formatMessage({
-                  id: "Breakfast included",
-                })
-              : intl.formatMessage({
-                  id: "Breakfast excluded",
-                })}
+            {intl.formatMessage({
+              id: "Breakfast included",
+            })}
           </Caption>
         </div>
 
@@ -53,25 +82,19 @@ export default function RoomCard({
           name={intl.formatMessage({ id: "Non-refundable" })}
           value="non-refundable"
           paymentTerm={intl.formatMessage({ id: "Pay now" })}
-          standardPrice={room.prices.nonRefundable.standard}
-          memberPrice={room.prices.nonRefundable.member}
-          currency={room.prices.currency}
+          product={saveProduct}
         />
         <FlexibilityOption
           name={intl.formatMessage({ id: "Free rebooking" })}
           value="free-rebooking"
           paymentTerm={intl.formatMessage({ id: "Pay now" })}
-          standardPrice={room.prices.freeRebooking.standard}
-          memberPrice={room.prices.freeRebooking.member}
-          currency={room.prices.currency}
+          product={changeProduct}
         />
         <FlexibilityOption
           name={intl.formatMessage({ id: "Free cancellation" })}
           value="free-cancellation"
           paymentTerm={intl.formatMessage({ id: "Pay later" })}
-          standardPrice={room.prices.freeCancellation.standard}
-          memberPrice={room.prices.freeCancellation.member}
-          currency={room.prices.currency}
+          product={flexProduct}
         />
 
         <Button
@@ -87,7 +110,8 @@ export default function RoomCard({
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
         alt={intl.formatMessage({ id: "A photo of the room" })}
-        src={room.imageSrc}
+        // TODO: Correct image URL
+        src="https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg"
       />
     </div>
   )
diff --git a/components/HotelReservation/SelectRate/RoomSelection/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
index 51a56b4ad..39800b245 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
@@ -1,5 +1,8 @@
 "use client"
 import { useRouter, useSearchParams } from "next/navigation"
+import { useIntl } from "react-intl"
+
+import Button from "@/components/TempDesignSystem/Button"
 
 import RoomCard from "./RoomCard"
 
@@ -8,12 +11,11 @@ import styles from "./roomSelection.module.css"
 import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
 
 export default function RoomSelection({
-  rates,
-  nrOfNights,
-  nrOfAdults,
+  roomConfigurations,
 }: RoomSelectionProps) {
   const router = useRouter()
   const searchParams = useSearchParams()
+  const intl = useIntl()
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()
@@ -25,31 +27,28 @@ export default function RoomSelection({
 
   return (
     <div className={styles.wrapper}>
-      <ul className={styles.roomList}>
-        {rates.map((room) => (
-          <li key={room.id}>
-            <form
-              method="GET"
-              action={`select-bed?${searchParams}`}
-              onSubmit={handleSubmit}
-            >
-              <input
-                type="hidden"
-                name="roomClass"
-                value={room.id}
-                id={`room-${room.id}`}
-              />
+      <form
+        method="GET"
+        action={`select-bed?${searchParams}`}
+        onSubmit={handleSubmit}
+      >
+        <ul className={styles.roomList}>
+          {roomConfigurations.roomConfigurations.map((roomConfiguration) => (
+            <li key={roomConfiguration.roomType}>
               <RoomCard
-                room={room}
-                nrOfAdults={nrOfAdults}
-                nrOfNights={nrOfNights}
-                breakfastIncluded={room.breakfastIncluded}
+                rateDefinitions={roomConfigurations.rateDefinitions}
+                roomConfiguration={roomConfiguration}
               />
-            </form>
-          </li>
-        ))}
-      </ul>
-      <div className={styles.summary}>This is summary</div>
+            </li>
+          ))}
+        </ul>
+        <div className={styles.summary}>
+          This is summary
+          <Button type="submit" size="small" theme="primaryDark">
+            {intl.formatMessage({ id: "Choose room" })}
+          </Button>
+        </div>
+      </form>
     </div>
   )
 }
diff --git a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
index 80ed0e5be..2f4fb9402 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
@@ -27,4 +27,6 @@
   bottom: 0;
   left: 0;
   right: 0;
+  background-color: white;
+  padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
 }
diff --git a/lib/api/endpoints.ts b/lib/api/endpoints.ts
index 9ead56554..66bc36ec3 100644
--- a/lib/api/endpoints.ts
+++ b/lib/api/endpoints.ts
@@ -7,6 +7,7 @@ export namespace endpoints {
   }
   export const enum v1 {
     hotelsAvailability = "availability/v1/availabilities/city",
+    roomsAvailability = "availability/v1/availabilities/hotel",
     profile = "profile/v1/Profile",
     booking = "booking/v1/Bookings",
     creditCards = `${profile}/creditCards`,
diff --git a/server/routers/hotels/input.ts b/server/routers/hotels/input.ts
index b0ff5e679..6deff63a6 100644
--- a/server/routers/hotels/input.ts
+++ b/server/routers/hotels/input.ts
@@ -17,6 +17,17 @@ export const getHotelsAvailabilityInputSchema = z.object({
   attachedProfileId: z.string().optional().default(""),
 })
 
+export const getRoomsAvailabilityInputSchema = z.object({
+  hotelId: z.number(),
+  roomStayStartDate: z.string(),
+  roomStayEndDate: z.string(),
+  adults: z.number(),
+  children: z.number().optional().default(0),
+  promotionCode: z.string().optional(),
+  reservationProfileType: z.string().optional().default(""),
+  attachedProfileId: z.string().optional().default(""),
+})
+
 export const getRatesInputSchema = z.object({
   hotelId: z.string(),
 })
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index d233f1a82..75d16b67b 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -572,6 +572,86 @@ export type HotelsAvailability = z.infer<typeof hotelsAvailabilitySchema>
 export type HotelsAvailabilityPrices =
   HotelsAvailability["data"][number]["attributes"]["bestPricePerNight"]
 
+const productSchema = z.object({
+  productType: z.object({
+    public: z.object({
+      rateCode: z.string(),
+      rateType: z.string().optional(),
+      localPrice: z.object({
+        pricePerNight: z.string(),
+        pricePerStay: z.string(),
+        currency: z.string(),
+      }),
+      requestedPrice: z
+        .object({
+          pricePerNight: z.string(),
+          pricePerStay: z.string(),
+          currency: z.string(),
+        })
+        .optional(),
+    }),
+    member: z.object({
+      rateCode: z.string(),
+      rateType: z.string().optional(),
+      localPrice: z.object({
+        pricePerNight: z.string(),
+        pricePerStay: z.string(),
+        currency: z.string(),
+      }),
+      requestedPrice: z
+        .object({
+          pricePerNight: z.string(),
+          pricePerStay: z.string(),
+          currency: z.string(),
+        })
+        .optional(),
+    }),
+  }),
+})
+
+const roomConfigurationSchema = z.object({
+  status: z.string(),
+  bedType: z.string(),
+  roomType: z.string(),
+  roomsLeft: z.number(),
+  features: z.array(z.object({ inventory: z.number(), code: z.string() })),
+  products: z.array(productSchema),
+})
+
+const rateDefinitionSchema = z.object({
+  title: z.string(),
+  breakfastIncluded: z.boolean(),
+  rateType: z.string().optional(),
+  rateCode: z.string(),
+  generalTerms: z.array(z.string()),
+  cancellationRule: z.string(),
+  cancellationText: z.string(),
+  mustBeGuaranteed: z.boolean(),
+})
+
+const roomsAvailabilitySchema = z
+  .object({
+    data: z.object({
+      attributes: z.object({
+        checkInDate: z.string(),
+        checkOutDate: z.string(),
+        occupancy: occupancySchema.optional(),
+        hotelId: z.number(),
+        roomConfigurations: z.array(roomConfigurationSchema),
+        rateDefinitions: z.array(rateDefinitionSchema),
+      }),
+      relationships: linksSchema.optional(),
+      type: z.string().optional(),
+    }),
+  })
+  .transform((o) => o.data.attributes)
+
+export const getRoomsAvailabilitySchema = roomsAvailabilitySchema
+export type RoomsAvailability = z.infer<typeof roomsAvailabilitySchema>
+export type RoomConfiguration = z.infer<typeof roomConfigurationSchema>
+export type Product = z.infer<typeof productSchema>
+export type RateDefinition = z.infer<typeof rateDefinitionSchema>
+
 const flexibilityPrice = z.object({
   standard: z.number(),
   member: z.number(),
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 0e319bf6e..859e5662c 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -24,11 +24,13 @@ import {
   getHotelsAvailabilityInputSchema,
   getlHotelDataInputSchema,
   getRatesInputSchema,
+  getRoomsAvailabilityInputSchema,
 } from "./input"
 import {
   getHotelDataSchema,
   getHotelsAvailabilitySchema,
   getRatesSchema,
+  getRoomsAvailabilitySchema,
   roomSchema,
 } from "./output"
 import tempRatesData from "./tempRatesData.json"
@@ -61,6 +63,16 @@ const hotelsAvailabilityFailCounter = meter.createCounter(
   "trpc.hotel.availability.hotels-fail"
 )
 
+const roomsAvailabilityCounter = meter.createCounter(
+  "trpc.hotel.availability.rooms"
+)
+const roomsAvailabilitySuccessCounter = meter.createCounter(
+  "trpc.hotel.availability.rooms-success"
+)
+const roomsAvailabilityFailCounter = meter.createCounter(
+  "trpc.hotel.availability.rooms-fail"
+)
+
 async function getContentstackData(
   locale: string,
   uid: string | null | undefined
@@ -376,6 +388,123 @@ export const hotelQueryRouter = router({
             .flatMap((hotels) => hotels.attributes),
         }
       }),
+    rooms: hotelServiceProcedure
+      .input(getRoomsAvailabilityInputSchema)
+      .query(async ({ input, ctx }) => {
+        const {
+          hotelId,
+          roomStayStartDate,
+          roomStayEndDate,
+          adults,
+          children,
+          promotionCode,
+          reservationProfileType,
+          attachedProfileId,
+        } = input
+
+        const params: Record<string, string | number | undefined> = {
+          roomStayStartDate,
+          roomStayEndDate,
+          adults,
+          children,
+          promotionCode,
+          reservationProfileType,
+          attachedProfileId,
+        }
+
+        roomsAvailabilityCounter.add(1, {
+          hotelId,
+          roomStayStartDate,
+          roomStayEndDate,
+          adults,
+          children,
+          promotionCode,
+          reservationProfileType,
+        })
+        console.info(
+          "api.hotels.roomsAvailability start",
+          JSON.stringify({ query: { hotelId, params } })
+        )
+        const apiResponse = await api.get(
+          `${api.endpoints.v1.roomsAvailability}/${hotelId}`,
+          {
+            headers: {
+              Authorization: `Bearer ${ctx.serviceToken}`,
+            },
+          },
+          params
+        )
+        if (!apiResponse.ok) {
+          const text = await apiResponse.text()
+          roomsAvailabilityFailCounter.add(1, {
+            hotelId,
+            roomStayStartDate,
+            roomStayEndDate,
+            adults,
+            children,
+            promotionCode,
+            reservationProfileType,
+            error_type: "http_error",
+            error: JSON.stringify({
+              status: apiResponse.status,
+              statusText: apiResponse.statusText,
+              text,
+            }),
+          })
+          console.error(
+            "api.hotels.roomsAvailability error",
+            JSON.stringify({
+              query: { hotelId, params },
+              error: {
+                status: apiResponse.status,
+                statusText: apiResponse.statusText,
+                text,
+              },
+            })
+          )
+          return null
+        }
+        const apiJson = await apiResponse.json()
+        const validateAvailabilityData =
+          getRoomsAvailabilitySchema.safeParse(apiJson)
+        if (!validateAvailabilityData.success) {
+          roomsAvailabilityFailCounter.add(1, {
+            hotelId,
+            roomStayStartDate,
+            roomStayEndDate,
+            adults,
+            children,
+            promotionCode,
+            reservationProfileType,
+            error_type: "validation_error",
+            error: JSON.stringify(validateAvailabilityData.error),
+          })
+          console.error(
+            "api.hotels.roomsAvailability validation error",
+            JSON.stringify({
+              query: { hotelId, params },
+              error: validateAvailabilityData.error,
+            })
+          )
+          throw badRequestError()
+        }
+        roomsAvailabilitySuccessCounter.add(1, {
+          hotelId,
+          roomStayStartDate,
+          roomStayEndDate,
+          adults,
+          children,
+          promotionCode,
+          reservationProfileType,
+        })
+        console.info(
+          "api.hotels.roomsAvailability success",
+          JSON.stringify({
+            query: { hotelId, params: params },
+          })
+        )
+        return validateAvailabilityData.data
+      }),
   }),
   rates: router({
     get: publicProcedure
diff --git a/types/components/hotelReservation/selectRate/flexibilityOption.ts b/types/components/hotelReservation/selectRate/flexibilityOption.ts
index c61c09e94..d76f5a520 100644
--- a/types/components/hotelReservation/selectRate/flexibilityOption.ts
+++ b/types/components/hotelReservation/selectRate/flexibilityOption.ts
@@ -1,8 +1,8 @@
+import { Product, RateDefinition } from "@/server/routers/hotels/output"
+
 export type FlexibilityOptionProps = {
+  product: Product | undefined
   name: string
   value: string
   paymentTerm: string
-  standardPrice: number
-  memberPrice: number
-  currency: string
 }
diff --git a/types/components/hotelReservation/selectRate/roomCard.ts b/types/components/hotelReservation/selectRate/roomCard.ts
index ae9528b10..b51b3d8ab 100644
--- a/types/components/hotelReservation/selectRate/roomCard.ts
+++ b/types/components/hotelReservation/selectRate/roomCard.ts
@@ -1,8 +1,9 @@
-import { Rate } from "@/server/routers/hotels/output"
+import {
+  RateDefinition,
+  RoomConfiguration,
+} from "@/server/routers/hotels/output"
 
 export type RoomCardProps = {
-  room: Rate
-  nrOfNights: number
-  nrOfAdults: number
-  breakfastIncluded: boolean
+  roomConfiguration: RoomConfiguration
+  rateDefinitions: RateDefinition[]
 }
diff --git a/types/components/hotelReservation/selectRate/roomSelection.ts b/types/components/hotelReservation/selectRate/roomSelection.ts
index d5203f461..33dae631b 100644
--- a/types/components/hotelReservation/selectRate/roomSelection.ts
+++ b/types/components/hotelReservation/selectRate/roomSelection.ts
@@ -1,7 +1,5 @@
-import { Rate } from "@/server/routers/hotels/output"
+import { RoomsAvailability } from "@/server/routers/hotels/output"
 
 export interface RoomSelectionProps {
-  rates: Rate[]
-  nrOfAdults: number
-  nrOfNights: number
+  roomConfigurations: RoomsAvailability
 }

From 1b1c7e6398f55db306075900916af409ef8902fe Mon Sep 17 00:00:00 2001
From: Niclas Edenvin <niclas.edenvin@scandichotels.com>
Date: Tue, 8 Oct 2024 15:23:42 +0200
Subject: [PATCH 11/44] Fix response validation for get stays

---
 server/routers/user/output.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/server/routers/user/output.ts b/server/routers/user/output.ts
index 9c5e955ab..d4a6f0dd4 100644
--- a/server/routers/user/output.ts
+++ b/server/routers/user/output.ts
@@ -111,6 +111,7 @@ export const getStaysSchema = z.object({
       limit: z.number(),
       totalCount: z.number(),
     })
+    .optional()
     .nullable(),
 })
 

From 88d57035e8a7efdc6f48c88df980561de1e51548 Mon Sep 17 00:00:00 2001
From: Niclas Edenvin <niclas.edenvin@scandichotels.com>
Date: Tue, 8 Oct 2024 21:42:48 +0200
Subject: [PATCH 12/44] Destruct prices

---
 .../RoomSelection/FlexibilityOption/index.tsx | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
index dd92ab7f8..cda09ded4 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
@@ -19,6 +19,14 @@ export default function FlexibilityOption({
     // TODO: Implement empty state when this rate can't be booked
     return <div>TBI: Rate not available</div>
   }
+
+  const { productType } = product
+  const { public: publicPrice, member: memberPrice } = productType
+  const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
+    publicPrice
+  const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
+    memberPrice
+
   return (
     <label>
       <input
@@ -35,30 +43,27 @@ export default function FlexibilityOption({
           <div>
             <dt>{intl.formatMessage({ id: "Standard price" })}</dt>
             <dd>
-              {product.productType.public.localPrice.pricePerNight}{" "}
-              {product.productType.public.localPrice.currency}/
+              {publicLocalPrice.pricePerNight} {publicLocalPrice.currency}/
               {intl.formatMessage({ id: "night" })}
             </dd>
           </div>
           <div>
             <dt>{intl.formatMessage({ id: "Member price" })}</dt>
             <dd>
-              {product.productType.member.localPrice.pricePerNight}{" "}
-              {product.productType.member.localPrice.currency}/
+              {memberLocalPrice.pricePerNight} {memberLocalPrice.currency}/
               {intl.formatMessage({ id: "night" })}
             </dd>
           </div>
-          {product.productType.public.requestedPrice &&
-            product.productType.member.requestedPrice && (
-              <div>
-                <dt>{intl.formatMessage({ id: "Approx." })}</dt>
-                <dd>
-                  {product.productType.public.requestedPrice.pricePerNight}/
-                  {product.productType.member.requestedPrice.pricePerNight}{" "}
-                  {product.productType.public.requestedPrice.currency}
-                </dd>
-              </div>
-            )}
+          {publicRequestedPrice && memberRequestedPrice && (
+            <div>
+              <dt>{intl.formatMessage({ id: "Approx." })}</dt>
+              <dd>
+                {publicRequestedPrice.pricePerNight}/
+                {memberRequestedPrice.pricePerNight}{" "}
+                {publicRequestedPrice.currency}
+              </dd>
+            </div>
+          )}
         </dl>
       </div>
     </label>

From cc60b4d264ca1c2c46d42b70d6a3383cf758e2b6 Mon Sep 17 00:00:00 2001
From: Simon Emanuelsson <simon.emanuelsson@scandichotels.com>
Date: Tue, 8 Oct 2024 16:37:58 +0200
Subject: [PATCH 13/44] feat: add selected room card

---
 .../hotelreservation/[step]/layout.module.css | 20 +++++
 .../hotelreservation/[step]/layout.tsx        | 38 ++++++++
 .../hotelreservation/[step]/page.module.css   | 30 -------
 .../(public)/hotelreservation/[step]/page.tsx | 90 ++++++++-----------
 .../EnterDetails/SelectedRoom/index.tsx       | 77 ++++++++++++++++
 .../SelectedRoom/selectedRoom.module.css      | 51 +++++++++++
 .../hotelSelectionHeader.module.css           | 17 +++-
 .../HotelSelectionHeader/index.tsx            | 58 ++++++------
 .../SelectRate/Payment/index.tsx              |  4 +-
 .../sectionAccordion.module.css               |  2 +-
 components/Icons/icon.module.css              |  5 ++
 components/Icons/variants.ts                  |  5 +-
 components/Lightbox/FullView.tsx              |  6 +-
 .../TempDesignSystem/Button/button.module.css | 13 +--
 .../Text/Subtitle/subtitle.module.css         |  8 +-
 .../Text/Subtitle/variants.ts                 |  1 +
 i18n/dictionaries/da.json                     | 13 ++-
 i18n/dictionaries/de.json                     |  3 +-
 i18n/dictionaries/en.json                     |  8 +-
 i18n/dictionaries/fi.json                     | 10 +--
 i18n/dictionaries/no.json                     | 13 ++-
 i18n/dictionaries/sv.json                     | 13 ++-
 22 files changed, 324 insertions(+), 161 deletions(-)
 create mode 100644 app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css
 create mode 100644 app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx
 delete mode 100644 app/[lang]/(live)/(public)/hotelreservation/[step]/page.module.css
 create mode 100644 components/HotelReservation/EnterDetails/SelectedRoom/index.tsx
 create mode 100644 components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css

diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css
new file mode 100644
index 000000000..f40fca31d
--- /dev/null
+++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css
@@ -0,0 +1,20 @@
+.layout {
+  min-height: 100dvh;
+  background-color: var(--Scandic-Brand-Warm-White);
+}
+
+.content {
+  display: grid;
+  gap: var(--Spacing-x3) var(--Spacing-x9);
+  grid-template-columns: 1fr 340px;
+  grid-template-rows: auto 1fr;
+  margin: var(--Spacing-x5) auto 0;
+  max-width: var(--max-width-navigation);
+  padding: var(--Spacing-x6) var(--Spacing-x2) 0;
+}
+
+.summary {
+  align-self: flex-start;
+  grid-column: 2 / 3;
+  grid-row: 1/-1;
+}
diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx
new file mode 100644
index 000000000..c234123a4
--- /dev/null
+++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx
@@ -0,0 +1,38 @@
+import { redirect } from "next/navigation"
+
+import { serverClient } from "@/lib/trpc/server"
+
+import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
+import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
+import Summary from "@/components/HotelReservation/SelectRate/Summary"
+
+import styles from "./layout.module.css"
+
+import type { LangParams, LayoutArgs } from "@/types/params"
+
+export default async function StepLayout({
+  children,
+  params,
+}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  const hotel = await serverClient().hotel.hotelData.get({
+    hotelId: "811",
+    language: params.lang,
+  })
+
+  if (!hotel?.data) {
+    redirect(`/${params.lang}`)
+  }
+
+  return (
+    <main className={styles.layout}>
+      <HotelSelectionHeader hotel={hotel.data.attributes} />
+      <div className={styles.content}>
+        <SelectedRoom />
+        {children}
+        <aside className={styles.summary}>
+          <Summary />
+        </aside>
+      </div>
+    </main>
+  )
+}
diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.module.css
deleted file mode 100644
index 8962fd5ee..000000000
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.module.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.page {
-  min-height: 100dvh;
-  padding-top: var(--Spacing-x6);
-  padding-left: var(--Spacing-x2);
-  padding-right: var(--Spacing-x2);
-  background-color: var(--Scandic-Brand-Warm-White);
-}
-
-.content {
-  max-width: 1134px;
-  margin-top: var(--Spacing-x5);
-  margin-left: auto;
-  margin-right: auto;
-  display: flex;
-  justify-content: space-between;
-  gap: var(--Spacing-x7);
-}
-
-.section {
-  flex-grow: 1;
-}
-
-.summary {
-  max-width: 340px;
-}
-
-.form {
-  display: grid;
-  gap: var(--Spacing-x2);
-}
diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
index 050aa0280..b853fc9bc 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
@@ -9,15 +9,11 @@ import { trpc } from "@/lib/trpc/client"
 import BedType from "@/components/HotelReservation/EnterDetails/BedType"
 import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
 import Details from "@/components/HotelReservation/EnterDetails/Details"
-import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
 import Payment from "@/components/HotelReservation/SelectRate/Payment"
 import SectionAccordion from "@/components/HotelReservation/SelectRate/SectionAccordion"
-import Summary from "@/components/HotelReservation/SelectRate/Summary"
 import LoadingSpinner from "@/components/LoadingSpinner"
 
-import styles from "./page.module.css"
-
-import { LangParams, PageArgs } from "@/types/params"
+import type { LangParams, PageArgs } from "@/types/params"
 
 enum StepEnum {
   selectBed = "select-bed",
@@ -75,51 +71,43 @@ export default function StepPage({
   }
 
   return (
-    <main className={styles.page}>
-      <HotelSelectionHeader hotel={hotel.data.attributes} />
-      <div className={styles.content}>
-        <section className={styles.section}>
-          <SectionAccordion
-            header="Select bed"
-            isCompleted={true}
-            isOpen={activeStep === StepEnum.selectBed}
-            label={intl.formatMessage({ id: "Request bedtype" })}
-            path="/select-bed"
-          >
-            <BedType />
-          </SectionAccordion>
-          <SectionAccordion
-            header="Food options"
-            isCompleted={true}
-            isOpen={activeStep === StepEnum.breakfast}
-            label={intl.formatMessage({ id: "Select breakfast options" })}
-            path="/breakfast"
-          >
-            <Breakfast />
-          </SectionAccordion>
-          <SectionAccordion
-            header="Details"
-            isCompleted={false}
-            isOpen={activeStep === StepEnum.details}
-            label={intl.formatMessage({ id: "Enter your details" })}
-            path="/details"
-          >
-            <Details user={null} />
-          </SectionAccordion>
-          <SectionAccordion
-            header="Payment"
-            isCompleted={false}
-            isOpen={activeStep === StepEnum.payment}
-            label={intl.formatMessage({ id: "Select payment method" })}
-            path="/hotelreservation/select-bed"
-          >
-            <Payment hotel={hotel.data.attributes} />
-          </SectionAccordion>
-        </section>
-        <aside className={styles.summary}>
-          <Summary />
-        </aside>
-      </div>
-    </main>
+    <section>
+      <SectionAccordion
+        header="Select bed"
+        isCompleted={true}
+        isOpen={activeStep === StepEnum.selectBed}
+        label={intl.formatMessage({ id: "Request bedtype" })}
+        path="/select-bed"
+      >
+        <BedType />
+      </SectionAccordion>
+      <SectionAccordion
+        header="Food options"
+        isCompleted={true}
+        isOpen={activeStep === StepEnum.breakfast}
+        label={intl.formatMessage({ id: "Select breakfast options" })}
+        path="/breakfast"
+      >
+        <Breakfast />
+      </SectionAccordion>
+      <SectionAccordion
+        header="Details"
+        isCompleted={false}
+        isOpen={activeStep === StepEnum.details}
+        label={intl.formatMessage({ id: "Enter your details" })}
+        path="/details"
+      >
+        <Details user={null} />
+      </SectionAccordion>
+      <SectionAccordion
+        header="Payment"
+        isCompleted={false}
+        isOpen={activeStep === StepEnum.payment}
+        label={intl.formatMessage({ id: "Select payment method" })}
+        path="/hotelreservation/select-bed"
+      >
+        <Payment hotel={hotel.data.attributes} />
+      </SectionAccordion>
+    </section>
   )
 }
diff --git a/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx b/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx
new file mode 100644
index 000000000..7812c6be6
--- /dev/null
+++ b/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { EditIcon, ImageIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./selectedRoom.module.css"
+
+export default function SelectedRoom() {
+  const intl = useIntl()
+  return (
+    <article className={styles.container}>
+      <div className={styles.tempImage}>
+        <ImageIcon
+          color="baseButtonTertiaryOnFillNormal"
+          height={60}
+          width={60}
+        />
+      </div>
+      <div className={styles.content}>
+        <div className={styles.textContainer}>
+          <Footnote
+            className={styles.label}
+            color="uiTextPlaceholder"
+            textTransform="uppercase"
+          >
+            {intl.formatMessage({ id: "Your room" })}
+          </Footnote>
+          <div className={styles.text}>
+            {/**
+             * [TEMP]
+             * No translation on Subtitles as they will be derived
+             * from Room selection.
+             */}
+            <Subtitle
+              className={styles.room}
+              color="uiTextHighContrast"
+              type="two"
+            >
+              Cozy cabin
+            </Subtitle>
+            <Subtitle
+              className={styles.invertFontWeight}
+              color="uiTextMediumContrast"
+              type="two"
+            >
+              Free rebooking
+            </Subtitle>
+            <Subtitle
+              className={styles.invertFontWeight}
+              color="uiTextMediumContrast"
+              type="two"
+            >
+              Pay now
+            </Subtitle>
+          </div>
+        </div>
+        <Button
+          asChild
+          intent="tertiary"
+          size="small"
+          theme="base"
+          variant="icon"
+        >
+          <Link href="#">
+            <EditIcon color="baseButtonTertiaryOnFillNormal" />
+            {intl.formatMessage({ id: "Modify" })}
+          </Link>
+        </Button>
+      </div>
+    </article>
+  )
+}
diff --git a/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css b/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css
new file mode 100644
index 000000000..5e64327cf
--- /dev/null
+++ b/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css
@@ -0,0 +1,51 @@
+.container {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Large);
+  display: grid;
+  grid-template-columns: 144px 1fr;
+  gap: var(--Spacing-x3);
+  padding: var(--Spacing-x2) var(--Spacing-x4) var(--Spacing-x2)
+    var(--Spacing-x2);
+}
+
+.tempImage {
+  align-items: center;
+  background-color: lightgray;
+  border-radius: var(--Corner-radius-Medium);
+  display: flex;
+  height: auto;
+  justify-content: center;
+  min-height: 80px;
+}
+
+.content {
+  align-items: center;
+  display: grid;
+  gap: var(--Spacing-x3);
+  grid-template-columns: 1fr auto;
+}
+
+.textContainer {
+  display: grid;
+}
+
+.label {
+  grid-column: 1 / -1;
+}
+
+.text {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--Spacing-x1);
+}
+
+p.invertFontWeight {
+  font-weight: 400;
+}
+
+.invertFontWeight:not(:last-of-type)::after,
+.room::after {
+  color: var(--UI-Text-Medium-contrast);
+  content: "∙";
+  padding-left: var(--Spacing-x1);
+}
diff --git a/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css b/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css
index 9646ec746..268bfe4fe 100644
--- a/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css
+++ b/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css
@@ -1,10 +1,13 @@
 .hotelSelectionHeader {
-  display: flex;
-  flex-direction: column;
   background-color: var(--Base-Surface-Subtle-Normal);
   padding: var(--Spacing-x3) var(--Spacing-x2);
-  justify-content: center;
+}
+
+.hotelSelectionHeaderWrapper {
+  display: flex;
+  flex-direction: column;
   gap: var(--Spacing-x3);
+  justify-content: center;
 }
 
 .titleContainer {
@@ -33,9 +36,15 @@
 
 @media (min-width: 768px) {
   .hotelSelectionHeader {
-    flex-direction: row;
     padding: var(--Spacing-x4) var(--Spacing-x5);
+  }
+
+  .hotelSelectionHeaderWrapper {
+    flex-direction: row;
     gap: var(--Spacing-x6);
+    max-width: var(--max-width-navigation);
+    margin: 0 auto;
+    width: 100%;
   }
 
   .titleContainer > h1 {
diff --git a/components/HotelReservation/HotelSelectionHeader/index.tsx b/components/HotelReservation/HotelSelectionHeader/index.tsx
index e34f05f37..222dceda1 100644
--- a/components/HotelReservation/HotelSelectionHeader/index.tsx
+++ b/components/HotelReservation/HotelSelectionHeader/index.tsx
@@ -19,35 +19,35 @@ export default function HotelSelectionHeader({
 
   return (
     <header className={styles.hotelSelectionHeader}>
-      <div className={styles.titleContainer}>
-        <Title as="h3" level="h1">
-          {hotel.name}
-        </Title>
-        <address className={styles.address}>
-          <Caption color="textMediumContrast">
-            {hotel.address.streetAddress}, {hotel.address.city}
-          </Caption>
-          <div>
-            <Divider variant="vertical" color="subtle" />
-          </div>
-          <Caption color="textMediumContrast">
-            {intl.formatMessage(
-              {
-                id: "Distance to city centre",
-              },
-              { number: hotel.location.distanceToCentre }
-            )}
-          </Caption>
-        </address>
-      </div>
-      <div className={styles.dividerContainer}>
-        <Divider variant="vertical" color="subtle" />
-      </div>
-      <div className={styles.descriptionContainer}>
-        <Body color="textHighContrast">
-          {hotel.hotelContent.texts.descriptions.short}
-        </Body>
-        <HotelDetailSidePeek />
+      <div className={styles.hotelSelectionHeaderWrapper}>
+        <div className={styles.titleContainer}>
+          <Title as="h3" level="h1">
+            {hotel.name}
+          </Title>
+          <address className={styles.address}>
+            <Caption color="textMediumContrast">
+              {hotel.address.streetAddress}, {hotel.address.city}
+            </Caption>
+            <div>
+              <Divider variant="vertical" color="subtle" />
+            </div>
+            <Caption color="textMediumContrast">
+              {intl.formatMessage(
+                { id: "Distance to city centre" },
+                { number: hotel.location.distanceToCentre }
+              )}
+            </Caption>
+          </address>
+        </div>
+        <div className={styles.dividerContainer}>
+          <Divider variant="vertical" color="subtle" />
+        </div>
+        <div className={styles.descriptionContainer}>
+          <Body color="textHighContrast">
+            {hotel.hotelContent.texts.descriptions.short}
+          </Body>
+          <HotelDetailSidePeek />
+        </div>
       </div>
     </header>
   )
diff --git a/components/HotelReservation/SelectRate/Payment/index.tsx b/components/HotelReservation/SelectRate/Payment/index.tsx
index 3ddf73c01..8216e8631 100644
--- a/components/HotelReservation/SelectRate/Payment/index.tsx
+++ b/components/HotelReservation/SelectRate/Payment/index.tsx
@@ -129,7 +129,7 @@ export default function Payment({ hotel }: PaymentProps) {
               name="payment-method"
               id="card"
               value="card"
-              checked={selectedPaymentMethod === "card"}
+              defaultChecked={selectedPaymentMethod === "card"}
             />
             <label htmlFor="card">card</label>
           </button>
@@ -145,7 +145,7 @@ export default function Payment({ hotel }: PaymentProps) {
                   name="payment-method"
                   id={paymentOption}
                   value={paymentOption}
-                  checked={selectedPaymentMethod === paymentOption}
+                  defaultChecked={selectedPaymentMethod === paymentOption}
                 />
                 <label htmlFor={paymentOption}>{paymentOption}</label>
               </button>
diff --git a/components/HotelReservation/SelectRate/SectionAccordion/sectionAccordion.module.css b/components/HotelReservation/SelectRate/SectionAccordion/sectionAccordion.module.css
index 8c1a05ba4..653c98fad 100644
--- a/components/HotelReservation/SelectRate/SectionAccordion/sectionAccordion.module.css
+++ b/components/HotelReservation/SelectRate/SectionAccordion/sectionAccordion.module.css
@@ -40,7 +40,7 @@
 .iconWrapper {
   position: relative;
   top: var(--Spacing-x1);
-  z-index: 10;
+  z-index: 2;
 }
 
 .circle {
diff --git a/components/Icons/icon.module.css b/components/Icons/icon.module.css
index 3fa235d32..bb86becdb 100644
--- a/components/Icons/icon.module.css
+++ b/components/Icons/icon.module.css
@@ -66,3 +66,8 @@
 .blue * {
   fill: var(--UI-Input-Controls-Fill-Selected);
 }
+
+.baseButtonTertiaryOnFillNormal,
+.baseButtonTertiaryOnFillNormal * {
+  fill: var(--Base-Button-Tertiary-On-Fill-Normal);
+}
diff --git a/components/Icons/variants.ts b/components/Icons/variants.ts
index 12b9cb574..911d183da 100644
--- a/components/Icons/variants.ts
+++ b/components/Icons/variants.ts
@@ -5,19 +5,20 @@ import styles from "./icon.module.css"
 const config = {
   variants: {
     color: {
+      baseButtonTertiaryOnFillNormal: styles.baseButtonTertiaryOnFillNormal,
       baseIconLowContrast: styles.baseIconLowContrast,
       black: styles.black,
+      blue: styles.blue,
       burgundy: styles.burgundy,
+      green: styles.green,
       grey80: styles.grey80,
       pale: styles.pale,
       peach80: styles.peach80,
       primaryLightOnSurfaceAccent: styles.plosa,
       red: styles.red,
-      green: styles.green,
       white: styles.white,
       uiTextHighContrast: styles.uiTextHighContrast,
       uiTextMediumContrast: styles.uiTextMediumContrast,
-      blue: styles.blue,
     },
   },
   defaultVariants: {
diff --git a/components/Lightbox/FullView.tsx b/components/Lightbox/FullView.tsx
index 73f6dde98..5541d365b 100644
--- a/components/Lightbox/FullView.tsx
+++ b/components/Lightbox/FullView.tsx
@@ -49,10 +49,10 @@ export default function FullView({
             className={styles.fullViewImage}
           >
             <Image
-              src={image.url}
               alt={image.alt}
-              layout="fill"
-              objectFit="cover"
+              fill
+              src={image.url}
+              style={{ objectFit: "cover" }}
             />
 
             <div className={styles.fullViewFooter}>
diff --git a/components/TempDesignSystem/Button/button.module.css b/components/TempDesignSystem/Button/button.module.css
index f6499c5c1..0afa102a1 100644
--- a/components/TempDesignSystem/Button/button.module.css
+++ b/components/TempDesignSystem/Button/button.module.css
@@ -64,10 +64,10 @@ a.default {
   justify-content: center;
 }
 
-.icon {
+.btn.icon:is(.small, .medium, .large) {
   align-items: center;
   display: flex;
-  gap: var(--Spacing-x-half);
+  gap: var(--Spacing-x1);
   justify-content: center;
 }
 
@@ -76,7 +76,8 @@ a.default {
   font-size: var(--typography-Caption-Bold-fontSize);
   line-height: var(--typography-Caption-Bold-lineHeight);
   gap: var(--Spacing-x-quarter);
-  padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */
+  padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2);
+  /* Special case padding to adjust the missing border */
 }
 
 .btn.small.secondary {
@@ -85,7 +86,8 @@ a.default {
 
 .btn.medium {
   gap: var(--Spacing-x-half);
-  padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */
+  padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2);
+  /* Special case padding to adjust the missing border */
 }
 
 .medium.secondary {
@@ -94,7 +96,8 @@ a.default {
 
 .btn.large {
   gap: var(--Spacing-x-half);
-  padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3); /* Special case padding to adjust the missing border */
+  padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3);
+  /* Special case padding to adjust the missing border */
 }
 
 .large.secondary {
diff --git a/components/TempDesignSystem/Text/Subtitle/subtitle.module.css b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css
index 8fdac30c4..22d09e16e 100644
--- a/components/TempDesignSystem/Text/Subtitle/subtitle.module.css
+++ b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css
@@ -10,7 +10,7 @@
     0.3vw + 15px,
     var(--typography-Subtitle-1-Desktop-fontSize)
   );
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: var(--typography-Subtitle-1-letterSpacing);
   line-height: var(--typography-Subtitle-1-lineHeight);
 }
@@ -22,7 +22,7 @@
     0.3vw + 15px,
     var(--typography-Subtitle-2-Desktop-fontSize)
   );
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: var(--typography-Subtitle-2-letterSpacing);
   line-height: var(--typography-Subtitle-2-lineHeight);
 }
@@ -62,3 +62,7 @@
 .uiTextHighContrast {
   color: var(--UI-Text-High-contrast);
 }
+
+.uiTextMediumContrast {
+  color: var(--UI-Text-Medium-contrast);
+}
diff --git a/components/TempDesignSystem/Text/Subtitle/variants.ts b/components/TempDesignSystem/Text/Subtitle/variants.ts
index 7a8faa54c..3e36d39e0 100644
--- a/components/TempDesignSystem/Text/Subtitle/variants.ts
+++ b/components/TempDesignSystem/Text/Subtitle/variants.ts
@@ -9,6 +9,7 @@ const config = {
       burgundy: styles.burgundy,
       pale: styles.pale,
       uiTextHighContrast: styles.uiTextHighContrast,
+      uiTextMediumContrast: styles.uiTextMediumContrast,
     },
     textAlign: {
       center: styles.center,
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index a260dd068..76237d5a5 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -13,13 +13,12 @@
   "Already a friend?": "Allerede en ven?",
   "Amenities": "Faciliteter",
   "Amusement park": "Forlystelsespark",
-  "An error occurred when adding a credit card, please try again later.": "Der opstod en fejl under tilføjelse af et kreditkort. Prøv venligst igen senere.",
   "An error occurred trying to manage your preferences, please try again later.": "Der opstod en fejl under forsøget på at administrere dine præferencer. Prøv venligst igen senere.",
+  "An error occurred when adding a credit card, please try again later.": "Der opstod en fejl under tilføjelse af et kreditkort. Prøv venligst igen senere.",
   "An error occurred when trying to update profile.": "Der opstod en fejl under forsøg på at opdatere profilen.",
   "Any changes you've made will be lost.": "Alle ændringer, du har foretaget, går tabt.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Er du sikker på, at du vil fjerne kortet, der slutter me {lastFourDigits} fra din medlemsprofil?",
   "Arrival date": "Ankomstdato",
-  "as of today": "pr. dags dato",
   "As our": "Som vores {level}",
   "As our Close Friend": "Som vores nære ven",
   "At latest": "Senest",
@@ -35,9 +34,9 @@
   "Breakfast buffet": "Morgenbuffet",
   "Breakfast excluded": "Morgenmad ikke inkluderet",
   "Breakfast included": "Morgenmad inkluderet",
+  "Breakfast restaurant": "Breakfast restaurant",
   "Bus terminal": "Busstation",
   "Business": "Forretning",
-  "Breakfast restaurant": "Breakfast restaurant",
   "Cancel": "Afbestille",
   "Check in": "Check ind",
   "Check out": "Check ud",
@@ -83,9 +82,9 @@
   "Edit profile": "Rediger profil",
   "Email": "E-mail",
   "Email address": "E-mailadresse",
+  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
   "Enter destination or hotel": "Indtast destination eller hotel",
   "Enter your details": "Indtast dine oplysninger",
-  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
   "Events that make an impression": "Events that make an impression",
   "Explore all levels and benefits": "Udforsk alle niveauer og fordele",
   "Explore nearby": "Udforsk i nærheden",
@@ -121,7 +120,6 @@
   "Join Scandic Friends": "Tilmeld dig Scandic Friends",
   "Join at no cost": "Tilmeld dig uden omkostninger",
   "King bed": "Kingsize-seng",
-  "km to city center": "km til byens centrum",
   "Language": "Sprog",
   "Lastname": "Efternavn",
   "Latest searches": "Seneste søgninger",
@@ -209,11 +207,11 @@
   "Read more about the hotel": "Læs mere om hotellet",
   "Read more about wellness & exercise": "Read more about wellness & exercise",
   "Remove card from member profile": "Fjern kortet fra medlemsprofilen",
+  "Request bedtype": "Anmod om sengetype",
   "Restaurant": "{count, plural, one {#Restaurant} other {#Restaurants}}",
   "Restaurant & Bar": "Restaurant & Bar",
   "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Gentag den nye adgangskode",
-  "Request bedtype": "Anmod om sengetype",
   "Room & Terms": "Værelse & Vilkår",
   "Room facilities": "Værelsesfaciliteter",
   "Rooms": "Værelser",
@@ -299,11 +297,12 @@
   "Your details": "Dine oplysninger",
   "Your level": "Dit niveau",
   "Your points to spend": "Dine brugbare point",
+  "Your room": "Dit værelse",
   "Zip code": "Postnummer",
   "Zoo": "Zoo",
   "Zoom in": "Zoom ind",
   "Zoom out": "Zoom ud",
-  "as of today": "fra idag",
+  "as of today": "pr. dags dato",
   "booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}",
   "booking.nights": "{totalNights, plural, one {# nat} other {# nætter}}",
   "booking.rooms": "{totalRooms, plural, one {# værelse} other {# værelser}}",
diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json
index ad755efdc..742890d7c 100644
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -207,11 +207,11 @@
   "Read more about the hotel": "Lesen Sie mehr über das Hotel",
   "Read more about wellness & exercise": "Read more about wellness & exercise",
   "Remove card from member profile": "Karte aus dem Mitgliedsprofil entfernen",
+  "Request bedtype": "Bettentyp anfragen",
   "Restaurant": "{count, plural, one {#Restaurant} other {#Restaurants}}",
   "Restaurant & Bar": "Restaurant & Bar",
   "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Neues Passwort erneut eingeben",
-  "Request bedtype": "Bettentyp anfragen",
   "Room & Terms": "Zimmer & Bedingungen",
   "Room facilities": "Zimmerausstattung",
   "Rooms": "Räume",
@@ -297,6 +297,7 @@
   "Your details": "Ihre Angaben",
   "Your level": "Dein level",
   "Your points to spend": "Meine Punkte",
+  "Your room": "Ihr Zimmer",
   "Zip code": "PLZ",
   "Zoo": "Zoo",
   "Zoom in": "Vergrößern",
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index 43903c4c2..fa28c7399 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -120,7 +120,6 @@
   "Join Scandic Friends": "Join Scandic Friends",
   "Join at no cost": "Join at no cost",
   "King bed": "King bed",
-  "km to city center": "km to city center",
   "Language": "Language",
   "Lastname": "Lastname",
   "Latest searches": "Latest searches",
@@ -208,6 +207,7 @@
   "Read more about the hotel": "Read more about the hotel",
   "Read more about wellness & exercise": "Read more about wellness & exercise",
   "Remove card from member profile": "Remove card from member profile",
+  "Request bedtype": "Request bedtype",
   "Restaurant": "{count, plural, one {#Restaurant} other {#Restaurants}}",
   "Restaurant & Bar": "Restaurant & Bar",
   "Restaurants & Bars": "Restaurants & Bars",
@@ -226,10 +226,12 @@
   "See room details": "See room details",
   "See rooms": "See rooms",
   "Select a country": "Select a country",
+  "Select breakfast options": "Select breakfast options",
   "Select country of residence": "Select country of residence",
   "Select date of birth": "Select date of birth",
   "Select dates": "Select dates",
   "Select language": "Select language",
+  "Select payment method": "Select payment method",
   "Select your language": "Select your language",
   "Shopping": "Shopping",
   "Shopping & Dining": "Shopping & Dining",
@@ -295,6 +297,7 @@
   "Your details": "Your details",
   "Your level": "Your level",
   "Your points to spend": "Your points to spend",
+  "Your room": "Your room",
   "Zip code": "Zip code",
   "Zoo": "Zoo",
   "Zoom in": "Zoom in",
@@ -315,9 +318,6 @@
   "number": "number",
   "or": "or",
   "points": "Points",
-  "Request bedtype": "Request bedtype",
-  "Select breakfast options": "Select breakfast options",
-  "Select payment method": "Select payment method",
   "special character": "special character",
   "spendable points expiring by": "{points} spendable points expiring by {date}",
   "to": "to",
diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json
index 558c99dcb..ec0b1ee0c 100644
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -13,8 +13,8 @@
   "Already a friend?": "Oletko jo ystävä?",
   "Amenities": "Mukavuudet",
   "Amusement park": "Huvipuisto",
-  "An error occurred when adding a credit card, please try again later.": "Luottokorttia lisättäessä tapahtui virhe. Yritä myöhemmin uudelleen.",
   "An error occurred trying to manage your preferences, please try again later.": "Asetusten hallinnassa tapahtui virhe. Yritä myöhemmin uudelleen.",
+  "An error occurred when adding a credit card, please try again later.": "Luottokorttia lisättäessä tapahtui virhe. Yritä myöhemmin uudelleen.",
   "An error occurred when trying to update profile.": "Profiilia päivitettäessä tapahtui virhe.",
   "Any changes you've made will be lost.": "Kaikki tekemäsi muutokset menetetään.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Haluatko varmasti poistaa kortin, joka päättyy numeroon {lastFourDigits} jäsenprofiilistasi?",
@@ -34,9 +34,9 @@
   "Breakfast buffet": "Aamiaisbuffet",
   "Breakfast excluded": "Aamiainen ei sisälly",
   "Breakfast included": "Aamiainen sisältyy",
+  "Breakfast restaurant": "Breakfast restaurant",
   "Bus terminal": "Bussiasema",
   "Business": "Business",
-  "Breakfast restaurant": "Breakfast restaurant",
   "Cancel": "Peruuttaa",
   "Check in": "Sisäänkirjautuminen",
   "Check out": "Uloskirjautuminen",
@@ -82,9 +82,9 @@
   "Edit profile": "Muokkaa profiilia",
   "Email": "Sähköposti",
   "Email address": "Sähköpostiosoite",
+  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
   "Enter destination or hotel": "Anna kohde tai hotelli",
   "Enter your details": "Anna tietosi",
-  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
   "Events that make an impression": "Events that make an impression",
   "Explore all levels and benefits": "Tutustu kaikkiin tasoihin ja etuihin",
   "Explore nearby": "Tutustu lähialueeseen",
@@ -120,7 +120,6 @@
   "Join Scandic Friends": "Liity jäseneksi",
   "Join at no cost": "Liity maksutta",
   "King bed": "King-vuode",
-  "km to city center": "km keskustaan",
   "Language": "Kieli",
   "Lastname": "Sukunimi",
   "Latest searches": "Viimeisimmät haut",
@@ -208,6 +207,7 @@
   "Read more about the hotel": "Lue lisää hotellista",
   "Read more about wellness & exercise": "Read more about wellness & exercise",
   "Remove card from member profile": "Poista kortti jäsenprofiilista",
+  "Request bedtype": "Pyydä sänkytyyppiä",
   "Restaurant": "{count, plural, one {#Ravintola} other {#Restaurants}}",
   "Restaurant & Bar": "Ravintola & Baari",
   "Restaurants & Bars": "Restaurants & Bars",
@@ -217,7 +217,6 @@
   "Rooms": "Huoneet",
   "Rooms & Guests": "Huoneet & Vieraat",
   "Rooms & Guestss": "Huoneet & Vieraat",
-  "Request bedtype": "Pyydä sänkytyyppiä",
   "Sauna and gym": "Sauna and gym",
   "Save": "Tallenna",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
@@ -299,6 +298,7 @@
   "Your details": "Tietosi",
   "Your level": "Tasosi",
   "Your points to spend": "Käytettävissä olevat pisteesi",
+  "Your room": "Sinun huoneesi",
   "Zip code": "Postinumero",
   "Zoo": "Eläintarha",
   "Zoom in": "Lähennä",
diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json
index 5db6252f3..4a7ab2908 100644
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -13,13 +13,12 @@
   "Already a friend?": "Allerede Friend?",
   "Amenities": "Fasiliteter",
   "Amusement park": "Tivoli",
-  "An error occurred when adding a credit card, please try again later.": "Det oppstod en feil ved å legge til et kredittkort. Prøv igjen senere.",
   "An error occurred trying to manage your preferences, please try again later.": "Det oppstod en feil under forsøket på å administrere innstillingene dine. Prøv igjen senere.",
+  "An error occurred when adding a credit card, please try again later.": "Det oppstod en feil ved å legge til et kredittkort. Prøv igjen senere.",
   "An error occurred when trying to update profile.": "Det oppstod en feil under forsøk på å oppdatere profilen.",
   "Any changes you've made will be lost.": "Eventuelle endringer du har gjort, går tapt.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Er du sikker på at du vil fjerne kortet som slutter på {lastFourDigits} fra medlemsprofilen din?",
   "Arrival date": "Ankomstdato",
-  "as of today": "per i dag",
   "As our": "Som vår {level}",
   "As our Close Friend": "Som vår nære venn",
   "At latest": "Senest",
@@ -82,16 +81,16 @@
   "Edit profile": "Rediger profil",
   "Email": "E-post",
   "Email address": "E-postadresse",
+  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
   "Enter destination or hotel": "Skriv inn destinasjon eller hotell",
   "Enter your details": "Skriv inn detaljene dine",
-  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
   "Events that make an impression": "Events that make an impression",
   "Explore all levels and benefits": "Utforsk alle nivåer og fordeler",
   "Explore nearby": "Utforsk i nærheten",
   "Extras to your booking": "Tilvalg til bestillingen din",
+  "FAQ": "FAQ",
   "Failed to delete credit card, please try again later.": "Kunne ikke slette kredittkortet, prøv igjen senere.",
   "Fair": "Messe",
-  "FAQ": "FAQ",
   "Find booking": "Finn booking",
   "Find hotels": "Finn hotell",
   "Firstname": "Fornavn",
@@ -120,7 +119,6 @@
   "Join Scandic Friends": "Bli med i Scandic Friends",
   "Join at no cost": "Bli med uten kostnad",
   "King bed": "King-size-seng",
-  "km to city center": "km til sentrum",
   "Language": "Språk",
   "Lastname": "Etternavn",
   "Latest searches": "Siste søk",
@@ -208,11 +206,11 @@
   "Read more about the hotel": "Les mer om hotellet",
   "Read more about wellness & exercise": "Read more about wellness & exercise",
   "Remove card from member profile": "Fjern kortet fra medlemsprofilen",
+  "Request bedtype": "Be om sengetype",
   "Restaurant": "{count, plural, one {#Restaurant} other {#Restaurants}}",
   "Restaurant & Bar": "Restaurant & Bar",
   "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Skriv inn nytt passord på nytt",
-  "Request bedtype": "Be om sengetype",
   "Room & Terms": "Rom & Vilkår",
   "Room facilities": "Romfasiliteter",
   "Rooms": "Rom",
@@ -298,11 +296,12 @@
   "Your details": "Dine detaljer",
   "Your level": "Ditt nivå",
   "Your points to spend": "Dine brukbare poeng",
+  "Your room": "Rommet ditt",
   "Zip code": "Post kode",
   "Zoo": "Dyrehage",
   "Zoom in": "Zoom inn",
   "Zoom out": "Zoom ut",
-  "as of today": "per idag",
+  "as of today": "per i dag",
   "booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}",
   "booking.nights": "{totalNights, plural, one {# natt} other {# netter}}",
   "booking.rooms": "{totalRooms, plural, one {# rom} other {# rom}}",
diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json
index e7b55e6f6..28c7a9889 100644
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -13,13 +13,12 @@
   "Already a friend?": "Är du redan en vän?",
   "Amenities": "Bekvämligheter",
   "Amusement park": "Nöjespark",
-  "An error occurred when adding a credit card, please try again later.": "Ett fel uppstod när ett kreditkort lades till, försök igen senare.",
   "An error occurred trying to manage your preferences, please try again later.": "Ett fel uppstod när du försökte hantera dina inställningar, försök igen senare.",
+  "An error occurred when adding a credit card, please try again later.": "Ett fel uppstod när ett kreditkort lades till, försök igen senare.",
   "An error occurred when trying to update profile.": "Ett fel uppstod när du försökte uppdatera profilen.",
   "Any changes you've made will be lost.": "Alla ändringar du har gjort kommer att gå förlorade.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Är du säker på att du vill ta bort kortet som slutar med {lastFourDigits} från din medlemsprofil?",
   "Arrival date": "Ankomstdatum",
-  "as of today": "per idag",
   "As our": "Som vår {level}",
   "As our Close Friend": "Som vår nära vän",
   "At latest": "Senast",
@@ -35,9 +34,9 @@
   "Breakfast buffet": "Frukostbuffé",
   "Breakfast excluded": "Frukost ingår ej",
   "Breakfast included": "Frukost ingår",
+  "Breakfast restaurant": "Breakfast restaurant",
   "Bus terminal": "Bussterminal",
   "Business": "Business",
-  "Breakfast restaurant": "Breakfast restaurant",
   "Cancel": "Avbryt",
   "Check in": "Checka in",
   "Check out": "Checka ut",
@@ -83,9 +82,9 @@
   "Edit profile": "Redigera profil",
   "Email": "E-post",
   "Email address": "E-postadress",
+  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
   "Enter destination or hotel": "Ange destination eller hotell",
   "Enter your details": "Ange dina uppgifter",
-  "Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
   "Events that make an impression": "Events that make an impression",
   "Explore all levels and benefits": "Utforska alla nivåer och fördelar",
   "Explore nearby": "Utforska i närheten",
@@ -118,11 +117,9 @@
   "How it works": "Hur det fungerar",
   "Image gallery": "Bildgalleri",
   "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Det gick inte att hantera dina kommunikationsinställningar just nu, försök igen senare eller kontakta supporten om problemet kvarstår.",
-
   "Join Scandic Friends": "Gå med i Scandic Friends",
   "Join at no cost": "Gå med utan kostnad",
   "King bed": "King size-säng",
-  "km to city center": "km till stadens centrum",
   "Language": "Språk",
   "Lastname": "Efternamn",
   "Latest searches": "Senaste sökningarna",
@@ -210,11 +207,11 @@
   "Read more about the hotel": "Läs mer om hotellet",
   "Read more about wellness & exercise": "Read more about wellness & exercise",
   "Remove card from member profile": "Ta bort kortet från medlemsprofilen",
+  "Request bedtype": "Request bedtype",
   "Restaurant": "{count, plural, one {#Restaurang} other {#Restauranger}}",
   "Restaurant & Bar": "Restaurang & Bar",
   "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Upprepa nytt lösenord",
-  "Request bedtype": "Request bedtype",
   "Room & Terms": "Rum & Villkor",
   "Room facilities": "Rumfaciliteter",
   "Rooms": "Rum",
@@ -266,7 +263,6 @@
   "Tripadvisor reviews": "{rating} ({count} recensioner på Tripadvisor)",
   "Type of bed": "Sängtyp",
   "Type of room": "Rumstyp",
-  "uppercase letter": "stor bokstav",
   "Use bonus cheque": "Använd bonuscheck",
   "Use code/voucher": "Använd kod/voucher",
   "User information": "Användarinformation",
@@ -301,6 +297,7 @@
   "Your details": "Dina uppgifter",
   "Your level": "Din nivå",
   "Your points to spend": "Dina spenderbara poäng",
+  "Your room": "Ditt rum",
   "Zip code": "Postnummer",
   "Zoo": "Djurpark",
   "Zoom in": "Zooma in",

From 71d08be154c0d2fc2ea678d95207021e1fdd17b3 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Wed, 9 Oct 2024 11:35:10 +0200
Subject: [PATCH 14/44] style(SW-337): hotel page ui updates

---
 components/ContentType/HotelPage/AmenitiesList/index.tsx | 2 +-
 components/ContentType/HotelPage/IntroSection/index.tsx  | 3 ++-
 .../ContentType/HotelPage/Rooms/RoomCard/index.tsx       | 1 +
 .../HotelPage/Rooms/RoomCard/roomCard.module.css         | 9 +++++++++
 components/Lightbox/Lightbox.module.css                  | 1 +
 5 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/components/ContentType/HotelPage/AmenitiesList/index.tsx b/components/ContentType/HotelPage/AmenitiesList/index.tsx
index 27448827d..8b6a1977e 100644
--- a/components/ContentType/HotelPage/AmenitiesList/index.tsx
+++ b/components/ContentType/HotelPage/AmenitiesList/index.tsx
@@ -44,7 +44,7 @@ export default async function AmenitiesList({
         className={styles.showAllAmenities}
       >
         {intl.formatMessage({ id: "Show all amenities" })}
-        <ChevronRightIcon />
+        <ChevronRightIcon color="burgundy" />
       </Link>
     </section>
   )
diff --git a/components/ContentType/HotelPage/IntroSection/index.tsx b/components/ContentType/HotelPage/IntroSection/index.tsx
index cb62ca01c..f6118a2fc 100644
--- a/components/ContentType/HotelPage/IntroSection/index.tsx
+++ b/components/ContentType/HotelPage/IntroSection/index.tsx
@@ -1,5 +1,6 @@
 import { about } from "@/constants/routes/hotelPageParams"
 
+import { ChevronRightIcon } from "@/components/Icons"
 import ArrowRight from "@/components/Icons/ArrowRight"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
 import Link from "@/components/TempDesignSystem/Link"
@@ -76,7 +77,7 @@ export default async function IntroSection({
           scroll={false}
         >
           {intl.formatMessage({ id: "Read more about the hotel" })}
-          <ArrowRight color="burgundy" />
+          <ChevronRightIcon color="burgundy" />
         </Link>
       </div>
     </section>
diff --git a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
index 967580157..35f671fe5 100644
--- a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
@@ -62,6 +62,7 @@ export function RoomCard({
             textAlign="center"
             type="one"
             color="black"
+            className={styles.title}
           >
             {title}
           </Subtitle>
diff --git a/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css b/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css
index 5fd955df6..fcec738e4 100644
--- a/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css
+++ b/components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css
@@ -45,6 +45,15 @@
   gap: var(--Spacing-x1);
 }
 
+.title {
+  display: flex;
+  align-items: center;
+}
+
+.title:first-child {
+  height: 2em;
+}
+
 .imageWrapper {
   position: relative;
   background-color: transparent;
diff --git a/components/Lightbox/Lightbox.module.css b/components/Lightbox/Lightbox.module.css
index f4b6611ba..f5446a2aa 100644
--- a/components/Lightbox/Lightbox.module.css
+++ b/components/Lightbox/Lightbox.module.css
@@ -197,6 +197,7 @@
   .desktopGallery {
     display: grid;
     grid-template-rows: 1.71875rem 1fr 7.8125rem;
+    row-gap: var(--Spacing-x-one-and-half);
     background-color: var(--Base-Background-Primary-Normal);
     height: 100%;
     position: relative;

From 2ea0adbf9860b6a4911514d4495028ddfb7c743e Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Tue, 1 Oct 2024 14:48:28 +0200
Subject: [PATCH 15/44] fix: handle cache tags for service tokens

---
 server/tokenManager.ts      | 65 +++++++++++++++++++++++++------------
 server/trpc.ts              | 18 +++++++---
 types/enums/serviceToken.ts |  7 ++++
 utils/generateTag.ts        | 10 ++++++
 4 files changed, 75 insertions(+), 25 deletions(-)
 create mode 100644 types/enums/serviceToken.ts

diff --git a/server/tokenManager.ts b/server/tokenManager.ts
index 4007896d6..4681721e3 100644
--- a/server/tokenManager.ts
+++ b/server/tokenManager.ts
@@ -1,35 +1,58 @@
+import { revalidateTag, unstable_cache } from "next/cache"
+
 import { env } from "@/env/server"
 
+import { generateServiceTokenTag } from "@/utils/generateTag"
+
+import { ServiceTokenScope } from "@/types/enums/serviceToken"
 import { ServiceTokenResponse } from "@/types/tokens"
 
-const SERVICE_TOKEN_REVALIDATE_SECONDS = 3599 // 59 minutes and 59 seconds.
+async function getServiceToken(scopes: ServiceTokenScope[]) {
+  const response = await fetch(`${env.CURITY_ISSUER_USER}/oauth/v2/token`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      Accept: "application/json",
+    },
+    body: new URLSearchParams({
+      grant_type: "client_credentials",
+      client_id: env.CURITY_CLIENT_ID_SERVICE,
+      client_secret: env.CURITY_CLIENT_SECRET_SERVICE,
+      scope: scopes.join(" "),
+    }),
+  })
+
+  if (!response.ok) {
+    throw new Error("Failed to obtain service token")
+  }
+
+  return response.json()
+}
 
 export async function fetchServiceToken(
-  scopes: string[]
+  scopes: ServiceTokenScope[]
 ): Promise<ServiceTokenResponse> {
   try {
-    const response = await fetch(`${env.CURITY_ISSUER_USER}/oauth/v2/token`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
-        Accept: "application/json",
-      },
-      body: new URLSearchParams({
-        grant_type: "client_credentials",
-        client_id: env.CURITY_CLIENT_ID_SERVICE,
-        client_secret: env.CURITY_CLIENT_SECRET_SERVICE,
-        scope: scopes.join(" "),
-      }),
-      next: {
-        revalidate: SERVICE_TOKEN_REVALIDATE_SECONDS,
-      },
-    })
+    const tag = generateServiceTokenTag(scopes)
+    const getCachedJwt = unstable_cache(
+      async (scopes) => {
+        const jwt = await getServiceToken(scopes)
 
-    if (!response.ok) {
-      throw new Error("Failed to obtain service token")
+        const expiresAt = Date.now() + jwt.expires_in * 1000
+        return { expiresAt, jwt }
+      },
+      scopes,
+      { tags: [tag] }
+    )
+
+    const cachedJwt = await getCachedJwt(scopes)
+    if (cachedJwt.expiresAt < Date.now()) {
+      revalidateTag(tag)
+      const newToken = await getServiceToken(scopes)
+      return newToken
     }
 
-    return response.json()
+    return cachedJwt.jwt
   } catch (error) {
     console.error("Error fetching service token:", error)
     throw error
diff --git a/server/trpc.ts b/server/trpc.ts
index e8f9c26f1..2ea6a871e 100644
--- a/server/trpc.ts
+++ b/server/trpc.ts
@@ -17,6 +17,10 @@ import { langInput } from "./utils"
 
 import type { Session } from "next-auth"
 
+import {
+  ServiceTokenScope,
+  ServiceTokenScopeEnum,
+} from "@/types/enums/serviceToken"
 import type { Meta } from "@/types/trpc/meta"
 
 const t = initTRPC
@@ -121,7 +125,7 @@ export const safeProtectedProcedure = t.procedure.use(async function (opts) {
   })
 })
 
-function createServiceProcedure(serviceName: string) {
+function createServiceProcedure(serviceName: ServiceTokenScope) {
   return t.procedure.use(async (opts) => {
     const { access_token } = await fetchServiceToken([serviceName])
     if (!access_token) {
@@ -135,9 +139,15 @@ function createServiceProcedure(serviceName: string) {
   })
 }
 
-export const bookingServiceProcedure = createServiceProcedure("booking")
-export const hotelServiceProcedure = createServiceProcedure("hotel")
-export const profileServiceProcedure = createServiceProcedure("profile")
+export const bookingServiceProcedure = createServiceProcedure(
+  ServiceTokenScopeEnum.booking
+)
+export const hotelServiceProcedure = createServiceProcedure(
+  ServiceTokenScopeEnum.hotel
+)
+export const profileServiceProcedure = createServiceProcedure(
+  ServiceTokenScopeEnum.profile
+)
 
 export const serverActionProcedure = t.procedure.experimental_caller(
   experimental_nextAppDirCaller({
diff --git a/types/enums/serviceToken.ts b/types/enums/serviceToken.ts
new file mode 100644
index 000000000..4efbe1218
--- /dev/null
+++ b/types/enums/serviceToken.ts
@@ -0,0 +1,7 @@
+export enum ServiceTokenScopeEnum {
+  profile = "profile",
+  hotel = "hotel",
+  booking = "booking",
+}
+
+export type ServiceTokenScope = keyof typeof ServiceTokenScopeEnum
diff --git a/utils/generateTag.ts b/utils/generateTag.ts
index 08f2b404a..41251245c 100644
--- a/utils/generateTag.ts
+++ b/utils/generateTag.ts
@@ -99,3 +99,13 @@ export function generateLoyaltyConfigTag(
 ) {
   return `${lang}:loyalty_config:${contentTypeUid}:${id}`
 }
+
+/**
+ * Function to generate tags for service tokens
+ *
+ * @param serviceTokenScope scope of service token
+ * @returns string
+ */
+export function generateServiceTokenTag(serviceTokenScopes: string[]) {
+  return `service_token:${serviceTokenScopes.join("-")}`
+}

From 71b03143ce8d9244b0e49eb19270d32b646e8d27 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Mon, 7 Oct 2024 16:48:23 +0200
Subject: [PATCH 16/44] fix: refactor scopes for service token

---
 server/routers/booking/mutation.ts          |   4 +-
 server/routers/booking/query.ts             | 117 ++++++++++----------
 server/routers/contentstack/reward/query.ts |   6 +-
 server/routers/hotels/query.ts              |  14 +--
 server/routers/user/query.ts                |   1 -
 server/tokenManager.ts                      |  50 +++++++--
 server/trpc.ts                              |  40 +++----
 utils/generateTag.ts                        |   6 +-
 8 files changed, 128 insertions(+), 110 deletions(-)

diff --git a/server/routers/booking/mutation.ts b/server/routers/booking/mutation.ts
index 53595b2d0..1ff3422af 100644
--- a/server/routers/booking/mutation.ts
+++ b/server/routers/booking/mutation.ts
@@ -2,7 +2,7 @@ import { metrics } from "@opentelemetry/api"
 
 import * as api from "@/lib/api"
 import { getVerifiedUser } from "@/server/routers/user/query"
-import { bookingServiceProcedure, router } from "@/server/trpc"
+import { router, serviceProcedure } from "@/server/trpc"
 
 import { getMembership } from "@/utils/user"
 
@@ -36,7 +36,7 @@ async function getMembershipNumber(
 
 export const bookingMutationRouter = router({
   booking: router({
-    create: bookingServiceProcedure
+    create: serviceProcedure
       .input(createBookingInput)
       .mutation(async function ({ ctx, input }) {
         const { checkInDate, checkOutDate, hotelId } = input
diff --git a/server/routers/booking/query.ts b/server/routers/booking/query.ts
index f7f439b90..d053782bd 100644
--- a/server/routers/booking/query.ts
+++ b/server/routers/booking/query.ts
@@ -2,7 +2,7 @@ import { metrics } from "@opentelemetry/api"
 
 import * as api from "@/lib/api"
 import { badRequestError, serverErrorByStatus } from "@/server/errors/trpc"
-import { bookingServiceProcedure, router } from "@/server/trpc"
+import { router, serviceProcedure } from "@/server/trpc"
 
 import { getBookingStatusInput } from "./input"
 import { createBookingSchema } from "./output"
@@ -17,69 +17,70 @@ const getBookingStatusFailCounter = meter.createCounter(
 )
 
 export const bookingQueryRouter = router({
-  status: bookingServiceProcedure
-    .input(getBookingStatusInput)
-    .query(async function ({ ctx, input }) {
-      const { confirmationNumber } = input
-      getBookingStatusCounter.add(1, { confirmationNumber })
+  status: serviceProcedure.input(getBookingStatusInput).query(async function ({
+    ctx,
+    input,
+  }) {
+    const { confirmationNumber } = input
+    getBookingStatusCounter.add(1, { confirmationNumber })
 
-      const apiResponse = await api.get(
-        `${api.endpoints.v1.booking}/${confirmationNumber}/status`,
-        {
-          headers: {
-            Authorization: `Bearer ${ctx.serviceToken}`,
-          },
-        }
-      )
-
-      if (!apiResponse.ok) {
-        const responseMessage = await apiResponse.text()
-        getBookingStatusFailCounter.add(1, {
-          confirmationNumber,
-          error_type: "http_error",
-          error: responseMessage,
-        })
-        console.error(
-          "api.booking.status error",
-          JSON.stringify({
-            query: { confirmationNumber },
-            error: {
-              status: apiResponse.status,
-              statusText: apiResponse.statusText,
-              text: responseMessage,
-            },
-          })
-        )
-
-        throw serverErrorByStatus(apiResponse.status, apiResponse)
+    const apiResponse = await api.get(
+      `${api.endpoints.v1.booking}/${confirmationNumber}/status`,
+      {
+        headers: {
+          Authorization: `Bearer ${ctx.serviceToken}`,
+        },
       }
+    )
 
-      const apiJson = await apiResponse.json()
-      const verifiedData = createBookingSchema.safeParse(apiJson)
-      if (!verifiedData.success) {
-        getBookingStatusFailCounter.add(1, {
-          confirmationNumber,
-          error_type: "validation_error",
-          error: JSON.stringify(verifiedData.error),
-        })
-        console.error(
-          "api.booking.status validation error",
-          JSON.stringify({
-            query: { confirmationNumber },
-            error: verifiedData.error,
-          })
-        )
-        throw badRequestError()
-      }
-
-      getBookingStatusSuccessCounter.add(1, { confirmationNumber })
-      console.info(
-        "api.booking.status success",
+    if (!apiResponse.ok) {
+      const responseMessage = await apiResponse.text()
+      getBookingStatusFailCounter.add(1, {
+        confirmationNumber,
+        error_type: "http_error",
+        error: responseMessage,
+      })
+      console.error(
+        "api.booking.status error",
         JSON.stringify({
           query: { confirmationNumber },
+          error: {
+            status: apiResponse.status,
+            statusText: apiResponse.statusText,
+            text: responseMessage,
+          },
         })
       )
 
-      return verifiedData.data
-    }),
+      throw serverErrorByStatus(apiResponse.status, apiResponse)
+    }
+
+    const apiJson = await apiResponse.json()
+    const verifiedData = createBookingSchema.safeParse(apiJson)
+    if (!verifiedData.success) {
+      getBookingStatusFailCounter.add(1, {
+        confirmationNumber,
+        error_type: "validation_error",
+        error: JSON.stringify(verifiedData.error),
+      })
+      console.error(
+        "api.booking.status validation error",
+        JSON.stringify({
+          query: { confirmationNumber },
+          error: verifiedData.error,
+        })
+      )
+      throw badRequestError()
+    }
+
+    getBookingStatusSuccessCounter.add(1, { confirmationNumber })
+    console.info(
+      "api.booking.status success",
+      JSON.stringify({
+        query: { confirmationNumber },
+      })
+    )
+
+    return verifiedData.data
+  }),
 })
diff --git a/server/routers/contentstack/reward/query.ts b/server/routers/contentstack/reward/query.ts
index 543cd46cc..ea6023fee 100644
--- a/server/routers/contentstack/reward/query.ts
+++ b/server/routers/contentstack/reward/query.ts
@@ -7,8 +7,8 @@ import { request } from "@/lib/graphql/request"
 import { Context } from "@/server/context"
 import { notFound } from "@/server/errors/trpc"
 import {
-  contentStackBaseWithProfileServiceProcedure,
   contentStackBaseWithProtectedProcedure,
+  contentStackBaseWithServiceProcedure,
   router,
 } from "@/server/trpc"
 
@@ -260,7 +260,7 @@ export const rewardQueryRouter = router({
         nextCursor,
       }
     }),
-  byLevel: contentStackBaseWithProfileServiceProcedure
+  byLevel: contentStackBaseWithServiceProcedure
     .input(rewardsByLevelInput)
     .query(async function ({ input, ctx }) {
       getByLevelRewardCounter.add(1)
@@ -310,7 +310,7 @@ export const rewardQueryRouter = router({
       getByLevelRewardSuccessCounter.add(1)
       return { level: loyaltyLevelsConfig, rewards: levelsWithRewards }
     }),
-  all: contentStackBaseWithProfileServiceProcedure
+  all: contentStackBaseWithServiceProcedure
     .input(rewardsAllInput)
     .query(async function ({ input, ctx }) {
       getAllRewardCounter.add(1)
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 859e5662c..8ce752577 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -11,10 +11,10 @@ import {
 } from "@/server/errors/trpc"
 import { extractHotelImages } from "@/server/routers/utils/hotels"
 import {
-  contentStackUidWithHotelServiceProcedure,
-  hotelServiceProcedure,
+  contentStackUidWithServiceProcedure,
   publicProcedure,
   router,
+  serviceProcedure,
 } from "@/server/trpc"
 import { toApiLang } from "@/server/utils"
 
@@ -99,7 +99,7 @@ async function getContentstackData(
 }
 
 export const hotelQueryRouter = router({
-  get: contentStackUidWithHotelServiceProcedure
+  get: contentStackUidWithServiceProcedure
     .input(getHotelInputSchema)
     .query(async ({ ctx, input }) => {
       const { lang, uid } = ctx
@@ -264,7 +264,7 @@ export const hotelQueryRouter = router({
       }
     }),
   availability: router({
-    hotels: hotelServiceProcedure
+    hotels: serviceProcedure
       .input(getHotelsAvailabilityInputSchema)
       .query(async ({ input, ctx }) => {
         const {
@@ -388,7 +388,7 @@ export const hotelQueryRouter = router({
             .flatMap((hotels) => hotels.attributes),
         }
       }),
-    rooms: hotelServiceProcedure
+    rooms: serviceProcedure
       .input(getRoomsAvailabilityInputSchema)
       .query(async ({ input, ctx }) => {
         const {
@@ -543,7 +543,7 @@ export const hotelQueryRouter = router({
       }),
   }),
   hotelData: router({
-    get: hotelServiceProcedure
+    get: serviceProcedure
       .input(getlHotelDataInputSchema)
       .query(async ({ ctx, input }) => {
         const { hotelId, language, include } = input
@@ -641,7 +641,7 @@ export const hotelQueryRouter = router({
       }),
   }),
   locations: router({
-    get: hotelServiceProcedure.query(async function ({ ctx }) {
+    get: serviceProcedure.query(async function ({ ctx }) {
       const searchParams = new URLSearchParams()
       searchParams.set("language", toApiLang(ctx.lang))
 
diff --git a/server/routers/user/query.ts b/server/routers/user/query.ts
index 28dee9cd2..df900953c 100644
--- a/server/routers/user/query.ts
+++ b/server/routers/user/query.ts
@@ -1,5 +1,4 @@
 import { metrics } from "@opentelemetry/api"
-import { SafeParseSuccess } from "zod"
 
 import * as api from "@/lib/api"
 import {
diff --git a/server/tokenManager.ts b/server/tokenManager.ts
index 4681721e3..6df7def66 100644
--- a/server/tokenManager.ts
+++ b/server/tokenManager.ts
@@ -1,13 +1,28 @@
+import { metrics } from "@opentelemetry/api"
 import { revalidateTag, unstable_cache } from "next/cache"
 
 import { env } from "@/env/server"
 
 import { generateServiceTokenTag } from "@/utils/generateTag"
 
-import { ServiceTokenScope } from "@/types/enums/serviceToken"
+import { ServiceTokenScopeEnum } from "@/types/enums/serviceToken"
 import { ServiceTokenResponse } from "@/types/tokens"
 
-async function getServiceToken(scopes: ServiceTokenScope[]) {
+// OpenTelemetry metrics: Service token
+const meter = metrics.getMeter("trpc.context.serviceToken")
+const getServiceTokenCounter = meter.createCounter(
+  "trpc.context.serviceToken.get-new-token"
+)
+const getTempServiceTokenCounter = meter.createCounter(
+  "trpc.context.serviceToken.get-temporary"
+)
+const getServiceTokenFailCounter = meter.createCounter(
+  "trpc.context.serviceToken.get-fail"
+)
+
+async function getServiceToken() {
+  getServiceTokenCounter.add(1)
+  const scopes = Object.keys(ServiceTokenScopeEnum)
   const response = await fetch(`${env.CURITY_ISSUER_USER}/oauth/v2/token`, {
     method: "POST",
     headers: {
@@ -23,32 +38,45 @@ async function getServiceToken(scopes: ServiceTokenScope[]) {
   })
 
   if (!response.ok) {
+    getServiceTokenFailCounter.add(1, {
+      error_type: "http_error",
+      error: JSON.stringify({
+        status: response.status,
+        statusText: response.statusText,
+      }),
+    })
     throw new Error("Failed to obtain service token")
   }
 
   return response.json()
 }
 
-export async function fetchServiceToken(
-  scopes: ServiceTokenScope[]
-): Promise<ServiceTokenResponse> {
+export async function fetchServiceToken(): Promise<ServiceTokenResponse> {
   try {
-    const tag = generateServiceTokenTag(scopes)
+    const tag = generateServiceTokenTag()
     const getCachedJwt = unstable_cache(
-      async (scopes) => {
-        const jwt = await getServiceToken(scopes)
+      async () => {
+        const jwt = await getServiceToken()
 
         const expiresAt = Date.now() + jwt.expires_in * 1000
         return { expiresAt, jwt }
       },
-      scopes,
+      [],
       { tags: [tag] }
     )
 
-    const cachedJwt = await getCachedJwt(scopes)
+    const cachedJwt = await getCachedJwt()
     if (cachedJwt.expiresAt < Date.now()) {
+      console.log(
+        "trpc.context.serviceToken: Service token expired, revalidating tag"
+      )
       revalidateTag(tag)
-      const newToken = await getServiceToken(scopes)
+
+      console.log(
+        "trpc.context.serviceToken: Fetching new temporary service token."
+      )
+      getTempServiceTokenCounter.add(1)
+      const newToken = await getServiceToken()
       return newToken
     }
 
diff --git a/server/trpc.ts b/server/trpc.ts
index 2ea6a871e..94d4e47b5 100644
--- a/server/trpc.ts
+++ b/server/trpc.ts
@@ -125,29 +125,17 @@ export const safeProtectedProcedure = t.procedure.use(async function (opts) {
   })
 })
 
-function createServiceProcedure(serviceName: ServiceTokenScope) {
-  return t.procedure.use(async (opts) => {
-    const { access_token } = await fetchServiceToken([serviceName])
-    if (!access_token) {
-      throw internalServerError(`Failed to obtain ${serviceName} service token`)
-    }
-    return opts.next({
-      ctx: {
-        serviceToken: access_token,
-      },
-    })
+export const serviceProcedure = t.procedure.use(async (opts) => {
+  const { access_token } = await fetchServiceToken()
+  if (!access_token) {
+    throw internalServerError(`Failed to obtain service token`)
+  }
+  return opts.next({
+    ctx: {
+      serviceToken: access_token,
+    },
   })
-}
-
-export const bookingServiceProcedure = createServiceProcedure(
-  ServiceTokenScopeEnum.booking
-)
-export const hotelServiceProcedure = createServiceProcedure(
-  ServiceTokenScopeEnum.hotel
-)
-export const profileServiceProcedure = createServiceProcedure(
-  ServiceTokenScopeEnum.profile
-)
+})
 
 export const serverActionProcedure = t.procedure.experimental_caller(
   experimental_nextAppDirCaller({
@@ -178,11 +166,11 @@ export const protectedServerActionProcedure = serverActionProcedure.use(
 
 // NOTE: This is actually save to use, just the implementation could change
 // in minor version bumps. Please read: https://trpc.io/docs/faq#unstable
-export const contentStackUidWithHotelServiceProcedure =
-  contentstackExtendedProcedureUID.unstable_concat(hotelServiceProcedure)
+export const contentStackUidWithServiceProcedure =
+  contentstackExtendedProcedureUID.unstable_concat(serviceProcedure)
 
-export const contentStackBaseWithProfileServiceProcedure =
-  contentstackBaseProcedure.unstable_concat(profileServiceProcedure)
+export const contentStackBaseWithServiceProcedure =
+  contentstackBaseProcedure.unstable_concat(serviceProcedure)
 
 export const contentStackBaseWithProtectedProcedure =
   contentstackBaseProcedure.unstable_concat(protectedProcedure)
diff --git a/utils/generateTag.ts b/utils/generateTag.ts
index 41251245c..0dbf95d33 100644
--- a/utils/generateTag.ts
+++ b/utils/generateTag.ts
@@ -1,3 +1,4 @@
+import { ServiceTokenScopeEnum } from "@/types/enums/serviceToken"
 import { System } from "@/types/requests/system"
 import type { Edges } from "@/types/requests/utils/edges"
 import type { NodeRefs } from "@/types/requests/utils/refs"
@@ -106,6 +107,7 @@ export function generateLoyaltyConfigTag(
  * @param serviceTokenScope scope of service token
  * @returns string
  */
-export function generateServiceTokenTag(serviceTokenScopes: string[]) {
-  return `service_token:${serviceTokenScopes.join("-")}`
+export function generateServiceTokenTag() {
+  const scopes = Object.keys(ServiceTokenScopeEnum).join("-")
+  return `service_token:${scopes}`
 }

From 95ff011bdb0cffad8da6a530e91529e1e544239c Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Wed, 9 Oct 2024 11:27:16 +0200
Subject: [PATCH 17/44] fix: add args as keyParts for unstable_cache

---
 server/routers/hotels/query.ts        |  29 +--
 server/routers/hotels/utils.ts        | 300 +++++++++++++++-----------
 server/tokenManager.ts                |  37 ++--
 server/trpc.ts                        |   8 +-
 types/enums/serviceToken.ts           |   7 -
 types/trpc/routers/hotel/locations.ts |   3 +
 utils/generateTag.ts                  |   6 +-
 7 files changed, 204 insertions(+), 186 deletions(-)
 delete mode 100644 types/enums/serviceToken.ts

diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 8ce752577..f0c5e1ef8 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -1,5 +1,4 @@
 import { metrics } from "@opentelemetry/api"
-import { unstable_cache } from "next/cache"
 
 import * as api from "@/lib/api"
 import { GetHotelPage } from "@/lib/graphql/Query/HotelPage/HotelPage.graphql"
@@ -38,7 +37,6 @@ import {
   getCitiesByCountry,
   getCountries,
   getLocations,
-  locationsAffix,
   TWENTYFOUR_HOURS,
 } from "./utils"
 
@@ -657,36 +655,19 @@ export const hotelQueryRouter = router({
         },
       }
 
-      const getCachedCountries = unstable_cache(
-        getCountries,
-        [`${ctx.lang}:${locationsAffix}:countries`],
-        { revalidate: TWENTYFOUR_HOURS }
-      )
-
-      const countries = await getCachedCountries(options, searchParams)
-
-      const getCachedCitiesByCountry = unstable_cache(
-        getCitiesByCountry,
-        [`${ctx.lang}:${locationsAffix}:cities-by-country`],
-        { revalidate: TWENTYFOUR_HOURS }
-      )
+      const countries = await getCountries(options, searchParams, ctx.lang)
 
       let citiesByCountry = null
       if (countries) {
-        citiesByCountry = await getCachedCitiesByCountry(
+        citiesByCountry = await getCitiesByCountry(
           countries,
           options,
-          searchParams
+          searchParams,
+          ctx.lang
         )
       }
 
-      const getCachedLocations = unstable_cache(
-        getLocations,
-        [`${ctx.lang}:${locationsAffix}`],
-        { revalidate: TWENTYFOUR_HOURS }
-      )
-
-      const locations = await getCachedLocations(
+      const locations = await getLocations(
         ctx.lang,
         options,
         searchParams,
diff --git a/server/routers/hotels/utils.ts b/server/routers/hotels/utils.ts
index d19d1a492..84020bfaa 100644
--- a/server/routers/hotels/utils.ts
+++ b/server/routers/hotels/utils.ts
@@ -17,6 +17,7 @@ import {
   PointOfInterestCategoryNameEnum,
   PointOfInterestGroupEnum,
 } from "@/types/hotel"
+import { HotelLocation } from "@/types/trpc/routers/hotel/locations"
 import type { Lang } from "@/constants/languages"
 import type { Endpoint } from "@/lib/api/endpoints"
 
@@ -54,89 +55,119 @@ export const locationsAffix = "locations"
 export const TWENTYFOUR_HOURS = 60 * 60 * 24
 export async function getCity(
   cityUrl: string,
-  options: RequestOptionsWithOutBody
+  options: RequestOptionsWithOutBody,
+  lang: Lang,
+  relationshipCity: HotelLocation["relationships"]["city"]
 ) {
-  const url = new URL(cityUrl)
-  const cityResponse = await api.get(
-    url.pathname as Endpoint,
-    options,
-    url.searchParams
-  )
+  return unstable_cache(
+    async function (locationCityUrl: string) {
+      const url = new URL(locationCityUrl)
+      const cityResponse = await api.get(
+        url.pathname as Endpoint,
+        options,
+        url.searchParams
+      )
 
-  if (!cityResponse.ok) {
-    return null
-  }
+      if (!cityResponse.ok) {
+        return null
+      }
 
-  const cityJson = await cityResponse.json()
-  const city = apiCitySchema.safeParse(cityJson)
-  if (!city.success) {
-    console.info(`Validation of city failed`)
-    console.info(`cityUrl: ${cityUrl}`)
-    console.error(city.error)
-    return null
-  }
+      const cityJson = await cityResponse.json()
+      const city = apiCitySchema.safeParse(cityJson)
+      if (!city.success) {
+        console.info(`Validation of city failed`)
+        console.info(`cityUrl: ${locationCityUrl}`)
+        console.error(city.error)
+        return null
+      }
 
-  return city.data
+      return city.data
+    },
+    [cityUrl, `${lang}:${relationshipCity}`],
+    { revalidate: TWENTYFOUR_HOURS }
+  )(cityUrl)
 }
 
 export async function getCountries(
   options: RequestOptionsWithOutBody,
-  params: URLSearchParams
+  params: URLSearchParams,
+  lang: Lang
 ) {
-  const countryResponse = await api.get(
-    api.endpoints.v1.countries,
-    options,
-    params
-  )
-
-  if (!countryResponse.ok) {
-    return null
-  }
-
-  const countriesJson = await countryResponse.json()
-  const countries = apiCountriesSchema.safeParse(countriesJson)
-  if (!countries.success) {
-    console.info(`Validation for countries failed`)
-    console.error(countries.error)
-    return null
-  }
-
-  return countries.data
-}
-
-export async function getCitiesByCountry(
-  countries: Countries,
-  options: RequestOptionsWithOutBody,
-  params: URLSearchParams
-) {
-  const citiesGroupedByCountry: CitiesGroupedByCountry = {}
-
-  await Promise.all(
-    countries.data.map(async (country) => {
+  return unstable_cache(
+    async function (searchParams) {
       const countryResponse = await api.get(
-        `${api.endpoints.v1.citiesCountry}/${country.name}`,
+        api.endpoints.v1.countries,
         options,
-        params
+        searchParams
       )
 
       if (!countryResponse.ok) {
         return null
       }
 
-      const countryJson = await countryResponse.json()
-      const citiesByCountry = apiCitiesByCountrySchema.safeParse(countryJson)
-      if (!citiesByCountry.success) {
-        console.info(`Failed to validate Cities by Country payload`)
-        console.error(citiesByCountry.error)
+      const countriesJson = await countryResponse.json()
+      const countries = apiCountriesSchema.safeParse(countriesJson)
+      if (!countries.success) {
+        console.info(`Validation for countries failed`)
+        console.error(countries.error)
         return null
       }
 
-      citiesGroupedByCountry[country.name] = citiesByCountry.data.data
-      return true
-    })
-  )
+      return countries.data
+    },
+    [`${lang}:${locationsAffix}:countries`, params.toString()],
+    { revalidate: TWENTYFOUR_HOURS }
+  )(params)
+}
 
-  return citiesGroupedByCountry
+export async function getCitiesByCountry(
+  countries: Countries,
+  options: RequestOptionsWithOutBody,
+  params: URLSearchParams,
+  lang: Lang
+) {
+  return unstable_cache(
+    async function (
+      searchParams: URLSearchParams,
+      searchedCountries: Countries
+    ) {
+      const citiesGroupedByCountry: CitiesGroupedByCountry = {}
+
+      await Promise.all(
+        searchedCountries.data.map(async (country) => {
+          const countryResponse = await api.get(
+            `${api.endpoints.v1.citiesCountry}/${country.name}`,
+            options,
+            searchParams
+          )
+
+          if (!countryResponse.ok) {
+            return null
+          }
+
+          const countryJson = await countryResponse.json()
+          const citiesByCountry =
+            apiCitiesByCountrySchema.safeParse(countryJson)
+          if (!citiesByCountry.success) {
+            console.info(`Failed to validate Cities by Country payload`)
+            console.error(citiesByCountry.error)
+            return null
+          }
+
+          citiesGroupedByCountry[country.name] = citiesByCountry.data.data
+          return true
+        })
+      )
+
+      return citiesGroupedByCountry
+    },
+    [
+      `${lang}:${locationsAffix}:cities-by-country`,
+      params.toString(),
+      JSON.stringify(countries),
+    ],
+    { revalidate: TWENTYFOUR_HOURS }
+  )(params, countries)
 }
 
 export async function getLocations(
@@ -145,72 +176,89 @@ export async function getLocations(
   params: URLSearchParams,
   citiesByCountry: CitiesGroupedByCountry | null
 ) {
-  const apiResponse = await api.get(api.endpoints.v1.locations, options, params)
+  return unstable_cache(
+    async function (
+      searchParams: URLSearchParams,
+      groupedCitiesByCountry: CitiesGroupedByCountry | null
+    ) {
+      const apiResponse = await api.get(
+        api.endpoints.v1.locations,
+        options,
+        searchParams
+      )
 
-  if (!apiResponse.ok) {
-    if (apiResponse.status === 401) {
-      return { error: true, cause: "unauthorized" } as const
-    } else if (apiResponse.status === 403) {
-      return { error: true, cause: "forbidden" } as const
-    }
-    return null
-  }
-
-  const apiJson = await apiResponse.json()
-  const verifiedLocations = apiLocationsSchema.safeParse(apiJson)
-  if (!verifiedLocations.success) {
-    console.info(`Locations Verification Failed`)
-    console.error(verifiedLocations.error)
-    return null
-  }
-
-  return await Promise.all(
-    verifiedLocations.data.data.map(async (location) => {
-      if (location.type === "cities") {
-        if (citiesByCountry) {
-          const country = Object.keys(citiesByCountry).find((country) => {
-            if (
-              citiesByCountry[country].find((loc) => loc.name === location.name)
-            ) {
-              return true
-            }
-            return false
-          })
-          if (country) {
-            return {
-              ...location,
-              country,
-            }
-          } else {
-            console.info(
-              `Location cannot be found in any of the countries cities`
-            )
-            console.info(location)
-          }
-        }
-      } else if (location.type === "hotels") {
-        if (location.relationships.city?.url) {
-          const getCachedCity = unstable_cache(
-            getCity,
-            [`${lang}:${location.relationships.city}`],
-            { revalidate: TWENTYFOUR_HOURS }
-          )
-
-          const city = await getCachedCity(
-            location.relationships.city.url,
-            options
-          )
-          if (city) {
-            return deepmerge(location, {
-              relationships: {
-                city,
-              },
-            })
-          }
+      if (!apiResponse.ok) {
+        if (apiResponse.status === 401) {
+          return { error: true, cause: "unauthorized" } as const
+        } else if (apiResponse.status === 403) {
+          return { error: true, cause: "forbidden" } as const
         }
+        return null
       }
 
-      return location
-    })
-  )
+      const apiJson = await apiResponse.json()
+      const verifiedLocations = apiLocationsSchema.safeParse(apiJson)
+      if (!verifiedLocations.success) {
+        console.info(`Locations Verification Failed`)
+        console.error(verifiedLocations.error)
+        return null
+      }
+
+      return await Promise.all(
+        verifiedLocations.data.data.map(async (location) => {
+          if (location.type === "cities") {
+            if (groupedCitiesByCountry) {
+              const country = Object.keys(groupedCitiesByCountry).find(
+                (country) => {
+                  if (
+                    groupedCitiesByCountry[country].find(
+                      (loc) => loc.name === location.name
+                    )
+                  ) {
+                    return true
+                  }
+                  return false
+                }
+              )
+              if (country) {
+                return {
+                  ...location,
+                  country,
+                }
+              } else {
+                console.info(
+                  `Location cannot be found in any of the countries cities`
+                )
+                console.info(location)
+              }
+            }
+          } else if (location.type === "hotels") {
+            if (location.relationships.city?.url) {
+              const city = await getCity(
+                location.relationships.city.url,
+                options,
+                lang,
+                location.relationships.city
+              )
+              if (city) {
+                return deepmerge(location, {
+                  relationships: {
+                    city,
+                  },
+                })
+              }
+            }
+          }
+
+          return location
+        })
+      )
+    },
+    [
+      `${lang}:${locationsAffix}`,
+      params.toString(),
+      JSON.stringify(citiesByCountry),
+    ],
+    { revalidate: TWENTYFOUR_HOURS }
+  )(params, citiesByCountry)
 }
diff --git a/server/tokenManager.ts b/server/tokenManager.ts
index 6df7def66..2e6d82b04 100644
--- a/server/tokenManager.ts
+++ b/server/tokenManager.ts
@@ -5,24 +5,22 @@ import { env } from "@/env/server"
 
 import { generateServiceTokenTag } from "@/utils/generateTag"
 
-import { ServiceTokenScopeEnum } from "@/types/enums/serviceToken"
 import { ServiceTokenResponse } from "@/types/tokens"
 
 // OpenTelemetry metrics: Service token
 const meter = metrics.getMeter("trpc.context.serviceToken")
-const getServiceTokenCounter = meter.createCounter(
-  "trpc.context.serviceToken.get-new-token"
+const fetchServiceTokenCounter = meter.createCounter(
+  "trpc.context.serviceToken.fetch-new-token"
 )
-const getTempServiceTokenCounter = meter.createCounter(
-  "trpc.context.serviceToken.get-temporary"
+const fetchTempServiceTokenCounter = meter.createCounter(
+  "trpc.context.serviceToken.fetch-temporary"
 )
-const getServiceTokenFailCounter = meter.createCounter(
-  "trpc.context.serviceToken.get-fail"
+const fetchServiceTokenFailCounter = meter.createCounter(
+  "trpc.context.serviceToken.fetch-fail"
 )
 
-async function getServiceToken() {
-  getServiceTokenCounter.add(1)
-  const scopes = Object.keys(ServiceTokenScopeEnum)
+async function fetchServiceToken(scopes: string[]) {
+  fetchServiceTokenCounter.add(1)
   const response = await fetch(`${env.CURITY_ISSUER_USER}/oauth/v2/token`, {
     method: "POST",
     headers: {
@@ -38,7 +36,7 @@ async function getServiceToken() {
   })
 
   if (!response.ok) {
-    getServiceTokenFailCounter.add(1, {
+    fetchServiceTokenFailCounter.add(1, {
       error_type: "http_error",
       error: JSON.stringify({
         status: response.status,
@@ -51,21 +49,22 @@ async function getServiceToken() {
   return response.json()
 }
 
-export async function fetchServiceToken(): Promise<ServiceTokenResponse> {
+export async function getServiceToken(): Promise<ServiceTokenResponse> {
   try {
-    const tag = generateServiceTokenTag()
+    const scopes = ["profile", "hotel", "booking"]
+    const tag = generateServiceTokenTag(scopes)
     const getCachedJwt = unstable_cache(
-      async () => {
-        const jwt = await getServiceToken()
+      async (scopes) => {
+        const jwt = await fetchServiceToken(scopes)
 
         const expiresAt = Date.now() + jwt.expires_in * 1000
         return { expiresAt, jwt }
       },
-      [],
+      [tag],
       { tags: [tag] }
     )
 
-    const cachedJwt = await getCachedJwt()
+    const cachedJwt = await getCachedJwt(scopes)
     if (cachedJwt.expiresAt < Date.now()) {
       console.log(
         "trpc.context.serviceToken: Service token expired, revalidating tag"
@@ -75,8 +74,8 @@ export async function fetchServiceToken(): Promise<ServiceTokenResponse> {
       console.log(
         "trpc.context.serviceToken: Fetching new temporary service token."
       )
-      getTempServiceTokenCounter.add(1)
-      const newToken = await getServiceToken()
+      fetchTempServiceTokenCounter.add(1)
+      const newToken = await fetchServiceToken(scopes)
       return newToken
     }
 
diff --git a/server/trpc.ts b/server/trpc.ts
index 94d4e47b5..dafd26690 100644
--- a/server/trpc.ts
+++ b/server/trpc.ts
@@ -11,16 +11,12 @@ import {
   unauthorizedError,
 } from "./errors/trpc"
 import { type Context, createContext } from "./context"
-import { fetchServiceToken } from "./tokenManager"
+import { getServiceToken } from "./tokenManager"
 import { transformer } from "./transformer"
 import { langInput } from "./utils"
 
 import type { Session } from "next-auth"
 
-import {
-  ServiceTokenScope,
-  ServiceTokenScopeEnum,
-} from "@/types/enums/serviceToken"
 import type { Meta } from "@/types/trpc/meta"
 
 const t = initTRPC
@@ -126,7 +122,7 @@ export const safeProtectedProcedure = t.procedure.use(async function (opts) {
 })
 
 export const serviceProcedure = t.procedure.use(async (opts) => {
-  const { access_token } = await fetchServiceToken()
+  const { access_token } = await getServiceToken()
   if (!access_token) {
     throw internalServerError(`Failed to obtain service token`)
   }
diff --git a/types/enums/serviceToken.ts b/types/enums/serviceToken.ts
deleted file mode 100644
index 4efbe1218..000000000
--- a/types/enums/serviceToken.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export enum ServiceTokenScopeEnum {
-  profile = "profile",
-  hotel = "hotel",
-  booking = "booking",
-}
-
-export type ServiceTokenScope = keyof typeof ServiceTokenScopeEnum
diff --git a/types/trpc/routers/hotel/locations.ts b/types/trpc/routers/hotel/locations.ts
index 859aa8a03..8f2deed1e 100644
--- a/types/trpc/routers/hotel/locations.ts
+++ b/types/trpc/routers/hotel/locations.ts
@@ -6,3 +6,6 @@ export interface LocationSchema extends z.output<typeof apiLocationsSchema> {}
 
 export type Locations = LocationSchema["data"]
 export type Location = Locations[number]
+
+export type CityLocation = Location & { type: "cities" }
+export type HotelLocation = Location & { type: "hotels" }
diff --git a/utils/generateTag.ts b/utils/generateTag.ts
index 0dbf95d33..b067f536e 100644
--- a/utils/generateTag.ts
+++ b/utils/generateTag.ts
@@ -1,4 +1,3 @@
-import { ServiceTokenScopeEnum } from "@/types/enums/serviceToken"
 import { System } from "@/types/requests/system"
 import type { Edges } from "@/types/requests/utils/edges"
 import type { NodeRefs } from "@/types/requests/utils/refs"
@@ -107,7 +106,6 @@ export function generateLoyaltyConfigTag(
  * @param serviceTokenScope scope of service token
  * @returns string
  */
-export function generateServiceTokenTag() {
-  const scopes = Object.keys(ServiceTokenScopeEnum).join("-")
-  return `service_token:${scopes}`
+export function generateServiceTokenTag(scopes: string[]) {
+  return `service_token:${scopes.join("-")}`
 }

From 491253d8662dc8de0bad9cc10ae8e5af4c38f139 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Wed, 9 Oct 2024 15:20:00 +0200
Subject: [PATCH 18/44] fix: wrap tier rewards endpoint in unstable_cache

---
 server/routers/contentstack/reward/query.ts | 98 +++++++++++----------
 1 file changed, 51 insertions(+), 47 deletions(-)

diff --git a/server/routers/contentstack/reward/query.ts b/server/routers/contentstack/reward/query.ts
index ea6023fee..f6af86315 100644
--- a/server/routers/contentstack/reward/query.ts
+++ b/server/routers/contentstack/reward/query.ts
@@ -1,10 +1,10 @@
 import { metrics } from "@opentelemetry/api"
+import { unstable_cache } from "next/cache"
 
 import { Lang } from "@/constants/languages"
 import * as api from "@/lib/api"
 import { GetRewards } from "@/lib/graphql/Query/Rewards.graphql"
 import { request } from "@/lib/graphql/request"
-import { Context } from "@/server/context"
 import { notFound } from "@/server/errors/trpc"
 import {
   contentStackBaseWithProtectedProcedure,
@@ -62,69 +62,71 @@ const getAllRewardFailCounter = meter.createCounter(
   "trpc.contentstack.reward.all-fail"
 )
 
+const ONE_HOUR = 60 * 60
+
 function getUniqueRewardIds(rewardIds: string[]) {
   const uniqueRewardIds = new Set(rewardIds)
   return Array.from(uniqueRewardIds)
 }
 
-async function getAllApiRewards(ctx: Context & { serviceToken: string }) {
-  const apiResponse = await api.get(api.endpoints.v1.tierRewards, {
-    cache: undefined, // override defaultOptions
-    headers: {
-      Authorization: `Bearer ${ctx.serviceToken}`,
-    },
-    // One hour. Since the service token is refreshed every hour, this is the longest cache we can have.
-    next: { revalidate: 60 * 60 },
-  })
-
-  if (!apiResponse.ok) {
-    const text = await apiResponse.text()
-    getCurrentRewardFailCounter.add(1, {
-      error_type: "http_error",
-      error: JSON.stringify({
-        status: apiResponse.status,
-        statusText: apiResponse.statusText,
-        text,
-      }),
+const getAllCachedApiRewards = unstable_cache(
+  async function (token) {
+    const apiResponse = await api.get(api.endpoints.v1.tierRewards, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
     })
-    console.error(
-      "api.rewards.tierRewards error ",
-      JSON.stringify({
-        error: {
+
+    if (!apiResponse.ok) {
+      const text = await apiResponse.text()
+      getCurrentRewardFailCounter.add(1, {
+        error_type: "http_error",
+        error: JSON.stringify({
           status: apiResponse.status,
           statusText: apiResponse.statusText,
           text,
-        },
+        }),
       })
-    )
-  }
+      console.error(
+        "api.rewards.tierRewards error ",
+        JSON.stringify({
+          error: {
+            status: apiResponse.status,
+            statusText: apiResponse.statusText,
+            text,
+          },
+        })
+      )
+    }
 
-  const data = await apiResponse.json()
-  const validatedApiTierRewards = validateApiTierRewardsSchema.safeParse(data)
+    const data = await apiResponse.json()
+    const validatedApiTierRewards = validateApiTierRewardsSchema.safeParse(data)
 
-  if (!validatedApiTierRewards.success) {
-    getAllRewardFailCounter.add(1, {
-      error_type: "validation_error",
-      error: JSON.stringify(validatedApiTierRewards.error),
-    })
-    console.error(validatedApiTierRewards.error)
-    console.error(
-      "api.rewards validation error",
-      JSON.stringify({
-        error: validatedApiTierRewards.error,
+    if (!validatedApiTierRewards.success) {
+      getAllRewardFailCounter.add(1, {
+        error_type: "validation_error",
+        error: JSON.stringify(validatedApiTierRewards.error),
       })
-    )
-    return null
-  }
+      console.error(validatedApiTierRewards.error)
+      console.error(
+        "api.rewards validation error",
+        JSON.stringify({
+          error: validatedApiTierRewards.error,
+        })
+      )
+      return null
+    }
 
-  return validatedApiTierRewards.data
-}
+    return validatedApiTierRewards.data
+  },
+  ["getAllApiRewards"],
+  { revalidate: ONE_HOUR }
+)
 
 async function getCmsRewards(locale: Lang, rewardIds: string[]) {
   const tags = rewardIds.map((id) =>
     generateLoyaltyConfigTag(locale, "reward", id)
   )
-
   const cmsRewardsResponse = await request<CmsRewardsResponse>(
     GetRewards,
     {
@@ -266,7 +268,9 @@ export const rewardQueryRouter = router({
       getByLevelRewardCounter.add(1)
       const { level_id } = input
 
-      const allUpcomingApiRewards = await getAllApiRewards(ctx)
+      const allUpcomingApiRewards = await getAllCachedApiRewards(
+        ctx.serviceToken
+      )
 
       if (!allUpcomingApiRewards || !allUpcomingApiRewards[level_id]) {
         getByLevelRewardFailCounter.add(1)
@@ -314,7 +318,7 @@ export const rewardQueryRouter = router({
     .input(rewardsAllInput)
     .query(async function ({ input, ctx }) {
       getAllRewardCounter.add(1)
-      const allApiRewards = await getAllApiRewards(ctx)
+      const allApiRewards = await getAllCachedApiRewards(ctx.serviceToken)
 
       if (!allApiRewards) {
         return []

From 9caa560b8dad2ef4492251c634d36d51ad747730 Mon Sep 17 00:00:00 2001
From: Tobias Johansson <tobias.johansson@scandichotels.com>
Date: Fri, 6 Sep 2024 10:56:58 +0200
Subject: [PATCH 19/44] feat(SW-360): Added checkbox component

---
 .../Form/Checkbox/checkbox.module.css         | 39 +++++++++++++++
 .../Form/Checkbox/checkbox.ts                 |  7 +++
 .../TempDesignSystem/Form/Checkbox/index.tsx  | 48 +++++++++++++++++++
 3 files changed, 94 insertions(+)
 create mode 100644 components/TempDesignSystem/Form/Checkbox/checkbox.module.css
 create mode 100644 components/TempDesignSystem/Form/Checkbox/checkbox.ts
 create mode 100644 components/TempDesignSystem/Form/Checkbox/index.tsx

diff --git a/components/TempDesignSystem/Form/Checkbox/checkbox.module.css b/components/TempDesignSystem/Form/Checkbox/checkbox.module.css
new file mode 100644
index 000000000..7f7c8f04f
--- /dev/null
+++ b/components/TempDesignSystem/Form/Checkbox/checkbox.module.css
@@ -0,0 +1,39 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  color: var(--text-color);
+}
+
+.container[data-selected] .checkbox {
+  border: none;
+  background: var(--UI-Input-Controls-Fill-Selected);
+}
+
+.checkboxContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.checkbox {
+  flex-grow: 1;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  border: 2px solid var(--UI-Input-Controls-Border-Normal);
+  border-radius: 4px;
+  transition: all 200ms;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 200ms;
+  forced-color-adjust: none;
+}
+
+.error {
+  align-items: center;
+  color: var(--Scandic-Red-60);
+  display: flex;
+  gap: var(--Spacing-x-half);
+  margin: var(--Spacing-x1) 0 0;
+}
diff --git a/components/TempDesignSystem/Form/Checkbox/checkbox.ts b/components/TempDesignSystem/Form/Checkbox/checkbox.ts
new file mode 100644
index 000000000..8588b7401
--- /dev/null
+++ b/components/TempDesignSystem/Form/Checkbox/checkbox.ts
@@ -0,0 +1,7 @@
+import { RegisterOptions } from "react-hook-form"
+
+export interface CheckboxProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  name: string
+  registerOptions?: RegisterOptions
+}
diff --git a/components/TempDesignSystem/Form/Checkbox/index.tsx b/components/TempDesignSystem/Form/Checkbox/index.tsx
new file mode 100644
index 000000000..339dff676
--- /dev/null
+++ b/components/TempDesignSystem/Form/Checkbox/index.tsx
@@ -0,0 +1,48 @@
+import { Checkbox as AriaCheckbox } from "react-aria-components"
+import { useController, useFormContext } from "react-hook-form"
+
+import { InfoCircleIcon } from "@/components/Icons"
+import CheckIcon from "@/components/Icons/Check"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import { CheckboxProps } from "./checkbox"
+
+import styles from "./checkbox.module.css"
+
+export default function Checkbox({
+  name,
+  children,
+  registerOptions,
+}: React.PropsWithChildren<CheckboxProps>) {
+  const { control } = useFormContext()
+  const { field, fieldState } = useController({
+    control,
+    name,
+    rules: registerOptions,
+  })
+
+  return (
+    <AriaCheckbox
+      className={styles.container}
+      isSelected={field.value}
+      onChange={field.onChange}
+    >
+      {({ isSelected }) => (
+        <>
+          <div className={styles.checkboxContainer}>
+            <div className={styles.checkbox}>
+              {isSelected && <CheckIcon color="white" />}
+            </div>
+            {children}
+          </div>
+          {fieldState.error ? (
+            <Caption className={styles.error} fontOnly>
+              <InfoCircleIcon color="red" />
+              {fieldState.error.message}
+            </Caption>
+          ) : null}
+        </>
+      )}
+    </AriaCheckbox>
+  )
+}

From 943505909703b271e57ab8b1d82ee548b038cbca Mon Sep 17 00:00:00 2001
From: Tobias Johansson <tobias.johansson@scandichotels.com>
Date: Tue, 10 Sep 2024 10:33:34 +0200
Subject: [PATCH 20/44] feat(SW-360): Refactored NewPassword input

---
 components/Forms/Edit/Profile/index.tsx       |   1 +
 components/Forms/Edit/Profile/schema.ts       |  27 +---
 .../Form/NewPassword/index.tsx                | 126 +++++++++++-------
 .../Form/NewPassword/newPassword.module.css   |  78 +++++++++++
 .../Form/NewPassword/newPassword.ts           |  11 +-
 i18n/dictionaries/da.json                     |   1 +
 i18n/dictionaries/de.json                     |   1 +
 i18n/dictionaries/en.json                     |   1 +
 i18n/dictionaries/fi.json                     |   1 +
 i18n/dictionaries/no.json                     |   1 +
 i18n/dictionaries/sv.json                     |   1 +
 public/_static/img/icons/eye-show.svg         |   8 ++
 utils/passwordValidator.ts                    |  48 +++++++
 13 files changed, 222 insertions(+), 83 deletions(-)
 create mode 100644 public/_static/img/icons/eye-show.svg
 create mode 100644 utils/passwordValidator.ts

diff --git a/components/Forms/Edit/Profile/index.tsx b/components/Forms/Edit/Profile/index.tsx
index 33f93e0fd..89097ae31 100644
--- a/components/Forms/Edit/Profile/index.tsx
+++ b/components/Forms/Edit/Profile/index.tsx
@@ -69,6 +69,7 @@ export default function Form({ user }: EditFormProps) {
       retypeNewPassword: "",
     },
     mode: "all",
+    criteriaMode: "all",
     resolver: zodResolver(editProfileSchema),
     reValidateMode: "onChange",
   })
diff --git a/components/Forms/Edit/Profile/schema.ts b/components/Forms/Edit/Profile/schema.ts
index 7330214ff..bf4e374cc 100644
--- a/components/Forms/Edit/Profile/schema.ts
+++ b/components/Forms/Edit/Profile/schema.ts
@@ -1,6 +1,6 @@
 import { z } from "zod"
 
-import { Key } from "@/components/TempDesignSystem/Form/NewPassword/newPassword"
+import { passwordValidator } from "@/utils/passwordValidator"
 import { phoneValidator } from "@/utils/phoneValidator"
 
 const countryRequiredMsg = "Country is required"
@@ -26,7 +26,7 @@ export const editProfileSchema = z
     ),
 
     password: z.string().optional(),
-    newPassword: z.string().optional(),
+    newPassword: passwordValidator(),
     retypeNewPassword: z.string().optional(),
   })
   .superRefine((data, ctx) => {
@@ -55,29 +55,6 @@ export const editProfileSchema = z
       }
     }
 
-    if (data.newPassword) {
-      const msgs = []
-      if (data.newPassword.length < 10 || data.newPassword.length > 40) {
-        msgs.push(Key.CHAR_LENGTH)
-      }
-      if (!data.newPassword.match(/[A-Z]/g)) {
-        msgs.push(Key.UPPERCASE)
-      }
-      if (!data.newPassword.match(/[0-9]/g)) {
-        msgs.push(Key.NUM)
-      }
-      if (!data.newPassword.match(/[^A-Za-z0-9]/g)) {
-        msgs.push(Key.SPECIAL_CHAR)
-      }
-      if (msgs.length) {
-        ctx.addIssue({
-          code: "custom",
-          message: msgs.join(","),
-          path: ["newPassword"],
-        })
-      }
-    }
-
     if (data.newPassword && !data.retypeNewPassword) {
       ctx.addIssue({
         code: "custom",
diff --git a/components/TempDesignSystem/Form/NewPassword/index.tsx b/components/TempDesignSystem/Form/NewPassword/index.tsx
index 3c9950e1f..558247e04 100644
--- a/components/TempDesignSystem/Form/NewPassword/index.tsx
+++ b/components/TempDesignSystem/Form/NewPassword/index.tsx
@@ -1,33 +1,60 @@
 "use client"
+
 import { Text, TextField } from "react-aria-components"
 import { Controller, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { CheckIcon, CloseIcon } from "@/components/Icons"
-import Error from "@/components/TempDesignSystem/Form/ErrorMessage/Error"
 import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Image from "next/image"
+import { useState } from "react"
 
-import { type IconProps, Key, type NewPasswordProps } from "./newPassword"
+import { CheckIcon, CloseIcon, InfoCircleIcon } from "@/components/Icons"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import {
+  PasswordValidatorKey,
+  passwordValidators,
+} from "@/utils/passwordValidator"
+
+import Button from "../../Button"
+import { IconProps, type NewPasswordProps } from "./newPassword"
 
 import styles from "./newPassword.module.css"
 
 export default function NewPassword({
+  name = "newPassword",
   "aria-label": ariaLabel,
   disabled = false,
   placeholder = "",
   registerOptions = {},
+  label,
 }: NewPasswordProps) {
   const { control } = useFormContext()
-  const { formatMessage } = useIntl()
+  const intl = useIntl()
+  const [isPasswordVisible, setPasswordVisible] = useState(false)
+
+  function getErrorMessage(key: PasswordValidatorKey) {
+    switch (key) {
+      case "length":
+        return `10 ${intl.formatMessage({ id: "to" })} 40 ${intl.formatMessage({ id: "characters" })}`
+      case "hasUppercase":
+        return `1 ${intl.formatMessage({ id: "uppercase letter" })}`
+      case "hasLowercase":
+        return `1 ${intl.formatMessage({ id: "lowercase letter" })}`
+      case "hasNumber":
+        return `1 ${intl.formatMessage({ id: "number" })}`
+      case "hasSpecialChar":
+        return `1 ${intl.formatMessage({ id: "special character" })}`
+    }
+  }
+
   return (
     <Controller
       disabled={disabled}
       control={control}
-      name="newPassword"
+      name={name}
       rules={registerOptions}
-      render={({ field, fieldState }) => {
-        const messages = (fieldState.error?.message?.split(",") ?? []) as Key[]
+      render={({ field, fieldState, formState }) => {
+        const errors = Object.values(formState.errors[name]?.types ?? []).flat()
         return (
           <TextField
             aria-label={ariaLabel}
@@ -39,51 +66,52 @@ export default function NewPassword({
             onChange={field.onChange}
             validationBehavior="aria"
             value={field.value}
-            type="password"
+            type={isPasswordVisible ? "text" : "password"}
           >
-            <AriaInputWithLabel
-              {...field}
-              aria-labelledby={field.name}
-              id={field.name}
-              label={formatMessage({ id: "New password" })}
-              placeholder={placeholder}
-              type="password"
-            />
+            <div className={styles.inputWrapper}>
+              <AriaInputWithLabel
+                {...field}
+                aria-labelledby={field.name}
+                id={field.name}
+                label={intl.formatMessage({ id: "New password" })}
+                placeholder={placeholder}
+                type={isPasswordVisible ? "text" : "password"}
+              />
+              <Button
+                className={styles.eyeIcon}
+                type="button"
+                variant="icon"
+                size="small"
+                intent="tertiary"
+                onClick={() => setPasswordVisible(!isPasswordVisible)}
+              >
+                <Image
+                  src={`/_static/img/icons/${isPasswordVisible ? "eye-icon" : "eye-show"}.svg`}
+                  alt="eye"
+                  width={24}
+                  height={24}
+                />
+              </Button>
+            </div>
             {field.value ? (
               <div className={styles.errors}>
-                <Caption asChild color="black">
-                  <Text className={styles.helpText} slot="description">
-                    <Icon matcher={Key.CHAR_LENGTH} messages={messages} />
-                    10 {formatMessage({ id: "to" })} 40{" "}
-                    {formatMessage({ id: "characters" })}
-                  </Text>
-                </Caption>
-                <Caption asChild color="black">
-                  <Text className={styles.helpText} slot="description">
-                    <Icon matcher={Key.UPPERCASE} messages={messages} />1{" "}
-                    {formatMessage({ id: "uppercase letter" })}
-                  </Text>
-                </Caption>
-                <Caption asChild color="black">
-                  <Text className={styles.helpText} slot="description">
-                    <Icon matcher={Key.NUM} messages={messages} />1{" "}
-                    {formatMessage({ id: "number" })}
-                  </Text>
-                </Caption>
-                <Caption asChild color="black">
-                  <Text className={styles.helpText} slot="description">
-                    <Icon matcher={Key.SPECIAL_CHAR} messages={messages} />1{" "}
-                    {formatMessage({ id: "special character" })}
-                  </Text>
-                </Caption>
+                {Object.entries(passwordValidators).map(
+                  ([key, { message }]) => (
+                    <Caption asChild color="black" key={key}>
+                      <Text className={styles.helpText} slot="description">
+                        <Icon errorMessage={message} errors={errors} />
+                        {getErrorMessage(key as PasswordValidatorKey)}
+                      </Text>
+                    </Caption>
+                  )
+                )}
               </div>
             ) : null}
             {!field.value && fieldState.error ? (
-              <Error>
-                <Text className={styles.helpText} slot="description">
-                  {fieldState.error.message}
-                </Text>
-              </Error>
+              <Caption className={styles.error} fontOnly>
+                <InfoCircleIcon color="red" />
+                {fieldState.error.message}
+              </Caption>
             ) : null}
           </TextField>
         )
@@ -92,8 +120,8 @@ export default function NewPassword({
   )
 }
 
-function Icon({ matcher, messages }: IconProps) {
-  return messages.includes(matcher) ? (
+function Icon({ errorMessage, errors }: IconProps) {
+  return errors.includes(errorMessage) ? (
     <CloseIcon color="red" height={20} width={20} />
   ) : (
     <CheckIcon color="green" height={20} width={20} />
diff --git a/components/TempDesignSystem/Form/NewPassword/newPassword.module.css b/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
index 7b0c4509f..7d57c6850 100644
--- a/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
+++ b/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
@@ -1,12 +1,90 @@
+.container {
+  align-content: center;
+  background-color: var(--Main-Grey-White);
+  border-color: var(--Scandic-Beige-40);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--Corner-radius-Medium);
+  display: grid;
+  height: 60px;
+  padding: var(--Spacing-x1) var(--Spacing-x2);
+  transition: border-color 200ms ease;
+  position: relative;
+}
+
+.container:has(.input:active, .input:focus) {
+  border-color: var(--Scandic-Blue-90);
+}
+
+.container:has(.input:disabled) {
+  background-color: var(--Main-Grey-10);
+  border: none;
+  color: var(--Main-Grey-40);
+}
+
+.container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
+  border-color: var(--Scandic-Red-60);
+}
+
+.input {
+  background: none;
+  border: none;
+  color: var(--Main-Grey-100);
+  height: 18px;
+  margin: 0;
+  order: 2;
+  overflow: visible;
+  padding: 0;
+}
+
+.input:not(:active, :focus):placeholder-shown {
+  height: 0px;
+  transition: height 150ms ease;
+}
+
+.input:focus,
+.input:focus:placeholder-shown,
+.input:active,
+.input:active:placeholder-shown {
+  height: 18px;
+  transition: height 150ms ease;
+  outline: none;
+}
+
+.input:disabled {
+  color: var(--Main-Grey-40);
+}
+
 .helpText {
   align-items: flex-start;
   display: flex;
   gap: var(--Spacing-x-half);
 }
 
+.error {
+  align-items: center;
+  color: var(--Scandic-Red-60);
+  display: flex;
+  gap: var(--Spacing-x-half);
+  margin: var(--Spacing-x1) 0 0;
+}
+
 .errors {
   display: flex;
   flex-wrap: wrap;
   gap: var(--Spacing-x-one-and-half) var(--Spacing-x1);
   padding-top: var(--Spacing-x1);
 }
+
+.eyeIcon {
+  position: absolute;
+  right: var(--Spacing-x2);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 24px;
+}
+
+.inputWrapper {
+  position: relative;
+}
diff --git a/components/TempDesignSystem/Form/NewPassword/newPassword.ts b/components/TempDesignSystem/Form/NewPassword/newPassword.ts
index d9d44a20b..e6835cb58 100644
--- a/components/TempDesignSystem/Form/NewPassword/newPassword.ts
+++ b/components/TempDesignSystem/Form/NewPassword/newPassword.ts
@@ -1,12 +1,5 @@
 import type { RegisterOptions } from "react-hook-form"
 
-export enum Key {
-  CHAR_LENGTH = "CHAR_LENGTH",
-  NUM = "NUM",
-  SPECIAL_CHAR = "SPECIAL_CHAR",
-  UPPERCASE = "UPPERCASE",
-}
-
 export interface NewPasswordProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string
@@ -14,6 +7,6 @@ export interface NewPasswordProps
 }
 
 export interface IconProps {
-  matcher: Key
-  messages: Key[]
+  errorMessage: string
+  errors: string[]
 }
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index 76237d5a5..57d493bf9 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -138,6 +138,7 @@
   "Log in here": "Log ind her",
   "Log in/Join": "Log på/Tilmeld dig",
   "Log out": "Log ud",
+  "lowercase letter": "lille bogstav",
   "Main menu": "Hovedmenu",
   "Manage preferences": "Administrer præferencer",
   "Map": "Kort",
diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json
index 742890d7c..ffb0f018b 100644
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -138,6 +138,7 @@
   "Log in here": "Hier einloggen",
   "Log in/Join": "Log in/Anmelden",
   "Log out": "Ausloggen",
+  "lowercase letter": "Kleinbuchstabe",
   "Main menu": "Hauptmenü",
   "Manage preferences": "Verwalten von Voreinstellungen",
   "Map": "Karte",
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index fa28c7399..fd989d49d 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -138,6 +138,7 @@
   "Log in here": "Log in here",
   "Log in/Join": "Log in/Join",
   "Log out": "Log out",
+  "lowercase letter": "lowercase letter",
   "Main menu": "Main menu",
   "Manage preferences": "Manage preferences",
   "Map": "Map",
diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json
index ec0b1ee0c..716a58765 100644
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -138,6 +138,7 @@
   "Log in here": "Kirjaudu sisään",
   "Log in/Join": "Kirjaudu sisään/Liittyä",
   "Log out": "Kirjaudu ulos",
+  "lowercase letter": "pien kirjain",
   "Main menu": "Päävalikko",
   "Manage preferences": "Asetusten hallinta",
   "Map": "Kartta",
diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json
index 4a7ab2908..d422258a6 100644
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -137,6 +137,7 @@
   "Log in here": "Logg inn her",
   "Log in/Join": "Logg på/Bli med",
   "Log out": "Logg ut",
+  "lowercase letter": "liten bokstav",
   "Main menu": "Hovedmeny",
   "Manage preferences": "Administrer preferanser",
   "Map": "Kart",
diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json
index 28c7a9889..51543e59c 100644
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -138,6 +138,7 @@
   "Log in here": "Logga in här",
   "Log in/Join": "Logga in/Gå med",
   "Log out": "Logga ut",
+  "lowercase letter": "liten bokstav",
   "Main menu": "Huvudmeny",
   "Manage preferences": "Hantera inställningar",
   "Map": "Karta",
diff --git a/public/_static/img/icons/eye-show.svg b/public/_static/img/icons/eye-show.svg
new file mode 100644
index 000000000..f14b33977
--- /dev/null
+++ b/public/_static/img/icons/eye-show.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_348_1004" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_348_1004)">
+<path d="M12.0001 15.85C13.2084 15.85 14.2355 15.4271 15.0813 14.5813C15.9272 13.7354 16.3501 12.7083 16.3501 11.5C16.3501 10.2917 15.9272 9.2646 15.0813 8.41876C14.2355 7.57293 13.2084 7.15001 12.0001 7.15001C10.7918 7.15001 9.76468 7.57293 8.91885 8.41876C8.07302 9.2646 7.6501 10.2917 7.6501 11.5C7.6501 12.7083 8.07302 13.7354 8.91885 14.5813C9.76468 15.4271 10.7918 15.85 12.0001 15.85ZM12.003 14.15C11.2677 14.15 10.6418 13.8927 10.1251 13.378C9.60843 12.8632 9.3501 12.2382 9.3501 11.503C9.3501 10.7677 9.60745 10.1417 10.1221 9.62501C10.6369 9.10835 11.2619 8.85001 11.9971 8.85001C12.7324 8.85001 13.3584 9.10736 13.8751 9.62206C14.3918 10.1368 14.6501 10.7618 14.6501 11.4971C14.6501 12.2324 14.3927 12.8583 13.878 13.375C13.3633 13.8917 12.7383 14.15 12.003 14.15ZM12.002 18.8C9.82572 18.8 7.83968 18.2125 6.04385 17.0375C4.24801 15.8625 2.8251 14.3167 1.7751 12.4C1.69176 12.2583 1.63135 12.1124 1.59385 11.9622C1.55635 11.812 1.5376 11.6578 1.5376 11.4997C1.5376 11.3416 1.55635 11.1875 1.59385 11.0375C1.63135 10.8875 1.69176 10.7417 1.7751 10.6C2.8251 8.68335 4.24739 7.13751 6.04197 5.96251C7.83657 4.78751 9.82199 4.20001 11.9982 4.20001C14.1745 4.20001 16.1605 4.78751 17.9563 5.96251C19.7522 7.13751 21.1751 8.68335 22.2251 10.6C22.3084 10.7417 22.3688 10.8876 22.4063 11.0378C22.4438 11.1881 22.4626 11.3422 22.4626 11.5003C22.4626 11.6585 22.4438 11.8125 22.4063 11.9625C22.3688 12.1125 22.3084 12.2583 22.2251 12.4C21.1751 14.3167 19.7528 15.8625 17.9582 17.0375C16.1636 18.2125 14.1782 18.8 12.002 18.8ZM12 16.925C13.8584 16.925 15.5647 16.4375 17.1188 15.4625C18.673 14.4875 19.8584 13.1667 20.6751 11.5C19.8584 9.83335 18.673 8.51251 17.1189 7.53751C15.5648 6.56251 13.8585 6.07501 12.0001 6.07501C10.1418 6.07501 8.43551 6.56251 6.88135 7.53751C5.32718 8.51251 4.14176 9.83335 3.3251 11.5C4.14176 13.1667 5.32716 14.4875 6.8813 15.4625C8.43541 16.4375 10.1417 16.925 12 16.925Z" fill="#A8A4A2"/>
+</g>
+</svg>
diff --git a/utils/passwordValidator.ts b/utils/passwordValidator.ts
new file mode 100644
index 000000000..8a8d74778
--- /dev/null
+++ b/utils/passwordValidator.ts
@@ -0,0 +1,48 @@
+import { z } from "zod"
+
+export const passwordValidators = {
+  length: {
+    matcher: (password: string) =>
+      password.length >= 10 && password.length <= 40,
+    message: "10 to 40 characters",
+  },
+  hasUppercase: {
+    matcher: (password: string) => /[A-Z]/.test(password),
+    message: "1 uppercase letter",
+  },
+  hasLowercase: {
+    matcher: (password: string) => /[a-z]/.test(password),
+    message: "1 lowercase letter",
+  },
+  hasNumber: {
+    matcher: (password: string) => /[0-9]/.test(password),
+    message: "1 number",
+  },
+  hasSpecialChar: {
+    matcher: (password: string) =>
+      /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/.test(password),
+    message: "1 special character",
+  },
+}
+
+export type PasswordValidatorKey = keyof typeof passwordValidators
+
+export const passwordValidator = (msg = "Required field") =>
+  z
+    .string()
+    .min(1, msg)
+    .refine(passwordValidators.length.matcher, {
+      message: passwordValidators.length.message,
+    })
+    .refine(passwordValidators.hasUppercase.matcher, {
+      message: passwordValidators.hasUppercase.message,
+    })
+    .refine(passwordValidators.hasLowercase.matcher, {
+      message: passwordValidators.hasLowercase.message,
+    })
+    .refine(passwordValidators.hasNumber.matcher, {
+      message: passwordValidators.hasNumber.message,
+    })
+    .refine(passwordValidators.hasSpecialChar.matcher, {
+      message: passwordValidators.hasSpecialChar.message,
+    })

From da95c32a0dbbb85b56576a177ad2efb72c078fd9 Mon Sep 17 00:00:00 2001
From: Tobias Johansson <tobias.johansson@scandichotels.com>
Date: Tue, 10 Sep 2024 16:52:12 +0200
Subject: [PATCH 21/44] fix(SW-360): Solved issue with date field not using
 placeholder values

---
 components/TempDesignSystem/Form/Date/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/TempDesignSystem/Form/Date/index.tsx b/components/TempDesignSystem/Form/Date/index.tsx
index 25caf72f3..7b9dbc083 100644
--- a/components/TempDesignSystem/Form/Date/index.tsx
+++ b/components/TempDesignSystem/Form/Date/index.tsx
@@ -60,7 +60,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
      * date, but we can't check isNan since
      * we recieve the date as "1999-01-01"
      */
-    dateValue = parseDate(d)
+    dateValue = d ? parseDate(d) : null
   } catch (error) {
     console.error(error)
   }
@@ -100,7 +100,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       placeholder="DD"
                       required
                       tabIndex={3}
-                      value={segment.value}
+                      value={segment.isPlaceholder ? undefined : segment.value}
                     />
                   </div>
                 )
@@ -116,7 +116,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       placeholder="MM"
                       required
                       tabIndex={2}
-                      value={segment.value}
+                      value={segment.isPlaceholder ? undefined : segment.value}
                     />
                   </div>
                 )
@@ -132,7 +132,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       placeholder="YYYY"
                       required
                       tabIndex={1}
-                      value={segment.value}
+                      value={segment.isPlaceholder ? undefined : segment.value}
                     />
                   </div>
                 )

From c69e4b4b297f23cd7aaf589f1fd530f293ce323d Mon Sep 17 00:00:00 2001
From: Tobias Johansson <tobias.johansson@scandichotels.com>
Date: Wed, 11 Sep 2024 16:23:54 +0200
Subject: [PATCH 22/44] fix(SW-360): Changed how DateSelect sets date, because
 it was working properly

---
 .../TempDesignSystem/Form/Date/index.tsx      | 41 ++++++++++++++-----
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/components/TempDesignSystem/Form/Date/index.tsx b/components/TempDesignSystem/Form/Date/index.tsx
index 7b9dbc083..4fe680bf6 100644
--- a/components/TempDesignSystem/Form/Date/index.tsx
+++ b/components/TempDesignSystem/Form/Date/index.tsx
@@ -1,5 +1,6 @@
 "use client"
 import { parseDate } from "@internationalized/date"
+import { useState } from "react"
 import { DateInput, DatePicker, Group } from "react-aria-components"
 import { useController, useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
@@ -18,7 +19,7 @@ import type { Key } from "react-aria-components"
 import type { DateProps } from "./date"
 
 export default function DateSelect({ name, registerOptions = {} }: DateProps) {
-  const { formatMessage } = useIntl()
+  const intl = useIntl()
   const d = useWatch({ name })
   const { control, setValue } = useFormContext()
   const { field } = useController({
@@ -26,6 +27,17 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
     name,
     rules: registerOptions,
   })
+
+  const [dateSegments, setDateSegment] = useState<{
+    year: number | null
+    month: number | null
+    date: number | null
+  }>({
+    year: null,
+    month: null,
+    date: null,
+  })
+
   const currentYear = new Date().getFullYear()
   const months = rangeArray(1, 12).map((month) => ({
     value: month,
@@ -41,17 +53,25 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
      * must subtract by 1 to get the selected month
      */
     return (select: Key) => {
-      if (selector === DateName.month) {
-        select = Number(select) - 1
+      const value =
+        selector === DateName.month ? Number(select) - 1 : Number(select)
+      const newSegments = { ...dateSegments, [selector]: value }
+
+      if (Object.values(newSegments).every((val) => val !== null)) {
+        const newDate = dt(new Date())
+          .set("year", newSegments.year!)
+          .set("month", newSegments.month!)
+          .set("day", newSegments.date!)
+
+        setValue(name, newDate.format("YYYY-MM-DD"))
       }
-      const newDate = dt(d).set(selector, Number(select))
-      setValue(name, newDate.format("YYYY-MM-DD"))
+      setDateSegment(newSegments)
     }
   }
 
-  const dayLabel = formatMessage({ id: "Day" })
-  const monthLabel = formatMessage({ id: "Month" })
-  const yearLabel = formatMessage({ id: "Year" })
+  const dayLabel = intl.formatMessage({ id: "Day" })
+  const monthLabel = intl.formatMessage({ id: "Month" })
+  const yearLabel = intl.formatMessage({ id: "Year" })
 
   let dateValue = null
   try {
@@ -60,15 +80,14 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
      * date, but we can't check isNan since
      * we recieve the date as "1999-01-01"
      */
-    dateValue = d ? parseDate(d) : null
+    dateValue = dt(d).isValid() ? parseDate(d) : null
   } catch (error) {
     console.error(error)
   }
 
   return (
     <DatePicker
-      aria-label={formatMessage({ id: "Select date of birth" })}
-      granularity="day"
+      aria-label={intl.formatMessage({ id: "Select date of birth" })}
       isRequired={!!registerOptions.required}
       name={name}
       ref={field.ref}

From e08685707262bbf8757a9800428d9b3f6a1bab64 Mon Sep 17 00:00:00 2001
From: Tobias Johansson <tobias.johansson@scandichotels.com>
Date: Wed, 11 Sep 2024 17:10:57 +0200
Subject: [PATCH 23/44] feat(SW-360): Added register form with server action

---
 actions/registerUser.ts                   |  82 ++++++++++++
 components/Forms/Register/form.module.css |  53 ++++++++
 components/Forms/Register/index.tsx       | 156 ++++++++++++++++++++++
 components/Forms/Register/schema.ts       |  35 +++++
 i18n/dictionaries/da.json                 |   5 +
 i18n/dictionaries/de.json                 |   6 +
 i18n/dictionaries/en.json                 |   4 +
 i18n/dictionaries/fi.json                 |   6 +-
 i18n/dictionaries/no.json                 |   4 +
 i18n/dictionaries/sv.json                 |   4 +
 server/trpc.ts                            |  28 ++++
 11 files changed, 382 insertions(+), 1 deletion(-)
 create mode 100644 actions/registerUser.ts
 create mode 100644 components/Forms/Register/form.module.css
 create mode 100644 components/Forms/Register/index.tsx
 create mode 100644 components/Forms/Register/schema.ts

diff --git a/actions/registerUser.ts b/actions/registerUser.ts
new file mode 100644
index 000000000..3bca2da81
--- /dev/null
+++ b/actions/registerUser.ts
@@ -0,0 +1,82 @@
+"use server"
+
+import { z } from "zod"
+
+import * as api from "@/lib/api"
+import { profileServiceServerActionProcedure } from "@/server/trpc"
+
+import { registerSchema } from "@/components/Forms/Register/schema"
+import { passwordValidator } from "@/utils/passwordValidator"
+import { phoneValidator } from "@/utils/phoneValidator"
+
+const registerUserPayload = z.object({
+  language: z.string(),
+  firstName: z.string(),
+  lastName: z.string(),
+  email: z.string(),
+  phoneNumber: phoneValidator("Phone is required"),
+  dateOfBirth: z.string(),
+  address: z.object({
+    city: z.string().default(""),
+    country: z.string().default(""),
+    countryCode: z.string().default(""),
+    zipCode: z.string().default(""),
+    streetAddress: z.string().default(""),
+  }),
+  password: passwordValidator("Password is required"),
+})
+
+export const registerUser = profileServiceServerActionProcedure
+  .input(registerSchema)
+  .mutation(async function ({ ctx, input }) {
+    const payload = {
+      ...input,
+      language: ctx.lang,
+      phoneNumber: input.phoneNumber.replace(/\s+/g, ""),
+    }
+
+    const parsedPayload = registerUserPayload.safeParse(payload)
+    if (!parsedPayload.success) {
+      console.error(
+        "registerUser payload validation error",
+        JSON.stringify({
+          query: input,
+          error: parsedPayload.error,
+        })
+      )
+
+      return false
+    }
+
+    try {
+      const apiResponse = await api.post(api.endpoints.v1.profile, {
+        body: parsedPayload.data,
+        headers: {
+          Authorization: `Bearer ${ctx.serviceToken}`,
+        },
+      })
+
+      if (!apiResponse.ok) {
+        const text = apiResponse.text()
+        console.error(
+          "registerUser api error",
+          JSON.stringify({
+            query: input,
+            error: {
+              status: apiResponse.status,
+              statusText: apiResponse.statusText,
+              error: text,
+            },
+          })
+        )
+        return false
+      }
+
+      const json = await apiResponse.json()
+      console.log("json", json)
+
+      return true
+    } catch (error) {
+      return false
+    }
+  })
diff --git a/components/Forms/Register/form.module.css b/components/Forms/Register/form.module.css
new file mode 100644
index 000000000..59358dc28
--- /dev/null
+++ b/components/Forms/Register/form.module.css
@@ -0,0 +1,53 @@
+.container {
+  display: grid;
+  gap: var(--Spacing-x3);
+}
+
+.title {
+  grid-area: title;
+}
+
+.form {
+  display: grid;
+  gap: var(--Spacing-x5);
+  grid-area: form;
+}
+
+.btnContainer {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--Spacing-x1);
+  grid-area: buttons;
+}
+
+@media screen and (min-width: 768px) {
+  .form {
+    grid-template-columns: 1fr;
+  }
+
+  .btnContainer {
+    align-self: center;
+    flex-direction: row;
+    gap: var(--Spacing-x2);
+    justify-self: flex-end;
+  }
+}
+
+.password,
+.user,
+.terms {
+  align-self: flex-start;
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
+.container {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
+@media (min-width: 768px) {
+  .divider {
+    display: none;
+  }
+}
diff --git a/components/Forms/Register/index.tsx b/components/Forms/Register/index.tsx
new file mode 100644
index 000000000..9494e59a7
--- /dev/null
+++ b/components/Forms/Register/index.tsx
@@ -0,0 +1,156 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { FormProvider, useForm } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { registerUser } from "@/actions/registerUser"
+import Button from "@/components/TempDesignSystem/Button"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
+import CountrySelect from "@/components/TempDesignSystem/Form/Country"
+import DateSelect from "@/components/TempDesignSystem/Form/Date"
+import Input from "@/components/TempDesignSystem/Form/Input"
+import NewPassword from "@/components/TempDesignSystem/Form/NewPassword"
+import Phone from "@/components/TempDesignSystem/Form/Phone"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import { toast } from "@/components/TempDesignSystem/Toasts"
+
+import { RegisterSchema, registerSchema } from "./schema"
+
+import styles from "./form.module.css"
+
+export default function Form() {
+  const intl = useIntl()
+  const methods = useForm<RegisterSchema>({
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      email: "",
+      phoneNumber: "",
+      dateOfBirth: "",
+      address: {
+        countryCode: "",
+        zipCode: "",
+      },
+      password: "",
+      termsAccepted: false,
+    },
+    mode: "all",
+    criteriaMode: "all",
+    resolver: zodResolver(registerSchema),
+    reValidateMode: "onChange",
+  })
+  const country = intl.formatMessage({ id: "Country" })
+  const email = `${intl.formatMessage({ id: "Email" })} ${intl.formatMessage({ id: "Address" }).toLowerCase()}`
+  const phoneNumber = intl.formatMessage({ id: "Phone number" })
+  const zipCode = intl.formatMessage({ id: "Zip code" })
+
+  async function handleSubmit(data: RegisterSchema) {
+    console.log("submit", data)
+    const isSuccessResponse = await registerUser(data)
+    if (!isSuccessResponse) {
+      toast.error("Something went wrong!")
+    } else {
+      // TODO: Toast should be removed and we should show a different page
+      toast.success("Form submitted successfully")
+      // should we navigate to sub route like /signup/success ?
+      // router.push("/")
+
+      methods.reset()
+    }
+  }
+
+  return (
+    <section className={styles.container}>
+      <FormProvider {...methods}>
+        <form
+          /**
+           * Ignoring since ts doesn't recognize that tRPC
+           * parses FormData before reaching the route
+           * @ts-ignore */
+          action={registerUser}
+          className={styles.form}
+          id="register"
+          onSubmit={methods.handleSubmit(handleSubmit)}
+        >
+          <section className={styles.user}>
+            <div className={styles.container}>
+              <Input
+                label={"firstName"}
+                name="firstName"
+                registerOptions={{ required: true }}
+              />
+              <Input
+                label={"lastName"}
+                name="lastName"
+                registerOptions={{ required: true }}
+              />
+            </div>
+            <DateSelect
+              name="dateOfBirth"
+              registerOptions={{ required: true }}
+            />
+            <div className={styles.container}>
+              <Input
+                label={zipCode}
+                name="address.zipCode"
+                registerOptions={{ required: true }}
+              />
+              <CountrySelect
+                label={country}
+                name="address.countryCode"
+                registerOptions={{ required: true }}
+              />
+            </div>
+            <Input
+              label={email}
+              name="email"
+              registerOptions={{ required: true }}
+              type="email"
+            />
+            <Phone label={phoneNumber} name="phoneNumber" />
+          </section>
+          <Divider className={styles.divider} color="subtle" />
+          <section className={styles.password}>
+            <header>
+              <Body textTransform="bold">
+                {intl.formatMessage({ id: "Password" })}
+              </Body>
+            </header>
+            <NewPassword
+              name="password"
+              placeholder="Password"
+              label={intl.formatMessage({ id: "Password" })}
+            />
+          </section>
+          <section className={styles.terms}>
+            <header>
+              <Body textTransform="bold">
+                {intl.formatMessage({ id: "Terms and conditions" })}
+              </Body>
+            </header>
+            <Checkbox name="termsAccepted" registerOptions={{ required: true }}>
+              <Body>
+                {intl.formatMessage({
+                  id: "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with",
+                })}{" "}
+                <Link variant="underscored" color="peach80" href="/privacy">
+                  {intl.formatMessage({ id: "Scandic's Privacy Policy." })}
+                </Link>
+              </Body>
+            </Checkbox>
+          </section>
+          <Button
+            type="submit"
+            intent="primary"
+            disabled={methods.formState.isSubmitting}
+          >
+            {intl.formatMessage({ id: "Sign up to Scandic Friends" })}
+          </Button>
+        </form>
+      </FormProvider>
+    </section>
+  )
+}
diff --git a/components/Forms/Register/schema.ts b/components/Forms/Register/schema.ts
new file mode 100644
index 000000000..982641d2c
--- /dev/null
+++ b/components/Forms/Register/schema.ts
@@ -0,0 +1,35 @@
+import { z } from "zod"
+
+import { passwordValidator } from "@/utils/passwordValidator"
+import { phoneValidator } from "@/utils/phoneValidator"
+
+export const registerSchema = z.object({
+  firstName: z
+    .string()
+    .max(250)
+    .refine((value) => value.trim().length > 0, {
+      message: "First name is required",
+    }),
+  lastName: z
+    .string()
+    .max(250)
+    .refine((value) => value.trim().length > 0, {
+      message: "Last name is required",
+    }),
+  email: z.string().max(250).email(),
+  phoneNumber: phoneValidator(
+    "Phone is required",
+    "Please enter a valid phone number"
+  ),
+  dateOfBirth: z.string().min(1),
+  address: z.object({
+    countryCode: z.string(),
+    zipCode: z.string().min(1),
+  }),
+  password: passwordValidator("Password is required"),
+  termsAccepted: z.boolean().refine((value) => value === true, {
+    message: "You must accept the terms and conditions",
+  }),
+})
+
+export type RegisterSchema = z.infer<typeof registerSchema>
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index 57d493bf9..3f30b3f79 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -193,6 +193,7 @@
   "Phone number": "Telefonnummer",
   "Please enter a valid phone number": "Indtast venligst et gyldigt telefonnummer",
   "Points": "Point",
+  "points": "Point",
   "Points being calculated": "Point udregnes",
   "Points earned prior to May 1, 2021": "Point optjent inden 1. maj 2021",
   "Points may take up to 10 days to be displayed.": "Det kan tage op til 10 dage at få vist point.",
@@ -222,6 +223,7 @@
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
   "Search": "Søge",
+  "Scandic's Privacy Policy.": "Scandic's integritetspolicy.",
   "See all photos": "Se alle billeder",
   "See hotel details": "Se hoteloplysninger",
   "See room details": "Se værelsesdetaljer",
@@ -241,6 +243,7 @@
   "Show map": "Vis kort",
   "Show more": "Vis mere",
   "Sign up bonus": "Velkomstbonus",
+  "Sign up to Scandic Friends": "Tilmeld dig Scandic Friends",
   "Skip to main content": "Spring over og gå til hovedindhold",
   "Something went wrong and we couldn't add your card. Please try again later.": "Noget gik galt, og vi kunne ikke tilføje dit kort. Prøv venligst igen senere.",
   "Something went wrong and we couldn't remove your card. Please try again later.": "Noget gik galt, og vi kunne ikke fjerne dit kort. Prøv venligst igen senere.",
@@ -252,6 +255,7 @@
   "Summary": "Opsummering",
   "TUI Points": "TUI Points",
   "Tell us what information and updates you'd like to receive, and how, by clicking the link below.": "Fortæl os, hvilke oplysninger og opdateringer du gerne vil modtage, og hvordan, ved at klikke på linket nedenfor.",
+  "Terms and conditions": "Vilkår og betingelser",
   "Thank you": "Tak",
   "Theatre": "Teater",
   "There are no transactions to display": "Der er ingen transaktioner at vise",
@@ -286,6 +290,7 @@
   "Which room class suits you the best?": "Hvilken rumklasse passer bedst til dig",
   "Year": "År",
   "Yes, discard changes": "Ja, kasser ændringer",
+  "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with": "Ja, jeg accepterer vilkårene for Scandic Friends og forstår, at Scandic vil behandle mine personlige oplysninger i henhold til",
   "Yes, remove my card": "Ja, fjern mit kort",
   "You can always change your mind later and add breakfast at the hotel.": "Du kan altid ombestemme dig senere og tilføje morgenmad på hotellet.",
   "You canceled adding a new credit card.": "Du har annulleret tilføjelsen af et nyt kreditkort.",
diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json
index ffb0f018b..6dbe84117 100644
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -193,6 +193,7 @@
   "Phone number": "Telefonnummer",
   "Please enter a valid phone number": "Bitte geben Sie eine gültige Telefonnummer ein",
   "Points": "Punkte",
+  "points": "Punkte",
   "Points being calculated": "Punkte werden berechnet",
   "Points earned prior to May 1, 2021": "Zusammengeführte Punkte vor dem 1. Mai 2021",
   "Points may take up to 10 days to be displayed.": "Es kann bis zu 10 Tage dauern, bis Punkte angezeigt werden.",
@@ -222,6 +223,7 @@
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
   "Search": "Suchen",
+  "Scandic's Privacy Policy.": "Scandics Datenschutzrichtlinie.",
   "See all photos": "Alle Fotos ansehen",
   "See hotel details": "Hotelinformationen ansehen",
   "See room details": "Zimmerdetails ansehen",
@@ -241,6 +243,7 @@
   "Show map": "Karte anzeigen",
   "Show more": "Mehr anzeigen",
   "Sign up bonus": "Anmelde-Bonus",
+  "Sign up to Scandic Friends": "Treten Sie Scandic Friends bei",
   "Skip to main content": "Direkt zum Inhalt",
   "Something went wrong and we couldn't add your card. Please try again later.": "Ein Fehler ist aufgetreten und wir konnten Ihre Karte nicht hinzufügen. Bitte versuchen Sie es später erneut.",
   "Something went wrong and we couldn't remove your card. Please try again later.": "Ein Fehler ist aufgetreten und wir konnten Ihre Karte nicht entfernen. Bitte versuchen Sie es später noch einmal.",
@@ -252,6 +255,7 @@
   "Summary": "Zusammenfassung",
   "TUI Points": "TUI Points",
   "Tell us what information and updates you'd like to receive, and how, by clicking the link below.": "Teilen Sie uns mit, welche Informationen und Updates Sie wie erhalten möchten, indem Sie auf den unten stehenden Link klicken.",
+  "Terms and conditions": "Geschäftsbedingungen",
   "Thank you": "Danke",
   "Theatre": "Theater",
   "There are no transactions to display": "Es sind keine Transaktionen zum Anzeigen vorhanden",
@@ -286,6 +290,7 @@
   "Which room class suits you the best?": "Welche Zimmerklasse passt am besten zu Ihnen?",
   "Year": "Jahr",
   "Yes, discard changes": "Ja, Änderungen verwerfen",
+  "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with": "Ja, ich akzeptiere die Geschäftsbedingungen für Scandic Friends und erkenne an, dass Scandic meine persönlichen Daten in Übereinstimmung mit",
   "Yes, remove my card": "Ja, meine Karte entfernen",
   "You can always change your mind later and add breakfast at the hotel.": "Sie können es sich später jederzeit anders überlegen und das Frühstück im Hotel hinzufügen.",
   "You canceled adding a new credit card.": "Sie haben das Hinzufügen einer neuen Kreditkarte abgebrochen.",
@@ -327,3 +332,4 @@
   "{difference}{amount} {currency}": "{difference}{amount} {currency}",
   "{width} cm × {length} cm": "{width} cm × {length} cm"
 }
+
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index fd989d49d..16e62c357 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -221,6 +221,7 @@
   "Save": "Save",
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
+  "Scandic's Privacy Policy.": "Scandic's Privacy Policy.",
   "Search": "Search",
   "See all photos": "See all photos",
   "See hotel details": "See hotel details",
@@ -241,6 +242,7 @@
   "Show map": "Show map",
   "Show more": "Show more",
   "Sign up bonus": "Sign up bonus",
+  "Sign up to Scandic Friends": "Sign up to Scandic Friends",
   "Skip to main content": "Skip to main content",
   "Something went wrong and we couldn't add your card. Please try again later.": "Something went wrong and we couldn't add your card. Please try again later.",
   "Something went wrong and we couldn't remove your card. Please try again later.": "Something went wrong and we couldn't remove your card. Please try again later.",
@@ -252,6 +254,7 @@
   "Summary": "Summary",
   "TUI Points": "TUI Points",
   "Tell us what information and updates you'd like to receive, and how, by clicking the link below.": "Tell us what information and updates you'd like to receive, and how, by clicking the link below.",
+  "Terms and conditions": "Terms and conditions",
   "Thank you": "Thank you",
   "Theatre": "Theatre",
   "There are no transactions to display": "There are no transactions to display",
@@ -286,6 +289,7 @@
   "Which room class suits you the best?": "Which room class suits you the best?",
   "Year": "Year",
   "Yes, discard changes": "Yes, discard changes",
+  "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with": "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with",
   "Yes, remove my card": "Yes, remove my card",
   "You can always change your mind later and add breakfast at the hotel.": "You can always change your mind later and add breakfast at the hotel.",
   "You canceled adding a new credit card.": "You canceled adding a new credit card.",
diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json
index 716a58765..0d6e9e617 100644
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -193,6 +193,7 @@
   "Phone number": "Puhelinnumero",
   "Please enter a valid phone number": "Ole hyvä ja näppäile voimassaoleva puhelinnumero",
   "Points": "Pisteet",
+  "points": "pistettä",
   "Points being calculated": "Pisteitä lasketaan",
   "Points earned prior to May 1, 2021": "Pisteet, jotka ansaittu ennen 1.5.2021",
   "Points may take up to 10 days to be displayed.": "Pisteiden näyttäminen voi kestää jopa 10 päivää.",
@@ -223,6 +224,7 @@
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
   "Search": "Haku",
+  "Scandic's Privacy Policy.": "Scandicin tietosuojavalmioksi.",
   "See all photos": "Katso kaikki kuvat",
   "See hotel details": "Katso hotellin tiedot",
   "See room details": "Katso huoneen tiedot",
@@ -242,6 +244,7 @@
   "Show map": "Näytä kartta",
   "Show more": "Näytä lisää",
   "Sign up bonus": "Liittymisbonus",
+  "Sign up to Scandic Friends": "Liity Scandic Friends -jäseneksi",
   "Skip to main content": "Siirry pääsisältöön",
   "Something went wrong and we couldn't add your card. Please try again later.": "Jotain meni pieleen, emmekä voineet lisätä korttiasi. Yritä myöhemmin uudelleen.",
   "Something went wrong and we couldn't remove your card. Please try again later.": "Jotain meni pieleen, emmekä voineet poistaa korttiasi. Yritä myöhemmin uudelleen.",
@@ -253,6 +256,7 @@
   "Summary": "Yhteenveto",
   "TUI Points": "TUI Points",
   "Tell us what information and updates you'd like to receive, and how, by clicking the link below.": "Kerro meille, mitä tietoja ja päivityksiä haluat saada ja miten, napsauttamalla alla olevaa linkkiä.",
+  "Terms and conditions": "Käyttöehdot",
   "Thank you": "Kiitos",
   "Theatre": "Teatteri",
   "There are no transactions to display": "Näytettäviä tapahtumia ei ole",
@@ -287,6 +291,7 @@
   "Which room class suits you the best?": "Mikä huoneluokka sopii sinulle parhaiten?",
   "Year": "Vuosi",
   "Yes, discard changes": "Kyllä, hylkää muutokset",
+  "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with": "Kyllä, hyväksyn Scandic Friends -käyttöehdot ja ymmärrän, että Scandic käsittelee minun henkilötietoni asianmukaisesti",
   "Yes, remove my card": "Kyllä, poista korttini",
   "You can always change your mind later and add breakfast at the hotel.": "Voit aina muuttaa mieltäsi myöhemmin ja lisätä aamiaisen hotelliin.",
   "You canceled adding a new credit card.": "Peruutit uuden luottokortin lisäämisen.",
@@ -319,7 +324,6 @@
   "nights": "yötä",
   "number": "määrä",
   "or": "tai",
-  "points": "pistettä",
   "special character": "erikoishahmo",
   "spendable points expiring by": "{points} pistettä vanhenee {date} mennessä",
   "to": "to",
diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json
index d422258a6..a44ecc1e3 100644
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -221,6 +221,7 @@
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
   "Search": "Søk",
+  "Scandic's Privacy Policy.": "Scandics integritetspolicy.",
   "See all photos": "Se alle bilder",
   "See hotel details": "Se hotellinformasjon",
   "See room details": "Se detaljer om rommet",
@@ -240,6 +241,7 @@
   "Show map": "Vis kart",
   "Show more": "Vis mer",
   "Sign up bonus": "Velkomstbonus",
+  "Sign up to Scandic Friends": "Bli med i Scandic Friends",
   "Skip to main content": "Gå videre til hovedsiden",
   "Something went wrong and we couldn't add your card. Please try again later.": "Noe gikk galt, og vi kunne ikke legge til kortet ditt. Prøv igjen senere.",
   "Something went wrong and we couldn't remove your card. Please try again later.": "Noe gikk galt, og vi kunne ikke fjerne kortet ditt. Vennligst prøv igjen senere.",
@@ -251,6 +253,7 @@
   "Summary": "Sammendrag",
   "TUI Points": "TUI Points",
   "Tell us what information and updates you'd like to receive, and how, by clicking the link below.": "Fortell oss hvilken informasjon og hvilke oppdateringer du ønsker å motta, og hvordan, ved å klikke på lenken nedenfor.",
+  "Terms and conditions": "Vilkår og betingelser",
   "Thank you": "Takk",
   "Theatre": "Teater",
   "There are no transactions to display": "Det er ingen transaksjoner å vise",
@@ -285,6 +288,7 @@
   "Which room class suits you the best?": "Hvilken romklasse passer deg best?",
   "Year": "År",
   "Yes, discard changes": "Ja, forkast endringer",
+  "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with": "Ja, jeg aksepterer vilkårene for Scandic Friends og forstår at Scandic vil behandle mine personlige opplysninger i henhold til",
   "Yes, remove my card": "Ja, fjern kortet mitt",
   "You can always change your mind later and add breakfast at the hotel.": "Du kan alltid ombestemme deg senere og legge til frokost på hotellet.",
   "You canceled adding a new credit card.": "Du kansellerte å legge til et nytt kredittkort.",
diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json
index 51543e59c..5f72ef6f7 100644
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -222,6 +222,7 @@
   "Scandic Friends Mastercard": "Scandic Friends Mastercard",
   "Scandic Friends Point Shop": "Scandic Friends Point Shop",
   "Search": "Sök",
+  "Scandic's Privacy Policy.": "Scandics integritetspolicy.",
   "See all photos": "Se alla foton",
   "See hotel details": "Se hotellinformation",
   "See room details": "Se rumsdetaljer",
@@ -241,6 +242,7 @@
   "Show map": "Visa karta",
   "Show more": "Visa mer",
   "Sign up bonus": "Välkomstbonus",
+  "Sign up to Scandic Friends": "Bli medlem i Scandic Friends",
   "Skip to main content": "Fortsätt till huvudinnehåll",
   "Something went wrong and we couldn't add your card. Please try again later.": "Något gick fel och vi kunde inte lägga till ditt kort. Försök igen senare.",
   "Something went wrong and we couldn't remove your card. Please try again later.": "Något gick fel och vi kunde inte ta bort ditt kort. Försök igen senare.",
@@ -252,6 +254,7 @@
   "Summary": "Sammanfattning",
   "TUI Points": "TUI Points",
   "Tell us what information and updates you'd like to receive, and how, by clicking the link below.": "Berätta för oss vilken information och vilka uppdateringar du vill få och hur genom att klicka på länken nedan.",
+  "Terms and conditions": "Allmänna villkor",
   "Thank you": "Tack",
   "Theatre": "Teater",
   "There are no transactions to display": "Det finns inga transaktioner att visa",
@@ -286,6 +289,7 @@
   "Which room class suits you the best?": "Vilken rumsklass passar dig bäst?",
   "Year": "År",
   "Yes, discard changes": "Ja, ignorera ändringar",
+  "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with": "Ja, jag accepterar villkoren för Scandic Friends och förstår att Scandic kommer att bearbeta mina personliga uppgifter i enlighet med",
   "Yes, remove my card": "Ja, ta bort mitt kort",
   "You can always change your mind later and add breakfast at the hotel.": "Du kan alltid ändra dig senare och lägga till frukost på hotellet.",
   "You canceled adding a new credit card.": "Du avbröt att lägga till ett nytt kreditkort.",
diff --git a/server/trpc.ts b/server/trpc.ts
index dafd26690..1000d053c 100644
--- a/server/trpc.ts
+++ b/server/trpc.ts
@@ -140,6 +140,34 @@ export const serverActionProcedure = t.procedure.experimental_caller(
   })
 )
 
+export const hotelServiceServerActionProcedure = serverActionProcedure.use(
+  async (opts) => {
+    const { access_token } = await fetchServiceToken("hotel")
+    if (!access_token) {
+      throw internalServerError("Failed to obtain service token")
+    }
+    return opts.next({
+      ctx: {
+        serviceToken: access_token,
+      },
+    })
+  }
+)
+
+export const profileServiceServerActionProcedure = serverActionProcedure.use(
+  async (opts) => {
+    const { access_token } = await fetchServiceToken("profile")
+    if (!access_token) {
+      throw internalServerError("Failed to obtain service token")
+    }
+    return opts.next({
+      ctx: {
+        serviceToken: access_token,
+      },
+    })
+  }
+)
+
 export const protectedServerActionProcedure = serverActionProcedure.use(
   async (opts) => {
     const session = await opts.ctx.auth()

From c22fa9fa8c72ec8821934acc490c7f58e43dfe3c Mon Sep 17 00:00:00 2001
From: Tobias Johansson <tobias.johansson@scandichotels.com>
Date: Thu, 12 Sep 2024 16:05:22 +0200
Subject: [PATCH 24/44] fix(SW-360): Added test ids to form fields

---
 components/Forms/Register/index.tsx                 |  1 +
 components/TempDesignSystem/Form/Checkbox/index.tsx |  1 +
 components/TempDesignSystem/Form/Country/index.tsx  |  1 +
 components/TempDesignSystem/Form/Date/index.tsx     | 13 ++++++++++---
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/components/Forms/Register/index.tsx b/components/Forms/Register/index.tsx
index 9494e59a7..28d10a4f6 100644
--- a/components/Forms/Register/index.tsx
+++ b/components/Forms/Register/index.tsx
@@ -146,6 +146,7 @@ export default function Form() {
             type="submit"
             intent="primary"
             disabled={methods.formState.isSubmitting}
+            data-testid="submit"
           >
             {intl.formatMessage({ id: "Sign up to Scandic Friends" })}
           </Button>
diff --git a/components/TempDesignSystem/Form/Checkbox/index.tsx b/components/TempDesignSystem/Form/Checkbox/index.tsx
index 339dff676..8b2885ebc 100644
--- a/components/TempDesignSystem/Form/Checkbox/index.tsx
+++ b/components/TempDesignSystem/Form/Checkbox/index.tsx
@@ -26,6 +26,7 @@ export default function Checkbox({
       className={styles.container}
       isSelected={field.value}
       onChange={field.onChange}
+      data-testid={name}
     >
       {({ isSelected }) => (
         <>
diff --git a/components/TempDesignSystem/Form/Country/index.tsx b/components/TempDesignSystem/Form/Country/index.tsx
index 9777a4a48..0a5406640 100644
--- a/components/TempDesignSystem/Form/Country/index.tsx
+++ b/components/TempDesignSystem/Form/Country/index.tsx
@@ -68,6 +68,7 @@ export default function CountrySelect({
         onSelectionChange={handleChange}
         ref={field.ref}
         selectedKey={field.value}
+        data-testid={name}
       >
         <div className={styles.comboBoxContainer}>
           <Label
diff --git a/components/TempDesignSystem/Form/Date/index.tsx b/components/TempDesignSystem/Form/Date/index.tsx
index 4fe680bf6..63456c3e3 100644
--- a/components/TempDesignSystem/Form/Date/index.tsx
+++ b/components/TempDesignSystem/Form/Date/index.tsx
@@ -92,6 +92,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
       name={name}
       ref={field.ref}
       value={dateValue}
+      data-testid={name}
     >
       <Group>
         <DateInput className={styles.container}>
@@ -119,7 +120,9 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       placeholder="DD"
                       required
                       tabIndex={3}
-                      value={segment.isPlaceholder ? undefined : segment.value}
+                      defaultValue={
+                        segment.isPlaceholder ? undefined : segment.value
+                      }
                     />
                   </div>
                 )
@@ -135,7 +138,9 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       placeholder="MM"
                       required
                       tabIndex={2}
-                      value={segment.isPlaceholder ? undefined : segment.value}
+                      defaultValue={
+                        segment.isPlaceholder ? undefined : segment.value
+                      }
                     />
                   </div>
                 )
@@ -151,7 +156,9 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       placeholder="YYYY"
                       required
                       tabIndex={1}
-                      value={segment.isPlaceholder ? undefined : segment.value}
+                      defaultValue={
+                        segment.isPlaceholder ? undefined : segment.value
+                      }
                     />
                   </div>
                 )

From 661effeefa2c7c714b0c46aeffb515d46b83ed91 Mon Sep 17 00:00:00 2001
From: Tobias Johansson <tobias.johansson@scandichotels.com>
Date: Thu, 12 Sep 2024 16:08:03 +0200
Subject: [PATCH 25/44] feat(SW-360): Added test for register user form

---
 components/Forms/Register/index.tsx         |  6 --
 components/Forms/Register/register.test.tsx | 68 +++++++++++++++++++++
 jest.config.ts                              |  2 +-
 jest.setup.ts                               | 11 ++++
 package-lock.json                           | 14 +++++
 package.json                                |  1 +
 6 files changed, 95 insertions(+), 7 deletions(-)
 create mode 100644 components/Forms/Register/register.test.tsx

diff --git a/components/Forms/Register/index.tsx b/components/Forms/Register/index.tsx
index 28d10a4f6..0a39c8ec2 100644
--- a/components/Forms/Register/index.tsx
+++ b/components/Forms/Register/index.tsx
@@ -48,7 +48,6 @@ export default function Form() {
   const zipCode = intl.formatMessage({ id: "Zip code" })
 
   async function handleSubmit(data: RegisterSchema) {
-    console.log("submit", data)
     const isSuccessResponse = await registerUser(data)
     if (!isSuccessResponse) {
       toast.error("Something went wrong!")
@@ -66,11 +65,6 @@ export default function Form() {
     <section className={styles.container}>
       <FormProvider {...methods}>
         <form
-          /**
-           * Ignoring since ts doesn't recognize that tRPC
-           * parses FormData before reaching the route
-           * @ts-ignore */
-          action={registerUser}
           className={styles.form}
           id="register"
           onSubmit={methods.handleSubmit(handleSubmit)}
diff --git a/components/Forms/Register/register.test.tsx b/components/Forms/Register/register.test.tsx
new file mode 100644
index 000000000..c83f63c59
--- /dev/null
+++ b/components/Forms/Register/register.test.tsx
@@ -0,0 +1,68 @@
+import { expect } from "@jest/globals"
+import { render, screen, waitFor } from "@testing-library/react"
+import { userEvent } from "@testing-library/user-event"
+
+import { registerUser } from "@/actions/registerUser"
+
+import Form from "./index"
+
+// Mock server action to prevent api calls
+jest.mock("@/actions/registerUser", () => ({
+  registerUser: jest.fn().mockResolvedValue(true),
+}))
+
+describe("Register user form", () => {
+  test("Should submit form with correct data", async () => {
+    render(<Form />)
+
+    const values = {
+      firstName: "John",
+      lastName: "Doe",
+      dateOfBirth: "1990-01-08",
+      address: {
+        zipCode: "11111",
+        countryCode: "SE",
+      },
+      email: "john.doe@example.com",
+      phoneNumber: "+46123456789",
+      password: "securePassword123!",
+      termsAccepted: true,
+    }
+
+    await userEvent.type(screen.getByTestId("firstName"), values.firstName)
+    await userEvent.type(screen.getByTestId("lastName"), values.lastName)
+
+    const dateOfBirthInput = screen.getByTestId("dateOfBirth")
+    const daySelect = dateOfBirthInput.querySelector("select[name='date']")!
+    const monthSelect = dateOfBirthInput.querySelector("select[name='month']")!
+    const yearSelect = dateOfBirthInput.querySelector("select[name='year']")!
+
+    await userEvent.selectOptions(daySelect, "1")
+    await userEvent.selectOptions(monthSelect, "1")
+    await userEvent.selectOptions(yearSelect, "1990")
+
+    await userEvent.type(
+      screen.getByTestId("address.zipCode"),
+      values.address.zipCode
+    )
+
+    const countryInput = screen.getByLabelText("Select a country")
+    await userEvent.click(countryInput)
+    await userEvent.type(countryInput, "Sweden")
+    await userEvent.keyboard("{ArrowDown}{Enter}")
+
+    await userEvent.type(screen.getByTestId("email"), values.email)
+    await userEvent.type(
+      screen.getByTestId("phoneNumber"),
+      values.phoneNumber.slice(3)
+    )
+    await userEvent.type(screen.getByTestId("password"), values.password)
+    await userEvent.click(screen.getAllByTestId("termsAccepted")[0])
+
+    await userEvent.click(screen.getByTestId("submit"))
+
+    await waitFor(() => {
+      expect(registerUser).toHaveBeenCalledWith(values)
+    })
+  })
+})
diff --git a/jest.config.ts b/jest.config.ts
index 28055b8c6..137b2d260 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -154,7 +154,7 @@ const config: Config = {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  // testEnvironment: "jest-environment-node",
+  testEnvironment: "jsdom",
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},
diff --git a/jest.setup.ts b/jest.setup.ts
index df6631eeb..d175d7187 100644
--- a/jest.setup.ts
+++ b/jest.setup.ts
@@ -1 +1,12 @@
 import "@testing-library/jest-dom"
+
+jest.mock("react-intl", () => ({
+  useIntl: () => ({
+    formatMessage: (message: { id: string }) => message.id,
+  }),
+}))
+
+jest.mock("next/navigation", () => ({
+  useRouter: jest.fn(),
+  usePathname: jest.fn().mockReturnValue("/"),
+}))
diff --git a/package-lock.json b/package-lock.json
index c12152ff6..db6a1ca42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,6 +60,7 @@
         "@svgr/webpack": "^8.1.0",
         "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/react": "^16.0.0",
+        "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^29.5.12",
         "@types/node": "^20",
         "@types/react": "^18",
@@ -6167,6 +6168,19 @@
         }
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.5.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz",
+      "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
diff --git a/package.json b/package.json
index ab79709d3..669ab58da 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/node": "^20",
     "@types/react": "^18",

From 4c1dca0ce841d5fd053ce11504291fa34145dac7 Mon Sep 17 00:00:00 2001
From: Tobias Johansson <tobias.johansson@scandichotels.com>
Date: Mon, 16 Sep 2024 13:27:35 +0200
Subject: [PATCH 26/44] fix(SW-360): Added test for edit profile form

---
 .../Forms/Edit/Profile/editProfile.test.tsx   | 111 ++++++++++++++++++
 components/Forms/Register/index.tsx           |   5 +
 components/Forms/Register/register.test.tsx   |   2 +-
 .../TempDesignSystem/Form/Date/index.tsx      |   2 +-
 .../TempDesignSystem/Form/Phone/index.tsx     |   1 +
 .../TempDesignSystem/Form/Select/index.tsx    |   2 +
 components/TempDesignSystem/Select/index.tsx  |   3 +-
 jest.config.ts                                |   2 +-
 jest.setup.ts                                 |   7 ++
 9 files changed, 131 insertions(+), 4 deletions(-)
 create mode 100644 components/Forms/Edit/Profile/editProfile.test.tsx

diff --git a/components/Forms/Edit/Profile/editProfile.test.tsx b/components/Forms/Edit/Profile/editProfile.test.tsx
new file mode 100644
index 000000000..9cbb2e2b3
--- /dev/null
+++ b/components/Forms/Edit/Profile/editProfile.test.tsx
@@ -0,0 +1,111 @@
+import { expect } from "@jest/globals"
+import { render, screen, waitFor } from "@testing-library/react"
+import { userEvent } from "@testing-library/user-event"
+
+import { editProfile } from "@/actions/editProfile"
+
+import Form from "."
+
+import { type User } from "@/types/user"
+
+jest.mock("@/actions/editProfile", () => ({
+  editProfile: jest.fn().mockResolvedValue({ status: "" }),
+}))
+
+describe("EditProfile", () => {
+  it("Should submit form with correct data", async () => {
+    const user: User = {
+      email: "test@test.com",
+      name: "Test User",
+      phoneNumber: "+4612345678",
+      dateOfBirth: "1990-01-08",
+      address: {
+        city: "Test City",
+        countryCode: "SE",
+        streetAddress: "Test Street",
+        zipCode: "12345",
+      },
+      journeys: [],
+      nights: 0,
+      shortcuts: [],
+      victories: [],
+      language: "en",
+      firstName: "Test",
+      lastName: "User",
+      memberships: [],
+      profileId: "1",
+    }
+
+    render(<Form user={user} />)
+
+    const newValues = {
+      email: "new@test.com",
+      dateOfBirth: "2000-01-01",
+      address: {
+        city: "New City",
+        countryCode: "SE",
+        streetAddress: "New Street",
+        zipCode: "67890",
+      },
+      phoneNumber: "+469999999",
+      language: "No",
+      password: "oldPassword123!",
+      newPassword: "newPassword123!",
+      retypeNewPassword: "newPassword123!",
+    }
+
+    const dateOfBirthInput = screen.getByTestId("dateOfBirth")
+    const daySelect = dateOfBirthInput.querySelector("select[name='date']")!
+    const monthSelect = dateOfBirthInput.querySelector("select[name='month']")!
+    const yearSelect = dateOfBirthInput.querySelector("select[name='year']")!
+
+    await userEvent.selectOptions(daySelect, "1")
+    await userEvent.selectOptions(monthSelect, "1")
+    await userEvent.selectOptions(yearSelect, "2000")
+
+    const streetAddressInput = screen.getByTestId("address.streetAddress")
+    await userEvent.clear(streetAddressInput)
+    await userEvent.type(streetAddressInput, newValues.address.streetAddress)
+
+    const cityInput = screen.getByTestId("address.city")
+    await userEvent.clear(cityInput)
+    await userEvent.type(cityInput, newValues.address.city)
+
+    const zipCodeInput = screen.getByTestId("address.zipCode")
+    await userEvent.clear(zipCodeInput)
+    await userEvent.type(zipCodeInput, newValues.address.zipCode)
+
+    const countryInput = screen.getByLabelText("Select a country")
+    await userEvent.click(countryInput)
+    await userEvent.type(countryInput, "Sweden")
+    await userEvent.keyboard("{ArrowDown}{Enter}")
+
+    const emailInput = screen.getByTestId("email")
+    await userEvent.clear(emailInput)
+    await userEvent.type(emailInput, newValues.email)
+
+    const phoneNumberInput = screen.getByTestId("phoneNumber")
+    await userEvent.clear(phoneNumberInput)
+    await userEvent.type(phoneNumberInput, newValues.phoneNumber.slice(3)) // Remove country code
+
+    const languageInput = screen.getByTestId("language")
+    await userEvent.click(languageInput)
+    await userEvent.click(screen.getByTestId("Norwegian"))
+
+    await userEvent.type(screen.getByTestId("password"), newValues.password)
+    await userEvent.type(
+      screen.getByTestId("newPassword"),
+      newValues.newPassword
+    )
+    await userEvent.type(
+      screen.getByTestId("retypeNewPassword"),
+      newValues.retypeNewPassword
+    )
+
+    await userEvent.click(screen.getByText("Save"))
+
+    await waitFor(() => {
+      expect(editProfile).toHaveBeenCalledWith(newValues)
+    })
+  })
+})
diff --git a/components/Forms/Register/index.tsx b/components/Forms/Register/index.tsx
index 0a39c8ec2..319a0483a 100644
--- a/components/Forms/Register/index.tsx
+++ b/components/Forms/Register/index.tsx
@@ -67,6 +67,11 @@ export default function Form() {
         <form
           className={styles.form}
           id="register"
+          /**
+           * Ignoring since ts doesn't recognize that tRPC
+           * parses FormData before reaching the route
+           * @ts-ignore */
+          action={registerUser}
           onSubmit={methods.handleSubmit(handleSubmit)}
         >
           <section className={styles.user}>
diff --git a/components/Forms/Register/register.test.tsx b/components/Forms/Register/register.test.tsx
index c83f63c59..e9188abff 100644
--- a/components/Forms/Register/register.test.tsx
+++ b/components/Forms/Register/register.test.tsx
@@ -18,7 +18,7 @@ describe("Register user form", () => {
     const values = {
       firstName: "John",
       lastName: "Doe",
-      dateOfBirth: "1990-01-08",
+      dateOfBirth: "1990-01-01",
       address: {
         zipCode: "11111",
         countryCode: "SE",
diff --git a/components/TempDesignSystem/Form/Date/index.tsx b/components/TempDesignSystem/Form/Date/index.tsx
index 63456c3e3..311650fc2 100644
--- a/components/TempDesignSystem/Form/Date/index.tsx
+++ b/components/TempDesignSystem/Form/Date/index.tsx
@@ -61,7 +61,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
         const newDate = dt(new Date())
           .set("year", newSegments.year!)
           .set("month", newSegments.month!)
-          .set("day", newSegments.date!)
+          .set("date", newSegments.date!)
 
         setValue(name, newDate.format("YYYY-MM-DD"))
       }
diff --git a/components/TempDesignSystem/Form/Phone/index.tsx b/components/TempDesignSystem/Form/Phone/index.tsx
index 6e9c2024b..d09598296 100644
--- a/components/TempDesignSystem/Form/Phone/index.tsx
+++ b/components/TempDesignSystem/Form/Phone/index.tsx
@@ -85,6 +85,7 @@ export default function Phone({
             className={styles.select}
             tabIndex={0}
             type="button"
+            data-testid="country-selector"
           >
             <Label required={!!registerOptions.required} size="small">
               {formatMessage({ id: "Country code" })}
diff --git a/components/TempDesignSystem/Form/Select/index.tsx b/components/TempDesignSystem/Form/Select/index.tsx
index 5e3be5253..f7379555a 100644
--- a/components/TempDesignSystem/Form/Select/index.tsx
+++ b/components/TempDesignSystem/Form/Select/index.tsx
@@ -25,11 +25,13 @@ export default function Select({
       disabled={field.disabled}
       items={items}
       label={label}
+      aria-label={label}
       name={field.name}
       onBlur={field.onBlur}
       onSelect={field.onChange}
       placeholder={placeholder}
       value={field.value}
+      data-testid={name}
     />
   )
 }
diff --git a/components/TempDesignSystem/Select/index.tsx b/components/TempDesignSystem/Select/index.tsx
index 8e41059db..64f3fc335 100644
--- a/components/TempDesignSystem/Select/index.tsx
+++ b/components/TempDesignSystem/Select/index.tsx
@@ -59,7 +59,7 @@ export default function Select({
         selectedKey={value as Key}
       >
         <Body asChild fontOnly>
-          <Button className={styles.input}>
+          <Button className={styles.input} data-testid={name}>
             <div className={styles.inputContentWrapper} tabIndex={tabIndex}>
               <Label required={required} size="small">
                 {label}
@@ -89,6 +89,7 @@ export default function Select({
                   className={styles.listBoxItem}
                   id={item.value}
                   key={item.label}
+                  data-testid={item.label}
                 >
                   {item.label}
                 </ListBoxItem>
diff --git a/jest.config.ts b/jest.config.ts
index 137b2d260..bf51303a6 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -154,7 +154,7 @@ const config: Config = {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  testEnvironment: "jsdom",
+  testEnvironment: "jest-environment-jsdom",
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},
diff --git a/jest.setup.ts b/jest.setup.ts
index d175d7187..817e0cb28 100644
--- a/jest.setup.ts
+++ b/jest.setup.ts
@@ -9,4 +9,11 @@ jest.mock("react-intl", () => ({
 jest.mock("next/navigation", () => ({
   useRouter: jest.fn(),
   usePathname: jest.fn().mockReturnValue("/"),
+  useParams: jest.fn().mockReturnValue({ lang: "en" }),
+}))
+
+jest.mock("@/lib/trpc/client", () => ({
+  trpc: {
+    useUtils: jest.fn(),
+  },
 }))

From 9ee53fd94aa4a828c86eccf8a6518978542107e4 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Tue, 1 Oct 2024 09:15:50 +0200
Subject: [PATCH 27/44] feat(SW-360): include signup form as a dynamic content

---
 components/Blocks/DynamicContent/index.tsx    |   3 +
 .../Forms/Edit/Profile/editProfile.test.tsx   | 172 +++++++++---------
 components/Forms/Register/form.module.css     |   4 +-
 components/Forms/Register/index.tsx           |   6 +-
 components/Forms/Register/register.test.tsx   |   2 +-
 server/trpc.ts                                |   4 +-
 types/components/form/registerForm.ts         |   5 +
 types/enums/dynamicContent.ts                 |   2 +
 8 files changed, 106 insertions(+), 92 deletions(-)
 create mode 100644 types/components/form/registerForm.ts

diff --git a/components/Blocks/DynamicContent/index.tsx b/components/Blocks/DynamicContent/index.tsx
index bc024baeb..725ffbfb4 100644
--- a/components/Blocks/DynamicContent/index.tsx
+++ b/components/Blocks/DynamicContent/index.tsx
@@ -10,6 +10,7 @@ import NextLevelRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/Ne
 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 Form from "@/components/Forms/Register"
 
 import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
 import { DynamicContentEnum } from "@/types/enums/dynamicContent"
@@ -51,6 +52,8 @@ export default async function DynamicContent({
       return <PointsOverview {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.previous_stays:
       return <PreviousStays {...dynamic_content} />
+    case DynamicContentEnum.Blocks.components.sign_up_form:
+      return <Form {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.soonest_stays:
       return <SoonestStays {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.upcoming_stays:
diff --git a/components/Forms/Edit/Profile/editProfile.test.tsx b/components/Forms/Edit/Profile/editProfile.test.tsx
index 9cbb2e2b3..1035e5164 100644
--- a/components/Forms/Edit/Profile/editProfile.test.tsx
+++ b/components/Forms/Edit/Profile/editProfile.test.tsx
@@ -8,104 +8,104 @@ import Form from "."
 
 import { type User } from "@/types/user"
 
-jest.mock("@/actions/editProfile", () => ({
-  editProfile: jest.fn().mockResolvedValue({ status: "" }),
-}))
+// jest.mock("@/actions/editProfile", () => ({
+//   editProfile: jest.fn().mockResolvedValue({ status: "" }),
+// }))
 
-describe("EditProfile", () => {
-  it("Should submit form with correct data", async () => {
-    const user: User = {
-      email: "test@test.com",
-      name: "Test User",
-      phoneNumber: "+4612345678",
-      dateOfBirth: "1990-01-08",
-      address: {
-        city: "Test City",
-        countryCode: "SE",
-        streetAddress: "Test Street",
-        zipCode: "12345",
-      },
-      journeys: [],
-      nights: 0,
-      shortcuts: [],
-      victories: [],
-      language: "en",
-      firstName: "Test",
-      lastName: "User",
-      memberships: [],
-      profileId: "1",
-    }
+// describe("EditProfile", () => {
+//   it("Should submit form with correct data", async () => {
+//     const user: User = {
+//       email: "test@test.com",
+//       name: "Test User",
+//       phoneNumber: "+4612345678",
+//       dateOfBirth: "1990-01-08",
+//       address: {
+//         city: "Test City",
+//         countryCode: "SE",
+//         streetAddress: "Test Street",
+//         zipCode: "12345",
+//       },
+//       journeys: [],
+//       nights: 0,
+//       shortcuts: [],
+//       victories: [],
+//       language: "en",
+//       firstName: "Test",
+//       lastName: "User",
+//       memberships: [],
+//       profileId: "1",
+//     }
 
-    render(<Form user={user} />)
+//     render(<Form user={user} />)
 
-    const newValues = {
-      email: "new@test.com",
-      dateOfBirth: "2000-01-01",
-      address: {
-        city: "New City",
-        countryCode: "SE",
-        streetAddress: "New Street",
-        zipCode: "67890",
-      },
-      phoneNumber: "+469999999",
-      language: "No",
-      password: "oldPassword123!",
-      newPassword: "newPassword123!",
-      retypeNewPassword: "newPassword123!",
-    }
+//     const newValues = {
+//       email: "new@test.com",
+//       dateOfBirth: "2000-01-01",
+//       address: {
+//         city: "New City",
+//         countryCode: "SE",
+//         streetAddress: "New Street",
+//         zipCode: "67890",
+//       },
+//       phoneNumber: "+469999999",
+//       language: "No",
+//       password: "oldPassword123!",
+//       newPassword: "newPassword123!",
+//       retypeNewPassword: "newPassword123!",
+//     }
 
-    const dateOfBirthInput = screen.getByTestId("dateOfBirth")
-    const daySelect = dateOfBirthInput.querySelector("select[name='date']")!
-    const monthSelect = dateOfBirthInput.querySelector("select[name='month']")!
-    const yearSelect = dateOfBirthInput.querySelector("select[name='year']")!
+//     const dateOfBirthInput = screen.getByTestId("dateOfBirth")
+//     const daySelect = dateOfBirthInput.querySelector("select[name='date']")!
+//     const monthSelect = dateOfBirthInput.querySelector("select[name='month']")!
+//     const yearSelect = dateOfBirthInput.querySelector("select[name='year']")!
 
-    await userEvent.selectOptions(daySelect, "1")
-    await userEvent.selectOptions(monthSelect, "1")
-    await userEvent.selectOptions(yearSelect, "2000")
+//     await userEvent.selectOptions(daySelect, "1")
+//     await userEvent.selectOptions(monthSelect, "1")
+//     await userEvent.selectOptions(yearSelect, "2000")
 
-    const streetAddressInput = screen.getByTestId("address.streetAddress")
-    await userEvent.clear(streetAddressInput)
-    await userEvent.type(streetAddressInput, newValues.address.streetAddress)
+//     const streetAddressInput = screen.getByTestId("address.streetAddress")
+//     await userEvent.clear(streetAddressInput)
+//     await userEvent.type(streetAddressInput, newValues.address.streetAddress)
 
-    const cityInput = screen.getByTestId("address.city")
-    await userEvent.clear(cityInput)
-    await userEvent.type(cityInput, newValues.address.city)
+//     const cityInput = screen.getByTestId("address.city")
+//     await userEvent.clear(cityInput)
+//     await userEvent.type(cityInput, newValues.address.city)
 
-    const zipCodeInput = screen.getByTestId("address.zipCode")
-    await userEvent.clear(zipCodeInput)
-    await userEvent.type(zipCodeInput, newValues.address.zipCode)
+//     const zipCodeInput = screen.getByTestId("address.zipCode")
+//     await userEvent.clear(zipCodeInput)
+//     await userEvent.type(zipCodeInput, newValues.address.zipCode)
 
-    const countryInput = screen.getByLabelText("Select a country")
-    await userEvent.click(countryInput)
-    await userEvent.type(countryInput, "Sweden")
-    await userEvent.keyboard("{ArrowDown}{Enter}")
+//     const countryInput = screen.getByLabelText("Select a country")
+//     await userEvent.click(countryInput)
+//     await userEvent.type(countryInput, "Sweden")
+//     await userEvent.keyboard("{ArrowDown}{Enter}")
 
-    const emailInput = screen.getByTestId("email")
-    await userEvent.clear(emailInput)
-    await userEvent.type(emailInput, newValues.email)
+//     const emailInput = screen.getByTestId("email")
+//     await userEvent.clear(emailInput)
+//     await userEvent.type(emailInput, newValues.email)
 
-    const phoneNumberInput = screen.getByTestId("phoneNumber")
-    await userEvent.clear(phoneNumberInput)
-    await userEvent.type(phoneNumberInput, newValues.phoneNumber.slice(3)) // Remove country code
+//     const phoneNumberInput = screen.getByTestId("phoneNumber")
+//     await userEvent.clear(phoneNumberInput)
+//     await userEvent.type(phoneNumberInput, newValues.phoneNumber.slice(3)) // Remove country code
 
-    const languageInput = screen.getByTestId("language")
-    await userEvent.click(languageInput)
-    await userEvent.click(screen.getByTestId("Norwegian"))
+//     const languageInput = screen.getByTestId("language")
+//     await userEvent.click(languageInput)
+//     await userEvent.click(screen.getByTestId("Norwegian"))
 
-    await userEvent.type(screen.getByTestId("password"), newValues.password)
-    await userEvent.type(
-      screen.getByTestId("newPassword"),
-      newValues.newPassword
-    )
-    await userEvent.type(
-      screen.getByTestId("retypeNewPassword"),
-      newValues.retypeNewPassword
-    )
+//     await userEvent.type(screen.getByTestId("password"), newValues.password)
+//     await userEvent.type(
+//       screen.getByTestId("newPassword"),
+//       newValues.newPassword
+//     )
+//     await userEvent.type(
+//       screen.getByTestId("retypeNewPassword"),
+//       newValues.retypeNewPassword
+//     )
 
-    await userEvent.click(screen.getByText("Save"))
+//     await userEvent.click(screen.getByText("Save"))
 
-    await waitFor(() => {
-      expect(editProfile).toHaveBeenCalledWith(newValues)
-    })
-  })
-})
+//     await waitFor(() => {
+//       expect(editProfile).toHaveBeenCalledWith(newValues)
+//     })
+//   })
+// })
diff --git a/components/Forms/Register/form.module.css b/components/Forms/Register/form.module.css
index 59358dc28..86c6513c4 100644
--- a/components/Forms/Register/form.module.css
+++ b/components/Forms/Register/form.module.css
@@ -1,5 +1,6 @@
 .container {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: var(--Spacing-x3);
 }
 
@@ -42,7 +43,6 @@
 }
 
 .container {
-  display: grid;
   gap: var(--Spacing-x2);
 }
 
diff --git a/components/Forms/Register/index.tsx b/components/Forms/Register/index.tsx
index 319a0483a..8ca880762 100644
--- a/components/Forms/Register/index.tsx
+++ b/components/Forms/Register/index.tsx
@@ -15,13 +15,16 @@ import NewPassword from "@/components/TempDesignSystem/Form/NewPassword"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 
 import { RegisterSchema, registerSchema } from "./schema"
 
 import styles from "./form.module.css"
 
-export default function Form() {
+import type { RegisterFormProps } from "@/types/components/form/registerForm"
+
+export default function Form({ link, subtitle, title }: RegisterFormProps) {
   const intl = useIntl()
   const methods = useForm<RegisterSchema>({
     defaultValues: {
@@ -63,6 +66,7 @@ export default function Form() {
 
   return (
     <section className={styles.container}>
+      <Title as="h3">{title}</Title>
       <FormProvider {...methods}>
         <form
           className={styles.form}
diff --git a/components/Forms/Register/register.test.tsx b/components/Forms/Register/register.test.tsx
index e9188abff..e4047f065 100644
--- a/components/Forms/Register/register.test.tsx
+++ b/components/Forms/Register/register.test.tsx
@@ -13,7 +13,7 @@ jest.mock("@/actions/registerUser", () => ({
 
 describe("Register user form", () => {
   test("Should submit form with correct data", async () => {
-    render(<Form />)
+    render(<Form title="Register" subtitle="Register" />)
 
     const values = {
       firstName: "John",
diff --git a/server/trpc.ts b/server/trpc.ts
index 1000d053c..ccf49a3ec 100644
--- a/server/trpc.ts
+++ b/server/trpc.ts
@@ -142,7 +142,7 @@ export const serverActionProcedure = t.procedure.experimental_caller(
 
 export const hotelServiceServerActionProcedure = serverActionProcedure.use(
   async (opts) => {
-    const { access_token } = await fetchServiceToken("hotel")
+    const { access_token } = await fetchServiceToken(["hotel"])
     if (!access_token) {
       throw internalServerError("Failed to obtain service token")
     }
@@ -156,7 +156,7 @@ export const hotelServiceServerActionProcedure = serverActionProcedure.use(
 
 export const profileServiceServerActionProcedure = serverActionProcedure.use(
   async (opts) => {
-    const { access_token } = await fetchServiceToken("profile")
+    const { access_token } = await fetchServiceToken(["profile"])
     if (!access_token) {
       throw internalServerError("Failed to obtain service token")
     }
diff --git a/types/components/form/registerForm.ts b/types/components/form/registerForm.ts
new file mode 100644
index 000000000..d4763dcab
--- /dev/null
+++ b/types/components/form/registerForm.ts
@@ -0,0 +1,5 @@
+export type RegisterFormProps = {
+  link?: { href: string; text: string }
+  subtitle: string
+  title: string
+}
diff --git a/types/enums/dynamicContent.ts b/types/enums/dynamicContent.ts
index c314b1c7e..0661d51ae 100644
--- a/types/enums/dynamicContent.ts
+++ b/types/enums/dynamicContent.ts
@@ -12,6 +12,7 @@ export namespace DynamicContentEnum {
       overview_table = "overview_table",
       points_overview = "points_overview",
       previous_stays = "previous_stays",
+      sign_up_form = "sign_up_form",
       soonest_stays = "soonest_stays",
       upcoming_stays = "upcoming_stays",
     }
@@ -29,6 +30,7 @@ export namespace DynamicContentEnum {
       components.overview_table,
       components.points_overview,
       components.previous_stays,
+      components.sign_up_form,
       components.soonest_stays,
       components.upcoming_stays,
     ]

From e1d6dd9282ca9655210a3125b29a6b2f1b9a1ad7 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 2 Oct 2024 15:25:49 +0200
Subject: [PATCH 28/44] feat(SW-360): register form headings and styling fixes

---
 components/Forms/Register/form.module.css | 58 +++++++++++------------
 components/Forms/Register/index.tsx       | 54 +++++++++++++--------
 i18n/dictionaries/da.json                 |  3 +-
 i18n/dictionaries/de.json                 |  3 +-
 i18n/dictionaries/en.json                 |  2 +
 i18n/dictionaries/fi.json                 |  2 +
 i18n/dictionaries/no.json                 |  2 +
 i18n/dictionaries/sv.json                 |  2 +
 8 files changed, 73 insertions(+), 53 deletions(-)

diff --git a/components/Forms/Register/form.module.css b/components/Forms/Register/form.module.css
index 86c6513c4..612cbc8f8 100644
--- a/components/Forms/Register/form.module.css
+++ b/components/Forms/Register/form.module.css
@@ -1,41 +1,21 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x3);
-}
-
-.title {
-  grid-area: title;
-}
-
 .form {
   display: grid;
   gap: var(--Spacing-x5);
   grid-area: form;
 }
 
-.btnContainer {
+.title {
+  grid-area: title;
+}
+
+.formWrapper {
   display: flex;
-  flex-direction: column-reverse;
-  gap: var(--Spacing-x1);
-  grid-area: buttons;
-}
-
-@media screen and (min-width: 768px) {
-  .form {
-    grid-template-columns: 1fr;
-  }
-
-  .btnContainer {
-    align-self: center;
-    flex-direction: row;
-    gap: var(--Spacing-x2);
-    justify-self: flex-end;
-  }
+  flex-direction: column;
+  gap: var(--Spacing-x3);
 }
 
+.userInfo,
 .password,
-.user,
 .terms {
   align-self: flex-start;
   display: grid;
@@ -43,11 +23,27 @@
 }
 
 .container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+}
+
+.nameInputs {
+  display: grid;
   gap: var(--Spacing-x2);
 }
 
-@media (min-width: 768px) {
-  .divider {
-    display: none;
+.dateField {
+  display: grid;
+  gap: var(--Spacing-x1);
+}
+
+@media screen and (min-width: 1367px) {
+  .formWrapper {
+    gap: var(--Spacing-x5);
+  }
+
+  .nameInputs {
+    grid-template-columns: 1fr 1fr;
   }
 }
diff --git a/components/Forms/Register/index.tsx b/components/Forms/Register/index.tsx
index 8ca880762..ed1387bdd 100644
--- a/components/Forms/Register/index.tsx
+++ b/components/Forms/Register/index.tsx
@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
 
 import { registerUser } from "@/actions/registerUser"
 import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import DateSelect from "@/components/TempDesignSystem/Form/Date"
@@ -15,6 +14,8 @@ import NewPassword from "@/components/TempDesignSystem/Form/NewPassword"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 
@@ -65,7 +66,7 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
   }
 
   return (
-    <section className={styles.container}>
+    <section className={styles.formWrapper}>
       <Title as="h3">{title}</Title>
       <FormProvider {...methods}>
         <form
@@ -78,23 +79,37 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
           action={registerUser}
           onSubmit={methods.handleSubmit(handleSubmit)}
         >
-          <section className={styles.user}>
+          <section className={styles.userInfo}>
             <div className={styles.container}>
-              <Input
-                label={"firstName"}
-                name="firstName"
-                registerOptions={{ required: true }}
-              />
-              <Input
-                label={"lastName"}
-                name="lastName"
+              <header>
+                <Subtitle type="two">
+                  {intl.formatMessage({ id: "Contact information" })}
+                </Subtitle>
+              </header>
+              <div className={styles.nameInputs}>
+                <Input
+                  label={"firstName"}
+                  name="firstName"
+                  registerOptions={{ required: true }}
+                />
+                <Input
+                  label={"lastName"}
+                  name="lastName"
+                  registerOptions={{ required: true }}
+                />
+              </div>
+            </div>
+            <div className={styles.dateField}>
+              <header>
+                <Caption textTransform="bold">
+                  {intl.formatMessage({ id: "Birth date" })}
+                </Caption>
+              </header>
+              <DateSelect
+                name="dateOfBirth"
                 registerOptions={{ required: true }}
               />
             </div>
-            <DateSelect
-              name="dateOfBirth"
-              registerOptions={{ required: true }}
-            />
             <div className={styles.container}>
               <Input
                 label={zipCode}
@@ -115,12 +130,11 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
             />
             <Phone label={phoneNumber} name="phoneNumber" />
           </section>
-          <Divider className={styles.divider} color="subtle" />
           <section className={styles.password}>
             <header>
-              <Body textTransform="bold">
+              <Subtitle type="two">
                 {intl.formatMessage({ id: "Password" })}
-              </Body>
+              </Subtitle>
             </header>
             <NewPassword
               name="password"
@@ -130,9 +144,9 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
           </section>
           <section className={styles.terms}>
             <header>
-              <Body textTransform="bold">
+              <Subtitle type="two">
                 {intl.formatMessage({ id: "Terms and conditions" })}
-              </Body>
+              </Subtitle>
             </header>
             <Checkbox name="termsAccepted" registerOptions={{ required: true }}>
               <Body>
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index 3f30b3f79..1354cf3dc 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -27,6 +27,7 @@
   "Back to scandichotels.com": "Tilbage til scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Seng type",
+  "Birth date": "Fødselsdato",
   "Book": "Book",
   "Book reward night": "Book bonusnat",
   "Booking number": "Bookingnummer",
@@ -56,6 +57,7 @@
   "Coming up": "Er lige om hjørnet",
   "Compare all levels": "Sammenlign alle niveauer",
   "Complete booking & go to payment": "Udfyld booking & gå til betaling",
+  "Contact information": "Kontaktoplysninger",
   "Contact us": "Kontakt os",
   "Continue": "Blive ved",
   "Copyright all rights reserved": "Scandic AB Alle rettigheder forbeholdes",
@@ -323,7 +325,6 @@
   "nights": "nætter",
   "number": "nummer",
   "or": "eller",
-  "points": "Point",
   "special character": "speciel karakter",
   "spendable points expiring by": "{points} Brugbare point udløber den {date}",
   "to": "til",
diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json
index 6dbe84117..33b18597a 100644
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -27,6 +27,7 @@
   "Back to scandichotels.com": "Zurück zu scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Bettentyp",
+  "Birth date": "Geburtsdatum",
   "Book": "Buchen",
   "Book reward night": "Bonusnacht buchen",
   "Booking number": "Buchungsnummer",
@@ -56,6 +57,7 @@
   "Coming up": "Demnächst",
   "Compare all levels": "Vergleichen Sie alle Levels",
   "Complete booking & go to payment": "Buchung abschließen & zur Bezahlung gehen",
+  "Contact information": "Kontaktinformationen",
   "Contact us": "Kontaktieren Sie uns",
   "Continue": "Weitermachen",
   "Copyright all rights reserved": "Scandic AB Alle Rechte vorbehalten",
@@ -332,4 +334,3 @@
   "{difference}{amount} {currency}": "{difference}{amount} {currency}",
   "{width} cm × {length} cm": "{width} cm × {length} cm"
 }
-
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index 16e62c357..c657adcac 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -27,6 +27,7 @@
   "Back to scandichotels.com": "Back to scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Bed type",
+  "Birth date": "Birth date",
   "Book": "Book",
   "Book reward night": "Book reward night",
   "Booking number": "Booking number",
@@ -56,6 +57,7 @@
   "Coming up": "Coming up",
   "Compare all levels": "Compare all levels",
   "Complete booking & go to payment": "Complete booking & go to payment",
+  "Contact information": "Contact information",
   "Contact us": "Contact us",
   "Continue": "Continue",
   "Copyright all rights reserved": "Scandic AB All rights reserved",
diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json
index 0d6e9e617..64ae01cae 100644
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -27,6 +27,7 @@
   "Back to scandichotels.com": "Takaisin scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Vuodetyyppi",
+  "Birth date": "Syntymäaika",
   "Book": "Varaa",
   "Book reward night": "Kirjapalkinto-ilta",
   "Booking number": "Varausnumero",
@@ -56,6 +57,7 @@
   "Coming up": "Tulossa",
   "Compare all levels": "Vertaa kaikkia tasoja",
   "Complete booking & go to payment": "Täydennä varaus & siirry maksamaan",
+  "Contact information": "Yhteystiedot",
   "Contact us": "Ota meihin yhteyttä",
   "Continue": "Jatkaa",
   "Copyright all rights reserved": "Scandic AB Kaikki oikeudet pidätetään",
diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json
index a44ecc1e3..9fc00fd72 100644
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -27,6 +27,7 @@
   "Back to scandichotels.com": "Tilbake til scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Seng type",
+  "Birth date": "Fødselsdato",
   "Book": "Bestill",
   "Book reward night": "Bestill belønningskveld",
   "Booking number": "Bestillingsnummer",
@@ -55,6 +56,7 @@
   "Coming up": "Kommer opp",
   "Compare all levels": "Sammenlign alle nivåer",
   "Complete booking & go to payment": "Fullfør bestilling & gå til betaling",
+  "Contact information": "Kontaktinformasjon",
   "Contact us": "Kontakt oss",
   "Continue": "Fortsette",
   "Copyright all rights reserved": "Scandic AB Alle rettigheter forbeholdt",
diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json
index 5f72ef6f7..21c3dad8a 100644
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -27,6 +27,7 @@
   "Back to scandichotels.com": "Tillbaka till scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Sängtyp",
+  "Birth date": "Födelsedatum",
   "Book": "Boka",
   "Book reward night": "Boka frinatt",
   "Booking number": "Bokningsnummer",
@@ -56,6 +57,7 @@
   "Coming up": "Kommer härnäst",
   "Compare all levels": "Jämför alla nivåer",
   "Complete booking & go to payment": "Fullför bokning & gå till betalning",
+  "Contact information": "Kontaktinformation",
   "Contact us": "Kontakta oss",
   "Continue": "Fortsätt",
   "Copyright all rights reserved": "Scandic AB Alla rättigheter förbehålls",

From 5bdef742c79c21656445b5ec8f429f9b65439865 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 2 Oct 2024 17:37:14 +0200
Subject: [PATCH 29/44] refactor(SW-360): improve error handling logic

---
 actions/registerUser.ts                          | 13 ++++++++-----
 components/Forms/Register/index.tsx              | 14 ++++----------
 server/routers/contentstack/contentPage/query.ts |  2 ++
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/actions/registerUser.ts b/actions/registerUser.ts
index 3bca2da81..ed0802c4b 100644
--- a/actions/registerUser.ts
+++ b/actions/registerUser.ts
@@ -1,5 +1,6 @@
 "use server"
 
+import { redirect } from "next/navigation"
 import { z } from "zod"
 
 import * as api from "@/lib/api"
@@ -45,7 +46,7 @@ export const registerUser = profileServiceServerActionProcedure
         })
       )
 
-      return false
+      return { success: false, error: "Validation error" }
     }
 
     try {
@@ -57,7 +58,7 @@ export const registerUser = profileServiceServerActionProcedure
       })
 
       if (!apiResponse.ok) {
-        const text = apiResponse.text()
+        const text = await apiResponse.text()
         console.error(
           "registerUser api error",
           JSON.stringify({
@@ -69,14 +70,16 @@ export const registerUser = profileServiceServerActionProcedure
             },
           })
         )
-        return false
+        return { success: false, error: "API error" }
       }
 
       const json = await apiResponse.json()
       console.log("json", json)
 
-      return true
+      // TODO: Redirect to actual success page.
+      redirect("/signup/success")
     } catch (error) {
-      return false
+      console.error("Unexpected error", error)
+      return { success: false, error: "Unexpected error" }
     }
   })
diff --git a/components/Forms/Register/index.tsx b/components/Forms/Register/index.tsx
index ed1387bdd..1b152008f 100644
--- a/components/Forms/Register/index.tsx
+++ b/components/Forms/Register/index.tsx
@@ -52,17 +52,11 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
   const zipCode = intl.formatMessage({ id: "Zip code" })
 
   async function handleSubmit(data: RegisterSchema) {
-    const isSuccessResponse = await registerUser(data)
-    if (!isSuccessResponse) {
-      toast.error("Something went wrong!")
-    } else {
-      // TODO: Toast should be removed and we should show a different page
-      toast.success("Form submitted successfully")
-      // should we navigate to sub route like /signup/success ?
-      // router.push("/")
-
-      methods.reset()
+    const result = await registerUser(data)
+    if (!result.success) {
+      toast.error(intl.formatMessage({ id: "Something went wrong!" }))
     }
+    // No need to handle success case here, as the redirect happens server-side.
   }
 
   return (
diff --git a/server/routers/contentstack/contentPage/query.ts b/server/routers/contentstack/contentPage/query.ts
index 79ef83a4e..bae7addbe 100644
--- a/server/routers/contentstack/contentPage/query.ts
+++ b/server/routers/contentstack/contentPage/query.ts
@@ -21,6 +21,8 @@ export const contentPageQueryRouter = router({
   get: contentstackExtendedProcedureUID.query(async ({ ctx }) => {
     const { lang, uid } = ctx
 
+    // TODO: Add logic to: check if Authed & Content Page URL is a "signup page", if so, redirect to home page.
+
     const contentPageRefsData = await fetchContentPageRefs(lang, uid)
     const contentPageRefs = validateContentPageRefs(
       contentPageRefsData,

From f356d91f99e5f44eac4aa8646f0a31206f3dd817 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Thu, 3 Oct 2024 10:12:06 +0200
Subject: [PATCH 30/44] feat: setup signup routes and redirect on success

---
 actions/registerUser.ts    | 49 ++++++++++++++++++++------------------
 constants/routes/signup.ts | 21 ++++++++++++++++
 2 files changed, 47 insertions(+), 23 deletions(-)
 create mode 100644 constants/routes/signup.ts

diff --git a/actions/registerUser.ts b/actions/registerUser.ts
index ed0802c4b..2429fb925 100644
--- a/actions/registerUser.ts
+++ b/actions/registerUser.ts
@@ -3,6 +3,7 @@
 import { redirect } from "next/navigation"
 import { z } from "zod"
 
+import { signupVerify } from "@/constants/routes/signup"
 import * as api from "@/lib/api"
 import { profileServiceServerActionProcedure } from "@/server/trpc"
 
@@ -49,37 +50,39 @@ export const registerUser = profileServiceServerActionProcedure
       return { success: false, error: "Validation error" }
     }
 
+    let apiResponse
     try {
-      const apiResponse = await api.post(api.endpoints.v1.profile, {
+      apiResponse = await api.post(api.endpoints.v1.profile, {
         body: parsedPayload.data,
         headers: {
           Authorization: `Bearer ${ctx.serviceToken}`,
         },
       })
-
-      if (!apiResponse.ok) {
-        const text = await apiResponse.text()
-        console.error(
-          "registerUser api error",
-          JSON.stringify({
-            query: input,
-            error: {
-              status: apiResponse.status,
-              statusText: apiResponse.statusText,
-              error: text,
-            },
-          })
-        )
-        return { success: false, error: "API error" }
-      }
-
-      const json = await apiResponse.json()
-      console.log("json", json)
-
-      // TODO: Redirect to actual success page.
-      redirect("/signup/success")
     } catch (error) {
       console.error("Unexpected error", error)
       return { success: false, error: "Unexpected error" }
     }
+
+    if (!apiResponse.ok) {
+      const text = await apiResponse.text()
+      console.error(
+        "registerUser api error",
+        JSON.stringify({
+          query: input,
+          error: {
+            status: apiResponse.status,
+            statusText: apiResponse.statusText,
+            error: text,
+          },
+        })
+      )
+      return { success: false, error: "API error" }
+    }
+
+    const json = await apiResponse.json()
+    console.log("registerUser: json", json)
+
+    // Note: The redirect needs to be called after the try/catch block.
+    // See: https://nextjs.org/docs/app/api-reference/functions/redirect
+    redirect(signupVerify[ctx.lang])
   })
diff --git a/constants/routes/signup.ts b/constants/routes/signup.ts
new file mode 100644
index 000000000..12eca8615
--- /dev/null
+++ b/constants/routes/signup.ts
@@ -0,0 +1,21 @@
+import { LangRoute } from "@/types/routes"
+
+export const signup: LangRoute = {
+  en: "/en/scandic-friends/join-scandic-friends",
+  sv: "/sv/scandic-friends/bli-medlem",
+  no: "/no/scandic-friends/registrer-deg-for-scandic-friends",
+  fi: "/fi/scandic-friends/liity-scandic-friends-ohjelmaan",
+  da: "/da/scandic-friends/tilmeld-dig-scandic-friends",
+  de: "/de/scandic-friends/werden-sie-mitglied-von-scandic-friends",
+}
+
+export const signupVerify: LangRoute = {
+  en: `${signup.en}/verify`,
+  sv: `${signup.sv}/verifiera`,
+  no: `${signup.no}/bekreft`,
+  fi: `${signup.fi}/vahvista`,
+  da: `${signup.da}/bekraeft`,
+  de: `${signup.de}/verifizieren`,
+}
+
+//   export const signup = [...Object.values(signupRoutes)]

From aa20a803d0c5b3bf70b26a7ac8b46f8abfaa0325 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Thu, 3 Oct 2024 10:47:15 +0200
Subject: [PATCH 31/44] fix(SW-360): better handleSubmit error handling

---
 components/Forms/Register/index.tsx | 14 +++++++++++---
 server/trpc.ts                      | 14 --------------
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/components/Forms/Register/index.tsx b/components/Forms/Register/index.tsx
index 1b152008f..9e5a05f39 100644
--- a/components/Forms/Register/index.tsx
+++ b/components/Forms/Register/index.tsx
@@ -52,11 +52,19 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
   const zipCode = intl.formatMessage({ id: "Zip code" })
 
   async function handleSubmit(data: RegisterSchema) {
-    const result = await registerUser(data)
-    if (!result.success) {
+    try {
+      const result = await registerUser(data)
+      if (result && !result.success) {
+        toast.error(intl.formatMessage({ id: "Something went wrong!" }))
+      }
+    } catch (error) {
+      // The server-side redirect will throw an error, which we can ignore
+      // as it's handled by Next.js.
+      if (error instanceof Error && error.message.includes("NEXT_REDIRECT")) {
+        return
+      }
       toast.error(intl.formatMessage({ id: "Something went wrong!" }))
     }
-    // No need to handle success case here, as the redirect happens server-side.
   }
 
   return (
diff --git a/server/trpc.ts b/server/trpc.ts
index ccf49a3ec..4dccbb7f5 100644
--- a/server/trpc.ts
+++ b/server/trpc.ts
@@ -140,20 +140,6 @@ export const serverActionProcedure = t.procedure.experimental_caller(
   })
 )
 
-export const hotelServiceServerActionProcedure = serverActionProcedure.use(
-  async (opts) => {
-    const { access_token } = await fetchServiceToken(["hotel"])
-    if (!access_token) {
-      throw internalServerError("Failed to obtain service token")
-    }
-    return opts.next({
-      ctx: {
-        serviceToken: access_token,
-      },
-    })
-  }
-)
-
 export const profileServiceServerActionProcedure = serverActionProcedure.use(
   async (opts) => {
     const { access_token } = await fetchServiceToken(["profile"])

From 6c54a54a9e81950888628d0e7fae1c4be2135562 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Thu, 3 Oct 2024 14:16:08 +0200
Subject: [PATCH 32/44] feat:(SW-360): redirect authenticated users away from
 signup

---
 components/Blocks/DynamicContent/index.tsx    |   4 +-
 .../Forms/Edit/Profile/editProfile.test.tsx   | 111 ------------------
 .../Register/ServerRegisterForm/index.tsx     |  23 ++++
 components/Forms/Register/register.test.tsx   |  68 -----------
 4 files changed, 25 insertions(+), 181 deletions(-)
 delete mode 100644 components/Forms/Edit/Profile/editProfile.test.tsx
 create mode 100644 components/Forms/Register/ServerRegisterForm/index.tsx
 delete mode 100644 components/Forms/Register/register.test.tsx

diff --git a/components/Blocks/DynamicContent/index.tsx b/components/Blocks/DynamicContent/index.tsx
index 725ffbfb4..c73ea430f 100644
--- a/components/Blocks/DynamicContent/index.tsx
+++ b/components/Blocks/DynamicContent/index.tsx
@@ -10,7 +10,7 @@ import NextLevelRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/Ne
 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 Form from "@/components/Forms/Register"
+import ServerRegisterForm from "@/components/Forms/Register/ServerRegisterForm"
 
 import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
 import { DynamicContentEnum } from "@/types/enums/dynamicContent"
@@ -53,7 +53,7 @@ export default async function DynamicContent({
     case DynamicContentEnum.Blocks.components.previous_stays:
       return <PreviousStays {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.sign_up_form:
-      return <Form {...dynamic_content} />
+      return <ServerRegisterForm {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.soonest_stays:
       return <SoonestStays {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.upcoming_stays:
diff --git a/components/Forms/Edit/Profile/editProfile.test.tsx b/components/Forms/Edit/Profile/editProfile.test.tsx
deleted file mode 100644
index 1035e5164..000000000
--- a/components/Forms/Edit/Profile/editProfile.test.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { expect } from "@jest/globals"
-import { render, screen, waitFor } from "@testing-library/react"
-import { userEvent } from "@testing-library/user-event"
-
-import { editProfile } from "@/actions/editProfile"
-
-import Form from "."
-
-import { type User } from "@/types/user"
-
-// jest.mock("@/actions/editProfile", () => ({
-//   editProfile: jest.fn().mockResolvedValue({ status: "" }),
-// }))
-
-// describe("EditProfile", () => {
-//   it("Should submit form with correct data", async () => {
-//     const user: User = {
-//       email: "test@test.com",
-//       name: "Test User",
-//       phoneNumber: "+4612345678",
-//       dateOfBirth: "1990-01-08",
-//       address: {
-//         city: "Test City",
-//         countryCode: "SE",
-//         streetAddress: "Test Street",
-//         zipCode: "12345",
-//       },
-//       journeys: [],
-//       nights: 0,
-//       shortcuts: [],
-//       victories: [],
-//       language: "en",
-//       firstName: "Test",
-//       lastName: "User",
-//       memberships: [],
-//       profileId: "1",
-//     }
-
-//     render(<Form user={user} />)
-
-//     const newValues = {
-//       email: "new@test.com",
-//       dateOfBirth: "2000-01-01",
-//       address: {
-//         city: "New City",
-//         countryCode: "SE",
-//         streetAddress: "New Street",
-//         zipCode: "67890",
-//       },
-//       phoneNumber: "+469999999",
-//       language: "No",
-//       password: "oldPassword123!",
-//       newPassword: "newPassword123!",
-//       retypeNewPassword: "newPassword123!",
-//     }
-
-//     const dateOfBirthInput = screen.getByTestId("dateOfBirth")
-//     const daySelect = dateOfBirthInput.querySelector("select[name='date']")!
-//     const monthSelect = dateOfBirthInput.querySelector("select[name='month']")!
-//     const yearSelect = dateOfBirthInput.querySelector("select[name='year']")!
-
-//     await userEvent.selectOptions(daySelect, "1")
-//     await userEvent.selectOptions(monthSelect, "1")
-//     await userEvent.selectOptions(yearSelect, "2000")
-
-//     const streetAddressInput = screen.getByTestId("address.streetAddress")
-//     await userEvent.clear(streetAddressInput)
-//     await userEvent.type(streetAddressInput, newValues.address.streetAddress)
-
-//     const cityInput = screen.getByTestId("address.city")
-//     await userEvent.clear(cityInput)
-//     await userEvent.type(cityInput, newValues.address.city)
-
-//     const zipCodeInput = screen.getByTestId("address.zipCode")
-//     await userEvent.clear(zipCodeInput)
-//     await userEvent.type(zipCodeInput, newValues.address.zipCode)
-
-//     const countryInput = screen.getByLabelText("Select a country")
-//     await userEvent.click(countryInput)
-//     await userEvent.type(countryInput, "Sweden")
-//     await userEvent.keyboard("{ArrowDown}{Enter}")
-
-//     const emailInput = screen.getByTestId("email")
-//     await userEvent.clear(emailInput)
-//     await userEvent.type(emailInput, newValues.email)
-
-//     const phoneNumberInput = screen.getByTestId("phoneNumber")
-//     await userEvent.clear(phoneNumberInput)
-//     await userEvent.type(phoneNumberInput, newValues.phoneNumber.slice(3)) // Remove country code
-
-//     const languageInput = screen.getByTestId("language")
-//     await userEvent.click(languageInput)
-//     await userEvent.click(screen.getByTestId("Norwegian"))
-
-//     await userEvent.type(screen.getByTestId("password"), newValues.password)
-//     await userEvent.type(
-//       screen.getByTestId("newPassword"),
-//       newValues.newPassword
-//     )
-//     await userEvent.type(
-//       screen.getByTestId("retypeNewPassword"),
-//       newValues.retypeNewPassword
-//     )
-
-//     await userEvent.click(screen.getByText("Save"))
-
-//     await waitFor(() => {
-//       expect(editProfile).toHaveBeenCalledWith(newValues)
-//     })
-//   })
-// })
diff --git a/components/Forms/Register/ServerRegisterForm/index.tsx b/components/Forms/Register/ServerRegisterForm/index.tsx
new file mode 100644
index 000000000..c7915f22e
--- /dev/null
+++ b/components/Forms/Register/ServerRegisterForm/index.tsx
@@ -0,0 +1,23 @@
+import { redirect } from "next/navigation"
+
+import { overview } from "@/constants/routes/myPages"
+
+import { auth } from "@/auth"
+import { getLang } from "@/i18n/serverContext"
+
+import Form from "../index"
+
+import { RegisterFormProps } from "@/types/components/form/registerForm"
+
+export default async function ServerRegisterForm({
+  link,
+  subtitle,
+  title,
+}: RegisterFormProps) {
+  const session = await auth()
+  if (session) {
+    // We don't want to allow users to signup if they are already authenticated.
+    redirect(overview[getLang()])
+  }
+  return <Form link={link} subtitle={subtitle} title={title} />
+}
diff --git a/components/Forms/Register/register.test.tsx b/components/Forms/Register/register.test.tsx
deleted file mode 100644
index e4047f065..000000000
--- a/components/Forms/Register/register.test.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { expect } from "@jest/globals"
-import { render, screen, waitFor } from "@testing-library/react"
-import { userEvent } from "@testing-library/user-event"
-
-import { registerUser } from "@/actions/registerUser"
-
-import Form from "./index"
-
-// Mock server action to prevent api calls
-jest.mock("@/actions/registerUser", () => ({
-  registerUser: jest.fn().mockResolvedValue(true),
-}))
-
-describe("Register user form", () => {
-  test("Should submit form with correct data", async () => {
-    render(<Form title="Register" subtitle="Register" />)
-
-    const values = {
-      firstName: "John",
-      lastName: "Doe",
-      dateOfBirth: "1990-01-01",
-      address: {
-        zipCode: "11111",
-        countryCode: "SE",
-      },
-      email: "john.doe@example.com",
-      phoneNumber: "+46123456789",
-      password: "securePassword123!",
-      termsAccepted: true,
-    }
-
-    await userEvent.type(screen.getByTestId("firstName"), values.firstName)
-    await userEvent.type(screen.getByTestId("lastName"), values.lastName)
-
-    const dateOfBirthInput = screen.getByTestId("dateOfBirth")
-    const daySelect = dateOfBirthInput.querySelector("select[name='date']")!
-    const monthSelect = dateOfBirthInput.querySelector("select[name='month']")!
-    const yearSelect = dateOfBirthInput.querySelector("select[name='year']")!
-
-    await userEvent.selectOptions(daySelect, "1")
-    await userEvent.selectOptions(monthSelect, "1")
-    await userEvent.selectOptions(yearSelect, "1990")
-
-    await userEvent.type(
-      screen.getByTestId("address.zipCode"),
-      values.address.zipCode
-    )
-
-    const countryInput = screen.getByLabelText("Select a country")
-    await userEvent.click(countryInput)
-    await userEvent.type(countryInput, "Sweden")
-    await userEvent.keyboard("{ArrowDown}{Enter}")
-
-    await userEvent.type(screen.getByTestId("email"), values.email)
-    await userEvent.type(
-      screen.getByTestId("phoneNumber"),
-      values.phoneNumber.slice(3)
-    )
-    await userEvent.type(screen.getByTestId("password"), values.password)
-    await userEvent.click(screen.getAllByTestId("termsAccepted")[0])
-
-    await userEvent.click(screen.getByTestId("submit"))
-
-    await waitFor(() => {
-      expect(registerUser).toHaveBeenCalledWith(values)
-    })
-  })
-})

From 516f8555d5f0332311bc242827b2107773d1c6d1 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Thu, 3 Oct 2024 14:28:00 +0200
Subject: [PATCH 33/44] chore(SW-360): revert changes made to test config

---
 jest.config.ts |  2 +-
 jest.setup.ts  | 18 ------------------
 2 files changed, 1 insertion(+), 19 deletions(-)

diff --git a/jest.config.ts b/jest.config.ts
index bf51303a6..28055b8c6 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -154,7 +154,7 @@ const config: Config = {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  testEnvironment: "jest-environment-jsdom",
+  // testEnvironment: "jest-environment-node",
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},
diff --git a/jest.setup.ts b/jest.setup.ts
index 817e0cb28..df6631eeb 100644
--- a/jest.setup.ts
+++ b/jest.setup.ts
@@ -1,19 +1 @@
 import "@testing-library/jest-dom"
-
-jest.mock("react-intl", () => ({
-  useIntl: () => ({
-    formatMessage: (message: { id: string }) => message.id,
-  }),
-}))
-
-jest.mock("next/navigation", () => ({
-  useRouter: jest.fn(),
-  usePathname: jest.fn().mockReturnValue("/"),
-  useParams: jest.fn().mockReturnValue({ lang: "en" }),
-}))
-
-jest.mock("@/lib/trpc/client", () => ({
-  trpc: {
-    useUtils: jest.fn(),
-  },
-}))

From 1f6fd4e980cb663102434be5cbed5f076d362e94 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Thu, 3 Oct 2024 15:29:45 +0200
Subject: [PATCH 34/44] feat(SW-360): Add signup verification route w. tracking
 for login

---
 .../SignUpVerification/index.tsx              | 26 +++++++++++++++++++
 .../signUpVerification.module.css             |  6 +++++
 .../SignupFormWrapper}/index.tsx              | 17 ++++++------
 components/Blocks/DynamicContent/index.tsx    |  7 +++--
 components/Current/Header/LoginButton.tsx     |  3 +++
 .../TempDesignSystem/Link/link.module.css     | 12 +++++++++
 components/TempDesignSystem/Link/variants.ts  |  1 +
 i18n/dictionaries/da.json                     |  1 +
 i18n/dictionaries/de.json                     |  2 +-
 i18n/dictionaries/en.json                     |  1 +
 i18n/dictionaries/fi.json                     |  1 +
 i18n/dictionaries/no.json                     |  1 +
 i18n/dictionaries/sv.json                     |  1 +
 .../routers/contentstack/contentPage/query.ts |  2 --
 types/components/blocks/dynamicContent.ts     | 13 ++++++++++
 types/components/tracking.ts                  |  1 +
 types/enums/dynamicContent.ts                 |  2 ++
 17 files changed, 83 insertions(+), 14 deletions(-)
 create mode 100644 components/Blocks/DynamicContent/SignUpVerification/index.tsx
 create mode 100644 components/Blocks/DynamicContent/SignUpVerification/signUpVerification.module.css
 rename components/{Forms/Register/ServerRegisterForm => Blocks/DynamicContent/SignupFormWrapper}/index.tsx (55%)

diff --git a/components/Blocks/DynamicContent/SignUpVerification/index.tsx b/components/Blocks/DynamicContent/SignUpVerification/index.tsx
new file mode 100644
index 000000000..eea95205a
--- /dev/null
+++ b/components/Blocks/DynamicContent/SignUpVerification/index.tsx
@@ -0,0 +1,26 @@
+import LoginButton from "@/components/Current/Header/LoginButton"
+import { getIntl } from "@/i18n"
+
+import styles from "./signUpVerification.module.css"
+
+import type { SignUpVerificationProps } from "@/types/components/blocks/dynamicContent"
+
+export default async function SignUpVerification({
+  title,
+  subtitle,
+}: SignUpVerificationProps) {
+  const intl = await getIntl()
+
+  return (
+    <div className={styles.container}>
+      <LoginButton
+        className={styles.loginButton}
+        trackingId="signUpVerificationLogin"
+        position="sign up verification"
+        variant="signupVerification"
+      >
+        {intl.formatMessage({ id: "Proceed to login" })}
+      </LoginButton>
+    </div>
+  )
+}
diff --git a/components/Blocks/DynamicContent/SignUpVerification/signUpVerification.module.css b/components/Blocks/DynamicContent/SignUpVerification/signUpVerification.module.css
new file mode 100644
index 000000000..8e1a8e925
--- /dev/null
+++ b/components/Blocks/DynamicContent/SignUpVerification/signUpVerification.module.css
@@ -0,0 +1,6 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: var(--Spacing-x3);
+}
diff --git a/components/Forms/Register/ServerRegisterForm/index.tsx b/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
similarity index 55%
rename from components/Forms/Register/ServerRegisterForm/index.tsx
rename to components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
index c7915f22e..6b9ab9673 100644
--- a/components/Forms/Register/ServerRegisterForm/index.tsx
+++ b/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
@@ -3,21 +3,20 @@ import { redirect } from "next/navigation"
 import { overview } from "@/constants/routes/myPages"
 
 import { auth } from "@/auth"
+import Form from "@/components/Forms/Register"
 import { getLang } from "@/i18n/serverContext"
 
-import Form from "../index"
+import type { RegisterFormProps } from "@/types/components/form/registerForm"
 
-import { RegisterFormProps } from "@/types/components/form/registerForm"
-
-export default async function ServerRegisterForm({
-  link,
-  subtitle,
-  title,
-}: RegisterFormProps) {
+export default async function SignupFormWrapper({
+  dynamic_content,
+}: {
+  dynamic_content: RegisterFormProps
+}) {
   const session = await auth()
   if (session) {
     // We don't want to allow users to signup if they are already authenticated.
     redirect(overview[getLang()])
   }
-  return <Form link={link} subtitle={subtitle} title={title} />
+  return <Form {...dynamic_content} />
 }
diff --git a/components/Blocks/DynamicContent/index.tsx b/components/Blocks/DynamicContent/index.tsx
index c73ea430f..e03264f5d 100644
--- a/components/Blocks/DynamicContent/index.tsx
+++ b/components/Blocks/DynamicContent/index.tsx
@@ -7,10 +7,11 @@ import ExpiringPoints from "@/components/Blocks/DynamicContent/Points/ExpiringPo
 import PointsOverview from "@/components/Blocks/DynamicContent/Points/Overview"
 import CurrentRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/CurrentLevel"
 import NextLevelRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/NextLevel"
+import SignupFormWrapper from "@/components/Blocks/DynamicContent/SignupFormWrapper"
+import SignUpVerification from "@/components/Blocks/DynamicContent/SignUpVerification"
 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 ServerRegisterForm from "@/components/Forms/Register/ServerRegisterForm"
 
 import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
 import { DynamicContentEnum } from "@/types/enums/dynamicContent"
@@ -53,7 +54,9 @@ export default async function DynamicContent({
     case DynamicContentEnum.Blocks.components.previous_stays:
       return <PreviousStays {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.sign_up_form:
-      return <ServerRegisterForm {...dynamic_content} />
+      return <SignupFormWrapper dynamic_content={dynamic_content} />
+    case DynamicContentEnum.Blocks.components.sign_up_verification:
+      return <SignUpVerification {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.soonest_stays:
       return <SoonestStays {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.upcoming_stays:
diff --git a/components/Current/Header/LoginButton.tsx b/components/Current/Header/LoginButton.tsx
index d74d63e80..475640879 100644
--- a/components/Current/Header/LoginButton.tsx
+++ b/components/Current/Header/LoginButton.tsx
@@ -18,11 +18,13 @@ export default function LoginButton({
   trackingId,
   children,
   color = "black",
+  variant = "default",
 }: PropsWithChildren<{
   className: string
   trackingId: string
   position: TrackingPosition
   color?: LinkProps["color"]
+  variant?: "default" | "signupVerification"
 }>) {
   const lang = useLang()
   const pathName = useLazyPathname()
@@ -49,6 +51,7 @@ export default function LoginButton({
       color={color}
       href={href}
       prefetch={false}
+      variant={variant}
     >
       {children}
     </Link>
diff --git a/components/TempDesignSystem/Link/link.module.css b/components/TempDesignSystem/Link/link.module.css
index abd860406..a22274051 100644
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -218,3 +218,15 @@
   color: var(--Base-Text-High-contrast);
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
+
+.signupVerification {
+  background-color: var(--Base-Button-Primary-Fill-Normal);
+  color: var(--Base-Button-Inverted-Fill-Normal);
+  cursor: pointer;
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  border-radius: var(--Corner-radius-Rounded);
+  text-decoration: none;
+  display: inline-block;
+  text-align: center;
+  transition: background-color 0.3s ease;
+}
diff --git a/components/TempDesignSystem/Link/variants.ts b/components/TempDesignSystem/Link/variants.ts
index 1930b8cb8..273eea928 100644
--- a/components/TempDesignSystem/Link/variants.ts
+++ b/components/TempDesignSystem/Link/variants.ts
@@ -35,6 +35,7 @@ export const linkVariants = cva(styles.link, {
       shortcut: styles.shortcut,
       sidebar: styles.sidebar,
       tab: styles.tab,
+      signupVerification: styles.signupVerification,
     },
   },
   defaultVariants: {
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index 1354cf3dc..cd2a0f089 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -202,6 +202,7 @@
   "Points needed to level up": "Point nødvendige for at stige i niveau",
   "Points needed to stay on level": "Point nødvendige for at holde sig på niveau",
   "Previous victories": "Tidligere sejre",
+  "Proceed to login": "Fortsæt til login",
   "Proceed to payment method": "Fortsæt til betalingsmetode",
   "Public price from": "Offentlig pris fra",
   "Public transport": "Offentlig transport",
diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json
index 33b18597a..0478ca448 100644
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -195,13 +195,13 @@
   "Phone number": "Telefonnummer",
   "Please enter a valid phone number": "Bitte geben Sie eine gültige Telefonnummer ein",
   "Points": "Punkte",
-  "points": "Punkte",
   "Points being calculated": "Punkte werden berechnet",
   "Points earned prior to May 1, 2021": "Zusammengeführte Punkte vor dem 1. Mai 2021",
   "Points may take up to 10 days to be displayed.": "Es kann bis zu 10 Tage dauern, bis Punkte angezeigt werden.",
   "Points needed to level up": "Punkte, die zum Levelaufstieg benötigt werden",
   "Points needed to stay on level": "Erforderliche Punkte, um auf diesem Level zu bleiben",
   "Previous victories": "Bisherige Siege",
+  "Proceed to login": "Weiter zum Login",
   "Proceed to payment method": "Weiter zur Zahlungsmethode",
   "Public price from": "Öffentlicher Preis ab",
   "Public transport": "Öffentliche Verkehrsmittel",
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index c657adcac..5f1e934f3 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -201,6 +201,7 @@
   "Points needed to level up": "Points needed to level up",
   "Points needed to stay on level": "Points needed to stay on level",
   "Previous victories": "Previous victories",
+  "Proceed to login": "Proceed to login",
   "Proceed to payment method": "Proceed to payment method",
   "Public price from": "Public price from",
   "Public transport": "Public transport",
diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json
index 64ae01cae..763345a55 100644
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -202,6 +202,7 @@
   "Points needed to level up": "Tarvitset vielä",
   "Points needed to stay on level": "Tällä tasolla pysymiseen tarvittavat pisteet",
   "Previous victories": "Edelliset voitot",
+  "Proceed to login": "Jatka kirjautumiseen",
   "Proceed to payment method": "Siirry maksutavalle",
   "Public price from": "Julkinen hinta alkaen",
   "Public transport": "Julkinen liikenne",
diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json
index 9fc00fd72..f20d6b79c 100644
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -200,6 +200,7 @@
   "Points needed to level up": "Poeng som trengs for å komme opp i nivå",
   "Points needed to stay on level": "Poeng som trengs for å holde seg på nivå",
   "Previous victories": "Tidligere seire",
+  "Proceed to login": "Fortsett til innlogging",
   "Proceed to payment method": "Fortsett til betalingsmetode",
   "Public price from": "Offentlig pris fra",
   "Public transport": "Offentlig transport",
diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json
index 21c3dad8a..93553a69f 100644
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -201,6 +201,7 @@
   "Points needed to level up": "Poäng som behövs för att gå upp i nivå",
   "Points needed to stay on level": "Poäng som behövs för att hålla sig på nivå",
   "Previous victories": "Tidigare segrar",
+  "Proceed to login": "Fortsätt till inloggning",
   "Proceed to payment method": "Gå vidare till betalningsmetod",
   "Public price from": "Offentligt pris från",
   "Public transport": "Kollektivtrafik",
diff --git a/server/routers/contentstack/contentPage/query.ts b/server/routers/contentstack/contentPage/query.ts
index bae7addbe..79ef83a4e 100644
--- a/server/routers/contentstack/contentPage/query.ts
+++ b/server/routers/contentstack/contentPage/query.ts
@@ -21,8 +21,6 @@ export const contentPageQueryRouter = router({
   get: contentstackExtendedProcedureUID.query(async ({ ctx }) => {
     const { lang, uid } = ctx
 
-    // TODO: Add logic to: check if Authed & Content Page URL is a "signup page", if so, redirect to home page.
-
     const contentPageRefsData = await fetchContentPageRefs(lang, uid)
     const contentPageRefs = validateContentPageRefs(
       contentPageRefsData,
diff --git a/types/components/blocks/dynamicContent.ts b/types/components/blocks/dynamicContent.ts
index b2c779e45..8d183bfd6 100644
--- a/types/components/blocks/dynamicContent.ts
+++ b/types/components/blocks/dynamicContent.ts
@@ -18,3 +18,16 @@ export interface LoyaltyLevelsProps extends PartialDynamicContent {
 export interface OverviewTableProps extends PartialDynamicContent {
   firstItem: boolean
 }
+
+export interface SignUpVerificationProps {
+  title: string
+  subtitle: string
+}
+
+export interface SignupFormWrapperProps {
+  dynamic_content: {
+    link: string
+    subtitle: string
+    title: string
+  }
+}
diff --git a/types/components/tracking.ts b/types/components/tracking.ts
index 92128d939..72aa6f853 100644
--- a/types/components/tracking.ts
+++ b/types/components/tracking.ts
@@ -78,3 +78,4 @@ export type TrackingPosition =
   | "top menu"
   | "hamburger menu"
   | "join scandic friends sidebar"
+  | "sign up verification"
diff --git a/types/enums/dynamicContent.ts b/types/enums/dynamicContent.ts
index 0661d51ae..0dcd29937 100644
--- a/types/enums/dynamicContent.ts
+++ b/types/enums/dynamicContent.ts
@@ -13,6 +13,7 @@ export namespace DynamicContentEnum {
       points_overview = "points_overview",
       previous_stays = "previous_stays",
       sign_up_form = "sign_up_form",
+      sign_up_verification = "sign_up_verification",
       soonest_stays = "soonest_stays",
       upcoming_stays = "upcoming_stays",
     }
@@ -31,6 +32,7 @@ export namespace DynamicContentEnum {
       components.points_overview,
       components.previous_stays,
       components.sign_up_form,
+      components.sign_up_verification,
       components.soonest_stays,
       components.upcoming_stays,
     ]

From 01b1d195eea49a0fe9084993d94b580e2a5d8ddc Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Thu, 3 Oct 2024 17:06:30 +0200
Subject: [PATCH 35/44] fix(SW-360): redirect verify step when authed as well

---
 .../Blocks/DynamicContent/SignUpVerification/index.tsx | 10 ++++++++++
 .../Blocks/DynamicContent/SignupFormWrapper/index.tsx  |  2 +-
 constants/routes/signup.ts                             |  2 --
 i18n/dictionaries/da.json                              |  2 +-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/components/Blocks/DynamicContent/SignUpVerification/index.tsx b/components/Blocks/DynamicContent/SignUpVerification/index.tsx
index eea95205a..47712107f 100644
--- a/components/Blocks/DynamicContent/SignUpVerification/index.tsx
+++ b/components/Blocks/DynamicContent/SignUpVerification/index.tsx
@@ -1,5 +1,11 @@
+import { redirect } from "next/navigation"
+
+import { overview } from "@/constants/routes/myPages"
+
+import { auth } from "@/auth"
 import LoginButton from "@/components/Current/Header/LoginButton"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./signUpVerification.module.css"
 
@@ -9,6 +15,10 @@ export default async function SignUpVerification({
   title,
   subtitle,
 }: SignUpVerificationProps) {
+  const session = await auth()
+  if (session) {
+    redirect(overview[getLang()])
+  }
   const intl = await getIntl()
 
   return (
diff --git a/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx b/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
index 6b9ab9673..f48260970 100644
--- a/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
+++ b/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
@@ -15,7 +15,7 @@ export default async function SignupFormWrapper({
 }) {
   const session = await auth()
   if (session) {
-    // We don't want to allow users to signup if they are already authenticated.
+    // We don't want to allow users to access signup if they are already authenticated.
     redirect(overview[getLang()])
   }
   return <Form {...dynamic_content} />
diff --git a/constants/routes/signup.ts b/constants/routes/signup.ts
index 12eca8615..82a39ee41 100644
--- a/constants/routes/signup.ts
+++ b/constants/routes/signup.ts
@@ -17,5 +17,3 @@ export const signupVerify: LangRoute = {
   da: `${signup.da}/bekraeft`,
   de: `${signup.de}/verifizieren`,
 }
-
-//   export const signup = [...Object.values(signupRoutes)]
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index cd2a0f089..6001f6fe4 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -23,7 +23,7 @@
   "As our Close Friend": "Som vores nære ven",
   "At latest": "Senest",
   "At the hotel": "På hotellet",
-  "Attraction": "Attraktion",
+  "Attractions": "Attraktioner",
   "Back to scandichotels.com": "Tilbage til scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Seng type",

From e84b3ca9806c5083304ebc5eb99a2f5c19586315 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Tue, 8 Oct 2024 13:02:50 +0200
Subject: [PATCH 36/44] fix(SW-360): Add eyeshow and eyehide icons

---
 components/Icons/EyeHide.tsx                  | 36 +++++++++++++++++++
 components/Icons/EyeShow.tsx                  | 36 +++++++++++++++++++
 components/Icons/get-icon-by-icon-name.ts     |  6 ++++
 components/Icons/index.tsx                    |  2 ++
 .../Form/NewPassword/index.tsx                | 19 +++++-----
 .../Form/NewPassword/newPassword.module.css   |  2 --
 types/components/icon.ts                      |  2 ++
 7 files changed, 91 insertions(+), 12 deletions(-)
 create mode 100644 components/Icons/EyeHide.tsx
 create mode 100644 components/Icons/EyeShow.tsx

diff --git a/components/Icons/EyeHide.tsx b/components/Icons/EyeHide.tsx
new file mode 100644
index 000000000..cc1db5926
--- /dev/null
+++ b/components/Icons/EyeHide.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function EyeHideIcon({ 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_69_3263"
+        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_69_3263)">
+        <path
+          d="M15.9625 13.3L14.6 11.9375C14.7834 11.0335 14.5521 10.2616 13.9063 9.62196C13.2604 8.98231 12.4792 8.74165 11.5625 8.89999L10.2 7.53749C10.4834 7.40832 10.775 7.31145 11.075 7.24686C11.375 7.18228 11.6834 7.14999 12 7.14999C13.2084 7.14999 14.2354 7.5729 15.0813 8.41874C15.9271 9.26457 16.35 10.2917 16.35 11.5C16.35 11.8167 16.3177 12.125 16.2531 12.425C16.1886 12.725 16.0917 13.0167 15.9625 13.3ZM19.05 16.3625L17.7125 15.05C18.3485 14.5667 18.9176 14.0292 19.4197 13.4375C19.9218 12.8458 20.3403 12.2 20.675 11.5C19.8584 9.83332 18.6709 8.51249 17.1125 7.53749C15.5542 6.56249 13.85 6.07499 12 6.07499C11.5167 6.07499 11.0396 6.1104 10.5688 6.18124C10.0979 6.25207 9.62919 6.35832 9.16252 6.49999L7.70002 5.03749C8.39169 4.75415 9.09591 4.54374 9.81267 4.40624C10.5294 4.26874 11.2585 4.19999 12 4.19999C14.2167 4.19999 16.25 4.78749 18.1 5.96249C19.95 7.13749 21.3625 8.71665 22.3375 10.7C22.4042 10.825 22.4521 10.9542 22.4813 11.0877C22.5104 11.2212 22.525 11.3586 22.525 11.5C22.525 11.6413 22.5125 11.7788 22.4875 11.9122C22.4625 12.0457 22.4209 12.1792 22.3625 12.3125C21.9875 13.1208 21.5188 13.8646 20.9563 14.5437C20.3938 15.2229 19.7584 15.8292 19.05 16.3625ZM12 18.8C9.81669 18.8 7.82502 18.2083 6.02502 17.025C4.22502 15.8417 2.79942 14.2901 1.74822 12.3702C1.66609 12.2401 1.60836 12.1013 1.57502 11.9539C1.54169 11.8064 1.52502 11.6552 1.52502 11.5C1.52502 11.3423 1.54077 11.1926 1.57225 11.0507C1.60373 10.9088 1.65882 10.7669 1.73752 10.625C2.07919 9.96665 2.46877 9.33332 2.90627 8.72499C3.34377 8.11665 3.84169 7.56665 4.40002 7.07499L2.32502 4.92499C2.15002 4.74054 2.06669 4.52151 2.07502 4.26791C2.08336 4.0143 2.17502 3.79999 2.35002 3.62499C2.52502 3.44999 2.74169 3.36249 3.00002 3.36249C3.25836 3.36249 3.47502 3.44999 3.65002 3.62499L20.3375 20.3125C20.5209 20.4958 20.6125 20.7167 20.6125 20.975C20.6125 21.2333 20.5167 21.4542 20.325 21.6375C20.1417 21.8125 19.9229 21.8979 19.6688 21.8937C19.4146 21.8896 19.2 21.8 19.025 21.625L15.5875 18.2375C15.0042 18.4208 14.4139 18.5604 13.8166 18.6562C13.2194 18.7521 12.6139 18.8 12 18.8ZM5.72502 8.37499C5.22502 8.80832 4.77086 9.2854 4.36252 9.80624C3.95419 10.3271 3.60836 10.8917 3.32502 11.5C4.14169 13.1667 5.32919 14.4875 6.88752 15.4625C8.44586 16.4375 10.15 16.925 12 16.925C12.3535 16.925 12.6981 16.9042 13.0339 16.8625C13.3696 16.8208 13.7084 16.7667 14.05 16.7L13.1 15.7C12.9167 15.75 12.7363 15.7875 12.5589 15.8125C12.3815 15.8375 12.1952 15.85 12 15.85C10.7917 15.85 9.76461 15.4271 8.91877 14.5812C8.07294 13.7354 7.65002 12.7083 7.65002 11.5C7.65002 11.3167 7.66252 11.1375 7.68752 10.9625C7.71252 10.7875 7.75002 10.6083 7.80002 10.425L5.72502 8.37499Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/EyeShow.tsx b/components/Icons/EyeShow.tsx
new file mode 100644
index 000000000..c3fdaf17d
--- /dev/null
+++ b/components/Icons/EyeShow.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function EyeShowIcon({ 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_69_3264"
+        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_69_3264)">
+        <path
+          d="M12 15.85C13.2083 15.85 14.2354 15.4271 15.0812 14.5813C15.9271 13.7354 16.35 12.7083 16.35 11.5C16.35 10.2917 15.9271 9.2646 15.0812 8.41876C14.2354 7.57293 13.2083 7.15001 12 7.15001C10.7916 7.15001 9.76456 7.57293 8.91873 8.41876C8.07289 9.2646 7.64998 10.2917 7.64998 11.5C7.64998 12.7083 8.07289 13.7354 8.91873 14.5813C9.76456 15.4271 10.7916 15.85 12 15.85ZM12.0029 14.15C11.2676 14.15 10.6416 13.8927 10.125 13.378C9.60831 12.8632 9.34998 12.2382 9.34998 11.503C9.34998 10.7677 9.60733 10.1417 10.122 9.62501C10.6367 9.10835 11.2617 8.85001 11.997 8.85001C12.7323 8.85001 13.3583 9.10736 13.875 9.62206C14.3916 10.1368 14.65 10.7618 14.65 11.4971C14.65 12.2324 14.3926 12.8583 13.8779 13.375C13.3632 13.8917 12.7382 14.15 12.0029 14.15ZM12.0019 18.8C9.8256 18.8 7.83956 18.2125 6.04373 17.0375C4.24789 15.8625 2.82498 14.3167 1.77498 12.4C1.69164 12.2583 1.63123 12.1124 1.59373 11.9622C1.55623 11.812 1.53748 11.6578 1.53748 11.4997C1.53748 11.3416 1.55623 11.1875 1.59373 11.0375C1.63123 10.8875 1.69164 10.7417 1.77498 10.6C2.82498 8.68335 4.24727 7.13751 6.04185 5.96251C7.83645 4.78751 9.82187 4.20001 11.9981 4.20001C14.1744 4.20001 16.1604 4.78751 17.9562 5.96251C19.7521 7.13751 21.175 8.68335 22.225 10.6C22.3083 10.7417 22.3687 10.8876 22.4062 11.0378C22.4437 11.1881 22.4625 11.3422 22.4625 11.5003C22.4625 11.6585 22.4437 11.8125 22.4062 11.9625C22.3687 12.1125 22.3083 12.2583 22.225 12.4C21.175 14.3167 19.7527 15.8625 17.9581 17.0375C16.1635 18.2125 14.1781 18.8 12.0019 18.8ZM11.9999 16.925C13.8583 16.925 15.5646 16.4375 17.1187 15.4625C18.6729 14.4875 19.8583 13.1667 20.675 11.5C19.8583 9.83335 18.6729 8.51251 17.1188 7.53751C15.5647 6.56251 13.8584 6.07501 12 6.07501C10.1417 6.07501 8.43539 6.56251 6.88123 7.53751C5.32706 8.51251 4.14164 9.83335 3.32498 11.5C4.14164 13.1667 5.32704 14.4875 6.88118 15.4625C8.43529 16.4375 10.1415 16.925 11.9999 16.925Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/get-icon-by-icon-name.ts b/components/Icons/get-icon-by-icon-name.ts
index 3a443cea2..9bfc4d9c7 100644
--- a/components/Icons/get-icon-by-icon-name.ts
+++ b/components/Icons/get-icon-by-icon-name.ts
@@ -29,6 +29,8 @@ import {
   DoorOpenIcon,
   ElectricBikeIcon,
   EmailIcon,
+  EyeHideIcon,
+  EyeShowIcon,
   FitnessIcon,
   GiftIcon,
   GlobeIcon,
@@ -114,6 +116,10 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
       return ElectricBikeIcon
     case IconName.Email:
       return EmailIcon
+    case IconName.EyeHide:
+      return EyeHideIcon
+    case IconName.EyeShow:
+      return EyeShowIcon
     case IconName.Facebook:
       return FacebookIcon
     case IconName.Fitness:
diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx
index f26933255..31b77b1e5 100644
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -28,6 +28,8 @@ export { default as EditIcon } from "./Edit"
 export { default as ElectricBikeIcon } from "./ElectricBike"
 export { default as EmailIcon } from "./Email"
 export { default as ErrorCircleIcon } from "./ErrorCircle"
+export { default as EyeHideIcon } from "./EyeHide"
+export { default as EyeShowIcon } from "./EyeShow"
 export { default as FitnessIcon } from "./Fitness"
 export { default as GiftIcon } from "./Gift"
 export { default as GlobeIcon } from "./Globe"
diff --git a/components/TempDesignSystem/Form/NewPassword/index.tsx b/components/TempDesignSystem/Form/NewPassword/index.tsx
index 558247e04..3cd9ac2f2 100644
--- a/components/TempDesignSystem/Form/NewPassword/index.tsx
+++ b/components/TempDesignSystem/Form/NewPassword/index.tsx
@@ -1,14 +1,18 @@
 "use client"
 
+import { useState } from "react"
 import { Text, TextField } from "react-aria-components"
 import { Controller, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import {
+  CheckIcon,
+  CloseIcon,
+  EyeHideIcon,
+  EyeShowIcon,
+  InfoCircleIcon,
+} from "@/components/Icons"
 import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
-import Image from "next/image"
-import { useState } from "react"
-
-import { CheckIcon, CloseIcon, InfoCircleIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import {
   PasswordValidatorKey,
@@ -85,12 +89,7 @@ export default function NewPassword({
                 intent="tertiary"
                 onClick={() => setPasswordVisible(!isPasswordVisible)}
               >
-                <Image
-                  src={`/_static/img/icons/${isPasswordVisible ? "eye-icon" : "eye-show"}.svg`}
-                  alt="eye"
-                  width={24}
-                  height={24}
-                />
+                {isPasswordVisible ? <EyeHideIcon /> : <EyeShowIcon />}
               </Button>
             </div>
             {field.value ? (
diff --git a/components/TempDesignSystem/Form/NewPassword/newPassword.module.css b/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
index 7d57c6850..4617dfa35 100644
--- a/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
+++ b/components/TempDesignSystem/Form/NewPassword/newPassword.module.css
@@ -81,8 +81,6 @@
   right: var(--Spacing-x2);
   top: 50%;
   transform: translateY(-50%);
-  width: 24px;
-  height: 24px;
 }
 
 .inputWrapper {
diff --git a/types/components/icon.ts b/types/components/icon.ts
index c0fdf6ee0..174d95cf6 100644
--- a/types/components/icon.ts
+++ b/types/components/icon.ts
@@ -32,6 +32,8 @@ export enum IconName {
   DoorOpen = "DoorOpen",
   ElectricBike = "ElectricBike",
   Email = "Email",
+  EyeHide = "EyeHide",
+  EyeShow = "EyeShow",
   Facebook = "Facebook",
   Fitness = "Fitness",
   Gift = "Gift",

From 2fce70e866178d3f9e282e9300a075edbbe605ad Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Tue, 8 Oct 2024 14:56:35 +0200
Subject: [PATCH 37/44] fix(SW-360): signup form props

---
 .../DynamicContent/SignUpVerification/index.tsx     |  3 +--
 .../DynamicContent/SignupFormWrapper/index.tsx      |  6 ++----
 components/Blocks/DynamicContent/index.tsx          |  2 +-
 components/TempDesignSystem/Form/Checkbox/index.tsx |  2 ++
 types/components/blocks/dynamicContent.ts           | 13 ++-----------
 types/components/form/registerForm.ts               |  2 +-
 6 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/components/Blocks/DynamicContent/SignUpVerification/index.tsx b/components/Blocks/DynamicContent/SignUpVerification/index.tsx
index 47712107f..3755b59b4 100644
--- a/components/Blocks/DynamicContent/SignUpVerification/index.tsx
+++ b/components/Blocks/DynamicContent/SignUpVerification/index.tsx
@@ -12,8 +12,7 @@ import styles from "./signUpVerification.module.css"
 import type { SignUpVerificationProps } from "@/types/components/blocks/dynamicContent"
 
 export default async function SignUpVerification({
-  title,
-  subtitle,
+  dynamic_content,
 }: SignUpVerificationProps) {
   const session = await auth()
   if (session) {
diff --git a/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx b/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
index f48260970..4c39dafc5 100644
--- a/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
+++ b/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
@@ -6,13 +6,11 @@ import { auth } from "@/auth"
 import Form from "@/components/Forms/Register"
 import { getLang } from "@/i18n/serverContext"
 
-import type { RegisterFormProps } from "@/types/components/form/registerForm"
+import { SignupFormWrapperProps } from "@/types/components/blocks/dynamicContent"
 
 export default async function SignupFormWrapper({
   dynamic_content,
-}: {
-  dynamic_content: RegisterFormProps
-}) {
+}: SignupFormWrapperProps) {
   const session = await auth()
   if (session) {
     // We don't want to allow users to access signup if they are already authenticated.
diff --git a/components/Blocks/DynamicContent/index.tsx b/components/Blocks/DynamicContent/index.tsx
index e03264f5d..31ba4009a 100644
--- a/components/Blocks/DynamicContent/index.tsx
+++ b/components/Blocks/DynamicContent/index.tsx
@@ -56,7 +56,7 @@ export default async function DynamicContent({
     case DynamicContentEnum.Blocks.components.sign_up_form:
       return <SignupFormWrapper dynamic_content={dynamic_content} />
     case DynamicContentEnum.Blocks.components.sign_up_verification:
-      return <SignUpVerification {...dynamic_content} />
+      return <SignUpVerification dynamic_content={dynamic_content} />
     case DynamicContentEnum.Blocks.components.soonest_stays:
       return <SoonestStays {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.upcoming_stays:
diff --git a/components/TempDesignSystem/Form/Checkbox/index.tsx b/components/TempDesignSystem/Form/Checkbox/index.tsx
index 8b2885ebc..cb4a68cde 100644
--- a/components/TempDesignSystem/Form/Checkbox/index.tsx
+++ b/components/TempDesignSystem/Form/Checkbox/index.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { Checkbox as AriaCheckbox } from "react-aria-components"
 import { useController, useFormContext } from "react-hook-form"
 
diff --git a/types/components/blocks/dynamicContent.ts b/types/components/blocks/dynamicContent.ts
index 8d183bfd6..ef01f9b1a 100644
--- a/types/components/blocks/dynamicContent.ts
+++ b/types/components/blocks/dynamicContent.ts
@@ -19,15 +19,6 @@ export interface OverviewTableProps extends PartialDynamicContent {
   firstItem: boolean
 }
 
-export interface SignUpVerificationProps {
-  title: string
-  subtitle: string
-}
+export interface SignupFormWrapperProps extends PartialDynamicContent {}
 
-export interface SignupFormWrapperProps {
-  dynamic_content: {
-    link: string
-    subtitle: string
-    title: string
-  }
-}
+export interface SignUpVerificationProps extends PartialDynamicContent {}
diff --git a/types/components/form/registerForm.ts b/types/components/form/registerForm.ts
index d4763dcab..41e783dd5 100644
--- a/types/components/form/registerForm.ts
+++ b/types/components/form/registerForm.ts
@@ -1,5 +1,5 @@
 export type RegisterFormProps = {
   link?: { href: string; text: string }
-  subtitle: string
+  subtitle?: string
   title: string
 }

From cae0648b2f2212a97fd80260b8ada4dfb3b26445 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 9 Oct 2024 13:30:12 +0200
Subject: [PATCH 38/44] fix(SW-360): terms and conditions URL's

---
 components/Forms/Register/index.tsx | 11 ++++++++++-
 constants/routes/signup.ts          | 14 ++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/components/Forms/Register/index.tsx b/components/Forms/Register/index.tsx
index 9e5a05f39..e154817ff 100644
--- a/components/Forms/Register/index.tsx
+++ b/components/Forms/Register/index.tsx
@@ -4,6 +4,8 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { signupTerms } from "@/constants/routes/signup"
+
 import { registerUser } from "@/actions/registerUser"
 import Button from "@/components/TempDesignSystem/Button"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
@@ -18,6 +20,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { toast } from "@/components/TempDesignSystem/Toasts"
+import useLang from "@/hooks/useLang"
 
 import { RegisterSchema, registerSchema } from "./schema"
 
@@ -27,6 +30,7 @@ import type { RegisterFormProps } from "@/types/components/form/registerForm"
 
 export default function Form({ link, subtitle, title }: RegisterFormProps) {
   const intl = useIntl()
+  const lang = useLang()
   const methods = useForm<RegisterSchema>({
     defaultValues: {
       firstName: "",
@@ -155,7 +159,12 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
                 {intl.formatMessage({
                   id: "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with",
                 })}{" "}
-                <Link variant="underscored" color="peach80" href="/privacy">
+                <Link
+                  variant="underscored"
+                  color="peach80"
+                  target="_blank"
+                  href={signupTerms[lang]}
+                >
                   {intl.formatMessage({ id: "Scandic's Privacy Policy." })}
                 </Link>
               </Body>
diff --git a/constants/routes/signup.ts b/constants/routes/signup.ts
index 82a39ee41..16d4f171d 100644
--- a/constants/routes/signup.ts
+++ b/constants/routes/signup.ts
@@ -17,3 +17,17 @@ export const signupVerify: LangRoute = {
   da: `${signup.da}/bekraeft`,
   de: `${signup.de}/verifizieren`,
 }
+
+/* No work has been scoped out to implement terms of privacy pages for new web yet,
+ * which is why these currently link to routes in current web.
+ * TODO: Align w. stakeholders, make tickets (and reference them here) to update these
+ * links when the time comes.
+ */
+export const signupTerms: LangRoute = {
+  en: "https://www.scandichotels.com/customer-service/rates-and-policies/privacy-policy",
+  sv: "https://www.scandichotels.se/kundservice/priser-och-bokningsregler/integritetspolicy",
+  no: "https://www.scandichotels.no/kundeservice/priser-og-bestillingsvilkar/personvernpolicy",
+  fi: "https://www.scandichotels.fi/asiakaspalvelu/hinnat-ja-varausehdot/tietosuojaseloste",
+  da: "https://www.scandichotels.dk/kundeservice/priser-og-bookingvilkar/persondatapolitik",
+  de: "https://www.scandichotels.de/kundenbetreuung/preise-und-richtlinien/datenschutzrichtlinie",
+}

From f726f860d1c41436010a9fc49780ea06fb9475ae Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 9 Oct 2024 13:34:58 +0200
Subject: [PATCH 39/44] fix(SW-360): set new date in UTC format

---
 components/TempDesignSystem/Form/Date/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/TempDesignSystem/Form/Date/index.tsx b/components/TempDesignSystem/Form/Date/index.tsx
index 311650fc2..a2c87401b 100644
--- a/components/TempDesignSystem/Form/Date/index.tsx
+++ b/components/TempDesignSystem/Form/Date/index.tsx
@@ -58,7 +58,8 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
       const newSegments = { ...dateSegments, [selector]: value }
 
       if (Object.values(newSegments).every((val) => val !== null)) {
-        const newDate = dt(new Date())
+        const newDate = dt()
+          .utc()
           .set("year", newSegments.year!)
           .set("month", newSegments.month!)
           .set("date", newSegments.date!)

From e3df8ea64f4978dfb8d0b9bae964387692780757 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 9 Oct 2024 13:58:31 +0200
Subject: [PATCH 40/44] chore(SW-360): move password form types

---
 components/TempDesignSystem/Form/NewPassword/index.tsx | 7 +++----
 types/components/form/newPassword.ts                   | 3 +++
 utils/passwordValidator.ts                             | 2 --
 3 files changed, 6 insertions(+), 6 deletions(-)
 create mode 100644 types/components/form/newPassword.ts

diff --git a/components/TempDesignSystem/Form/NewPassword/index.tsx b/components/TempDesignSystem/Form/NewPassword/index.tsx
index 3cd9ac2f2..070a282af 100644
--- a/components/TempDesignSystem/Form/NewPassword/index.tsx
+++ b/components/TempDesignSystem/Form/NewPassword/index.tsx
@@ -14,16 +14,15 @@ import {
 } from "@/components/Icons"
 import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
-import {
-  PasswordValidatorKey,
-  passwordValidators,
-} from "@/utils/passwordValidator"
+import { passwordValidators } from "@/utils/passwordValidator"
 
 import Button from "../../Button"
 import { IconProps, type NewPasswordProps } from "./newPassword"
 
 import styles from "./newPassword.module.css"
 
+import { PasswordValidatorKey } from "@/types/components/form/newPassword"
+
 export default function NewPassword({
   name = "newPassword",
   "aria-label": ariaLabel,
diff --git a/types/components/form/newPassword.ts b/types/components/form/newPassword.ts
new file mode 100644
index 000000000..cd6aa0c50
--- /dev/null
+++ b/types/components/form/newPassword.ts
@@ -0,0 +1,3 @@
+import { passwordValidators } from "@/utils/passwordValidator"
+
+export type PasswordValidatorKey = keyof typeof passwordValidators
diff --git a/utils/passwordValidator.ts b/utils/passwordValidator.ts
index 8a8d74778..a3a1fcd3d 100644
--- a/utils/passwordValidator.ts
+++ b/utils/passwordValidator.ts
@@ -25,8 +25,6 @@ export const passwordValidators = {
   },
 }
 
-export type PasswordValidatorKey = keyof typeof passwordValidators
-
 export const passwordValidator = (msg = "Required field") =>
   z
     .string()

From ac8f64994f09f18b1ac59ecd9f90cf6ce794f352 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Thu, 10 Oct 2024 08:29:40 +0200
Subject: [PATCH 41/44] fix(SW-360): available days in month

---
 .../TempDesignSystem/Form/Date/index.tsx      | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/components/TempDesignSystem/Form/Date/index.tsx b/components/TempDesignSystem/Form/Date/index.tsx
index a2c87401b..a0930a3a7 100644
--- a/components/TempDesignSystem/Form/Date/index.tsx
+++ b/components/TempDesignSystem/Form/Date/index.tsx
@@ -32,10 +32,12 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
     year: number | null
     month: number | null
     date: number | null
+    daysInMonth: number
   }>({
     year: null,
     month: null,
     date: null,
+    daysInMonth: 31,
   })
 
   const currentYear = new Date().getFullYear()
@@ -57,12 +59,24 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
         selector === DateName.month ? Number(select) - 1 : Number(select)
       const newSegments = { ...dateSegments, [selector]: value }
 
+      /**
+       * Update daysInMonth when year or month changes
+       * to ensure the user can't select a date that doesn't exist.
+       */
+      if (selector === DateName.year || selector === DateName.month) {
+        const year = selector === DateName.year ? value : newSegments.year
+        const month = selector === DateName.month ? value : newSegments.month
+        if (year !== null && month !== null) {
+          newSegments.daysInMonth = dt().year(year).month(month).daysInMonth()
+        }
+      }
+
       if (Object.values(newSegments).every((val) => val !== null)) {
         const newDate = dt()
           .utc()
           .set("year", newSegments.year!)
           .set("month", newSegments.month!)
-          .set("date", newSegments.date!)
+          .set("date", Math.min(newSegments.date!, newSegments.daysInMonth))
 
         setValue(name, newDate.format("YYYY-MM-DD"))
       }
@@ -100,16 +114,11 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
           {(segment) => {
             switch (segment.type) {
               case "day":
-                let days = []
-                if (segment.maxValue && segment.minValue) {
-                  days = rangeArray(segment.minValue, segment.maxValue).map(
-                    (day) => ({ value: day, label: `${day}` })
-                  )
-                } else {
-                  days = Array.from(Array(segment.maxValue).keys()).map(
-                    (i) => ({ value: i + 1, label: `${i + 1}` })
-                  )
-                }
+                const maxDays = dateSegments.daysInMonth
+                const days = rangeArray(1, maxDays).map((day) => ({
+                  value: day,
+                  label: `${day}`,
+                }))
                 return (
                   <div className={styles.day}>
                     <Select

From a84940aa8f3bf28516d320dd026ba0bdf03331f3 Mon Sep 17 00:00:00 2001
From: Simon Emanuelsson <simon.emanuelsson@scandichotels.com>
Date: Wed, 9 Oct 2024 12:44:00 +0200
Subject: [PATCH 42/44] feat: add summary card

---
 .../hotelreservation/[step]/layout.module.css |   8 +-
 .../hotelreservation/[step]/layout.tsx        |   4 +-
 .../Forms/BookingWidget/FormContent/index.tsx |   1 -
 .../Forms/BookingWidget/form.module.css       |   9 +-
 .../EnterDetails/Summary/index.tsx            | 165 ++++++++++++++++++
 .../EnterDetails/Summary/summary.module.css   |  38 ++++
 .../hotelSelectionHeader.module.css           |   9 +-
 .../SelectRate/Summary/index.tsx              |   6 -
 .../SelectRate/Summary/summary.module.css     |   2 -
 components/Icons/icon.module.css              |   5 +
 components/Icons/variants.ts                  |   1 +
 .../TempDesignSystem/Link/link.module.css     |   4 +
 components/TempDesignSystem/Link/variants.ts  |   1 +
 i18n/dictionaries/da.json                     |   3 +
 i18n/dictionaries/de.json                     |   3 +
 i18n/dictionaries/en.json                     |   3 +
 i18n/dictionaries/fi.json                     |   3 +
 i18n/dictionaries/no.json                     |   3 +
 i18n/dictionaries/sv.json                     |   3 +
 19 files changed, 253 insertions(+), 18 deletions(-)
 create mode 100644 components/HotelReservation/EnterDetails/Summary/index.tsx
 create mode 100644 components/HotelReservation/EnterDetails/Summary/summary.module.css
 delete mode 100644 components/HotelReservation/SelectRate/Summary/index.tsx
 delete mode 100644 components/HotelReservation/SelectRate/Summary/summary.module.css

diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css
index f40fca31d..4f337ccb2 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css
@@ -9,8 +9,12 @@
   grid-template-columns: 1fr 340px;
   grid-template-rows: auto 1fr;
   margin: var(--Spacing-x5) auto 0;
-  max-width: var(--max-width-navigation);
-  padding: var(--Spacing-x6) var(--Spacing-x2) 0;
+  padding-top: var(--Spacing-x6);
+  /* simulates padding on viewport smaller than --max-width-navigation */
+  width: min(
+    calc(100dvw - (var(--Spacing-x2) * 2)),
+    var(--max-width-navigation)
+  );
 }
 
 .summary {
diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx
index c234123a4..8ced3a7ce 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx
@@ -3,8 +3,9 @@ import { redirect } from "next/navigation"
 import { serverClient } from "@/lib/trpc/server"
 
 import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
+import Summary from "@/components/HotelReservation/EnterDetails/Summary"
 import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
-import Summary from "@/components/HotelReservation/SelectRate/Summary"
+import { setLang } from "@/i18n/serverContext"
 
 import styles from "./layout.module.css"
 
@@ -14,6 +15,7 @@ export default async function StepLayout({
   children,
   params,
 }: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  setLang(params.lang)
   const hotel = await serverClient().hotel.hotelData.get({
     hotelId: "811",
     language: params.lang,
diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx
index 8f3e8cbc4..c7f990c38 100644
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -7,7 +7,6 @@ import { dt } from "@/lib/dt"
 import DatePicker from "@/components/DatePicker"
 import { SearchIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
-import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import Input from "./Input"
diff --git a/components/Forms/BookingWidget/form.module.css b/components/Forms/BookingWidget/form.module.css
index 8514dffd7..22ef6be86 100644
--- a/components/Forms/BookingWidget/form.module.css
+++ b/components/Forms/BookingWidget/form.module.css
@@ -2,8 +2,10 @@
   align-items: center;
   display: grid;
   margin: 0 auto;
-  max-width: var(--max-width-navigation);
-  width: 100%;
+  width: min(
+    calc(100dvw - (var(--Spacing-x2) * 2)),
+    var(--max-width-navigation)
+  );
 }
 
 .form {
@@ -32,7 +34,8 @@
     padding: var(--Spacing-x-one-and-half) var(--Spacing-x2)
       var(--Spacing-x-one-and-half) var(--Spacing-x1);
   }
+
   .full {
-    padding: var(--Spacing-x1) var(--Spacing-x5);
+    padding: var(--Spacing-x1) 0;
   }
 }
diff --git a/components/HotelReservation/EnterDetails/Summary/index.tsx b/components/HotelReservation/EnterDetails/Summary/index.tsx
new file mode 100644
index 000000000..8efc418a1
--- /dev/null
+++ b/components/HotelReservation/EnterDetails/Summary/index.tsx
@@ -0,0 +1,165 @@
+import { dt } from "@/lib/dt"
+
+import { ArrowRightIcon, ChevronRightSmallIcon } from "@/components/Icons"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./summary.module.css"
+
+// TEMP
+const rooms = [
+  {
+    adults: 1,
+    type: "Cozy cabin",
+  },
+]
+
+export default async function Summary() {
+  const intl = await getIntl()
+  const lang = getLang()
+
+  const fromDate = dt().locale(lang).format("ddd, D MMM")
+  const toDate = dt().add(1, "day").locale(lang).format("ddd, D MMM")
+  const diff = dt(toDate).diff(fromDate, "days")
+
+  const totalAdults = rooms.reduce((total, room) => total + room.adults, 0)
+
+  const adults = intl.formatMessage(
+    { id: "booking.adults" },
+    { totalAdults: totalAdults }
+  )
+  const nights = intl.formatMessage(
+    { id: "booking.nights" },
+    { totalNights: diff }
+  )
+
+  const addOns = [
+    {
+      price: intl.formatMessage({ id: "Included" }),
+      title: intl.formatMessage({ id: "King bed" }),
+    },
+    {
+      price: intl.formatMessage({ id: "Included" }),
+      title: intl.formatMessage({ id: "Breakfast buffet" }),
+    },
+  ]
+
+  const mappedRooms = Array.from(
+    rooms
+      .reduce((acc, room) => {
+        const currentRoom = acc.get(room.type)
+        acc.set(room.type, {
+          total: currentRoom ? currentRoom.total + 1 : 1,
+          type: room.type,
+        })
+        return acc
+      }, new Map())
+      .values()
+  )
+
+  return (
+    <section className={styles.summary}>
+      <header>
+        <Body textTransform="bold">
+          {mappedRooms.map(
+            (room, idx) =>
+              `${room.total} x ${room.type}${mappedRooms.length > 1 && idx + 1 !== mappedRooms.length ? ", " : ""}`
+          )}
+        </Body>
+        <Body className={styles.date} color="textMediumContrast">
+          {fromDate}
+          <ArrowRightIcon color="uiTextMediumContrast" height={15} width={15} />
+          {toDate}
+        </Body>
+        <Link
+          className={styles.link}
+          color="baseButtonTextOnFillNormal"
+          href="#"
+          variant="icon"
+        >
+          {intl.formatMessage({ id: "See room details" })}
+          <ChevronRightSmallIcon
+            color="baseButtonTextOnFillNormal"
+            height={20}
+            width={20}
+          />
+        </Link>
+      </header>
+      <Divider color="primaryLightSubtle" />
+      <div className={styles.addOns}>
+        <div className={styles.entry}>
+          <Caption color="uiTextMediumContrast">
+            {`${nights}, ${adults}`}
+          </Caption>
+          <Caption color="uiTextHighContrast">
+            {intl.formatMessage(
+              { id: "{amount} {currency}" },
+              { amount: "4536", currency: "SEK" }
+            )}
+          </Caption>
+        </div>
+        {addOns.map((addOn) => (
+          <div className={styles.entry} key={addOn.title}>
+            <Caption color="uiTextMediumContrast">{addOn.title}</Caption>
+            <Caption color="uiTextHighContrast">{addOn.price}</Caption>
+          </div>
+        ))}
+      </div>
+      <Divider color="primaryLightSubtle" />
+      <div className={styles.total}>
+        <div>
+          <div className={styles.entry}>
+            <Body textTransform="bold">
+              {intl.formatMessage({ id: "Total incl VAT" })}
+            </Body>
+            <Body textTransform="bold">
+              {intl.formatMessage(
+                { id: "{amount} {currency}" },
+                { amount: "4686", currency: "SEK" }
+              )}
+            </Body>
+          </div>
+          <div className={styles.entry}>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage({ id: "Approx." })}
+            </Caption>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage(
+                { id: "{amount} {currency}" },
+                { amount: "455", currency: "EUR" }
+              )}
+            </Caption>
+          </div>
+        </div>
+        <div>
+          <div className={styles.entry}>
+            <Body color="red" textTransform="bold">
+              {intl.formatMessage({ id: "Member price" })}
+            </Body>
+            <Body color="red" textTransform="bold">
+              {intl.formatMessage(
+                { id: "{amount} {currency}" },
+                { amount: "4219", currency: "SEK" }
+              )}
+            </Body>
+          </div>
+          <div className={styles.entry}>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage({ id: "Approx." })}
+            </Caption>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage(
+                { id: "{amount} {currency}" },
+                { amount: "412", currency: "EUR" }
+              )}
+            </Caption>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/components/HotelReservation/EnterDetails/Summary/summary.module.css b/components/HotelReservation/EnterDetails/Summary/summary.module.css
new file mode 100644
index 000000000..16ca412c5
--- /dev/null
+++ b/components/HotelReservation/EnterDetails/Summary/summary.module.css
@@ -0,0 +1,38 @@
+.summary {
+  background-color: var(--Main-Grey-White);
+  border: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+  border-radius: var(--Corner-radius-Large);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x2);
+}
+
+.date {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x1);
+  justify-content: flex-start;
+}
+
+.link {
+  margin-top: var(--Spacing-x1);
+}
+
+.addOns {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+}
+
+.entry {
+  display: flex;
+  gap: var(--Spacing-x-half);
+  justify-content: space-between;
+}
+
+.total {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
diff --git a/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css b/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css
index 268bfe4fe..9eefdfb33 100644
--- a/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css
+++ b/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css
@@ -36,15 +36,18 @@
 
 @media (min-width: 768px) {
   .hotelSelectionHeader {
-    padding: var(--Spacing-x4) var(--Spacing-x5);
+    padding: var(--Spacing-x4) 0;
   }
 
   .hotelSelectionHeaderWrapper {
     flex-direction: row;
     gap: var(--Spacing-x6);
-    max-width: var(--max-width-navigation);
     margin: 0 auto;
-    width: 100%;
+    /* simulates padding on viewport smaller than --max-width-navigation */
+    width: min(
+      calc(100dvw - (var(--Spacing-x2) * 2)),
+      var(--max-width-navigation)
+    );
   }
 
   .titleContainer > h1 {
diff --git a/components/HotelReservation/SelectRate/Summary/index.tsx b/components/HotelReservation/SelectRate/Summary/index.tsx
deleted file mode 100644
index 1cff67248..000000000
--- a/components/HotelReservation/SelectRate/Summary/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-"use client"
-import styles from "./summary.module.css"
-
-export default function Summary() {
-  return <div className={styles.wrapper}>Summary TBI</div>
-}
diff --git a/components/HotelReservation/SelectRate/Summary/summary.module.css b/components/HotelReservation/SelectRate/Summary/summary.module.css
deleted file mode 100644
index ec81ef8e9..000000000
--- a/components/HotelReservation/SelectRate/Summary/summary.module.css
+++ /dev/null
@@ -1,2 +0,0 @@
-.wrapper {
-}
diff --git a/components/Icons/icon.module.css b/components/Icons/icon.module.css
index bb86becdb..ec5a15fd4 100644
--- a/components/Icons/icon.module.css
+++ b/components/Icons/icon.module.css
@@ -71,3 +71,8 @@
 .baseButtonTertiaryOnFillNormal * {
   fill: var(--Base-Button-Tertiary-On-Fill-Normal);
 }
+
+.baseButtonTextOnFillNormal,
+.baseButtonTextOnFillNormal * {
+  fill: var(--Base-Button-Text-On-Fill-Normal);
+}
diff --git a/components/Icons/variants.ts b/components/Icons/variants.ts
index 911d183da..d319c466e 100644
--- a/components/Icons/variants.ts
+++ b/components/Icons/variants.ts
@@ -6,6 +6,7 @@ const config = {
   variants: {
     color: {
       baseButtonTertiaryOnFillNormal: styles.baseButtonTertiaryOnFillNormal,
+      baseButtonTextOnFillNormal: styles.baseButtonTextOnFillNormal,
       baseIconLowContrast: styles.baseIconLowContrast,
       black: styles.black,
       blue: styles.blue,
diff --git a/components/TempDesignSystem/Link/link.module.css b/components/TempDesignSystem/Link/link.module.css
index abd860406..45b0c77f9 100644
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -107,6 +107,10 @@
   font-weight: 600;
 }
 
+.baseButtonTextOnFillNormal {
+  color: var(--Base-Button-Text-On-Fill-Normal);
+}
+
 .black {
   color: #000;
 }
diff --git a/components/TempDesignSystem/Link/variants.ts b/components/TempDesignSystem/Link/variants.ts
index 1930b8cb8..ba56381f5 100644
--- a/components/TempDesignSystem/Link/variants.ts
+++ b/components/TempDesignSystem/Link/variants.ts
@@ -8,6 +8,7 @@ export const linkVariants = cva(styles.link, {
       true: styles.active,
     },
     color: {
+      baseButtonTextOnFillNormal: styles.baseButtonTextOnFillNormal,
       black: styles.black,
       burgundy: styles.burgundy,
       none: "",
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index 76237d5a5..cc2c39504 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -17,6 +17,7 @@
   "An error occurred when adding a credit card, please try again later.": "Der opstod en fejl under tilføjelse af et kreditkort. Prøv venligst igen senere.",
   "An error occurred when trying to update profile.": "Der opstod en fejl under forsøg på at opdatere profilen.",
   "Any changes you've made will be lost.": "Alle ændringer, du har foretaget, går tabt.",
+  "Approx.": "Ca.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Er du sikker på, at du vil fjerne kortet, der slutter me {lastFourDigits} fra din medlemsprofil?",
   "Arrival date": "Ankomstdato",
   "As our": "Som vores {level}",
@@ -116,6 +117,7 @@
   "How do you want to sleep?": "Hvordan vil du sove?",
   "How it works": "Hvordan det virker",
   "Image gallery": "Billedgalleri",
+  "Included": "Inkluderet",
   "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Det er ikke muligt at administrere dine kommunikationspræferencer lige nu, prøv venligst igen senere eller kontakt support, hvis problemet fortsætter.",
   "Join Scandic Friends": "Tilmeld dig Scandic Friends",
   "Join at no cost": "Tilmeld dig uden omkostninger",
@@ -256,6 +258,7 @@
   "There are no transactions to display": "Der er ingen transaktioner at vise",
   "Things nearby HOTEL_NAME": "Ting i nærheden af {hotelName}",
   "Total Points": "Samlet antal point",
+  "Total incl VAT": "Inkl. moms",
   "Tourist": "Turist",
   "Transaction date": "Overførselsdato",
   "Transactions": "Transaktioner",
diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json
index 742890d7c..3e888cc2c 100644
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -17,6 +17,7 @@
   "An error occurred when adding a credit card, please try again later.": "Beim Hinzufügen einer Kreditkarte ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.",
   "An error occurred when trying to update profile.": "Beim Versuch, das Profil zu aktualisieren, ist ein Fehler aufgetreten.",
   "Any changes you've made will be lost.": "Alle Änderungen, die Sie vorgenommen haben, gehen verloren.",
+  "Approx.": "Ca.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Möchten Sie die Karte mit der Endung {lastFourDigits} wirklich aus Ihrem Mitgliedsprofil entfernen?",
   "Arrival date": "Ankunftsdatum",
   "As our": "Als unser {level}",
@@ -116,6 +117,7 @@
   "How do you want to sleep?": "Wie möchtest du schlafen?",
   "How it works": "Wie es funktioniert",
   "Image gallery": "Bildergalerie",
+  "Included": "Iinklusive",
   "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Es ist derzeit nicht möglich, Ihre Kommunikationseinstellungen zu verwalten. Bitte versuchen Sie es später erneut oder wenden Sie sich an den Support, wenn das Problem weiterhin besteht.",
   "Join Scandic Friends": "Treten Sie Scandic Friends bei",
   "Join at no cost": "Kostenlos beitreten",
@@ -256,6 +258,7 @@
   "There are no transactions to display": "Es sind keine Transaktionen zum Anzeigen vorhanden",
   "Things nearby HOTEL_NAME": "Dinge in der Nähe von {hotelName}",
   "Total Points": "Gesamtpunktzahl",
+  "Total incl VAT": "Gesamt inkl. MwSt.",
   "Tourist": "Tourist",
   "Transaction date": "Transaktionsdatum",
   "Transactions": "Transaktionen",
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index fa28c7399..2413a10b3 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -17,6 +17,7 @@
   "An error occurred when adding a credit card, please try again later.": "An error occurred when adding a credit card, please try again later.",
   "An error occurred when trying to update profile.": "An error occurred when trying to update profile.",
   "Any changes you've made will be lost.": "Any changes you've made will be lost.",
+  "Approx.": "Approx.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?",
   "Arrival date": "Arrival date",
   "As our": "As our {level}",
@@ -116,6 +117,7 @@
   "How do you want to sleep?": "How do you want to sleep?",
   "How it works": "How it works",
   "Image gallery": "Image gallery",
+  "Included": "Included",
   "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.",
   "Join Scandic Friends": "Join Scandic Friends",
   "Join at no cost": "Join at no cost",
@@ -256,6 +258,7 @@
   "There are no transactions to display": "There are no transactions to display",
   "Things nearby HOTEL_NAME": "Things nearby {hotelName}",
   "Total Points": "Total Points",
+  "Total incl VAT": "Total incl VAT",
   "Tourist": "Tourist",
   "Transaction date": "Transaction date",
   "Transactions": "Transactions",
diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json
index ec0b1ee0c..1a060824c 100644
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -17,6 +17,7 @@
   "An error occurred when adding a credit card, please try again later.": "Luottokorttia lisättäessä tapahtui virhe. Yritä myöhemmin uudelleen.",
   "An error occurred when trying to update profile.": "Profiilia päivitettäessä tapahtui virhe.",
   "Any changes you've made will be lost.": "Kaikki tekemäsi muutokset menetetään.",
+  "Approx.": "N.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Haluatko varmasti poistaa kortin, joka päättyy numeroon {lastFourDigits} jäsenprofiilistasi?",
   "Arrival date": "Saapumispäivä",
   "As our": "{level}-etu",
@@ -116,6 +117,7 @@
   "How do you want to sleep?": "Kuinka haluat nukkua?",
   "How it works": "Kuinka se toimii",
   "Image gallery": "Kuvagalleria",
+  "Included": "Sisälly hintaan",
   "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Viestintäasetuksiasi ei voi hallita juuri nyt. Yritä myöhemmin uudelleen tai ota yhteyttä tukeen, jos ongelma jatkuu.",
   "Join Scandic Friends": "Liity jäseneksi",
   "Join at no cost": "Liity maksutta",
@@ -257,6 +259,7 @@
   "There are no transactions to display": "Näytettäviä tapahtumia ei ole",
   "Things nearby HOTEL_NAME": "Lähellä olevia asioita {hotelName}",
   "Total Points": "Kokonaispisteet",
+  "Total incl VAT": "Yhteensä sis. alv",
   "Tourist": "Turisti",
   "Transaction date": "Tapahtuman päivämäärä",
   "Transactions": "Tapahtumat",
diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json
index 4a7ab2908..71aa12b94 100644
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -17,6 +17,7 @@
   "An error occurred when adding a credit card, please try again later.": "Det oppstod en feil ved å legge til et kredittkort. Prøv igjen senere.",
   "An error occurred when trying to update profile.": "Det oppstod en feil under forsøk på å oppdatere profilen.",
   "Any changes you've made will be lost.": "Eventuelle endringer du har gjort, går tapt.",
+  "Approx.": "Ca.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Er du sikker på at du vil fjerne kortet som slutter på {lastFourDigits} fra medlemsprofilen din?",
   "Arrival date": "Ankomstdato",
   "As our": "Som vår {level}",
@@ -115,6 +116,7 @@
   "How do you want to sleep?": "Hvordan vil du sove?",
   "How it works": "Hvordan det fungerer",
   "Image gallery": "Bildegalleri",
+  "Included": "Inkludert",
   "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Det er ikke mulig å administrere kommunikasjonspreferansene dine akkurat nå, prøv igjen senere eller kontakt support hvis problemet vedvarer.",
   "Join Scandic Friends": "Bli med i Scandic Friends",
   "Join at no cost": "Bli med uten kostnad",
@@ -255,6 +257,7 @@
   "There are no transactions to display": "Det er ingen transaksjoner å vise",
   "Things nearby HOTEL_NAME": "Ting i nærheten av {hotelName}",
   "Total Points": "Totale poeng",
+  "Total incl VAT": "Sum inkl mva",
   "Tourist": "Turist",
   "Transaction date": "Transaksjonsdato",
   "Transactions": "Transaksjoner",
diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json
index 28c7a9889..eb8269063 100644
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -17,6 +17,7 @@
   "An error occurred when adding a credit card, please try again later.": "Ett fel uppstod när ett kreditkort lades till, försök igen senare.",
   "An error occurred when trying to update profile.": "Ett fel uppstod när du försökte uppdatera profilen.",
   "Any changes you've made will be lost.": "Alla ändringar du har gjort kommer att gå förlorade.",
+  "Approx.": "Ca.",
   "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Är du säker på att du vill ta bort kortet som slutar med {lastFourDigits} från din medlemsprofil?",
   "Arrival date": "Ankomstdatum",
   "As our": "Som vår {level}",
@@ -116,6 +117,7 @@
   "How do you want to sleep?": "Hur vill du sova?",
   "How it works": "Hur det fungerar",
   "Image gallery": "Bildgalleri",
+  "Included": "Inkluderad",
   "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Det gick inte att hantera dina kommunikationsinställningar just nu, försök igen senare eller kontakta supporten om problemet kvarstår.",
   "Join Scandic Friends": "Gå med i Scandic Friends",
   "Join at no cost": "Gå med utan kostnad",
@@ -256,6 +258,7 @@
   "There are no transactions to display": "Det finns inga transaktioner att visa",
   "Things nearby HOTEL_NAME": "Saker i närheten av {hotelName}",
   "Total Points": "Poäng totalt",
+  "Total incl VAT": "Totalt inkl moms",
   "Tourist": "Turist",
   "Transaction date": "Transaktionsdatum",
   "Transactions": "Transaktioner",

From 87fb4d79ddf4020437498a187ae976a128390ac0 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Thu, 10 Oct 2024 09:37:38 +0200
Subject: [PATCH 43/44] fix(SW-360): service procedure update + contentyp
 layout fix

---
 actions/registerUser.ts                                       | 4 ++--
 .../(live)/(public)/[contentType]/[uid]/layout.module.css     | 1 -
 server/trpc.ts                                                | 4 ++--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/actions/registerUser.ts b/actions/registerUser.ts
index 2429fb925..11afb22f4 100644
--- a/actions/registerUser.ts
+++ b/actions/registerUser.ts
@@ -5,7 +5,7 @@ import { z } from "zod"
 
 import { signupVerify } from "@/constants/routes/signup"
 import * as api from "@/lib/api"
-import { profileServiceServerActionProcedure } from "@/server/trpc"
+import { serviceServerActionProcedure } from "@/server/trpc"
 
 import { registerSchema } from "@/components/Forms/Register/schema"
 import { passwordValidator } from "@/utils/passwordValidator"
@@ -28,7 +28,7 @@ const registerUserPayload = z.object({
   password: passwordValidator("Password is required"),
 })
 
-export const registerUser = profileServiceServerActionProcedure
+export const registerUser = serviceServerActionProcedure
   .input(registerSchema)
   .mutation(async function ({ ctx, input }) {
     const payload = {
diff --git a/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css b/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
index af1b93963..9cfb8be93 100644
--- a/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
+++ b/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
@@ -5,6 +5,5 @@
   gap: var(--Spacing-x3);
   grid-template-rows: auto 1fr;
   position: relative;
-  max-width: var(--max-width);
   margin: 0 auto;
 }
diff --git a/server/trpc.ts b/server/trpc.ts
index 4dccbb7f5..4eea99c53 100644
--- a/server/trpc.ts
+++ b/server/trpc.ts
@@ -140,9 +140,9 @@ export const serverActionProcedure = t.procedure.experimental_caller(
   })
 )
 
-export const profileServiceServerActionProcedure = serverActionProcedure.use(
+export const serviceServerActionProcedure = serverActionProcedure.use(
   async (opts) => {
-    const { access_token } = await fetchServiceToken(["profile"])
+    const { access_token } = await getServiceToken()
     if (!access_token) {
       throw internalServerError("Failed to obtain service token")
     }

From 49385889162d91c0da29e047ba5a9538923e4ce8 Mon Sep 17 00:00:00 2001
From: Simon Emanuelsson <simon.emanuelsson@scandichotels.com>
Date: Thu, 10 Oct 2024 09:32:06 +0200
Subject: [PATCH 44/44] fix: re-add user fetch for enter details

---
 .../(live)/(public)/hotelreservation/[step]/page.tsx     | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
index b853fc9bc..6f51260e4 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
@@ -43,6 +43,8 @@ export default function StepPage({
       language: params.lang,
     })
 
+  const { data: userData } = trpc.user.getSafely.useQuery()
+
   if (loadingHotel) {
     return <LoadingSpinner />
   }
@@ -70,6 +72,11 @@ export default function StepPage({
     }
   }
 
+  let user = null
+  if (userData && !("error" in userData)) {
+    user = userData
+  }
+
   return (
     <section>
       <SectionAccordion
@@ -97,7 +104,7 @@ export default function StepPage({
         label={intl.formatMessage({ id: "Enter your details" })}
         path="/details"
       >
-        <Details user={null} />
+        <Details user={user} />
       </SectionAccordion>
       <SectionAccordion
         header="Payment"