From ec2790a16e19bac6aa08d4edf51133b03f300293 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Thu, 10 Oct 2024 09:52:23 +0200
Subject: [PATCH 01/69] feat:sw-222 check if bookingUrl is linking to current
 or external page and use an anchor vs link element depending on it

---
 .../DynamicContent/Stays/StayCard/index.tsx   | 36 ++++++++++++++++---
 .../Stays/StayCard/stay.module.css            |  4 +++
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/components/Blocks/DynamicContent/Stays/StayCard/index.tsx b/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
index 5ab6c0b5d..506df2e65 100644
--- a/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
+++ b/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
@@ -1,4 +1,6 @@
 "use client"
+import { useEffect, useState } from "react"
+
 import { dt } from "@/lib/dt"
 
 import { CalendarIcon } from "@/components/Icons"
@@ -12,8 +14,27 @@ import styles from "./stay.module.css"
 
 import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
 
+const useCheckIfExternal = (bookingUrl: string) => {
+  const [isExternal, setIsExternal] = useState(false)
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const hostName = window.location.hostname
+      const bookingURL = new URL(bookingUrl)
+
+      const hostsMatch = hostName === bookingURL.hostname
+      const langRouteRegex = /\/[a-zA-Z]{2}\//
+
+      setIsExternal(!hostsMatch || !langRouteRegex.test(bookingURL.pathname))
+    }
+  }, [bookingUrl])
+
+  return isExternal
+}
+
 export default function StayCard({ stay }: StayCardProps) {
   const lang = useLang()
+
   const { checkinDate, checkoutDate, hotelInformation, bookingUrl } =
     stay.attributes
 
@@ -24,8 +45,13 @@ export default function StayCard({ stay }: StayCardProps) {
   const departDate = depart.format("DD MMM YYYY")
   const departDateTime = depart.format("YYYY-MM-DD")
 
-  return (
-    <Link href={bookingUrl}>
+  // TODO: Remove this check (and hook) and only return <Link /> when current web is deleted
+  const isExternal = useCheckIfExternal(bookingUrl)
+
+  const linkProps = {
+    href: bookingUrl,
+    className: styles.link,
+    children: (
       <article className={styles.stay}>
         <Image
           className={styles.image}
@@ -50,6 +76,8 @@ export default function StayCard({ stay }: StayCardProps) {
           </div>
         </footer>
       </article>
-    </Link>
-  )
+    ),
+  }
+
+  return isExternal ? <a {...linkProps} /> : <Link {...linkProps} />
 }
diff --git a/components/Blocks/DynamicContent/Stays/StayCard/stay.module.css b/components/Blocks/DynamicContent/Stays/StayCard/stay.module.css
index 1d3a685d7..995aa102a 100644
--- a/components/Blocks/DynamicContent/Stays/StayCard/stay.module.css
+++ b/components/Blocks/DynamicContent/Stays/StayCard/stay.module.css
@@ -6,6 +6,10 @@
   overflow: hidden;
 }
 
+.link {
+  text-decoration: none;
+}
+
 .stay:hover {
   border: 1.5px solid var(--Base-Border-Hover);
 }

From 3cf66e308b0eb2f5b2d0934d415cbd8e6c8b4c19 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Thu, 10 Oct 2024 11:05:00 +0200
Subject: [PATCH 02/69] Fixed regex so it only match urls that starts with lang

---
 components/Blocks/DynamicContent/Stays/StayCard/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Blocks/DynamicContent/Stays/StayCard/index.tsx b/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
index 506df2e65..d20ffe496 100644
--- a/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
+++ b/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
@@ -23,7 +23,7 @@ const useCheckIfExternal = (bookingUrl: string) => {
       const bookingURL = new URL(bookingUrl)
 
       const hostsMatch = hostName === bookingURL.hostname
-      const langRouteRegex = /\/[a-zA-Z]{2}\//
+      const langRouteRegex = /^\/[a-zA-Z]{2}\//
 
       setIsExternal(!hostsMatch || !langRouteRegex.test(bookingURL.pathname))
     }

From fd3cd053a242814cce4891bd19696552955c54e9 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Tue, 15 Oct 2024 15:48:23 +0200
Subject: [PATCH 03/69] feat(sw-452): Implement select room form submit

---
 .../RoomSelection/FlexibilityOption/index.tsx |  2 +
 .../RoomSelection/RateSummary/index.tsx       | 20 ++++-----
 .../RoomSelection/RoomCard/index.tsx          |  3 ++
 .../SelectRate/RoomSelection/index.tsx        | 41 +++++++++++++++++--
 .../SelectRate/RoomSelection/utils.ts         | 23 +++++++++++
 .../selectRate/flexibilityOption.ts           |  9 +++-
 .../hotelReservation/selectRate/selectRate.ts | 23 +++++++++--
 7 files changed, 101 insertions(+), 20 deletions(-)
 create mode 100644 components/HotelReservation/SelectRate/RoomSelection/utils.ts

diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
index 519eef78c..30d5d5264 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
@@ -18,6 +18,7 @@ export default function FlexibilityOption({
   paymentTerm,
   priceInformation,
   roomType,
+  roomTypeCode,
   handleSelectRate,
 }: FlexibilityOptionProps) {
   const [rootDiv, setRootDiv] = useState<Element | undefined>(undefined)
@@ -46,6 +47,7 @@ export default function FlexibilityOption({
 
   function onChange() {
     const rate = {
+      roomTypeCode: roomTypeCode,
       roomType: roomType,
       priceName: name,
       public: publicPrice,
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
index 29d4b0740..b929bfe76 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
@@ -24,17 +24,15 @@ export default function RateSummary({
       </div>
       <div className={styles.summaryPrice}>
         <div className={styles.summaryPriceText}>
-          <>
-            <Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
-              {priceToShow?.localPrice.pricePerStay}{" "}
-              {priceToShow?.localPrice.currency}
-            </Subtitle>
-            <Body color="uiTextMediumContrast">
-              {intl.formatMessage({ id: "Approx." })}{" "}
-              {priceToShow?.requestedPrice?.pricePerStay}{" "}
-              {priceToShow?.requestedPrice?.currency}
-            </Body>
-          </>
+          <Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
+            {priceToShow?.localPrice.pricePerStay}{" "}
+            {priceToShow?.localPrice.currency}
+          </Subtitle>
+          <Body color="uiTextMediumContrast">
+            {intl.formatMessage({ id: "Approx." })}{" "}
+            {priceToShow?.requestedPrice?.pricePerStay}{" "}
+            {priceToShow?.requestedPrice?.currency}
+          </Body>
         </div>
         <Button type="submit" theme="base">
           {intl.formatMessage({ id: "Continue" })}
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
index 1397068e1..87b0143b5 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
@@ -116,6 +116,7 @@ export default function RoomCard({
               priceInformation={getPriceForRate(saveRate)}
               handleSelectRate={handleSelectRate}
               roomType={roomConfiguration.roomType}
+              roomTypeCode={roomConfiguration.roomTypeCode}
             />
             <FlexibilityOption
               name={intl.formatMessage({ id: "Free rebooking" })}
@@ -125,6 +126,7 @@ export default function RoomCard({
               priceInformation={getPriceForRate(changeRate)}
               handleSelectRate={handleSelectRate}
               roomType={roomConfiguration.roomType}
+              roomTypeCode={roomConfiguration.roomTypeCode}
             />
             <FlexibilityOption
               name={intl.formatMessage({ id: "Free cancellation" })}
@@ -134,6 +136,7 @@ export default function RoomCard({
               priceInformation={getPriceForRate(flexRate)}
               handleSelectRate={handleSelectRate}
               roomType={roomConfiguration.roomType}
+              roomTypeCode={roomConfiguration.roomTypeCode}
             />
           </div>
         </div>
diff --git a/components/HotelReservation/SelectRate/RoomSelection/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
index 7d1c15d6d..2eefefe85 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
@@ -4,6 +4,7 @@ import { useState } from "react"
 
 import RateSummary from "./RateSummary"
 import RoomCard from "./RoomCard"
+import { getHotelReservationQueryParams } from "./utils"
 
 import styles from "./roomSelection.module.css"
 
@@ -19,12 +20,43 @@ export default function RoomSelection({
 
   const router = useRouter()
   const searchParams = useSearchParams()
+  const isUserLoggedIn = !!user
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()
+    const searchParamsObject = getHotelReservationQueryParams(searchParams)
+
+    /**
+     * These are the query params that are used on current web and should come from the Booking Widget Search Submit.
+     * Might need to be changed when Search Submit in the Booking Widget is implemented.
+     */
     const queryParams = new URLSearchParams(searchParams)
-    queryParams.set("roomClass", e.currentTarget.roomClass?.value)
-    queryParams.set("flexibility", e.currentTarget.flexibility?.value)
+
+    searchParamsObject.room.forEach((item, index) => {
+      queryParams.set(`room[${index}].adults`, item.adults.toString())
+
+      if (Array.isArray(item.child)) {
+        item.child.forEach((child, childIndex) => {
+          queryParams.set(
+            `room[${index}].child[${childIndex}].age`,
+            child.age.toString()
+          )
+          queryParams.set(`room[${index}].child[${childIndex}].bed`, child.bed)
+        })
+      }
+
+      queryParams.set(
+        `room[${index}].roomtypecode`,
+        rateSummary?.roomTypeCode || ""
+      )
+      queryParams.set(
+        `room[${index}].ratecode`,
+        isUserLoggedIn
+          ? rateSummary?.member?.rateCode || ""
+          : rateSummary?.public?.rateCode || ""
+      )
+    })
+
     router.push(`select-bed?${queryParams}`)
   }
 
@@ -48,7 +80,10 @@ export default function RoomSelection({
           ))}
         </ul>
         {rateSummary && (
-          <RateSummary rateSummary={rateSummary} isUserLoggedIn={!!user} />
+          <RateSummary
+            rateSummary={rateSummary}
+            isUserLoggedIn={isUserLoggedIn}
+          />
         )}
       </form>
     </div>
diff --git a/components/HotelReservation/SelectRate/RoomSelection/utils.ts b/components/HotelReservation/SelectRate/RoomSelection/utils.ts
new file mode 100644
index 000000000..df8562504
--- /dev/null
+++ b/components/HotelReservation/SelectRate/RoomSelection/utils.ts
@@ -0,0 +1,23 @@
+import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
+
+function getHotelReservationQueryParams(searchParams: URLSearchParams) {
+  const searchParamsObject: SelectRateSearchParams = Array.from(
+    searchParams.entries()
+  ).reduce((acc, [key, value]) => {
+    const keys = key.replace(/\]/g, "").split(/\[|\./) // Split keys by '[' or '.'
+    keys.reduce((nestedAcc, k, i) => {
+      if (i === keys.length - 1) {
+        nestedAcc[k] = value // Assign value at the last key
+      } else {
+        if (!nestedAcc[k]) {
+          nestedAcc[k] = isNaN(Number(keys[i + 1])) ? {} : [] // Initialize as array or object
+        }
+      }
+      return nestedAcc[k]
+    }, acc)
+    return acc
+  }, {} as SelectRateSearchParams)
+  return searchParamsObject
+}
+
+export { getHotelReservationQueryParams }
diff --git a/types/components/hotelReservation/selectRate/flexibilityOption.ts b/types/components/hotelReservation/selectRate/flexibilityOption.ts
index 473de563b..1835c3b65 100644
--- a/types/components/hotelReservation/selectRate/flexibilityOption.ts
+++ b/types/components/hotelReservation/selectRate/flexibilityOption.ts
@@ -1,6 +1,10 @@
 import { z } from "zod"
 
-import { Product, productTypePriceSchema } from "@/server/routers/hotels/output"
+import {
+  Product,
+  productTypePriceSchema,
+  RoomConfiguration,
+} from "@/server/routers/hotels/output"
 
 import { Rate } from "./selectRate"
 
@@ -12,7 +16,8 @@ export type FlexibilityOptionProps = {
   value: string
   paymentTerm: string
   priceInformation?: Array<string>
-  roomType: string
+  roomType: RoomConfiguration["roomType"]
+  roomTypeCode: RoomConfiguration["roomTypeCode"]
   handleSelectRate: (rate: Rate) => void
 }
 
diff --git a/types/components/hotelReservation/selectRate/selectRate.ts b/types/components/hotelReservation/selectRate/selectRate.ts
index 43152f11b..f806223c6 100644
--- a/types/components/hotelReservation/selectRate/selectRate.ts
+++ b/types/components/hotelReservation/selectRate/selectRate.ts
@@ -1,13 +1,28 @@
-import { Product } from "@/server/routers/hotels/output"
+import { Product, RoomConfiguration } from "@/server/routers/hotels/output"
+
+interface Child {
+  bed: string
+  age: number
+}
+
+interface Room {
+  adults: number
+  roomtypecode: string
+  ratecode: string
+  child: Child[]
+}
 
 export interface SelectRateSearchParams {
-  fromDate: string
-  toDate: string
   hotel: string
+  fromdate: string
+  todate: string
+  room: Room[]
+  [key: string]: any
 }
 
 export interface Rate {
-  roomType: string
+  roomType: RoomConfiguration["roomType"]
+  roomTypeCode: RoomConfiguration["roomTypeCode"]
   priceName: string
   public: Product["productType"]["public"]
   member: Product["productType"]["member"]

From 420f3210e894c518041ce083124dccc65cd380cb Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Wed, 16 Oct 2024 15:05:13 +0200
Subject: [PATCH 04/69] feat(sw-452): Added correct query params

---
 .../SelectRate/RoomSelection/index.tsx        | 36 ++++++-------------
 1 file changed, 11 insertions(+), 25 deletions(-)

diff --git a/components/HotelReservation/SelectRate/RoomSelection/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
index 2eefefe85..efa7f2b3f 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
@@ -26,35 +26,21 @@ export default function RoomSelection({
     e.preventDefault()
     const searchParamsObject = getHotelReservationQueryParams(searchParams)
 
-    /**
-     * These are the query params that are used on current web and should come from the Booking Widget Search Submit.
-     * Might need to be changed when Search Submit in the Booking Widget is implemented.
-     */
     const queryParams = new URLSearchParams(searchParams)
 
     searchParamsObject.room.forEach((item, index) => {
-      queryParams.set(`room[${index}].adults`, item.adults.toString())
-
-      if (Array.isArray(item.child)) {
-        item.child.forEach((child, childIndex) => {
-          queryParams.set(
-            `room[${index}].child[${childIndex}].age`,
-            child.age.toString()
-          )
-          queryParams.set(`room[${index}].child[${childIndex}].bed`, child.bed)
-        })
+      if (rateSummary?.roomTypeCode) {
+        queryParams.set(`room[${index}].roomtype`, rateSummary.roomTypeCode)
+      }
+      if (rateSummary?.public?.rateCode) {
+        queryParams.set(`room[${index}].ratecode`, rateSummary.public.rateCode)
+      }
+      if (rateSummary?.member?.rateCode) {
+        queryParams.set(
+          `room[${index}].counterratecode`,
+          rateSummary.member.rateCode
+        )
       }
-
-      queryParams.set(
-        `room[${index}].roomtypecode`,
-        rateSummary?.roomTypeCode || ""
-      )
-      queryParams.set(
-        `room[${index}].ratecode`,
-        isUserLoggedIn
-          ? rateSummary?.member?.rateCode || ""
-          : rateSummary?.public?.rateCode || ""
-      )
     })
 
     router.push(`select-bed?${queryParams}`)

From 7b1e2d8a06a3acc72b67bc980ef6026af2abd70e Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Thu, 17 Oct 2024 09:36:49 +0200
Subject: [PATCH 05/69] feat(sw-452): get searchParams and fetch availability

---
 .../(public)/hotelreservation/select-rate/page.tsx    | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
index fdd5436f3..8767b8ae0 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
@@ -15,6 +15,11 @@ export default async function SelectRatePage({
 }: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
   setLang(params.lang)
 
+  console.log("searchParams", searchParams)
+
+  const roomParams = new URLSearchParams(searchParams)
+  const adults = roomParams.get("room[0].adults") || "1" // Default to '1' if not found
+
   const [hotelData, roomConfigurations, user] = await Promise.all([
     serverClient().hotel.hotelData.get({
       hotelId: searchParams.hotel,
@@ -23,9 +28,9 @@ export default async function SelectRatePage({
     }),
     serverClient().hotel.availability.rooms({
       hotelId: parseInt(searchParams.hotel, 10),
-      roomStayStartDate: "2024-11-02",
-      roomStayEndDate: "2024-11-03",
-      adults: 1,
+      roomStayStartDate: searchParams.fromDate,
+      roomStayEndDate: searchParams.toDate,
+      adults: parseInt(adults, 10),
     }),
     getProfileSafely(),
   ])

From a9674316728b18839a1272dd77fa15f9023771bc Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Thu, 17 Oct 2024 09:39:06 +0200
Subject: [PATCH 06/69] feat(sw-452): remove console log

---
 .../(live)/(public)/hotelreservation/select-rate/page.tsx       | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
index 8767b8ae0..4dd231574 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
@@ -15,8 +15,6 @@ export default async function SelectRatePage({
 }: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
   setLang(params.lang)
 
-  console.log("searchParams", searchParams)
-
   const roomParams = new URLSearchParams(searchParams)
   const adults = roomParams.get("room[0].adults") || "1" // Default to '1' if not found
 

From fce9ef1b6166fdf47a3ca54c47e1d18e7ee03425 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Thu, 17 Oct 2024 10:10:28 +0200
Subject: [PATCH 07/69] feat(sw-452): updated typing on util

---
 .../hotelreservation/select-rate/page.tsx     |  9 +++--
 .../RoomSelection/FlexibilityOption/index.tsx |  4 +-
 .../SelectRate/RoomSelection/index.tsx        |  2 +-
 .../SelectRate/RoomSelection/utils.ts         | 37 +++++++++++--------
 .../hotelReservation/selectRate/selectRate.ts |  2 +-
 5 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
index 4dd231574..44f3dbd15 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
@@ -2,6 +2,7 @@ import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
+import getHotelReservationQueryParams from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
@@ -15,8 +16,10 @@ export default async function SelectRatePage({
 }: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
   setLang(params.lang)
 
-  const roomParams = new URLSearchParams(searchParams)
-  const adults = roomParams.get("room[0].adults") || "1" // Default to '1' if not found
+  const selecetRoomParams = new URLSearchParams(searchParams)
+  const selecetRoomParamsObject =
+    getHotelReservationQueryParams(selecetRoomParams)
+  const adults = selecetRoomParamsObject.room[0].adults // TODO: Handle multiple rooms
 
   const [hotelData, roomConfigurations, user] = await Promise.all([
     serverClient().hotel.hotelData.get({
@@ -28,7 +31,7 @@ export default async function SelectRatePage({
       hotelId: parseInt(searchParams.hotel, 10),
       roomStayStartDate: searchParams.fromDate,
       roomStayEndDate: searchParams.toDate,
-      adults: parseInt(adults, 10),
+      adults: adults,
     }),
     getProfileSafely(),
   ])
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
index 30d5d5264..fc2b4d819 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
@@ -47,8 +47,8 @@ export default function FlexibilityOption({
 
   function onChange() {
     const rate = {
-      roomTypeCode: roomTypeCode,
-      roomType: roomType,
+      roomTypeCode,
+      roomType,
       priceName: name,
       public: publicPrice,
       member: memberPrice,
diff --git a/components/HotelReservation/SelectRate/RoomSelection/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
index efa7f2b3f..c4c5e2e87 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
@@ -4,7 +4,7 @@ import { useState } from "react"
 
 import RateSummary from "./RateSummary"
 import RoomCard from "./RoomCard"
-import { getHotelReservationQueryParams } from "./utils"
+import getHotelReservationQueryParams from "./utils"
 
 import styles from "./roomSelection.module.css"
 
diff --git a/components/HotelReservation/SelectRate/RoomSelection/utils.ts b/components/HotelReservation/SelectRate/RoomSelection/utils.ts
index df8562504..e47a0da70 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/utils.ts
+++ b/components/HotelReservation/SelectRate/RoomSelection/utils.ts
@@ -1,23 +1,28 @@
 import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
 
 function getHotelReservationQueryParams(searchParams: URLSearchParams) {
-  const searchParamsObject: SelectRateSearchParams = Array.from(
+  const searchParamsObject: Record<string, unknown> = Array.from(
     searchParams.entries()
-  ).reduce((acc, [key, value]) => {
-    const keys = key.replace(/\]/g, "").split(/\[|\./) // Split keys by '[' or '.'
-    keys.reduce((nestedAcc, k, i) => {
-      if (i === keys.length - 1) {
-        nestedAcc[k] = value // Assign value at the last key
-      } else {
-        if (!nestedAcc[k]) {
-          nestedAcc[k] = isNaN(Number(keys[i + 1])) ? {} : [] // Initialize as array or object
+  ).reduce<Record<string, unknown>>(
+    (acc, [key, value]) => {
+      const keys = key.replace(/\]/g, "").split(/\[|\./) // Split keys by '[' or '.'
+      keys.reduce((nestedAcc, k, i) => {
+        if (i === keys.length - 1) {
+          // Convert value to number if the key is 'adults' or 'age'
+          ;(nestedAcc as Record<string, unknown>)[k] =
+            k === "adults" || k === "age" ? Number(value) : value
+        } else {
+          if (!nestedAcc[k]) {
+            nestedAcc[k] = isNaN(Number(keys[i + 1])) ? {} : [] // Initialize as object or array
+          }
         }
-      }
-      return nestedAcc[k]
-    }, acc)
-    return acc
-  }, {} as SelectRateSearchParams)
-  return searchParamsObject
+        return nestedAcc[k] as Record<string, unknown>
+      }, acc)
+      return acc
+    },
+    {} as Record<string, unknown>
+  )
+  return searchParamsObject as SelectRateSearchParams
 }
 
-export { getHotelReservationQueryParams }
+export default getHotelReservationQueryParams
diff --git a/types/components/hotelReservation/selectRate/selectRate.ts b/types/components/hotelReservation/selectRate/selectRate.ts
index f806223c6..58aa6fbbe 100644
--- a/types/components/hotelReservation/selectRate/selectRate.ts
+++ b/types/components/hotelReservation/selectRate/selectRate.ts
@@ -17,7 +17,7 @@ export interface SelectRateSearchParams {
   fromdate: string
   todate: string
   room: Room[]
-  [key: string]: any
+  [key: string]: string | string[] | Room[]
 }
 
 export interface Rate {

From f25af8382eb1f4ab5f75aef5ec347764f4f3a225 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Thu, 17 Oct 2024 10:17:57 +0200
Subject: [PATCH 08/69] feat(sw-452): added language to availabily call to get
 correct currency

---
 server/routers/hotels/query.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 198219e0e..9c07fd2e3 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -236,6 +236,8 @@ export const hotelQueryRouter = router({
     hotels: serviceProcedure
       .input(getHotelsAvailabilityInputSchema)
       .query(async ({ input, ctx }) => {
+        const { lang, uid } = ctx
+        const apiLang = toApiLang(lang)
         const {
           cityId,
           roomStayStartDate,
@@ -255,6 +257,7 @@ export const hotelQueryRouter = router({
           promotionCode,
           reservationProfileType,
           attachedProfileId,
+          language: apiLang,
         }
 
         hotelsAvailabilityCounter.add(1, {

From 0238e9e07e558d4981b82bf06573f39137672ace Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Thu, 17 Oct 2024 10:25:04 +0200
Subject: [PATCH 09/69] feat(sw-452): added children

---
 .../(live)/(public)/hotelreservation/select-rate/page.tsx       | 2 ++
 server/routers/hotels/query.ts                                  | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
index 44f3dbd15..a9103d2c4 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
@@ -20,6 +20,7 @@ export default async function SelectRatePage({
   const selecetRoomParamsObject =
     getHotelReservationQueryParams(selecetRoomParams)
   const adults = selecetRoomParamsObject.room[0].adults // TODO: Handle multiple rooms
+  const children = selecetRoomParamsObject.room[0].child.length // TODO: Handle multiple rooms
 
   const [hotelData, roomConfigurations, user] = await Promise.all([
     serverClient().hotel.hotelData.get({
@@ -32,6 +33,7 @@ export default async function SelectRatePage({
       roomStayStartDate: searchParams.fromDate,
       roomStayEndDate: searchParams.toDate,
       adults: adults,
+      children: children,
     }),
     getProfileSafely(),
   ])
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 9c07fd2e3..77a739035 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -236,7 +236,7 @@ export const hotelQueryRouter = router({
     hotels: serviceProcedure
       .input(getHotelsAvailabilityInputSchema)
       .query(async ({ input, ctx }) => {
-        const { lang, uid } = ctx
+        const { lang } = ctx
         const apiLang = toApiLang(lang)
         const {
           cityId,

From d56def8ed64b2cad2005f0b2b7602d4b32c227b0 Mon Sep 17 00:00:00 2001
From: Michael Zetterberg <michael.zetterberg@scandichotels.com>
Date: Thu, 17 Oct 2024 11:39:42 +0200
Subject: [PATCH 10/69] fix: date selection

---
 .../TempDesignSystem/Form/Date/index.tsx      | 59 +++++--------------
 1 file changed, 14 insertions(+), 45 deletions(-)

diff --git a/components/TempDesignSystem/Form/Date/index.tsx b/components/TempDesignSystem/Form/Date/index.tsx
index 222bbd1c1..7441ff471 100644
--- a/components/TempDesignSystem/Form/Date/index.tsx
+++ b/components/TempDesignSystem/Form/Date/index.tsx
@@ -28,62 +28,36 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
     rules: registerOptions,
   })
 
-  const [dateSegments, setDateSegment] = useState<{
-    year: number | null
-    month: number | null
-    date: number | null
-    daysInMonth: number
-  }>({
-    year: null,
-    month: null,
-    date: null,
-    daysInMonth: 31,
-  })
-
   const currentYear = new Date().getFullYear()
+
   const months = rangeArray(1, 12).map((month) => ({
     value: month,
     label: `${month}`,
   }))
+
   const years = rangeArray(1900, currentYear - 18)
     .reverse()
     .map((year) => ({ value: year, label: year.toString() }))
 
+  // Ensure the user can't select a date that doesn't exist.
+  const daysInMonth = dt(currentValue).daysInMonth()
+  const days = rangeArray(1, daysInMonth).map((day) => ({
+    value: day,
+    label: `${day}`,
+  }))
+
   function createOnSelect(selector: DateName) {
     /**
      * Months are 0 index based and therefore we
      * must subtract by 1 to get the selected month
      */
     return (select: Key) => {
-      const value =
-        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()
-        } else if (month !== null) {
-          newSegments.daysInMonth = dt().month(month).daysInMonth()
-        }
+      if (selector === DateName.month) {
+        select = Number(select) - 1
       }
-
-      if (Object.values(newSegments).every((val) => val !== null)) {
-        const newDate = dt()
-          .utc()
-          .set("year", newSegments.year!)
-          .set("month", newSegments.month!)
-          .set("date", Math.min(newSegments.date!, newSegments.daysInMonth))
-
-        setValue(name, newDate.format("YYYY-MM-DD"))
-        trigger(name)
-      }
-      setDateSegment(newSegments)
+      const newDate = dt(currentValue).set(selector, Number(select))
+      setValue(name, newDate.format("YYYY-MM-DD"))
+      trigger(name)
     }
   }
 
@@ -117,11 +91,6 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
           {(segment) => {
             switch (segment.type) {
               case "day":
-                const maxDays = dateSegments.daysInMonth
-                const days = rangeArray(1, maxDays).map((day) => ({
-                  value: day,
-                  label: `${day}`,
-                }))
                 return (
                   <div className={styles.day}>
                     <Select

From fe5256fa1ec8a8907ac969e891a045f547e2303e Mon Sep 17 00:00:00 2001
From: Michael Zetterberg <michael.zetterberg@scandichotels.com>
Date: Thu, 17 Oct 2024 16:36:02 +0200
Subject: [PATCH 11/69] fix: show more/less values

---
 components/TempDesignSystem/ShowMoreButton/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/TempDesignSystem/ShowMoreButton/index.tsx b/components/TempDesignSystem/ShowMoreButton/index.tsx
index 7be723fd1..9ac8c57c9 100644
--- a/components/TempDesignSystem/ShowMoreButton/index.tsx
+++ b/components/TempDesignSystem/ShowMoreButton/index.tsx
@@ -16,8 +16,8 @@ export default function ShowMoreButton({
   intent,
   disabled,
   showLess,
-  textShowMore = "Show less",
-  textShowLess = "Show more",
+  textShowMore = "Show more",
+  textShowLess = "Show less",
   loadMoreData,
 }: ShowMoreButtonProps) {
   const intl = useIntl()

From 5f00b50fe5083295a0f44f96c53af2a0440c030f Mon Sep 17 00:00:00 2001
From: Hrishikesh Vaipurkar <hrishikesh.vaipurkar@scandichotels.com>
Date: Thu, 17 Oct 2024 14:25:23 +0200
Subject: [PATCH 12/69] feat: SW-641 Updated UI mobile view

---
 .../BookingWidget/bookingWidget.module.css    |  2 +-
 .../GuestsRoomsPicker/ChildSelector/index.tsx |  2 +-
 .../GuestsRoomsPicker/GuestsRoomsPicker.tsx   | 65 +++++++++++++------
 .../guests-rooms-picker.module.css            | 25 ++++---
 i18n/dictionaries/en.json                     |  9 +--
 5 files changed, 67 insertions(+), 36 deletions(-)

diff --git a/components/BookingWidget/bookingWidget.module.css b/components/BookingWidget/bookingWidget.module.css
index 461057bf1..22ff009ee 100644
--- a/components/BookingWidget/bookingWidget.module.css
+++ b/components/BookingWidget/bookingWidget.module.css
@@ -42,7 +42,7 @@
     box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
     position: sticky;
     top: 0;
-    z-index: 9;
+    z-index: 10;
     background-color: var(--Base-Surface-Primary-light-Normal);
   }
 
diff --git a/components/GuestsRoomsPicker/ChildSelector/index.tsx b/components/GuestsRoomsPicker/ChildSelector/index.tsx
index 5bf3a59d2..827bcd2e6 100644
--- a/components/GuestsRoomsPicker/ChildSelector/index.tsx
+++ b/components/GuestsRoomsPicker/ChildSelector/index.tsx
@@ -70,7 +70,7 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
           roomIndex={roomIndex}
           index={index}
           child={child}
-          key={index}
+          key={"child_" + index}
         />
       ))}
     </>
diff --git a/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx b/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx
index ee0e835b3..99c1324ab 100644
--- a/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx
+++ b/components/GuestsRoomsPicker/GuestsRoomsPicker.tsx
@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 
 import { useGuestsRoomsStore } from "@/stores/guests-rooms"
 
-import { CloseLargeIcon, PlusCircleIcon } from "../Icons"
+import { CloseLargeIcon, PlusCircleIcon, PlusIcon } from "../Icons"
 import Button from "../TempDesignSystem/Button"
 import Divider from "../TempDesignSystem/Divider"
 import Subtitle from "../TempDesignSystem/Text/Subtitle"
@@ -65,28 +65,51 @@ export default function GuestsRoomsPicker({
             <Divider color="primaryLightSubtle" />
           </div>
         ))}
+        <div className={styles.addRoomMobileContainer}>
+          <Tooltip
+            heading={disabledBookingOptionsHeader}
+            text={disabledBookingOptionsText}
+            position="top"
+            arrow="left"
+          >
+            {rooms.length < 4 ? (
+              <Button
+                intent="text"
+                variant="icon"
+                wrapping
+                disabled
+                theme="base"
+                fullWidth
+              >
+                <PlusIcon />
+                {addRoomLabel}
+              </Button>
+            ) : null}
+          </Tooltip>
+        </div>
       </div>
       <footer className={styles.footer}>
-        <Tooltip
-          heading={disabledBookingOptionsHeader}
-          text={disabledBookingOptionsText}
-          position="bottom"
-          arrow="left"
-        >
-          {rooms.length < 4 ? (
-            <Button
-              intent="text"
-              variant="icon"
-              wrapping
-              disabled
-              theme="base"
-              className={styles.addRoom}
-            >
-              <PlusCircleIcon />
-              {addRoomLabel}
-            </Button>
-          ) : null}
-        </Tooltip>
+        <div className={styles.hideOnMobile}>
+          <Tooltip
+            heading={disabledBookingOptionsHeader}
+            text={disabledBookingOptionsText}
+            position="top"
+            arrow="left"
+          >
+            {rooms.length < 4 ? (
+              <Button
+                intent="text"
+                variant="icon"
+                wrapping
+                disabled
+                theme="base"
+              >
+                <PlusCircleIcon />
+                {addRoomLabel}
+              </Button>
+            ) : null}
+          </Tooltip>
+        </div>
         <Button
           onClick={closePicker}
           disabled={getFieldState("rooms").invalid}
diff --git a/components/GuestsRoomsPicker/guests-rooms-picker.module.css b/components/GuestsRoomsPicker/guests-rooms-picker.module.css
index 8e0465206..971699d95 100644
--- a/components/GuestsRoomsPicker/guests-rooms-picker.module.css
+++ b/components/GuestsRoomsPicker/guests-rooms-picker.module.css
@@ -34,12 +34,13 @@
 .footer {
   display: grid;
   gap: var(--Spacing-x1);
-  grid-template-columns: auto auto;
+  grid-template-columns: auto;
   margin-top: var(--Spacing-x2);
 }
 
 @media screen and (max-width: 1366px) {
   .hideWrapper {
+    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
     bottom: 0;
     left: 0;
     position: fixed;
@@ -47,10 +48,10 @@
     top: 100%;
     transition: top 300ms ease;
     z-index: 10002;
+    overflow: hidden;
   }
 
   .container[data-isopen="true"] .hideWrapper {
-    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
     top: 20px;
   }
 
@@ -106,16 +107,15 @@
     z-index: 10;
   }
 
-  .footer button {
-    width: 100%;
-  }
-
   .footer .hideOnMobile {
     display: none;
   }
 
-  .footer .addRoom {
-    justify-content: start;
+  .addRoomMobileContainer {
+    display: grid;
+    width: 150px;
+    margin: 0 auto;
+    padding-bottom: calc(var(--sticky-button-height) + 20px);
   }
 }
 
@@ -129,13 +129,20 @@
     position: absolute;
     top: calc(100% + var(--Spacing-x2) + 1px + var(--Spacing-x4));
     width: 360px;
+    max-height: calc(100dvh - 77px - var(--Spacing-x6));
+    overflow-y: auto;
   }
 
   .header {
     display: none;
   }
 
-  .footer .hideOnDesktop {
+  .footer {
+    grid-template-columns: auto auto;
+  }
+
+  .footer .hideOnDesktop,
+  .addRoomMobileContainer {
     display: none;
   }
 }
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index a05170e00..5678b06c4 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -6,20 +6,21 @@
   "About meetings & conferences": "About meetings & conferences",
   "About the hotel": "About the hotel",
   "Activities": "Activities",
+  "Add Room": "Add room",
   "Add code": "Add code",
   "Add new card": "Add new card",
   "Address": "Address",
-  "Airport": "Airport",
   "Adults": "Adults",
   "Age": "Age",
+  "Airport": "Airport",
   "All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.": "All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.",
   "Already a friend?": "Already a friend?",
   "Amenities": "Amenities",
   "Amusement park": "Amusement park",
-  "An error occurred. Please try again.": "An error occurred. Please try again.",
   "An error occurred trying to manage your preferences, please try again later.": "An error occurred trying to manage your preferences, please try again later.",
   "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.",
+  "An error occurred. Please try again.": "An error occurred. Please try again.",
   "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?",
@@ -49,8 +50,8 @@
   "Check in": "Check in",
   "Check out": "Check out",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.",
-  "Children": "Children",
   "Child age is required": "Child age is required",
+  "Children": "Children",
   "Choose room": "Choose room",
   "Cities": "Cities",
   "City": "City",
@@ -236,9 +237,9 @@
   "Restaurant & Bar": "Restaurant & Bar",
   "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Retype new password",
+  "Room": "Room",
   "Room & Terms": "Room & Terms",
   "Room facilities": "Room facilities",
-  "Room": "Room",
   "Rooms": "Rooms",
   "Rooms & Guests": "Rooms & Guests",
   "Sauna and gym": "Sauna and gym",

From 5bddaff04d1c8d769894d6755bdd675325932f86 Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Fri, 18 Oct 2024 09:26:22 +0200
Subject: [PATCH 13/69] fix: handle non-escaped newlines

---
 .../HotelReservation/EnterDetails/SidePeek/index.tsx      | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/HotelReservation/EnterDetails/SidePeek/index.tsx b/components/HotelReservation/EnterDetails/SidePeek/index.tsx
index abbad2dec..f7d280fed 100644
--- a/components/HotelReservation/EnterDetails/SidePeek/index.tsx
+++ b/components/HotelReservation/EnterDetails/SidePeek/index.tsx
@@ -33,8 +33,12 @@ export default function EnterDetailsSidePeek({ hotel }: SidePeekProps) {
         <Divider />
         <section className={styles.spacing}>
           <Body>{hotel.hotelContent.texts.descriptions.medium}</Body>
-
-          <Body>{hotel.hotelContent.texts.facilityInformation}</Body>
+          {hotel.hotelContent.texts.facilityInformation
+            .split(/[\n\r]/g)
+            .filter((p) => p)
+            .map((paragraph, idx) => (
+              <Body key={`facilityInfo-${idx}`}>{paragraph}</Body>
+            ))}
         </section>
       </article>
     </SidePeek>

From e4617d84ba8bbabf1fa19f1f13c4d41601535668 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Thu, 17 Oct 2024 16:07:09 +0200
Subject: [PATCH 14/69] feat: populate session storage on submit

---
 .../sectionAccordion.module.css               | 14 -----
 .../HotelReservation/ReadMore/index.tsx       |  9 ++-
 next.config.js                                | 56 -------------------
 server/routers/hotels/output.ts               |  4 +-
 stores/enter-details.ts                       | 52 ++++++++---------
 5 files changed, 35 insertions(+), 100 deletions(-)

diff --git a/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css b/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css
index 3680f5628..93398378d 100644
--- a/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css
+++ b/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css
@@ -27,7 +27,6 @@
   width: 100%;
   border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
   padding-bottom: var(--Spacing-x3);
-
   transition: 0.4s ease-out;
   grid-template-rows: 2em 0fr;
 }
@@ -79,16 +78,3 @@
 .content {
   overflow: hidden;
 }
-
-@keyframes allowOverflow {
-  0% {
-    overflow: hidden;
-  }
-  100% {
-    overflow: visible;
-  }
-}
-
-.wrapper[data-open="true"] .content {
-  animation: allowOverflow 0.4s 0.4s ease;
-}
diff --git a/components/HotelReservation/ReadMore/index.tsx b/components/HotelReservation/ReadMore/index.tsx
index 5814eae54..0106709d7 100644
--- a/components/HotelReservation/ReadMore/index.tsx
+++ b/components/HotelReservation/ReadMore/index.tsx
@@ -23,9 +23,12 @@ import {
 import { Hotel } from "@/types/hotel"
 
 function getAmenitiesList(hotel: Hotel) {
-  const detailedAmenities: DetailedAmenity[] = Object.entries(
-    hotel.hotelFacts.hotelFacilityDetail
-  ).map(([key, value]) => ({ name: key, ...value }))
+  const detailedAmenities: DetailedAmenity[] = hotel.hotelFacts
+    .hotelFacilityDetail
+    ? Object.entries(hotel.hotelFacts.hotelFacilityDetail).map(
+        ([key, value]) => ({ name: key, ...value })
+      )
+    : []
 
   // Remove Parking facilities since parking accordion is based on hotel.parking
   const simpleAmenities = hotel.detailedFacilities.filter(
diff --git a/next.config.js b/next.config.js
index 46f898e2f..f91af6594 100644
--- a/next.config.js
+++ b/next.config.js
@@ -104,62 +104,6 @@ const nextConfig = {
       //   ],
       //   permanent: false,
       // },
-      {
-        source: "/:lang/hotelreservation/(breakfast|details|payment)",
-        destination: "/:lang/hotelreservation/select-bed",
-        missing: [
-          {
-            key: "bedType",
-            type: "query",
-            value: undefined,
-          },
-        ],
-        permanent: false,
-      },
-      {
-        source: "/:lang/hotelreservation/(details|payment)",
-        destination: "/:lang/hotelreservation/breakfast",
-        missing: [
-          {
-            key: "breakfast",
-            type: "query",
-            value: undefined,
-          },
-        ],
-        permanent: false,
-      },
-      {
-        source: "/:lang/hotelreservation/payment",
-        destination: "/:lang/hotelreservation/details",
-        missing: [
-          {
-            key: "countryCode",
-            type: "query",
-            value: undefined,
-          },
-          {
-            key: "email",
-            type: "query",
-            value: undefined,
-          },
-          {
-            key: "firstname",
-            type: "query",
-            value: undefined,
-          },
-          {
-            key: "lastname",
-            type: "query",
-            value: undefined,
-          },
-          {
-            key: "phoneNumber",
-            type: "query",
-            value: undefined,
-          },
-        ],
-        permanent: false,
-      },
     ]
   },
 
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index 5692497f1..1d6fc1e8e 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -394,8 +394,8 @@ export const getHotelDataSchema = z.object({
       hotelFacts: z.object({
         checkin: checkinSchema,
         ecoLabels: ecoLabelsSchema,
-        hotelFacilityDetail: hotelFacilitySchema,
-        hotelInformation: hotelInformationSchema,
+        hotelFacilityDetail: hotelFacilitySchema.optional(),
+        hotelInformation: hotelInformationSchema.optional(),
         interior: interiorSchema,
         receptionHours: receptionHoursSchema,
         yearBuilt: z.string(),
diff --git a/stores/enter-details.ts b/stores/enter-details.ts
index 16dd96f96..d4d2666d1 100644
--- a/stores/enter-details.ts
+++ b/stores/enter-details.ts
@@ -12,6 +12,8 @@ import { StepEnum } from "@/types/components/enterDetails/step"
 import { bedTypeEnum } from "@/types/enums/bedType"
 import { breakfastEnum } from "@/types/enums/breakfast"
 
+const SESSION_STORAGE_KEY = "enterDetails"
+
 interface EnterDetailsState {
   data: {
     bedType: bedTypeEnum | undefined
@@ -24,16 +26,18 @@ interface EnterDetailsState {
   completeStep: (updatedData: Partial<EnterDetailsState["data"]>) => void
   navigate: (
     step: StepEnum,
-    searchParams?: Record<string, string | boolean>
+    updatedData?: Record<string, string | boolean>
   ) => void
+  setCurrentStep: (step: StepEnum) => void
   openSidePeek: (key: SidePeekEnum | null) => void
   closeSidePeek: () => void
 }
 
 export function initEditDetailsState(currentStep: StepEnum) {
   const isBrowser = typeof window !== "undefined"
-  const sessionData = isBrowser ? sessionStorage.getItem("editDetails") : null
-  const search = isBrowser ? new URLSearchParams(window.location.search) : null
+  const sessionData = isBrowser
+    ? sessionStorage.getItem(SESSION_STORAGE_KEY)
+    : null
 
   const defaultData: EnterDetailsState["data"] = {
     bedType: undefined,
@@ -50,19 +54,8 @@ export function initEditDetailsState(currentStep: StepEnum) {
   }
 
   let inputData = {}
-  if (search?.size) {
-    const searchParams: Record<string, string | boolean> = {}
-    search.forEach((value, key) => {
-      // Handle boolean values
-
-      if (value === "true" || value === "false") {
-        searchParams[key] = JSON.parse(value) as true | false
-      } else {
-        searchParams[key] = value
-      }
-    })
-
-    inputData = searchParams
+  if (sessionData) {
+    inputData = JSON.parse(sessionData)
   }
 
   const validPaths = [StepEnum.selectBed]
@@ -98,25 +91,34 @@ export function initEditDetailsState(currentStep: StepEnum) {
   if (!validPaths.includes(currentStep)) {
     currentStep = validPaths.pop()! // We will always have at least one valid path
     if (isBrowser) {
-      window.history.pushState({}, "", currentStep + window.location.search)
+      window.history.pushState(
+        { step: currentStep },
+        "",
+        currentStep + window.location.search
+      )
     }
   }
 
   return create<EnterDetailsState>()((set, get) => ({
     data: initialData,
     steps: Object.values(StepEnum),
-    navigate: (step, searchParams) =>
+    setCurrentStep: (step) => set({ currentStep: step }),
+    navigate: (step, updatedData) =>
       set(
         produce((state) => {
-          const query = new URLSearchParams(window.location.search)
-          if (searchParams) {
-            Object.entries(searchParams).forEach(([key, value]) => {
-              query.set(key, value ? value.toString() : "")
-            })
-          }
+          const sessionStorage = window.sessionStorage
+
+          const previousDataString = sessionStorage.getItem(SESSION_STORAGE_KEY)
+
+          const previousData = JSON.parse(previousDataString || "{}")
+
+          sessionStorage.setItem(
+            SESSION_STORAGE_KEY,
+            JSON.stringify({ ...previousData, ...updatedData })
+          )
 
           state.currentStep = step
-          window.history.pushState({}, "", step + "?" + query.toString())
+          window.history.pushState({ step }, "", step + window.location.search)
         })
       ),
     openSidePeek: (key) => set({ activeSidePeek: key }),

From 2fab1fd91743152d93918e58a5006a715038d035 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Thu, 17 Oct 2024 16:07:30 +0200
Subject: [PATCH 15/69] fix: handle back button

---
 .../(public)/hotelreservation/[step]/page.tsx |  2 +
 .../HistoryStateManager/index.tsx             | 39 +++++++++++++++++++
 .../HotelReservation/ReadMore/index.tsx       |  9 ++---
 server/routers/hotels/output.ts               |  4 +-
 4 files changed, 46 insertions(+), 8 deletions(-)
 create mode 100644 components/HotelReservation/EnterDetails/HistoryStateManager/index.tsx

diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
index 8718c8db7..5f2666c8e 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
@@ -6,6 +6,7 @@ import { serverClient } from "@/lib/trpc/server"
 import BedType from "@/components/HotelReservation/EnterDetails/BedType"
 import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
 import Details from "@/components/HotelReservation/EnterDetails/Details"
+import HistoryStateManager from "@/components/HotelReservation/EnterDetails/HistoryStateManager"
 import SectionAccordion from "@/components/HotelReservation/EnterDetails/SectionAccordion"
 import Payment from "@/components/HotelReservation/SelectRate/Payment"
 import { getIntl } from "@/i18n"
@@ -37,6 +38,7 @@ export default async function StepPage({
 
   return (
     <section>
+      <HistoryStateManager />
       <SectionAccordion
         header="Select bed"
         step={StepEnum.selectBed}
diff --git a/components/HotelReservation/EnterDetails/HistoryStateManager/index.tsx b/components/HotelReservation/EnterDetails/HistoryStateManager/index.tsx
new file mode 100644
index 000000000..0ce1b1080
--- /dev/null
+++ b/components/HotelReservation/EnterDetails/HistoryStateManager/index.tsx
@@ -0,0 +1,39 @@
+"use client"
+
+import { useCallback, useEffect } from "react"
+
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
+export default function HistoryStateManager() {
+  const setCurrentStep = useEnterDetailsStore((state) => state.setCurrentStep)
+  const currentStep = useEnterDetailsStore((state) => state.currentStep)
+
+  const handleBackButton = useCallback(
+    (event: PopStateEvent) => {
+      if (event.state.step) {
+        setCurrentStep(event.state.step)
+      }
+    },
+    [setCurrentStep]
+  )
+
+  useEffect(() => {
+    window.addEventListener("popstate", handleBackButton)
+
+    return () => {
+      window.removeEventListener("popstate", handleBackButton)
+    }
+  }, [handleBackButton])
+
+  useEffect(() => {
+    if (!window.history.state.step) {
+      window.history.replaceState(
+        { step: currentStep },
+        "",
+        document.location.href
+      )
+    }
+  }, [currentStep])
+
+  return null
+}
diff --git a/components/HotelReservation/ReadMore/index.tsx b/components/HotelReservation/ReadMore/index.tsx
index 0106709d7..5814eae54 100644
--- a/components/HotelReservation/ReadMore/index.tsx
+++ b/components/HotelReservation/ReadMore/index.tsx
@@ -23,12 +23,9 @@ import {
 import { Hotel } from "@/types/hotel"
 
 function getAmenitiesList(hotel: Hotel) {
-  const detailedAmenities: DetailedAmenity[] = hotel.hotelFacts
-    .hotelFacilityDetail
-    ? Object.entries(hotel.hotelFacts.hotelFacilityDetail).map(
-        ([key, value]) => ({ name: key, ...value })
-      )
-    : []
+  const detailedAmenities: DetailedAmenity[] = Object.entries(
+    hotel.hotelFacts.hotelFacilityDetail
+  ).map(([key, value]) => ({ name: key, ...value }))
 
   // Remove Parking facilities since parking accordion is based on hotel.parking
   const simpleAmenities = hotel.detailedFacilities.filter(
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index 1d6fc1e8e..5692497f1 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -394,8 +394,8 @@ export const getHotelDataSchema = z.object({
       hotelFacts: z.object({
         checkin: checkinSchema,
         ecoLabels: ecoLabelsSchema,
-        hotelFacilityDetail: hotelFacilitySchema.optional(),
-        hotelInformation: hotelInformationSchema.optional(),
+        hotelFacilityDetail: hotelFacilitySchema,
+        hotelInformation: hotelInformationSchema,
         interior: interiorSchema,
         receptionHours: receptionHoursSchema,
         yearBuilt: z.string(),

From ae87b64cd5e677c67f9e1fc84c9cdba3d0ea39f7 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Thu, 17 Oct 2024 13:22:19 +0200
Subject: [PATCH 16/69] style(SW-634): add logic to avoid double borders

---
 components/Blocks/ShortcutsList/index.tsx     | 25 +++++++++++--------
 .../ShortcutsList/shortcutsList.module.css    |  6 ++++-
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/components/Blocks/ShortcutsList/index.tsx b/components/Blocks/ShortcutsList/index.tsx
index 746f56492..12c718229 100644
--- a/components/Blocks/ShortcutsList/index.tsx
+++ b/components/Blocks/ShortcutsList/index.tsx
@@ -18,17 +18,20 @@ export default function ShortcutsList({
   const leftColumn = shortcuts.slice(0, middleIndex)
   const rightColumn = shortcuts.slice(middleIndex)
 
-  const classNames = hasTwoColumns
-    ? {
-        section: styles.twoColumnSection,
-        leftColumn: styles.leftColumn,
-        rightColumn: styles.rightColumn,
-      }
-    : {
-        section: styles.oneColumnSection,
-        leftColumn: styles.leftColumnBottomBorder,
-        rightColumn: "",
-      }
+  const classNames =
+    hasTwoColumns && shortcuts.length > 1
+      ? {
+          section: styles.twoColumnSection,
+          leftColumn: styles.leftColumn,
+          rightColumn: styles.rightColumn,
+        }
+      : {
+          section: styles.oneColumnSection,
+          leftColumn:
+            shortcuts.length === 1
+              ? styles.leftColumnBorderBottomNone
+              : styles.leftColumnBorderBottom,
+        }
 
   return (
     <SectionContainer>
diff --git a/components/Blocks/ShortcutsList/shortcutsList.module.css b/components/Blocks/ShortcutsList/shortcutsList.module.css
index 37daea30f..26dd448ac 100644
--- a/components/Blocks/ShortcutsList/shortcutsList.module.css
+++ b/components/Blocks/ShortcutsList/shortcutsList.module.css
@@ -7,10 +7,14 @@
 }
 
 .leftColumn,
-.leftColumnBottomBorder {
+.leftColumnBorderBottom {
   border-bottom: 1px solid var(--Base-Border-Subtle);
 }
 
+.leftColumnBorderBottomNone {
+  border-bottom: none;
+}
+
 @media screen and (min-width: 1367px) {
   .twoColumnSection {
     grid-template-columns: 1fr 1fr;

From fb68759720720ea1fe04728e47796432db8ad617 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Fri, 18 Oct 2024 15:40:39 +0200
Subject: [PATCH 17/69] fix: make radio card tabable

---
 components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx b/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
index 501d43449..c57d56cc4 100644
--- a/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
+++ b/components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
@@ -28,7 +28,7 @@ export default function Card({
   const { register } = useFormContext()
 
   return (
-    <label className={styles.label} data-declined={declined}>
+    <label className={styles.label} data-declined={declined} tabIndex={0}>
       <Caption className={styles.title} type="label" uppercase>
         {title}
       </Caption>

From 09777ee9092f62dac6dff9cf46f241955193c431 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Mon, 21 Oct 2024 09:53:40 +0200
Subject: [PATCH 18/69] PR fixes

---
 .../DynamicContent/Stays/StayCard/index.tsx   | 34 +++----------------
 components/TempDesignSystem/Link/index.tsx    | 16 +++++++--
 hooks/useCheckIfExternalLink.ts               | 23 +++++++++++++
 3 files changed, 40 insertions(+), 33 deletions(-)
 create mode 100644 hooks/useCheckIfExternalLink.ts

diff --git a/components/Blocks/DynamicContent/Stays/StayCard/index.tsx b/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
index d20ffe496..270ede97a 100644
--- a/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
+++ b/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
@@ -1,5 +1,4 @@
 "use client"
-import { useEffect, useState } from "react"
 
 import { dt } from "@/lib/dt"
 
@@ -14,24 +13,6 @@ import styles from "./stay.module.css"
 
 import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
 
-const useCheckIfExternal = (bookingUrl: string) => {
-  const [isExternal, setIsExternal] = useState(false)
-
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      const hostName = window.location.hostname
-      const bookingURL = new URL(bookingUrl)
-
-      const hostsMatch = hostName === bookingURL.hostname
-      const langRouteRegex = /^\/[a-zA-Z]{2}\//
-
-      setIsExternal(!hostsMatch || !langRouteRegex.test(bookingURL.pathname))
-    }
-  }, [bookingUrl])
-
-  return isExternal
-}
-
 export default function StayCard({ stay }: StayCardProps) {
   const lang = useLang()
 
@@ -45,13 +26,8 @@ export default function StayCard({ stay }: StayCardProps) {
   const departDate = depart.format("DD MMM YYYY")
   const departDateTime = depart.format("YYYY-MM-DD")
 
-  // TODO: Remove this check (and hook) and only return <Link /> when current web is deleted
-  const isExternal = useCheckIfExternal(bookingUrl)
-
-  const linkProps = {
-    href: bookingUrl,
-    className: styles.link,
-    children: (
+  return (
+    <Link href={bookingUrl} className={styles.link}>
       <article className={styles.stay}>
         <Image
           className={styles.image}
@@ -76,8 +52,6 @@ export default function StayCard({ stay }: StayCardProps) {
           </div>
         </footer>
       </article>
-    ),
-  }
-
-  return isExternal ? <a {...linkProps} /> : <Link {...linkProps} />
+    </Link>
+  )
 }
diff --git a/components/TempDesignSystem/Link/index.tsx b/components/TempDesignSystem/Link/index.tsx
index 771c60e82..bae4ab9b1 100644
--- a/components/TempDesignSystem/Link/index.tsx
+++ b/components/TempDesignSystem/Link/index.tsx
@@ -5,6 +5,7 @@ import { startTransition, useCallback, useMemo } from "react"
 
 import useRouterTransitionStore from "@/stores/router-transition"
 
+import { useCheckIfExternalLink } from "@/hooks/useCheckIfExternalLink"
 import { trackClick, trackPageViewStart } from "@/utils/tracking"
 
 import { linkVariants } from "./variants"
@@ -55,6 +56,9 @@ export default function Link({
     return `${href}${search}`
   }, [href, searchParams, keepSearchParams])
 
+  // TODO: Remove this check (and hook) and only return <Link /> when current web is deleted
+  const isExternal = useCheckIfExternalLink(href)
+
   const startRouterTransition = useRouterTransitionStore(
     (state) => state.startRouterTransition
   )
@@ -65,11 +69,17 @@ export default function Link({
     }
   }, [trackingId])
 
-  return (
+  const linkProps = {
+    href: fullUrl,
+    className: classNames,
+  }
+
+  return isExternal ? (
+    <a {...linkProps} {...props} />
+  ) : (
     <NextLink
       scroll={scroll}
       prefetch={prefetch}
-      className={classNames}
       onClick={(e) => {
         if (onClick) {
           onClick(e)
@@ -94,9 +104,9 @@ export default function Link({
           router.push(fullUrl, { scroll })
         })
       }}
-      href={fullUrl}
       id={trackingId}
       {...props}
+      {...linkProps}
     />
   )
 }
diff --git a/hooks/useCheckIfExternalLink.ts b/hooks/useCheckIfExternalLink.ts
new file mode 100644
index 000000000..6e4b7a7ed
--- /dev/null
+++ b/hooks/useCheckIfExternalLink.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react"
+
+export const useCheckIfExternalLink = (url: string) => {
+  const [isExternal, setIsExternal] = useState(false)
+
+  useEffect(() => {
+    if (typeof window !== "undefined" && url?.length) {
+      try {
+        const hostName = window.location.hostname
+        const newURL = new URL(url)
+
+        const hostsMatch = hostName === newURL.hostname
+        const langRouteRegex = /^\/[a-zA-Z]{2}\//
+
+        setIsExternal(!hostsMatch || !langRouteRegex.test(newURL.pathname))
+      } catch {
+        // Don't care. Expecting internal url (#, /my-pages/overview, etc)
+      }
+    }
+  }, [url])
+
+  return isExternal
+}

From 78569fcb21e515634c831a2210094679f6da6112 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Mon, 30 Sep 2024 13:11:27 +0200
Subject: [PATCH 19/69] feat(SW-497): Added global alerts query and typings

---
 lib/graphql/Fragments/GlobalAlert.graphql     |  10 +
 lib/graphql/Query/ContactConfig.graphql       |   2 +
 lib/graphql/Query/SiteConfiguration.graphql   |  18 ++
 server/routers/contentstack/base/output.ts    |  53 +++++
 server/routers/contentstack/base/query.ts     | 183 +++++++++---------
 server/routers/contentstack/base/telemetry.ts | 103 ++++++++++
 .../routers/contentstack/siteConfiguration.ts |  17 ++
 7 files changed, 297 insertions(+), 89 deletions(-)
 create mode 100644 lib/graphql/Fragments/GlobalAlert.graphql
 create mode 100644 lib/graphql/Query/SiteConfiguration.graphql
 create mode 100644 server/routers/contentstack/base/telemetry.ts
 create mode 100644 types/trpc/routers/contentstack/siteConfiguration.ts

diff --git a/lib/graphql/Fragments/GlobalAlert.graphql b/lib/graphql/Fragments/GlobalAlert.graphql
new file mode 100644
index 000000000..a9d5712f9
--- /dev/null
+++ b/lib/graphql/Fragments/GlobalAlert.graphql
@@ -0,0 +1,10 @@
+fragment GlobalAlert on GlobalAlert {
+  type
+  heading
+  text
+  phone_contact {
+    display_text
+    phone_number
+    footnote
+  }
+}
diff --git a/lib/graphql/Query/ContactConfig.graphql b/lib/graphql/Query/ContactConfig.graphql
index 381d00941..0a17e9568 100644
--- a/lib/graphql/Query/ContactConfig.graphql
+++ b/lib/graphql/Query/ContactConfig.graphql
@@ -19,10 +19,12 @@ query GetContactConfig($locale: String!) {
       phone {
         number
         name
+        footnote
       }
       phone_loyalty {
         name
         number
+        footnote
       }
       title
       visiting_address {
diff --git a/lib/graphql/Query/SiteConfiguration.graphql b/lib/graphql/Query/SiteConfiguration.graphql
new file mode 100644
index 000000000..f4d8a09af
--- /dev/null
+++ b/lib/graphql/Query/SiteConfiguration.graphql
@@ -0,0 +1,18 @@
+#import "../Fragments/GlobalAlert.graphql"
+
+query GetSiteConfiguration($locale: String!) {
+  all_site_configuration(limit: 1, locale: $locale) {
+    items {
+      sitewide_alert {
+        booking_widget_disabled
+        alertConnection {
+          edges {
+            node {
+              ...GlobalAlert
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/server/routers/contentstack/base/output.ts b/server/routers/contentstack/base/output.ts
index 50b739bdb..9379fb370 100644
--- a/server/routers/contentstack/base/output.ts
+++ b/server/routers/contentstack/base/output.ts
@@ -15,6 +15,7 @@ import { removeMultipleSlashes } from "@/utils/url"
 import { systemSchema } from "../schemas/system"
 
 import { Image } from "@/types/image"
+import { GlobalAlertType } from "@/types/trpc/routers/contentstack/siteConfiguration"
 
 // Help me write this zod schema based on the type ContactConfig
 export const validateContactConfigSchema = z.object({
@@ -39,10 +40,12 @@ export const validateContactConfigSchema = z.object({
         phone: z.object({
           number: z.string().nullable(),
           name: z.string().nullable(),
+          footnote: z.string().nullable(),
         }),
         phone_loyalty: z.object({
           number: z.string().nullable(),
           name: z.string().nullable(),
+          footnote: z.string().nullable(),
         }),
         visiting_address: z.object({
           zip: z.string().nullable(),
@@ -660,3 +663,53 @@ export const headerSchema = z
       },
     }
   })
+
+export const globalAlertSchema = z.object({
+  type: z.nativeEnum(GlobalAlertType),
+  text: z.string(),
+  heading: z.string(),
+  phone_contact: z.object({
+    display_text: z.string(),
+    phone_number: z.string(),
+    footnote: z.string(),
+  }),
+})
+
+export const siteConfigurationSchema = z
+  .object({
+    all_site_configuration: z.object({
+      items: z
+        .array(
+          z.object({
+            sitewide_alert: z.object({
+              booking_widget_disabled: z.boolean(),
+              alertConnection: z.object({
+                edges: z
+                  .array(
+                    z.object({
+                      node: globalAlertSchema,
+                    })
+                  )
+                  .max(1),
+              }),
+            }),
+          })
+        )
+        .max(1),
+    }),
+  })
+  .transform((data) => {
+    if (!data.all_site_configuration.items.length) {
+      return {
+        globalAlert: null,
+        bookingWidgetDisabled: false,
+      }
+    }
+
+    const { sitewide_alert } = data.all_site_configuration.items[0]
+
+    return {
+      globalAlert: sitewide_alert.alertConnection.edges[0]?.node || null,
+      bookingWidgetDisabled: sitewide_alert.booking_widget_disabled,
+    }
+  })
diff --git a/server/routers/contentstack/base/query.ts b/server/routers/contentstack/base/query.ts
index 74b511123..f596d711a 100644
--- a/server/routers/contentstack/base/query.ts
+++ b/server/routers/contentstack/base/query.ts
@@ -1,5 +1,3 @@
-import { metrics } from "@opentelemetry/api"
-
 import { GetContactConfig } from "@/lib/graphql/Query/ContactConfig.graphql"
 import {
   GetCurrentFooter,
@@ -11,6 +9,7 @@ import {
 } from "@/lib/graphql/Query/Current/Header.graphql"
 import { GetFooter, GetFooterRef } from "@/lib/graphql/Query/Footer.graphql"
 import { GetHeader, GetHeaderRef } from "@/lib/graphql/Query/Header.graphql"
+import { GetSiteConfiguration } from "@/lib/graphql/Query/SiteConfiguration.graphql"
 import { request } from "@/lib/graphql/request"
 import { notFound } from "@/server/errors/trpc"
 import { contentstackBaseProcedure, router } from "@/server/trpc"
@@ -31,12 +30,41 @@ import {
   type GetCurrentHeaderData,
   headerRefsSchema,
   headerSchema,
+  siteConfigurationSchema,
   validateContactConfigSchema,
   validateCurrentFooterConfigSchema,
   validateCurrentHeaderConfigSchema,
   validateFooterConfigSchema,
   validateFooterRefConfigSchema,
 } from "./output"
+import {
+  getContactConfigCounter,
+  getContactConfigFailCounter,
+  getContactConfigSuccessCounter,
+  getCurrentFooterCounter,
+  getCurrentFooterFailCounter,
+  getCurrentFooterRefCounter,
+  getCurrentFooterSuccessCounter,
+  getCurrentHeaderCounter,
+  getCurrentHeaderFailCounter,
+  getCurrentHeaderRefCounter,
+  getCurrentHeaderSuccessCounter,
+  getFooterCounter,
+  getFooterFailCounter,
+  getFooterRefCounter,
+  getFooterRefFailCounter,
+  getFooterRefSuccessCounter,
+  getFooterSuccessCounter,
+  getHeaderCounter,
+  getHeaderFailCounter,
+  getHeaderRefsCounter,
+  getHeaderRefsFailCounter,
+  getHeaderRefsSuccessCounter,
+  getHeaderSuccessCounter,
+  getSiteConfigurationCounter,
+  getSiteConfigurationFailCounter,
+  getSiteConfigurationSuccessCounter,
+} from "./telemetry"
 import { getConnections, getFooterConnections } from "./utils"
 
 import type {
@@ -47,93 +75,7 @@ import type {
   GetHeader as GetHeaderData,
   GetHeaderRefs,
 } from "@/types/trpc/routers/contentstack/header"
-
-const meter = metrics.getMeter("trpc.contentstack.base")
-// OpenTelemetry metrics: ContactConfig
-const getContactConfigCounter = meter.createCounter(
-  "trpc.contentstack.contactConfig.get"
-)
-const getContactConfigSuccessCounter = meter.createCounter(
-  "trpc.contentstack.contactConfig.get-success"
-)
-const getContactConfigFailCounter = meter.createCounter(
-  "trpc.contentstack.contactConfig.get-fail"
-)
-// OpenTelemetry metrics: CurrentHeader
-const getCurrentHeaderRefCounter = meter.createCounter(
-  "trpc.contentstack.currentHeader.ref.get"
-)
-const getCurrentHeaderRefSuccessCounter = meter.createCounter(
-  "trpc.contentstack.currentHeader.ref.get-success"
-)
-const getCurrentHeaderRefFailCounter = meter.createCounter(
-  "trpc.contentstack.currentHeader.ref.get-fail"
-)
-const getCurrentHeaderCounter = meter.createCounter(
-  "trpc.contentstack.currentHeader.get"
-)
-const getCurrentHeaderSuccessCounter = meter.createCounter(
-  "trpc.contentstack.currentHeader.get-success"
-)
-const getCurrentHeaderFailCounter = meter.createCounter(
-  "trpc.contentstack.currentHeader.get-fail"
-)
-
-// OpenTelemetry metrics: Header
-const getHeaderRefsCounter = meter.createCounter(
-  "trpc.contentstack.header.ref.get"
-)
-const getHeaderRefsSuccessCounter = meter.createCounter(
-  "trpc.contentstack.header.ref.get-success"
-)
-const getHeaderRefsFailCounter = meter.createCounter(
-  "trpc.contentstack.header.ref.get-fail"
-)
-const getHeaderCounter = meter.createCounter("trpc.contentstack.header.get")
-const getHeaderSuccessCounter = meter.createCounter(
-  "trpc.contentstack.header.get-success"
-)
-const getHeaderFailCounter = meter.createCounter(
-  "trpc.contentstack.header.get-fail"
-)
-
-// OpenTelemetry metrics: CurrentHeader
-const getCurrentFooterRefCounter = meter.createCounter(
-  "trpc.contentstack.currentFooter.ref.get"
-)
-const getCurrentFooterRefSuccessCounter = meter.createCounter(
-  "trpc.contentstack.currentFooter.ref.get-success"
-)
-const getCurrentFooterRefFailCounter = meter.createCounter(
-  "trpc.contentstack.currentFooter.ref.get-fail"
-)
-const getCurrentFooterCounter = meter.createCounter(
-  "trpc.contentstack.currentFooter.get"
-)
-const getCurrentFooterSuccessCounter = meter.createCounter(
-  "trpc.contentstack.currentFooter.get-success"
-)
-const getCurrentFooterFailCounter = meter.createCounter(
-  "trpc.contentstack.currentFooter.get-fail"
-)
-
-// OpenTelemetry metrics: Footer
-const getFooterRefCounter = meter.createCounter(
-  "trpc.contentstack.footer.ref.get"
-)
-const getFooterRefSuccessCounter = meter.createCounter(
-  "trpc.contentstack.footer.ref.get-success"
-)
-const getFooterRefFailCounter = meter.createCounter(
-  "trpc.contentstack.footer.ref.get-fail"
-)
-const getFooterCounter = meter.createCounter("trpc.contentstack.footer.get")
-const getFooterSuccessCounter = meter.createCounter(
-  "trpc.contentstack.footer.get-success"
-)
-const getFooterFailCounter = meter.createCounter(
-  "trpc.contentstack.footer.get-fail"
-)
+import type { GetSiteConfigurationData } from "@/types/trpc/routers/contentstack/siteConfiguration"
 
 export const baseQueryRouter = router({
   contact: contentstackBaseProcedure.query(async ({ ctx }) => {
@@ -652,4 +594,67 @@ export const baseQueryRouter = router({
 
     return validatedFooterConfig.data
   }),
+  siteConfiguration: contentstackBaseProcedure.query(async ({ ctx }) => {
+    const { lang } = ctx
+    getSiteConfigurationCounter.add(1, { lang })
+    console.info(
+      "contentstack.siteConfiguration start",
+      JSON.stringify({ query: { lang } })
+    )
+    const response = await request<GetSiteConfigurationData>(
+      GetSiteConfiguration,
+      {
+        locale: lang,
+      },
+      {
+        cache: "force-cache",
+        next: {
+          tags: [`${lang}:siteConfiguration`],
+        },
+      }
+    )
+
+    if (!response.data) {
+      const notFoundError = notFound(response)
+
+      getSiteConfigurationFailCounter.add(1, {
+        lang,
+        error_type: "not_found",
+        error: JSON.stringify({ code: notFoundError.code }),
+      })
+
+      console.error(
+        "contentstack.siteConfiguration not found error",
+        JSON.stringify({ query: { lang }, error: { code: notFoundError.code } })
+      )
+
+      throw notFoundError
+    }
+
+    const validatedSiteConfiguration = siteConfigurationSchema.safeParse(
+      response.data
+    )
+
+    if (!validatedSiteConfiguration.success) {
+      getSiteConfigurationFailCounter.add(1, {
+        lang,
+        error_type: "validation_error",
+        error: JSON.stringify(validatedSiteConfiguration.error),
+      })
+      console.error(
+        "contentstack.siteConfiguration validation error",
+        JSON.stringify({
+          query: { lang },
+          error: validatedSiteConfiguration.error,
+        })
+      )
+      return null
+    }
+    getSiteConfigurationSuccessCounter.add(1, { lang })
+    console.info(
+      "contentstack.siteConfiguration success",
+      JSON.stringify({ query: { lang } })
+    )
+    return validatedSiteConfiguration.data
+  }),
 })
diff --git a/server/routers/contentstack/base/telemetry.ts b/server/routers/contentstack/base/telemetry.ts
new file mode 100644
index 000000000..db7139ed4
--- /dev/null
+++ b/server/routers/contentstack/base/telemetry.ts
@@ -0,0 +1,103 @@
+import { metrics } from "@opentelemetry/api"
+
+const meter = metrics.getMeter("trpc.contentstack.base")
+// OpenTelemetry metrics: ContactConfig
+export const getContactConfigCounter = meter.createCounter(
+  "trpc.contentstack.contactConfig.get"
+)
+export const getContactConfigSuccessCounter = meter.createCounter(
+  "trpc.contentstack.contactConfig.get-success"
+)
+export const getContactConfigFailCounter = meter.createCounter(
+  "trpc.contentstack.contactConfig.get-fail"
+)
+// OpenTelemetry metrics: CurrentHeader
+export const getCurrentHeaderRefCounter = meter.createCounter(
+  "trpc.contentstack.currentHeader.ref.get"
+)
+export const getCurrentHeaderRefSuccessCounter = meter.createCounter(
+  "trpc.contentstack.currentHeader.ref.get-success"
+)
+export const getCurrentHeaderRefFailCounter = meter.createCounter(
+  "trpc.contentstack.currentHeader.ref.get-fail"
+)
+export const getCurrentHeaderCounter = meter.createCounter(
+  "trpc.contentstack.currentHeader.get"
+)
+export const getCurrentHeaderSuccessCounter = meter.createCounter(
+  "trpc.contentstack.currentHeader.get-success"
+)
+export const getCurrentHeaderFailCounter = meter.createCounter(
+  "trpc.contentstack.currentHeader.get-fail"
+)
+
+// OpenTelemetry metrics: Header
+export const getHeaderRefsCounter = meter.createCounter(
+  "trpc.contentstack.header.ref.get"
+)
+export const getHeaderRefsSuccessCounter = meter.createCounter(
+  "trpc.contentstack.header.ref.get-success"
+)
+export const getHeaderRefsFailCounter = meter.createCounter(
+  "trpc.contentstack.header.ref.get-fail"
+)
+export const getHeaderCounter = meter.createCounter(
+  "trpc.contentstack.header.get"
+)
+export const getHeaderSuccessCounter = meter.createCounter(
+  "trpc.contentstack.header.get-success"
+)
+export const getHeaderFailCounter = meter.createCounter(
+  "trpc.contentstack.header.get-fail"
+)
+
+// OpenTelemetry metrics: CurrentFooter
+export const getCurrentFooterRefCounter = meter.createCounter(
+  "trpc.contentstack.currentFooter.ref.get"
+)
+export const getCurrentFooterRefSuccessCounter = meter.createCounter(
+  "trpc.contentstack.currentFooter.ref.get-success"
+)
+export const getCurrentFooterRefFailCounter = meter.createCounter(
+  "trpc.contentstack.currentFooter.ref.get-fail"
+)
+export const getCurrentFooterCounter = meter.createCounter(
+  "trpc.contentstack.currentFooter.get"
+)
+export const getCurrentFooterSuccessCounter = meter.createCounter(
+  "trpc.contentstack.currentFooter.get-success"
+)
+export const getCurrentFooterFailCounter = meter.createCounter(
+  "trpc.contentstack.currentFooter.get-fail"
+)
+
+// OpenTelemetry metrics: Footer
+export const getFooterRefCounter = meter.createCounter(
+  "trpc.contentstack.footer.ref.get"
+)
+export const getFooterRefSuccessCounter = meter.createCounter(
+  "trpc.contentstack.footer.ref.get-success"
+)
+export const getFooterRefFailCounter = meter.createCounter(
+  "trpc.contentstack.footer.ref.get-fail"
+)
+export const getFooterCounter = meter.createCounter(
+  "trpc.contentstack.footer.get"
+)
+export const getFooterSuccessCounter = meter.createCounter(
+  "trpc.contentstack.footer.get-success"
+)
+export const getFooterFailCounter = meter.createCounter(
+  "trpc.contentstack.footer.get-fail"
+)
+
+// OpenTelemetry metrics: SiteConfiguration
+export const getSiteConfigurationCounter = meter.createCounter(
+  "trpc.contentstack.SiteConfiguration.get"
+)
+export const getSiteConfigurationSuccessCounter = meter.createCounter(
+  "trpc.contentstack.SiteConfiguration.get-success"
+)
+export const getSiteConfigurationFailCounter = meter.createCounter(
+  "trpc.contentstack.SiteConfiguration.get-fail"
+)
diff --git a/types/trpc/routers/contentstack/siteConfiguration.ts b/types/trpc/routers/contentstack/siteConfiguration.ts
new file mode 100644
index 000000000..dcc86c4ec
--- /dev/null
+++ b/types/trpc/routers/contentstack/siteConfiguration.ts
@@ -0,0 +1,17 @@
+import { z } from "zod"
+
+import {
+  globalAlertSchema,
+  siteConfigurationSchema,
+} from "@/server/routers/contentstack/base/output"
+
+export enum GlobalAlertType {
+  Info = "info",
+  Alarm = "alarm",
+}
+
+export type GetSiteConfigurationData = z.input<typeof siteConfigurationSchema>
+export type SiteConfiguration = z.output<typeof siteConfigurationSchema>
+
+export type GetGlobalAlertData = z.input<typeof globalAlertSchema>
+export type GlobalAlert = z.output<typeof globalAlertSchema>

From 3f12246e122ebbcd7fb75de8abf67ca262217b30 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Thu, 3 Oct 2024 11:29:26 +0200
Subject: [PATCH 20/69] feat(SW-497): Changed to siteConfig which includes
 Global Alert

---
 ...nfiguration.graphql => SiteConfig.graphql} |   4 +-
 server/routers/contentstack/base/output.ts    |  16 +-
 server/routers/contentstack/base/query.ts     | 216 ++++++++++--------
 server/routers/contentstack/base/telemetry.ts |  14 +-
 server/routers/contentstack/base/utils.ts     |  30 ++-
 .../{siteConfiguration.ts => siteConfig.ts}   |   6 +-
 6 files changed, 166 insertions(+), 120 deletions(-)
 rename lib/graphql/Query/{SiteConfiguration.graphql => SiteConfig.graphql} (71%)
 rename types/trpc/routers/contentstack/{siteConfiguration.ts => siteConfig.ts} (63%)

diff --git a/lib/graphql/Query/SiteConfiguration.graphql b/lib/graphql/Query/SiteConfig.graphql
similarity index 71%
rename from lib/graphql/Query/SiteConfiguration.graphql
rename to lib/graphql/Query/SiteConfig.graphql
index f4d8a09af..52bac0fa4 100644
--- a/lib/graphql/Query/SiteConfiguration.graphql
+++ b/lib/graphql/Query/SiteConfig.graphql
@@ -1,7 +1,7 @@
 #import "../Fragments/GlobalAlert.graphql"
 
-query GetSiteConfiguration($locale: String!) {
-  all_site_configuration(limit: 1, locale: $locale) {
+query GetSiteConfig($locale: String!) {
+  all_site_config(limit: 1, locale: $locale) {
     items {
       sitewide_alert {
         booking_widget_disabled
diff --git a/server/routers/contentstack/base/output.ts b/server/routers/contentstack/base/output.ts
index 9379fb370..55a94f790 100644
--- a/server/routers/contentstack/base/output.ts
+++ b/server/routers/contentstack/base/output.ts
@@ -15,7 +15,7 @@ import { removeMultipleSlashes } from "@/utils/url"
 import { systemSchema } from "../schemas/system"
 
 import { Image } from "@/types/image"
-import { GlobalAlertType } from "@/types/trpc/routers/contentstack/siteConfiguration"
+import { GlobalAlertType } from "@/types/trpc/routers/contentstack/siteConfig"
 
 // Help me write this zod schema based on the type ContactConfig
 export const validateContactConfigSchema = z.object({
@@ -669,15 +669,15 @@ export const globalAlertSchema = z.object({
   text: z.string(),
   heading: z.string(),
   phone_contact: z.object({
-    display_text: z.string(),
-    phone_number: z.string(),
-    footnote: z.string(),
+    display_text: z.string().nullable(),
+    phone_number: z.string().nullable(),
+    footnote: z.string().nullable(),
   }),
 })
 
-export const siteConfigurationSchema = z
+export const siteConfigSchema = z
   .object({
-    all_site_configuration: z.object({
+    all_site_config: z.object({
       items: z
         .array(
           z.object({
@@ -699,14 +699,14 @@ export const siteConfigurationSchema = z
     }),
   })
   .transform((data) => {
-    if (!data.all_site_configuration.items.length) {
+    if (!data.all_site_config.items.length) {
       return {
         globalAlert: null,
         bookingWidgetDisabled: false,
       }
     }
 
-    const { sitewide_alert } = data.all_site_configuration.items[0]
+    const { sitewide_alert } = data.all_site_config.items[0]
 
     return {
       globalAlert: sitewide_alert.alertConnection.edges[0]?.node || null,
diff --git a/server/routers/contentstack/base/query.ts b/server/routers/contentstack/base/query.ts
index f596d711a..98597a825 100644
--- a/server/routers/contentstack/base/query.ts
+++ b/server/routers/contentstack/base/query.ts
@@ -1,3 +1,4 @@
+import { Lang } from "@/constants/languages"
 import { GetContactConfig } from "@/lib/graphql/Query/ContactConfig.graphql"
 import {
   GetCurrentFooter,
@@ -9,7 +10,7 @@ import {
 } from "@/lib/graphql/Query/Current/Header.graphql"
 import { GetFooter, GetFooterRef } from "@/lib/graphql/Query/Footer.graphql"
 import { GetHeader, GetHeaderRef } from "@/lib/graphql/Query/Header.graphql"
-import { GetSiteConfiguration } from "@/lib/graphql/Query/SiteConfiguration.graphql"
+import { GetSiteConfig } from "@/lib/graphql/Query/SiteConfig.graphql"
 import { request } from "@/lib/graphql/request"
 import { notFound } from "@/server/errors/trpc"
 import { contentstackBaseProcedure, router } from "@/server/trpc"
@@ -30,7 +31,7 @@ import {
   type GetCurrentHeaderData,
   headerRefsSchema,
   headerSchema,
-  siteConfigurationSchema,
+  siteConfigSchema,
   validateContactConfigSchema,
   validateCurrentFooterConfigSchema,
   validateCurrentHeaderConfigSchema,
@@ -61,11 +62,15 @@ import {
   getHeaderRefsFailCounter,
   getHeaderRefsSuccessCounter,
   getHeaderSuccessCounter,
-  getSiteConfigurationCounter,
-  getSiteConfigurationFailCounter,
-  getSiteConfigurationSuccessCounter,
+  getSiteConfigCounter,
+  getSiteConfigFailCounter,
+  getSiteConfigSuccessCounter,
 } from "./telemetry"
-import { getConnections, getFooterConnections } from "./utils"
+import {
+  getConnections,
+  getFooterConnections,
+  getGlobalAlertPhoneContactData,
+} from "./utils"
 
 import type {
   FooterDataRaw,
@@ -75,71 +80,74 @@ import type {
   GetHeader as GetHeaderData,
   GetHeaderRefs,
 } from "@/types/trpc/routers/contentstack/header"
-import type { GetSiteConfigurationData } from "@/types/trpc/routers/contentstack/siteConfiguration"
+import type { GetSiteConfigData } from "@/types/trpc/routers/contentstack/siteConfig"
+
+async function getContactConfig(lang: Lang) {
+  getContactConfigCounter.add(1, { lang })
+  console.info(
+    "contentstack.contactConfig start",
+    JSON.stringify({ query: { lang } })
+  )
+  const response = await request<ContactConfigData>(
+    GetContactConfig,
+    {
+      locale: lang,
+    },
+    {
+      cache: "force-cache",
+      next: {
+        tags: [`${lang}:contact`],
+      },
+    }
+  )
+
+  if (!response.data) {
+    const notFoundError = notFound(response)
+
+    getContactConfigFailCounter.add(1, {
+      lang,
+      error_type: "not_found",
+      error: JSON.stringify({ code: notFoundError.code }),
+    })
+
+    console.error(
+      "contentstack.config not found error",
+      JSON.stringify({ query: { lang }, error: { code: notFoundError.code } })
+    )
+
+    throw notFoundError
+  }
+
+  const validatedContactConfigConfig = validateContactConfigSchema.safeParse(
+    response.data
+  )
+
+  if (!validatedContactConfigConfig.success) {
+    getContactConfigFailCounter.add(1, {
+      lang,
+      error_type: "validation_error",
+      error: JSON.stringify(validatedContactConfigConfig.error),
+    })
+    console.error(
+      "contentstack.contactConfig validation error",
+      JSON.stringify({
+        query: { lang },
+        error: validatedContactConfigConfig.error,
+      })
+    )
+    return null
+  }
+  getContactConfigSuccessCounter.add(1, { lang })
+  console.info(
+    "contentstack.contactConfig success",
+    JSON.stringify({ query: { lang } })
+  )
+  return validatedContactConfigConfig.data.all_contact_config.items[0]
+}
 
 export const baseQueryRouter = router({
   contact: contentstackBaseProcedure.query(async ({ ctx }) => {
-    const { lang } = ctx
-    getContactConfigCounter.add(1, { lang })
-    console.info(
-      "contentstack.contactConfig start",
-      JSON.stringify({ query: { lang } })
-    )
-    const response = await request<ContactConfigData>(
-      GetContactConfig,
-      {
-        locale: lang,
-      },
-      {
-        cache: "force-cache",
-        next: {
-          tags: [`${lang}:contact`],
-        },
-      }
-    )
-
-    if (!response.data) {
-      const notFoundError = notFound(response)
-
-      getContactConfigFailCounter.add(1, {
-        lang,
-        error_type: "not_found",
-        error: JSON.stringify({ code: notFoundError.code }),
-      })
-
-      console.error(
-        "contentstack.config not found error",
-        JSON.stringify({ query: { lang }, error: { code: notFoundError.code } })
-      )
-
-      throw notFoundError
-    }
-
-    const validatedContactConfigConfig = validateContactConfigSchema.safeParse(
-      response.data
-    )
-
-    if (!validatedContactConfigConfig.success) {
-      getContactConfigFailCounter.add(1, {
-        lang,
-        error_type: "validation_error",
-        error: JSON.stringify(validatedContactConfigConfig.error),
-      })
-      console.error(
-        "contentstack.contactConfig validation error",
-        JSON.stringify({
-          query: { lang },
-          error: validatedContactConfigConfig.error,
-        })
-      )
-      return null
-    }
-    getContactConfigSuccessCounter.add(1, { lang })
-    console.info(
-      "contentstack.contactConfig success",
-      JSON.stringify({ query: { lang } })
-    )
-    return validatedContactConfigConfig.data.all_contact_config.items[0]
+    return await getContactConfig(ctx.lang)
   }),
   header: contentstackBaseProcedure.query(async ({ ctx }) => {
     const { lang } = ctx
@@ -594,67 +602,83 @@ export const baseQueryRouter = router({
 
     return validatedFooterConfig.data
   }),
-  siteConfiguration: contentstackBaseProcedure.query(async ({ ctx }) => {
+  siteConfig: contentstackBaseProcedure.query(async ({ ctx }) => {
     const { lang } = ctx
-    getSiteConfigurationCounter.add(1, { lang })
+    getSiteConfigCounter.add(1, { lang })
     console.info(
-      "contentstack.siteConfiguration start",
+      "contentstack.siteConfig start",
       JSON.stringify({ query: { lang } })
     )
-    const response = await request<GetSiteConfigurationData>(
-      GetSiteConfiguration,
-      {
-        locale: lang,
-      },
-      {
-        cache: "force-cache",
-        next: {
-          tags: [`${lang}:siteConfiguration`],
+    const [siteConfigResponse, contactConfig] = await Promise.all([
+      request<GetSiteConfigData>(
+        GetSiteConfig,
+        {
+          locale: lang,
         },
-      }
-    )
+        {
+          cache: "force-cache",
+          next: {
+            tags: [`${lang}:siteConfig`],
+          },
+        }
+      ),
+      getContactConfig(lang),
+    ])
 
-    if (!response.data) {
-      const notFoundError = notFound(response)
+    if (!siteConfigResponse.data) {
+      const notFoundError = notFound(siteConfigResponse)
 
-      getSiteConfigurationFailCounter.add(1, {
+      getSiteConfigFailCounter.add(1, {
         lang,
         error_type: "not_found",
         error: JSON.stringify({ code: notFoundError.code }),
       })
 
       console.error(
-        "contentstack.siteConfiguration not found error",
+        "contentstack.siteConfig not found error",
         JSON.stringify({ query: { lang }, error: { code: notFoundError.code } })
       )
 
       throw notFoundError
     }
 
-    const validatedSiteConfiguration = siteConfigurationSchema.safeParse(
-      response.data
+    const validatedSiteConfig = siteConfigSchema.safeParse(
+      siteConfigResponse.data
     )
 
-    if (!validatedSiteConfiguration.success) {
-      getSiteConfigurationFailCounter.add(1, {
+    if (!validatedSiteConfig.success) {
+      getSiteConfigFailCounter.add(1, {
         lang,
         error_type: "validation_error",
-        error: JSON.stringify(validatedSiteConfiguration.error),
+        error: JSON.stringify(validatedSiteConfig.error),
       })
       console.error(
-        "contentstack.siteConfiguration validation error",
+        "contentstack.siteConfig validation error",
         JSON.stringify({
           query: { lang },
-          error: validatedSiteConfiguration.error,
+          error: validatedSiteConfig.error,
         })
       )
       return null
     }
-    getSiteConfigurationSuccessCounter.add(1, { lang })
+    getSiteConfigSuccessCounter.add(1, { lang })
     console.info(
-      "contentstack.siteConfiguration success",
+      "contentstack.siteConfig success",
       JSON.stringify({ query: { lang } })
     )
-    return validatedSiteConfiguration.data
+
+    const { globalAlert } = validatedSiteConfig.data
+
+    return {
+      ...validatedSiteConfig.data,
+      globalAlert: globalAlert
+        ? {
+            ...globalAlert,
+            phone_contact: contactConfig
+              ? getGlobalAlertPhoneContactData(globalAlert, contactConfig)
+              : null,
+          }
+        : null,
+    }
   }),
 })
diff --git a/server/routers/contentstack/base/telemetry.ts b/server/routers/contentstack/base/telemetry.ts
index db7139ed4..78000689d 100644
--- a/server/routers/contentstack/base/telemetry.ts
+++ b/server/routers/contentstack/base/telemetry.ts
@@ -91,13 +91,13 @@ export const getFooterFailCounter = meter.createCounter(
   "trpc.contentstack.footer.get-fail"
 )
 
-// OpenTelemetry metrics: SiteConfiguration
-export const getSiteConfigurationCounter = meter.createCounter(
-  "trpc.contentstack.SiteConfiguration.get"
+// OpenTelemetry metrics: SiteConfig
+export const getSiteConfigCounter = meter.createCounter(
+  "trpc.contentstack.SiteConfig.get"
 )
-export const getSiteConfigurationSuccessCounter = meter.createCounter(
-  "trpc.contentstack.SiteConfiguration.get-success"
+export const getSiteConfigSuccessCounter = meter.createCounter(
+  "trpc.contentstack.SiteConfig.get-success"
 )
-export const getSiteConfigurationFailCounter = meter.createCounter(
-  "trpc.contentstack.SiteConfiguration.get-fail"
+export const getSiteConfigFailCounter = meter.createCounter(
+  "trpc.contentstack.SiteConfig.get-fail"
 )
diff --git a/server/routers/contentstack/base/utils.ts b/server/routers/contentstack/base/utils.ts
index cd61dea0c..1bab9b170 100644
--- a/server/routers/contentstack/base/utils.ts
+++ b/server/routers/contentstack/base/utils.ts
@@ -1,11 +1,13 @@
-import type {
-  FooterLinkItem,
-  FooterRefDataRaw,
-} from "@/types/components/footer/footer"
+import { getValueFromContactConfig } from "@/utils/contactConfig"
+
+import { ContactConfig } from "./output"
+
+import type { FooterRefDataRaw } from "@/types/components/footer/footer"
 import { System } from "@/types/requests/system"
 import { Edges } from "@/types/requests/utils/edges"
 import { NodeRefs } from "@/types/requests/utils/refs"
 import type { HeaderRefs } from "@/types/trpc/routers/contentstack/header"
+import { SiteConfig } from "@/types/trpc/routers/contentstack/siteConfig"
 
 export function getConnections({ header }: HeaderRefs) {
   const connections: System["system"][] = [header.system]
@@ -68,3 +70,23 @@ export function getFooterConnections(refs: FooterRefDataRaw) {
 
   return connections
 }
+
+export function getGlobalAlertPhoneContactData(
+  globalAlert: SiteConfig["globalAlert"],
+  contactConfig: ContactConfig
+) {
+  if (globalAlert?.phone_contact) {
+    const { display_text, phone_number, footnote } = globalAlert.phone_contact
+
+    return {
+      display_text,
+      phone: phone_number
+        ? getValueFromContactConfig(phone_number, contactConfig)
+        : null,
+      footnote: footnote
+        ? getValueFromContactConfig(footnote, contactConfig)
+        : null,
+    }
+  }
+  return null
+}
diff --git a/types/trpc/routers/contentstack/siteConfiguration.ts b/types/trpc/routers/contentstack/siteConfig.ts
similarity index 63%
rename from types/trpc/routers/contentstack/siteConfiguration.ts
rename to types/trpc/routers/contentstack/siteConfig.ts
index dcc86c4ec..f51470770 100644
--- a/types/trpc/routers/contentstack/siteConfiguration.ts
+++ b/types/trpc/routers/contentstack/siteConfig.ts
@@ -2,7 +2,7 @@ import { z } from "zod"
 
 import {
   globalAlertSchema,
-  siteConfigurationSchema,
+  siteConfigSchema,
 } from "@/server/routers/contentstack/base/output"
 
 export enum GlobalAlertType {
@@ -10,8 +10,8 @@ export enum GlobalAlertType {
   Alarm = "alarm",
 }
 
-export type GetSiteConfigurationData = z.input<typeof siteConfigurationSchema>
-export type SiteConfiguration = z.output<typeof siteConfigurationSchema>
+export type GetSiteConfigData = z.input<typeof siteConfigSchema>
+export type SiteConfig = z.output<typeof siteConfigSchema>
 
 export type GetGlobalAlertData = z.input<typeof globalAlertSchema>
 export type GlobalAlert = z.output<typeof globalAlertSchema>

From c8d4f6c47cba29ef3ff824f1a9c1e598bf67bb91 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Wed, 16 Oct 2024 12:30:59 +0200
Subject: [PATCH 21/69] feat(SW-497): Changes to global alert schema

---
 lib/graphql/Fragments/Alert.graphql           | 36 ++++++++
 lib/graphql/Fragments/GlobalAlert.graphql     | 10 ---
 lib/graphql/Query/SiteConfig.graphql          |  4 +-
 server/routers/contentstack/base/output.ts    | 89 +++++++++++++++----
 server/routers/contentstack/base/query.ts     | 10 +--
 server/routers/contentstack/base/utils.ts     | 16 ++--
 types/enums/alert.ts                          |  5 ++
 types/trpc/routers/contentstack/siteConfig.ts | 10 +--
 8 files changed, 131 insertions(+), 49 deletions(-)
 create mode 100644 lib/graphql/Fragments/Alert.graphql
 delete mode 100644 lib/graphql/Fragments/GlobalAlert.graphql
 create mode 100644 types/enums/alert.ts

diff --git a/lib/graphql/Fragments/Alert.graphql b/lib/graphql/Fragments/Alert.graphql
new file mode 100644
index 000000000..2bd93830f
--- /dev/null
+++ b/lib/graphql/Fragments/Alert.graphql
@@ -0,0 +1,36 @@
+#import "./PageLink/AccountPageLink.graphql"
+#import "./PageLink/ContentPageLink.graphql"
+#import "./PageLink/HotelPageLink.graphql"
+#import "./PageLink/LoyaltyPageLink.graphql"
+
+fragment Alert on Alert {
+  type
+  heading
+  text
+  phone_contact {
+    display_text
+    phone_number
+    footnote
+  }
+  has_sidepeek_button
+  sidepeek_button {
+    cta_text
+  }
+  sidepeek_content {
+    heading
+    content {
+      embedded_itemsConnection {
+        edges {
+          node {
+            __typename
+            ...AccountPageLink
+            ...ContentPageLink
+            ...HotelPageLink
+            ...LoyaltyPageLink
+          }
+        }
+      }
+      json
+    }
+  }
+}
diff --git a/lib/graphql/Fragments/GlobalAlert.graphql b/lib/graphql/Fragments/GlobalAlert.graphql
deleted file mode 100644
index a9d5712f9..000000000
--- a/lib/graphql/Fragments/GlobalAlert.graphql
+++ /dev/null
@@ -1,10 +0,0 @@
-fragment GlobalAlert on GlobalAlert {
-  type
-  heading
-  text
-  phone_contact {
-    display_text
-    phone_number
-    footnote
-  }
-}
diff --git a/lib/graphql/Query/SiteConfig.graphql b/lib/graphql/Query/SiteConfig.graphql
index 52bac0fa4..59cc80616 100644
--- a/lib/graphql/Query/SiteConfig.graphql
+++ b/lib/graphql/Query/SiteConfig.graphql
@@ -1,4 +1,4 @@
-#import "../Fragments/GlobalAlert.graphql"
+#import "../Fragments/Alert.graphql"
 
 query GetSiteConfig($locale: String!) {
   all_site_config(limit: 1, locale: $locale) {
@@ -8,7 +8,7 @@ query GetSiteConfig($locale: String!) {
         alertConnection {
           edges {
             node {
-              ...GlobalAlert
+              ...Alert
             }
           }
         }
diff --git a/server/routers/contentstack/base/output.ts b/server/routers/contentstack/base/output.ts
index 55a94f790..e6d54f36d 100644
--- a/server/routers/contentstack/base/output.ts
+++ b/server/routers/contentstack/base/output.ts
@@ -14,8 +14,8 @@ import { removeMultipleSlashes } from "@/utils/url"
 
 import { systemSchema } from "../schemas/system"
 
-import { Image } from "@/types/image"
-import { GlobalAlertType } from "@/types/trpc/routers/contentstack/siteConfig"
+import { AlertTypeEnum } from "@/types/enums/alert"
+import type { Image } from "@/types/image"
 
 // Help me write this zod schema based on the type ContactConfig
 export const validateContactConfigSchema = z.object({
@@ -664,16 +664,75 @@ export const headerSchema = z
     }
   })
 
-export const globalAlertSchema = z.object({
-  type: z.nativeEnum(GlobalAlertType),
-  text: z.string(),
-  heading: z.string(),
-  phone_contact: z.object({
-    display_text: z.string().nullable(),
-    phone_number: z.string().nullable(),
-    footnote: z.string().nullable(),
-  }),
-})
+export const alertSchema = z
+  .object({
+    type: z.nativeEnum(AlertTypeEnum),
+    text: z.string(),
+    heading: z.string(),
+    phone_contact: z.object({
+      display_text: z.string(),
+      phone_number: z.string().nullable(),
+      footnote: z.string().nullable(),
+    }),
+    has_sidepeek_button: z.boolean().default(false),
+    sidepeek_button: z.object({
+      cta_text: z.string(),
+    }),
+    sidepeek_content: z.object({
+      heading: z.string(),
+      content: z.object({
+        json: z.any(),
+        embedded_itemsConnection: z.object({
+          edges: z.array(
+            z.object({
+              node: z
+                .discriminatedUnion("__typename", [
+                  pageLinks.accountPageSchema,
+                  pageLinks.contentPageSchema,
+                  pageLinks.hotelPageSchema,
+                  pageLinks.loyaltyPageSchema,
+                ])
+                .transform((data) => {
+                  const link = pageLinks.transform(data)
+                  if (link) {
+                    return link
+                  }
+                  return data
+                }),
+            })
+          ),
+        }),
+      }),
+    }),
+  })
+  .transform(
+    ({
+      type,
+      heading,
+      text,
+      phone_contact,
+      has_sidepeek_button,
+      sidepeek_button,
+      sidepeek_content,
+    }) => {
+      return {
+        type,
+        text,
+        heading,
+        phoneContact:
+          phone_contact.display_text && phone_contact.phone_number
+            ? {
+                displayText: phone_contact.display_text,
+                phoneNumber: phone_contact.phone_number,
+                footnote: phone_contact.footnote,
+              }
+            : null,
+        hasSidepeekButton: has_sidepeek_button,
+        sidepeekButton: has_sidepeek_button ? sidepeek_button : null,
+        sidepeekContent: has_sidepeek_button ? sidepeek_content : null,
+      }
+    }
+  )
 
 export const siteConfigSchema = z
   .object({
@@ -687,7 +746,7 @@ export const siteConfigSchema = z
                 edges: z
                   .array(
                     z.object({
-                      node: globalAlertSchema,
+                      node: alertSchema,
                     })
                   )
                   .max(1),
@@ -701,7 +760,7 @@ export const siteConfigSchema = z
   .transform((data) => {
     if (!data.all_site_config.items.length) {
       return {
-        globalAlert: null,
+        sitewideAlert: null,
         bookingWidgetDisabled: false,
       }
     }
@@ -709,7 +768,7 @@ export const siteConfigSchema = z
     const { sitewide_alert } = data.all_site_config.items[0]
 
     return {
-      globalAlert: sitewide_alert.alertConnection.edges[0]?.node || null,
+      sitewideAlert: sitewide_alert.alertConnection.edges[0]?.node || null,
       bookingWidgetDisabled: sitewide_alert.booking_widget_disabled,
     }
   })
diff --git a/server/routers/contentstack/base/query.ts b/server/routers/contentstack/base/query.ts
index 98597a825..580ebf7b2 100644
--- a/server/routers/contentstack/base/query.ts
+++ b/server/routers/contentstack/base/query.ts
@@ -67,9 +67,9 @@ import {
   getSiteConfigSuccessCounter,
 } from "./telemetry"
 import {
+  getAlertPhoneContactData,
   getConnections,
   getFooterConnections,
-  getGlobalAlertPhoneContactData,
 } from "./utils"
 
 import type {
@@ -667,15 +667,15 @@ export const baseQueryRouter = router({
       JSON.stringify({ query: { lang } })
     )
 
-    const { globalAlert } = validatedSiteConfig.data
+    const { sitewideAlert } = validatedSiteConfig.data
 
     return {
       ...validatedSiteConfig.data,
-      globalAlert: globalAlert
+      sitewideAlert: sitewideAlert
         ? {
-            ...globalAlert,
+            ...sitewideAlert,
             phone_contact: contactConfig
-              ? getGlobalAlertPhoneContactData(globalAlert, contactConfig)
+              ? getAlertPhoneContactData(sitewideAlert, contactConfig)
               : null,
           }
         : null,
diff --git a/server/routers/contentstack/base/utils.ts b/server/routers/contentstack/base/utils.ts
index 1bab9b170..48cee6b95 100644
--- a/server/routers/contentstack/base/utils.ts
+++ b/server/routers/contentstack/base/utils.ts
@@ -7,7 +7,7 @@ import { System } from "@/types/requests/system"
 import { Edges } from "@/types/requests/utils/edges"
 import { NodeRefs } from "@/types/requests/utils/refs"
 import type { HeaderRefs } from "@/types/trpc/routers/contentstack/header"
-import { SiteConfig } from "@/types/trpc/routers/contentstack/siteConfig"
+import { Alert } from "@/types/trpc/routers/contentstack/siteConfig"
 
 export function getConnections({ header }: HeaderRefs) {
   const connections: System["system"][] = [header.system]
@@ -71,18 +71,16 @@ export function getFooterConnections(refs: FooterRefDataRaw) {
   return connections
 }
 
-export function getGlobalAlertPhoneContactData(
-  globalAlert: SiteConfig["globalAlert"],
+export function getAlertPhoneContactData(
+  alert: Alert,
   contactConfig: ContactConfig
 ) {
-  if (globalAlert?.phone_contact) {
-    const { display_text, phone_number, footnote } = globalAlert.phone_contact
+  if (alert.phoneContact) {
+    const { displayText, phoneNumber, footnote } = alert.phoneContact
 
     return {
-      display_text,
-      phone: phone_number
-        ? getValueFromContactConfig(phone_number, contactConfig)
-        : null,
+      displayText,
+      phoneNumber: getValueFromContactConfig(phoneNumber, contactConfig),
       footnote: footnote
         ? getValueFromContactConfig(footnote, contactConfig)
         : null,
diff --git a/types/enums/alert.ts b/types/enums/alert.ts
new file mode 100644
index 000000000..2d46121fe
--- /dev/null
+++ b/types/enums/alert.ts
@@ -0,0 +1,5 @@
+export enum AlertTypeEnum {
+  Info = "info",
+  Warning = "warning",
+  Alarm = "alarm",
+}
diff --git a/types/trpc/routers/contentstack/siteConfig.ts b/types/trpc/routers/contentstack/siteConfig.ts
index f51470770..962e7777b 100644
--- a/types/trpc/routers/contentstack/siteConfig.ts
+++ b/types/trpc/routers/contentstack/siteConfig.ts
@@ -1,17 +1,11 @@
 import { z } from "zod"
 
 import {
-  globalAlertSchema,
+  alertSchema,
   siteConfigSchema,
 } from "@/server/routers/contentstack/base/output"
 
-export enum GlobalAlertType {
-  Info = "info",
-  Alarm = "alarm",
-}
-
 export type GetSiteConfigData = z.input<typeof siteConfigSchema>
 export type SiteConfig = z.output<typeof siteConfigSchema>
 
-export type GetGlobalAlertData = z.input<typeof globalAlertSchema>
-export type GlobalAlert = z.output<typeof globalAlertSchema>
+export type Alert = z.output<typeof alertSchema>

From 62b9a665695b195a24c8c90767a3d9e816a3ce13 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Fri, 18 Oct 2024 09:02:23 +0200
Subject: [PATCH 22/69] feat(SW-497): added link and refs to site config

---
 lib/graphql/Fragments/Alert.graphql           | 52 ++++++++++++
 lib/graphql/Query/SiteConfig.graphql          | 21 +++++
 server/routers/contentstack/base/output.ts    | 63 ++++++++++++++-
 server/routers/contentstack/base/query.ts     | 80 ++++++++++++++++++-
 server/routers/contentstack/base/telemetry.ts |  9 +++
 server/routers/contentstack/base/utils.ts     | 11 ++-
 types/trpc/routers/contentstack/siteConfig.ts |  3 +
 7 files changed, 227 insertions(+), 12 deletions(-)

diff --git a/lib/graphql/Fragments/Alert.graphql b/lib/graphql/Fragments/Alert.graphql
index 2bd93830f..65d1d9cdb 100644
--- a/lib/graphql/Fragments/Alert.graphql
+++ b/lib/graphql/Fragments/Alert.graphql
@@ -3,6 +3,11 @@
 #import "./PageLink/HotelPageLink.graphql"
 #import "./PageLink/LoyaltyPageLink.graphql"
 
+#import "./AccountPage/Ref.graphql"
+#import "./ContentPage/Ref.graphql"
+#import "./HotelPage/Ref.graphql"
+#import "./LoyaltyPage/Ref.graphql"
+
 fragment Alert on Alert {
   type
   heading
@@ -12,6 +17,21 @@ fragment Alert on Alert {
     phone_number
     footnote
   }
+  has_link
+  link {
+    title
+    linkConnection {
+      edges {
+        node {
+          __typename
+          ...AccountPageLink
+          ...ContentPageLink
+          ...HotelPageLink
+          ...LoyaltyPageLink
+        }
+      }
+    }
+  }
   has_sidepeek_button
   sidepeek_button {
     cta_text
@@ -34,3 +54,35 @@ fragment Alert on Alert {
     }
   }
 }
+
+fragment AlertRef on Alert {
+  link {
+    linkConnection {
+      edges {
+        node {
+          __typename
+          ...AccountPageRef
+          ...ContentPageRef
+          ...HotelPageRef
+          ...LoyaltyPageRef
+        }
+      }
+    }
+  }
+  sidepeek_content {
+    content {
+      embedded_itemsConnection {
+        edges {
+          node {
+            __typename
+            ...AccountPageRef
+            ...ContentPageRef
+            ...HotelPageRef
+            ...LoyaltyPageRef
+          }
+        }
+      }
+      json
+    }
+  }
+}
diff --git a/lib/graphql/Query/SiteConfig.graphql b/lib/graphql/Query/SiteConfig.graphql
index 59cc80616..4c21f5214 100644
--- a/lib/graphql/Query/SiteConfig.graphql
+++ b/lib/graphql/Query/SiteConfig.graphql
@@ -1,3 +1,5 @@
+#import "../Fragments/System.graphql"
+
 #import "../Fragments/Alert.graphql"
 
 query GetSiteConfig($locale: String!) {
@@ -16,3 +18,22 @@ query GetSiteConfig($locale: String!) {
     }
   }
 }
+
+query GetSiteConfigRef($locale: String!) {
+  all_site_config(limit: 1, locale: $locale) {
+    items {
+      sitewide_alert {
+        alertConnection {
+          edges {
+            node {
+              ...AlertRef
+            }
+          }
+        }
+      }
+      system {
+        ...System
+      }
+    }
+  }
+}
diff --git a/server/routers/contentstack/base/output.ts b/server/routers/contentstack/base/output.ts
index e6d54f36d..85aa2651a 100644
--- a/server/routers/contentstack/base/output.ts
+++ b/server/routers/contentstack/base/output.ts
@@ -541,6 +541,7 @@ export const headerRefsSchema = z
   })
 
 const linkUnionSchema = z.discriminatedUnion("__typename", [
+  pageLinks.accountPageSchema,
   pageLinks.contentPageSchema,
   pageLinks.hotelPageSchema,
   pageLinks.loyaltyPageSchema,
@@ -674,7 +675,9 @@ export const alertSchema = z
       phone_number: z.string().nullable(),
       footnote: z.string().nullable(),
     }),
-    has_sidepeek_button: z.boolean().default(false),
+    has_link: z.boolean(),
+    link: linkAndTitleSchema,
+    has_sidepeek_button: z.boolean(),
     sidepeek_button: z.object({
       cta_text: z.string(),
     }),
@@ -711,10 +714,13 @@ export const alertSchema = z
       heading,
       text,
       phone_contact,
+      has_link,
+      link,
       has_sidepeek_button,
       sidepeek_button,
       sidepeek_content,
     }) => {
+      const hasLink = has_link && link.link
       return {
         type,
         text,
@@ -727,9 +733,17 @@ export const alertSchema = z
                 footnote: phone_contact.footnote,
               }
             : null,
-        hasSidepeekButton: has_sidepeek_button,
-        sidepeekButton: has_sidepeek_button ? sidepeek_button : null,
-        sidepeekContent: has_sidepeek_button ? sidepeek_content : null,
+        hasSidepeekButton: !!has_sidepeek_button,
+        link: hasLink
+          ? {
+              url: link.link.url,
+              title: link.title,
+            }
+          : null,
+        sidepeekButton:
+          !hasLink && has_sidepeek_button ? sidepeek_button : null,
+        sidepeekContent:
+          !hasLink && has_sidepeek_button ? sidepeek_content : null,
       }
     }
   )
@@ -772,3 +786,44 @@ export const siteConfigSchema = z
       bookingWidgetDisabled: sitewide_alert.booking_widget_disabled,
     }
   })
+
+const sidepeekContentRefSchema = z.object({
+  content: z.object({
+    embedded_itemsConnection: z.object({
+      edges: z.array(
+        z.object({
+          node: z.discriminatedUnion("__typename", [
+            pageLinks.accountPageRefSchema,
+            pageLinks.contentPageRefSchema,
+            pageLinks.hotelPageRefSchema,
+            pageLinks.loyaltyPageRefSchema,
+          ]),
+        })
+      ),
+    }),
+  }),
+})
+
+const alertConnectionRefSchema = z.object({
+  edges: z.array(
+    z.object({
+      node: z.object({
+        link: linkRefsSchema,
+        sidepeek_content: sidepeekContentRefSchema,
+      }),
+    })
+  ),
+})
+
+export const siteConfigRefSchema = z.object({
+  all_site_config: z.object({
+    items: z.array(
+      z.object({
+        sitewide_alert: z.object({
+          alertConnection: alertConnectionRefSchema,
+        }),
+        system: systemSchema,
+      })
+    ),
+  }),
+})
diff --git a/server/routers/contentstack/base/query.ts b/server/routers/contentstack/base/query.ts
index 580ebf7b2..2a26e980e 100644
--- a/server/routers/contentstack/base/query.ts
+++ b/server/routers/contentstack/base/query.ts
@@ -10,7 +10,10 @@ import {
 } from "@/lib/graphql/Query/Current/Header.graphql"
 import { GetFooter, GetFooterRef } from "@/lib/graphql/Query/Footer.graphql"
 import { GetHeader, GetHeaderRef } from "@/lib/graphql/Query/Header.graphql"
-import { GetSiteConfig } from "@/lib/graphql/Query/SiteConfig.graphql"
+import {
+  GetSiteConfig,
+  GetSiteConfigRef,
+} from "@/lib/graphql/Query/SiteConfig.graphql"
 import { request } from "@/lib/graphql/request"
 import { notFound } from "@/server/errors/trpc"
 import { contentstackBaseProcedure, router } from "@/server/trpc"
@@ -31,6 +34,7 @@ import {
   type GetCurrentHeaderData,
   headerRefsSchema,
   headerSchema,
+  siteConfigRefSchema,
   siteConfigSchema,
   validateContactConfigSchema,
   validateCurrentFooterConfigSchema,
@@ -64,6 +68,9 @@ import {
   getHeaderSuccessCounter,
   getSiteConfigCounter,
   getSiteConfigFailCounter,
+  getSiteConfigRefCounter,
+  getSiteConfigRefFailCounter,
+  getSiteConfigRefSuccessCounter,
   getSiteConfigSuccessCounter,
 } from "./telemetry"
 import {
@@ -80,7 +87,10 @@ import type {
   GetHeader as GetHeaderData,
   GetHeaderRefs,
 } from "@/types/trpc/routers/contentstack/header"
-import type { GetSiteConfigData } from "@/types/trpc/routers/contentstack/siteConfig"
+import type {
+  GetSiteConfigData,
+  GetSiteConfigRefData,
+} from "@/types/trpc/routers/contentstack/siteConfig"
 
 async function getContactConfig(lang: Lang) {
   getContactConfigCounter.add(1, { lang })
@@ -604,6 +614,72 @@ export const baseQueryRouter = router({
   }),
   siteConfig: contentstackBaseProcedure.query(async ({ ctx }) => {
     const { lang } = ctx
+
+    getSiteConfigRefCounter.add(1, { lang })
+    console.info(
+      "contentstack.siteConfig.ref start",
+      JSON.stringify({ query: { lang } })
+    )
+    const responseRef = await request<GetSiteConfigRefData>(
+      GetSiteConfigRef,
+      {
+        locale: lang,
+      },
+      {
+        cache: "force-cache",
+        next: {
+          tags: [generateRefsResponseTag(lang, "siteConfig")],
+        },
+      }
+    )
+
+    if (!responseRef.data) {
+      const notFoundError = notFound(responseRef)
+      getSiteConfigRefFailCounter.add(1, {
+        lang,
+        error_type: "not_found",
+        error: JSON.stringify({ code: notFoundError.code }),
+      })
+      console.error(
+        "contentstack.siteConfig.refs not found error",
+        JSON.stringify({
+          query: {
+            lang,
+          },
+          error: { code: notFoundError.code },
+        })
+      )
+      throw notFoundError
+    }
+
+    const validatedSiteConfigRef = siteConfigRefSchema.safeParse(
+      responseRef.data
+    )
+
+    if (!validatedSiteConfigRef.success) {
+      getSiteConfigRefFailCounter.add(1, {
+        lang,
+        error_type: "validation_error",
+        error: JSON.stringify(validatedSiteConfigRef.error),
+      })
+      console.error(
+        "contentstack.siteConfig.refs validation error",
+        JSON.stringify({
+          query: {
+            lang,
+          },
+          error: validatedSiteConfigRef.error,
+        })
+      )
+      return null
+    }
+
+    getSiteConfigRefSuccessCounter.add(1, { lang })
+    console.info(
+      "contentstack.siteConfig.refs success",
+      JSON.stringify({ query: { lang } })
+    )
+
     getSiteConfigCounter.add(1, { lang })
     console.info(
       "contentstack.siteConfig start",
diff --git a/server/routers/contentstack/base/telemetry.ts b/server/routers/contentstack/base/telemetry.ts
index 78000689d..159f69d36 100644
--- a/server/routers/contentstack/base/telemetry.ts
+++ b/server/routers/contentstack/base/telemetry.ts
@@ -92,6 +92,15 @@ export const getFooterFailCounter = meter.createCounter(
 )
 
 // OpenTelemetry metrics: SiteConfig
+export const getSiteConfigRefCounter = meter.createCounter(
+  "trpc.contentstack.SiteConfig.ref.get"
+)
+export const getSiteConfigRefSuccessCounter = meter.createCounter(
+  "trpc.contentstack.SiteConfig.ref.get-success"
+)
+export const getSiteConfigRefFailCounter = meter.createCounter(
+  "trpc.contentstack.SiteConfig.ref.get-fail"
+)
 export const getSiteConfigCounter = meter.createCounter(
   "trpc.contentstack.SiteConfig.get"
 )
diff --git a/server/routers/contentstack/base/utils.ts b/server/routers/contentstack/base/utils.ts
index 48cee6b95..df88e9cb7 100644
--- a/server/routers/contentstack/base/utils.ts
+++ b/server/routers/contentstack/base/utils.ts
@@ -1,13 +1,12 @@
 import { getValueFromContactConfig } from "@/utils/contactConfig"
 
-import { ContactConfig } from "./output"
-
 import type { FooterRefDataRaw } from "@/types/components/footer/footer"
-import { System } from "@/types/requests/system"
-import { Edges } from "@/types/requests/utils/edges"
-import { NodeRefs } from "@/types/requests/utils/refs"
+import type { System } from "@/types/requests/system"
+import type { Edges } from "@/types/requests/utils/edges"
+import type { NodeRefs } from "@/types/requests/utils/refs"
 import type { HeaderRefs } from "@/types/trpc/routers/contentstack/header"
-import { Alert } from "@/types/trpc/routers/contentstack/siteConfig"
+import type { Alert } from "@/types/trpc/routers/contentstack/siteConfig"
+import type { ContactConfig } from "./output"
 
 export function getConnections({ header }: HeaderRefs) {
   const connections: System["system"][] = [header.system]
diff --git a/types/trpc/routers/contentstack/siteConfig.ts b/types/trpc/routers/contentstack/siteConfig.ts
index 962e7777b..8dc553cb2 100644
--- a/types/trpc/routers/contentstack/siteConfig.ts
+++ b/types/trpc/routers/contentstack/siteConfig.ts
@@ -2,9 +2,12 @@ import { z } from "zod"
 
 import {
   alertSchema,
+  siteConfigRefSchema,
   siteConfigSchema,
 } from "@/server/routers/contentstack/base/output"
 
+export type GetSiteConfigRefData = z.infer<typeof siteConfigRefSchema>
+
 export type GetSiteConfigData = z.input<typeof siteConfigSchema>
 export type SiteConfig = z.output<typeof siteConfigSchema>
 

From b33381d1b4646fba6a0c749daa692c2ac9376770 Mon Sep 17 00:00:00 2001
From: Tobias Johansson <tobias.johansson@scandichotels.com>
Date: Mon, 21 Oct 2024 10:39:19 +0000
Subject: [PATCH 23/69] Merged in feat/SW-588-payment-saved-card (pull request
 #697)

feat(SW-588): Added saved card to payment step

* feat(SW-588): Added saved card to payment step

* feat(SW-588): Add proper label for saved card

* feat(SW-588): fix from PR feedback

* feat(SW-588): Add preloading of data

* feat(SW-588): remove onChange logic for PaymentOption

* feat(SW-588): moved payment files to correct folder

* feat(SW-588): moved preload to layout

* fix: remove unused prop


Approved-by: Simon.Emanuelsson
---
 .../hotelreservation/[step]/layout.tsx        |  19 +-
 .../(public)/hotelreservation/[step]/page.tsx |  25 ++-
 .../Payment/PaymentOption/index.tsx           |  49 ++++++
 .../PaymentOption/paymentOption.module.css    |   0
 .../Payment/PaymentOption/paymentOption.ts    |   6 +-
 .../Payment/index.tsx                         | 166 ++++++++++++------
 .../Payment/payment.module.css                |   8 +-
 .../Payment/schema.ts                         |   4 +-
 .../EnterDetails/SectionAccordion/index.tsx   |   2 +-
 .../Payment/PaymentOption/index.tsx           |  43 -----
 constants/booking.ts                          |  27 +++
 i18n/dictionaries/da.json                     |  74 ++++----
 i18n/dictionaries/de.json                     |  74 ++++----
 i18n/dictionaries/en.json                     |  70 ++++----
 i18n/dictionaries/fi.json                     |  74 ++++----
 i18n/dictionaries/no.json                     |  72 ++++----
 i18n/dictionaries/sv.json                     |  74 ++++----
 lib/trpc/memoizedRequests/index.ts            |  16 ++
 server/routers/user/output.ts                 |   9 +-
 server/routers/user/query.ts                  |  99 ++++++-----
 .../hotelReservation/selectRate/section.ts    |   6 +-
 21 files changed, 536 insertions(+), 381 deletions(-)
 create mode 100644 components/HotelReservation/EnterDetails/Payment/PaymentOption/index.tsx
 rename components/HotelReservation/{SelectRate => EnterDetails}/Payment/PaymentOption/paymentOption.module.css (100%)
 rename components/HotelReservation/{SelectRate => EnterDetails}/Payment/PaymentOption/paymentOption.ts (65%)
 rename components/HotelReservation/{SelectRate => EnterDetails}/Payment/index.tsx (55%)
 rename components/HotelReservation/{SelectRate => EnterDetails}/Payment/payment.module.css (80%)
 rename components/HotelReservation/{SelectRate => EnterDetails}/Payment/schema.ts (74%)
 delete mode 100644 components/HotelReservation/SelectRate/Payment/PaymentOption/index.tsx

diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx
index 5f62c69c9..0e8edd50e 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx
@@ -1,6 +1,10 @@
 import { redirect } from "next/navigation"
 
-import { serverClient } from "@/lib/trpc/server"
+import {
+  getCreditCardsSafely,
+  getHotelData,
+  getProfileSafely,
+} from "@/lib/trpc/memoizedRequests"
 
 import EnterDetailsProvider from "@/components/HotelReservation/EnterDetails/Provider"
 import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
@@ -14,15 +18,20 @@ import styles from "./layout.module.css"
 import { StepEnum } from "@/types/components/enterDetails/step"
 import type { LangParams, LayoutArgs } from "@/types/params"
 
+function preload(id: string, lang: string) {
+  void getHotelData(id, lang)
+  void getProfileSafely()
+  void getCreditCardsSafely()
+}
+
 export default async function StepLayout({
   children,
   params,
 }: React.PropsWithChildren<LayoutArgs<LangParams & { step: StepEnum }>>) {
   setLang(params.lang)
-  const hotel = await serverClient().hotel.hotelData.get({
-    hotelId: "811",
-    language: params.lang,
-  })
+  preload("811", params.lang)
+
+  const hotel = await getHotelData("811", params.lang)
 
   if (!hotel?.data) {
     redirect(`/${params.lang}`)
diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
index 5f2666c8e..8e8d3c891 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
@@ -1,14 +1,17 @@
 import { notFound } from "next/navigation"
 
-import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
-import { serverClient } from "@/lib/trpc/server"
+import {
+  getCreditCardsSafely,
+  getHotelData,
+  getProfileSafely,
+} from "@/lib/trpc/memoizedRequests"
 
 import BedType from "@/components/HotelReservation/EnterDetails/BedType"
 import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
 import Details from "@/components/HotelReservation/EnterDetails/Details"
 import HistoryStateManager from "@/components/HotelReservation/EnterDetails/HistoryStateManager"
+import Payment from "@/components/HotelReservation/EnterDetails/Payment"
 import SectionAccordion from "@/components/HotelReservation/EnterDetails/SectionAccordion"
-import Payment from "@/components/HotelReservation/SelectRate/Payment"
 import { getIntl } from "@/i18n"
 
 import { StepEnum } from "@/types/components/enterDetails/step"
@@ -25,12 +28,9 @@ export default async function StepPage({
 
   const intl = await getIntl()
 
-  const hotel = await serverClient().hotel.hotelData.get({
-    hotelId: "811",
-    language: lang,
-  })
-
+  const hotel = await getHotelData("811", lang)
   const user = await getProfileSafely()
+  const savedCreditCards = await getCreditCardsSafely()
 
   if (!isValidStep(step) || !hotel) {
     return notFound()
@@ -65,7 +65,14 @@ export default async function StepPage({
         step={StepEnum.payment}
         label={intl.formatMessage({ id: "Select payment method" })}
       >
-        <Payment hotel={hotel.data.attributes} />
+        <Payment
+          hotelId={hotel.data.attributes.operaId}
+          otherPaymentOptions={
+            hotel.data.attributes.merchantInformationData
+              .alternatePaymentOptions
+          }
+          savedCreditCards={savedCreditCards}
+        />
       </SectionAccordion>
     </section>
   )
diff --git a/components/HotelReservation/EnterDetails/Payment/PaymentOption/index.tsx b/components/HotelReservation/EnterDetails/Payment/PaymentOption/index.tsx
new file mode 100644
index 000000000..c076a074b
--- /dev/null
+++ b/components/HotelReservation/EnterDetails/Payment/PaymentOption/index.tsx
@@ -0,0 +1,49 @@
+import Image from "next/image"
+import { useFormContext } from "react-hook-form"
+
+import { PAYMENT_METHOD_ICONS, PaymentMethodEnum } from "@/constants/booking"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import { PaymentOptionProps } from "./paymentOption"
+
+import styles from "./paymentOption.module.css"
+
+export default function PaymentOption({
+  name,
+  value,
+  label,
+  cardNumber,
+  registerOptions = {},
+}: PaymentOptionProps) {
+  const { register } = useFormContext()
+
+  return (
+    <label key={value} className={styles.paymentOption}>
+      <div className={styles.titleContainer}>
+        <input
+          aria-hidden
+          hidden
+          type="radio"
+          id={value}
+          value={value}
+          {...register(name, registerOptions)}
+        />
+        <span className={styles.radio} />
+        <Body>{label}</Body>
+      </div>
+      {cardNumber ? (
+        <Caption color="uiTextMediumContrast">•••• {cardNumber}</Caption>
+      ) : (
+        <Image
+          className={styles.paymentOptionIcon}
+          src={PAYMENT_METHOD_ICONS[value as PaymentMethodEnum]}
+          alt={label}
+          width={48}
+          height={32}
+        />
+      )}
+    </label>
+  )
+}
diff --git a/components/HotelReservation/SelectRate/Payment/PaymentOption/paymentOption.module.css b/components/HotelReservation/EnterDetails/Payment/PaymentOption/paymentOption.module.css
similarity index 100%
rename from components/HotelReservation/SelectRate/Payment/PaymentOption/paymentOption.module.css
rename to components/HotelReservation/EnterDetails/Payment/PaymentOption/paymentOption.module.css
diff --git a/components/HotelReservation/SelectRate/Payment/PaymentOption/paymentOption.ts b/components/HotelReservation/EnterDetails/Payment/PaymentOption/paymentOption.ts
similarity index 65%
rename from components/HotelReservation/SelectRate/Payment/PaymentOption/paymentOption.ts
rename to components/HotelReservation/EnterDetails/Payment/PaymentOption/paymentOption.ts
index 5d77f6560..151a18860 100644
--- a/components/HotelReservation/SelectRate/Payment/PaymentOption/paymentOption.ts
+++ b/components/HotelReservation/EnterDetails/Payment/PaymentOption/paymentOption.ts
@@ -1,10 +1,10 @@
 import { RegisterOptions } from "react-hook-form"
 
-import { PaymentMethodEnum } from "@/constants/booking"
-
 export interface PaymentOptionProps {
   name: string
-  value: PaymentMethodEnum
+  value: string
   label: string
+  cardNumber?: string
   registerOptions?: RegisterOptions
+  onChange?: () => void
 }
diff --git a/components/HotelReservation/SelectRate/Payment/index.tsx b/components/HotelReservation/EnterDetails/Payment/index.tsx
similarity index 55%
rename from components/HotelReservation/SelectRate/Payment/index.tsx
rename to components/HotelReservation/EnterDetails/Payment/index.tsx
index b1bddd84c..3d582e7e3 100644
--- a/components/HotelReservation/SelectRate/Payment/index.tsx
+++ b/components/HotelReservation/EnterDetails/Payment/index.tsx
@@ -23,6 +23,7 @@ import LoadingSpinner from "@/components/LoadingSpinner"
 import Button from "@/components/TempDesignSystem/Button"
 import Checkbox from "@/components/TempDesignSystem/Checkbox"
 import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
@@ -38,7 +39,15 @@ import { PaymentProps } from "@/types/components/hotelReservation/selectRate/sec
 const maxRetries = 40
 const retryInterval = 2000
 
-export default function Payment({ hotel }: PaymentProps) {
+function isPaymentMethodEnum(value: string): value is PaymentMethodEnum {
+  return Object.values(PaymentMethodEnum).includes(value as PaymentMethodEnum)
+}
+
+export default function Payment({
+  hotelId,
+  otherPaymentOptions,
+  savedCreditCards,
+}: PaymentProps) {
   const router = useRouter()
   const lang = useLang()
   const intl = useIntl()
@@ -46,7 +55,9 @@ export default function Payment({ hotel }: PaymentProps) {
 
   const methods = useForm<PaymentFormData>({
     defaultValues: {
-      paymentMethod: PaymentMethodEnum.card,
+      paymentMethod: savedCreditCards?.length
+        ? savedCreditCards[0].id
+        : PaymentMethodEnum.card,
       smsConfirmation: false,
       termsAndConditions: false,
     },
@@ -87,8 +98,17 @@ export default function Payment({ hotel }: PaymentProps) {
   }, [confirmationNumber, bookingStatus, router])
 
   function handleSubmit(data: PaymentFormData) {
+    // set payment method to card if saved card is submitted
+    const paymentMethod = isPaymentMethodEnum(data.paymentMethod)
+      ? data.paymentMethod
+      : PaymentMethodEnum.card
+
+    const savedCreditCard = savedCreditCards?.find(
+      (card) => card.id === data.paymentMethod
+    )
+
     initiateBooking.mutate({
-      hotelId: hotel.operaId,
+      hotelId: hotelId,
       checkInDate: "2024-12-10",
       checkOutDate: "2024-12-11",
       rooms: [
@@ -116,7 +136,14 @@ export default function Payment({ hotel }: PaymentProps) {
         },
       ],
       payment: {
-        paymentMethod: data.paymentMethod,
+        paymentMethod,
+        card: savedCreditCard
+          ? {
+              alias: savedCreditCard.alias,
+              expiryDate: savedCreditCard.expirationDate,
+              cardType: savedCreditCard.cardType,
+            }
+          : undefined,
         cardHolder: {
           email: "test.user@scandichotels.com",
           name: "Test User",
@@ -143,65 +170,94 @@ export default function Payment({ hotel }: PaymentProps) {
         className={styles.paymentContainer}
         onSubmit={methods.handleSubmit(handleSubmit)}
       >
-        <div className={styles.paymentOptionContainer}>
-          <PaymentOption
-            name="paymentMethod"
-            value={PaymentMethodEnum.card}
-            label={intl.formatMessage({ id: "Credit card" })}
-          />
-          {hotel.merchantInformationData.alternatePaymentOptions.map(
-            (paymentMethod) => (
+        {savedCreditCards?.length ? (
+          <section className={styles.section}>
+            <Body color="uiTextHighContrast" textTransform="bold">
+              {intl.formatMessage({ id: "MY SAVED CARDS" })}
+            </Body>
+            <div className={styles.paymentOptionContainer}>
+              {savedCreditCards?.map((savedCreditCard) => (
+                <PaymentOption
+                  key={savedCreditCard.id}
+                  name="paymentMethod"
+                  value={savedCreditCard.id}
+                  label={
+                    PAYMENT_METHOD_TITLES[
+                      savedCreditCard.cardType as PaymentMethodEnum
+                    ]
+                  }
+                  cardNumber={savedCreditCard.truncatedNumber}
+                />
+              ))}
+            </div>
+          </section>
+        ) : null}
+        <section className={styles.section}>
+          {savedCreditCards?.length ? (
+            <Body color="uiTextHighContrast" textTransform="bold">
+              {intl.formatMessage({ id: "OTHER PAYMENT METHODS" })}
+            </Body>
+          ) : null}
+          <div className={styles.paymentOptionContainer}>
+            <PaymentOption
+              name="paymentMethod"
+              value={PaymentMethodEnum.card}
+              label={intl.formatMessage({ id: "Credit card" })}
+            />
+            {otherPaymentOptions.map((paymentMethod) => (
               <PaymentOption
                 key={paymentMethod}
                 name="paymentMethod"
-                value={paymentMethod as PaymentMethodEnum}
+                value={paymentMethod}
                 label={
                   PAYMENT_METHOD_TITLES[paymentMethod as PaymentMethodEnum]
                 }
               />
-            )
-          )}
-        </div>
-        <Checkbox name="smsConfirmation">
-          <Caption>
-            {intl.formatMessage({
-              id: "I would like to get my booking confirmation via sms",
-            })}
-          </Caption>
-        </Checkbox>
+            ))}
+          </div>
+        </section>
+        <section className={styles.section}>
+          <Checkbox name="smsConfirmation">
+            <Caption>
+              {intl.formatMessage({
+                id: "I would like to get my booking confirmation via sms",
+              })}
+            </Caption>
+          </Checkbox>
 
-        <AriaLabel className={styles.terms}>
-          <Checkbox name="termsAndConditions" />
-          <Caption>
-            {intl.formatMessage<React.ReactNode>(
-              {
-                id: "booking.terms",
-              },
-              {
-                termsLink: (str) => (
-                  <Link
-                    className={styles.link}
-                    variant="underscored"
-                    href={bookingTermsAndConditions[lang]}
-                    target="_blank"
-                  >
-                    {str}
-                  </Link>
-                ),
-                privacyLink: (str) => (
-                  <Link
-                    className={styles.link}
-                    variant="underscored"
-                    href={privacyPolicy[lang]}
-                    target="_blank"
-                  >
-                    {str}
-                  </Link>
-                ),
-              }
-            )}
-          </Caption>
-        </AriaLabel>
+          <AriaLabel className={styles.terms}>
+            <Checkbox name="termsAndConditions" />
+            <Caption>
+              {intl.formatMessage<React.ReactNode>(
+                {
+                  id: "booking.terms",
+                },
+                {
+                  termsLink: (str) => (
+                    <Link
+                      className={styles.link}
+                      variant="underscored"
+                      href={bookingTermsAndConditions[lang]}
+                      target="_blank"
+                    >
+                      {str}
+                    </Link>
+                  ),
+                  privacyLink: (str) => (
+                    <Link
+                      className={styles.link}
+                      variant="underscored"
+                      href={privacyPolicy[lang]}
+                      target="_blank"
+                    >
+                      {str}
+                    </Link>
+                  ),
+                }
+              )}
+            </Caption>
+          </AriaLabel>
+        </section>
         <Button
           type="submit"
           className={styles.submitButton}
diff --git a/components/HotelReservation/SelectRate/Payment/payment.module.css b/components/HotelReservation/EnterDetails/Payment/payment.module.css
similarity index 80%
rename from components/HotelReservation/SelectRate/Payment/payment.module.css
rename to components/HotelReservation/EnterDetails/Payment/payment.module.css
index d55cfd359..7f4f2899a 100644
--- a/components/HotelReservation/SelectRate/Payment/payment.module.css
+++ b/components/HotelReservation/EnterDetails/Payment/payment.module.css
@@ -1,10 +1,16 @@
 .paymentContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x3);
+  gap: var(--Spacing-x4);
   max-width: 480px;
 }
 
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
 .paymentOptionContainer {
   display: flex;
   flex-direction: column;
diff --git a/components/HotelReservation/SelectRate/Payment/schema.ts b/components/HotelReservation/EnterDetails/Payment/schema.ts
similarity index 74%
rename from components/HotelReservation/SelectRate/Payment/schema.ts
rename to components/HotelReservation/EnterDetails/Payment/schema.ts
index ccade33c5..539406a8d 100644
--- a/components/HotelReservation/SelectRate/Payment/schema.ts
+++ b/components/HotelReservation/EnterDetails/Payment/schema.ts
@@ -1,9 +1,7 @@
 import { z } from "zod"
 
-import { PaymentMethodEnum } from "@/constants/booking"
-
 export const paymentSchema = z.object({
-  paymentMethod: z.nativeEnum(PaymentMethodEnum),
+  paymentMethod: z.string(),
   smsConfirmation: z.boolean(),
   termsAndConditions: z.boolean().refine((value) => value === true, {
     message: "You must accept the terms and conditions",
diff --git a/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx b/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
index 52aa11685..a508974c5 100644
--- a/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
+++ b/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
diff --git a/components/HotelReservation/SelectRate/Payment/PaymentOption/index.tsx b/components/HotelReservation/SelectRate/Payment/PaymentOption/index.tsx
deleted file mode 100644
index a44501ae4..000000000
--- a/components/HotelReservation/SelectRate/Payment/PaymentOption/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import Image from "next/image"
-import { useFormContext } from "react-hook-form"
-
-import { PAYMENT_METHOD_ICONS } from "@/constants/booking"
-
-import Body from "@/components/TempDesignSystem/Text/Body"
-
-import { PaymentOptionProps } from "./paymentOption"
-
-import styles from "./paymentOption.module.css"
-
-export default function PaymentOption({
-  name,
-  value,
-  label,
-}: PaymentOptionProps) {
-  const { register } = useFormContext()
-  return (
-    <label key={value} className={styles.paymentOption} htmlFor={value}>
-      <div className={styles.titleContainer}>
-        <input
-          aria-hidden
-          hidden
-          type="radio"
-          id={value}
-          value={value}
-          {...register(name)}
-        />
-        <span className={styles.radio} />
-        <Body asChild>
-          <label htmlFor={value}>{label}</label>
-        </Body>
-      </div>
-      <Image
-        className={styles.paymentOptionIcon}
-        src={PAYMENT_METHOD_ICONS[value]}
-        alt={label}
-        width={48}
-        height={32}
-      />
-    </label>
-  )
-}
diff --git a/constants/booking.ts b/constants/booking.ts
index 5b2e47746..9f5b6fed9 100644
--- a/constants/booking.ts
+++ b/constants/booking.ts
@@ -17,6 +17,15 @@ export enum PaymentMethodEnum {
   weChatPay = "weChatPay",
   payPal = "payPal",
   klarna = "klarna",
+  americanExpress = "americanExpress",
+  dankort = "dankort",
+  dinersClub = "dinersClub",
+  jcb = "jcb",
+  masterCard = "masterCard",
+  visa = "visa",
+  maestro = "maestro",
+  chinaUnionPay = "chinaUnionPay",
+  discover = "discover",
 }
 
 export const PAYMENT_METHOD_TITLES: Record<
@@ -33,6 +42,15 @@ export const PAYMENT_METHOD_TITLES: Record<
   weChatPay: "WeChat Pay",
   payPal: "PayPal",
   klarna: "Klarna",
+  americanExpress: "American Express",
+  dankort: "Dankort",
+  dinersClub: "Diners Club",
+  jcb: "JCB",
+  masterCard: "Mastercard",
+  visa: "Visa",
+  maestro: "Maestro",
+  chinaUnionPay: "China UnionPay",
+  discover: "Discover",
 }
 
 export const PAYMENT_METHOD_ICONS: Record<
@@ -49,4 +67,13 @@ export const PAYMENT_METHOD_ICONS: Record<
   weChatPay: "/_static/icons/payment/wechat-pay.svg",
   payPal: "/_static/icons/payment/paypal.svg",
   klarna: "/_static/icons/payment/klarna.svg",
+  americanExpress: "/_static/icons/payment/american-express.svg",
+  dankort: "/_static/icons/payment/dankort.svg",
+  dinersClub: "/_static/icons/payment/diners-club.svg",
+  jcb: "/_static/icons/payment/jcb.svg",
+  masterCard: "/_static/icons/payment/mastercard.svg",
+  visa: "/_static/icons/payment/visa.svg",
+  maestro: "/_static/icons/payment/maestro.svg",
+  chinaUnionPay: "/_static/icons/payment/china-union-pay.svg",
+  discover: "/_static/icons/payment/discover.svg",
 }
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index 24675f021..88ac5e6b3 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -9,8 +9,8 @@
   "Add code": "Tilføj kode",
   "Add new card": "Tilføj nyt kort",
   "Address": "Adresse",
-  "Airport": "Lufthavn",
   "Adults": "voksne",
+  "Airport": "Lufthavn",
   "All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.": "Alle vores morgenmadsbuffeter tilbyder glutenfrie, veganske og allergivenlige muligheder.",
   "Already a friend?": "Allerede en ven?",
   "Amenities": "Faciliteter",
@@ -23,6 +23,7 @@
   "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 of today": "pr. dags dato",
   "As our": "Som vores {level}",
   "As our Close Friend": "Som vores nære ven",
   "At latest": "Senest",
@@ -35,6 +36,12 @@
   "Book": "Book",
   "Book reward night": "Book bonusnat",
   "Booking number": "Bookingnummer",
+  "booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}",
+  "booking.children": "{totalChildren, plural, one {# barn} other {# børn}}",
+  "booking.guests": "Maks {nrOfGuests, plural, one {# gæst} other {# gæster}}",
+  "booking.nights": "{totalNights, plural, one {# nat} other {# nætter}}",
+  "booking.rooms": "{totalRooms, plural, one {# værelse} other {# værelser}}",
+  "booking.terms": "Ved at betale med en af de tilgængelige betalingsmetoder, accepterer jeg vilkårene for denne booking og de generelle <termsLink>Vilkår og betingelser</termsLink>, og forstår, at Scandic vil behandle min personlige data i forbindelse med denne booking i henhold til <privacyLink>Scandics Privatlivspolitik</privacyLink>. Jeg accepterer, at Scandic kræver et gyldigt kreditkort under min besøg i tilfælde af, at noget er tilbagebetalt.",
   "Breakfast": "Morgenmad",
   "Breakfast buffet": "Morgenbuffet",
   "Breakfast excluded": "Morgenmad ikke inkluderet",
@@ -43,7 +50,9 @@
   "Breakfast selection in next step.": "Valg af morgenmad i næste trin.",
   "Bus terminal": "Busstation",
   "Business": "Forretning",
+  "by": "inden",
   "Cancel": "Afbestille",
+  "characters": "tegn",
   "Check in": "Check ind",
   "Check out": "Check ud",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Tjek de kreditkort, der er gemt på din profil. Betal med et gemt kort, når du er logget ind for en mere jævn weboplevelse.",
@@ -101,9 +110,9 @@
   "Explore all levels and benefits": "Udforsk alle niveauer og fordele",
   "Explore nearby": "Udforsk i nærheden",
   "Extras to your booking": "Tillæg til din booking",
-  "FAQ": "Ofte stillede spørgsmål",
   "Failed to delete credit card, please try again later.": "Kunne ikke slette kreditkort. Prøv venligst igen senere.",
   "Fair": "Messe",
+  "FAQ": "Ofte stillede spørgsmål",
   "Find booking": "Find booking",
   "Find hotels": "Find hotel",
   "First name": "Fornavn",
@@ -117,7 +126,9 @@
   "Get member benefits & offers": "Få medlemsfordele og tilbud",
   "Go back to edit": "Gå tilbage til redigering",
   "Go back to overview": "Gå tilbage til oversigten",
+  "guest": "gæst",
   "Guest information": "Gæsteinformation",
+  "guests": "gæster",
   "Guests & Rooms": "Gæster & værelser",
   "Hi": "Hei",
   "Highest level": "Højeste niveau",
@@ -125,6 +136,9 @@
   "Hotel": "Hotel",
   "Hotel facilities": "Hotel faciliteter",
   "Hotel surroundings": "Hotel omgivelser",
+  "hotelPages.rooms.roomCard.person": "person",
+  "hotelPages.rooms.roomCard.persons": "personer",
+  "hotelPages.rooms.roomCard.seeRoomDetails": "Se værelsesdetaljer",
   "Hotels": "Hoteller",
   "How do you want to sleep?": "Hvordan vil du sove?",
   "How it works": "Hvordan det virker",
@@ -135,9 +149,10 @@
   "In extra bed": "i ekstra seng",
   "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",
+  "Join Scandic Friends": "Tilmeld dig Scandic Friends",
   "King bed": "Kingsize-seng",
+  "km to city center": "km til byens centrum",
   "Language": "Sprog",
   "Last name": "Efternavn",
   "Latest searches": "Seneste søgninger",
@@ -157,6 +172,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",
@@ -166,9 +182,9 @@
   "Member price": "Medlemspris",
   "Member price from": "Medlemspris fra",
   "Members": "Medlemmer",
+  "Membership cards": "Medlemskort",
   "Membership ID": "Medlems-id",
   "Membership ID copied to clipboard": "Medlems-ID kopieret til udklipsholder",
-  "Membership cards": "Medlemskort",
   "Menu": "Menu",
   "Modify": "Ændre",
   "Month": "Måned",
@@ -178,11 +194,16 @@
   "My pages": "Mine sider",
   "My pages menu": "Mine sider menu",
   "My payment cards": "Mine betalingskort",
+  "MY SAVED CARDS": "MINE SAVEDE KORT",
   "My wishes": "Mine ønsker",
+  "n/a": "n/a",
   "Nearby": "I nærheden",
   "Nearby companies": "Nærliggende virksomheder",
   "New password": "Nyt kodeord",
   "Next": "Næste",
+  "next level:": "Næste niveau:",
+  "night": "nat",
+  "nights": "nætter",
   "Nights needed to level up": "Nætter nødvendige for at komme i niveau",
   "No breakfast": "Ingen morgenmad",
   "No content published": "Intet indhold offentliggjort",
@@ -195,11 +216,14 @@
   "Nordic Swan Ecolabel": "Svanemærket",
   "Not found": "Ikke fundet",
   "Nr night, nr adult": "{nights, number} nat, {adults, number} voksen",
+  "number": "nummer",
   "On your journey": "På din rejse",
   "Open": "Åben",
   "Open language menu": "Åbn sprogmenuen",
   "Open menu": "Åbn menuen",
   "Open my pages menu": "Åbn mine sider menuen",
+  "or": "eller",
+  "OTHER PAYMENT METHODS": "ANDRE BETALINGSMETODER",
   "Overview": "Oversigt",
   "Parking": "Parkering",
   "Parking / Garage": "Parkering / Garage",
@@ -211,6 +235,7 @@
   "Phone is required": "Telefonnummer er påkrævet",
   "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",
@@ -233,9 +258,9 @@
   "Restaurant & Bar": "Restaurant & Bar",
   "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Gentag den nye adgangskode",
+  "Room": "Værelse",
   "Room & Terms": "Værelse & Vilkår",
   "Room facilities": "Værelsesfaciliteter",
-  "Room": "Værelse",
   "Rooms": "Værelser",
   "Rooms & Guests": "Værelser & gæster",
   "Sauna and gym": "Sauna and gym",
@@ -272,27 +297,31 @@
   "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.",
   "Something went wrong!": "Noget gik galt!",
+  "special character": "speciel karakter",
+  "spendable points expiring by": "{points} Brugbare point udløber den {date}",
   "Sports": "Sport",
   "Standard price": "Standardpris",
   "Street": "Gade",
   "Successfully updated profile!": "Profilen er opdateret med succes!",
   "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",
   "Things nearby HOTEL_NAME": "Ting i nærheden af {hotelName}",
-  "Total Points": "Samlet antal point",
+  "to": "til",
   "Total incl VAT": "Inkl. moms",
+  "Total Points": "Samlet antal point",
   "Tourist": "Turist",
   "Transaction date": "Overførselsdato",
   "Transactions": "Transaktioner",
   "Transportations": "Transport",
   "Tripadvisor reviews": "{rating} ({count} anmeldelser på Tripadvisor)",
+  "TUI Points": "TUI Points",
   "Type of bed": "Sengtype",
   "Type of room": "Værelsestype",
+  "uppercase letter": "stort bogstav",
   "Use bonus cheque": "Brug Bonus Cheque",
   "Use code/voucher": "Brug kode/voucher",
   "User information": "Brugeroplysninger",
@@ -314,16 +343,16 @@
   "Where to": "Hvor",
   "Which room class suits you the best?": "Hvilken rumklasse passer bedst til dig",
   "Year": "År",
-  "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, 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.",
   "You have no previous stays.": "Du har ingen tidligere ophold.",
   "You have no upcoming stays.": "Du har ingen kommende ophold.",
-  "Your Challenges Conquer & Earn!": "Dine udfordringer Overvind og tjen!",
   "Your card was successfully removed!": "Dit kort blev fjernet!",
   "Your card was successfully saved!": "Dit kort blev gemt!",
+  "Your Challenges Conquer & Earn!": "Dine udfordringer Overvind og tjen!",
   "Your current level": "Dit nuværende niveau",
   "Your details": "Dine oplysninger",
   "Your level": "Dit niveau",
@@ -333,33 +362,6 @@
   "Zoo": "Zoo",
   "Zoom in": "Zoom ind",
   "Zoom out": "Zoom ud",
-  "as of today": "pr. dags dato",
-  "booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}",
-  "booking.children": "{totalChildren, plural, one {# barn} other {# børn}}",
-  "booking.guests": "Maks {nrOfGuests, plural, one {# gæst} other {# gæster}}",
-  "booking.nights": "{totalNights, plural, one {# nat} other {# nætter}}",
-  "booking.rooms": "{totalRooms, plural, one {# værelse} other {# værelser}}",
-  "booking.terms": "Ved at betale med en af de tilgængelige betalingsmetoder, accepterer jeg vilkårene for denne booking og de generelle <termsLink>Vilkår og betingelser</termsLink>, og forstår, at Scandic vil behandle min personlige data i forbindelse med denne booking i henhold til <privacyLink>Scandics Privatlivspolitik</privacyLink>. Jeg accepterer, at Scandic kræver et gyldigt kreditkort under min besøg i tilfælde af, at noget er tilbagebetalt.",
-  "by": "inden",
-  "characters": "tegn",
-  "guest": "gæst",
-  "guests": "gæster",
-  "hotelPages.rooms.roomCard.person": "person",
-  "hotelPages.rooms.roomCard.persons": "personer",
-  "hotelPages.rooms.roomCard.seeRoomDetails": "Se værelsesdetaljer",
-  "km to city center": "km til byens centrum",
-  "lowercase letter": "lille bogstav",
-  "n/a": "n/a",
-  "next level:": "Næste niveau:",
-  "night": "nat",
-  "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",
-  "uppercase letter": "stort bogstav",
   "{amount} {currency}": "{amount} {currency}",
   "{difference}{amount} {currency}": "{difference}{amount} {currency}",
   "{width} cm × {length} cm": "{width} cm × {length} cm"
diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json
index 785c93f89..8c3c9e4ce 100644
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -9,8 +9,8 @@
   "Add code": "Code hinzufügen",
   "Add new card": "Neue Karte hinzufügen",
   "Address": "Adresse",
-  "Airport": "Flughafen",
   "Adults": "Erwachsene",
+  "Airport": "Flughafen",
   "All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.": "Alle unsere Frühstücksbuffets bieten glutenfreie, vegane und allergikerfreundliche Speisen.",
   "Already a friend?": "Sind wir schon Freunde?",
   "Amenities": "Annehmlichkeiten",
@@ -23,6 +23,7 @@
   "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 of today": "Stand heute",
   "As our": "Als unser {level}",
   "As our Close Friend": "Als unser enger Freund",
   "At latest": "Spätestens",
@@ -35,6 +36,12 @@
   "Book": "Buchen",
   "Book reward night": "Bonusnacht buchen",
   "Booking number": "Buchungsnummer",
+  "booking.adults": "{totalAdults, plural, one {# erwachsene} other {# erwachsene}}",
+  "booking.children": "{totalChildren, plural, one {# kind} other {# kinder}}",
+  "booking.guests": "Max {nrOfGuests, plural, one {# gast} other {# gäste}}",
+  "booking.nights": "{totalNights, plural, one {# nacht} other {# Nächte}}",
+  "booking.rooms": "{totalRooms, plural, one {# zimmer} other {# räume}}",
+  "booking.terms": "Ved at betale med en af de tilgængelige betalingsmetoder, accepterer jeg vilkårene for denne booking og de generelle <termsLink>Vilkår og betingelser</termsLink>, og forstår, at Scandic vil behandle min personlige data i forbindelse med denne booking i henhold til <privacyLink>Scandics Privatlivspolitik</privacyLink>. Jeg accepterer, at Scandic kræver et gyldigt kreditkort under min besøg i tilfælde af, at noget er tilbagebetalt.",
   "Breakfast": "Frühstück",
   "Breakfast buffet": "Frühstücksbuffet",
   "Breakfast excluded": "Frühstück nicht inbegriffen",
@@ -43,7 +50,9 @@
   "Breakfast selection in next step.": "Frühstücksauswahl in nächsten Schritt.",
   "Bus terminal": "Busbahnhof",
   "Business": "Geschäft",
+  "by": "bis",
   "Cancel": "Stornieren",
+  "characters": "figuren",
   "Check in": "Einchecken",
   "Check out": "Auschecken",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Sehen Sie sich die in Ihrem Profil gespeicherten Kreditkarten an. Bezahlen Sie mit einer gespeicherten Karte, wenn Sie angemeldet sind, für ein reibungsloseres Web-Erlebnis.",
@@ -101,9 +110,9 @@
   "Explore all levels and benefits": "Entdecken Sie alle Levels und Vorteile",
   "Explore nearby": "Erkunden Sie die Umgebung",
   "Extras to your booking": "Extras zu Ihrer Buchung",
-  "FAQ": "Häufig gestellte Fragen",
   "Failed to delete credit card, please try again later.": "Kreditkarte konnte nicht gelöscht werden. Bitte versuchen Sie es später noch einmal.",
   "Fair": "Messe",
+  "FAQ": "Häufig gestellte Fragen",
   "Find booking": "Buchung finden",
   "Find hotels": "Hotels finden",
   "First name": "Vorname",
@@ -117,7 +126,9 @@
   "Get member benefits & offers": "Holen Sie sich Vorteile und Angebote für Mitglieder",
   "Go back to edit": "Zurück zum Bearbeiten",
   "Go back to overview": "Zurück zur Übersicht",
+  "guest": "gast",
   "Guest information": "Informationen für Gäste",
+  "guests": "gäste",
   "Guests & Rooms": "Gäste & Zimmer",
   "Hi": "Hallo",
   "Highest level": "Höchstes Level",
@@ -125,6 +136,9 @@
   "Hotel": "Hotel",
   "Hotel facilities": "Hotel-Infos",
   "Hotel surroundings": "Umgebung des Hotels",
+  "hotelPages.rooms.roomCard.person": "person",
+  "hotelPages.rooms.roomCard.persons": "personen",
+  "hotelPages.rooms.roomCard.seeRoomDetails": "Zimmerdetails ansehen",
   "Hotels": "Hotels",
   "How do you want to sleep?": "Wie möchtest du schlafen?",
   "How it works": "Wie es funktioniert",
@@ -135,9 +149,10 @@
   "In extra bed": "im zusätzlichen Bett",
   "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",
+  "Join Scandic Friends": "Treten Sie Scandic Friends bei",
   "King bed": "Kingsize-Bett",
+  "km to city center": "km bis zum Stadtzentrum",
   "Language": "Sprache",
   "Last name": "Nachname",
   "Latest searches": "Letzte Suchanfragen",
@@ -157,6 +172,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",
@@ -166,9 +182,9 @@
   "Member price": "Mitgliederpreis",
   "Member price from": "Mitgliederpreis ab",
   "Members": "Mitglieder",
+  "Membership cards": "Mitgliedskarten",
   "Membership ID": "Mitglieds-ID",
   "Membership ID copied to clipboard": "Mitglieds-ID in die Zwischenablage kopiert",
-  "Membership cards": "Mitgliedskarten",
   "Menu": "Menu",
   "Modify": "Ändern",
   "Month": "Monat",
@@ -178,11 +194,16 @@
   "My pages": "Meine Seiten",
   "My pages menu": "Meine Seite Menü",
   "My payment cards": "Meine Zahlungskarten",
+  "MY SAVED CARDS": "MEINE SAVEDEN KARTEN",
   "My wishes": "Meine Wünsche",
+  "n/a": "n/a",
   "Nearby": "In der Nähe",
   "Nearby companies": "Nahe gelegene Unternehmen",
   "New password": "Neues Kennwort",
   "Next": "Nächste",
+  "next level:": "Nächstes Level:",
+  "night": "nacht",
+  "nights": "Nächte",
   "Nights needed to level up": "Nächte, die zum Levelaufstieg benötigt werden",
   "No breakfast": "Kein Frühstück",
   "No content published": "Kein Inhalt veröffentlicht",
@@ -195,11 +216,14 @@
   "Nordic Swan Ecolabel": "Nordic Swan Ecolabel",
   "Not found": "Nicht gefunden",
   "Nr night, nr adult": "{nights, number} Nacht, {adults, number} Erwachsener",
+  "number": "nummer",
   "On your journey": "Auf deiner Reise",
   "Open": "Offen",
   "Open language menu": "Sprachmenü öffnen",
   "Open menu": "Menü öffnen",
   "Open my pages menu": "Meine Seiten Menü öffnen",
+  "or": "oder",
+  "OTHER PAYMENT METHODS": "ANDERE BEZAHLMETHODE",
   "Overview": "Übersicht",
   "Parking": "Parken",
   "Parking / Garage": "Parken / Garage",
@@ -211,6 +235,7 @@
   "Phone is required": "Telefon ist erforderlich",
   "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",
@@ -233,10 +258,10 @@
   "Restaurant & Bar": "Restaurant & Bar",
   "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Neues Passwort erneut eingeben",
+  "Room": "Zimmer",
   "Room & Terms": "Zimmer & Bedingungen",
   "Room facilities": "Zimmerausstattung",
   "Rooms": "Räume",
-  "Room": "Zimmer",
   "Rooms & Guests": "Zimmer & Gäste",
   "Sauna and gym": "Sauna and gym",
   "Save": "Speichern",
@@ -272,27 +297,31 @@
   "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.",
   "Something went wrong!": "Etwas ist schief gelaufen!",
+  "special character": "sonderzeichen",
+  "spendable points expiring by": "{points} Einlösbare punkte verfallen bis zum {date}",
   "Sports": "Sport",
   "Standard price": "Standardpreis",
   "Street": "Straße",
   "Successfully updated profile!": "Profil erfolgreich aktualisiert!",
   "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",
   "Things nearby HOTEL_NAME": "Dinge in der Nähe von {hotelName}",
-  "Total Points": "Gesamtpunktzahl",
+  "to": "zu",
   "Total incl VAT": "Gesamt inkl. MwSt.",
+  "Total Points": "Gesamtpunktzahl",
   "Tourist": "Tourist",
   "Transaction date": "Transaktionsdatum",
   "Transactions": "Transaktionen",
   "Transportations": "Transportmittel",
   "Tripadvisor reviews": "{rating} ({count} Bewertungen auf Tripadvisor)",
+  "TUI Points": "TUI Points",
   "Type of bed": "Bettentyp",
   "Type of room": "Zimmerart",
+  "uppercase letter": "großbuchstabe",
   "Use bonus cheque": "Bonusscheck nutzen",
   "Use code/voucher": "Code/Gutschein nutzen",
   "User information": "Nutzerinformation",
@@ -314,16 +343,16 @@
   "Where to": "Wohin",
   "Which room class suits you the best?": "Welche Zimmerklasse passt am besten zu Ihnen?",
   "Year": "Jahr",
-  "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, 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.",
   "You have no previous stays.": "Sie haben keine vorherigen Aufenthalte.",
   "You have no upcoming stays.": "Sie haben keine bevorstehenden Aufenthalte.",
-  "Your Challenges Conquer & Earn!": "Meistern Sie Ihre Herausforderungen und verdienen Sie Geld!",
   "Your card was successfully removed!": "Ihre Karte wurde erfolgreich entfernt!",
   "Your card was successfully saved!": "Ihre Karte wurde erfolgreich gespeichert!",
+  "Your Challenges Conquer & Earn!": "Meistern Sie Ihre Herausforderungen und verdienen Sie Geld!",
   "Your current level": "Ihr aktuelles Level",
   "Your details": "Ihre Angaben",
   "Your level": "Dein level",
@@ -333,33 +362,6 @@
   "Zoo": "Zoo",
   "Zoom in": "Vergrößern",
   "Zoom out": "Verkleinern",
-  "as of today": "Stand heute",
-  "booking.adults": "{totalAdults, plural, one {# erwachsene} other {# erwachsene}}",
-  "booking.children": "{totalChildren, plural, one {# kind} other {# kinder}}",
-  "booking.guests": "Max {nrOfGuests, plural, one {# gast} other {# gäste}}",
-  "booking.nights": "{totalNights, plural, one {# nacht} other {# Nächte}}",
-  "booking.rooms": "{totalRooms, plural, one {# zimmer} other {# räume}}",
-  "booking.terms": "Ved at betale med en af de tilgængelige betalingsmetoder, accepterer jeg vilkårene for denne booking og de generelle <termsLink>Vilkår og betingelser</termsLink>, og forstår, at Scandic vil behandle min personlige data i forbindelse med denne booking i henhold til <privacyLink>Scandics Privatlivspolitik</privacyLink>. Jeg accepterer, at Scandic kræver et gyldigt kreditkort under min besøg i tilfælde af, at noget er tilbagebetalt.",
-  "by": "bis",
-  "characters": "figuren",
-  "guest": "gast",
-  "guests": "gäste",
-  "hotelPages.rooms.roomCard.person": "person",
-  "hotelPages.rooms.roomCard.persons": "personen",
-  "hotelPages.rooms.roomCard.seeRoomDetails": "Zimmerdetails ansehen",
-  "km to city center": "km bis zum Stadtzentrum",
-  "lowercase letter": "Kleinbuchstabe",
-  "n/a": "n/a",
-  "next level:": "Nächstes Level:",
-  "night": "nacht",
-  "nights": "Nächte",
-  "number": "nummer",
-  "or": "oder",
-  "points": "Punkte",
-  "special character": "sonderzeichen",
-  "spendable points expiring by": "{points} Einlösbare punkte verfallen bis zum {date}",
-  "to": "zu",
-  "uppercase letter": "großbuchstabe",
   "{amount} {currency}": "{amount} {currency}",
   "{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 5678b06c4..759c424d0 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -25,6 +25,7 @@
   "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 of today": "as of today",
   "As our": "As our {level}",
   "As our Close Friend": "As our Close Friend",
   "At latest": "At latest",
@@ -38,6 +39,12 @@
   "Book": "Book",
   "Book reward night": "Book reward night",
   "Booking number": "Booking number",
+  "booking.adults": "{totalAdults, plural, one {# adult} other {# adults}}",
+  "booking.children": "{totalChildren, plural, one {# child} other {# children}}",
+  "booking.guests": "Max {nrOfGuests, plural, one {# guest} other {# guests}}",
+  "booking.nights": "{totalNights, plural, one {# night} other {# nights}}",
+  "booking.rooms": "{totalRooms, plural, one {# room} other {# rooms}}",
+  "booking.terms": "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsLink>Terms & Conditions</termsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyLink>Scandic's Privacy policy</privacyLink>. I also accept that Scandic require a valid credit card during my visit in case anything is left unpaid.",
   "Breakfast": "Breakfast",
   "Breakfast buffet": "Breakfast buffet",
   "Breakfast excluded": "Breakfast excluded",
@@ -46,7 +53,9 @@
   "Breakfast selection in next step.": "Breakfast selection in next step.",
   "Bus terminal": "Bus terminal",
   "Business": "Business",
+  "by": "by",
   "Cancel": "Cancel",
+  "characters": "characters",
   "Check in": "Check in",
   "Check out": "Check out",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.",
@@ -105,9 +114,9 @@
   "Explore all levels and benefits": "Explore all levels and benefits",
   "Explore nearby": "Explore nearby",
   "Extras to your booking": "Extras to your booking",
-  "FAQ": "FAQ",
   "Failed to delete credit card, please try again later.": "Failed to delete credit card, please try again later.",
   "Fair": "Fair",
+  "FAQ": "FAQ",
   "Find booking": "Find booking",
   "Find hotels": "Find hotels",
   "First name": "First name",
@@ -121,7 +130,9 @@
   "Get member benefits & offers": "Get member benefits & offers",
   "Go back to edit": "Go back to edit",
   "Go back to overview": "Go back to overview",
+  "guest": "guest",
   "Guest information": "Guest information",
+  "guests": "guests",
   "Guests & Rooms": "Guests & Rooms",
   "Hi": "Hi",
   "Highest level": "Highest level",
@@ -129,6 +140,9 @@
   "Hotel": "Hotel",
   "Hotel facilities": "Hotel facilities",
   "Hotel surroundings": "Hotel surroundings",
+  "hotelPages.rooms.roomCard.person": "person",
+  "hotelPages.rooms.roomCard.persons": "persons",
+  "hotelPages.rooms.roomCard.seeRoomDetails": "See room details",
   "Hotels": "Hotels",
   "How do you want to sleep?": "How do you want to sleep?",
   "How it works": "How it works",
@@ -139,9 +153,10 @@
   "In extra bed": "In extra bed",
   "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",
+  "Join Scandic Friends": "Join Scandic Friends",
   "King bed": "King bed",
+  "km to city center": "km to city center",
   "Language": "Language",
   "Last name": "Last name",
   "Latest searches": "Latest searches",
@@ -161,6 +176,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",
@@ -170,9 +186,9 @@
   "Member price": "Member price",
   "Member price from": "Member price from",
   "Members": "Members",
+  "Membership cards": "Membership cards",
   "Membership ID": "Membership ID",
   "Membership ID copied to clipboard": "Membership ID copied to clipboard",
-  "Membership cards": "Membership cards",
   "Menu": "Menu",
   "Modify": "Modify",
   "Month": "Month",
@@ -182,11 +198,16 @@
   "My pages": "My pages",
   "My pages menu": "My pages menu",
   "My payment cards": "My payment cards",
+  "MY SAVED CARDS": "MY SAVED CARDS",
   "My wishes": "My wishes",
+  "n/a": "n/a",
   "Nearby": "Nearby",
   "Nearby companies": "Nearby companies",
   "New password": "New password",
   "Next": "Next",
+  "next level:": "next level:",
+  "night": "night",
+  "nights": "nights",
   "Nights needed to level up": "Nights needed to level up",
   "No breakfast": "No breakfast",
   "No content published": "No content published",
@@ -199,11 +220,14 @@
   "Nordic Swan Ecolabel": "Nordic Swan Ecolabel",
   "Not found": "Not found",
   "Nr night, nr adult": "{nights, number} night, {adults, number} adult",
+  "number": "number",
   "On your journey": "On your journey",
   "Open": "Open",
   "Open language menu": "Open language menu",
   "Open menu": "Open menu",
   "Open my pages menu": "Open my pages menu",
+  "or": "or",
+  "OTHER PAYMENT METHODS": "OTHER PAYMENT METHODS",
   "Overview": "Overview",
   "Parking": "Parking",
   "Parking / Garage": "Parking / Garage",
@@ -215,6 +239,7 @@
   "Phone is required": "Phone is required",
   "Phone number": "Phone number",
   "Please enter a valid phone number": "Please enter a valid phone number",
+  "points": "Points",
   "Points": "Points",
   "Points being calculated": "Points being calculated",
   "Points earned prior to May 1, 2021": "Points earned prior to May 1, 2021",
@@ -276,27 +301,31 @@
   "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.",
   "Something went wrong!": "Something went wrong!",
+  "special character": "special character",
+  "spendable points expiring by": "{points} spendable points expiring by {date}",
   "Sports": "Sports",
   "Standard price": "Standard price",
   "Street": "Street",
   "Successfully updated profile!": "Successfully updated profile!",
   "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",
   "Things nearby HOTEL_NAME": "Things nearby {hotelName}",
-  "Total Points": "Total Points",
+  "to": "to",
   "Total incl VAT": "Total incl VAT",
+  "Total Points": "Total Points",
   "Tourist": "Tourist",
   "Transaction date": "Transaction date",
   "Transactions": "Transactions",
   "Transportations": "Transportations",
   "Tripadvisor reviews": "{rating} ({count} reviews on Tripadvisor)",
+  "TUI Points": "TUI Points",
   "Type of bed": "Type of bed",
   "Type of room": "Type of room",
+  "uppercase letter": "uppercase letter",
   "Use bonus cheque": "Use bonus cheque",
   "Use code/voucher": "Use code/voucher",
   "User information": "User information",
@@ -318,16 +347,16 @@
   "Where to": "Where to",
   "Which room class suits you the best?": "Which room class suits you the best?",
   "Year": "Year",
-  "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, 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.",
   "You have no previous stays.": "You have no previous stays.",
   "You have no upcoming stays.": "You have no upcoming stays.",
-  "Your Challenges Conquer & Earn!": "Your Challenges Conquer & Earn!",
   "Your card was successfully removed!": "Your card was successfully removed!",
   "Your card was successfully saved!": "Your card was successfully saved!",
+  "Your Challenges Conquer & Earn!": "Your Challenges Conquer & Earn!",
   "Your current level": "Your current level",
   "Your details": "Your details",
   "Your level": "Your level",
@@ -337,33 +366,6 @@
   "Zoo": "Zoo",
   "Zoom in": "Zoom in",
   "Zoom out": "Zoom out",
-  "as of today": "as of today",
-  "booking.adults": "{totalAdults, plural, one {# adult} other {# adults}}",
-  "booking.children": "{totalChildren, plural, one {# child} other {# children}}",
-  "booking.guests": "Max {nrOfGuests, plural, one {# guest} other {# guests}}",
-  "booking.nights": "{totalNights, plural, one {# night} other {# nights}}",
-  "booking.rooms": "{totalRooms, plural, one {# room} other {# rooms}}",
-  "booking.terms": "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsLink>Terms & Conditions</termsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyLink>Scandic's Privacy policy</privacyLink>. I also accept that Scandic require a valid credit card during my visit in case anything is left unpaid.",
-  "by": "by",
-  "characters": "characters",
-  "guest": "guest",
-  "guests": "guests",
-  "hotelPages.rooms.roomCard.person": "person",
-  "hotelPages.rooms.roomCard.persons": "persons",
-  "hotelPages.rooms.roomCard.seeRoomDetails": "See room details",
-  "km to city center": "km to city center",
-  "lowercase letter": "lowercase letter",
-  "n/a": "n/a",
-  "next level:": "next level:",
-  "night": "night",
-  "nights": "nights",
-  "number": "number",
-  "or": "or",
-  "points": "Points",
-  "special character": "special character",
-  "spendable points expiring by": "{points} spendable points expiring by {date}",
-  "to": "to",
-  "uppercase letter": "uppercase letter",
   "{amount} {currency}": "{amount} {currency}",
   "{difference}{amount} {currency}": "{difference}{amount} {currency}",
   "{width} cm × {length} cm": "{width} cm × {length} cm"
diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json
index 1c2b11a26..ddb3b80fa 100644
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -9,8 +9,8 @@
   "Add code": "Lisää koodi",
   "Add new card": "Lisää uusi kortti",
   "Address": "Osoite",
-  "Airport": "Lentokenttä",
   "Adults": "Aikuista",
+  "Airport": "Lentokenttä",
   "All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.": "Kaikki aamiaisbuffettimme tarjoavat gluteenittomia, vegaanisia ja allergiaystävällisiä vaihtoehtoja.",
   "Already a friend?": "Oletko jo ystävä?",
   "Amenities": "Mukavuudet",
@@ -23,6 +23,7 @@
   "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 of today": "tänään",
   "As our": "{level}-etu",
   "As our Close Friend": "Läheisenä ystävänämme",
   "At latest": "Viimeistään",
@@ -35,6 +36,12 @@
   "Book": "Varaa",
   "Book reward night": "Kirjapalkinto-ilta",
   "Booking number": "Varausnumero",
+  "booking.adults": "{totalAdults, plural, one {# aikuinen} other {# aikuiset}}",
+  "booking.children": "{totalChildren, plural, one {# lapsi} other {# lasta}}",
+  "booking.guests": "Max {nrOfGuests, plural, one {# vieras} other {# vieraita}}",
+  "booking.nights": "{totalNights, plural, one {# yö} other {# yötä}}",
+  "booking.rooms": "{totalRooms, plural, one {# huone} other {# sviitti}}",
+  "booking.terms": "Maksamalla minkä tahansa saatavilla olevan maksutavan avulla hyväksyn tämän varauksen ehdot ja yleiset <termsLink>ehdot ja ehtoja</termsLink>, ja ymmärrän, että Scandic käsittelee minun henkilötietoni tässä varauksessa mukaisesti <privacyLink>Scandicin tietosuojavaltuuden</privacyLink> mukaisesti. Hyväksyn myös, että Scandic vaatii validin luottokortin majoituksen ajan, jos jokin jää maksamatta.",
   "Breakfast": "Aamiainen",
   "Breakfast buffet": "Aamiaisbuffet",
   "Breakfast excluded": "Aamiainen ei sisälly",
@@ -43,7 +50,9 @@
   "Breakfast selection in next step.": "Aamiaisvalinta seuraavassa vaiheessa.",
   "Bus terminal": "Bussiasema",
   "Business": "Business",
+  "by": "mennessä",
   "Cancel": "Peruuttaa",
+  "characters": "hahmoja",
   "Check in": "Sisäänkirjautuminen",
   "Check out": "Uloskirjautuminen",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Tarkista profiiliisi tallennetut luottokortit. Maksa tallennetulla kortilla kirjautuneena, jotta verkkokokemus on sujuvampi.",
@@ -101,9 +110,9 @@
   "Explore all levels and benefits": "Tutustu kaikkiin tasoihin ja etuihin",
   "Explore nearby": "Tutustu lähialueeseen",
   "Extras to your booking": "Varauksessa lisäpalveluita",
-  "FAQ": "UKK",
   "Failed to delete credit card, please try again later.": "Luottokortin poistaminen epäonnistui, yritä myöhemmin uudelleen.",
   "Fair": "Messukeskus",
+  "FAQ": "UKK",
   "Find booking": "Etsi varaus",
   "Find hotels": "Etsi hotelleja",
   "First name": "Etunimi",
@@ -117,7 +126,9 @@
   "Get member benefits & offers": "Hanki jäsenetuja ja -tarjouksia",
   "Go back to edit": "Palaa muokkaamaan",
   "Go back to overview": "Palaa yleiskatsaukseen",
+  "guest": "Vieras",
   "Guest information": "Vieraan tiedot",
+  "guests": "Vieraita",
   "Guests & Rooms": "Vieraat & Huoneet",
   "Hi": "Hi",
   "Highest level": "Korkein taso",
@@ -125,6 +136,9 @@
   "Hotel": "Hotelli",
   "Hotel facilities": "Hotellin palvelut",
   "Hotel surroundings": "Hotellin ympäristö",
+  "hotelPages.rooms.roomCard.person": "henkilö",
+  "hotelPages.rooms.roomCard.persons": "Henkilöä",
+  "hotelPages.rooms.roomCard.seeRoomDetails": "Katso huoneen tiedot",
   "Hotels": "Hotellit",
   "How do you want to sleep?": "Kuinka haluat nukkua?",
   "How it works": "Kuinka se toimii",
@@ -135,9 +149,10 @@
   "In extra bed": "Oma vuodepaikka",
   "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",
+  "Join Scandic Friends": "Liity jäseneksi",
   "King bed": "King-vuode",
+  "km to city center": "km keskustaan",
   "Language": "Kieli",
   "Last name": "Sukunimi",
   "Latest searches": "Viimeisimmät haut",
@@ -157,6 +172,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",
@@ -166,9 +182,9 @@
   "Member price": "Jäsenhinta",
   "Member price from": "Jäsenhinta alkaen",
   "Members": "Jäsenet",
+  "Membership cards": "Jäsenkortit",
   "Membership ID": "Jäsentunnus",
   "Membership ID copied to clipboard": "Jäsenyystunnus kopioitu leikepöydälle",
-  "Membership cards": "Jäsenkortit",
   "Menu": "Valikko",
   "Modify": "Muokkaa",
   "Month": "Kuukausi",
@@ -178,11 +194,16 @@
   "My pages": "Omat sivut",
   "My pages menu": "Omat sivut -valikko",
   "My payment cards": "Minun maksukortit",
+  "MY SAVED CARDS": "MINUN SAVED CARDS",
   "My wishes": "Toiveeni",
+  "n/a": "n/a",
   "Nearby": "Lähistöllä",
   "Nearby companies": "Läheiset yritykset",
   "New password": "Uusi salasana",
   "Next": "Seuraava",
+  "next level:": "pistettä tasolle:",
+  "night": "yö",
+  "nights": "yötä",
   "Nights needed to level up": "Yöt, joita tarvitaan tasolle",
   "No breakfast": "Ei aamiaista",
   "No content published": "Ei julkaistua sisältöä",
@@ -195,11 +216,14 @@
   "Nordic Swan Ecolabel": "Ympäristömerkki Miljömärkt",
   "Not found": "Ei löydetty",
   "Nr night, nr adult": "{nights, number} yö, {adults, number} aikuinen",
+  "number": "määrä",
   "On your journey": "Matkallasi",
   "Open": "Avata",
   "Open language menu": "Avaa kielivalikko",
   "Open menu": "Avaa valikko",
   "Open my pages menu": "Avaa omat sivut -valikko",
+  "or": "tai",
+  "OTHER PAYMENT METHODS": "MUISE KORT",
   "Overview": "Yleiskatsaus",
   "Parking": "Pysäköinti",
   "Parking / Garage": "Pysäköinti / Autotalli",
@@ -211,6 +235,7 @@
   "Phone is required": "Puhelin vaaditaan",
   "Phone number": "Puhelinnumero",
   "Please enter a valid phone number": "Ole hyvä ja näppäile voimassaoleva puhelinnumero",
+  "points": "pistettä",
   "Points": "Pisteet",
   "Points being calculated": "Pisteitä lasketaan",
   "Points earned prior to May 1, 2021": "Pisteet, jotka ansaittu ennen 1.5.2021",
@@ -233,9 +258,9 @@
   "Restaurant & Bar": "Ravintola & Baari",
   "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Kirjoita uusi salasana uudelleen",
+  "Room": "Huone",
   "Room & Terms": "Huone & Ehdot",
   "Room facilities": "Huoneen varustelu",
-  "Room": "Huone",
   "Rooms": "Huoneet",
   "Rooms & Guests": "Huoneet & Vieraat",
   "Rooms & Guestss": "Huoneet & Vieraat",
@@ -273,27 +298,31 @@
   "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.",
   "Something went wrong!": "Jotain meni pieleen!",
+  "special character": "erikoishahmo",
+  "spendable points expiring by": "{points} pistettä vanhenee {date} mennessä",
   "Sports": "Urheilu",
   "Standard price": "Normaali hinta",
   "Street": "Katu",
   "Successfully updated profile!": "Profiilin päivitys onnistui!",
   "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",
   "Things nearby HOTEL_NAME": "Lähellä olevia asioita {hotelName}",
-  "Total Points": "Kokonaispisteet",
+  "to": "to",
   "Total incl VAT": "Yhteensä sis. alv",
+  "Total Points": "Kokonaispisteet",
   "Tourist": "Turisti",
   "Transaction date": "Tapahtuman päivämäärä",
   "Transactions": "Tapahtumat",
   "Transportations": "Kuljetukset",
   "Tripadvisor reviews": "{rating} ({count} arvostelua TripAdvisorissa)",
+  "TUI Points": "TUI Points",
   "Type of bed": "Vuodetyyppi",
   "Type of room": "Huonetyyppi",
+  "uppercase letter": "iso kirjain",
   "Use bonus cheque": "Käytä bonussekkiä",
   "Use code/voucher": "Käytä koodia/voucheria",
   "User information": "Käyttäjän tiedot",
@@ -315,16 +344,16 @@
   "Where to": "Minne",
   "Which room class suits you the best?": "Mikä huoneluokka sopii sinulle parhaiten?",
   "Year": "Vuosi",
-  "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, 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.",
   "You have no previous stays.": "Sinulla ei ole aiempia majoituksia.",
   "You have no upcoming stays.": "Sinulla ei ole tulevia majoituksia.",
-  "Your Challenges Conquer & Earn!": "Voita ja ansaitse haasteesi!",
   "Your card was successfully removed!": "Korttisi poistettiin onnistuneesti!",
   "Your card was successfully saved!": "Korttisi tallennettu onnistuneesti!",
+  "Your Challenges Conquer & Earn!": "Voita ja ansaitse haasteesi!",
   "Your current level": "Nykyinen tasosi",
   "Your details": "Tietosi",
   "Your level": "Tasosi",
@@ -334,33 +363,6 @@
   "Zoo": "Eläintarha",
   "Zoom in": "Lähennä",
   "Zoom out": "Loitonna",
-  "as of today": "tänään",
-  "booking.adults": "{totalAdults, plural, one {# aikuinen} other {# aikuiset}}",
-  "booking.children": "{totalChildren, plural, one {# lapsi} other {# lasta}}",
-  "booking.guests": "Max {nrOfGuests, plural, one {# vieras} other {# vieraita}}",
-  "booking.nights": "{totalNights, plural, one {# yö} other {# yötä}}",
-  "booking.rooms": "{totalRooms, plural, one {# huone} other {# sviitti}}",
-  "booking.terms": "Maksamalla minkä tahansa saatavilla olevan maksutavan avulla hyväksyn tämän varauksen ehdot ja yleiset <termsLink>ehdot ja ehtoja</termsLink>, ja ymmärrän, että Scandic käsittelee minun henkilötietoni tässä varauksessa mukaisesti <privacyLink>Scandicin tietosuojavaltuuden</privacyLink> mukaisesti. Hyväksyn myös, että Scandic vaatii validin luottokortin majoituksen ajan, jos jokin jää maksamatta.",
-  "by": "mennessä",
-  "characters": "hahmoja",
-  "guest": "Vieras",
-  "guests": "Vieraita",
-  "hotelPages.rooms.roomCard.person": "henkilö",
-  "hotelPages.rooms.roomCard.persons": "Henkilöä",
-  "hotelPages.rooms.roomCard.seeRoomDetails": "Katso huoneen tiedot",
-  "km to city center": "km keskustaan",
-  "lowercase letter": "pien kirjain",
-  "n/a": "n/a",
-  "next level:": "pistettä tasolle:",
-  "night": "yö",
-  "nights": "yötä",
-  "number": "määrä",
-  "or": "tai",
-  "points": "pistettä",
-  "special character": "erikoishahmo",
-  "spendable points expiring by": "{points} pistettä vanhenee {date} mennessä",
-  "to": "to",
-  "uppercase letter": "iso kirjain",
   "{amount} {currency}": "{amount} {currency}",
   "{difference}{amount} {currency}": "{difference}{amount} {currency}",
   "{width} cm × {length} cm": "{width} cm × {length} cm"
diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json
index eafdab517..56fcc5dc8 100644
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -9,8 +9,8 @@
   "Add code": "Legg til kode",
   "Add new card": "Legg til nytt kort",
   "Address": "Adresse",
-  "Airport": "Flyplass",
   "Adults": "Voksne",
+  "Airport": "Flyplass",
   "All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.": "Alle våre frokostbufféer tilbyr glutenfrie, veganske og allergivennlige alternativer.",
   "Already a friend?": "Allerede Friend?",
   "Amenities": "Fasiliteter",
@@ -23,6 +23,7 @@
   "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 of today": "per i dag",
   "As our": "Som vår {level}",
   "As our Close Friend": "Som vår nære venn",
   "At latest": "Senest",
@@ -35,6 +36,11 @@
   "Book": "Bestill",
   "Book reward night": "Bestill belønningskveld",
   "Booking number": "Bestillingsnummer",
+  "booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}",
+  "booking.children": "{totalChildren, plural, one {# barn} other {# barn}}",
+  "booking.guests": "Maks {nrOfGuests, plural, one {# gjest} other {# gjester}}",
+  "booking.nights": "{totalNights, plural, one {# natt} other {# netter}}",
+  "booking.rooms": "{totalRooms, plural, one {# rom} other {# rom}}",
   "Breakfast": "Frokost",
   "Breakfast buffet": "Breakfast buffet",
   "Breakfast excluded": "Frokost ekskludert",
@@ -43,7 +49,9 @@
   "Breakfast selection in next step.": "Frokostvalg i neste steg.",
   "Bus terminal": "Bussterminal",
   "Business": "Forretnings",
+  "by": "innen",
   "Cancel": "Avbryt",
+  "characters": "tegn",
   "Check in": "Sjekk inn",
   "Check out": "Sjekk ut",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Sjekk ut kredittkortene som er lagret på profilen din. Betal med et lagret kort når du er pålogget for en jevnere nettopplevelse.",
@@ -100,9 +108,9 @@
   "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",
   "First name": "Fornavn",
@@ -116,7 +124,9 @@
   "Get member benefits & offers": "Få medlemsfordeler og tilbud",
   "Go back to edit": "Gå tilbake til redigering",
   "Go back to overview": "Gå tilbake til oversikten",
+  "guest": "gjest",
   "Guest information": "Informasjon til gjester",
+  "guests": "gjester",
   "Guests & Rooms": "Gjester & rom",
   "Hi": "Hei",
   "Highest level": "Høyeste nivå",
@@ -124,6 +134,9 @@
   "Hotel": "Hotel",
   "Hotel facilities": "Hotelfaciliteter",
   "Hotel surroundings": "Hotellomgivelser",
+  "hotelPages.rooms.roomCard.person": "person",
+  "hotelPages.rooms.roomCard.persons": "personer",
+  "hotelPages.rooms.roomCard.seeRoomDetails": "Se detaljer om rommet",
   "Hotels": "Hoteller",
   "How do you want to sleep?": "Hvordan vil du sove?",
   "How it works": "Hvordan det fungerer",
@@ -133,9 +146,10 @@
   "In extra bed": "i ekstraseng",
   "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",
+  "Join Scandic Friends": "Bli med i Scandic Friends",
   "King bed": "King-size-seng",
+  "km to city center": "km til sentrum",
   "Language": "Språk",
   "Last name": "Etternavn",
   "Latest searches": "Siste søk",
@@ -155,6 +169,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",
@@ -164,9 +179,9 @@
   "Member price": "Medlemspris",
   "Member price from": "Medlemspris fra",
   "Members": "Medlemmer",
+  "Membership cards": "Medlemskort",
   "Membership ID": "Medlems-ID",
   "Membership ID copied to clipboard": "Medlems-ID kopiert til utklippstavlen",
-  "Membership cards": "Medlemskort",
   "Menu": "Menu",
   "Modify": "Endre",
   "Month": "Måned",
@@ -176,11 +191,16 @@
   "My pages": "Mine sider",
   "My pages menu": "Mine sider-menyen",
   "My payment cards": "Mine betalingskort",
+  "MY SAVED CARDS": "MINE SAVEDE KORT",
   "My wishes": "Mine ønsker",
+  "n/a": "n/a",
   "Nearby": "I nærheten",
   "Nearby companies": "Nærliggende selskaper",
   "New password": "Nytt passord",
   "Next": "Neste",
+  "next level:": "Neste nivå:",
+  "night": "natt",
+  "nights": "netter",
   "Nights needed to level up": "Netter som trengs for å komme opp i nivå",
   "No breakfast": "Ingen frokost",
   "No content published": "Ingen innhold publisert",
@@ -193,11 +213,14 @@
   "Nordic Swan Ecolabel": "Svanemerket",
   "Not found": "Ikke funnet",
   "Nr night, nr adult": "{nights, number} natt, {adults, number} voksen",
+  "number": "antall",
   "On your journey": "På reisen din",
   "Open": "Åpen",
   "Open language menu": "Åpne språkmenyen",
   "Open menu": "Åpne menyen",
   "Open my pages menu": "Åpne mine sider menyen",
+  "or": "eller",
+  "OTHER PAYMENT METHODS": "ANDRE BETALINGSMETODER",
   "Overview": "Oversikt",
   "Parking": "Parkering",
   "Parking / Garage": "Parkering / Garasje",
@@ -209,6 +232,7 @@
   "Phone is required": "Telefon kreves",
   "Phone number": "Telefonnummer",
   "Please enter a valid phone number": "Vennligst oppgi et gyldig telefonnummer",
+  "points": "poeng",
   "Points": "Poeng",
   "Points being calculated": "Poeng beregnes",
   "Points earned prior to May 1, 2021": "Opptjente poeng før 1. mai 2021",
@@ -231,9 +255,9 @@
   "Restaurant & Bar": "Restaurant & Bar",
   "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Skriv inn nytt passord på nytt",
+  "Room": "Rom",
   "Room & Terms": "Rom & Vilkår",
   "Room facilities": "Romfasiliteter",
-  "Room": "Rom",
   "Rooms": "Rom",
   "Rooms & Guests": "Rom og gjester",
   "Sauna and gym": "Sauna and gym",
@@ -270,27 +294,31 @@
   "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.",
   "Something went wrong!": "Noe gikk galt!",
+  "special character": "spesiell karakter",
+  "spendable points expiring by": "{points} Brukbare poeng utløper innen {date}",
   "Sports": "Sport",
   "Standard price": "Standardpris",
   "Street": "Gate",
   "Successfully updated profile!": "Vellykket oppdatert profil!",
   "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",
   "Things nearby HOTEL_NAME": "Ting i nærheten av {hotelName}",
-  "Total Points": "Totale poeng",
+  "to": "til",
   "Total incl VAT": "Sum inkl mva",
+  "Total Points": "Totale poeng",
   "Tourist": "Turist",
   "Transaction date": "Transaksjonsdato",
   "Transactions": "Transaksjoner",
   "Transportations": "Transport",
   "Tripadvisor reviews": "{rating} ({count} anmeldelser på Tripadvisor)",
+  "TUI Points": "TUI Points",
   "Type of bed": "Sengtype",
   "Type of room": "Romtype",
+  "uppercase letter": "stor bokstav",
   "Use bonus cheque": "Bruk bonussjekk",
   "Use code/voucher": "Bruk kode/voucher",
   "User information": "Brukerinformasjon",
@@ -312,16 +340,16 @@
   "Where to": "Hvor skal du",
   "Which room class suits you the best?": "Hvilken romklasse passer deg best?",
   "Year": "År",
-  "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, 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.",
   "You have no previous stays.": "Du har ingen tidligere opphold.",
   "You have no upcoming stays.": "Du har ingen kommende opphold.",
-  "Your Challenges Conquer & Earn!": "Dine utfordringer Erobre og tjen!",
   "Your card was successfully removed!": "Kortet ditt ble fjernet!",
   "Your card was successfully saved!": "Kortet ditt ble lagret!",
+  "Your Challenges Conquer & Earn!": "Dine utfordringer Erobre og tjen!",
   "Your current level": "Ditt nåværende nivå",
   "Your details": "Dine detaljer",
   "Your level": "Ditt nivå",
@@ -331,32 +359,6 @@
   "Zoo": "Dyrehage",
   "Zoom in": "Zoom inn",
   "Zoom out": "Zoom ut",
-  "as of today": "per i dag",
-  "booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}",
-  "booking.children": "{totalChildren, plural, one {# barn} other {# barn}}",
-  "booking.guests": "Maks {nrOfGuests, plural, one {# gjest} other {# gjester}}",
-  "booking.nights": "{totalNights, plural, one {# natt} other {# netter}}",
-  "booking.rooms": "{totalRooms, plural, one {# rom} other {# rom}}",
-  "by": "innen",
-  "characters": "tegn",
-  "guest": "gjest",
-  "guests": "gjester",
-  "hotelPages.rooms.roomCard.person": "person",
-  "hotelPages.rooms.roomCard.persons": "personer",
-  "hotelPages.rooms.roomCard.seeRoomDetails": "Se detaljer om rommet",
-  "km to city center": "km til sentrum",
-  "lowercase letter": "liten bokstav",
-  "n/a": "n/a",
-  "next level:": "Neste nivå:",
-  "night": "natt",
-  "nights": "netter",
-  "number": "antall",
-  "or": "eller",
-  "points": "poeng",
-  "special character": "spesiell karakter",
-  "spendable points expiring by": "{points} Brukbare poeng utløper innen {date}",
-  "to": "til",
-  "uppercase letter": "stor bokstav",
   "{amount} {currency}": "{amount} {currency}",
   "{difference}{amount} {currency}": "{difference}{amount} {currency}",
   "{width} cm × {length} cm": "{width} cm × {length} cm"
diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json
index 9eda58171..b22278223 100644
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -9,8 +9,8 @@
   "Add code": "Lägg till kod",
   "Add new card": "Lägg till nytt kort",
   "Address": "Adress",
-  "Airport": "Flygplats",
   "Adults": "Vuxna",
+  "Airport": "Flygplats",
   "All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.": "Alla våra frukostbufféer erbjuder glutenfria, veganska och allergivänliga alternativ.",
   "Already a friend?": "Är du redan en vän?",
   "Amenities": "Bekvämligheter",
@@ -23,6 +23,7 @@
   "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 of today": "från och med idag",
   "As our": "Som vår {level}",
   "As our Close Friend": "Som vår nära vän",
   "At latest": "Senast",
@@ -35,6 +36,12 @@
   "Book": "Boka",
   "Book reward night": "Boka frinatt",
   "Booking number": "Bokningsnummer",
+  "booking.adults": "{totalAdults, plural, one {# vuxen} other {# vuxna}}",
+  "booking.children": "{totalChildren, plural, one {# barn} other {# barn}}",
+  "booking.guests": "Max {nrOfGuests, plural, one {# gäst} other {# gäster}}",
+  "booking.nights": "{totalNights, plural, one {# natt} other {# nätter}}",
+  "booking.rooms": "{totalRooms, plural, one {# rum} other {# rum}}",
+  "booking.terms": "Genom att betala med någon av de tillgängliga betalningsmetoderna accepterar jag villkoren för denna bokning och de generella <termsLink>Villkoren och villkoren</termsLink>, och förstår att Scandic kommer att behandla min personliga data i samband med denna bokning i enlighet med <privacyLink>Scandics integritetspolicy</privacyLink>. Jag accepterar att Scandic kräver ett giltigt kreditkort under min besök i fall att något är tillbaka betalt.",
   "Breakfast": "Frukost",
   "Breakfast buffet": "Frukostbuffé",
   "Breakfast excluded": "Frukost ingår ej",
@@ -43,7 +50,9 @@
   "Breakfast selection in next step.": "Frukostval i nästa steg.",
   "Bus terminal": "Bussterminal",
   "Business": "Business",
+  "by": "innan",
   "Cancel": "Avbryt",
+  "characters": "tecken",
   "Check in": "Checka in",
   "Check out": "Checka ut",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Kolla in kreditkorten som sparats i din profil. Betala med ett sparat kort när du är inloggad för en smidigare webbupplevelse.",
@@ -100,9 +109,9 @@
   "Explore all levels and benefits": "Utforska alla nivåer och fördelar",
   "Explore nearby": "Utforska i närheten",
   "Extras to your booking": "Extra tillval till din bokning",
-  "FAQ": "FAQ",
   "Failed to delete credit card, please try again later.": "Det gick inte att ta bort kreditkortet, försök igen senare.",
   "Fair": "Mässa",
+  "FAQ": "FAQ",
   "Find booking": "Hitta bokning",
   "Find hotels": "Hitta hotell",
   "First name": "Förnamn",
@@ -116,7 +125,9 @@
   "Get member benefits & offers": "Ta del av medlemsförmåner och erbjudanden",
   "Go back to edit": "Gå tillbaka till redigeringen",
   "Go back to overview": "Gå tillbaka till översikten",
+  "guest": "gäst",
   "Guest information": "Information till gästerna",
+  "guests": "gäster",
   "Guests & Rooms": "Gäster & rum",
   "Hi": "Hej",
   "Highest level": "Högsta nivå",
@@ -124,6 +135,9 @@
   "Hotel": "Hotell",
   "Hotel facilities": "Hotellfaciliteter",
   "Hotel surroundings": "Hotellomgivning",
+  "hotelPages.rooms.roomCard.person": "person",
+  "hotelPages.rooms.roomCard.persons": "personer",
+  "hotelPages.rooms.roomCard.seeRoomDetails": "Se information om rummet",
   "Hotels": "Hotell",
   "How do you want to sleep?": "Hur vill du sova?",
   "How it works": "Hur det fungerar",
@@ -133,9 +147,10 @@
   "In extra bed": "Egen sängplats",
   "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",
+  "Join Scandic Friends": "Gå med i Scandic Friends",
   "King bed": "King size-säng",
+  "km to city center": "km till stadens centrum",
   "Language": "Språk",
   "Last name": "Efternamn",
   "Latest searches": "Senaste sökningarna",
@@ -155,6 +170,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",
@@ -164,9 +180,9 @@
   "Member price": "Medlemspris",
   "Member price from": "Medlemspris från",
   "Members": "Medlemmar",
+  "Membership cards": "Medlemskort",
   "Membership ID": "Medlems-ID",
   "Membership ID copied to clipboard": "Medlems-ID kopierat till urklipp",
-  "Membership cards": "Medlemskort",
   "Menu": "Meny",
   "Modify": "Ändra",
   "Month": "Månad",
@@ -176,11 +192,16 @@
   "My pages": "Mina sidor",
   "My pages menu": "Mina sidor meny",
   "My payment cards": "Mina betalningskort",
+  "MY SAVED CARDS": "MINE SAVEDE KORT",
   "My wishes": "Mina önskningar",
+  "n/a": "n/a",
   "Nearby": "I närheten",
   "Nearby companies": "Närliggande företag",
   "New password": "Nytt lösenord",
   "Next": "Nästa",
+  "next level:": "Nästa nivå:",
+  "night": "natt",
+  "nights": "nätter",
   "Nights needed to level up": "Nätter som behövs för att gå upp i nivå",
   "No breakfast": "Ingen frukost",
   "No content published": "Inget innehåll publicerat",
@@ -193,11 +214,14 @@
   "Nordic Swan Ecolabel": "Svanenmärkt",
   "Not found": "Hittades inte",
   "Nr night, nr adult": "{nights, number} natt, {adults, number} vuxen",
+  "number": "nummer",
   "On your journey": "På din resa",
   "Open": "Öppna",
   "Open language menu": "Öppna språkmenyn",
   "Open menu": "Öppna menyn",
   "Open my pages menu": "Öppna mina sidor menyn",
+  "or": "eller",
+  "OTHER PAYMENT METHODS": "ANDRE BETALINGSMETODER",
   "Overview": "Översikt",
   "Parking": "Parkering",
   "Parking / Garage": "Parkering / Garage",
@@ -209,6 +233,7 @@
   "Phone is required": "Telefonnummer är obligatorisk",
   "Phone number": "Telefonnummer",
   "Please enter a valid phone number": "Var vänlig och ange ett giltigt telefonnummer",
+  "points": "poäng",
   "Points": "Poäng",
   "Points being calculated": "Poäng beräknas",
   "Points earned prior to May 1, 2021": "Intjänade poäng före den 1 maj 2021",
@@ -231,9 +256,9 @@
   "Restaurant & Bar": "Restaurang & Bar",
   "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Upprepa nytt lösenord",
+  "Room": "Rum",
   "Room & Terms": "Rum & Villkor",
   "Room facilities": "Rumfaciliteter",
-  "Room": "Rum",
   "Rooms": "Rum",
   "Rooms & Guests": "Rum och gäster",
   "Sauna and gym": "Sauna and gym",
@@ -270,27 +295,31 @@
   "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.",
   "Something went wrong!": "Något gick fel!",
+  "special character": "speciell karaktär",
+  "spendable points expiring by": "{points} poäng förfaller {date}",
   "Sports": "Sport",
   "Standard price": "Standardpris",
   "Street": "Gata",
   "Successfully updated profile!": "Profilen har uppdaterats framgångsrikt!",
   "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",
   "Things nearby HOTEL_NAME": "Saker i närheten av {hotelName}",
-  "Total Points": "Poäng totalt",
+  "to": "till",
   "Total incl VAT": "Totalt inkl moms",
+  "Total Points": "Poäng totalt",
   "Tourist": "Turist",
   "Transaction date": "Transaktionsdatum",
   "Transactions": "Transaktioner",
   "Transportations": "Transport",
   "Tripadvisor reviews": "{rating} ({count} recensioner på Tripadvisor)",
+  "TUI Points": "TUI Points",
   "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",
@@ -312,16 +341,16 @@
   "Where to": "Vart",
   "Which room class suits you the best?": "Vilken rumsklass passar dig bäst?",
   "Year": "År",
-  "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, 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.",
   "You have no previous stays.": "Du har inga tidigare vistelser.",
   "You have no upcoming stays.": "Du har inga planerade resor.",
-  "Your Challenges Conquer & Earn!": "Dina utmaningar Erövra och tjäna!",
   "Your card was successfully removed!": "Ditt kort har tagits bort!",
   "Your card was successfully saved!": "Ditt kort har sparats!",
+  "Your Challenges Conquer & Earn!": "Dina utmaningar Erövra och tjäna!",
   "Your current level": "Din nuvarande nivå",
   "Your details": "Dina uppgifter",
   "Your level": "Din nivå",
@@ -331,33 +360,6 @@
   "Zoo": "Djurpark",
   "Zoom in": "Zooma in",
   "Zoom out": "Zooma ut",
-  "as of today": "från och med idag",
-  "booking.adults": "{totalAdults, plural, one {# vuxen} other {# vuxna}}",
-  "booking.children": "{totalChildren, plural, one {# barn} other {# barn}}",
-  "booking.guests": "Max {nrOfGuests, plural, one {# gäst} other {# gäster}}",
-  "booking.nights": "{totalNights, plural, one {# natt} other {# nätter}}",
-  "booking.rooms": "{totalRooms, plural, one {# rum} other {# rum}}",
-  "booking.terms": "Genom att betala med någon av de tillgängliga betalningsmetoderna accepterar jag villkoren för denna bokning och de generella <termsLink>Villkoren och villkoren</termsLink>, och förstår att Scandic kommer att behandla min personliga data i samband med denna bokning i enlighet med <privacyLink>Scandics integritetspolicy</privacyLink>. Jag accepterar att Scandic kräver ett giltigt kreditkort under min besök i fall att något är tillbaka betalt.",
-  "by": "innan",
-  "characters": "tecken",
-  "guest": "gäst",
-  "guests": "gäster",
-  "hotelPages.rooms.roomCard.person": "person",
-  "hotelPages.rooms.roomCard.persons": "personer",
-  "hotelPages.rooms.roomCard.seeRoomDetails": "Se information om rummet",
-  "km to city center": "km till stadens centrum",
-  "lowercase letter": "liten bokstav",
-  "n/a": "n/a",
-  "next level:": "Nästa nivå:",
-  "night": "natt",
-  "nights": "nätter",
-  "number": "nummer",
-  "or": "eller",
-  "points": "poäng",
-  "special character": "speciell karaktär",
-  "spendable points expiring by": "{points} poäng förfaller {date}",
-  "to": "till",
-  "uppercase letter": "stor bokstav",
   "{amount} {currency}": "{amount} {currency}",
   "{difference}{amount} {currency}": "{difference}{amount} {currency}",
   "{width} cm × {length} cm": "{width} cm × {length} cm"
diff --git a/lib/trpc/memoizedRequests/index.ts b/lib/trpc/memoizedRequests/index.ts
index c1e58bcd7..fed1caf99 100644
--- a/lib/trpc/memoizedRequests/index.ts
+++ b/lib/trpc/memoizedRequests/index.ts
@@ -16,6 +16,22 @@ export const getProfileSafely = cache(
   }
 )
 
+export const getCreditCardsSafely = cache(
+  async function getMemoizedCreditCardsSafely() {
+    return serverClient().user.safeCreditCards()
+  }
+)
+
+export const getHotelData = cache(async function getMemoizedHotelData(
+  hotelId: string,
+  language: string
+) {
+  return serverClient().hotel.hotelData.get({
+    hotelId,
+    language,
+  })
+})
+
 export const getFooter = cache(async function getMemoizedFooter() {
   return serverClient().contentstack.base.footer()
 })
diff --git a/server/routers/user/output.ts b/server/routers/user/output.ts
index d4a6f0dd4..cf4b57e16 100644
--- a/server/routers/user/output.ts
+++ b/server/routers/user/output.ts
@@ -196,9 +196,11 @@ export const creditCardSchema = z
     attribute: z.object({
       cardName: z.string().optional(),
       alias: z.string(),
-      truncatedNumber: z.string(),
+      truncatedNumber: z.string().transform((s) => s.slice(-4)),
       expirationDate: z.string(),
-      cardType: z.string(),
+      cardType: z
+        .string()
+        .transform((s) => s.charAt(0).toLowerCase() + s.slice(1)),
     }),
     id: z.string(),
     type: z.string(),
@@ -208,6 +210,9 @@ export const creditCardSchema = z
       id: apiResponse.id,
       type: apiResponse.attribute.cardType,
       truncatedNumber: apiResponse.attribute.truncatedNumber,
+      alias: apiResponse.attribute.alias,
+      expirationDate: apiResponse.attribute.expirationDate,
+      cardType: apiResponse.attribute.cardType,
     }
   })
 
diff --git a/server/routers/user/query.ts b/server/routers/user/query.ts
index 3a6eaeaf2..5b823c68d 100644
--- a/server/routers/user/query.ts
+++ b/server/routers/user/query.ts
@@ -206,6 +206,56 @@ function parsedUser(data: User, isMFA: boolean) {
   return user
 }
 
+async function getCreditCards(session: Session) {
+  getCreditCardsCounter.add(1)
+  console.info("api.profile.creditCards start", JSON.stringify({}))
+  const apiResponse = await api.get(api.endpoints.v1.creditCards, {
+    headers: {
+      Authorization: `Bearer ${session.token.access_token}`,
+    },
+  })
+
+  if (!apiResponse.ok) {
+    const text = await apiResponse.text()
+    getCreditCardsFailCounter.add(1, {
+      error_type: "http_error",
+      error: JSON.stringify({
+        status: apiResponse.status,
+        statusText: apiResponse.statusText,
+        text,
+      }),
+    })
+    console.error(
+      "api.profile.creditCards error ",
+      JSON.stringify({
+        error: {
+          status: apiResponse.status,
+          statusText: apiResponse.statusText,
+          text,
+        },
+      })
+    )
+    return null
+  }
+
+  const apiJson = await apiResponse.json()
+  const verifiedData = creditCardsSchema.safeParse(apiJson)
+  if (!verifiedData.success) {
+    getCreditCardsFailCounter.add(1, {
+      error_type: "validation_error",
+      error: JSON.stringify(verifiedData.error),
+    })
+    console.error(
+      "api.profile.creditCards validation error ",
+      JSON.stringify({ error: verifiedData.error })
+    )
+    return null
+  }
+  getCreditCardsSuccessCounter.add(1)
+  console.info("api.profile.creditCards success", JSON.stringify({}))
+  return verifiedData.data.data
+}
+
 export const userQueryRouter = router({
   get: protectedProcedure
     .use(async function (opts) {
@@ -675,53 +725,14 @@ export const userQueryRouter = router({
   }),
 
   creditCards: protectedProcedure.query(async function ({ ctx }) {
-    getCreditCardsCounter.add(1)
-    console.info("api.profile.creditCards start", JSON.stringify({}))
-    const apiResponse = await api.get(api.endpoints.v1.creditCards, {
-      headers: {
-        Authorization: `Bearer ${ctx.session.token.access_token}`,
-      },
-    })
-
-    if (!apiResponse.ok) {
-      const text = await apiResponse.text()
-      getCreditCardsFailCounter.add(1, {
-        error_type: "http_error",
-        error: JSON.stringify({
-          status: apiResponse.status,
-          statusText: apiResponse.statusText,
-          text,
-        }),
-      })
-      console.error(
-        "api.profile.creditCards error ",
-        JSON.stringify({
-          error: {
-            status: apiResponse.status,
-            statusText: apiResponse.statusText,
-            text,
-          },
-        })
-      )
+    return await getCreditCards(ctx.session)
+  }),
+  safeCreditCards: safeProtectedProcedure.query(async function ({ ctx }) {
+    if (!ctx.session) {
       return null
     }
 
-    const apiJson = await apiResponse.json()
-    const verifiedData = creditCardsSchema.safeParse(apiJson)
-    if (!verifiedData.success) {
-      getCreditCardsFailCounter.add(1, {
-        error_type: "validation_error",
-        error: JSON.stringify(verifiedData.error),
-      })
-      console.error(
-        "api.profile.creditCards validation error ",
-        JSON.stringify({ error: verifiedData.error })
-      )
-      return null
-    }
-    getCreditCardsSuccessCounter.add(1)
-    console.info("api.profile.creditCards success", JSON.stringify({}))
-    return verifiedData.data.data
+    return await getCreditCards(ctx.session)
   }),
 
   membershipCards: protectedProcedure.query(async function ({ ctx }) {
diff --git a/types/components/hotelReservation/selectRate/section.ts b/types/components/hotelReservation/selectRate/section.ts
index 4da378cdd..a02107caf 100644
--- a/types/components/hotelReservation/selectRate/section.ts
+++ b/types/components/hotelReservation/selectRate/section.ts
@@ -1,4 +1,4 @@
-import { Hotel } from "@/types/hotel"
+import { CreditCard } from "@/types/user"
 
 export interface SectionProps {
   nextPath: string
@@ -28,7 +28,9 @@ export interface BreakfastSelectionProps extends SectionProps {
 export interface DetailsProps extends SectionProps {}
 
 export interface PaymentProps {
-  hotel: Hotel
+  hotelId: string
+  otherPaymentOptions: string[]
+  savedCreditCards: CreditCard[] | null
 }
 
 export interface SectionPageProps {

From c816b9f802be4759f49e10f07a8eba57ea339a15 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Mon, 21 Oct 2024 13:48:09 +0200
Subject: [PATCH 24/69] useMemo instead

---
 hooks/useCheckIfExternalLink.ts | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/hooks/useCheckIfExternalLink.ts b/hooks/useCheckIfExternalLink.ts
index 6e4b7a7ed..60476a4e8 100644
--- a/hooks/useCheckIfExternalLink.ts
+++ b/hooks/useCheckIfExternalLink.ts
@@ -1,9 +1,7 @@
-import { useEffect, useState } from "react"
+import { useMemo } from "react"
 
 export const useCheckIfExternalLink = (url: string) => {
-  const [isExternal, setIsExternal] = useState(false)
-
-  useEffect(() => {
+  return useMemo(() => {
     if (typeof window !== "undefined" && url?.length) {
       try {
         const hostName = window.location.hostname
@@ -12,12 +10,12 @@ export const useCheckIfExternalLink = (url: string) => {
         const hostsMatch = hostName === newURL.hostname
         const langRouteRegex = /^\/[a-zA-Z]{2}\//
 
-        setIsExternal(!hostsMatch || !langRouteRegex.test(newURL.pathname))
+        return !hostsMatch || !langRouteRegex.test(newURL.pathname)
       } catch {
         // Don't care. Expecting internal url (#, /my-pages/overview, etc)
+        return false
       }
     }
+    return false
   }, [url])
-
-  return isExternal
 }

From 59ffbef8fb0b8f9b7023b4fce24fed9c7c4633f0 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Tue, 15 Oct 2024 15:54:39 +0200
Subject: [PATCH 25/69] feat(SW-365): Added focal point to imagevault typings
 and to image component

---
 components/Image.tsx                          | 17 +++++++--
 components/TempDesignSystem/Card/index.tsx    |  2 +-
 .../contentstack/schemas/imageVault.ts        |  7 ++++
 types/components/image.ts                     | 35 ++++++++++++++++---
 types/components/imageVault.ts                |  3 ++
 utils/imageVault.ts                           |  1 +
 6 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/components/Image.tsx b/components/Image.tsx
index cf88c6e01..419259fc3 100644
--- a/components/Image.tsx
+++ b/components/Image.tsx
@@ -2,7 +2,10 @@
 
 import NextImage from "next/image"
 
-import type { ImageLoaderProps, ImageProps } from "next/image"
+import type { ImageLoaderProps } from "next/image"
+import type { CSSProperties } from "react"
+
+import type { ImageProps } from "@/types/components/image"
 
 function imageLoader({ quality, src, width }: ImageLoaderProps) {
   const hasQS = src.indexOf("?") !== -1
@@ -10,6 +13,14 @@ function imageLoader({ quality, src, width }: ImageLoaderProps) {
 }
 
 // Next/Image adds & instead of ? before the params
-export default function Image(props: ImageProps) {
-  return <NextImage {...props} loader={imageLoader} />
+export default function Image({ focalPoint, style, ...props }: ImageProps) {
+  const styles: CSSProperties = focalPoint
+    ? {
+        objectFit: "cover",
+        objectPosition: `${focalPoint.x}% ${focalPoint.y}%`,
+        ...style,
+      }
+    : { ...style }
+
+  return <NextImage {...props} style={styles} loader={imageLoader} />
 }
diff --git a/components/TempDesignSystem/Card/index.tsx b/components/TempDesignSystem/Card/index.tsx
index 547ab5bea..f820f9877 100644
--- a/components/TempDesignSystem/Card/index.tsx
+++ b/components/TempDesignSystem/Card/index.tsx
@@ -34,7 +34,7 @@ export default function Card({
 
   imageWidth =
     imageWidth ||
-    (backgroundImage && "dimensions" in backgroundImage
+    (backgroundImage?.dimensions
       ? backgroundImage.dimensions.aspectRatio * imageHeight
       : 420)
 
diff --git a/server/routers/contentstack/schemas/imageVault.ts b/server/routers/contentstack/schemas/imageVault.ts
index 2e656a465..35cfaadd6 100644
--- a/server/routers/contentstack/schemas/imageVault.ts
+++ b/server/routers/contentstack/schemas/imageVault.ts
@@ -11,6 +11,11 @@ const metaData = z.object({
   Value: z.string().nullable(),
 })
 
+export const focalPointSchema = z.object({
+  x: z.number(),
+  y: z.number(),
+})
+
 /**
  * Defines a media asset, original or conversion
  */
@@ -94,6 +99,7 @@ export const imageVaultAssetSchema = z.object({
    * Name of the user that added the asset to ImageVault
    */
   AddedBy: z.string(),
+  FocalPoint: focalPointSchema.optional(),
 })
 
 export const imageVaultAssetTransformedSchema = imageVaultAssetSchema.transform(
@@ -124,6 +130,7 @@ export const imageVaultAssetTransformedSchema = imageVaultAssetSchema.transform(
         height: mediaConversion.Height,
         aspectRatio,
       },
+      focalPoint: rawData.FocalPoint || { x: 50, y: 50 },
     }
   }
 )
diff --git a/types/components/image.ts b/types/components/image.ts
index 972c521d6..6ecd9f2cb 100644
--- a/types/components/image.ts
+++ b/types/components/image.ts
@@ -1,9 +1,34 @@
-export type ApiImage = {
+import type { ImageProps as NextImageProps } from "next/image"
+
+import type { ImageVaultAsset } from "./imageVault"
+
+export interface FocalPoint {
+  x: number
+  y: number
+}
+
+export interface Dimensions {
+  width: number
+  height: number
+  aspectRatio: number
+}
+
+export interface Meta {
+  alt: string | undefined | null
+  caption: string | undefined | null
+}
+
+export interface ApiImage {
   id: string
   url: string
   title: string
-  meta: {
-    alt: string
-    caption: string
-  }
+  meta: Meta
+  dimensions?: Dimensions
+  focalPoint?: FocalPoint
 }
+
+export interface ImageProps extends NextImageProps {
+  focalPoint?: FocalPoint
+}
+
+export type ImageType = ImageVaultAsset | ApiImage
diff --git a/types/components/imageVault.ts b/types/components/imageVault.ts
index ceae6e278..dae2577e2 100644
--- a/types/components/imageVault.ts
+++ b/types/components/imageVault.ts
@@ -11,6 +11,8 @@ import { z } from "zod"
 
 import { imageVaultAssetSchema } from "@/server/routers/contentstack/schemas/imageVault"
 
+import type { FocalPoint } from "./image"
+
 export type ImageVaultAssetResponse = z.infer<typeof imageVaultAssetSchema>
 
 export type ImageVaultAsset = {
@@ -23,4 +25,5 @@ export type ImageVaultAsset = {
     aspectRatio: number
   }
   meta: { alt: string | undefined | null; caption: string | undefined | null }
+  focalPoint: FocalPoint
 }
diff --git a/utils/imageVault.ts b/utils/imageVault.ts
index f04b7fdf2..5336dfbe7 100644
--- a/utils/imageVault.ts
+++ b/utils/imageVault.ts
@@ -33,6 +33,7 @@ export function insertResponseToImageVaultAsset(
       height: mediaConversion.Height,
       aspectRatio,
     },
+    focalPoint: response.FocalPoint || { x: 50, y: 50 },
   }
 }
 

From 7d905a46bf639b20b6ea3bec105ab6b4af0a4ce7 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Wed, 16 Oct 2024 08:22:01 +0200
Subject: [PATCH 26/69] feat(SW-365): Implemented focal point

---
 components/ContentType/ContentPage/index.tsx         | 1 +
 components/DeprecatedJsonToHtml/renderOptions.tsx    | 1 +
 components/Hero/hero.ts                              | 3 +++
 components/Hero/index.tsx                            | 3 ++-
 components/ImageContainer/index.tsx                  | 2 ++
 components/JsonToHtml/renderOptions.tsx              | 1 +
 components/TempDesignSystem/Card/CardImage/index.tsx | 1 +
 components/TempDesignSystem/Card/index.tsx           | 1 +
 components/TempDesignSystem/LoyaltyCard/index.tsx    | 1 +
 components/TempDesignSystem/TeaserCard/index.tsx     | 1 +
 types/components/image.ts                            | 2 --
 11 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/components/ContentType/ContentPage/index.tsx b/components/ContentType/ContentPage/index.tsx
index 5c5c63893..b6a556dc5 100644
--- a/components/ContentType/ContentPage/index.tsx
+++ b/components/ContentType/ContentPage/index.tsx
@@ -44,6 +44,7 @@ export default async function ContentPage() {
             <Hero
               alt={hero_image.meta.alt || hero_image.meta.caption || ""}
               src={hero_image.url}
+              focalPoint={hero_image.focalPoint}
             />
           </div>
         ) : null}
diff --git a/components/DeprecatedJsonToHtml/renderOptions.tsx b/components/DeprecatedJsonToHtml/renderOptions.tsx
index a73efe396..c22f469e0 100644
--- a/components/DeprecatedJsonToHtml/renderOptions.tsx
+++ b/components/DeprecatedJsonToHtml/renderOptions.tsx
@@ -397,6 +397,7 @@ export const renderOptions: RenderOptions = {
               height={365}
               src={image.url}
               width={width}
+              focalPoint={image.focalPoint}
               {...props}
             />
             <Caption>{image.meta.caption}</Caption>
diff --git a/components/Hero/hero.ts b/components/Hero/hero.ts
index 29fd1b8d1..07cc2cb1c 100644
--- a/components/Hero/hero.ts
+++ b/components/Hero/hero.ts
@@ -1,4 +1,7 @@
+import type { FocalPoint } from "@/types/components/image"
+
 export interface HeroProps {
   alt: string
   src: string
+  focalPoint?: FocalPoint
 }
diff --git a/components/Hero/index.tsx b/components/Hero/index.tsx
index fade3e6b0..0c1df4108 100644
--- a/components/Hero/index.tsx
+++ b/components/Hero/index.tsx
@@ -4,7 +4,7 @@ import { HeroProps } from "./hero"
 
 import styles from "./hero.module.css"
 
-export default async function Hero({ alt, src }: HeroProps) {
+export default async function Hero({ alt, src, focalPoint }: HeroProps) {
   return (
     <Image
       className={styles.hero}
@@ -12,6 +12,7 @@ export default async function Hero({ alt, src }: HeroProps) {
       height={480}
       width={1196}
       src={src}
+      focalPoint={focalPoint}
     />
   )
 }
diff --git a/components/ImageContainer/index.tsx b/components/ImageContainer/index.tsx
index c7e23d621..390aaa81b 100644
--- a/components/ImageContainer/index.tsx
+++ b/components/ImageContainer/index.tsx
@@ -18,6 +18,7 @@ export default function ImageContainer({
           height={365}
           width={600}
           alt={leftImage.meta.alt || leftImage.title}
+          focalPoint={leftImage.focalPoint}
         />
         <Caption>{leftImage.meta.caption}</Caption>
       </article>
@@ -28,6 +29,7 @@ export default function ImageContainer({
           height={365}
           width={600}
           alt={rightImage.meta.alt || rightImage.title}
+          focalPoint={rightImage.focalPoint}
         />
         <Caption>{leftImage.meta.caption}</Caption>
       </article>
diff --git a/components/JsonToHtml/renderOptions.tsx b/components/JsonToHtml/renderOptions.tsx
index ce7a325b5..219981529 100644
--- a/components/JsonToHtml/renderOptions.tsx
+++ b/components/JsonToHtml/renderOptions.tsx
@@ -396,6 +396,7 @@ export const renderOptions: RenderOptions = {
               height={365}
               src={image.url}
               width={width}
+              focalPoint={image.focalPoint}
               {...props}
             />
             <Caption>{image.meta.caption}</Caption>
diff --git a/components/TempDesignSystem/Card/CardImage/index.tsx b/components/TempDesignSystem/Card/CardImage/index.tsx
index 9c3233e87..bcdbd265a 100644
--- a/components/TempDesignSystem/Card/CardImage/index.tsx
+++ b/components/TempDesignSystem/Card/CardImage/index.tsx
@@ -24,6 +24,7 @@ export default function CardImage({
                 alt={backgroundImage.title}
                 width={180}
                 height={180}
+                focalPoint={backgroundImage.focalPoint}
               />
             )
         )}
diff --git a/components/TempDesignSystem/Card/index.tsx b/components/TempDesignSystem/Card/index.tsx
index f820f9877..4a2ab61a9 100644
--- a/components/TempDesignSystem/Card/index.tsx
+++ b/components/TempDesignSystem/Card/index.tsx
@@ -53,6 +53,7 @@ export default function Card({
             alt={backgroundImage.meta.alt || backgroundImage.title}
             width={imageWidth}
             height={imageHeight}
+            focalPoint={backgroundImage.focalPoint}
           />
         </div>
       )}
diff --git a/components/TempDesignSystem/LoyaltyCard/index.tsx b/components/TempDesignSystem/LoyaltyCard/index.tsx
index b748407f1..ea49366fc 100644
--- a/components/TempDesignSystem/LoyaltyCard/index.tsx
+++ b/components/TempDesignSystem/LoyaltyCard/index.tsx
@@ -32,6 +32,7 @@ export default function LoyaltyCard({
           height={160}
           className={styles.image}
           alt={image.meta.alt || image.title}
+          focalPoint={image.focalPoint}
         />
       ) : null}
       <Title as="h5" level="h3" textAlign="center">
diff --git a/components/TempDesignSystem/TeaserCard/index.tsx b/components/TempDesignSystem/TeaserCard/index.tsx
index a5a578df1..bc40df889 100644
--- a/components/TempDesignSystem/TeaserCard/index.tsx
+++ b/components/TempDesignSystem/TeaserCard/index.tsx
@@ -35,6 +35,7 @@ export default function TeaserCard({
             className={styles.backgroundImage}
             width={399}
             height={201}
+            focalPoint={image.focalPoint}
           />
         </div>
       )}
diff --git a/types/components/image.ts b/types/components/image.ts
index 6ecd9f2cb..67ef46278 100644
--- a/types/components/image.ts
+++ b/types/components/image.ts
@@ -30,5 +30,3 @@ export interface ApiImage {
 export interface ImageProps extends NextImageProps {
   focalPoint?: FocalPoint
 }
-
-export type ImageType = ImageVaultAsset | ApiImage

From 66abe066ab567b9b558b604d0c2bc572e8107af1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Mon, 21 Oct 2024 11:34:45 +0200
Subject: [PATCH 27/69] fix(SW-653): remove padding from textCols and usp

---
 components/Blocks/TextCols/textcols.module.css | 1 -
 components/Blocks/UspGrid/uspgrid.module.css   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/components/Blocks/TextCols/textcols.module.css b/components/Blocks/TextCols/textcols.module.css
index b3e9e2824..8c3a1bda1 100644
--- a/components/Blocks/TextCols/textcols.module.css
+++ b/components/Blocks/TextCols/textcols.module.css
@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x3);
-  padding: var(--Spacing-x3) var(--Spacing-x4);
 }
 
 .column {
diff --git a/components/Blocks/UspGrid/uspgrid.module.css b/components/Blocks/UspGrid/uspgrid.module.css
index 042acd9b3..91c6f8fd8 100644
--- a/components/Blocks/UspGrid/uspgrid.module.css
+++ b/components/Blocks/UspGrid/uspgrid.module.css
@@ -1,7 +1,6 @@
 .grid {
   display: grid;
   gap: var(--Spacing-x3);
-  padding: var(--Spacing-x3) var(--Spacing-x4);
 }
 @media screen and (min-width: 767px) {
   .grid {

From 01db5aa19279b37288ae79dbe2c917972573f9d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Mon, 14 Oct 2024 17:11:21 +0200
Subject: [PATCH 28/69] fix(SW-438): add ContentCard, ScriptedCard and
 Shortcuts to ContentPage sidebar

---
 components/Blocks/CardsGrid.tsx               | 14 +----
 components/Sidebar/index.tsx                  | 30 ++++++++++
 components/Sidebar/sidebar.module.css         |  8 ++-
 .../Fragments/Sidebar/ContentCard.graphql     | 37 +++++++++++++
 .../Fragments/Sidebar/QuickLinks.graphql      | 22 ++++++++
 .../Fragments/Sidebar/ScriptedCard.graphql    | 37 +++++++++++++
 .../Query/ContentPage/ContentPage.graphql     |  6 ++
 .../contentstack/contentPage/output.ts        | 24 ++++++++
 .../contentstack/schemas/sidebar/content.ts   |  1 -
 .../schemas/sidebar/contentCard.ts            | 45 +++++++++++++++
 .../schemas/sidebar/quickLinks.ts             | 18 ++++++
 .../schemas/sidebar/scriptedCard.ts           | 55 +++++++++++++++++++
 types/enums/contentPage.ts                    |  3 +
 types/enums/sidebar.ts                        |  3 +
 14 files changed, 290 insertions(+), 13 deletions(-)
 create mode 100644 lib/graphql/Fragments/Sidebar/ContentCard.graphql
 create mode 100644 lib/graphql/Fragments/Sidebar/QuickLinks.graphql
 create mode 100644 lib/graphql/Fragments/Sidebar/ScriptedCard.graphql
 create mode 100644 server/routers/contentstack/schemas/sidebar/contentCard.ts
 create mode 100644 server/routers/contentstack/schemas/sidebar/quickLinks.ts
 create mode 100644 server/routers/contentstack/schemas/sidebar/scriptedCard.ts

diff --git a/components/Blocks/CardsGrid.tsx b/components/Blocks/CardsGrid.tsx
index 1c07b73ec..6c9d84b15 100644
--- a/components/Blocks/CardsGrid.tsx
+++ b/components/Blocks/CardsGrid.tsx
@@ -45,10 +45,8 @@ export default function CardsGrid({
                   theme={cards_grid.theme ?? "one"}
                   key={card.system.uid}
                   scriptedTopTitle={card.scripted_top_title}
-                  heading={card.heading}
                   bodyText={card.body_text}
-                  secondaryButton={card.secondaryButton}
-                  primaryButton={card.primaryButton}
+                  {...card}
                 />
               )
             case CardsGridEnum.cards.TeaserCard:
@@ -57,21 +55,15 @@ export default function CardsGrid({
                   key={card.system.uid}
                   title={card.heading}
                   description={card.body_text}
-                  primaryButton={card.primaryButton}
-                  secondaryButton={card.secondaryButton}
-                  sidePeekButton={card.sidePeekButton}
-                  sidePeekContent={card.sidePeekContent}
-                  image={card.image}
+                  {...card}
                 />
               )
             case CardsGridEnum.cards.LoyaltyCard:
               return (
                 <LoyaltyCard
                   key={card.system.uid}
-                  image={card.image}
-                  heading={card.heading}
                   bodyText={card.body_text}
-                  link={card.link}
+                  {...card}
                 />
               )
           }
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index 3e0f59637..155af47ba 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -1,5 +1,8 @@
 import JsonToHtml from "@/components/JsonToHtml"
 
+import ShortcutsList from "../Blocks/ShortcutsList"
+import Card from "../TempDesignSystem/Card"
+import TeaserCard from "../TempDesignSystem/TeaserCard"
 import JoinLoyaltyContact from "./JoinLoyalty"
 import MyPagesNavigation from "./MyPagesNavigation"
 
@@ -26,6 +29,19 @@ export default function Sidebar({ blocks }: SidebarProps) {
                 />
               </section>
             )
+          case SidebarEnums.blocks.ContentCard:
+            console.log("EEE", block.content_card)
+            return (
+              <TeaserCard
+                {...block.content_card}
+                title={block.content_card.heading}
+                description={block.content_card.body_text}
+                style={
+                  block.content_card.theme === "gray" ? "default" : "featured"
+                }
+              />
+            )
+
           case SidebarEnums.blocks.DynamicContent:
             switch (block.dynamic_content.component) {
               case DynamicContentEnum.Sidebar.components.my_pages_navigation:
@@ -40,6 +56,20 @@ export default function Sidebar({ blocks }: SidebarProps) {
                 key={`${block.typename}-${idx}`}
               />
             )
+          case SidebarEnums.blocks.ScriptedCard:
+            return (
+              <Card
+                {...block.scripted_card}
+                bodyText={block.scripted_card.body_text}
+                scriptedTopTitle={block.scripted_card.scripted_top_title}
+                theme={block.scripted_card.theme ?? "image"}
+              />
+            )
+
+          /*case SidebarEnums.blocks.Shortcuts:
+            console.log("SSS", block)
+            return <ShortcutsList {...block.shortcuts} />*/
+
           default:
             return null
         }
diff --git a/components/Sidebar/sidebar.module.css b/components/Sidebar/sidebar.module.css
index 5ae1ce5d4..f30a1ea39 100644
--- a/components/Sidebar/sidebar.module.css
+++ b/components/Sidebar/sidebar.module.css
@@ -2,6 +2,10 @@
   display: grid;
   container-name: sidebar;
   container-type: inline-size;
+  gap: var(--Spacing-x3);
+
+  border-top: 1px solid var(--Base-Border-Subtle);
+  padding-top: var(--Spacing-x4);
 }
 
 .content {
@@ -11,8 +15,10 @@
 @media screen and (min-width: 1367px) {
   .aside {
     align-content: flex-start;
-    display: grid;
     gap: var(--Spacing-x4);
+
+    border-top: 0;
+    padding-top: 0;
   }
 }
 
diff --git a/lib/graphql/Fragments/Sidebar/ContentCard.graphql b/lib/graphql/Fragments/Sidebar/ContentCard.graphql
new file mode 100644
index 000000000..08cf9db28
--- /dev/null
+++ b/lib/graphql/Fragments/Sidebar/ContentCard.graphql
@@ -0,0 +1,37 @@
+#import "../AccountPage/Ref.graphql"
+#import "../ContentPage/Ref.graphql"
+#import "../LoyaltyPage/Ref.graphql"
+
+#import "../PageLink/AccountPageLink.graphql"
+#import "../PageLink/ContentPageLink.graphql"
+#import "../PageLink/LoyaltyPageLink.graphql"
+
+#import "../Blocks/TeaserCard.graphql"
+#import "../Blocks/Refs/TeaserCard.graphql"
+
+fragment ContentCardSidebar_ContentPage on ContentPageSidebarContentCard {
+  __typename
+  content_card {
+    theme
+    content_cardConnection {
+      edges {
+        node {
+          __typename
+          ...TeaserCardBlock
+        }
+      }
+    }
+  }
+}
+
+fragment ContentCardSidebar_ContentPageRefs on ContentPageSidebarContentCard {
+  content_card {
+    content_cardConnection {
+      edges {
+        node {
+          ...TeaserCardBlockRef
+        }
+      }
+    }
+  }
+}
diff --git a/lib/graphql/Fragments/Sidebar/QuickLinks.graphql b/lib/graphql/Fragments/Sidebar/QuickLinks.graphql
new file mode 100644
index 000000000..ff516e519
--- /dev/null
+++ b/lib/graphql/Fragments/Sidebar/QuickLinks.graphql
@@ -0,0 +1,22 @@
+#import "../AccountPage/Ref.graphql"
+#import "../ContentPage/Ref.graphql"
+#import "../LoyaltyPage/Ref.graphql"
+
+#import "../PageLink/AccountPageLink.graphql"
+#import "../PageLink/ContentPageLink.graphql"
+#import "../PageLink/LoyaltyPageLink.graphql"
+
+#import "../Blocks/Shortcuts.graphql"
+
+fragment QuickLinksSidebar_ContentPage on ContentPageSidebarShortcuts {
+  __typename
+  shortcuts {
+    ...Shortcuts
+  }
+}
+
+fragment QuickLinksSidebar_ContentPageRefs on ContentPageSidebarShortcuts {
+  shortcuts {
+    ...ShortcutsRefs
+  }
+}
diff --git a/lib/graphql/Fragments/Sidebar/ScriptedCard.graphql b/lib/graphql/Fragments/Sidebar/ScriptedCard.graphql
new file mode 100644
index 000000000..65781aaf7
--- /dev/null
+++ b/lib/graphql/Fragments/Sidebar/ScriptedCard.graphql
@@ -0,0 +1,37 @@
+#import "../AccountPage/Ref.graphql"
+#import "../ContentPage/Ref.graphql"
+#import "../LoyaltyPage/Ref.graphql"
+
+#import "../PageLink/AccountPageLink.graphql"
+#import "../PageLink/ContentPageLink.graphql"
+#import "../PageLink/LoyaltyPageLink.graphql"
+
+#import "../Blocks/Card.graphql"
+#import "../Blocks/Refs/Card.graphql"
+
+fragment ScriptedCardSidebar_ContentPage on ContentPageSidebarScriptedCard {
+  __typename
+  scripted_card {
+    theme
+    scripted_cardConnection {
+      edges {
+        node {
+          __typename
+          ...CardBlock
+        }
+      }
+    }
+  }
+}
+
+fragment ScriptedCardSidebar_ContentPageRefs on ContentPageSidebarContentCard {
+  scripted_card {
+    scripted_cardConnection {
+      edges {
+        node {
+          ...CardBlockRef
+        }
+      }
+    }
+  }
+}
diff --git a/lib/graphql/Query/ContentPage/ContentPage.graphql b/lib/graphql/Query/ContentPage/ContentPage.graphql
index 280eb13ef..9552c53c4 100644
--- a/lib/graphql/Query/ContentPage/ContentPage.graphql
+++ b/lib/graphql/Query/ContentPage/ContentPage.graphql
@@ -13,6 +13,9 @@
 #import "../../Fragments/Sidebar/Content.graphql"
 #import "../../Fragments/Sidebar/DynamicContent.graphql"
 #import "../../Fragments/Sidebar/JoinLoyaltyContact.graphql"
+#import "../../Fragments/Sidebar/ContentCard.graphql"
+#import "../../Fragments/Sidebar/ScriptedCard.graphql"
+#import "../../Fragments/Sidebar/QuickLinks.graphql"
 
 query GetContentPage($locale: String!, $uid: String!) {
   content_page(uid: $uid, locale: $locale) {
@@ -28,6 +31,9 @@ query GetContentPage($locale: String!, $uid: String!) {
       ...ContentSidebar_ContentPage
       ...DynamicContentSidebar_ContentPage
       ...JoinLoyaltyContactSidebar_ContentPage
+      ...ContentCardSidebar_ContentPage
+      ...ScriptedCardSidebar_ContentPage
+      ...QuickLinksSidebar_ContentPage
     }
     system {
       ...System
diff --git a/server/routers/contentstack/contentPage/output.ts b/server/routers/contentstack/contentPage/output.ts
index 2a1bc1681..6b0baa553 100644
--- a/server/routers/contentstack/contentPage/output.ts
+++ b/server/routers/contentstack/contentPage/output.ts
@@ -34,11 +34,14 @@ import {
   contentRefsSchema as sidebarContentRefsSchema,
   contentSchema as sidebarContentSchema,
 } from "../schemas/sidebar/content"
+import { contentCardsSchema } from "../schemas/sidebar/contentCard"
 import { dynamicContentSchema as sidebarDynamicContentSchema } from "../schemas/sidebar/dynamicContent"
 import {
   joinLoyaltyContactRefsSchema,
   joinLoyaltyContactSchema,
 } from "../schemas/sidebar/joinLoyaltyContact"
+import { quickLinksSchema } from "../schemas/sidebar/quickLinks"
+import { scriptedCardsSchema } from "../schemas/sidebar/scriptedCard"
 import { systemSchema } from "../schemas/system"
 
 import { ContentPageEnum } from "@/types/enums/contentPage"
@@ -122,10 +125,31 @@ export const contentPageJoinLoyaltyContact = z
   })
   .merge(joinLoyaltyContactSchema)
 
+export const contentPageSidebarQuicklinks = z
+  .object({
+    __typename: z.literal(ContentPageEnum.ContentStack.sidebar.QuickLinks),
+  })
+  .merge(quickLinksSchema)
+
+export const contentPageSidebarContentCard = z
+  .object({
+    __typename: z.literal(ContentPageEnum.ContentStack.sidebar.ContentCard),
+  })
+  .merge(contentCardsSchema)
+
+export const contentPageSidebarScriptedCard = z
+  .object({
+    __typename: z.literal(ContentPageEnum.ContentStack.sidebar.ScriptedCard),
+  })
+  .merge(scriptedCardsSchema)
+
 export const sidebarSchema = z.discriminatedUnion("__typename", [
   contentPageSidebarContent,
+  contentPageSidebarContentCard,
   contentPageSidebarDynamicContent,
   contentPageJoinLoyaltyContact,
+  contentPageSidebarScriptedCard,
+  contentPageSidebarQuicklinks,
 ])
 
 const navigationLinksSchema = z
diff --git a/server/routers/contentstack/schemas/sidebar/content.ts b/server/routers/contentstack/schemas/sidebar/content.ts
index d1d03c6bd..8f8e83239 100644
--- a/server/routers/contentstack/schemas/sidebar/content.ts
+++ b/server/routers/contentstack/schemas/sidebar/content.ts
@@ -10,7 +10,6 @@ import {
 
 import { ContentEnum } from "@/types/enums/content"
 import { SidebarEnums } from "@/types/enums/sidebar"
-import { System } from "@/types/requests/system"
 
 export const contentSchema = z.object({
   typename: z
diff --git a/server/routers/contentstack/schemas/sidebar/contentCard.ts b/server/routers/contentstack/schemas/sidebar/contentCard.ts
new file mode 100644
index 000000000..4d415eece
--- /dev/null
+++ b/server/routers/contentstack/schemas/sidebar/contentCard.ts
@@ -0,0 +1,45 @@
+import { z } from "zod"
+
+import {
+  teaserCardBlockRefsSchema,
+  teaserCardBlockSchema,
+  transformTeaserCardBlock,
+} from "../blocks/cardsGrid"
+
+import { SidebarEnums } from "@/types/enums/sidebar"
+
+export const contentCardsSchema = z.object({
+  typename: z
+    .literal(SidebarEnums.blocks.ContentCard)
+    .optional()
+    .default(SidebarEnums.blocks.ContentCard),
+  content_card: z
+    .object({
+      theme: z.enum(["gray", "white"]).nullable().default("gray"),
+      content_cardConnection: z.object({
+        edges: z.array(
+          z.object({
+            node: teaserCardBlockSchema,
+          })
+        ),
+      }),
+    })
+    .transform((data) => {
+      return {
+        ...transformTeaserCardBlock(data.content_cardConnection.edges[0].node),
+        theme: data.theme,
+      }
+    }),
+})
+
+export const contentCardRefschema = z.object({
+  content_card: z.object({
+    content_cardConnection: z.object({
+      edges: z.array(
+        z.object({
+          node: teaserCardBlockRefsSchema,
+        })
+      ),
+    }),
+  }),
+})
diff --git a/server/routers/contentstack/schemas/sidebar/quickLinks.ts b/server/routers/contentstack/schemas/sidebar/quickLinks.ts
new file mode 100644
index 000000000..fe673b7a3
--- /dev/null
+++ b/server/routers/contentstack/schemas/sidebar/quickLinks.ts
@@ -0,0 +1,18 @@
+import { z } from "zod"
+
+import { shortcutsRefsSchema, shortcutsSchema } from "../blocks/shortcuts"
+
+import { SidebarEnums } from "@/types/enums/sidebar"
+
+export const quickLinksSchema = z
+  .object({
+    typename: z
+      .literal(SidebarEnums.blocks.Shortcuts)
+      .optional()
+      .default(SidebarEnums.blocks.Shortcuts),
+  })
+  .merge(shortcutsSchema)
+
+export const quickLinksSRefschema = z.object({
+  shortcutsRefsSchema,
+})
diff --git a/server/routers/contentstack/schemas/sidebar/scriptedCard.ts b/server/routers/contentstack/schemas/sidebar/scriptedCard.ts
new file mode 100644
index 000000000..eddd2cd40
--- /dev/null
+++ b/server/routers/contentstack/schemas/sidebar/scriptedCard.ts
@@ -0,0 +1,55 @@
+import { z } from "zod"
+
+import {
+  cardBlockRefsSchema,
+  cardBlockSchema,
+  transformCardBlock,
+} from "../blocks/cardsGrid"
+
+import { SidebarEnums } from "@/types/enums/sidebar"
+
+export const scriptedCardsSchema = z.object({
+  typename: z
+    .literal(SidebarEnums.blocks.ScriptedCard)
+    .optional()
+    .default(SidebarEnums.blocks.ScriptedCard),
+  scripted_card: z
+    .object({
+      theme: z
+        .enum([
+          "one",
+          "two",
+          "three",
+          "primaryDim",
+          "primaryDark",
+          "primaryInverted",
+          "primaryStrong",
+        ])
+        .nullable(),
+      scripted_cardConnection: z.object({
+        edges: z.array(
+          z.object({
+            node: cardBlockSchema,
+          })
+        ),
+      }),
+    })
+    .transform((data) => {
+      return {
+        theme: data.theme,
+        ...transformCardBlock(data.scripted_cardConnection.edges[0].node),
+      }
+    }),
+})
+
+export const scriptedCardRefschema = z.object({
+  cripted_card: z.object({
+    scripted_cardConnection: z.object({
+      edges: z.array(
+        z.object({
+          node: cardBlockRefsSchema,
+        })
+      ),
+    }),
+  }),
+})
diff --git a/types/enums/contentPage.ts b/types/enums/contentPage.ts
index 16366a756..95b228da3 100644
--- a/types/enums/contentPage.ts
+++ b/types/enums/contentPage.ts
@@ -13,8 +13,11 @@ export namespace ContentPageEnum {
 
     export const enum sidebar {
       Content = "ContentPageSidebarContent",
+      ContentCard = "ContentPageSidebarContentCard",
       DynamicContent = "ContentPageSidebarDynamicContent",
       JoinLoyaltyContact = "ContentPageSidebarJoinLoyaltyContact",
+      ScriptedCard = "ContentPageSidebarScriptedCard",
+      QuickLinks = "ContentPageSidebarShortcuts",
     }
   }
 }
diff --git a/types/enums/sidebar.ts b/types/enums/sidebar.ts
index fbdb589a8..fd6de1838 100644
--- a/types/enums/sidebar.ts
+++ b/types/enums/sidebar.ts
@@ -1,7 +1,10 @@
 export namespace SidebarEnums {
   export const enum blocks {
     Content = "Content",
+    ContentCard = "ContentCard",
     DynamicContent = "DynamicContent",
     JoinLoyaltyContact = "JoinLoyaltyContact",
+    ScriptedCard = "ScriptedCard",
+    Shortcuts = "Shortcuts",
   }
 }

From e5eb6a53316549872d404cc7885bd511fda791cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 16 Oct 2024 08:11:55 +0200
Subject: [PATCH 29/69] fix(SW-438): fix sidebar refs

---
 .../Fragments/Sidebar/ContentCard.graphql     |  1 +
 .../Fragments/Sidebar/QuickLinks.graphql      |  1 +
 .../Fragments/Sidebar/ScriptedCard.graphql    |  3 +-
 .../Query/ContentPage/ContentPage.graphql     |  3 ++
 .../contentstack/contentPage/output.ts        | 36 +++++++++++++++++--
 .../schemas/sidebar/scriptedCard.ts           |  2 +-
 6 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/lib/graphql/Fragments/Sidebar/ContentCard.graphql b/lib/graphql/Fragments/Sidebar/ContentCard.graphql
index 08cf9db28..2aab57cad 100644
--- a/lib/graphql/Fragments/Sidebar/ContentCard.graphql
+++ b/lib/graphql/Fragments/Sidebar/ContentCard.graphql
@@ -29,6 +29,7 @@ fragment ContentCardSidebar_ContentPageRefs on ContentPageSidebarContentCard {
     content_cardConnection {
       edges {
         node {
+          __typename
           ...TeaserCardBlockRef
         }
       }
diff --git a/lib/graphql/Fragments/Sidebar/QuickLinks.graphql b/lib/graphql/Fragments/Sidebar/QuickLinks.graphql
index ff516e519..c471b0151 100644
--- a/lib/graphql/Fragments/Sidebar/QuickLinks.graphql
+++ b/lib/graphql/Fragments/Sidebar/QuickLinks.graphql
@@ -17,6 +17,7 @@ fragment QuickLinksSidebar_ContentPage on ContentPageSidebarShortcuts {
 
 fragment QuickLinksSidebar_ContentPageRefs on ContentPageSidebarShortcuts {
   shortcuts {
+    __typename
     ...ShortcutsRefs
   }
 }
diff --git a/lib/graphql/Fragments/Sidebar/ScriptedCard.graphql b/lib/graphql/Fragments/Sidebar/ScriptedCard.graphql
index 65781aaf7..8da37a196 100644
--- a/lib/graphql/Fragments/Sidebar/ScriptedCard.graphql
+++ b/lib/graphql/Fragments/Sidebar/ScriptedCard.graphql
@@ -24,11 +24,12 @@ fragment ScriptedCardSidebar_ContentPage on ContentPageSidebarScriptedCard {
   }
 }
 
-fragment ScriptedCardSidebar_ContentPageRefs on ContentPageSidebarContentCard {
+fragment ScriptedCardSidebar_ContentPageRefs on ContentPageSidebarScriptedCard {
   scripted_card {
     scripted_cardConnection {
       edges {
         node {
+          __typename
           ...CardBlockRef
         }
       }
diff --git a/lib/graphql/Query/ContentPage/ContentPage.graphql b/lib/graphql/Query/ContentPage/ContentPage.graphql
index 9552c53c4..e8ca9d5a4 100644
--- a/lib/graphql/Query/ContentPage/ContentPage.graphql
+++ b/lib/graphql/Query/ContentPage/ContentPage.graphql
@@ -96,7 +96,10 @@ query GetContentPageRefs($locale: String!, $uid: String!) {
     sidebar {
       __typename
       ...ContentSidebar_ContentPageRefs
+      ...ContentCardSidebar_ContentPageRefs
       ...JoinLoyaltyContactSidebar_ContentPageRefs
+      ...ScriptedCardSidebar_ContentPageRefs
+      ...QuickLinksSidebar_ContentPageRefs
     }
     system {
       ...System
diff --git a/server/routers/contentstack/contentPage/output.ts b/server/routers/contentstack/contentPage/output.ts
index 6b0baa553..44e786b28 100644
--- a/server/routers/contentstack/contentPage/output.ts
+++ b/server/routers/contentstack/contentPage/output.ts
@@ -34,14 +34,23 @@ import {
   contentRefsSchema as sidebarContentRefsSchema,
   contentSchema as sidebarContentSchema,
 } from "../schemas/sidebar/content"
-import { contentCardsSchema } from "../schemas/sidebar/contentCard"
+import {
+  contentCardRefschema,
+  contentCardsSchema,
+} from "../schemas/sidebar/contentCard"
 import { dynamicContentSchema as sidebarDynamicContentSchema } from "../schemas/sidebar/dynamicContent"
 import {
   joinLoyaltyContactRefsSchema,
   joinLoyaltyContactSchema,
 } from "../schemas/sidebar/joinLoyaltyContact"
-import { quickLinksSchema } from "../schemas/sidebar/quickLinks"
-import { scriptedCardsSchema } from "../schemas/sidebar/scriptedCard"
+import {
+  quickLinksRefschema,
+  quickLinksSchema,
+} from "../schemas/sidebar/quickLinks"
+import {
+  scriptedCardRefschema,
+  scriptedCardsSchema,
+} from "../schemas/sidebar/scriptedCard"
 import { systemSchema } from "../schemas/system"
 
 import { ContentPageEnum } from "@/types/enums/contentPage"
@@ -254,6 +263,12 @@ const contentPageSidebarContentRef = z
   })
   .merge(sidebarContentRefsSchema)
 
+const contentPageSidebarContentCardRef = z
+  .object({
+    __typename: z.literal(ContentPageEnum.ContentStack.sidebar.ContentCard),
+  })
+  .merge(contentCardRefschema)
+
 const contentPageSidebarJoinLoyaltyContactRef = z
   .object({
     __typename: z.literal(
@@ -262,9 +277,24 @@ const contentPageSidebarJoinLoyaltyContactRef = z
   })
   .merge(joinLoyaltyContactRefsSchema)
 
+const contentPageSidebarScriptedCardRef = z
+  .object({
+    __typename: z.literal(ContentPageEnum.ContentStack.sidebar.ScriptedCard),
+  })
+  .merge(scriptedCardRefschema)
+
+const contentPageSidebarQuickLinksRef = z
+  .object({
+    __typename: z.literal(ContentPageEnum.ContentStack.sidebar.QuickLinks),
+  })
+  .merge(quickLinksRefschema)
+
 const contentPageSidebarRefsItem = z.discriminatedUnion("__typename", [
   contentPageSidebarContentRef,
+  contentPageSidebarContentCardRef,
   contentPageSidebarJoinLoyaltyContactRef,
+  contentPageSidebarScriptedCardRef,
+  contentPageSidebarQuickLinksRef,
 ])
 
 const contentPageHeaderRefs = z.object({
diff --git a/server/routers/contentstack/schemas/sidebar/scriptedCard.ts b/server/routers/contentstack/schemas/sidebar/scriptedCard.ts
index eddd2cd40..7878d1551 100644
--- a/server/routers/contentstack/schemas/sidebar/scriptedCard.ts
+++ b/server/routers/contentstack/schemas/sidebar/scriptedCard.ts
@@ -43,7 +43,7 @@ export const scriptedCardsSchema = z.object({
 })
 
 export const scriptedCardRefschema = z.object({
-  cripted_card: z.object({
+  scripted_card: z.object({
     scripted_cardConnection: z.object({
       edges: z.array(
         z.object({

From a5a3bfa857f1de7a7874e1c93bbfdfbfc29cf56a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 16 Oct 2024 08:31:13 +0200
Subject: [PATCH 30/69] fix(SW-438): fix refs

---
 components/Sidebar/index.tsx                  |  5 +---
 .../routers/contentstack/contentPage/utils.ts | 17 ++++++++++--
 .../schemas/sidebar/contentCard.ts            | 27 ++++++++++++-------
 .../schemas/sidebar/quickLinks.ts             |  4 +--
 .../schemas/sidebar/scriptedCard.ts           | 27 +++++++++++++------
 5 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index 155af47ba..36774a205 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -30,15 +30,12 @@ export default function Sidebar({ blocks }: SidebarProps) {
               </section>
             )
           case SidebarEnums.blocks.ContentCard:
-            console.log("EEE", block.content_card)
             return (
               <TeaserCard
                 {...block.content_card}
                 title={block.content_card.heading}
                 description={block.content_card.body_text}
-                style={
-                  block.content_card.theme === "gray" ? "default" : "featured"
-                }
+                style={block.content_card.theme}
               />
             )
 
diff --git a/server/routers/contentstack/contentPage/utils.ts b/server/routers/contentstack/contentPage/utils.ts
index 30a947717..755d8d61b 100644
--- a/server/routers/contentstack/contentPage/utils.ts
+++ b/server/routers/contentstack/contentPage/utils.ts
@@ -171,17 +171,30 @@ export function getConnections({ content_page }: ContentPageRefs) {
             connections.push(...block.content)
           }
           break
-
+        case ContentPageEnum.ContentStack.sidebar.ContentCard:
+          if (block.content_card?.length) {
+            connections.push(...block.content_card)
+          }
+          break
         case ContentPageEnum.ContentStack.sidebar.JoinLoyaltyContact:
           if (block.join_loyalty_contact?.button) {
             connections.push(block.join_loyalty_contact.button)
           }
           break
+        case ContentPageEnum.ContentStack.sidebar.ScriptedCard:
+          if (block.scripted_card?.length) {
+            connections.push(...block.scripted_card)
+          }
+          break
+        case ContentPageEnum.ContentStack.sidebar.QuickLinks:
+          if (block.shortcuts.shortcuts.length) {
+            connections.push(...block.shortcuts.shortcuts)
+          }
+          break
         default:
           break
       }
     })
   }
-
   return connections
 }
diff --git a/server/routers/contentstack/schemas/sidebar/contentCard.ts b/server/routers/contentstack/schemas/sidebar/contentCard.ts
index 4d415eece..d52a0c96f 100644
--- a/server/routers/contentstack/schemas/sidebar/contentCard.ts
+++ b/server/routers/contentstack/schemas/sidebar/contentCard.ts
@@ -3,6 +3,7 @@ import { z } from "zod"
 import {
   teaserCardBlockRefsSchema,
   teaserCardBlockSchema,
+  transformCardBlockRefs,
   transformTeaserCardBlock,
 } from "../blocks/cardsGrid"
 
@@ -15,7 +16,7 @@ export const contentCardsSchema = z.object({
     .default(SidebarEnums.blocks.ContentCard),
   content_card: z
     .object({
-      theme: z.enum(["gray", "white"]).nullable().default("gray"),
+      theme: z.enum(["featured", "default"]).nullable().default("default"),
       content_cardConnection: z.object({
         edges: z.array(
           z.object({
@@ -33,13 +34,21 @@ export const contentCardsSchema = z.object({
 })
 
 export const contentCardRefschema = z.object({
-  content_card: z.object({
-    content_cardConnection: z.object({
-      edges: z.array(
-        z.object({
-          node: teaserCardBlockRefsSchema,
-        })
-      ),
+  content_card: z
+    .object({
+      content_cardConnection: z.object({
+        edges: z.array(
+          z.object({
+            node: teaserCardBlockRefsSchema,
+          })
+        ),
+      }),
+    })
+    .transform((data) => {
+      let card = null
+      if (data.content_cardConnection.edges.length) {
+        card = transformCardBlockRefs(data.content_cardConnection.edges[0].node)
+      }
+      return card
     }),
-  }),
 })
diff --git a/server/routers/contentstack/schemas/sidebar/quickLinks.ts b/server/routers/contentstack/schemas/sidebar/quickLinks.ts
index fe673b7a3..c8bc61b78 100644
--- a/server/routers/contentstack/schemas/sidebar/quickLinks.ts
+++ b/server/routers/contentstack/schemas/sidebar/quickLinks.ts
@@ -13,6 +13,4 @@ export const quickLinksSchema = z
   })
   .merge(shortcutsSchema)
 
-export const quickLinksSRefschema = z.object({
-  shortcutsRefsSchema,
-})
+export const quickLinksRefschema = shortcutsRefsSchema
diff --git a/server/routers/contentstack/schemas/sidebar/scriptedCard.ts b/server/routers/contentstack/schemas/sidebar/scriptedCard.ts
index 7878d1551..0579a4be4 100644
--- a/server/routers/contentstack/schemas/sidebar/scriptedCard.ts
+++ b/server/routers/contentstack/schemas/sidebar/scriptedCard.ts
@@ -4,6 +4,7 @@ import {
   cardBlockRefsSchema,
   cardBlockSchema,
   transformCardBlock,
+  transformCardBlockRefs,
 } from "../blocks/cardsGrid"
 
 import { SidebarEnums } from "@/types/enums/sidebar"
@@ -43,13 +44,23 @@ export const scriptedCardsSchema = z.object({
 })
 
 export const scriptedCardRefschema = z.object({
-  scripted_card: z.object({
-    scripted_cardConnection: z.object({
-      edges: z.array(
-        z.object({
-          node: cardBlockRefsSchema,
-        })
-      ),
+  scripted_card: z
+    .object({
+      scripted_cardConnection: z.object({
+        edges: z.array(
+          z.object({
+            node: cardBlockRefsSchema,
+          })
+        ),
+      }),
+    })
+    .transform((data) => {
+      let card = null
+      if (data.scripted_cardConnection.edges.length) {
+        card = transformCardBlockRefs(
+          data.scripted_cardConnection.edges[0].node
+        )
+      }
+      return card
     }),
-  }),
 })

From 76063e17573b1d64d83b21f368d1eaec1c3348f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 16 Oct 2024 08:50:26 +0200
Subject: [PATCH 31/69] fix(SW-438): fix problem with type for quick links

---
 components/Sidebar/index.tsx                      |  5 ++---
 .../contentstack/schemas/blocks/shortcuts.ts      | 15 ++++++++++-----
 .../contentstack/schemas/sidebar/quickLinks.ts    |  4 ++--
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index 36774a205..6154e7185 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -63,9 +63,8 @@ export default function Sidebar({ blocks }: SidebarProps) {
               />
             )
 
-          /*case SidebarEnums.blocks.Shortcuts:
-            console.log("SSS", block)
-            return <ShortcutsList {...block.shortcuts} />*/
+          case SidebarEnums.blocks.Shortcuts:
+            return <ShortcutsList {...block.shortcuts} />
 
           default:
             return null
diff --git a/server/routers/contentstack/schemas/blocks/shortcuts.ts b/server/routers/contentstack/schemas/blocks/shortcuts.ts
index 5ceadf45a..3f08ff665 100644
--- a/server/routers/contentstack/schemas/blocks/shortcuts.ts
+++ b/server/routers/contentstack/schemas/blocks/shortcuts.ts
@@ -4,11 +4,7 @@ import * as pageLinks from "@/server/routers/contentstack/schemas/pageLinks"
 
 import { BlocksEnums } from "@/types/enums/blocks"
 
-export const shortcutsSchema = z.object({
-  typename: z
-    .literal(BlocksEnums.block.Shortcuts)
-    .optional()
-    .default(BlocksEnums.block.Shortcuts),
+export const shortcutsBlockSchema = z.object({
   shortcuts: z
     .object({
       subtitle: z.string().nullable(),
@@ -62,6 +58,15 @@ export const shortcutsSchema = z.object({
     }),
 })
 
+export const shortcutsSchema = z
+  .object({
+    typename: z
+      .literal(BlocksEnums.block.Shortcuts)
+      .optional()
+      .default(BlocksEnums.block.Shortcuts),
+  })
+  .merge(shortcutsBlockSchema)
+
 export const shortcutsRefsSchema = z.object({
   shortcuts: z.object({
     shortcuts: z
diff --git a/server/routers/contentstack/schemas/sidebar/quickLinks.ts b/server/routers/contentstack/schemas/sidebar/quickLinks.ts
index c8bc61b78..c706239dd 100644
--- a/server/routers/contentstack/schemas/sidebar/quickLinks.ts
+++ b/server/routers/contentstack/schemas/sidebar/quickLinks.ts
@@ -1,6 +1,6 @@
 import { z } from "zod"
 
-import { shortcutsRefsSchema, shortcutsSchema } from "../blocks/shortcuts"
+import { shortcutsBlockSchema, shortcutsRefsSchema } from "../blocks/shortcuts"
 
 import { SidebarEnums } from "@/types/enums/sidebar"
 
@@ -11,6 +11,6 @@ export const quickLinksSchema = z
       .optional()
       .default(SidebarEnums.blocks.Shortcuts),
   })
-  .merge(shortcutsSchema)
+  .merge(shortcutsBlockSchema)
 
 export const quickLinksRefschema = shortcutsRefsSchema

From 8eb822da168ad33cb4eeb23926850afbbbcf073d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 16 Oct 2024 09:43:32 +0200
Subject: [PATCH 32/69] refactor(SW-438): update namings

---
 components/Sidebar/index.tsx                              | 2 +-
 server/routers/contentstack/schemas/sidebar/quickLinks.ts | 4 ++--
 types/enums/sidebar.ts                                    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index 6154e7185..e519dd38a 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -63,7 +63,7 @@ export default function Sidebar({ blocks }: SidebarProps) {
               />
             )
 
-          case SidebarEnums.blocks.Shortcuts:
+          case SidebarEnums.blocks.QuickLinks:
             return <ShortcutsList {...block.shortcuts} />
 
           default:
diff --git a/server/routers/contentstack/schemas/sidebar/quickLinks.ts b/server/routers/contentstack/schemas/sidebar/quickLinks.ts
index c706239dd..0ea77453e 100644
--- a/server/routers/contentstack/schemas/sidebar/quickLinks.ts
+++ b/server/routers/contentstack/schemas/sidebar/quickLinks.ts
@@ -7,9 +7,9 @@ import { SidebarEnums } from "@/types/enums/sidebar"
 export const quickLinksSchema = z
   .object({
     typename: z
-      .literal(SidebarEnums.blocks.Shortcuts)
+      .literal(SidebarEnums.blocks.QuickLinks)
       .optional()
-      .default(SidebarEnums.blocks.Shortcuts),
+      .default(SidebarEnums.blocks.QuickLinks),
   })
   .merge(shortcutsBlockSchema)
 
diff --git a/types/enums/sidebar.ts b/types/enums/sidebar.ts
index fd6de1838..adb629a24 100644
--- a/types/enums/sidebar.ts
+++ b/types/enums/sidebar.ts
@@ -5,6 +5,6 @@ export namespace SidebarEnums {
     DynamicContent = "DynamicContent",
     JoinLoyaltyContact = "JoinLoyaltyContact",
     ScriptedCard = "ScriptedCard",
-    Shortcuts = "Shortcuts",
+    QuickLinks = "QuickLinks",
   }
 }

From df177986625f07d737a260452b2d0d4c38ef3a5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 16 Oct 2024 10:21:34 +0200
Subject: [PATCH 33/69] refactor(SW-438): change name to teasercard

---
 components/Sidebar/index.tsx                  | 20 ++++----
 ...ContentCard.graphql => TeaserCard.graphql} | 12 ++---
 .../Query/ContentPage/ContentPage.graphql     |  6 +--
 .../contentstack/contentPage/output.ts        | 48 +++++++++----------
 .../routers/contentstack/contentPage/utils.ts | 10 ++--
 .../sidebar/{contentCard.ts => teaserCard.ts} | 22 ++++-----
 types/enums/contentPage.ts                    |  2 +-
 types/enums/sidebar.ts                        |  2 +-
 8 files changed, 60 insertions(+), 62 deletions(-)
 rename lib/graphql/Fragments/Sidebar/{ContentCard.graphql => TeaserCard.graphql} (70%)
 rename server/routers/contentstack/schemas/sidebar/{contentCard.ts => teaserCard.ts} (60%)

diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index e519dd38a..c548da6a4 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -29,16 +29,6 @@ export default function Sidebar({ blocks }: SidebarProps) {
                 />
               </section>
             )
-          case SidebarEnums.blocks.ContentCard:
-            return (
-              <TeaserCard
-                {...block.content_card}
-                title={block.content_card.heading}
-                description={block.content_card.body_text}
-                style={block.content_card.theme}
-              />
-            )
-
           case SidebarEnums.blocks.DynamicContent:
             switch (block.dynamic_content.component) {
               case DynamicContentEnum.Sidebar.components.my_pages_navigation:
@@ -62,7 +52,15 @@ export default function Sidebar({ blocks }: SidebarProps) {
                 theme={block.scripted_card.theme ?? "image"}
               />
             )
-
+          case SidebarEnums.blocks.TeaserCard:
+            return (
+              <TeaserCard
+                {...block.teaser_card}
+                title={block.teaser_card.heading}
+                description={block.teaser_card.body_text}
+                style={block.teaser_card.theme}
+              />
+            )
           case SidebarEnums.blocks.QuickLinks:
             return <ShortcutsList {...block.shortcuts} />
 
diff --git a/lib/graphql/Fragments/Sidebar/ContentCard.graphql b/lib/graphql/Fragments/Sidebar/TeaserCard.graphql
similarity index 70%
rename from lib/graphql/Fragments/Sidebar/ContentCard.graphql
rename to lib/graphql/Fragments/Sidebar/TeaserCard.graphql
index 2aab57cad..446c7e6d7 100644
--- a/lib/graphql/Fragments/Sidebar/ContentCard.graphql
+++ b/lib/graphql/Fragments/Sidebar/TeaserCard.graphql
@@ -9,11 +9,11 @@
 #import "../Blocks/TeaserCard.graphql"
 #import "../Blocks/Refs/TeaserCard.graphql"
 
-fragment ContentCardSidebar_ContentPage on ContentPageSidebarContentCard {
+fragment TeaserCardSidebar_ContentPage on ContentPageSidebarTeaserCard {
   __typename
-  content_card {
+  teaser_card {
     theme
-    content_cardConnection {
+    teaser_cardConnection {
       edges {
         node {
           __typename
@@ -24,9 +24,9 @@ fragment ContentCardSidebar_ContentPage on ContentPageSidebarContentCard {
   }
 }
 
-fragment ContentCardSidebar_ContentPageRefs on ContentPageSidebarContentCard {
-  content_card {
-    content_cardConnection {
+fragment TeaserCardSidebar_ContentPageRefs on ContentPageSidebarTeaserCard {
+  teaser_card {
+    teaser_cardConnection {
       edges {
         node {
           __typename
diff --git a/lib/graphql/Query/ContentPage/ContentPage.graphql b/lib/graphql/Query/ContentPage/ContentPage.graphql
index e8ca9d5a4..63e311c31 100644
--- a/lib/graphql/Query/ContentPage/ContentPage.graphql
+++ b/lib/graphql/Query/ContentPage/ContentPage.graphql
@@ -13,7 +13,7 @@
 #import "../../Fragments/Sidebar/Content.graphql"
 #import "../../Fragments/Sidebar/DynamicContent.graphql"
 #import "../../Fragments/Sidebar/JoinLoyaltyContact.graphql"
-#import "../../Fragments/Sidebar/ContentCard.graphql"
+#import "../../Fragments/Sidebar/TeaserCard.graphql"
 #import "../../Fragments/Sidebar/ScriptedCard.graphql"
 #import "../../Fragments/Sidebar/QuickLinks.graphql"
 
@@ -31,8 +31,8 @@ query GetContentPage($locale: String!, $uid: String!) {
       ...ContentSidebar_ContentPage
       ...DynamicContentSidebar_ContentPage
       ...JoinLoyaltyContactSidebar_ContentPage
-      ...ContentCardSidebar_ContentPage
       ...ScriptedCardSidebar_ContentPage
+      ...TeaserCardSidebar_ContentPage
       ...QuickLinksSidebar_ContentPage
     }
     system {
@@ -96,9 +96,9 @@ query GetContentPageRefs($locale: String!, $uid: String!) {
     sidebar {
       __typename
       ...ContentSidebar_ContentPageRefs
-      ...ContentCardSidebar_ContentPageRefs
       ...JoinLoyaltyContactSidebar_ContentPageRefs
       ...ScriptedCardSidebar_ContentPageRefs
+      ...TeaserCardSidebar_ContentPageRefs
       ...QuickLinksSidebar_ContentPageRefs
     }
     system {
diff --git a/server/routers/contentstack/contentPage/output.ts b/server/routers/contentstack/contentPage/output.ts
index 44e786b28..d4289cc1c 100644
--- a/server/routers/contentstack/contentPage/output.ts
+++ b/server/routers/contentstack/contentPage/output.ts
@@ -34,10 +34,6 @@ import {
   contentRefsSchema as sidebarContentRefsSchema,
   contentSchema as sidebarContentSchema,
 } from "../schemas/sidebar/content"
-import {
-  contentCardRefschema,
-  contentCardsSchema,
-} from "../schemas/sidebar/contentCard"
 import { dynamicContentSchema as sidebarDynamicContentSchema } from "../schemas/sidebar/dynamicContent"
 import {
   joinLoyaltyContactRefsSchema,
@@ -51,6 +47,10 @@ import {
   scriptedCardRefschema,
   scriptedCardsSchema,
 } from "../schemas/sidebar/scriptedCard"
+import {
+  teaserCardRefschema,
+  teaserCardsSchema,
+} from "../schemas/sidebar/teaserCard"
 import { systemSchema } from "../schemas/system"
 
 import { ContentPageEnum } from "@/types/enums/contentPage"
@@ -134,30 +134,30 @@ export const contentPageJoinLoyaltyContact = z
   })
   .merge(joinLoyaltyContactSchema)
 
-export const contentPageSidebarQuicklinks = z
-  .object({
-    __typename: z.literal(ContentPageEnum.ContentStack.sidebar.QuickLinks),
-  })
-  .merge(quickLinksSchema)
-
-export const contentPageSidebarContentCard = z
-  .object({
-    __typename: z.literal(ContentPageEnum.ContentStack.sidebar.ContentCard),
-  })
-  .merge(contentCardsSchema)
-
 export const contentPageSidebarScriptedCard = z
   .object({
     __typename: z.literal(ContentPageEnum.ContentStack.sidebar.ScriptedCard),
   })
   .merge(scriptedCardsSchema)
 
+export const contentPageSidebarTeaserCard = z
+  .object({
+    __typename: z.literal(ContentPageEnum.ContentStack.sidebar.TeaserCard),
+  })
+  .merge(teaserCardsSchema)
+
+export const contentPageSidebarQuicklinks = z
+  .object({
+    __typename: z.literal(ContentPageEnum.ContentStack.sidebar.QuickLinks),
+  })
+  .merge(quickLinksSchema)
+
 export const sidebarSchema = z.discriminatedUnion("__typename", [
   contentPageSidebarContent,
-  contentPageSidebarContentCard,
   contentPageSidebarDynamicContent,
   contentPageJoinLoyaltyContact,
   contentPageSidebarScriptedCard,
+  contentPageSidebarTeaserCard,
   contentPageSidebarQuicklinks,
 ])
 
@@ -263,12 +263,6 @@ const contentPageSidebarContentRef = z
   })
   .merge(sidebarContentRefsSchema)
 
-const contentPageSidebarContentCardRef = z
-  .object({
-    __typename: z.literal(ContentPageEnum.ContentStack.sidebar.ContentCard),
-  })
-  .merge(contentCardRefschema)
-
 const contentPageSidebarJoinLoyaltyContactRef = z
   .object({
     __typename: z.literal(
@@ -283,6 +277,12 @@ const contentPageSidebarScriptedCardRef = z
   })
   .merge(scriptedCardRefschema)
 
+const contentPageSidebarTeaserCardRef = z
+  .object({
+    __typename: z.literal(ContentPageEnum.ContentStack.sidebar.TeaserCard),
+  })
+  .merge(teaserCardRefschema)
+
 const contentPageSidebarQuickLinksRef = z
   .object({
     __typename: z.literal(ContentPageEnum.ContentStack.sidebar.QuickLinks),
@@ -291,9 +291,9 @@ const contentPageSidebarQuickLinksRef = z
 
 const contentPageSidebarRefsItem = z.discriminatedUnion("__typename", [
   contentPageSidebarContentRef,
-  contentPageSidebarContentCardRef,
   contentPageSidebarJoinLoyaltyContactRef,
   contentPageSidebarScriptedCardRef,
+  contentPageSidebarTeaserCardRef,
   contentPageSidebarQuickLinksRef,
 ])
 
diff --git a/server/routers/contentstack/contentPage/utils.ts b/server/routers/contentstack/contentPage/utils.ts
index 755d8d61b..cf46dd879 100644
--- a/server/routers/contentstack/contentPage/utils.ts
+++ b/server/routers/contentstack/contentPage/utils.ts
@@ -171,11 +171,6 @@ export function getConnections({ content_page }: ContentPageRefs) {
             connections.push(...block.content)
           }
           break
-        case ContentPageEnum.ContentStack.sidebar.ContentCard:
-          if (block.content_card?.length) {
-            connections.push(...block.content_card)
-          }
-          break
         case ContentPageEnum.ContentStack.sidebar.JoinLoyaltyContact:
           if (block.join_loyalty_contact?.button) {
             connections.push(block.join_loyalty_contact.button)
@@ -186,6 +181,11 @@ export function getConnections({ content_page }: ContentPageRefs) {
             connections.push(...block.scripted_card)
           }
           break
+        case ContentPageEnum.ContentStack.sidebar.TeaserCard:
+          if (block.teaser_card?.length) {
+            connections.push(...block.teaser_card)
+          }
+          break
         case ContentPageEnum.ContentStack.sidebar.QuickLinks:
           if (block.shortcuts.shortcuts.length) {
             connections.push(...block.shortcuts.shortcuts)
diff --git a/server/routers/contentstack/schemas/sidebar/contentCard.ts b/server/routers/contentstack/schemas/sidebar/teaserCard.ts
similarity index 60%
rename from server/routers/contentstack/schemas/sidebar/contentCard.ts
rename to server/routers/contentstack/schemas/sidebar/teaserCard.ts
index d52a0c96f..94443cd75 100644
--- a/server/routers/contentstack/schemas/sidebar/contentCard.ts
+++ b/server/routers/contentstack/schemas/sidebar/teaserCard.ts
@@ -9,15 +9,15 @@ import {
 
 import { SidebarEnums } from "@/types/enums/sidebar"
 
-export const contentCardsSchema = z.object({
+export const teaserCardsSchema = z.object({
   typename: z
-    .literal(SidebarEnums.blocks.ContentCard)
+    .literal(SidebarEnums.blocks.TeaserCard)
     .optional()
-    .default(SidebarEnums.blocks.ContentCard),
-  content_card: z
+    .default(SidebarEnums.blocks.TeaserCard),
+  teaser_card: z
     .object({
       theme: z.enum(["featured", "default"]).nullable().default("default"),
-      content_cardConnection: z.object({
+      teaser_cardConnection: z.object({
         edges: z.array(
           z.object({
             node: teaserCardBlockSchema,
@@ -27,16 +27,16 @@ export const contentCardsSchema = z.object({
     })
     .transform((data) => {
       return {
-        ...transformTeaserCardBlock(data.content_cardConnection.edges[0].node),
+        ...transformTeaserCardBlock(data.teaser_cardConnection.edges[0].node),
         theme: data.theme,
       }
     }),
 })
 
-export const contentCardRefschema = z.object({
-  content_card: z
+export const teaserCardRefschema = z.object({
+  teaser_card: z
     .object({
-      content_cardConnection: z.object({
+      teaser_cardConnection: z.object({
         edges: z.array(
           z.object({
             node: teaserCardBlockRefsSchema,
@@ -46,8 +46,8 @@ export const contentCardRefschema = z.object({
     })
     .transform((data) => {
       let card = null
-      if (data.content_cardConnection.edges.length) {
-        card = transformCardBlockRefs(data.content_cardConnection.edges[0].node)
+      if (data.teaser_cardConnection.edges.length) {
+        card = transformCardBlockRefs(data.teaser_cardConnection.edges[0].node)
       }
       return card
     }),
diff --git a/types/enums/contentPage.ts b/types/enums/contentPage.ts
index 95b228da3..b00556a30 100644
--- a/types/enums/contentPage.ts
+++ b/types/enums/contentPage.ts
@@ -13,10 +13,10 @@ export namespace ContentPageEnum {
 
     export const enum sidebar {
       Content = "ContentPageSidebarContent",
-      ContentCard = "ContentPageSidebarContentCard",
       DynamicContent = "ContentPageSidebarDynamicContent",
       JoinLoyaltyContact = "ContentPageSidebarJoinLoyaltyContact",
       ScriptedCard = "ContentPageSidebarScriptedCard",
+      TeaserCard = "ContentPageSidebarTeaserCard",
       QuickLinks = "ContentPageSidebarShortcuts",
     }
   }
diff --git a/types/enums/sidebar.ts b/types/enums/sidebar.ts
index adb629a24..cac1165eb 100644
--- a/types/enums/sidebar.ts
+++ b/types/enums/sidebar.ts
@@ -1,10 +1,10 @@
 export namespace SidebarEnums {
   export const enum blocks {
     Content = "Content",
-    ContentCard = "ContentCard",
     DynamicContent = "DynamicContent",
     JoinLoyaltyContact = "JoinLoyaltyContact",
     ScriptedCard = "ScriptedCard",
+    TeaserCard = "TeaserCard",
     QuickLinks = "QuickLinks",
   }
 }

From 01b4b06fba4c6ae9f9a0506ba52e1a056e46a615 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 16 Oct 2024 10:45:45 +0200
Subject: [PATCH 34/69] fix(SW-438): align columns

---
 components/ContentType/ContentPage/contentPage.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/ContentType/ContentPage/contentPage.module.css b/components/ContentType/ContentPage/contentPage.module.css
index aa0036f83..c0c94aa42 100644
--- a/components/ContentType/ContentPage/contentPage.module.css
+++ b/components/ContentType/ContentPage/contentPage.module.css
@@ -37,6 +37,7 @@
   display: grid;
   padding: var(--Spacing-x4) var(--Spacing-x2) 0;
   gap: var(--Spacing-x4);
+  align-items: start;
 }
 
 .mainContent {

From 889b665abeacaf84a72f96337a526e3fada5bdf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Thu, 17 Oct 2024 14:12:49 +0200
Subject: [PATCH 35/69] fix(SW-438): always force one column shortcuts

---
 components/Sidebar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index c548da6a4..d705cf1f4 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -62,7 +62,7 @@ export default function Sidebar({ blocks }: SidebarProps) {
               />
             )
           case SidebarEnums.blocks.QuickLinks:
-            return <ShortcutsList {...block.shortcuts} />
+            return <ShortcutsList {...block.shortcuts} hasTwoColumns={false} />
 
           default:
             return null

From 26fb80dc0b50b69d1b8243a6b11baa9f083c81a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Fri, 18 Oct 2024 10:29:15 +0200
Subject: [PATCH 36/69] fix(SW-438): divide pageRefs query into two due to size
 limitations

---
 .../Query/ContentPage/ContentPage.graphql     | 25 +++++----
 .../routers/contentstack/contentPage/utils.ts | 51 +++++++++++++------
 2 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/lib/graphql/Query/ContentPage/ContentPage.graphql b/lib/graphql/Query/ContentPage/ContentPage.graphql
index 63e311c31..20f910aa9 100644
--- a/lib/graphql/Query/ContentPage/ContentPage.graphql
+++ b/lib/graphql/Query/ContentPage/ContentPage.graphql
@@ -83,16 +83,6 @@ query GetContentPageRefs($locale: String!, $uid: String!) {
         }
       }
     }
-    blocks {
-      __typename
-      ...Accordion_ContentPageRefs
-      ...CardsGrid_ContentPageRefs
-      ...Content_ContentPageRefs
-      ...DynamicContent_ContentPageRefs
-      ...Shortcuts_ContentPageRefs
-      ...TextCols_ContentPageRef
-      ...UspGrid_ContentPageRefs
-    }
     sidebar {
       __typename
       ...ContentSidebar_ContentPageRefs
@@ -107,6 +97,21 @@ query GetContentPageRefs($locale: String!, $uid: String!) {
   }
 }
 
+query GetContentPageBlocksRefs($locale: String!, $uid: String!) {
+  content_page(locale: $locale, uid: $uid) {
+    blocks {
+      __typename
+      ...Accordion_ContentPageRefs
+      ...CardsGrid_ContentPageRefs
+      ...Content_ContentPageRefs
+      ...DynamicContent_ContentPageRefs
+      ...Shortcuts_ContentPageRefs
+      ...TextCols_ContentPageRef
+      ...UspGrid_ContentPageRefs
+    }
+  }
+}
+
 query GetDaDeEnUrlsContentPage($uid: String!) {
   de: content_page(locale: "de", uid: $uid) {
     url
diff --git a/server/routers/contentstack/contentPage/utils.ts b/server/routers/contentstack/contentPage/utils.ts
index cf46dd879..6e41c92e4 100644
--- a/server/routers/contentstack/contentPage/utils.ts
+++ b/server/routers/contentstack/contentPage/utils.ts
@@ -1,7 +1,10 @@
 import { metrics } from "@opentelemetry/api"
 
 import { Lang } from "@/constants/languages"
-import { GetContentPageRefs } from "@/lib/graphql/Query/ContentPage/ContentPage.graphql"
+import {
+  GetContentPageBlocksRefs,
+  GetContentPageRefs,
+} from "@/lib/graphql/Query/ContentPage/ContentPage.graphql"
 import { request } from "@/lib/graphql/request"
 import { notFound } from "@/server/errors/trpc"
 
@@ -41,18 +44,30 @@ export async function fetchContentPageRefs(lang: Lang, uid: string) {
       query: { lang, uid },
     })
   )
-  const refsResponse = await request<GetContentPageRefsSchema>(
-    GetContentPageRefs,
-    { locale: lang, uid },
-    {
-      cache: "force-cache",
-      next: {
-        tags: [generateTag(lang, uid)],
-      },
-    }
-  )
-  if (!refsResponse.data) {
-    const notFoundError = notFound(refsResponse)
+  const [mainRefsResponse, blockRefsResponse] = await Promise.all([
+    request<GetContentPageRefsSchema>(
+      GetContentPageRefs,
+      { locale: lang, uid },
+      {
+        cache: "force-cache",
+        next: {
+          tags: [generateTag(lang, uid)],
+        },
+      }
+    ),
+    request<GetContentPageRefsSchema>(
+      GetContentPageBlocksRefs,
+      { locale: lang, uid },
+      {
+        cache: "force-cache",
+        next: {
+          tags: [generateTag(lang, uid)],
+        },
+      }
+    ),
+  ])
+  if (!mainRefsResponse.data) {
+    const notFoundError = notFound(mainRefsResponse)
     getContentPageRefsFailCounter.add(1, {
       lang,
       uid,
@@ -73,8 +88,14 @@ export async function fetchContentPageRefs(lang: Lang, uid: string) {
     )
     throw notFoundError
   }
-
-  return refsResponse.data
+  const responseData = {
+    ...mainRefsResponse.data,
+    content_page: {
+      ...mainRefsResponse.data.content_page,
+      blocks: blockRefsResponse.data.content_page.blocks,
+    },
+  }
+  return responseData
 }
 
 export function validateContentPageRefs(

From 3f3391a1f476bae130e629933afa57e6275d7f7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Mon, 21 Oct 2024 10:49:19 +0200
Subject: [PATCH 37/69] fix(SW-438): remove max-width fom TeaserCard

---
 components/TempDesignSystem/TeaserCard/teaserCard.module.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/TempDesignSystem/TeaserCard/teaserCard.module.css b/components/TempDesignSystem/TeaserCard/teaserCard.module.css
index e16d06c22..d1bc40165 100644
--- a/components/TempDesignSystem/TeaserCard/teaserCard.module.css
+++ b/components/TempDesignSystem/TeaserCard/teaserCard.module.css
@@ -2,7 +2,6 @@
   border-radius: var(--Corner-radius-Medium);
   display: flex;
   flex-direction: column;
-  max-width: 399px;
   overflow: hidden;
 }
 

From 046f5d6196e02b0e893f051d8f8b9ee1cfa762b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Mon, 21 Oct 2024 14:34:49 +0200
Subject: [PATCH 38/69] fix(SW-438): remove spreading

---
 components/Blocks/CardsGrid.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/Blocks/CardsGrid.tsx b/components/Blocks/CardsGrid.tsx
index 6c9d84b15..1c07b73ec 100644
--- a/components/Blocks/CardsGrid.tsx
+++ b/components/Blocks/CardsGrid.tsx
@@ -45,8 +45,10 @@ export default function CardsGrid({
                   theme={cards_grid.theme ?? "one"}
                   key={card.system.uid}
                   scriptedTopTitle={card.scripted_top_title}
+                  heading={card.heading}
                   bodyText={card.body_text}
-                  {...card}
+                  secondaryButton={card.secondaryButton}
+                  primaryButton={card.primaryButton}
                 />
               )
             case CardsGridEnum.cards.TeaserCard:
@@ -55,15 +57,21 @@ export default function CardsGrid({
                   key={card.system.uid}
                   title={card.heading}
                   description={card.body_text}
-                  {...card}
+                  primaryButton={card.primaryButton}
+                  secondaryButton={card.secondaryButton}
+                  sidePeekButton={card.sidePeekButton}
+                  sidePeekContent={card.sidePeekContent}
+                  image={card.image}
                 />
               )
             case CardsGridEnum.cards.LoyaltyCard:
               return (
                 <LoyaltyCard
                   key={card.system.uid}
+                  image={card.image}
+                  heading={card.heading}
                   bodyText={card.body_text}
-                  {...card}
+                  link={card.link}
                 />
               )
           }

From 6bd9dc5b67e355a8b0ce19ef11dff01da6c1aef0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Mon, 21 Oct 2024 14:42:25 +0200
Subject: [PATCH 39/69] fix(SW-428): remove spreading

---
 components/Sidebar/index.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index d705cf1f4..02e317e54 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -46,7 +46,10 @@ export default function Sidebar({ blocks }: SidebarProps) {
           case SidebarEnums.blocks.ScriptedCard:
             return (
               <Card
-                {...block.scripted_card}
+                key={block.scripted_card.system.uid}
+                heading={block.scripted_card.heading}
+                secondaryButton={block.scripted_card.secondaryButton}
+                primaryButton={block.scripted_card.primaryButton}
                 bodyText={block.scripted_card.body_text}
                 scriptedTopTitle={block.scripted_card.scripted_top_title}
                 theme={block.scripted_card.theme ?? "image"}
@@ -55,10 +58,15 @@ export default function Sidebar({ blocks }: SidebarProps) {
           case SidebarEnums.blocks.TeaserCard:
             return (
               <TeaserCard
-                {...block.teaser_card}
                 title={block.teaser_card.heading}
                 description={block.teaser_card.body_text}
                 style={block.teaser_card.theme}
+                key={block.teaser_card.system.uid}
+                primaryButton={block.teaser_card.primaryButton}
+                secondaryButton={block.teaser_card.secondaryButton}
+                sidePeekButton={block.teaser_card.sidePeekButton}
+                sidePeekContent={block.teaser_card.sidePeekContent}
+                image={block.teaser_card.image}
               />
             )
           case SidebarEnums.blocks.QuickLinks:

From ea3b86c33eeeac4bec871cebb49b098e357ea704 Mon Sep 17 00:00:00 2001
From: Bianca Widstam <bianca.widstam@scandichotels.com>
Date: Tue, 22 Oct 2024 06:18:40 +0000
Subject: [PATCH 40/69] feat/SW-451-ui-hotel-card (pull request #700)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Feat/SW-451 ui hotel card

* feat(SW-451): initial design

* feat(SW-451): add gallery icon and responsive  design for mobile

* feat(SW-451): refactor name, add routing to sidepeek

* feat(SW-451): add updated design

* feat(SW-451): add tripadvisor chip

* feat(SW-451): fix gallery icon

* feat(SW-451): fix additional falsy value check

* feat(SW-451): fix import type

* feat(SW-451): remove galleryIcon until image data exists

* feat(SW-451): fix css styling

* feat(SW-451): add new design for mobile

* feat(SW-451): add translation

* feat(SW-451): change css to mobile first

* feat(SW-451): change div to article


Approved-by: Matilda Landström
---
 .../hotelreservation/select-rate/page.tsx     |   4 +-
 .../HotelReservation/HotelCard/index.tsx      |   6 +-
 .../HotelReservation/ReadMore/index.tsx       |   9 +-
 .../HotelInfoCard/hotelInfoCard.module.css    | 116 ++++++++++++++++++
 .../SelectRate/HotelInfoCard/index.tsx        |  97 +++++++++++++++
 .../selectHotel/selectHotel.ts                |   1 +
 .../selectRate/hotelInfoCardProps.ts          |   5 +
 7 files changed, 231 insertions(+), 7 deletions(-)
 create mode 100644 components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css
 create mode 100644 components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
 create mode 100644 types/components/hotelReservation/selectRate/hotelInfoCardProps.ts

diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
index a9103d2c4..532228434 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
@@ -1,6 +1,7 @@
 import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
+import HotelInfoCard from "@/components/HotelReservation/SelectRate/HotelInfoCard"
 import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
 import getHotelReservationQueryParams from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import { setLang } from "@/i18n/serverContext"
@@ -50,9 +51,8 @@ export default async function SelectRatePage({
 
   return (
     <div>
+      <HotelInfoCard hotelData={hotelData} />
       <div className={styles.content}>
-        {/* TODO: Add Hotel Listing Card */}
-        <div>Hotel Listing Card TBI</div>
         <div className={styles.main}>
           <RoomSelection
             roomConfigurations={roomConfigurations}
diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx
index 99feb01ab..ea3eb29b7 100644
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -67,7 +67,11 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
             )
           })}
         </div>
-        <ReadMore hotelId={hotelData.operaId} hotel={hotelData} />
+        <ReadMore
+          label={intl.formatMessage({ id: "See hotel details" })}
+          hotelId={hotelData.operaId}
+          hotel={hotelData}
+        />
       </section>
       <section className={styles.prices}>
         <div>
diff --git a/components/HotelReservation/ReadMore/index.tsx b/components/HotelReservation/ReadMore/index.tsx
index 5814eae54..c8d39fcbe 100644
--- a/components/HotelReservation/ReadMore/index.tsx
+++ b/components/HotelReservation/ReadMore/index.tsx
@@ -34,7 +34,7 @@ function getAmenitiesList(hotel: Hotel) {
   return [...detailedAmenities, ...simpleAmenities]
 }
 
-export default function ReadMore({ hotel, hotelId }: ReadMoreProps) {
+export default function ReadMore({ label, hotel, hotelId }: ReadMoreProps) {
   const intl = useIntl()
 
   const [sidePeekOpen, setSidePeekOpen] = useState(false)
@@ -46,11 +46,12 @@ export default function ReadMore({ hotel, hotelId }: ReadMoreProps) {
         onPress={() => {
           setSidePeekOpen(true)
         }}
-        intent={"text"}
-        color="burgundy"
+        intent="text"
+        theme="base"
+        wrapping
         className={styles.detailsButton}
       >
-        {intl.formatMessage({ id: "See hotel details" })}
+        {label}
         <ChevronRightIcon color="burgundy" />
       </Button>
       <SidePeek
diff --git a/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css b/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css
new file mode 100644
index 000000000..1482bf4c9
--- /dev/null
+++ b/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css
@@ -0,0 +1,116 @@
+.container {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+}
+
+.wrapper {
+  display: flex;
+  margin: 0 auto;
+  max-width: var(--max-width-navigation);
+  position: relative;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.image {
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.imageWrapper {
+  position: relative;
+  overflow: hidden;
+  height: 200px;
+  max-width: 360px;
+  width: 100%;
+}
+
+.tripAdvisor {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  position: absolute;
+  left: var(--Spacing-x2);
+  top: var(--Spacing-x2);
+  padding: 0 var(--Spacing-x1);
+  border-radius: var(--Corner-radius-Small);
+}
+
+.hotelContent {
+  display: flex;
+  flex-direction: column;
+}
+
+.hotelInformation {
+  gap: var(--Spacing-x1);
+  width: min(607px, 100%);
+}
+
+.title {
+  margin-bottom: var(--Spacing-x1);
+}
+
+.body {
+  margin-top: var(--Spacing-x2);
+}
+
+.facilities {
+  padding: var(--Spacing-x3) 0 var(--Spacing-x-quarter);
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.facilityList {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--Spacing-x-one-and-half);
+  padding-bottom: var(--Spacing-x1);
+}
+
+.facilitiesItem {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+}
+
+.facilityName {
+  color: var(--UI-Text-Medium-contrast);
+}
+
+@media screen and (min-width: 1367px) {
+  .container {
+    padding: var(--Spacing-x4) var(--Spacing-x5);
+  }
+
+  .hotelContent {
+    gap: var(--Spacing-x6);
+  }
+
+  .hotelInformation {
+    padding-right: var(--Spacing-x3);
+  }
+
+  .wrapper {
+    gap: var(--Spacing-x3);
+    flex-direction: row;
+  }
+
+  .facilities {
+    padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x-half);
+  }
+
+  .facilityList {
+    gap: var(--Spacing-x1);
+    padding-bottom: var(--Spacing-x-half);
+  }
+  .facilityTitle {
+    display: none;
+  }
+  .hotelContent {
+    flex-direction: row;
+    align-items: center;
+  }
+  .imageWrapper {
+    align-self: center;
+  }
+}
diff --git a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
new file mode 100644
index 000000000..5e0a24623
--- /dev/null
+++ b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
@@ -0,0 +1,97 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
+import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
+import Image from "@/components/Image"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import ReadMore from "../../ReadMore"
+
+import styles from "./hotelInfoCard.module.css"
+
+import type { HotelInfoCardProps } from "@/types/components/hotelReservation/selectRate/hotelInfoCardProps"
+
+export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
+  const hotelAttributes = hotelData?.data.attributes
+  const intl = useIntl()
+
+  const sortedFacilities = hotelAttributes?.detailedFacilities
+    .sort((a, b) => b.sortOrder - a.sortOrder)
+    .slice(0, 5)
+
+  return (
+    <article className={styles.container}>
+      {hotelAttributes && (
+        <section className={styles.wrapper}>
+          <div className={styles.imageWrapper}>
+            <Image
+              src={hotelAttributes.hotelContent.images.imageSizes.medium}
+              alt={hotelAttributes.hotelContent.images.metaData.altText}
+              className={styles.image}
+              fill
+            />
+            {hotelAttributes.ratings?.tripAdvisor && (
+              <div className={styles.tripAdvisor}>
+                <TripAdvisorIcon color="burgundy" />
+                <Caption color="burgundy">
+                  {hotelAttributes.ratings.tripAdvisor.rating}
+                </Caption>
+              </div>
+            )}
+            {/* TODO: gallery icon and image carousel */}
+          </div>
+          <div className={styles.hotelContent}>
+            <div className={styles.hotelInformation}>
+              <Title
+                level="h3"
+                textTransform="uppercase"
+                className={styles.title}
+              >
+                {hotelAttributes.name}
+              </Title>
+              <Caption color="uiTextMediumContrast">
+                {`${hotelAttributes.address.streetAddress}, ${hotelAttributes.address.city} ∙ ${hotelAttributes.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
+              </Caption>
+              <Body color="uiTextHighContrast" className={styles.body}>
+                {hotelAttributes.hotelContent.texts.descriptions.medium}
+              </Body>
+            </div>
+            <Divider color="subtle" variant="vertical" />
+            <div className={styles.facilities}>
+              <div className={styles.facilityList}>
+                <Body textTransform="bold" className={styles.facilityTitle}>
+                  {intl.formatMessage({ id: "At the hotel" })}
+                </Body>
+                {sortedFacilities?.map((facility) => {
+                  const IconComponent = mapFacilityToIcon(facility.name)
+                  return (
+                    <div className={styles.facilitiesItem} key={facility.id}>
+                      {IconComponent && (
+                        <IconComponent
+                          className={styles.facilitiesIcon}
+                          color="grey80"
+                        />
+                      )}
+                      <Caption className={styles.facilityName}>
+                        {facility.name}
+                      </Caption>
+                    </div>
+                  )
+                })}
+              </div>
+              <ReadMore
+                label={intl.formatMessage({ id: "Show all amenities" })}
+                hotelId={hotelAttributes.operaId}
+                hotel={hotelAttributes}
+              />
+            </div>
+          </div>
+        </section>
+      )}
+    </article>
+  )
+}
diff --git a/types/components/hotelReservation/selectHotel/selectHotel.ts b/types/components/hotelReservation/selectHotel/selectHotel.ts
index 6d1cecfca..b43779714 100644
--- a/types/components/hotelReservation/selectHotel/selectHotel.ts
+++ b/types/components/hotelReservation/selectHotel/selectHotel.ts
@@ -12,6 +12,7 @@ export interface DetailedAmenity {
 }
 
 export interface ReadMoreProps {
+  label: string
   hotelId: string
   hotel: Hotel
 }
diff --git a/types/components/hotelReservation/selectRate/hotelInfoCardProps.ts b/types/components/hotelReservation/selectRate/hotelInfoCardProps.ts
new file mode 100644
index 000000000..0a3526167
--- /dev/null
+++ b/types/components/hotelReservation/selectRate/hotelInfoCardProps.ts
@@ -0,0 +1,5 @@
+import type { HotelData } from "@/types/hotel"
+
+export type HotelInfoCardProps = {
+  hotelData: HotelData | null
+}

From 8381862af8346af086341bac64c75d6ff041b132 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Tue, 22 Oct 2024 09:53:02 +0200
Subject: [PATCH 41/69] feat(SW-559): add ImageContainer to contentPage RTE

---
 lib/graphql/Fragments/Blocks/Content.graphql | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/graphql/Fragments/Blocks/Content.graphql b/lib/graphql/Fragments/Blocks/Content.graphql
index 56b39e34b..4a48f35f3 100644
--- a/lib/graphql/Fragments/Blocks/Content.graphql
+++ b/lib/graphql/Fragments/Blocks/Content.graphql
@@ -22,6 +22,7 @@ fragment Content_ContentPage on ContentPageBlocksContent {
             ...ContentPageLink
             ...HotelPageLink
             ...LoyaltyPageLink
+            ...ImageContainer
           }
         }
       }
@@ -41,6 +42,7 @@ fragment Content_ContentPageRefs on ContentPageBlocksContent {
             ...ContentPageRef
             ...HotelPageRef
             ...LoyaltyPageRef
+            ...ImageContainerRef
           }
         }
       }

From bcee55c359eb3df613d3c85634383feef5151d0d Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Tue, 22 Oct 2024 09:42:08 +0200
Subject: [PATCH 42/69] fix(SW-672): Added nullable and default values to
 schema to avoid validation issues from ContentStack with changed models

---
 .../HotelPage/TabNavigation/index.tsx         |  2 +-
 .../HotelPage/hotelPage.module.css            |  1 -
 server/routers/contentstack/base/output.ts    | 54 ++++++++++---------
 .../contentstack/schemas/blocks/hotelFaq.ts   |  5 +-
 4 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/components/ContentType/HotelPage/TabNavigation/index.tsx b/components/ContentType/HotelPage/TabNavigation/index.tsx
index 8e80459b4..6f8b29130 100644
--- a/components/ContentType/HotelPage/TabNavigation/index.tsx
+++ b/components/ContentType/HotelPage/TabNavigation/index.tsx
@@ -88,7 +88,7 @@ export default function TabNavigation({
               scroll={true}
               onClick={pauseScrollSpy}
             >
-              {intl.formatMessage({ id: link.text })}
+              {link.text}
             </Link>
           )
         })}
diff --git a/components/ContentType/HotelPage/hotelPage.module.css b/components/ContentType/HotelPage/hotelPage.module.css
index 09f900159..771c4e76e 100644
--- a/components/ContentType/HotelPage/hotelPage.module.css
+++ b/components/ContentType/HotelPage/hotelPage.module.css
@@ -11,7 +11,6 @@
     "mapContainer";
   margin: 0 auto;
   max-width: var(--max-width);
-  z-index: 0;
 }
 
 .hotelImages {
diff --git a/server/routers/contentstack/base/output.ts b/server/routers/contentstack/base/output.ts
index 85aa2651a..9fc8f3e53 100644
--- a/server/routers/contentstack/base/output.ts
+++ b/server/routers/contentstack/base/output.ts
@@ -369,16 +369,16 @@ export const validateFooterConfigSchema = z
     all_footer: z.object({
       items: z.array(
         z.object({
-          main_links: validateLinks,
+          main_links: validateLinks.default([]),
           app_downloads: z.object({
             title: z.string(),
-            links: validateLinksWithType,
+            links: validateLinksWithType.default([]),
           }),
-          secondary_links: validateSecondaryLinks,
+          secondary_links: validateSecondaryLinks.default([]),
           social_media: z.object({
-            links: validateLinksWithType,
+            links: validateLinksWithType.default([]),
           }),
-          tertiary_links: validateLinks,
+          tertiary_links: validateLinks.default([]),
         })
       ),
     }),
@@ -418,25 +418,31 @@ export const validateFooterRefConfigSchema = z.object({
     items: z
       .array(
         z.object({
-          main_links: z.array(
-            z.object({
-              pageConnection: pageConnectionRefs,
-            })
-          ),
-          secondary_links: z.array(
-            z.object({
-              links: z.array(
-                z.object({
-                  pageConnection: pageConnectionRefs,
-                })
-              ),
-            })
-          ),
-          tertiary_links: z.array(
-            z.object({
-              pageConnection: pageConnectionRefs,
-            })
-          ),
+          main_links: z
+            .array(
+              z.object({
+                pageConnection: pageConnectionRefs,
+              })
+            )
+            .nullable(),
+          secondary_links: z
+            .array(
+              z.object({
+                links: z.array(
+                  z.object({
+                    pageConnection: pageConnectionRefs,
+                  })
+                ),
+              })
+            )
+            .nullable(),
+          tertiary_links: z
+            .array(
+              z.object({
+                pageConnection: pageConnectionRefs,
+              })
+            )
+            .nullable(),
           system: systemSchema,
         })
       )
diff --git a/server/routers/contentstack/schemas/blocks/hotelFaq.ts b/server/routers/contentstack/schemas/blocks/hotelFaq.ts
index b6d4d42cf..aade71e3d 100644
--- a/server/routers/contentstack/schemas/blocks/hotelFaq.ts
+++ b/server/routers/contentstack/schemas/blocks/hotelFaq.ts
@@ -31,7 +31,8 @@ export const hotelFaqSchema = z
       .object({
         questions: accordionItemsSchema,
       })
-      .optional(),
+      .optional()
+      .nullable(),
   })
   .transform((data) => {
     const array = []
@@ -51,7 +52,7 @@ export const hotelFaqRefsSchema = z
       .optional()
       .default(HotelPageEnum.ContentStack.blocks.Faq),
     global_faqConnection: globalAccordionConnectionRefs.optional(),
-    specific_faq: specificAccordionConnectionRefs.optional(),
+    specific_faq: specificAccordionConnectionRefs.optional().nullable(),
   })
   .transform((data) => {
     const array = []

From e41bf86993a5f1ce494604d394e4a120ce042a60 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Wed, 16 Oct 2024 15:18:43 +0200
Subject: [PATCH 43/69] feat(SW-498): Added Alert component

---
 .../TempDesignSystem/Alert/alert.module.css   | 106 ++++++++++++++++++
 components/TempDesignSystem/Alert/alert.ts    |  16 +++
 components/TempDesignSystem/Alert/index.tsx   |  69 ++++++++++++
 components/TempDesignSystem/Alert/utils.ts    |  17 +++
 components/TempDesignSystem/Alert/variants.ts |  20 ++++
 types/trpc/routers/contentstack/siteConfig.ts |   1 +
 6 files changed, 229 insertions(+)
 create mode 100644 components/TempDesignSystem/Alert/alert.module.css
 create mode 100644 components/TempDesignSystem/Alert/alert.ts
 create mode 100644 components/TempDesignSystem/Alert/index.tsx
 create mode 100644 components/TempDesignSystem/Alert/utils.ts
 create mode 100644 components/TempDesignSystem/Alert/variants.ts

diff --git a/components/TempDesignSystem/Alert/alert.module.css b/components/TempDesignSystem/Alert/alert.module.css
new file mode 100644
index 000000000..f5ba2f58a
--- /dev/null
+++ b/components/TempDesignSystem/Alert/alert.module.css
@@ -0,0 +1,106 @@
+.alert {
+  display: flex;
+  gap: var(--Spacing-x2);
+  overflow: hidden;
+}
+
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2)
+    var(--Spacing-x-one-and-half) 0;
+  flex-grow: 1;
+}
+
+.textWrapper {
+  display: grid;
+  gap: var(--Spacing-x-half);
+  padding: var(--Spacing-x1) 0;
+}
+
+.sidepeekCta {
+  flex-shrink: 0;
+}
+
+.closeButton {
+  border-width: 0;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+/* Intent: inline */
+.inline {
+  border-radius: var(--Corner-radius-Large);
+  border: 1px solid var(--Base-Border-Subtle);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+}
+.inline .iconWrapper {
+  padding: var(--Spacing-x-one-and-half);
+}
+.inline.alarm .iconWrapper {
+  background-color: var(--Main-Red-70);
+}
+.inline.warning .iconWrapper {
+  background-color: var(--Main-Yellow-60);
+}
+.inline.info .iconWrapper {
+  background-color: var(--Scandic-Blue-70);
+}
+.inline .icon,
+.inline .icon * {
+  fill: var(--Base-Surface-Primary-light-Normal);
+}
+.inline .closeButton {
+  border-left: 1px solid var(--Base-Border-Subtle);
+  padding: var(--Spacing-x-one-and-half);
+}
+
+/* Intent: banner */
+.banner {
+  padding: 0 var(--Spacing-x5);
+  border-left-width: 6px;
+  border-left-style: solid;
+}
+.banner.alarm {
+  border-left-color: var(--Main-Red-70);
+  background-color: var(--Main-Red-00);
+}
+.banner.warning {
+  border-left-color: var(--Main-Yellow-60);
+  background-color: var(--Main-Yellow-00);
+}
+.banner.info {
+  border-left-color: var(--Scandic-Blue-70);
+  background-color: var(--Scandic-Blue-00);
+}
+.banner.alarm .icon,
+.banner.alarm .icon * {
+  fill: var(--Main-Red-70);
+}
+.banner.warning .icon,
+.banner.warning .icon * {
+  fill: var(--Main-Yellow-60);
+}
+.banner.info .icon,
+.banner.info .icon * {
+  fill: var(--Scandic-Blue-70);
+}
+
+.banner .closeButton {
+  align-self: center;
+  padding-left: var(--Spacing-x-one-and-half);
+}
diff --git a/components/TempDesignSystem/Alert/alert.ts b/components/TempDesignSystem/Alert/alert.ts
new file mode 100644
index 000000000..95fec9d08
--- /dev/null
+++ b/components/TempDesignSystem/Alert/alert.ts
@@ -0,0 +1,16 @@
+import { alertVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+import { AlertTypeEnum } from "@/types/enums/alert"
+import type { SidepeekContent } from "@/types/trpc/routers/contentstack/siteConfig"
+
+export interface AlertProps extends VariantProps<typeof alertVariants> {
+  className?: string
+  type: AlertTypeEnum
+  closeable?: boolean
+  heading?: string
+  text: string
+  sidepeekContent?: SidepeekContent | null
+  sidePeekCtaText?: string | null
+}
diff --git a/components/TempDesignSystem/Alert/index.tsx b/components/TempDesignSystem/Alert/index.tsx
new file mode 100644
index 000000000..57bd0c5c1
--- /dev/null
+++ b/components/TempDesignSystem/Alert/index.tsx
@@ -0,0 +1,69 @@
+import { ChevronRightIcon, CloseLargeIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import { getIntl } from "@/i18n"
+
+import { AlertProps } from "./alert"
+import { getIconByAlertType } from "./utils"
+import { alertVariants } from "./variants"
+
+import styles from "./alert.module.css"
+
+export default async function Alert({
+  className,
+  variant,
+  type,
+  heading,
+  text,
+  sidePeekCtaText,
+  sidepeekContent,
+  closeable = false,
+}: AlertProps) {
+  const classNames = alertVariants({
+    className,
+    variant,
+    type,
+  })
+  const intl = await getIntl()
+
+  const Icon = getIconByAlertType(type)
+
+  return (
+    <div className={classNames}>
+      <span className={styles.iconWrapper}>
+        <Icon className={styles.icon} width={24} height={24} />
+      </span>
+      <div className={styles.content}>
+        <div className={styles.textWrapper}>
+          {heading ? (
+            <Body className={styles.heading} textTransform="bold" asChild>
+              <h2>{heading}</h2>
+            </Body>
+          ) : null}
+          <Body className={styles.text}>{text}</Body>
+        </div>
+        {sidePeekCtaText ? (
+          <Button
+            theme="base"
+            variant="icon"
+            intent="text"
+            size="small"
+            wrapping
+            className={styles.sidepeekCta}
+          >
+            {sidePeekCtaText}
+            <ChevronRightIcon />
+          </Button>
+        ) : null}
+      </div>
+      {closeable ? (
+        <button
+          className={styles.closeButton}
+          aria-label={intl.formatMessage({ id: "Close" })}
+        >
+          <CloseLargeIcon />
+        </button>
+      ) : null}
+    </div>
+  )
+}
diff --git a/components/TempDesignSystem/Alert/utils.ts b/components/TempDesignSystem/Alert/utils.ts
new file mode 100644
index 000000000..06fc9bcfd
--- /dev/null
+++ b/components/TempDesignSystem/Alert/utils.ts
@@ -0,0 +1,17 @@
+import { InfoCircleIcon } from "@/components/Icons"
+import CrossCircleIcon from "@/components/Icons/CrossCircle"
+import WarningTriangleIcon from "@/components/Icons/WarningTriangle"
+
+import { AlertTypeEnum } from "@/types/enums/alert"
+
+export function getIconByAlertType(alertType: AlertTypeEnum) {
+  switch (alertType) {
+    case AlertTypeEnum.Alarm:
+      return CrossCircleIcon
+    case AlertTypeEnum.Warning:
+      return WarningTriangleIcon
+    case AlertTypeEnum.Info:
+    default:
+      return InfoCircleIcon
+  }
+}
diff --git a/components/TempDesignSystem/Alert/variants.ts b/components/TempDesignSystem/Alert/variants.ts
new file mode 100644
index 000000000..91087f17b
--- /dev/null
+++ b/components/TempDesignSystem/Alert/variants.ts
@@ -0,0 +1,20 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./alert.module.css"
+
+import { AlertTypeEnum } from "@/types/enums/alert"
+
+export const alertVariants = cva(styles.alert, {
+  variants: {
+    variant: {
+      inline: styles.inline,
+      banner: styles.banner,
+    },
+    type: {
+      [AlertTypeEnum.Info]: styles.info,
+      [AlertTypeEnum.Warning]: styles.warning,
+      [AlertTypeEnum.Alarm]: styles.alarm,
+    },
+  },
+  defaultVariants: {},
+})
diff --git a/types/trpc/routers/contentstack/siteConfig.ts b/types/trpc/routers/contentstack/siteConfig.ts
index 8dc553cb2..7c4160203 100644
--- a/types/trpc/routers/contentstack/siteConfig.ts
+++ b/types/trpc/routers/contentstack/siteConfig.ts
@@ -12,3 +12,4 @@ export type GetSiteConfigData = z.input<typeof siteConfigSchema>
 export type SiteConfig = z.output<typeof siteConfigSchema>
 
 export type Alert = z.output<typeof alertSchema>
+export type SidepeekContent = Alert["sidepeekContent"]

From db9f31e2c38e5b72f55de44bb4b40aadd62e0b87 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Thu, 17 Oct 2024 11:23:50 +0200
Subject: [PATCH 44/69] feat(SW-498): added sitewide alert

---
 .../(live)/@sitewidealert/[...paths]/page.tsx |  1 +
 .../[contentType]/[uid]/page.tsx              |  1 +
 app/[lang]/(live)/@sitewidealert/default.tsx  |  1 +
 .../my-pages/[...path]/page.tsx               |  1 +
 app/[lang]/(live)/@sitewidealert/page.tsx     | 17 ++++
 app/[lang]/(live)/layout.tsx                  |  3 +
 components/SitewideAlert/index.tsx            | 33 +++++++
 .../SitewideAlert/sitewideAlert.module.css    |  9 ++
 .../TempDesignSystem/Alert/Sidepeek/index.tsx | 49 +++++++++++
 .../Alert/Sidepeek/sidepeek.module.css        |  3 +
 .../Alert/Sidepeek/sidepeek.ts                |  6 ++
 .../TempDesignSystem/Alert/alert.module.css   | 77 ++++++++--------
 components/TempDesignSystem/Alert/alert.ts    | 12 ++-
 components/TempDesignSystem/Alert/index.tsx   | 87 ++++++++++---------
 components/TempDesignSystem/Alert/variants.ts |  5 +-
 lib/trpc/memoizedRequests/index.ts            |  4 +
 server/routers/contentstack/base/query.ts     |  2 +-
 17 files changed, 226 insertions(+), 85 deletions(-)
 create mode 100644 app/[lang]/(live)/@sitewidealert/[...paths]/page.tsx
 create mode 100644 app/[lang]/(live)/@sitewidealert/[contentType]/[uid]/page.tsx
 create mode 100644 app/[lang]/(live)/@sitewidealert/default.tsx
 create mode 100644 app/[lang]/(live)/@sitewidealert/my-pages/[...path]/page.tsx
 create mode 100644 app/[lang]/(live)/@sitewidealert/page.tsx
 create mode 100644 components/SitewideAlert/index.tsx
 create mode 100644 components/SitewideAlert/sitewideAlert.module.css
 create mode 100644 components/TempDesignSystem/Alert/Sidepeek/index.tsx
 create mode 100644 components/TempDesignSystem/Alert/Sidepeek/sidepeek.module.css
 create mode 100644 components/TempDesignSystem/Alert/Sidepeek/sidepeek.ts

diff --git a/app/[lang]/(live)/@sitewidealert/[...paths]/page.tsx b/app/[lang]/(live)/@sitewidealert/[...paths]/page.tsx
new file mode 100644
index 000000000..03a82e5f5
--- /dev/null
+++ b/app/[lang]/(live)/@sitewidealert/[...paths]/page.tsx
@@ -0,0 +1 @@
+export { default } from "../page"
diff --git a/app/[lang]/(live)/@sitewidealert/[contentType]/[uid]/page.tsx b/app/[lang]/(live)/@sitewidealert/[contentType]/[uid]/page.tsx
new file mode 100644
index 000000000..2ebaca014
--- /dev/null
+++ b/app/[lang]/(live)/@sitewidealert/[contentType]/[uid]/page.tsx
@@ -0,0 +1 @@
+export { default } from "../../page"
diff --git a/app/[lang]/(live)/@sitewidealert/default.tsx b/app/[lang]/(live)/@sitewidealert/default.tsx
new file mode 100644
index 000000000..83ec2818e
--- /dev/null
+++ b/app/[lang]/(live)/@sitewidealert/default.tsx
@@ -0,0 +1 @@
+export { default } from "./page"
diff --git a/app/[lang]/(live)/@sitewidealert/my-pages/[...path]/page.tsx b/app/[lang]/(live)/@sitewidealert/my-pages/[...path]/page.tsx
new file mode 100644
index 000000000..2ebaca014
--- /dev/null
+++ b/app/[lang]/(live)/@sitewidealert/my-pages/[...path]/page.tsx
@@ -0,0 +1 @@
+export { default } from "../../page"
diff --git a/app/[lang]/(live)/@sitewidealert/page.tsx b/app/[lang]/(live)/@sitewidealert/page.tsx
new file mode 100644
index 000000000..618f3b5cb
--- /dev/null
+++ b/app/[lang]/(live)/@sitewidealert/page.tsx
@@ -0,0 +1,17 @@
+import { Suspense } from "react"
+
+import SitewideAlert, { preload } from "@/components/SitewideAlert"
+import { setLang } from "@/i18n/serverContext"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default function SitewideAlertPage({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
+  preload()
+
+  return (
+    <Suspense>
+      <SitewideAlert />
+    </Suspense>
+  )
+}
diff --git a/app/[lang]/(live)/layout.tsx b/app/[lang]/(live)/layout.tsx
index 3704178c4..e1c63bbbc 100644
--- a/app/[lang]/(live)/layout.tsx
+++ b/app/[lang]/(live)/layout.tsx
@@ -22,12 +22,14 @@ export default async function RootLayout({
   children,
   footer,
   header,
+  sitewidealert,
   params,
 }: React.PropsWithChildren<
   LayoutArgs<LangParams> & {
     bookingwidget: React.ReactNode
     footer: React.ReactNode
     header: React.ReactNode
+    sitewidealert: React.ReactNode
   }
 >) {
   setLang(params.lang)
@@ -55,6 +57,7 @@ export default async function RootLayout({
       <body>
         <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
           <TrpcProvider>
+            {!env.HIDE_FOR_NEXT_RELEASE && <>{sitewidealert}</>}
             {header}
             {!env.HIDE_FOR_NEXT_RELEASE && <>{bookingwidget}</>}
             {children}
diff --git a/components/SitewideAlert/index.tsx b/components/SitewideAlert/index.tsx
new file mode 100644
index 000000000..2ce624119
--- /dev/null
+++ b/components/SitewideAlert/index.tsx
@@ -0,0 +1,33 @@
+import { getSiteConfig } from "@/lib/trpc/memoizedRequests"
+
+import Alert from "../TempDesignSystem/Alert"
+
+import styles from "./sitewideAlert.module.css"
+
+export function preload() {
+  void getSiteConfig()
+}
+
+export default async function SitewideAlert() {
+  const siteConfig = await getSiteConfig()
+
+  if (!siteConfig?.sitewideAlert) {
+    return null
+  }
+
+  const { sitewideAlert } = siteConfig
+  return (
+    <div className={`${styles.sitewideAlert} ${styles[sitewideAlert.type]}`}>
+      <Alert
+        variant="banner"
+        type={sitewideAlert.type}
+        link={sitewideAlert.link}
+        phoneContact={sitewideAlert.phoneContact}
+        sidepeekCtaText={sitewideAlert.sidepeekButton?.cta_text}
+        sidepeekContent={sitewideAlert.sidepeekContent}
+        heading={sitewideAlert.heading}
+        text={sitewideAlert.text}
+      />
+    </div>
+  )
+}
diff --git a/components/SitewideAlert/sitewideAlert.module.css b/components/SitewideAlert/sitewideAlert.module.css
new file mode 100644
index 000000000..f91bf3db5
--- /dev/null
+++ b/components/SitewideAlert/sitewideAlert.module.css
@@ -0,0 +1,9 @@
+.sitewideAlert {
+  width: 100%;
+}
+
+.alarm {
+  position: sticky;
+  top: 0;
+  z-index: calc(var(--header-z-index) + 1);
+}
diff --git a/components/TempDesignSystem/Alert/Sidepeek/index.tsx b/components/TempDesignSystem/Alert/Sidepeek/index.tsx
new file mode 100644
index 000000000..db69cf563
--- /dev/null
+++ b/components/TempDesignSystem/Alert/Sidepeek/index.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import { useState } from "react"
+
+import { ChevronRightIcon } from "@/components/Icons"
+import JsonToHtml from "@/components/JsonToHtml"
+import Button from "@/components/TempDesignSystem/Button"
+
+import SidePeek from "../../SidePeek"
+
+import styles from "./sidepeek.module.css"
+
+import type { AlertSidepeekProps } from "./sidepeek"
+
+export default function AlertSidepeek({
+  ctaText,
+  sidePeekContent,
+}: AlertSidepeekProps) {
+  const [sidePeekIsOpen, setSidePeekIsOpen] = useState(false)
+  const { heading, content } = sidePeekContent
+
+  return (
+    <div className={styles.alertSidepeek}>
+      <Button
+        onPress={() => setSidePeekIsOpen(true)}
+        theme="base"
+        variant="icon"
+        intent="text"
+        size="small"
+        wrapping
+      >
+        {ctaText}
+        <ChevronRightIcon />
+      </Button>
+      {sidePeekIsOpen ? (
+        <SidePeek
+          title={heading}
+          isOpen={sidePeekIsOpen}
+          handleClose={() => setSidePeekIsOpen(false)}
+        >
+          <JsonToHtml
+            nodes={content.json.children}
+            embeds={content.embedded_itemsConnection.edges}
+          />
+        </SidePeek>
+      ) : null}
+    </div>
+  )
+}
diff --git a/components/TempDesignSystem/Alert/Sidepeek/sidepeek.module.css b/components/TempDesignSystem/Alert/Sidepeek/sidepeek.module.css
new file mode 100644
index 000000000..fccd935aa
--- /dev/null
+++ b/components/TempDesignSystem/Alert/Sidepeek/sidepeek.module.css
@@ -0,0 +1,3 @@
+.alertSidepeek {
+  flex-shrink: 0;
+}
diff --git a/components/TempDesignSystem/Alert/Sidepeek/sidepeek.ts b/components/TempDesignSystem/Alert/Sidepeek/sidepeek.ts
new file mode 100644
index 000000000..acd7ce35a
--- /dev/null
+++ b/components/TempDesignSystem/Alert/Sidepeek/sidepeek.ts
@@ -0,0 +1,6 @@
+import type { SidepeekContent } from "@/types/trpc/routers/contentstack/siteConfig"
+
+export interface AlertSidepeekProps {
+  ctaText: string
+  sidePeekContent: NonNullable<SidepeekContent>
+}
diff --git a/components/TempDesignSystem/Alert/alert.module.css b/components/TempDesignSystem/Alert/alert.module.css
index f5ba2f58a..728f7d22d 100644
--- a/components/TempDesignSystem/Alert/alert.module.css
+++ b/components/TempDesignSystem/Alert/alert.module.css
@@ -1,6 +1,4 @@
 .alert {
-  display: flex;
-  gap: var(--Spacing-x2);
   overflow: hidden;
 }
 
@@ -12,34 +10,26 @@
 }
 
 .content {
+  width: 100%;
+  max-width: var(--max-width-navigation);
+  margin: 0 auto;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
   gap: var(--Spacing-x2);
-  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2)
-    var(--Spacing-x-one-and-half) 0;
+}
+
+.innerContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x2) 0;
   flex-grow: 1;
 }
 
 .textWrapper {
   display: grid;
   gap: var(--Spacing-x-half);
-  padding: var(--Spacing-x1) 0;
-}
-
-.sidepeekCta {
-  flex-shrink: 0;
-}
-
-.closeButton {
-  border-width: 0;
-  padding: 0;
-  margin: 0;
-  background-color: transparent;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  cursor: pointer;
 }
 
 /* Intent: inline */
@@ -48,59 +38,64 @@
   border: 1px solid var(--Base-Border-Subtle);
   background-color: var(--Base-Surface-Primary-light-Normal);
 }
+.inline .innerContent {
+  padding-right: var(--Spacing-x3);
+}
 .inline .iconWrapper {
   padding: var(--Spacing-x-one-and-half);
 }
 .inline.alarm .iconWrapper {
-  background-color: var(--Main-Red-70);
+  background-color: var(--UI-Semantic-Error);
 }
 .inline.warning .iconWrapper {
-  background-color: var(--Main-Yellow-60);
+  background-color: var(--UI-Semantic-Warning);
 }
 .inline.info .iconWrapper {
-  background-color: var(--Scandic-Blue-70);
+  background-color: var(--UI-Semantic-Information);
 }
 .inline .icon,
 .inline .icon * {
   fill: var(--Base-Surface-Primary-light-Normal);
 }
-.inline .closeButton {
-  border-left: 1px solid var(--Base-Border-Subtle);
-  padding: var(--Spacing-x-one-and-half);
-}
 
 /* Intent: banner */
 .banner {
-  padding: 0 var(--Spacing-x5);
+  padding: 0 var(--Spacing-x3);
   border-left-width: 6px;
   border-left-style: solid;
 }
 .banner.alarm {
-  border-left-color: var(--Main-Red-70);
-  background-color: var(--Main-Red-00);
+  border-left-color: var(--UI-Semantic-Error);
+  background-color: var(--Scandic-Red-00);
 }
 .banner.warning {
-  border-left-color: var(--Main-Yellow-60);
-  background-color: var(--Main-Yellow-00);
+  border-left-color: var(--UI-Semantic-Warning);
+  background-color: var(--Scandic-Yellow-00);
 }
 .banner.info {
-  border-left-color: var(--Scandic-Blue-70);
+  border-left-color: var(--UI-Semantic-Information);
   background-color: var(--Scandic-Blue-00);
 }
 .banner.alarm .icon,
 .banner.alarm .icon * {
-  fill: var(--Main-Red-70);
+  fill: var(--UI-Semantic-Error);
 }
 .banner.warning .icon,
 .banner.warning .icon * {
-  fill: var(--Main-Yellow-60);
+  fill: var(--UI-Semantic-Warning);
 }
 .banner.info .icon,
 .banner.info .icon * {
-  fill: var(--Scandic-Blue-70);
+  fill: var(--UI-Semantic-Information);
 }
 
-.banner .closeButton {
-  align-self: center;
-  padding-left: var(--Spacing-x-one-and-half);
+@media screen and (min-width: 768px) {
+  .banner {
+    padding: 0 var(--Spacing-x5);
+  }
+  .innerContent {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--Spacing-x2);
+  }
 }
diff --git a/components/TempDesignSystem/Alert/alert.ts b/components/TempDesignSystem/Alert/alert.ts
index 95fec9d08..20927d7fc 100644
--- a/components/TempDesignSystem/Alert/alert.ts
+++ b/components/TempDesignSystem/Alert/alert.ts
@@ -8,9 +8,17 @@ import type { SidepeekContent } from "@/types/trpc/routers/contentstack/siteConf
 export interface AlertProps extends VariantProps<typeof alertVariants> {
   className?: string
   type: AlertTypeEnum
-  closeable?: boolean
   heading?: string
   text: string
+  phoneContact?: {
+    displayText: string
+    phoneNumber?: string
+    footnote?: string | null
+  } | null
   sidepeekContent?: SidepeekContent | null
-  sidePeekCtaText?: string | null
+  sidepeekCtaText?: string | null
+  link?: {
+    url: string
+    title: string
+  } | null
 }
diff --git a/components/TempDesignSystem/Alert/index.tsx b/components/TempDesignSystem/Alert/index.tsx
index 57bd0c5c1..6499c7126 100644
--- a/components/TempDesignSystem/Alert/index.tsx
+++ b/components/TempDesignSystem/Alert/index.tsx
@@ -1,69 +1,76 @@
-import { ChevronRightIcon, CloseLargeIcon } from "@/components/Icons"
-import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import { getIntl } from "@/i18n"
 
-import { AlertProps } from "./alert"
+import Link from "../Link"
+import AlertSidepeek from "./Sidepeek"
 import { getIconByAlertType } from "./utils"
 import { alertVariants } from "./variants"
 
 import styles from "./alert.module.css"
 
-export default async function Alert({
+import type { AlertProps } from "./alert"
+
+export default function Alert({
   className,
   variant,
   type,
   heading,
   text,
-  sidePeekCtaText,
+  link,
+  phoneContact,
+  sidepeekCtaText,
   sidepeekContent,
-  closeable = false,
 }: AlertProps) {
   const classNames = alertVariants({
     className,
     variant,
     type,
   })
-  const intl = await getIntl()
-
   const Icon = getIconByAlertType(type)
 
   return (
-    <div className={classNames}>
-      <span className={styles.iconWrapper}>
-        <Icon className={styles.icon} width={24} height={24} />
-      </span>
+    <section className={classNames}>
       <div className={styles.content}>
-        <div className={styles.textWrapper}>
-          {heading ? (
-            <Body className={styles.heading} textTransform="bold" asChild>
-              <h2>{heading}</h2>
+        <span className={styles.iconWrapper}>
+          <Icon className={styles.icon} width={24} height={24} />
+        </span>
+        <div className={styles.innerContent}>
+          <div className={styles.textWrapper}>
+            {heading ? (
+              <Body className={styles.heading} textTransform="bold" asChild>
+                <h2>{heading}</h2>
+              </Body>
+            ) : null}
+            <Body className={styles.text}>
+              {text}
+              {phoneContact?.phoneNumber ? (
+                <>
+                  <span> {phoneContact.displayText} </span>
+                  <Link
+                    color="burgundy"
+                    href={`tel:${phoneContact.phoneNumber}`}
+                  >
+                    {phoneContact.phoneNumber}
+                  </Link>
+                  {phoneContact.footnote ? (
+                    <span>. ({phoneContact.footnote})</span>
+                  ) : null}
+                </>
+              ) : null}
             </Body>
+          </div>
+          {link ? (
+            <Link color="burgundy" href={link.url}>
+              {link.title}
+            </Link>
+          ) : null}
+          {!link && sidepeekCtaText && sidepeekContent ? (
+            <AlertSidepeek
+              ctaText={sidepeekCtaText}
+              sidePeekContent={sidepeekContent}
+            />
           ) : null}
-          <Body className={styles.text}>{text}</Body>
         </div>
-        {sidePeekCtaText ? (
-          <Button
-            theme="base"
-            variant="icon"
-            intent="text"
-            size="small"
-            wrapping
-            className={styles.sidepeekCta}
-          >
-            {sidePeekCtaText}
-            <ChevronRightIcon />
-          </Button>
-        ) : null}
       </div>
-      {closeable ? (
-        <button
-          className={styles.closeButton}
-          aria-label={intl.formatMessage({ id: "Close" })}
-        >
-          <CloseLargeIcon />
-        </button>
-      ) : null}
-    </div>
+    </section>
   )
 }
diff --git a/components/TempDesignSystem/Alert/variants.ts b/components/TempDesignSystem/Alert/variants.ts
index 91087f17b..7397ac1e9 100644
--- a/components/TempDesignSystem/Alert/variants.ts
+++ b/components/TempDesignSystem/Alert/variants.ts
@@ -16,5 +16,8 @@ export const alertVariants = cva(styles.alert, {
       [AlertTypeEnum.Alarm]: styles.alarm,
     },
   },
-  defaultVariants: {},
+  defaultVariants: {
+    variant: "inline",
+    type: AlertTypeEnum.Info,
+  },
 })
diff --git a/lib/trpc/memoizedRequests/index.ts b/lib/trpc/memoizedRequests/index.ts
index fed1caf99..471d20def 100644
--- a/lib/trpc/memoizedRequests/index.ts
+++ b/lib/trpc/memoizedRequests/index.ts
@@ -45,3 +45,7 @@ export const getLanguageSwitcher = cache(
     return serverClient().contentstack.languageSwitcher.get()
   }
 )
+
+export const getSiteConfig = cache(async function getMemoizedSiteConfig() {
+  return serverClient().contentstack.base.siteConfig()
+})
diff --git a/server/routers/contentstack/base/query.ts b/server/routers/contentstack/base/query.ts
index 2a26e980e..3218b8bb6 100644
--- a/server/routers/contentstack/base/query.ts
+++ b/server/routers/contentstack/base/query.ts
@@ -750,7 +750,7 @@ export const baseQueryRouter = router({
       sitewideAlert: sitewideAlert
         ? {
             ...sitewideAlert,
-            phone_contact: contactConfig
+            phoneContact: contactConfig
               ? getAlertPhoneContactData(sitewideAlert, contactConfig)
               : null,
           }

From cf3f54d752879b6f086c40d54719279a6871bd38 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Wed, 23 Oct 2024 09:48:16 +0200
Subject: [PATCH 45/69] Added temp loading when clicking staycard #sw-222

---
 .../DynamicContent/Stays/StayCard/index.tsx     | 17 ++++++++++++++++-
 .../Stays/StayCard/stay.module.css              | 13 +++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/components/Blocks/DynamicContent/Stays/StayCard/index.tsx b/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
index 270ede97a..9e63c0f77 100644
--- a/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
+++ b/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
@@ -1,9 +1,12 @@
 "use client"
 
+import { useState } from "react"
+
 import { dt } from "@/lib/dt"
 
 import { CalendarIcon } from "@/components/Icons"
 import Image from "@/components/Image"
+import LoadingSpinner from "@/components/LoadingSpinner"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
@@ -16,6 +19,9 @@ import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
 export default function StayCard({ stay }: StayCardProps) {
   const lang = useLang()
 
+  // TODO: Temporary loading. Remove when current web is deleted.
+  const [loading, setLoading] = useState(false)
+
   const { checkinDate, checkoutDate, hotelInformation, bookingUrl } =
     stay.attributes
 
@@ -27,7 +33,11 @@ export default function StayCard({ stay }: StayCardProps) {
   const departDateTime = depart.format("YYYY-MM-DD")
 
   return (
-    <Link href={bookingUrl} className={styles.link}>
+    <Link
+      href={bookingUrl}
+      className={styles.link}
+      onClick={() => setLoading(true)}
+    >
       <article className={styles.stay}>
         <Image
           className={styles.image}
@@ -52,6 +62,11 @@ export default function StayCard({ stay }: StayCardProps) {
           </div>
         </footer>
       </article>
+      {loading && (
+        <div className={styles.loadingcontainer}>
+          <LoadingSpinner />
+        </div>
+      )}
     </Link>
   )
 }
diff --git a/components/Blocks/DynamicContent/Stays/StayCard/stay.module.css b/components/Blocks/DynamicContent/Stays/StayCard/stay.module.css
index 995aa102a..bfadbad67 100644
--- a/components/Blocks/DynamicContent/Stays/StayCard/stay.module.css
+++ b/components/Blocks/DynamicContent/Stays/StayCard/stay.module.css
@@ -8,6 +8,7 @@
 
 .link {
   text-decoration: none;
+  position: relative;
 }
 
 .stay:hover {
@@ -45,3 +46,15 @@
   display: flex;
   gap: var(--Spacing-x-half);
 }
+
+.loadingcontainer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 70px;
+  background: rgb(255 255 255 / 80%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

From 445bde8e2e2f565e6055866a2c23affde6e6f179 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Tue, 22 Oct 2024 15:45:00 +0200
Subject: [PATCH 46/69] feat(SW-671): Added correct icons to amenities list

---
 .../AmenitiesList/amenitiesList.module.css    |   4 +
 .../HotelPage/AmenitiesList/index.tsx         |  12 +-
 components/ContentType/HotelPage/data.ts      | 292 +++++++++++++++++-
 .../HotelReservation/HotelCard/index.tsx      |   8 +-
 .../SelectRate/HotelInfoCard/index.tsx        |   2 +-
 components/Icons/Accesories.tsx               |  40 +++
 components/Icons/Air.tsx                      |  36 +++
 .../Icons/{Coffee.tsx => CoffeeAlt.tsx}       |   6 +-
 components/Icons/ConvenienceStore24h.tsx      |  40 +++
 components/Icons/Cool.tsx                     |  36 +++
 components/Icons/DoorOpen.tsx                 |   6 +-
 components/Icons/Dresser.tsx                  |  36 +++
 components/Icons/ElectricCar.tsx              |  40 +++
 components/Icons/Fan.tsx                      |  36 +++
 components/Icons/Footstool.tsx                |  40 +++
 components/Icons/Garage.tsx                   |  36 +++
 components/Icons/Golf.tsx                     |  36 +++
 components/Icons/Groceries.tsx                |  40 +++
 components/Icons/Hanger.tsx                   |  36 +++
 components/Icons/HangerAlt.tsx                |  40 +++
 components/Icons/Heat.tsx                     |  36 +++
 components/Icons/Kayaking.tsx                 |  40 +++
 components/Icons/Kettle.tsx                   |  36 +++
 components/Icons/Lamp.tsx                     |  36 +++
 components/Icons/LaundryMachine.tsx           |  40 +++
 components/Icons/LocalBar.tsx                 |  40 +++
 components/Icons/Nature.tsx                   |  36 +++
 components/Icons/Nightlife.tsx                |  40 +++
 components/Icons/NoSmoking.tsx                |  40 +++
 components/Icons/OutdoorFurniture.tsx         |  40 +++
 components/Icons/RoomService.tsx              |  40 +++
 components/Icons/Skateboarding.tsx            |  40 +++
 components/Icons/Smoking.tsx                  |  36 +++
 components/Icons/Spa.tsx                      |  36 +++
 components/Icons/Street.tsx                   |  36 +++
 components/Icons/Swim.tsx                     |  36 +++
 components/Icons/Thermostat.tsx               |  40 +++
 components/Icons/Tshirt.tsx                   |  36 +++
 components/Icons/TvCasting.tsx                |  40 +++
 components/Icons/get-icon-by-icon-name.ts     | 102 +++++-
 components/Icons/index.tsx                    |  34 +-
 server/routers/hotels/output.ts               |   9 +-
 server/routers/hotels/query.ts                |   8 +-
 types/components/hotelPage/facilities.ts      |   8 +-
 types/components/icon.ts                      |  40 ++-
 types/enums/facilities.ts                     | 262 ++++++++++++++++
 utils/facilityCards.ts                        |  16 +-
 47 files changed, 1970 insertions(+), 55 deletions(-)
 create mode 100644 components/Icons/Accesories.tsx
 create mode 100644 components/Icons/Air.tsx
 rename components/Icons/{Coffee.tsx => CoffeeAlt.tsx} (96%)
 create mode 100644 components/Icons/ConvenienceStore24h.tsx
 create mode 100644 components/Icons/Cool.tsx
 create mode 100644 components/Icons/Dresser.tsx
 create mode 100644 components/Icons/ElectricCar.tsx
 create mode 100644 components/Icons/Fan.tsx
 create mode 100644 components/Icons/Footstool.tsx
 create mode 100644 components/Icons/Garage.tsx
 create mode 100644 components/Icons/Golf.tsx
 create mode 100644 components/Icons/Groceries.tsx
 create mode 100644 components/Icons/Hanger.tsx
 create mode 100644 components/Icons/HangerAlt.tsx
 create mode 100644 components/Icons/Heat.tsx
 create mode 100644 components/Icons/Kayaking.tsx
 create mode 100644 components/Icons/Kettle.tsx
 create mode 100644 components/Icons/Lamp.tsx
 create mode 100644 components/Icons/LaundryMachine.tsx
 create mode 100644 components/Icons/LocalBar.tsx
 create mode 100644 components/Icons/Nature.tsx
 create mode 100644 components/Icons/Nightlife.tsx
 create mode 100644 components/Icons/NoSmoking.tsx
 create mode 100644 components/Icons/OutdoorFurniture.tsx
 create mode 100644 components/Icons/RoomService.tsx
 create mode 100644 components/Icons/Skateboarding.tsx
 create mode 100644 components/Icons/Smoking.tsx
 create mode 100644 components/Icons/Spa.tsx
 create mode 100644 components/Icons/Street.tsx
 create mode 100644 components/Icons/Swim.tsx
 create mode 100644 components/Icons/Thermostat.tsx
 create mode 100644 components/Icons/Tshirt.tsx
 create mode 100644 components/Icons/TvCasting.tsx
 create mode 100644 types/enums/facilities.ts

diff --git a/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css b/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
index f7dcea5fc..e35dc13a6 100644
--- a/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
+++ b/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
@@ -20,6 +20,10 @@
   gap: var(--Spacing-x1);
 }
 
+.icon {
+  flex-shrink: 0;
+}
+
 .showAllAmenities {
   width: fit-content;
 }
diff --git a/components/ContentType/HotelPage/AmenitiesList/index.tsx b/components/ContentType/HotelPage/AmenitiesList/index.tsx
index 8b6a1977e..8c90f19c2 100644
--- a/components/ContentType/HotelPage/AmenitiesList/index.tsx
+++ b/components/ContentType/HotelPage/AmenitiesList/index.tsx
@@ -16,9 +16,7 @@ export default async function AmenitiesList({
   detailedFacilities,
 }: AmenitiesListProps) {
   const intl = await getIntl()
-  const sortedAmenities = detailedFacilities
-    .sort((a, b) => b.sortOrder - a.sortOrder)
-    .slice(0, 5)
+  const facilities = detailedFacilities.slice(0, 5)
   const lang = getLang()
   return (
     <section className={styles.amenitiesContainer}>
@@ -26,11 +24,13 @@ export default async function AmenitiesList({
         {intl.formatMessage({ id: "At the hotel" })}
       </Subtitle>
       <div className={styles.amenityItemList}>
-        {sortedAmenities.map((facility) => {
-          const IconComponent = mapFacilityToIcon(facility.name)
+        {facilities.map((facility) => {
+          const IconComponent = mapFacilityToIcon(facility.id)
           return (
             <div className={styles.amenityItem} key={facility.id}>
-              {IconComponent && <IconComponent color="grey80" />}
+              {IconComponent && (
+                <IconComponent className={styles.icon} color="grey80" />
+              )}
               <Body color="textMediumContrast">{facility.name}</Body>
             </div>
           )
diff --git a/components/ContentType/HotelPage/data.ts b/components/ContentType/HotelPage/data.ts
index ace3a0408..e4043c53e 100644
--- a/components/ContentType/HotelPage/data.ts
+++ b/components/ContentType/HotelPage/data.ts
@@ -3,21 +3,287 @@ import { FC } from "react"
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 
 import { IconName, IconProps } from "@/types/components/icon"
+import { FacilityEnum } from "@/types/enums/facilities"
 
-const facilityToIconMap: { [key: string]: IconName } = {
-  Bar: IconName.Bar,
-  "Bikes for loan": IconName.Biking,
-  Gym: IconName.Fitness,
-  "Free WiFi": IconName.Wifi,
-  //TODO: Ask design team what icon(s) should be used for meetings.
-  "Meeting rooms": IconName.People2,
-  "Meeting / conference facilities": IconName.People2,
-  "Pet-friendly rooms": IconName.Pets,
-  Sauna: IconName.Sauna,
-  Restaurant: IconName.Restaurant,
+const facilityToIconMap: Record<FacilityEnum, IconName> = {
+  [FacilityEnum.Bar]: IconName.LocalBar,
+  [FacilityEnum.Skybar]: IconName.LocalBar,
+  [FacilityEnum.RooftopBar]: IconName.LocalBar,
+  [FacilityEnum.BikesForLoan]: IconName.Biking,
+  [FacilityEnum.Gym]: IconName.Fitness,
+  [FacilityEnum.GymTrainingFacilities]: IconName.Fitness,
+  [FacilityEnum.KeyAccessOnlyToHealthClubGym]: IconName.Fitness,
+  [FacilityEnum.FreeWiFi]: IconName.Wifi,
+  [FacilityEnum.MeetingRooms]: IconName.People2,
+  [FacilityEnum.MeetingConferenceFacilities]: IconName.People2,
+  [FacilityEnum.PetFriendlyRooms]: IconName.Pets,
+  [FacilityEnum.Sauna]: IconName.Sauna,
+  [FacilityEnum.Restaurant]: IconName.Restaurant,
+  [FacilityEnum.ParkingGarage]: IconName.Garage,
+  [FacilityEnum.ParkingElectricCharging]: IconName.ElectricCar,
+  [FacilityEnum.ParkingFreeParking]: IconName.Parking,
+  [FacilityEnum.ParkingOutdoor]: IconName.Parking,
+  [FacilityEnum.ParkingAdditionalCost]: IconName.Parking,
+  [FacilityEnum.DisabledParking]: IconName.Parking,
+  [FacilityEnum.OutdoorTerrace]: IconName.OutdoorFurniture,
+  [FacilityEnum.RoomService]: IconName.RoomService,
+  [FacilityEnum.LaundryRoom]: IconName.LaundryMachine,
+  [FacilityEnum.LaundryService]: IconName.LaundryMachine,
+  [FacilityEnum.LaundryServiceExpress]: IconName.LaundryMachine,
+  [FacilityEnum.ScandicShop24Hrs]: IconName.ConvenienceStore24h,
+  [FacilityEnum.ServesBreakfastAlwaysIncluded]: IconName.CoffeeAlt,
+  [FacilityEnum.ServesBreakfastNotAlwaysIncluded]: IconName.CoffeeAlt,
+  [FacilityEnum.ServesOrganicBreakfastAlwaysIncluded]: IconName.CoffeeAlt,
+  [FacilityEnum.ServesOrganicBreakfastNotAlwaysIncluded]: IconName.CoffeeAlt,
+  [FacilityEnum.Breakfast]: IconName.CoffeeAlt,
+  [FacilityEnum.EBikesChargingStation]: IconName.ElectricBike,
+  [FacilityEnum.Shopping]: IconName.Shopping,
+  [FacilityEnum.Golf]: IconName.Golf,
+  [FacilityEnum.GolfCourse0To30Km]: IconName.Golf,
+  [FacilityEnum.TVWithChromecast1]: IconName.TvCasting,
+  [FacilityEnum.TVWithChromecast2]: IconName.TvCasting,
+  [FacilityEnum.DJLiveMusic]: IconName.Nightlife,
+  [FacilityEnum.DiscoNightClub]: IconName.Nightlife,
+  [FacilityEnum.CoffeeInReceptionAtCharge]: IconName.CoffeeAlt,
+  [FacilityEnum.CoffeeShop]: IconName.CoffeeAlt,
+  [FacilityEnum.CoffeeTeaFacilities]: IconName.CoffeeAlt,
+  [FacilityEnum.SkateboardsForLoan]: IconName.Skateboarding,
+  [FacilityEnum.KayaksForLoan]: IconName.Kayaking,
+  [FacilityEnum.LifestyleConcierge]: IconName.Concierge,
+  [FacilityEnum.WellnessAndSaunaEntranceFeeAdmission16PlusYears]:
+    IconName.Sauna,
+  [FacilityEnum.WellnessPoolSaunaEntranceFeeAdmission16PlusYears]:
+    IconName.Sauna,
+  [FacilityEnum.Cafe]: IconName.Restaurant,
+  [FacilityEnum.Pool]: IconName.Swim,
+  [FacilityEnum.PoolSwimmingPoolJacuzziAtHotel]: IconName.Swim,
+  [FacilityEnum.VendingMachineWithNecessities]: IconName.Groceries,
+
+  [FacilityEnum.Jacuzzi]: IconName.StarFilled,
+  [FacilityEnum.JacuzziInRoom]: IconName.StarFilled,
+
+  [FacilityEnum.AccessibleBathingControls]: IconName.StarFilled,
+  [FacilityEnum.AccessibleBathtubs]: IconName.StarFilled,
+  [FacilityEnum.AccessibleElevators]: IconName.StarFilled,
+  [FacilityEnum.AccessibleLightSwitch]: IconName.StarFilled,
+  [FacilityEnum.AccessibleRoomsAtHotel1]: IconName.StarFilled,
+  [FacilityEnum.AccessibleRoomsAtHotel2]: IconName.StarFilled,
+  [FacilityEnum.AccessibleToilets]: IconName.StarFilled,
+  [FacilityEnum.AccessibleWashBasins]: IconName.StarFilled,
+  [FacilityEnum.AdaptedRoomDoors]: IconName.StarFilled,
+  [FacilityEnum.AdjoiningConventionCentre]: IconName.StarFilled,
+  [FacilityEnum.AirConAirCooling]: IconName.StarFilled,
+  [FacilityEnum.AirConditioningInRoom]: IconName.StarFilled,
+  [FacilityEnum.AirportMaxDistance8Km]: IconName.StarFilled,
+  [FacilityEnum.AlarmsContinuouslyMonitored]: IconName.StarFilled,
+  [FacilityEnum.AlarmsHaveStrobeLightsForDeafHardHearingInAllGuestRooms]:
+    IconName.StarFilled,
+  [FacilityEnum.AlarmsHaveStrobeLightsForDeafHardHearingInAllHallways]:
+    IconName.StarFilled,
+  [FacilityEnum.AlarmsHaveStrobeLightsForDeafHardHearingInAllPublicAreas]:
+    IconName.StarFilled,
+  [FacilityEnum.AllAudibleSmokeAlarmsHardwired]: IconName.StarFilled,
+  [FacilityEnum.AllExteriorDoorsRequireKeyAccessAtNightOrAutomaticallyLock]:
+    IconName.StarFilled,
+  [FacilityEnum.AllGuestRoomDoorsHaveViewports]: IconName.StarFilled,
+  [FacilityEnum.AllGuestRoomDoorsSelfClosing]: IconName.StarFilled,
+  [FacilityEnum.AllParkingAreasPatrolled]: IconName.StarFilled,
+  [FacilityEnum.AllParkingAreasWellLit]: IconName.StarFilled,
+  [FacilityEnum.AllStairsWellsVentilated]: IconName.StarFilled,
+  [FacilityEnum.ArmchairBed]: IconName.StarFilled,
+  [FacilityEnum.AudibleAlarms]: IconName.StarFilled,
+  [FacilityEnum.AudibleSmokeAlarmsInAllHalls]: IconName.StarFilled,
+  [FacilityEnum.AudibleSmokeAlarmsInAllPublicAreas]: IconName.StarFilled,
+  [FacilityEnum.AudibleSmokeAlarmsInAllRooms]: IconName.StarFilled,
+  [FacilityEnum.AudioVisualEquipmentAvailable]: IconName.StarFilled,
+  [FacilityEnum.AutolinkFireDepartment]: IconName.StarFilled,
+  [FacilityEnum.AutomatedExternalDefibrillatorOnSiteAED]: IconName.StarFilled,
+  [FacilityEnum.AutomaticFireDoors]: IconName.StarFilled,
+  [FacilityEnum.AutoRecallElevators]: IconName.StarFilled,
+  [FacilityEnum.BalconiesAccessibleToAdjoiningRooms]: IconName.StarFilled,
+  [FacilityEnum.Ballroom]: IconName.StarFilled,
+  [FacilityEnum.Banquet]: IconName.StarFilled,
+  [FacilityEnum.BasicMedicalEquipmentOnSite]: IconName.StarFilled,
+  [FacilityEnum.BathroomsAdaptedForDisabledGuests]: IconName.StarFilled,
+  [FacilityEnum.Beach]: IconName.StarFilled,
+  [FacilityEnum.Beach0To1Km]: IconName.StarFilled,
+  [FacilityEnum.BeautySalon]: IconName.StarFilled,
+  [FacilityEnum.BedroomsWithWheelchairAccess]: IconName.StarFilled,
+  [FacilityEnum.Bowling]: IconName.StarFilled,
+  [FacilityEnum.BrailleLargePrintHotelLiterature]: IconName.StarFilled,
+  [FacilityEnum.BrailleLargePrintMenus]: IconName.StarFilled,
+  [FacilityEnum.Business1]: IconName.StarFilled,
+  [FacilityEnum.Business2]: IconName.StarFilled,
+  [FacilityEnum.BusinessCentre]: IconName.StarFilled,
+  [FacilityEnum.CashFree8pmTill6am]: IconName.StarFilled,
+  [FacilityEnum.CashFreeHotel]: IconName.StarFilled,
+  [FacilityEnum.ChildrenWelcome]: IconName.StarFilled,
+  [FacilityEnum.City]: IconName.StarFilled,
+  [FacilityEnum.ColourTVInRoomsAllScandicHotels]: IconName.StarFilled,
+  [FacilityEnum.ComplimentaryColdRefreshments]: IconName.StarFilled,
+  [FacilityEnum.CongressHall]: IconName.StarFilled,
+  [FacilityEnum.ConventionCentre]: IconName.StarFilled,
+  [FacilityEnum.Couples]: IconName.StarFilled,
+  [FacilityEnum.DeadboltsOnConnectingDoors]: IconName.StarFilled,
+  [FacilityEnum.DeadboltsSecondaryLocksOnAllGuestRoomDoors]:
+    IconName.StarFilled,
+  [FacilityEnum.Defibrillator]: IconName.StarFilled,
+  [FacilityEnum.Desk]: IconName.StarFilled,
+  [FacilityEnum.DirectDialPhoneInRoomsAllScandic]: IconName.StarFilled,
+  [FacilityEnum.DisabledEmergencyPlan1]: IconName.StarFilled,
+  [FacilityEnum.DisabledEmergencyPlan2]: IconName.StarFilled,
+  [FacilityEnum.DO_NOT_USE_Restaurant]: IconName.StarFilled,
+  [FacilityEnum.Downtown]: IconName.StarFilled,
+  [FacilityEnum.DrinkableTapWater]: IconName.StarFilled,
+  [FacilityEnum.DVDPlayer]: IconName.StarFilled,
+  [FacilityEnum.ElectronicKeyCards]: IconName.StarFilled,
+  [FacilityEnum.Elevator]: IconName.StarFilled,
+  [FacilityEnum.EmergencyBackUpGenerators]: IconName.StarFilled,
+  [FacilityEnum.EmergencyCallButtonOnPhone]: IconName.StarFilled,
+  [FacilityEnum.EmergencyCodesOrButtonsInRooms]: IconName.StarFilled,
+  [FacilityEnum.EmergencyEvacuationPlan1]: IconName.StarFilled,
+  [FacilityEnum.EmergencyEvacuationPlan2]: IconName.StarFilled,
+  [FacilityEnum.EmergencyEvaluationDrillFrequency]: IconName.StarFilled,
+  [FacilityEnum.EmergencyInfoInAllRooms]: IconName.StarFilled,
+  [FacilityEnum.EmergencyLightingAllScandic]: IconName.StarFilled,
+  [FacilityEnum.EmergencyLightningInAllPublicAreas]: IconName.StarFilled,
+  [FacilityEnum.EmergencyServiceResponseTimeInMinutes]: IconName.StarFilled,
+  [FacilityEnum.Entertainment]: IconName.StarFilled,
+  [FacilityEnum.EventVenue]: IconName.StarFilled,
+  [FacilityEnum.ExchangeFacility]: IconName.StarFilled,
+  [FacilityEnum.ExitMapsInRooms]: IconName.StarFilled,
+  [FacilityEnum.ExitSignsLit]: IconName.StarFilled,
+  [FacilityEnum.ExtraFamilyFriendly]: IconName.StarFilled,
+  [FacilityEnum.Families]: IconName.StarFilled,
+  [FacilityEnum.FaxFacilityInRoom]: IconName.StarFilled,
+  [FacilityEnum.Financial]: IconName.StarFilled,
+  [FacilityEnum.FireDetectorsAllScandic]: IconName.StarFilled,
+  [FacilityEnum.FireDetectorsInAllHalls]: IconName.StarFilled,
+  [FacilityEnum.FireDetectorsInAllPublicAreas]: IconName.StarFilled,
+  [FacilityEnum.FireDetectorsInAllRooms]: IconName.StarFilled,
+  [FacilityEnum.FireExtinguishersInAllPublicAreas]: IconName.StarFilled,
+  [FacilityEnum.FireExtinguishersInPublicAreasAllScandic]: IconName.StarFilled,
+  [FacilityEnum.FireSafetyAllScandic]: IconName.StarFilled,
+  [FacilityEnum.FirstAidAvailable]: IconName.StarFilled,
+  [FacilityEnum.FoodDrinks247]: IconName.StarFilled,
+  [FacilityEnum.GiftShop]: IconName.StarFilled,
+  [FacilityEnum.GuestRoomDoorsHaveASecondLock]: IconName.StarFilled,
+  [FacilityEnum.Hairdresser]: IconName.StarFilled,
+  [FacilityEnum.HairdryerInRoomAllScandic]: IconName.StarFilled,
+  [FacilityEnum.HandicapFacilities]: IconName.StarFilled,
+  [FacilityEnum.HandrailsInBathrooms]: IconName.StarFilled,
+  [FacilityEnum.HearingInductionLoops]: IconName.StarFilled,
+  [FacilityEnum.Highway1]: IconName.StarFilled,
+  [FacilityEnum.Highway2]: IconName.StarFilled,
+  [FacilityEnum.Hiking0To3Km]: IconName.StarFilled,
+  [FacilityEnum.HotelCompliesWithAAASecurityStandards]: IconName.StarFilled,
+  [FacilityEnum.HotelIsFollowingScandicsSafetySecurityPolicy]:
+    IconName.StarFilled,
+  [FacilityEnum.HotelWorksAccordingToScandicsAccessibilityConcepts]:
+    IconName.StarFilled,
+  [FacilityEnum.IceMachine]: IconName.StarFilled,
+  [FacilityEnum.IceMachineReception]: IconName.StarFilled,
+  [FacilityEnum.IDRequiredToReplaceAGuestRoomKey]: IconName.StarFilled,
+  [FacilityEnum.IfNoWhatAreTheHoursUse24ClockEx0000To0600]: IconName.StarFilled,
+  [FacilityEnum.InCountry]: IconName.StarFilled,
+  [FacilityEnum.IndustrialPark]: IconName.StarFilled,
+  [FacilityEnum.InternetHighSpeedInternetConnectionAllScandic]:
+    IconName.StarFilled,
+  [FacilityEnum.InternetHotSpotsAllScandic]: IconName.StarFilled,
+  [FacilityEnum.IroningRoom]: IconName.StarFilled,
+  [FacilityEnum.IronIroningBoardAllScandic]: IconName.StarFilled,
+  [FacilityEnum.KeyAccessOnlySecuredFloorsAvailable]: IconName.StarFilled,
+  [FacilityEnum.KidsPlayRoom]: IconName.StarFilled,
+  [FacilityEnum.KidsUpToAndIncluding12YearsStayForFree]: IconName.StarFilled,
+  [FacilityEnum.KitchenInRoom]: IconName.StarFilled,
+  [FacilityEnum.Lake0To1Km]: IconName.StarFilled,
+  [FacilityEnum.LakeOrSea0To1Km]: IconName.StarFilled,
+  [FacilityEnum.LaptopSafe]: IconName.StarFilled,
+  [FacilityEnum.Leisure]: IconName.StarFilled,
+  [FacilityEnum.LuggageLockers]: IconName.StarFilled,
+  [FacilityEnum.Massage]: IconName.StarFilled,
+  [FacilityEnum.MinibarInRoom]: IconName.StarFilled,
+  [FacilityEnum.MobileLift]: IconName.StarFilled,
+  [FacilityEnum.Mountains0To1Km]: IconName.StarFilled,
+  [FacilityEnum.MovieChannelsInRoomAllScandic]: IconName.StarFilled,
+  [FacilityEnum.MultipleExitsOnEachFloor]: IconName.StarFilled,
+  [FacilityEnum.NonSmokingRoomsAllScandic]: IconName.StarFilled,
+  [FacilityEnum.OnSiteTrainingFacilities]: IconName.StarFilled,
+  [FacilityEnum.OtherExplainInBriefDescription]: IconName.StarFilled,
+  [FacilityEnum.OvernightSecurity]: IconName.StarFilled,
+  [FacilityEnum.ParkingAttendant]: IconName.StarFilled,
+  [FacilityEnum.PCHookUpInRoom]: IconName.StarFilled,
+  [FacilityEnum.PillowAlarmsAvailable]: IconName.StarFilled,
+  [FacilityEnum.PlayStationInPlayArea]: IconName.StarFilled,
+  [FacilityEnum.PrintingService]: IconName.StarFilled,
+  [FacilityEnum.PropertyMeetsRequirementsFireSafety]: IconName.StarFilled,
+  [FacilityEnum.PublicAddressSystem]: IconName.StarFilled,
+  [FacilityEnum.RelaxationSuite]: IconName.StarFilled,
+  [FacilityEnum.RestrictedRoomAccessAllScandic]: IconName.StarFilled,
+  [FacilityEnum.RoomsAccessibleFromTheInterior]: IconName.StarFilled,
+  [FacilityEnum.RoomWindowsOpen]: IconName.StarFilled,
+  [FacilityEnum.RoomWindowsThatOpenHaveLockingDevice]: IconName.StarFilled,
+  [FacilityEnum.Rural1]: IconName.StarFilled,
+  [FacilityEnum.Rural2]: IconName.StarFilled,
+  [FacilityEnum.SafeDepositBoxInRoomsAllScandic]: IconName.StarFilled,
+  [FacilityEnum.SafeDepositBoxInRoomsCanHoldA17InchLaptop]: IconName.StarFilled,
+  [FacilityEnum.SafeDepositBoxInRoomsCannotHoldALaptop]: IconName.StarFilled,
+  [FacilityEnum.SafetyChainsOnGuestRoomDoor]: IconName.StarFilled,
+  [FacilityEnum.SecondaryLocksOnSlidingGlassDoors]: IconName.StarFilled,
+  [FacilityEnum.SecondaryLocksOnWindows]: IconName.StarFilled,
+  [FacilityEnum.Security24Hours]: IconName.StarFilled,
+  [FacilityEnum.SecurityEscortsAvailableOnRequest]: IconName.StarFilled,
+  [FacilityEnum.SecurityPersonnelOnSite]: IconName.StarFilled,
+  [FacilityEnum.SeparateFloorsForWomen]: IconName.StarFilled,
+  [FacilityEnum.ServiceGuideDogsAllowed]: IconName.StarFilled,
+  [FacilityEnum.ServiceSecurity24Hrs]: IconName.StarFilled,
+  [FacilityEnum.Skiing0To1Km]: IconName.StarFilled,
+  [FacilityEnum.SmokeDetectorsAllScandic]: IconName.StarFilled,
+  [FacilityEnum.Solarium]: IconName.StarFilled,
+  [FacilityEnum.SpecialNeedsMenus]: IconName.StarFilled,
+  [FacilityEnum.Sports]: IconName.StarFilled,
+  [FacilityEnum.SprinklersAllScandic]: IconName.StarFilled,
+  [FacilityEnum.SprinklersInAllHalls]: IconName.StarFilled,
+  [FacilityEnum.SprinklersInAllPublicAreas]: IconName.StarFilled,
+  [FacilityEnum.SprinklersInAllRooms]: IconName.StarFilled,
+  [FacilityEnum.StaffInDuplicateKeys]: IconName.StarFilled,
+  [FacilityEnum.StaffRedCrossCertifiedInCPR]: IconName.StarFilled,
+  [FacilityEnum.StaffTrainedForDisabledGuests]: IconName.StarFilled,
+  [FacilityEnum.StaffTrainedInAutomatedExternalDefibrillatorUsageAED]:
+    IconName.StarFilled,
+  [FacilityEnum.StaffTrainedInCPR]: IconName.StarFilled,
+  [FacilityEnum.StaffTrainedInFirstAid]: IconName.StarFilled,
+  [FacilityEnum.StaffTrainedInFirstAidTechniques]: IconName.StarFilled,
+  [FacilityEnum.StaffTrainedToCaterForDisabledGuestsAllScandic]:
+    IconName.StarFilled,
+  [FacilityEnum.Suburbs]: IconName.StarFilled,
+  [FacilityEnum.SwingboltLock]: IconName.StarFilled,
+  [FacilityEnum.TeleConferencingFacilitiesAvailable]: IconName.StarFilled,
+  [FacilityEnum.TelevisionsWithSubtitlesOrClosedCaptions]: IconName.StarFilled,
+  [FacilityEnum.Tennis1]: IconName.StarFilled,
+  [FacilityEnum.Tennis2]: IconName.StarFilled,
+  [FacilityEnum.TennisPadel]: IconName.StarFilled,
+  [FacilityEnum.Theatre]: IconName.StarFilled,
+  [FacilityEnum.TrouserPress]: IconName.StarFilled,
+  [FacilityEnum.UniformSecurityOnPremises]: IconName.StarFilled,
+  [FacilityEnum.UtilityRoomForIroning]: IconName.StarFilled,
+  [FacilityEnum.VideoSurveillanceInHallways]: IconName.StarFilled,
+  [FacilityEnum.VideoSurveillanceInPublicAreas]: IconName.StarFilled,
+  [FacilityEnum.VideoSurveillanceMonitored24HrsADay]: IconName.StarFilled,
+  [FacilityEnum.VideoSurveillanceOfAllParkingAreas]: IconName.StarFilled,
+  [FacilityEnum.VideoSurveillanceOfExteriorFrontEntrance]: IconName.StarFilled,
+  [FacilityEnum.VideoSurveillanceRecorded24HrsADayParkingArea]:
+    IconName.StarFilled,
+  [FacilityEnum.WallMountedCycleRack]: IconName.StarFilled,
+  [FacilityEnum.WellLitWalkways]: IconName.StarFilled,
+  [FacilityEnum.WheelchairAccess]: IconName.StarFilled,
+  [FacilityEnum.WideCorridors]: IconName.StarFilled,
+  [FacilityEnum.WideEntrance]: IconName.StarFilled,
+  [FacilityEnum.WideRestaurantEntrance]: IconName.StarFilled,
+  [FacilityEnum.WiFiWirelessInternetAccessAllScandic]: IconName.StarFilled,
 }
 
-export function mapFacilityToIcon(facilityName: string): FC<IconProps> | null {
-  const iconName = facilityToIconMap[facilityName]
+export function mapFacilityToIcon(id: FacilityEnum): FC<IconProps> | null {
+  const iconName = facilityToIconMap[id]
   return getIconByIconName(iconName) || null
 }
diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx
index ea3eb29b7..67ce49f17 100644
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -22,9 +22,7 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
   const { hotelData } = hotel
   const { price } = hotel
 
-  const sortedAmenities = hotelData.detailedFacilities
-    .sort((a, b) => b.sortOrder - a.sortOrder)
-    .slice(0, 5)
+  const amenities = hotelData.detailedFacilities.slice(0, 5)
 
   return (
     <article className={styles.card}>
@@ -57,8 +55,8 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
       </section>
       <section className={styles.hotel}>
         <div className={styles.facilities}>
-          {sortedAmenities.map((facility) => {
-            const IconComponent = mapFacilityToIcon(facility.name)
+          {amenities.map((facility) => {
+            const IconComponent = mapFacilityToIcon(facility.id)
             return (
               <div className={styles.facilitiesItem} key={facility.id}>
                 {IconComponent && <IconComponent color="grey80" />}
diff --git a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
index 5e0a24623..1ec58dd07 100644
--- a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
+++ b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
@@ -67,7 +67,7 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
                   {intl.formatMessage({ id: "At the hotel" })}
                 </Body>
                 {sortedFacilities?.map((facility) => {
-                  const IconComponent = mapFacilityToIcon(facility.name)
+                  const IconComponent = mapFacilityToIcon(facility.id)
                   return (
                     <div className={styles.facilitiesItem} key={facility.id}>
                       {IconComponent && (
diff --git a/components/Icons/Accesories.tsx b/components/Icons/Accesories.tsx
new file mode 100644
index 000000000..9aaf0c894
--- /dev/null
+++ b/components/Icons/Accesories.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function AccesoriesIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_4039_3291"
+        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_4039_3291)">
+        <path
+          d="M6.40085 22C5.55984 22 4.80868 21.4739 4.52127 20.6835L1.56362 12.5499C1.23633 11.6499 1.593 10.6442 2.41421 10.1515L6 8V3C6 2.44772 6.44772 2 7 2H9C9.55229 2 10 2.44772 10 3V8L13.5858 10.1515C14.407 10.6442 14.7637 11.6499 14.4364 12.5499L11.4787 20.6835C11.1913 21.4739 10.4402 22 9.59915 22H6.40085ZM17 22C16.7167 22 16.4792 21.9042 16.2875 21.7125C16.0958 21.5208 16 21.2833 16 21C16 20.7167 16.0958 20.4792 16.2875 20.2875C16.4792 20.0958 16.7167 20 17 20H20V18H17C16.7167 18 16.4792 17.9042 16.2875 17.7125C16.0958 17.5208 16 17.2833 16 17C16 16.7167 16.0958 16.4792 16.2875 16.2875C16.4792 16.0958 16.7167 16 17 16H20V14H17C16.7167 14 16.4792 13.9042 16.2875 13.7125C16.0958 13.5208 16 13.2833 16 13C16 12.7167 16.0958 12.4792 16.2875 12.2875C16.4792 12.0958 16.7167 12 17 12H20V10H17C16.7167 10 16.4792 9.90417 16.2875 9.7125C16.0958 9.52083 16 9.28333 16 9C16 8.71667 16.0958 8.47917 16.2875 8.2875C16.4792 8.09583 16.7167 8 17 8H20V6H17C16.7167 6 16.4792 5.90417 16.2875 5.7125C16.0958 5.52083 16 5.28333 16 5C16 4.71667 16.0958 4.47917 16.2875 4.2875C16.4792 4.09583 16.7167 4 17 4H21C21.55 4 22.0208 4.19583 22.4125 4.5875C22.8042 4.97917 23 5.45 23 6V20C23 20.55 22.8042 21.0208 22.4125 21.4125C22.0208 21.8042 21.55 22 21 22H17ZM6.16123 19.3404C6.30454 19.7363 6.68048 20 7.10153 20H8.89847C9.31952 20 9.69546 19.7363 9.83877 19.3404L12.2691 12.6261C12.4322 12.1755 12.2527 11.6726 11.8412 11.427L9.45 10H6.55L4.15876 11.427C3.74728 11.6726 3.56783 12.1755 3.73092 12.6261L6.16123 19.3404Z"
+          fill="#1C1B1F"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Air.tsx b/components/Icons/Air.tsx
new file mode 100644
index 000000000..239566515
--- /dev/null
+++ b/components/Icons/Air.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function AirIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3423"
+        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_3423)">
+        <path
+          d="M11.5125 19.8C10.9884 19.8 10.5011 19.6708 10.0507 19.4125C9.60022 19.1541 9.24167 18.8 8.975 18.35C8.8 18.0416 8.79453 17.7312 8.9586 17.4187C9.12267 17.1062 9.37657 16.95 9.7203 16.95C9.92343 16.95 10.1042 17.0104 10.2625 17.1312C10.4208 17.252 10.5583 17.3916 10.675 17.55C10.764 17.675 10.8842 17.7687 11.0355 17.8312C11.1868 17.8937 11.3458 17.925 11.5125 17.925C11.7958 17.925 12.0375 17.825 12.2375 17.625C12.4375 17.425 12.5375 17.1833 12.5375 16.9C12.5375 16.6166 12.4375 16.375 12.2375 16.175C12.0375 15.975 11.7976 15.875 11.5178 15.875H3.125C2.86667 15.875 2.64583 15.7833 2.4625 15.6C2.27917 15.4166 2.1875 15.1958 2.1875 14.9375C2.1875 14.6791 2.27917 14.4583 2.4625 14.275C2.64583 14.0916 2.86667 14 3.125 14H11.5125C12.318 14 13.0028 14.2822 13.5667 14.8467C14.1306 15.4111 14.4125 16.0965 14.4125 16.9029C14.4125 17.7093 14.1306 18.3937 13.5667 18.9562C13.0028 19.5187 12.318 19.8 11.5125 19.8ZM3.125 9.99995C2.86667 9.99995 2.64583 9.90828 2.4625 9.72495C2.27917 9.54162 2.1875 9.32078 2.1875 9.06245C2.1875 8.80412 2.27917 8.58328 2.4625 8.39995C2.64583 8.21662 2.86667 8.12495 3.125 8.12495H15.4375C15.8611 8.12495 16.2212 7.97654 16.5177 7.67973C16.8142 7.38291 16.9625 7.02249 16.9625 6.59848C16.9625 6.17446 16.8148 5.81453 16.5193 5.5187C16.2237 5.22287 15.8649 5.07495 15.4428 5.07495C15.1726 5.07495 14.9208 5.13593 14.6875 5.25788C14.4542 5.37983 14.2708 5.55463 14.1375 5.78228C14.0208 5.97739 13.8816 6.15412 13.7199 6.31245C13.5581 6.47078 13.364 6.54995 13.1375 6.54995C12.8208 6.54995 12.5688 6.42495 12.3813 6.17495C12.1938 5.92495 12.1542 5.65828 12.2625 5.37495C12.4958 4.70828 12.9038 4.17912 13.4863 3.78745C14.0689 3.39578 14.7193 3.19995 15.4375 3.19995C16.3765 3.19995 17.178 3.53213 17.8418 4.19648C18.5056 4.86083 18.8375 5.66291 18.8375 6.60273C18.8375 7.54254 18.5056 8.3437 17.8418 9.0062C17.178 9.6687 16.3765 9.99995 15.4375 9.99995H3.125ZM19.85 17.5625C19.525 17.7041 19.2125 17.6864 18.9125 17.5094C18.6125 17.3323 18.4625 17.0745 18.4625 16.7358C18.4625 16.5202 18.5375 16.3354 18.6875 16.1812C18.8375 16.027 19.0083 15.9 19.2 15.8C19.4417 15.6666 19.625 15.478 19.75 15.2341C19.875 14.9901 19.9375 14.7287 19.9375 14.45C19.9375 14.0263 19.7892 13.6663 19.4927 13.3698C19.1962 13.0732 18.8361 12.925 18.4125 12.925H3.125C2.86667 12.925 2.64583 12.8333 2.4625 12.65C2.27917 12.4666 2.1875 12.2458 2.1875 11.9875C2.1875 11.7291 2.27917 11.5083 2.4625 11.325C2.64583 11.1416 2.86667 11.05 3.125 11.05H18.4125C19.3516 11.05 20.153 11.3813 20.8168 12.044C21.4806 12.7067 21.8125 13.5067 21.8125 14.4442C21.8125 15.123 21.637 15.7433 21.286 16.3049C20.935 16.8665 20.4563 17.2857 19.85 17.5625Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Coffee.tsx b/components/Icons/CoffeeAlt.tsx
similarity index 96%
rename from components/Icons/Coffee.tsx
rename to components/Icons/CoffeeAlt.tsx
index 840f78b0d..e76da5126 100644
--- a/components/Icons/Coffee.tsx
+++ b/components/Icons/CoffeeAlt.tsx
@@ -2,7 +2,11 @@ import { iconVariants } from "./variants"
 
 import type { IconProps } from "@/types/components/icon"
 
-export default function CoffeeIcon({ className, color, ...props }: IconProps) {
+export default function CoffeeAltIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
   const classNames = iconVariants({ className, color })
   return (
     <svg
diff --git a/components/Icons/ConvenienceStore24h.tsx b/components/Icons/ConvenienceStore24h.tsx
new file mode 100644
index 000000000..ace46579c
--- /dev/null
+++ b/components/Icons/ConvenienceStore24h.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ConvenienceStore24hIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3405"
+        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_3405)">
+        <path
+          d="M20.825 11.075V18.925C20.825 19.4407 20.6414 19.8821 20.2742 20.2493C19.9071 20.6165 19.4657 20.8 18.95 20.8H5.07502C4.55938 20.8 4.11797 20.6165 3.75079 20.2493C3.38361 19.8821 3.20002 19.4407 3.20002 18.925V11.075C2.79168 10.7584 2.4896 10.3188 2.29377 9.7563C2.09793 9.1938 2.10002 8.59172 2.30002 7.95005L3.32502 4.62505C3.4566 4.20617 3.69097 3.85977 4.02814 3.58587C4.36531 3.31199 4.75593 3.17505 5.20002 3.17505H18.8258C19.267 3.17505 19.6542 3.3063 19.9875 3.5688C20.3209 3.8313 20.5603 4.18272 20.7059 4.62305L21.725 7.95005C21.925 8.59172 21.9271 9.18755 21.7313 9.73755C21.5354 10.2875 21.2334 10.7334 20.825 11.075ZM14.175 10.075C14.6417 10.075 14.9896 9.92088 15.2188 9.61255C15.4479 9.30422 15.5375 8.95838 15.4875 8.57505L14.95 5.05005H12.95V8.72505C12.95 9.08852 13.0691 9.40438 13.3073 9.67265C13.5455 9.94092 13.8347 10.075 14.175 10.075ZM9.74902 10.075C10.14 10.075 10.4588 9.94092 10.7053 9.67265C10.9518 9.40438 11.075 9.08852 11.075 8.72505V5.05005H9.07502L8.53752 8.57505C8.47918 8.96672 8.56877 9.31463 8.80627 9.6188C9.04377 9.92297 9.35802 10.075 9.74902 10.075ZM5.37502 10.075C5.69168 10.075 5.96252 9.96436 6.18752 9.74297C6.41252 9.52161 6.55002 9.24063 6.60002 8.90005L7.16252 5.05005H5.13752L4.12502 8.37505C4.00835 8.76672 4.0646 9.14797 4.29377 9.5188C4.52293 9.88963 4.88335 10.075 5.37502 10.075ZM18.65 10.075C19.1334 10.075 19.4958 9.8938 19.7375 9.5313C19.9792 9.1688 20.0333 8.78338 19.9 8.37505L18.8625 5.05005H16.8625L17.4235 8.90005C17.4745 9.23338 17.6125 9.51255 17.8375 9.73755C18.0625 9.96255 18.3333 10.075 18.65 10.075ZM5.07502 18.925H18.95V11.9125C18.875 11.9375 18.8167 11.95 18.775 11.95H18.65C18.2066 11.95 17.8166 11.875 17.48 11.725C17.1433 11.575 16.8149 11.3334 16.4947 11C16.2066 11.3 15.8728 11.5334 15.4933 11.7C15.1139 11.8667 14.7097 11.95 14.2807 11.95C13.8352 11.95 13.4229 11.8667 13.0438 11.7C12.6646 11.5334 12.325 11.3 12.025 11C11.7417 11.3 11.4125 11.5334 11.0375 11.7C10.6625 11.8667 10.2662 11.95 9.84864 11.95C9.38289 11.95 8.95418 11.8709 8.56252 11.7125C8.17085 11.5542 7.82502 11.3167 7.52502 11C7.15835 11.3667 6.81043 11.6167 6.48127 11.75C6.1521 11.8834 5.78335 11.95 5.37502 11.95H5.23037C5.1768 11.95 5.12502 11.9375 5.07502 11.9125V18.925ZM8.56344 17.875H10.5171C10.6474 17.875 10.7604 17.8263 10.8563 17.7288C10.9521 17.6313 11 17.5175 11 17.3875C11 17.2575 10.9513 17.1438 10.8538 17.0463C10.7563 16.9488 10.6425 16.9 10.5125 16.9H9.05002V15.925H10.5125C10.6425 15.925 10.7563 15.8763 10.8538 15.7788C10.9513 15.6813 11 15.5675 11 15.4375V13.4603C11 13.3285 10.9512 13.2146 10.8535 13.1188C10.7558 13.023 10.6418 12.975 10.5116 12.975H8.55789C8.42764 12.975 8.3146 13.0238 8.21877 13.1213C8.12293 13.2188 8.07502 13.3325 8.07502 13.4625C8.07502 13.5925 8.12377 13.7063 8.22127 13.8038C8.31877 13.9013 8.43252 13.95 8.56252 13.95H10.025V14.95H8.55812C8.42772 14.95 8.3146 14.9989 8.21877 15.0966C8.12293 15.1943 8.07502 15.3082 8.07502 15.4385V17.3922C8.07502 17.5224 8.12386 17.6355 8.22154 17.7313C8.31922 17.8271 8.43319 17.875 8.56344 17.875ZM14.9707 15.9294V17.3886C14.9707 17.5183 15.0193 17.6318 15.1166 17.7291C15.2139 17.8264 15.3292 17.875 15.4625 17.875C15.5958 17.875 15.7104 17.8263 15.8063 17.7288C15.9021 17.6313 15.95 17.5175 15.95 17.3875V13.459C15.95 13.328 15.9013 13.2146 15.8038 13.1188C15.7063 13.023 15.5925 12.975 15.4625 12.975C15.3325 12.975 15.2188 13.0238 15.1213 13.1213C15.0238 13.2188 14.975 13.3325 14.975 13.4625V14.95H14V13.4611C14 13.3287 13.9513 13.2146 13.8538 13.1188C13.7563 13.023 13.6425 12.975 13.5125 12.975C13.3825 12.975 13.2688 13.0238 13.1713 13.1213C13.0738 13.2188 13.025 13.3325 13.025 13.4625V15.4398C13.025 15.5716 13.0737 15.6862 13.1709 15.7835C13.2682 15.8808 13.3817 15.9294 13.5114 15.9294H14.9707Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Cool.tsx b/components/Icons/Cool.tsx
new file mode 100644
index 000000000..efa5ae67f
--- /dev/null
+++ b/components/Icons/Cool.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function CoolIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3415"
+        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_3415)">
+        <path
+          d="M11.075 17.625L8.46245 20.2125C8.28745 20.3875 8.07078 20.475 7.81245 20.475C7.55412 20.475 7.33745 20.3792 7.16245 20.1875C6.97912 20.0042 6.88745 19.7875 6.88745 19.5375C6.88745 19.2875 6.98328 19.0667 7.17495 18.875L11.075 14.975V12.925H9.02495L5.09995 16.85C4.92495 17.025 4.71245 17.1125 4.46245 17.1125C4.21245 17.1125 3.99162 17.0209 3.79995 16.8375C3.61662 16.6625 3.52495 16.4459 3.52495 16.1875C3.52495 15.9292 3.61662 15.7084 3.79995 15.525L6.37495 12.925H3.11245C2.85412 12.925 2.63745 12.8355 2.46245 12.6563C2.28745 12.4771 2.19995 12.2542 2.19995 11.9875C2.19995 11.7292 2.28953 11.5084 2.4687 11.325C2.64787 11.1417 2.87078 11.05 3.13745 11.05H6.37495L3.78745 8.46255C3.61245 8.28755 3.52495 8.07088 3.52495 7.81255C3.52495 7.55422 3.62078 7.33338 3.81245 7.15005C3.99578 6.97505 4.21245 6.88755 4.46245 6.88755C4.71245 6.88755 4.93328 6.97922 5.12495 7.16255L9.02495 11.05H11.075V9.00005L7.14995 5.10005C6.97495 4.92505 6.88745 4.71255 6.88745 4.46255C6.88745 4.21255 6.97912 3.99172 7.16245 3.80005C7.33745 3.61672 7.55412 3.52505 7.81245 3.52505C8.07078 3.52505 8.29162 3.61672 8.47495 3.80005L11.075 6.35005V3.11255C11.075 2.85422 11.1645 2.63338 11.3437 2.45005C11.5229 2.26672 11.7458 2.17505 12.0125 2.17505C12.2708 2.17505 12.4916 2.26672 12.675 2.45005C12.8583 2.63338 12.95 2.85422 12.95 3.11255V6.35005L15.5375 3.78755C15.7125 3.61255 15.9291 3.52505 16.1875 3.52505C16.4458 3.52505 16.6666 3.61672 16.85 3.80005C17.025 3.99172 17.1125 4.21255 17.1125 4.46255C17.1125 4.71255 17.0208 4.92922 16.8375 5.11255L12.95 9.00005V11.05H15L18.9 7.15005C19.075 6.97505 19.2875 6.88755 19.5375 6.88755C19.7875 6.88755 20.0083 6.97922 20.2 7.16255C20.3833 7.33755 20.475 7.55422 20.475 7.81255C20.475 8.07088 20.3833 8.29172 20.2 8.47505L17.65 11.05H20.8875C21.1458 11.05 21.3666 11.1417 21.55 11.325C21.7333 11.5084 21.825 11.7292 21.825 11.9875C21.825 12.2542 21.7333 12.4771 21.55 12.6563C21.3666 12.8355 21.1458 12.925 20.8875 12.925H17.65L20.2125 15.5375C20.3875 15.7125 20.475 15.9292 20.475 16.1875C20.475 16.4459 20.3833 16.6625 20.2 16.8375C20.0083 17.0209 19.7875 17.1125 19.5375 17.1125C19.2875 17.1125 19.0708 17.0167 18.8875 16.825L15 12.925H12.95V14.975L16.85 18.9C17.025 19.075 17.1125 19.2875 17.1125 19.5375C17.1125 19.7875 17.0208 20.0084 16.8375 20.2C16.6625 20.3834 16.4458 20.475 16.1875 20.475C15.9291 20.475 15.7083 20.3834 15.525 20.2L12.95 17.625V20.8875C12.95 21.1459 12.8583 21.3626 12.675 21.5375C12.4916 21.7125 12.2708 21.8 12.0125 21.8C11.7458 21.8 11.5229 21.7105 11.3437 21.5313C11.1645 21.3521 11.075 21.1292 11.075 20.8625V17.625Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/DoorOpen.tsx b/components/Icons/DoorOpen.tsx
index f70c29859..93bc2caf4 100644
--- a/components/Icons/DoorOpen.tsx
+++ b/components/Icons/DoorOpen.tsx
@@ -2,7 +2,11 @@ import { iconVariants } from "./variants"
 
 import type { IconProps } from "@/types/components/icon"
 
-export default function CoffeeIcon({ className, color, ...props }: IconProps) {
+export default function DoorOpenIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
   const classNames = iconVariants({ className, color })
   return (
     <svg
diff --git a/components/Icons/Dresser.tsx b/components/Icons/Dresser.tsx
new file mode 100644
index 000000000..b81f2bece
--- /dev/null
+++ b/components/Icons/Dresser.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function DresserIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3455"
+        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_3455)">
+        <path
+          d="M4.0625 20.9375V4.9375C4.0625 4.42187 4.24609 3.98046 4.61328 3.61328C4.98046 3.24609 5.42187 3.0625 5.9375 3.0625H18.0625C18.5781 3.0625 19.0195 3.24609 19.3867 3.61328C19.7539 3.98046 19.9375 4.42187 19.9375 4.9375V20.9375H18.0625V18.9375H5.9375V20.9375H4.0625ZM5.9375 11.0625H11.0625V4.9375H5.9375V11.0625ZM12.9375 7.0625H18.0625V4.9375H12.9375V7.0625ZM12.9375 11.0625H18.0625V8.9375H12.9375V11.0625ZM10.0625 15.9375H13.9375V14.0625H10.0625V15.9375ZM5.9375 12.9375V17.0625H18.0625V12.9375H5.9375Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/ElectricCar.tsx b/components/Icons/ElectricCar.tsx
new file mode 100644
index 000000000..1f9500b64
--- /dev/null
+++ b/components/Icons/ElectricCar.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ElectricCarIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3543"
+        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_3543)">
+        <path
+          d="M6.0251 14.875V15.425C6.0251 15.8139 5.8887 16.1445 5.6159 16.4167C5.34311 16.6889 5.01186 16.825 4.62215 16.825C4.23245 16.825 3.90218 16.6889 3.63135 16.4167C3.36051 16.1445 3.2251 15.8139 3.2251 15.425V8.40002C3.2251 8.29447 3.23343 8.18892 3.2501 8.08335C3.26676 7.9778 3.29166 7.87571 3.32477 7.77707L5.1876 2.52502C5.32093 2.15002 5.54593 1.84794 5.8626 1.61877C6.17926 1.38961 6.54176 1.27502 6.9501 1.27502H17.0501C17.4584 1.27502 17.8209 1.38961 18.1376 1.61877C18.4543 1.84794 18.6793 2.15002 18.8126 2.52502L20.6754 7.77707C20.7085 7.87571 20.7334 7.9778 20.7501 8.08335C20.7668 8.18892 20.7751 8.29447 20.7751 8.40002V15.425C20.7751 15.8139 20.6387 16.1445 20.3659 16.4167C20.0931 16.6889 19.7619 16.825 19.3722 16.825C18.9825 16.825 18.6522 16.6889 18.3813 16.4167C18.1105 16.1445 17.9751 15.8139 17.9751 15.425V14.875H6.0251ZM5.8501 6.20002H18.1501L17.0751 3.15002H6.9251L5.8501 6.20002ZM7.54715 11.975C7.94911 11.975 8.29176 11.8343 8.5751 11.553C8.85843 11.2716 9.0001 10.9299 9.0001 10.528C9.0001 10.126 8.85942 9.78336 8.57805 9.50002C8.29666 9.21669 7.955 9.07502 7.55305 9.07502C7.15108 9.07502 6.80843 9.21571 6.5251 9.49708C6.24176 9.77846 6.1001 10.1201 6.1001 10.5221C6.1001 10.924 6.24078 11.2667 6.52215 11.55C6.80353 11.8334 7.1452 11.975 7.54715 11.975ZM16.4471 11.975C16.8491 11.975 17.1918 11.8343 17.4751 11.553C17.7584 11.2716 17.9001 10.9299 17.9001 10.528C17.9001 10.126 17.7594 9.78336 17.478 9.50002C17.1967 9.21669 16.855 9.07502 16.453 9.07502C16.0511 9.07502 15.7084 9.21571 15.4251 9.49708C15.1418 9.77846 15.0001 10.1201 15.0001 10.5221C15.0001 10.924 15.1408 11.2667 15.4221 11.55C15.7035 11.8334 16.0452 11.975 16.4471 11.975ZM12.9751 20.875V22.0445C12.9751 22.2232 12.9014 22.3584 12.754 22.45C12.6066 22.5417 12.4553 22.5459 12.3001 22.4625L8.0376 20.35C7.92927 20.2917 7.88731 20.2021 7.91172 20.0813C7.93614 19.9604 8.01346 19.9 8.1437 19.9H11.0251V18.7C11.0251 18.5286 11.098 18.3962 11.2438 18.3027C11.3897 18.2093 11.5418 18.2042 11.7001 18.2875L15.9626 20.425C16.0709 20.4834 16.1129 20.5729 16.0885 20.6938C16.0641 20.8146 15.9867 20.875 15.8565 20.875H12.9751ZM5.1001 13H18.9001V8.07502H5.1001V13Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Fan.tsx b/components/Icons/Fan.tsx
new file mode 100644
index 000000000..128200104
--- /dev/null
+++ b/components/Icons/Fan.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function FanIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3478"
+        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_3478)">
+        <path
+          d="M10.6 21.9375C9.77452 21.9375 9.14732 21.6875 8.7184 21.1875C8.28947 20.6875 8.07083 20.125 8.0625 19.5C8.0625 19.0833 8.15625 18.6729 8.34375 18.2688C8.53125 17.8646 8.82083 17.5333 9.2125 17.275C9.58665 17.0316 9.88852 16.7187 10.1181 16.3362C10.3477 15.9537 10.5083 15.5458 10.6 15.1125C10.4833 15.0542 10.3729 14.9979 10.2688 14.9438C10.1646 14.8896 10.0625 14.825 9.9625 14.75L7.63085 15.5856C7.34362 15.6869 7.0689 15.7708 6.8067 15.8375C6.5445 15.9042 6.27411 15.9375 5.99553 15.9375C4.96311 15.9375 4.0495 15.4843 3.2547 14.5778C2.4599 13.6714 2.0625 12.3454 2.0625 10.6C2.0625 9.775 2.30833 9.14583 2.8 8.7125C3.29167 8.27917 3.84807 8.0625 4.46922 8.0625C4.89422 8.0625 5.31105 8.15629 5.7197 8.34388C6.12837 8.53148 6.46347 8.82102 6.725 9.2125C6.96838 9.58665 7.28132 9.88852 7.6638 10.1181C8.04627 10.3477 8.45417 10.5083 8.8875 10.6C8.94583 10.4833 9.00208 10.3729 9.05625 10.2688C9.11042 10.1646 9.175 10.0625 9.25 9.9625L8.4125 7.625C8.3125 7.3482 8.22917 7.07955 8.1625 6.81905C8.09583 6.55853 8.0625 6.29802 8.0625 6.0375C8.07917 4.99583 8.53841 4.07292 9.44023 3.26875C10.342 2.46458 11.662 2.0625 13.4 2.0625C14.225 2.0625 14.8542 2.31025 15.2875 2.80575C15.7208 3.30125 15.9375 3.85767 15.9375 4.475C15.9375 4.89167 15.8438 5.30625 15.6562 5.71875C15.4688 6.13125 15.1792 6.46667 14.7875 6.725C14.4134 6.96838 14.1115 7.28132 13.8819 7.6638C13.6523 8.04627 13.4917 8.45417 13.4 8.8875C13.5167 8.94583 13.6271 9.00208 13.7312 9.05625C13.8354 9.11042 13.9375 9.175 14.0375 9.25L16.3692 8.38938C16.6564 8.28813 16.927 8.20833 17.181 8.15C17.435 8.09167 17.7013 8.0625 17.9799 8.0625C19.3073 8.0625 20.2987 8.6145 20.9543 9.7185C21.6098 10.8225 21.9375 12.0497 21.9375 13.4C21.9375 14.2255 21.6771 14.8527 21.1562 15.2816C20.6354 15.7105 20.0583 15.9292 19.425 15.9375C19.025 15.9375 18.6323 15.8437 18.2468 15.6561C17.8614 15.4685 17.5374 15.179 17.275 14.7875C17.0316 14.4134 16.7187 14.1115 16.3362 13.8819C15.9537 13.6523 15.5458 13.4917 15.1125 13.4C15.0542 13.5167 14.9979 13.6271 14.9438 13.7312C14.8896 13.8354 14.825 13.9375 14.75 14.0375L15.5875 16.375C15.6792 16.6333 15.7604 16.8896 15.8313 17.1438C15.9021 17.3979 15.9375 17.65 15.9375 17.9C15.9292 18.95 15.4751 19.8854 14.5753 20.7063C13.6756 21.5271 12.3505 21.9375 10.6 21.9375ZM11.9993 13.5625C12.4331 13.5625 12.8021 13.4107 13.1062 13.107C13.4104 12.8033 13.5625 12.4346 13.5625 12.0007C13.5625 11.5669 13.4107 11.1979 13.107 10.8938C12.8033 10.5896 12.4346 10.4375 12.0007 10.4375C11.5669 10.4375 11.1979 10.5893 10.8938 10.893C10.5896 11.1967 10.4375 11.5654 10.4375 11.9993C10.4375 12.4331 10.5893 12.8021 10.893 13.1062C11.1967 13.4104 11.5654 13.5625 11.9993 13.5625ZM10.8125 8.775C10.9292 8.73333 11.0488 8.7 11.1714 8.675C11.294 8.65 11.4119 8.62917 11.525 8.6125C11.6583 7.9125 11.9125 7.25833 12.2875 6.65C12.6625 6.04167 13.1542 5.54167 13.7625 5.15C13.8625 5.075 13.9375 4.98392 13.9875 4.87677C14.0375 4.76964 14.0625 4.63572 14.0625 4.475C14.0625 4.32412 14.0073 4.19682 13.8969 4.0931C13.7865 3.98937 13.6208 3.9375 13.4 3.9375C12.7544 3.9375 12.0243 4.07926 11.2095 4.36277C10.3948 4.64629 9.97083 5.20044 9.9375 6.02522C9.9375 6.17987 9.95833 6.32592 10 6.46337C10.0417 6.60084 10.0792 6.72972 10.1125 6.85L10.8125 8.775ZM6 14.0625C6.23333 14.0625 6.51667 14.0042 6.85 13.8875L8.775 13.1875C8.73333 13.0708 8.7 12.9512 8.675 12.8286C8.65 12.706 8.62917 12.5882 8.6125 12.475C7.9125 12.3417 7.25833 12.0875 6.65 11.7125C6.04167 11.3375 5.54167 10.8458 5.15 10.2375C5.075 10.1375 4.97708 10.0625 4.85625 10.0125C4.73542 9.9625 4.60833 9.9375 4.475 9.9375C4.30527 9.9375 4.17325 9.99271 4.07895 10.1031C3.98465 10.2135 3.9375 10.3792 3.9375 10.6C3.9375 11.5166 4.1125 12.3228 4.4625 13.0187C4.8125 13.7146 5.325 14.0625 6 14.0625ZM10.6 20.0625C11.3919 20.0625 12.1711 19.9021 12.9376 19.5813C13.7042 19.2604 14.0792 18.7042 14.0625 17.9125C14.0625 17.7701 14.0438 17.6366 14.0063 17.5119C13.9688 17.3873 13.9292 17.2667 13.8875 17.15L13.1875 15.225C13.0708 15.2667 12.9512 15.3 12.8286 15.325C12.706 15.35 12.5882 15.3708 12.475 15.3875C12.3417 16.0875 12.0875 16.7417 11.7125 17.35C11.3375 17.9583 10.8458 18.4583 10.2375 18.85C10.1375 18.925 10.0604 19.0229 10.0062 19.1438C9.95208 19.2646 9.92917 19.3875 9.9375 19.5125C9.95643 19.6592 10.0133 19.7875 10.108 19.8975C10.2027 20.0075 10.3667 20.0625 10.6 20.0625ZM19.42 14.0625C19.59 14.0625 19.7396 14.0165 19.8687 13.9245C19.9979 13.8325 20.0625 13.6576 20.0625 13.4C20.0625 12.755 19.9255 12.0209 19.6514 11.1977C19.3773 10.3745 18.8206 9.95447 17.9812 9.9375C17.8271 9.9375 17.6792 9.95417 17.5375 9.9875C17.3958 10.0208 17.2652 10.0547 17.1457 10.0892L15.225 10.8125C15.2667 10.9292 15.3 11.0488 15.325 11.1714C15.35 11.294 15.3708 11.4119 15.3875 11.525C16.0875 11.6583 16.7417 11.9125 17.35 12.2875C17.9583 12.6625 18.4583 13.1542 18.85 13.7625C18.9083 13.8542 18.9896 13.9271 19.0938 13.9812C19.1979 14.0354 19.3067 14.0625 19.42 14.0625Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Footstool.tsx b/components/Icons/Footstool.tsx
new file mode 100644
index 000000000..becb0fd80
--- /dev/null
+++ b/components/Icons/Footstool.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function FootstoolIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_81_881"
+        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_81_881)">
+        <path
+          d="M3.2251 19.8125V9.9444C3.2251 9.40648 3.41468 8.95211 3.79385 8.58127C4.17301 8.21044 4.63195 8.02502 5.17065 8.02502C14.2941 8.02502 15.6761 8.02502 18.8295 8.02502C19.3682 8.02502 19.8272 8.21044 20.2063 8.58127C20.5855 8.95211 20.7751 9.40648 20.7751 9.9444V19.8125C20.7751 20.0709 20.6834 20.2917 20.5001 20.475C20.3168 20.6584 20.0959 20.75 19.8376 20.75C19.5793 20.75 19.3584 20.6584 19.1751 20.475C18.9918 20.2917 18.9001 20.0709 18.9001 19.8125V14.8H5.1001V19.8125C5.1001 20.0709 5.00843 20.2917 4.8251 20.475C4.64176 20.6584 4.42093 20.75 4.1626 20.75C3.90426 20.75 3.68343 20.6584 3.5001 20.475C3.31676 20.2917 3.2251 20.0709 3.2251 19.8125ZM5.1001 12.925H18.9001V9.90003H5.1001V12.925Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Garage.tsx b/components/Icons/Garage.tsx
new file mode 100644
index 000000000..b715532cc
--- /dev/null
+++ b/components/Icons/Garage.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function GarageIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3539"
+        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_3539)">
+        <path
+          d="M4.13745 21.75C3.62182 21.75 3.18041 21.5664 2.81323 21.1992C2.44604 20.832 2.26245 20.3906 2.26245 19.875V4.125C2.26245 3.60937 2.44604 3.16796 2.81323 2.80078C3.18041 2.43359 3.62182 2.25 4.13745 2.25H19.8875C20.4031 2.25 20.8445 2.43359 21.2117 2.80078C21.5789 3.16796 21.7625 3.60937 21.7625 4.125V19.875C21.7625 20.3906 21.5789 20.832 21.2117 21.1992C20.8445 21.5664 20.4031 21.75 19.8875 21.75H4.13745ZM4.13745 19.875H19.8875V4.125H4.13745V19.875ZM9.01508 13.95C8.74666 13.95 8.52078 13.8592 8.33745 13.6776C8.15412 13.4961 8.06245 13.2711 8.06245 13.0026C8.06245 12.7342 8.15324 12.5083 8.33483 12.325C8.51639 12.1417 8.74139 12.05 9.00983 12.05C9.27824 12.05 9.50412 12.1408 9.68745 12.3224C9.87078 12.5039 9.96245 12.7289 9.96245 12.9974C9.96245 13.2658 9.87166 13.4917 9.69008 13.675C9.50851 13.8583 9.28351 13.95 9.01508 13.95ZM15.0151 13.95C14.7467 13.95 14.5208 13.8592 14.3375 13.6776C14.1541 13.4961 14.0625 13.2711 14.0625 13.0026C14.0625 12.7342 14.1532 12.5083 14.3348 12.325C14.5164 12.1417 14.7414 12.05 15.0098 12.05C15.2782 12.05 15.5041 12.1408 15.6875 12.3224C15.8708 12.5039 15.9625 12.7289 15.9625 12.9974C15.9625 13.2658 15.8717 13.4917 15.6901 13.675C15.5085 13.8583 15.2835 13.95 15.0151 13.95ZM6.14995 18.325C6.40828 18.325 6.62912 18.2333 6.81245 18.05C6.99578 17.8667 7.08745 17.6458 7.08745 17.3875V16.35H16.9375V17.3875C16.9375 17.6458 17.0291 17.8667 17.2125 18.05C17.3958 18.2333 17.6166 18.325 17.875 18.325C18.1333 18.325 18.3541 18.2333 18.5375 18.05C18.7208 17.8667 18.8125 17.6458 18.8125 17.3875V11.4625C18.8125 11.3526 18.8041 11.2466 18.7875 11.1445C18.7708 11.0424 18.7458 10.9442 18.7125 10.85L17.375 6.9625C17.2416 6.5875 17.0145 6.28333 16.6937 6.05C16.3729 5.81667 16.0083 5.7 15.6 5.7H8.42495C8.01662 5.7 7.65203 5.81667 7.3312 6.05C7.01037 6.28333 6.78328 6.5875 6.64995 6.9625L5.31245 10.85C5.27912 10.9442 5.25412 11.0424 5.23745 11.1445C5.22078 11.2466 5.21245 11.3526 5.21245 11.4625V17.3875C5.21245 17.6458 5.30412 17.8667 5.48745 18.05C5.67078 18.2333 5.89162 18.325 6.14995 18.325ZM7.68745 9.65L8.41245 7.575H15.6125L16.3375 9.65H7.68745ZM7.08745 14.475V11.525H16.9375V14.475H7.08745Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Golf.tsx b/components/Icons/Golf.tsx
new file mode 100644
index 000000000..027c906d7
--- /dev/null
+++ b/components/Icons/Golf.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function GolfIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3499"
+        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_3499)">
+        <path
+          d="M19.4 20.8C19.0041 20.8 18.6677 20.6614 18.3906 20.3844C18.1135 20.1073 17.975 19.7708 17.975 19.375C17.975 18.9792 18.1135 18.6427 18.3906 18.3656C18.6677 18.0885 19.0041 17.95 19.4 17.95C19.7958 17.95 20.1322 18.0885 20.4093 18.3656C20.6864 18.6427 20.825 18.9792 20.825 19.375C20.825 19.7708 20.6864 20.1073 20.4093 20.3844C20.1322 20.6614 19.7958 20.8 19.4 20.8ZM10.0625 21.8C8.42912 21.8 7.0437 21.6104 5.9062 21.2312C4.7687 20.8521 4.19995 20.3998 4.19995 19.8743C4.19995 19.5081 4.47703 19.1792 5.0312 18.8875C5.58537 18.5958 6.29995 18.3667 7.17495 18.2V18.95C7.17495 19.2262 7.26826 19.4578 7.45488 19.6447C7.64151 19.8316 7.87276 19.925 8.14863 19.925C8.42451 19.925 8.6562 19.8316 8.8437 19.6447C9.0312 19.4578 9.12495 19.2262 9.12495 18.95V3.72499C9.12495 3.37082 9.27287 3.10519 9.5687 2.92811C9.86453 2.75103 10.1666 2.73749 10.475 2.88749L15.175 5.17499C15.5333 5.3463 15.7125 5.62663 15.7125 6.01596C15.7125 6.40531 15.5375 6.68749 15.1875 6.86249L11 9.02054V18C12.4083 18.0833 13.5812 18.2979 14.5187 18.6437C15.4562 18.9896 15.925 19.4006 15.925 19.8768C15.925 20.4006 15.352 20.8521 14.2062 21.2312C13.0604 21.6104 11.6791 21.8 10.0625 21.8Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Groceries.tsx b/components/Icons/Groceries.tsx
new file mode 100644
index 000000000..404f09f7b
--- /dev/null
+++ b/components/Icons/Groceries.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function GroceriesIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3518"
+        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_3518)">
+        <path
+          d="M15.9265 21.75C14.3088 21.75 12.9333 21.1838 11.8 20.0515C10.6667 18.9191 10.1 17.5441 10.1 15.9265C10.1 14.3088 10.6662 12.9333 11.7985 11.8C12.9309 10.6667 14.3059 10.1 15.9235 10.1C17.5412 10.1 18.9167 10.6662 20.05 11.7985C21.1833 12.9309 21.75 14.3059 21.75 15.9235C21.75 17.5412 21.1838 18.9167 20.0515 20.05C18.9191 21.1833 17.5441 21.75 15.9265 21.75ZM15.925 19.875C17.0167 19.875 17.9479 19.4896 18.7188 18.7188C19.4896 17.9479 19.875 17.0167 19.875 15.925C19.875 14.8333 19.4896 13.9021 18.7188 13.1313C17.9479 12.3604 17.0167 11.975 15.925 11.975C14.8333 11.975 13.9021 12.3604 13.1313 13.1313C12.3604 13.9021 11.975 14.8333 11.975 15.925C11.975 17.0167 12.3604 17.9479 13.1313 18.7188C13.9021 19.4896 14.8333 19.875 15.925 19.875ZM4.125 19.8C3.60937 19.8 3.16796 19.6164 2.80077 19.2492C2.43359 18.882 2.25 18.4406 2.25 17.925V10.4955C2.25 10.3652 2.26667 10.225 2.3 10.075C2.33333 9.925 2.3747 9.78368 2.4241 9.65105L4.4 5.075H4.2C3.93083 5.075 3.70521 4.98396 3.52313 4.80188C3.34104 4.61979 3.25 4.39417 3.25 4.125V3.19518C3.25 2.93173 3.34104 2.70833 3.52313 2.525C3.70521 2.34167 3.93083 2.25 4.2 2.25H10.95C11.2192 2.25 11.4448 2.34104 11.6269 2.52312C11.809 2.70521 11.9 2.93083 11.9 3.2V4.12982C11.9 4.39327 11.809 4.61667 11.6269 4.8C11.4448 4.98333 11.2192 5.075 10.95 5.075H10.725L12.475 9.05C12.1917 9.2 11.9125 9.36458 11.6375 9.54375C11.3625 9.72292 11.1125 9.91667 10.8875 10.125L8.7 5.075H6.425L4.125 10.45V17.925H8.4875C8.56705 18.2496 8.67443 18.5703 8.80965 18.8872C8.94488 19.2041 9.10417 19.5083 9.2875 19.8H4.125ZM15.925 9.1C15.26 9.1 14.6979 8.87025 14.2387 8.41075C13.7796 7.95123 13.55 7.38873 13.55 6.72325C13.55 6.05775 13.7796 5.49583 14.2387 5.0375C14.6979 4.57917 15.26 4.35 15.925 4.35V9.1C15.925 8.435 16.1546 7.87292 16.6137 7.41375C17.0729 6.95458 17.635 6.725 18.3 6.725C18.965 6.725 19.5271 6.95458 19.9862 7.41375C20.4454 7.87292 20.675 8.435 20.675 9.1H15.925Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Hanger.tsx b/components/Icons/Hanger.tsx
new file mode 100644
index 000000000..63c869619
--- /dev/null
+++ b/components/Icons/Hanger.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function HangerIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3472"
+        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_3472)">
+        <path
+          d="M6 17.875H18L12 13.425L6 17.875ZM10.625 7.0125C10.5473 7.18483 10.4346 7.32583 10.287 7.4355C10.1394 7.54517 9.96453 7.6 9.7625 7.6C9.50417 7.6 9.28333 7.50833 9.1 7.325C8.91667 7.14167 8.825 6.92121 8.825 6.66362C8.825 6.58787 8.82917 6.52083 8.8375 6.4625C8.84583 6.40417 8.86667 6.34167 8.9 6.275C9.175 5.66667 9.59388 5.17708 10.1566 4.80625C10.7194 4.43542 11.3384 4.25 12.0137 4.25C12.9462 4.25 13.7417 4.57292 14.4 5.21875C15.0583 5.86458 15.3875 6.65598 15.3875 7.59295C15.3875 8.35222 15.1625 9.03071 14.7125 9.62843C14.2625 10.2261 13.6708 10.6375 12.9375 10.8625V11.775L21.375 18.0625C21.5 18.142 21.5938 18.2494 21.6562 18.3847C21.7188 18.5199 21.75 18.6631 21.75 18.8143C21.75 19.0714 21.6583 19.2917 21.475 19.475C21.2917 19.6583 21.0708 19.75 20.8125 19.75H3.1875C2.92917 19.75 2.70833 19.6583 2.525 19.475C2.34167 19.2917 2.25 19.0714 2.25 18.8143C2.25 18.6631 2.28333 18.5208 2.35 18.3875C2.41667 18.2542 2.50833 18.1458 2.625 18.0625L11.0625 11.7698V10.0625C11.0625 9.79687 11.1564 9.57421 11.3442 9.39453C11.532 9.21484 11.759 9.125 12.025 9.125C12.45 9.125 12.8042 8.975 13.0875 8.675C13.3708 8.375 13.5125 8.0125 13.5125 7.5875C13.5125 7.17917 13.3667 6.83333 13.075 6.55C12.7833 6.26667 12.4292 6.125 12.0125 6.125C11.7125 6.125 11.4375 6.20208 11.1875 6.35625C10.9375 6.51042 10.75 6.72917 10.625 7.0125Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/HangerAlt.tsx b/components/Icons/HangerAlt.tsx
new file mode 100644
index 000000000..732656e60
--- /dev/null
+++ b/components/Icons/HangerAlt.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function HangerAltIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3439"
+        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_3439)">
+        <path
+          d="M7.1375 21.75V15.875H5.5375C4.90208 15.875 4.36198 15.651 3.9172 15.203C3.4724 14.755 3.25 14.211 3.25 13.571C3.25 13.107 3.37758 12.6792 3.63275 12.2876C3.88793 11.896 4.22285 11.6043 4.6375 11.4125L11.0625 8.5625V7.875C10.4708 7.675 9.99583 7.32766 9.6375 6.83297C9.27917 6.33829 9.1 5.78278 9.1 5.16645C9.1 4.35548 9.38309 3.66667 9.94928 3.1C10.5154 2.53333 11.2029 2.25 12.0118 2.25C12.8206 2.25 13.5083 2.53316 14.075 3.09948C14.6417 3.66579 14.925 4.35347 14.925 5.1625H13.05C13.05 4.87083 12.9508 4.625 12.7524 4.425C12.554 4.225 12.3082 4.125 12.0149 4.125C11.7216 4.125 11.475 4.22443 11.275 4.42328C11.075 4.62213 10.975 4.86853 10.975 5.1625C10.975 5.44938 11.0771 5.68985 11.2812 5.8839C11.4854 6.07797 11.7292 6.175 12.0125 6.175C12.2746 6.175 12.4943 6.26365 12.6715 6.44095C12.8489 6.61823 12.9375 6.83792 12.9375 7.1V8.5625L19.35 11.4125C19.775 11.6042 20.1146 11.8958 20.3687 12.2875C20.6229 12.6792 20.75 13.107 20.75 13.571C20.75 14.211 20.5276 14.755 20.0828 15.203C19.638 15.651 19.0979 15.875 18.4625 15.875H16.85V21.75H7.1375ZM5.5375 14H7.1375V13.025H16.85V14H18.4625C18.5875 14 18.6875 13.9542 18.7625 13.8625C18.8375 13.7708 18.875 13.6583 18.875 13.525C18.875 13.4313 18.85 13.3516 18.8 13.2859C18.75 13.2203 18.6843 13.1712 18.603 13.1387L12.0125 10.2125L5.38523 13.1387C5.30341 13.1712 5.23958 13.2229 5.19375 13.2937C5.14792 13.3646 5.125 13.4417 5.125 13.525C5.125 13.6583 5.1625 13.7708 5.2375 13.8625C5.3125 13.9542 5.4125 14 5.5375 14ZM9.0125 19.875H14.975V14.9H9.0125V19.875Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Heat.tsx b/components/Icons/Heat.tsx
new file mode 100644
index 000000000..ef093e955
--- /dev/null
+++ b/components/Icons/Heat.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function HeatIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3462"
+        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_3462)">
+        <path
+          d="M13.25 20.4875C13.1583 20.5708 13.0583 20.6333 12.95 20.675C12.8417 20.7167 12.7271 20.7375 12.6063 20.7375C12.4854 20.7375 12.3629 20.7106 12.2386 20.6567C12.1144 20.6029 12.0057 20.5298 11.9125 20.4375C11.2505 19.7277 10.7621 19.0018 10.4473 18.2597C10.1324 17.5176 9.975 16.7352 9.975 15.9125C9.975 15.314 10.0625 14.6831 10.2375 14.0199C10.4125 13.3566 10.7208 12.4917 11.1625 11.425C11.5375 10.5167 11.7979 9.81043 11.9437 9.3063C12.0896 8.80217 12.1625 8.33523 12.1625 7.90548C12.1625 7.34349 12.0395 6.81942 11.7936 6.33327C11.5476 5.84714 11.1622 5.35688 10.6375 4.8625C10.5458 4.77083 10.4771 4.66667 10.4313 4.55C10.3854 4.43333 10.3625 4.3125 10.3625 4.1875C10.3625 4.0625 10.3833 3.94583 10.425 3.8375C10.4667 3.72917 10.5254 3.62917 10.6011 3.5375C10.692 3.44583 10.7973 3.375 10.9169 3.325C11.0364 3.275 11.16 3.25 11.2875 3.25C11.4042 3.25 11.5187 3.27083 11.6312 3.3125C11.7438 3.35417 11.8458 3.41667 11.9375 3.5C12.6455 4.16247 13.1726 4.85725 13.5185 5.58435C13.8645 6.31145 14.0375 7.08267 14.0375 7.898C14.0375 8.46873 13.9521 9.068 13.7812 9.6958C13.6104 10.3236 13.3168 11.1372 12.9005 12.1367C12.5002 13.1039 12.225 13.851 12.075 14.3781C11.925 14.9052 11.85 15.4076 11.85 15.8853C11.85 16.4618 11.9688 17.0167 12.2063 17.5501C12.4439 18.0834 12.8085 18.6209 13.3 19.1625C13.3833 19.2542 13.4458 19.3563 13.4875 19.4688C13.5292 19.5812 13.55 19.6979 13.55 19.8188C13.55 19.9396 13.525 20.0583 13.475 20.175C13.425 20.2917 13.35 20.3958 13.25 20.4875ZM17.9635 20.5C17.8712 20.5833 17.7729 20.6437 17.6687 20.6812C17.5646 20.7188 17.4521 20.7375 17.3313 20.7375C17.2104 20.7375 17.0879 20.7117 16.9636 20.6601C16.8394 20.6085 16.7307 20.5385 16.6375 20.45C15.9792 19.7417 15.4917 19.0177 15.175 18.278C14.8583 17.5384 14.7 16.7541 14.7 15.925C14.7 15.325 14.7875 14.6896 14.9625 14.0188C15.1375 13.3479 15.4458 12.4833 15.8875 11.425C16.2625 10.5167 16.5208 9.81458 16.6625 9.31875C16.8042 8.82292 16.875 8.36014 16.875 7.93042C16.875 7.36847 16.7542 6.83958 16.5125 6.34375C16.2708 5.84792 15.8875 5.35833 15.3625 4.875C15.2708 4.7804 15.2021 4.67398 15.1562 4.55575C15.1104 4.4375 15.0875 4.31532 15.0875 4.1892C15.0875 4.06307 15.1062 3.94792 15.1438 3.84375C15.1813 3.73958 15.2398 3.64167 15.3193 3.55C15.4148 3.45833 15.524 3.38542 15.6469 3.33125C15.7698 3.27708 15.8927 3.25 16.0156 3.25C16.1385 3.25 16.2542 3.27292 16.3625 3.31875C16.4708 3.36458 16.5708 3.42917 16.6625 3.5125C17.3708 4.17083 17.8958 4.86428 18.2375 5.59285C18.5792 6.32143 18.75 7.09048 18.75 7.9C18.75 8.46667 18.6667 9.06667 18.5 9.7C18.3333 10.3333 18.0417 11.15 17.625 12.15C17.225 13.125 16.95 13.8763 16.8 14.4038C16.65 14.9313 16.575 15.4259 16.575 15.8875C16.575 16.4708 16.6958 17.0333 16.9375 17.575C17.1792 18.1167 17.5458 18.65 18.0375 19.175C18.1208 19.2667 18.1812 19.3681 18.2188 19.4792C18.2563 19.5903 18.275 19.7014 18.275 19.8125C18.275 19.9458 18.25 20.0729 18.2 20.1938C18.15 20.3146 18.0712 20.4167 17.9635 20.5ZM8.5202 20.5C8.43173 20.5833 8.33333 20.6458 8.225 20.6875C8.11667 20.7292 8.00208 20.75 7.88125 20.75C7.76042 20.75 7.63788 20.7231 7.51363 20.6692C7.38939 20.6154 7.28068 20.5423 7.1875 20.45C6.52917 19.7417 6.04167 19.0177 5.725 18.278C5.40833 17.5384 5.25 16.7541 5.25 15.925C5.25 15.325 5.33958 14.6896 5.51875 14.0188C5.69792 13.3479 6.00417 12.4833 6.4375 11.425C6.8125 10.5167 7.07292 9.81458 7.21875 9.31875C7.36458 8.82292 7.4375 8.36014 7.4375 7.93042C7.4375 7.36847 7.31458 6.83958 7.06875 6.34375C6.82292 5.84792 6.44167 5.35833 5.925 4.875C5.825 4.78333 5.75 4.67903 5.7 4.5621C5.65 4.44517 5.625 4.32433 5.625 4.1996C5.625 4.07487 5.64583 3.95833 5.6875 3.85C5.72917 3.74167 5.79167 3.6375 5.875 3.5375C5.96667 3.44583 6.07228 3.375 6.19185 3.325C6.31142 3.275 6.43497 3.25 6.5625 3.25C6.67917 3.25 6.79375 3.27083 6.90625 3.3125C7.01875 3.35417 7.12083 3.41667 7.2125 3.5C7.92055 4.16445 8.44756 4.85727 8.79352 5.57845C9.13951 6.29963 9.3125 7.07348 9.3125 7.9C9.3125 8.4599 9.23125 9.04779 9.06875 9.66367C8.90625 10.2796 8.61667 11.1042 8.2 12.1375C7.8 13.0875 7.525 13.8292 7.375 14.3625C7.225 14.8958 7.15 15.4042 7.15 15.8875C7.15 16.4708 7.26667 17.0333 7.5 17.575C7.73333 18.1167 8.09583 18.65 8.5875 19.175C8.67083 19.2667 8.73125 19.3678 8.76875 19.4785C8.80625 19.5891 8.825 19.6997 8.825 19.8104C8.825 19.9368 8.8 20.0625 8.75 20.1875C8.7 20.3125 8.6234 20.4167 8.5202 20.5Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Kayaking.tsx b/components/Icons/Kayaking.tsx
new file mode 100644
index 000000000..1d4061a3a
--- /dev/null
+++ b/components/Icons/Kayaking.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function KayakingIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3501"
+        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_3501)">
+        <path
+          d="M3 22.9374C2.74167 22.9374 2.52083 22.8458 2.3375 22.6624C2.15417 22.4791 2.0625 22.2583 2.0625 21.9999C2.0625 21.7416 2.15417 21.5208 2.3375 21.3374C2.52083 21.1541 2.74167 21.0624 3 21.0624C3.43333 21.0624 3.86458 20.9999 4.29375 20.8749C4.72292 20.7499 5.1375 20.5624 5.5375 20.3124C5.67083 20.2291 5.825 20.1874 6 20.1874C6.175 20.1874 6.32917 20.2291 6.4625 20.3124C6.8625 20.5624 7.27708 20.7499 7.70625 20.8749C8.13542 20.9999 8.56667 21.0624 9 21.0624C9.43333 21.0624 9.86875 20.9999 10.3063 20.8749C10.7438 20.7499 11.1583 20.5624 11.55 20.3124C11.6833 20.2291 11.8375 20.1874 12.0125 20.1874C12.1875 20.1874 12.3375 20.2291 12.4625 20.3124C12.8625 20.5624 13.2771 20.7499 13.7063 20.8749C14.1354 20.9999 14.5667 21.0624 15 21.0624C15.4333 21.0624 15.8688 20.9999 16.3063 20.8749C16.7438 20.7499 17.1583 20.5624 17.55 20.3124C17.675 20.2291 17.825 20.1874 18 20.1874C18.175 20.1874 18.325 20.2291 18.45 20.3124C18.8417 20.5624 19.2563 20.7499 19.6938 20.8749C20.1313 20.9999 20.5667 21.0624 21 21.0624C21.2583 21.0624 21.4792 21.1541 21.6625 21.3374C21.8458 21.5208 21.9375 21.7416 21.9375 21.9999C21.9375 22.2583 21.8458 22.4791 21.6625 22.6624C21.4792 22.8458 21.2583 22.9374 21 22.9374C20.4917 22.9374 19.9854 22.8687 19.4813 22.7312C18.9771 22.5937 18.4833 22.3833 18 22.0999C17.5167 22.3833 17.0229 22.5937 16.5188 22.7312C16.0146 22.8687 15.5083 22.9374 15 22.9374C14.4917 22.9374 13.9854 22.8687 13.4812 22.7312C12.9771 22.5937 12.4833 22.3833 12 22.0999C11.5167 22.3833 11.0229 22.5937 10.5188 22.7312C10.0146 22.8687 9.50833 22.9374 9 22.9374C8.49167 22.9374 7.98542 22.8687 7.48125 22.7312C6.97708 22.5937 6.48333 22.3833 6 22.0999C5.51667 22.3833 5.02292 22.5937 4.51875 22.7312C4.01458 22.8687 3.50833 22.9374 3 22.9374ZM12 9.44995C11.4583 9.44995 10.9979 9.26036 10.6188 8.8812C10.2396 8.50203 10.05 8.04161 10.05 7.49995C10.05 6.95828 10.2396 6.49786 10.6188 6.1187C10.9979 5.73953 11.4583 5.54995 12 5.54995C12.5417 5.54995 13.0021 5.73953 13.3813 6.1187C13.7604 6.49786 13.95 6.95828 13.95 7.49995C13.95 8.04161 13.7604 8.50203 13.3813 8.8812C13.0021 9.26036 12.5417 9.44995 12 9.44995ZM9 19.1749C8.55 19.1749 8.11875 19.0874 7.70625 18.9124C7.29375 18.7374 6.91667 18.5041 6.575 18.2124C6.40833 18.0708 6.21458 17.9979 5.99375 17.9937C5.77292 17.9895 5.57917 18.0583 5.4125 18.1999C5.24583 18.3333 5.07083 18.4583 4.8875 18.5749C4.70417 18.6916 4.50833 18.7916 4.3 18.8749C4.01667 18.8083 3.73542 18.7374 3.45625 18.6624C3.17708 18.5874 2.9 18.5041 2.625 18.4124C2.08333 18.2458 1.8125 17.9416 1.8125 17.4999C1.8125 17.0583 2.08333 16.7541 2.625 16.5874C3.34167 16.3541 4.09167 16.1437 4.875 15.9562C5.65833 15.7687 6.425 15.6083 7.175 15.4749L8.5375 11.2749C8.7125 10.7499 9.04167 10.3895 9.525 10.1937C10.0083 9.99786 10.475 10.0166 10.925 10.2499L13.5 11.5749L16.375 10.0499L18.0375 6.29995L17.675 5.32495C17.6417 5.20828 17.625 5.09161 17.625 4.97495C17.625 4.85828 17.65 4.74161 17.7 4.62495L18.4625 2.93745C18.5708 2.69578 18.7438 2.5312 18.9813 2.4437C19.2188 2.3562 19.4542 2.36245 19.6875 2.46245L21.0625 3.08745C21.3042 3.18745 21.4688 3.3562 21.5562 3.5937C21.6437 3.8312 21.6375 4.07078 21.5375 4.31245L20.7875 5.99995C20.7375 6.11661 20.6667 6.21661 20.575 6.29995C20.4833 6.38328 20.3792 6.44578 20.2625 6.48745L19.3 6.84995L15.5625 15.2999C16.5542 15.4166 17.5542 15.5895 18.5625 15.8187C19.5708 16.0479 20.5125 16.3041 21.3875 16.5874C21.9042 16.7541 22.1625 17.0583 22.1625 17.4999C22.1625 17.9416 21.9042 18.2458 21.3875 18.4124C21.1125 18.5041 20.8313 18.5874 20.5438 18.6624C20.2563 18.7374 19.975 18.8083 19.7 18.8749C19.4917 18.7916 19.2938 18.6937 19.1063 18.5812C18.9188 18.4687 18.7417 18.3416 18.575 18.1999C18.4083 18.0583 18.2167 17.9895 18 17.9937C17.7833 17.9979 17.5917 18.0708 17.425 18.2124C17.0833 18.5041 16.7063 18.7374 16.2937 18.9124C15.8812 19.0874 15.45 19.1749 15 19.1749C14.55 19.1749 14.1188 19.0874 13.7063 18.9124C13.2937 18.7374 12.9167 18.5041 12.575 18.2124C12.4083 18.0708 12.2167 17.9999 12 17.9999C11.7833 17.9999 11.5917 18.0708 11.425 18.2124C11.0833 18.5041 10.7063 18.7374 10.2937 18.9124C9.88125 19.0874 9.45 19.1749 9 19.1749ZM14.1125 15.1374L15.15 12.8124L13.5 13.6749L11.7125 12.7624L10.9625 15.0624H12C12.35 15.0624 12.7063 15.0666 13.0688 15.0749C13.4313 15.0833 13.7792 15.1041 14.1125 15.1374Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Kettle.tsx b/components/Icons/Kettle.tsx
new file mode 100644
index 000000000..28713719a
--- /dev/null
+++ b/components/Icons/Kettle.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function KettleIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3424"
+        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_3424)">
+        <path
+          d="M6.1875 17.0625V6.1L4.425 3.75C4.19167 3.44167 4.16082 3.11458 4.33245 2.76875C4.50408 2.42292 4.78493 2.25 5.175 2.25H15.7625C16.3411 2.25 16.8336 2.45328 17.2402 2.85983C17.6467 3.26638 17.85 3.75893 17.85 4.3375V5.1875H19.8875C20.4031 5.1875 20.8445 5.37109 21.2117 5.73828C21.5789 6.10546 21.7625 6.54687 21.7625 7.0625V12.125C21.7625 12.6406 21.5789 13.082 21.2117 13.4492C20.8445 13.8164 20.4031 14 19.8875 14H17.85V17.0625C17.85 17.5781 17.6664 18.0195 17.2992 18.3867C16.932 18.7539 16.4906 18.9375 15.975 18.9375H8.0625C7.54687 18.9375 7.10546 18.7539 6.73828 18.3867C6.37109 18.0195 6.1875 17.5781 6.1875 17.0625ZM8.0625 17.0625H15.975V4.125H7.05L8.0625 5.45V17.0625ZM17.85 12.125H19.8875V7.0625H17.85V12.125ZM13.6125 5.0625C13.2132 5.0625 12.8738 5.20104 12.5943 5.47813C12.3148 5.75521 12.175 6.09167 12.175 6.4875V14.7C12.175 15.0958 12.3148 15.4323 12.5945 15.7094C12.8741 15.9865 13.2137 16.125 13.6132 16.125C14.0127 16.125 14.35 15.9865 14.625 15.7094C14.9 15.4323 15.0375 15.0958 15.0375 14.7V6.4875C15.0375 6.09167 14.899 5.75521 14.6219 5.47813C14.3448 5.20104 14.0083 5.0625 13.6125 5.0625ZM4.1875 21.75C3.92917 21.75 3.70833 21.6583 3.525 21.475C3.34167 21.2917 3.25 21.0708 3.25 20.8125C3.25 20.5542 3.34167 20.3333 3.525 20.15C3.70833 19.9667 3.92917 19.875 4.1875 19.875H19.8125C20.0708 19.875 20.2917 19.9667 20.475 20.15C20.6583 20.3333 20.75 20.5542 20.75 20.8125C20.75 21.0708 20.6583 21.2917 20.475 21.475C20.2917 21.6583 20.0708 21.75 19.8125 21.75H4.1875Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Lamp.tsx b/components/Icons/Lamp.tsx
new file mode 100644
index 000000000..bde8af3dd
--- /dev/null
+++ b/components/Icons/Lamp.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function LampIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3441"
+        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_3441)">
+        <path
+          d="M12 18.9375C11.7416 18.9375 11.5208 18.8458 11.3375 18.6625C11.1541 18.4792 11.0625 18.2583 11.0625 18V10.9375H5.99997C5.68937 10.9375 5.44089 10.8125 5.25452 10.5625C5.06816 10.3125 5.02081 10.0333 5.11247 9.725L7.07497 3.375C7.20041 2.98437 7.42776 2.66796 7.75705 2.42578C8.08631 2.18359 8.45479 2.0625 8.86247 2.0625H15.1375C15.5452 2.0625 15.9136 2.18359 16.2429 2.42578C16.5722 2.66796 16.7995 2.98437 16.925 3.375L18.8875 9.725C18.9791 10.0333 18.9318 10.3125 18.7454 10.5625C18.5591 10.8125 18.3106 10.9375 18 10.9375H12.9375V18C12.9375 18.2583 12.8458 18.4792 12.6625 18.6625C12.4791 18.8458 12.2583 18.9375 12 18.9375ZM7.26247 9.0625H16.7375L15.15 3.9375H8.84997L7.26247 9.0625ZM8.99997 21.9375C8.74164 21.9375 8.52081 21.8458 8.33747 21.6625C8.15414 21.4792 8.06247 21.2583 8.06247 21C8.06247 20.7417 8.15414 20.5208 8.33747 20.3375C8.52081 20.1542 8.74164 20.0625 8.99997 20.0625H15C15.2583 20.0625 15.4791 20.1542 15.6625 20.3375C15.8458 20.5208 15.9375 20.7417 15.9375 21C15.9375 21.2583 15.8458 21.4792 15.6625 21.6625C15.4791 21.8458 15.2583 21.9375 15 21.9375H8.99997Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/LaundryMachine.tsx b/components/Icons/LaundryMachine.tsx
new file mode 100644
index 000000000..b4225197d
--- /dev/null
+++ b/components/Icons/LaundryMachine.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function LaundryMachineIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3471"
+        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_3471)">
+        <path
+          d="M6.1001 21.75C5.58446 21.75 5.14306 21.5664 4.77587 21.1992C4.40869 20.832 4.2251 20.3906 4.2251 19.875V4.125C4.2251 3.60937 4.40869 3.16796 4.77587 2.80078C5.14306 2.43359 5.58446 2.25 6.1001 2.25H17.9001C18.4157 2.25 18.8571 2.43359 19.2243 2.80078C19.5915 3.16796 19.7751 3.60937 19.7751 4.125V19.875C19.7751 20.3906 19.5915 20.832 19.2243 21.1992C18.8571 21.5664 18.4157 21.75 17.9001 21.75H6.1001ZM6.1001 19.875H17.9001V4.125H6.1001V19.875ZM11.9999 18.825C13.3417 18.825 14.4855 18.3521 15.4313 17.4064C16.3772 16.4607 16.8501 15.317 16.8501 13.9752C16.8501 12.6334 16.3772 11.4896 15.4315 10.5437C14.4858 9.59792 13.3421 9.125 12.0003 9.125C10.6585 9.125 9.51468 9.59786 8.56885 10.5436C7.62301 11.4893 7.1501 12.633 7.1501 13.9748C7.1501 15.3166 7.62296 16.4604 8.56867 17.4062C9.51439 18.3521 10.6581 18.825 11.9999 18.825ZM12.0235 17.1C11.6162 17.1 11.223 17.0229 10.8438 16.8688C10.4647 16.7146 10.1251 16.4917 9.8251 16.2L14.2251 11.8C14.5251 12.0957 14.7501 12.4342 14.9001 12.8155C15.0501 13.1968 15.1251 13.5911 15.1251 13.9984C15.1251 14.86 14.8236 15.5923 14.2205 16.1954C13.6174 16.7985 12.8851 17.1 12.0235 17.1ZM8.07247 7.025C8.34089 7.025 8.56676 6.93421 8.7501 6.75262C8.93343 6.57106 9.0251 6.34606 9.0251 6.07762C9.0251 5.80921 8.93431 5.58333 8.75272 5.4C8.57116 5.21667 8.34616 5.125 8.07772 5.125C7.80931 5.125 7.58343 5.21579 7.4001 5.39738C7.21676 5.57894 7.1251 5.80394 7.1251 6.07238C7.1251 6.34079 7.21589 6.56667 7.39747 6.75C7.57904 6.93333 7.80404 7.025 8.07247 7.025ZM10.9975 7.025C11.2659 7.025 11.4918 6.93421 11.6751 6.75262C11.8584 6.57106 11.9501 6.34606 11.9501 6.07762C11.9501 5.80921 11.8593 5.58333 11.6777 5.4C11.4962 5.21667 11.2712 5.125 11.0027 5.125C10.7343 5.125 10.5084 5.21579 10.3251 5.39738C10.1418 5.57894 10.0501 5.80394 10.0501 6.07238C10.0501 6.34079 10.1409 6.56667 10.3225 6.75C10.504 6.93333 10.729 7.025 10.9975 7.025Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/LocalBar.tsx b/components/Icons/LocalBar.tsx
new file mode 100644
index 000000000..7a5b3bb51
--- /dev/null
+++ b/components/Icons/LocalBar.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function LocalBarIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3510"
+        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_3510)">
+        <path
+          d="M11.0625 18.95V13.875L3.68755 5.56248C3.57088 5.42914 3.47713 5.28539 3.4063 5.13123C3.33547 4.97706 3.30005 4.81248 3.30005 4.63748C3.30005 4.23748 3.43963 3.90206 3.7188 3.63123C3.99797 3.36039 4.33755 3.22498 4.73755 3.22498H19.2625C19.6625 3.22498 20.0021 3.36039 20.2813 3.63123C20.5605 3.90206 20.7 4.23748 20.7 4.63748C20.7 4.81248 20.6646 4.97706 20.5938 5.13123C20.523 5.28539 20.4292 5.42914 20.3125 5.56248L12.9375 13.875V18.95H16.875C17.1334 18.95 17.3542 19.0416 17.5375 19.225C17.7209 19.4083 17.8125 19.6291 17.8125 19.8875C17.8125 20.1458 17.7209 20.3666 17.5375 20.55C17.3542 20.7333 17.1334 20.825 16.875 20.825H7.12505C6.86672 20.825 6.64588 20.7333 6.46255 20.55C6.27922 20.3666 6.18755 20.1458 6.18755 19.8875C6.18755 19.6291 6.27922 19.4083 6.46255 19.225C6.64588 19.0416 6.86672 18.95 7.12505 18.95H11.0625ZM7.52505 7.07498H16.475L18.25 5.09998H5.75005L7.52505 7.07498ZM12 12.075L14.8125 8.94998H9.18755L12 12.075Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Nature.tsx b/components/Icons/Nature.tsx
new file mode 100644
index 000000000..4c48c377f
--- /dev/null
+++ b/components/Icons/Nature.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function NatureIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_4039_3271"
+        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_4039_3271)">
+        <path
+          d="M5 22V20H11V16H9C7.61667 16 6.4375 15.5125 5.4625 14.5375C4.4875 13.5625 4 12.3833 4 11C4 10 4.275 9.07917 4.825 8.2375C5.375 7.39583 6.11667 6.78333 7.05 6.4C7.2 5.15 7.74583 4.10417 8.6875 3.2625C9.62917 2.42083 10.7333 2 12 2C13.2667 2 14.3708 2.42083 15.3125 3.2625C16.2542 4.10417 16.8 5.15 16.95 6.4C17.8833 6.78333 18.625 7.39583 19.175 8.2375C19.725 9.07917 20 10 20 11C20 12.3833 19.5125 13.5625 18.5375 14.5375C17.5625 15.5125 16.3833 16 15 16H13V20H19V22H5ZM9 14H15C15.8333 14 16.5417 13.7083 17.125 13.125C17.7083 12.5417 18 11.8333 18 11C18 10.4 17.8292 9.85 17.4875 9.35C17.1458 8.85 16.7 8.48333 16.15 8.25L15.1 7.8L14.95 6.65C14.85 5.9 14.5208 5.27083 13.9625 4.7625C13.4042 4.25417 12.75 4 12 4C11.25 4 10.5958 4.25417 10.0375 4.7625C9.47917 5.27083 9.15 5.9 9.05 6.65L8.9 7.8L7.85 8.25C7.3 8.48333 6.85417 8.85 6.5125 9.35C6.17083 9.85 6 10.4 6 11C6 11.8333 6.29167 12.5417 6.875 13.125C7.45833 13.7083 8.16667 14 9 14Z"
+          fill="#1C1B1F"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Nightlife.tsx b/components/Icons/Nightlife.tsx
new file mode 100644
index 000000000..093099cb9
--- /dev/null
+++ b/components/Icons/Nightlife.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function NightlifeIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3488"
+        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_3488)">
+        <path
+          d="M7.06249 17.975V13.9L2.22499 6.64995C2.00833 6.34162 1.99166 6.02287 2.17499 5.6937C2.35833 5.36453 2.63749 5.19995 3.01249 5.19995H12.9875C13.3625 5.19995 13.6417 5.36453 13.825 5.6937C14.0083 6.02287 13.9917 6.34162 13.775 6.64995L8.93749 13.9V17.975H9.97499C10.2333 17.975 10.4542 18.0666 10.6375 18.25C10.8208 18.4333 10.9125 18.6541 10.9125 18.9125C10.9125 19.1708 10.8208 19.3916 10.6375 19.575C10.4542 19.7583 10.2333 19.85 9.97499 19.85H6.02499C5.76666 19.85 5.54583 19.7583 5.36249 19.575C5.17916 19.3916 5.08749 19.1708 5.08749 18.9125C5.08749 18.6541 5.17916 18.4333 5.36249 18.25C5.54583 18.0666 5.76666 17.975 6.02499 17.975H7.06249ZM5.93749 9.04995H10.0875L11.4625 7.07495H4.56249L5.93749 9.04995ZM15.8625 19.85C15.0542 19.85 14.3646 19.5645 13.7937 18.9937C13.2229 18.4229 12.9375 17.7333 12.9375 16.925C12.9375 16.1166 13.2229 15.427 13.7937 14.8562C14.3646 14.2854 15.0542 14 15.8625 14C16.0458 14 16.225 14.0145 16.4 14.0437C16.575 14.0729 16.7458 14.1333 16.9125 14.225V6.13745C16.9125 5.87912 17.0042 5.65828 17.1875 5.47495C17.3708 5.29162 17.5917 5.19995 17.85 5.19995H20.3125C20.7125 5.19995 21.05 5.33745 21.325 5.61245C21.6 5.88745 21.7375 6.22495 21.7375 6.62495C21.7375 7.02495 21.6 7.36245 21.325 7.63745C21.05 7.91245 20.7125 8.04995 20.3125 8.04995H18.7875V16.925C18.7875 17.7333 18.5021 18.4229 17.9312 18.9937C17.3604 19.5645 16.6708 19.85 15.8625 19.85Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/NoSmoking.tsx b/components/Icons/NoSmoking.tsx
new file mode 100644
index 000000000..bdaa7d3f3
--- /dev/null
+++ b/components/Icons/NoSmoking.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function NoSmokingIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3437"
+        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_3437)">
+        <path
+          d="M3.6999 15.825C3.31795 15.825 2.9933 15.6912 2.72595 15.4236C2.45859 15.1559 2.3249 14.8309 2.3249 14.4486C2.3249 14.0662 2.45859 13.7417 2.72595 13.475C2.9933 13.2084 3.31795 13.075 3.6999 13.075H10.5499L1.7749 4.30005L3.0999 3.00005L21.0999 21L19.7999 22.325L13.2999 15.825H3.6999ZM18.5889 13.075C18.7879 13.075 18.952 13.14 19.0812 13.2698C19.2103 13.3997 19.2749 13.5639 19.2749 13.7625V15.1375C19.2749 15.3459 19.2136 15.5125 19.091 15.6375C18.9684 15.7625 18.8172 15.825 18.6374 15.825H18.5749L17.8999 15.15V13.7625C17.8999 13.5639 17.965 13.3997 18.0951 13.2698C18.2252 13.14 18.3898 13.075 18.5889 13.075ZM20.9639 13.075C21.1629 13.075 21.327 13.14 21.4562 13.27C21.5853 13.4 21.6499 13.5644 21.6499 13.7631V15.1394C21.6499 15.3382 21.5848 15.5021 21.4547 15.6313C21.3246 15.7605 21.16 15.825 20.961 15.825C20.7619 15.825 20.5978 15.7601 20.4687 15.6301C20.3395 15.5001 20.2749 15.3357 20.2749 15.1369V13.7607C20.2749 13.5619 20.34 13.398 20.4701 13.2688C20.6002 13.1396 20.7648 13.075 20.9639 13.075ZM15.8249 13.075H16.2374C16.436 13.075 16.6003 13.14 16.7301 13.2698C16.86 13.3997 16.9249 13.5639 16.9249 13.7625V14.175L15.8249 13.075ZM18.586 12.025C18.3869 12.025 18.2228 11.9601 18.0937 11.8302C17.9645 11.7004 17.8999 11.5362 17.8999 11.3375V10.75C17.8999 10.125 17.7132 9.63963 17.3397 9.2938C16.9662 8.94797 16.5196 8.77505 15.9999 8.77505H14.4499C13.5582 8.77505 12.8062 8.4646 12.1937 7.8437C11.5812 7.22281 11.2749 6.4666 11.2749 5.57505C11.2749 4.69172 11.5812 3.93755 12.1937 3.31255C12.8062 2.68755 13.5582 2.37505 14.4499 2.37505C14.6485 2.37505 14.8128 2.44012 14.9426 2.57025C15.0725 2.70038 15.1374 2.86497 15.1374 3.064C15.1374 3.26303 15.0725 3.42713 14.9426 3.5563C14.8128 3.68547 14.6485 3.75005 14.4499 3.75005C13.9582 3.75005 13.5353 3.92505 13.1812 4.27505C12.827 4.62505 12.6499 5.05838 12.6499 5.57505C12.6499 6.09172 12.827 6.52505 13.1812 6.87505C13.5353 7.22505 13.9582 7.40005 14.4499 7.40005H15.9999C16.8916 7.40005 17.6603 7.69172 18.3062 8.27505C18.952 8.85838 19.2749 9.58338 19.2749 10.45V11.3375C19.2749 11.5362 19.2098 11.7004 19.0797 11.8302C18.9496 11.9601 18.785 12.025 18.586 12.025ZM20.961 12.025C20.7619 12.025 20.5978 11.9601 20.4687 11.8302C20.3395 11.7004 20.2749 11.5362 20.2749 11.3375V9.82505C20.2749 8.73338 19.8964 7.80213 19.1393 7.0313C18.3822 6.26047 17.4441 5.87505 16.3249 5.87505C16.1263 5.87505 15.9621 5.80998 15.8322 5.67985C15.7023 5.54972 15.6374 5.38513 15.6374 5.1861C15.6374 4.98707 15.7023 4.82297 15.8322 4.6938C15.9621 4.56463 16.1263 4.50005 16.3249 4.50005C16.8182 4.50005 17.2456 4.31919 17.6073 3.95747C17.969 3.59577 18.1499 3.1683 18.1499 2.67505C18.1499 2.47643 18.215 2.3122 18.3451 2.18235C18.4752 2.05248 18.6398 1.98755 18.8389 1.98755C19.0379 1.98755 19.202 2.05248 19.3312 2.18235C19.4603 2.3122 19.5249 2.47643 19.5249 2.67505C19.5249 3.14172 19.4332 3.5688 19.2499 3.9563C19.0666 4.3438 18.8249 4.68972 18.5249 4.99407C19.4332 5.38972 20.1812 6.02088 20.7687 6.88755C21.3562 7.75422 21.6499 8.73338 21.6499 9.82505V11.3375C21.6499 11.5362 21.5848 11.7004 21.4547 11.8302C21.3246 11.9601 21.16 12.025 20.961 12.025Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/OutdoorFurniture.tsx b/components/Icons/OutdoorFurniture.tsx
new file mode 100644
index 000000000..3ddac9f38
--- /dev/null
+++ b/components/Icons/OutdoorFurniture.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function OutdoorFurnitureIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_81_883"
+        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_81_883)">
+        <path
+          d="M11.0625 20.8625V9.00002H3.77497C3.54164 9.00002 3.39164 8.89169 3.32497 8.67502C3.25831 8.45836 3.32081 8.28336 3.51247 8.15002L11.4625 2.57502C11.6291 2.45836 11.8083 2.40002 12 2.40002C12.1916 2.40002 12.3708 2.45836 12.5375 2.57502L20.4875 8.15002C20.6791 8.28336 20.7416 8.45836 20.675 8.67502C20.6083 8.89169 20.4583 9.00002 20.225 9.00002H12.9375V20.8625C12.9375 21.1209 12.8458 21.3417 12.6625 21.525C12.4791 21.7084 12.2583 21.8 12 21.8C11.7416 21.8 11.5208 21.7084 11.3375 21.525C11.1541 21.3417 11.0625 21.1209 11.0625 20.8625ZM3.17497 20.8625V16.675L2.56247 13.2875C2.52081 13.0292 2.57289 12.7959 2.71872 12.5875C2.86456 12.3792 3.06664 12.2542 3.32497 12.2125C3.57497 12.1709 3.80206 12.2209 4.00622 12.3625C4.21039 12.5042 4.33747 12.7 4.38747 12.95L4.97497 15.975H8.06247C8.32081 15.975 8.54164 16.0667 8.72497 16.25C8.90831 16.4334 8.99997 16.6542 8.99997 16.9125V20.8625C8.99997 21.1209 8.90831 21.3417 8.72497 21.525C8.54164 21.7084 8.32081 21.8 8.06247 21.8C7.80414 21.8 7.58331 21.7084 7.39997 21.525C7.21664 21.3417 7.12497 21.1209 7.12497 20.8625V17.85H5.04997V20.8625C5.04997 21.1209 4.95831 21.3417 4.77497 21.525C4.59164 21.7084 4.37081 21.8 4.11247 21.8C3.85414 21.8 3.63331 21.7084 3.44997 21.525C3.26664 21.3417 3.17497 21.1209 3.17497 20.8625ZM15 20.8625V16.9125C15 16.6542 15.0916 16.4334 15.275 16.25C15.4583 16.0667 15.6791 15.975 15.9375 15.975H19.025L19.6125 12.95C19.6625 12.7 19.7896 12.5042 19.9937 12.3625C20.1979 12.2209 20.4291 12.1709 20.6875 12.2125C20.9458 12.2542 21.1458 12.3792 21.2875 12.5875C21.4291 12.7959 21.4791 13.0292 21.4375 13.2875L20.825 16.675V20.8625C20.825 21.1209 20.7333 21.3417 20.55 21.525C20.3666 21.7084 20.1458 21.8 19.8875 21.8C19.6291 21.8 19.4083 21.7084 19.225 21.525C19.0416 21.3417 18.95 21.1209 18.95 20.8625V17.85H16.875V20.8625C16.875 21.1209 16.7833 21.3417 16.6 21.525C16.4166 21.7084 16.1958 21.8 15.9375 21.8C15.6791 21.8 15.4583 21.7084 15.275 21.525C15.0916 21.3417 15 21.1209 15 20.8625ZM8.24997 7.12502H15.75L12 4.50002L8.24997 7.12502Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/RoomService.tsx b/components/Icons/RoomService.tsx
new file mode 100644
index 000000000..00aadd7d0
--- /dev/null
+++ b/components/Icons/RoomService.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function RoomServiceIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3469"
+        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_3469)">
+        <path
+          d="M3.23755 18.6875C2.97922 18.6875 2.75838 18.5959 2.57505 18.4125C2.39172 18.2292 2.30005 18.0084 2.30005 17.75C2.30005 17.4917 2.39172 17.2709 2.57505 17.0875C2.75838 16.9042 2.97922 16.8125 3.23755 16.8125H20.775C21.0334 16.8125 21.2542 16.9042 21.4375 17.0875C21.6209 17.2709 21.7125 17.4917 21.7125 17.75C21.7125 18.0084 21.6209 18.2292 21.4375 18.4125C21.2542 18.5959 21.0334 18.6875 20.775 18.6875H3.23755ZM3.23755 15.875V14.9625C3.23755 12.8852 3.88338 11.0513 5.17505 9.46077C6.46672 7.87029 8.11672 6.86255 10.125 6.43755V6.17505C10.125 5.65942 10.3087 5.21801 10.6761 4.85082C11.0436 4.48364 11.4852 4.30005 12.0011 4.30005C12.5171 4.30005 12.9584 4.48364 13.325 4.85082C13.6917 5.21801 13.875 5.65942 13.875 6.17505V6.43755C15.9 6.86255 17.5563 7.87029 18.8438 9.46077C20.1313 11.0513 20.775 12.8852 20.775 14.9625V15.875H3.23755ZM5.16255 14H18.85C18.6167 12.3 17.8515 10.8896 16.5544 9.7688C15.2573 8.64797 13.7386 8.08755 11.9981 8.08755C10.2577 8.08755 8.7438 8.64797 7.4563 9.7688C6.1688 10.8896 5.40422 12.3 5.16255 14Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Skateboarding.tsx b/components/Icons/Skateboarding.tsx
new file mode 100644
index 000000000..6c0106ff3
--- /dev/null
+++ b/components/Icons/Skateboarding.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function SkateboardingIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3737"
+        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_3737)">
+        <path
+          d="M7.24998 24C7.04998 24 6.87498 23.925 6.72498 23.775C6.57498 23.625 6.49998 23.4501 6.49998 23.25C6.49998 23.05 6.57498 22.875 6.72498 22.725C6.87498 22.5751 7.04998 22.5 7.24998 22.5C7.44998 22.5 7.62498 22.5751 7.77498 22.725C7.92498 22.875 7.99998 23.05 7.99998 23.25C7.99998 23.4501 7.92498 23.625 7.77498 23.775C7.62498 23.925 7.44998 24 7.24998 24ZM15.75 24C15.55 24 15.375 23.925 15.225 23.775C15.075 23.625 15 23.4501 15 23.25C15 23.05 15.075 22.875 15.225 22.725C15.375 22.5751 15.55 22.5 15.75 22.5C15.95 22.5 16.125 22.5751 16.275 22.725C16.425 22.875 16.5 23.05 16.5 23.25C16.5 23.4501 16.425 23.625 16.275 23.775C16.125 23.925 15.95 24 15.75 24ZM6.74998 21.9375C6.01664 21.9375 5.33956 21.7771 4.71873 21.4563C4.09789 21.1355 3.58331 20.7042 3.17498 20.1625C3.13331 20.0875 3.09998 20.0188 3.07498 19.9563C3.04998 19.8938 3.03748 19.8251 3.03748 19.75C3.03748 19.5667 3.09998 19.4063 3.22498 19.2688C3.34998 19.1313 3.51664 19.0625 3.72498 19.0625C3.84164 19.0625 3.94373 19.0855 4.03123 19.1313C4.11873 19.1771 4.19998 19.2459 4.27498 19.3375C4.48331 19.6209 4.74373 19.8625 5.05623 20.0625C5.36873 20.2626 5.70831 20.4084 6.07498 20.5L9.24998 16.6625L7.83748 12.4875C7.77081 12.2709 7.75414 12.0188 7.78748 11.7313C7.82081 11.4438 7.90831 11.1875 8.04998 10.9625L10.5625 6.93755H8.06248L6.66248 9.17505C6.52081 9.39172 6.32706 9.5313 6.08123 9.5938C5.83539 9.6563 5.60414 9.61672 5.38748 9.47505C5.17081 9.33338 5.03123 9.13547 4.96873 8.8813C4.90623 8.62713 4.94581 8.39172 5.08748 8.17505L6.76248 5.50005C6.84581 5.35838 6.95623 5.25005 7.09373 5.17505C7.23123 5.10005 7.38331 5.06255 7.54998 5.06255H12.7C13.1333 5.06255 13.4833 5.18338 13.75 5.42505C14.0166 5.66672 14.1958 5.89172 14.2875 6.10005L14.8125 7.30005C15.1041 7.97505 15.5312 8.55005 16.0937 9.02505C16.6562 9.50005 17.3041 9.81672 18.0375 9.97505C18.2958 10.0334 18.5104 10.1542 18.6812 10.3375C18.8521 10.5209 18.9375 10.7417 18.9375 11C18.9375 11.2584 18.85 11.475 18.675 11.65C18.5 11.825 18.2875 11.8959 18.0375 11.8625C17.0791 11.7209 16.2062 11.3813 15.4187 10.8438C14.6312 10.3063 13.9833 9.63755 13.475 8.83755L11.5875 11.8375L15.5 14.2625C15.6416 14.3459 15.75 14.4563 15.825 14.5938C15.9 14.7313 15.9375 14.8834 15.9375 15.05V20.5625H16.275C16.775 20.5625 17.2375 20.4521 17.6625 20.2313C18.0875 20.0105 18.4416 19.7125 18.725 19.3375C18.8 19.2459 18.8812 19.1771 18.9687 19.1313C19.0562 19.0855 19.1583 19.0625 19.275 19.0625C19.475 19.0625 19.6396 19.1313 19.7687 19.2688C19.8979 19.4063 19.9625 19.5667 19.9625 19.75C19.9625 19.8251 19.95 19.8938 19.925 19.9563C19.9 20.0188 19.8666 20.0875 19.825 20.1625C19.4166 20.7042 18.9062 21.1355 18.2937 21.4563C17.6812 21.7771 17.0083 21.9375 16.275 21.9375H6.74998ZM8.46248 20.5625H14.0625V15.8625L10.3125 13.5L11.275 16.5C11.325 16.65 11.3354 16.8042 11.3062 16.9625C11.2771 17.1209 11.2083 17.2625 11.1 17.3875L8.46248 20.5625ZM15 4.95005C14.4583 4.95005 13.9979 4.76047 13.6187 4.3813C13.2396 4.00213 13.05 3.54172 13.05 3.00005C13.05 2.45838 13.2396 1.99797 13.6187 1.6188C13.9979 1.23963 14.4583 1.05005 15 1.05005C15.5416 1.05005 16.0021 1.23963 16.3812 1.6188C16.7604 1.99797 16.95 2.45838 16.95 3.00005C16.95 3.54172 16.7604 4.00213 16.3812 4.3813C16.0021 4.76047 15.5416 4.95005 15 4.95005Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Smoking.tsx b/components/Icons/Smoking.tsx
new file mode 100644
index 000000000..58c30abce
--- /dev/null
+++ b/components/Icons/Smoking.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function SmokingIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3438"
+        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_3438)">
+        <path
+          d="M3.69995 18.725C3.318 18.725 2.99335 18.5912 2.726 18.3236C2.45863 18.0559 2.32495 17.7309 2.32495 17.3486C2.32495 16.9662 2.45863 16.6417 2.726 16.3751C2.99335 16.1084 3.318 15.975 3.69995 15.975H16.2125C16.4111 15.975 16.5753 16.04 16.7052 16.17C16.835 16.3 16.9 16.4644 16.9 16.6631V18.0394C16.9 18.2382 16.835 18.4021 16.7052 18.5313C16.5753 18.6605 16.4111 18.725 16.2125 18.725H3.69995ZM18.586 18.725C18.387 18.725 18.2229 18.6601 18.0937 18.5301C17.9645 18.4001 17.9 18.2357 17.9 18.037V16.6607C17.9 16.4619 17.965 16.298 18.0952 16.1688C18.2253 16.0396 18.3899 15.975 18.5889 15.975C18.7879 15.975 18.952 16.04 19.0812 16.17C19.2104 16.3 19.275 16.4644 19.275 16.6631V18.0394C19.275 18.2382 19.2099 18.4021 19.0798 18.5313C18.9496 18.6605 18.785 18.725 18.586 18.725ZM20.961 18.725C20.762 18.725 20.5979 18.6601 20.4687 18.5301C20.3395 18.4001 20.275 18.2357 20.275 18.037V16.6607C20.275 16.4619 20.34 16.298 20.4702 16.1688C20.6003 16.0396 20.7649 15.975 20.9639 15.975C21.1629 15.975 21.327 16.04 21.4562 16.17C21.5854 16.3 21.65 16.4644 21.65 16.6631V18.0394C21.65 18.2382 21.5849 18.4021 21.4548 18.5313C21.3246 18.6605 21.16 18.725 20.961 18.725ZM18.586 14.975C18.387 14.975 18.2229 14.9101 18.0937 14.7803C17.9645 14.6504 17.9 14.4862 17.9 14.2875V13.7C17.9 13.075 17.7083 12.5896 17.325 12.2438C16.9416 11.898 16.4916 11.725 15.975 11.725H14.45C13.5584 11.725 12.8022 11.4105 12.1813 10.7813C11.5604 10.1521 11.25 9.3938 11.25 8.5063C11.25 7.6188 11.5604 6.86672 12.1813 6.25005C12.8022 5.63338 13.5584 5.32505 14.45 5.32505C14.6486 5.32505 14.8128 5.39012 14.9427 5.52025C15.0725 5.65038 15.1375 5.81497 15.1375 6.014C15.1375 6.21303 15.0725 6.37713 14.9427 6.5063C14.8128 6.63547 14.6486 6.70005 14.45 6.70005C13.9567 6.70005 13.5292 6.8701 13.1675 7.2102C12.8058 7.55028 12.625 7.97945 12.625 8.4977C12.625 9.01593 12.8056 9.45422 13.1669 9.81255C13.5281 10.1709 13.9551 10.35 14.4478 10.35H15.975C16.8677 10.35 17.6409 10.6417 18.2945 11.225C18.9481 11.8084 19.275 12.5334 19.275 13.4001V14.2875C19.275 14.4862 19.2099 14.6504 19.0798 14.7803C18.9496 14.9101 18.785 14.975 18.586 14.975ZM20.961 14.975C20.762 14.975 20.5979 14.9101 20.4687 14.7803C20.3395 14.6504 20.275 14.4862 20.275 14.2875V12.75C20.275 11.6584 19.9 10.7313 19.15 9.9688C18.4 9.2063 17.4666 8.82505 16.35 8.82505C16.1513 8.82505 15.9871 8.75998 15.8573 8.62985C15.7274 8.49972 15.6625 8.33513 15.6625 8.1361C15.6625 7.93707 15.7274 7.77297 15.8573 7.6438C15.9871 7.51463 16.1513 7.45005 16.35 7.45005C16.8416 7.45005 17.2645 7.26919 17.6187 6.90747C17.9729 6.54577 18.15 6.1183 18.15 5.62505C18.15 5.12505 17.9729 4.69588 17.6187 4.33755C17.2645 3.97922 16.8416 3.80005 16.35 3.80005C16.1513 3.80005 15.9871 3.73498 15.8573 3.60485C15.7274 3.47472 15.6625 3.31013 15.6625 3.1111C15.6625 2.91207 15.7274 2.74797 15.8573 2.6188C15.9871 2.48963 16.1513 2.42505 16.35 2.42505C17.2416 2.42505 17.9937 2.73609 18.6062 3.35817C19.2187 3.98026 19.525 4.73792 19.525 5.63117C19.525 6.09376 19.4375 6.5188 19.2625 6.9063C19.0875 7.2938 18.85 7.63972 18.55 7.94407C19.4583 8.33972 20.202 8.96672 20.7812 9.82505C21.3604 10.6834 21.65 11.6584 21.65 12.75V14.2875C21.65 14.4862 21.5849 14.6504 21.4548 14.7803C21.3246 14.9101 21.16 14.975 20.961 14.975Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Spa.tsx b/components/Icons/Spa.tsx
new file mode 100644
index 000000000..f3141a4e4
--- /dev/null
+++ b/components/Icons/Spa.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function SpaIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3443"
+        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_3443)">
+        <path
+          d="M12.0013 4.97502C11.7254 4.97502 11.4938 4.88172 11.3063 4.6951C11.1188 4.50847 11.025 4.27722 11.025 4.00135C11.025 3.72547 11.1183 3.49377 11.3049 3.30627C11.4916 3.11877 11.7228 3.02502 11.9987 3.02502C12.2746 3.02502 12.5062 3.11833 12.6937 3.30495C12.8812 3.49158 12.975 3.72283 12.975 3.9987C12.975 4.27458 12.8817 4.50627 12.6951 4.69377C12.5084 4.88127 12.2772 4.97502 12.0013 4.97502ZM12.0013 1.97502C11.7254 1.97502 11.4938 1.88172 11.3063 1.6951C11.1188 1.50847 11.025 1.27722 11.025 1.00135C11.025 0.725466 11.1183 0.493774 11.3049 0.306274C11.4916 0.118774 11.7228 0.0250244 11.9987 0.0250244C12.2746 0.0250244 12.5062 0.118333 12.6937 0.30495C12.8812 0.491583 12.975 0.722833 12.975 0.9987C12.975 1.27458 12.8817 1.50627 12.6951 1.69377C12.5084 1.88127 12.2772 1.97502 12.0013 1.97502ZM8.4125 21.9375C7.3625 21.3042 6.54583 20.4604 5.9625 19.4063C5.37917 18.3521 5.07917 17.2167 5.0625 16C5.07083 14.65 5.43333 13.4104 6.15 12.2813C6.86667 11.1521 7.8375 10.2959 9.0625 9.71252V7.00002C9.0625 6.74169 9.15417 6.52086 9.3375 6.33752C9.52083 6.15419 9.74167 6.06252 10 6.06252H14C14.2583 6.06252 14.4792 6.15419 14.6625 6.33752C14.8458 6.52086 14.9375 6.74169 14.9375 7.00002V9.71252C16.1458 10.2959 17.1104 11.1521 17.8313 12.2813C18.5521 13.4104 18.9208 14.65 18.9375 16C18.9292 17.2167 18.6292 18.3521 18.0375 19.4063C17.4458 20.4604 16.6292 21.3042 15.5875 21.9375H8.4125ZM8.97152 20.0625H15.0285C15.6678 19.5792 16.1667 18.9834 16.525 18.275C16.8833 17.5667 17.0625 16.8076 17.0625 15.9977C17.0625 15.0192 16.8042 14.1207 16.2875 13.3024C15.7708 12.4842 15.0667 11.8625 14.175 11.4375L13.0625 10.9125V7.93752H10.9375V10.9125L9.825 11.4375C8.93005 11.86 8.22506 12.481 7.71003 13.3005C7.19501 14.1201 6.9375 15.0199 6.9375 16C6.9375 16.8084 7.11667 17.5667 7.475 18.275C7.83333 18.9834 8.33218 19.5792 8.97152 20.0625ZM7.00133 2.97502C6.72544 2.97502 6.49375 2.88172 6.30625 2.6951C6.11875 2.50847 6.025 2.27722 6.025 2.00135C6.025 1.72547 6.11831 1.49377 6.30493 1.30627C6.49156 1.11877 6.72281 1.02502 6.99867 1.02502C7.27456 1.02502 7.50625 1.11833 7.69375 1.30495C7.88125 1.49158 7.975 1.72283 7.975 1.9987C7.975 2.27458 7.88169 2.50627 7.69508 2.69377C7.50844 2.88127 7.27719 2.97502 7.00133 2.97502ZM17.0013 2.97502C16.7254 2.97502 16.4938 2.88172 16.3063 2.6951C16.1188 2.50847 16.025 2.27722 16.025 2.00135C16.025 1.72547 16.1183 1.49377 16.3049 1.30627C16.4916 1.11877 16.7228 1.02502 16.9987 1.02502C17.2746 1.02502 17.5063 1.11833 17.6938 1.30495C17.8813 1.49158 17.975 1.72283 17.975 1.9987C17.975 2.27458 17.8817 2.50627 17.6951 2.69377C17.5084 2.88127 17.2772 2.97502 17.0013 2.97502ZM9.00133 4.97502C8.72544 4.97502 8.49375 4.88172 8.30625 4.6951C8.11875 4.50847 8.025 4.27722 8.025 4.00135C8.025 3.72547 8.11831 3.49377 8.30492 3.30627C8.49156 3.11877 8.72281 3.02502 8.99867 3.02502C9.27456 3.02502 9.50625 3.11833 9.69375 3.30495C9.88125 3.49158 9.975 3.72283 9.975 3.9987C9.975 4.27458 9.88169 4.50627 9.69508 4.69377C9.50844 4.88127 9.27719 4.97502 9.00133 4.97502ZM15.0013 4.97502C14.7254 4.97502 14.4938 4.88172 14.3063 4.6951C14.1188 4.50847 14.025 4.27722 14.025 4.00135C14.025 3.72547 14.1183 3.49377 14.3049 3.30627C14.4916 3.11877 14.7228 3.02502 14.9987 3.02502C15.2746 3.02502 15.5063 3.11833 15.6938 3.30495C15.8813 3.49158 15.975 3.72283 15.975 3.9987C15.975 4.27458 15.8817 4.50627 15.6951 4.69377C15.5084 4.88127 15.2772 4.97502 15.0013 4.97502Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Street.tsx b/components/Icons/Street.tsx
new file mode 100644
index 000000000..414df197c
--- /dev/null
+++ b/components/Icons/Street.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function StreetIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_4039_3305"
+        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_4039_3305)">
+        <path
+          d="M4 20V4H6V20H4ZM11 20V16H13V20H11ZM18 20V4H20V20H18ZM11 14V10H13V14H11ZM11 8V4H13V8H11Z"
+          fill="#1C1B1F"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Swim.tsx b/components/Icons/Swim.tsx
new file mode 100644
index 000000000..abd2bd29a
--- /dev/null
+++ b/components/Icons/Swim.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function SwimIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3465"
+        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_3465)">
+        <path
+          d="M12 19.85C11.4 19.85 10.9333 20.0125 10.6 20.3375C10.2666 20.6625 9.64162 20.825 8.72495 20.825C7.80828 20.825 7.18328 20.6625 6.84995 20.3375C6.51662 20.0125 6.04995 19.85 5.44995 19.85C4.96662 19.85 4.58953 19.9584 4.3187 20.175C4.04787 20.3917 3.65968 20.5667 3.15413 20.7C2.90134 20.7667 2.67912 20.7141 2.48745 20.5422C2.29578 20.3704 2.19995 20.1516 2.19995 19.886C2.19995 19.6204 2.29162 19.3917 2.47495 19.2C2.65828 19.0084 2.87078 18.85 3.11245 18.725C3.39578 18.5834 3.69683 18.423 4.01558 18.2438C4.33433 18.0646 4.81245 17.975 5.44995 17.975C6.36662 17.975 6.99162 18.1375 7.32495 18.4625C7.65828 18.7875 8.12495 18.95 8.72495 18.95C9.32495 18.95 9.79162 18.7875 10.125 18.4625C10.4583 18.1375 11.0833 17.975 12 17.975C12.9166 17.975 13.5416 18.1375 13.875 18.4625C14.2083 18.7875 14.675 18.95 15.275 18.95C15.875 18.95 16.3416 18.7875 16.675 18.4625C17.0083 18.1375 17.6333 17.975 18.55 17.975C19.1875 17.975 19.6656 18.0646 19.9843 18.2438C20.3031 18.423 20.6041 18.5834 20.8875 18.725C21.1291 18.85 21.3416 19.0093 21.525 19.2027C21.7083 19.3962 21.8 19.6244 21.8 19.8875C21.8 20.1506 21.7034 20.3685 21.5103 20.5411C21.3172 20.7137 21.0971 20.7667 20.85 20.7C20.3416 20.5667 19.952 20.3917 19.6812 20.175C19.4104 19.9584 19.0333 19.85 18.55 19.85C17.95 19.85 17.4833 20.0125 17.15 20.3375C16.8166 20.6625 16.1916 20.825 15.275 20.825C14.3583 20.825 13.7333 20.6625 13.4 20.3375C13.0666 20.0125 12.6 19.85 12 19.85ZM12 15.4C11.3833 15.4 10.9187 15.5625 10.6062 15.8875C10.2937 16.2125 9.66662 16.375 8.72495 16.375C7.78328 16.375 7.15103 16.2125 6.8282 15.8875C6.50537 15.5625 6.04595 15.4 5.44995 15.4C4.96662 15.4 4.58953 15.5084 4.3187 15.725C4.04787 15.9417 3.65968 16.1167 3.15413 16.25C2.90134 16.3167 2.67912 16.2641 2.48745 16.0922C2.29578 15.9204 2.19995 15.7016 2.19995 15.436C2.19995 15.1704 2.29162 14.9417 2.47495 14.75C2.65828 14.5584 2.87078 14.4 3.11245 14.275C3.39578 14.1334 3.69683 13.973 4.01558 13.7938C4.33433 13.6146 4.81245 13.525 5.44995 13.525C6.36662 13.525 6.9937 13.6875 7.3312 14.0125C7.6687 14.3375 8.13328 14.5 8.72495 14.5C9.32495 14.5 9.79162 14.3375 10.125 14.0125C10.4583 13.6875 11.0833 13.525 12 13.525C12.9166 13.525 13.5416 13.6875 13.875 14.0125C14.2083 14.3375 14.675 14.5 15.275 14.5C15.875 14.5 16.3416 14.3375 16.675 14.0125C17.0083 13.6875 17.6333 13.525 18.55 13.525C19.1875 13.525 19.6656 13.6146 19.9843 13.7938C20.3031 13.973 20.6041 14.1334 20.8875 14.275C21.1291 14.4 21.3416 14.5593 21.525 14.7527C21.7083 14.9462 21.8 15.1744 21.8 15.4375C21.8 15.7006 21.7034 15.9185 21.5103 16.0911C21.3172 16.2637 21.0971 16.3167 20.85 16.25C20.3416 16.1167 19.952 15.9417 19.6812 15.725C19.4104 15.5084 19.0333 15.4 18.55 15.4C17.95 15.4 17.4895 15.5625 17.1687 15.8875C16.8479 16.2125 16.2166 16.375 15.275 16.375C14.354 16.375 13.728 16.2125 13.3968 15.8875C13.0656 15.5625 12.6 15.4 12 15.4ZM7.07495 11.375L10.3375 8.11255L9.26245 7.03755C8.85412 6.62922 8.43166 6.30955 7.99508 6.07855C7.55848 5.84753 7.0601 5.6922 6.49995 5.61255C6.18328 5.56255 5.91245 5.41871 5.68745 5.18102C5.46245 4.94336 5.34995 4.66607 5.34995 4.34917C5.34995 4.01642 5.4687 3.73755 5.7062 3.51255C5.9437 3.28755 6.22078 3.19172 6.53745 3.22505C7.41363 3.30625 8.16812 3.48894 8.8009 3.77312C9.4337 4.05731 10.0584 4.50795 10.675 5.12505L16.925 11.375C16.6666 11.5417 16.4125 11.6792 16.1625 11.7875C15.9125 11.8959 15.6186 11.95 15.2809 11.95C14.7019 11.95 14.2401 11.7834 13.8955 11.45C13.5508 11.1167 12.919 10.95 12 10.95C11.0809 10.95 10.4491 11.1167 10.1044 11.45C9.75978 11.7834 9.29798 11.95 8.71903 11.95C8.38131 11.95 8.08745 11.8959 7.83745 11.7875C7.58745 11.6792 7.33328 11.5417 7.07495 11.375ZM16.6 3.17505C17.279 3.17505 17.8529 3.41309 18.3217 3.88917C18.7905 4.36526 19.025 4.93414 19.025 5.59582C19.025 6.27364 18.7905 6.84797 18.3217 7.3188C17.8529 7.78963 17.279 8.02505 16.6 8.02505C15.921 8.02505 15.347 7.79024 14.8782 7.32062C14.4094 6.85099 14.175 6.27611 14.175 5.59597C14.175 4.93202 14.4094 4.36255 14.8782 3.88755C15.347 3.41255 15.921 3.17505 16.6 3.17505Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Thermostat.tsx b/components/Icons/Thermostat.tsx
new file mode 100644
index 000000000..2fd3ebe97
--- /dev/null
+++ b/components/Icons/Thermostat.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function ThermostatIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3477"
+        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_3477)">
+        <path
+          d="M12 21.75C10.6584 21.75 9.5188 21.2812 8.5813 20.3438C7.6438 19.4062 7.17505 18.267 7.17505 16.9258C7.17505 16.1503 7.34797 15.4208 7.6938 14.7375C8.03963 14.0542 8.52505 13.4833 9.15005 13.025V5.1C9.15005 4.30833 9.42713 3.63542 9.9813 3.08125C10.5355 2.52708 11.2084 2.25 12 2.25C12.7917 2.25 13.4646 2.52708 14.0188 3.08125C14.573 3.63542 14.85 4.30833 14.85 5.1V13.025C15.475 13.4833 15.9605 14.0542 16.3063 14.7375C16.6521 15.4208 16.825 16.1503 16.825 16.9258C16.825 18.267 16.3563 19.4062 15.4188 20.3438C14.4813 21.2812 13.3417 21.75 12 21.75ZM11.025 11.05H12.975V10.025H12V9.04375H12.975V7.08125H12V6.1H12.975V5.1C12.975 4.82375 12.8817 4.59219 12.6951 4.40533C12.5085 4.21844 12.2772 4.125 12.0014 4.125C11.7255 4.125 11.4938 4.21844 11.3063 4.40533C11.1188 4.59219 11.025 4.82375 11.025 5.1V11.05Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Tshirt.tsx b/components/Icons/Tshirt.tsx
new file mode 100644
index 000000000..e6643725b
--- /dev/null
+++ b/components/Icons/Tshirt.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function TshirtIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3467"
+        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_3467)">
+        <path
+          d="M6.20005 10.8L5.15005 11.4C4.92505 11.5333 4.6813 11.5646 4.4188 11.4937C4.1563 11.4229 3.95838 11.275 3.82505 11.05L1.92505 7.72498C1.79171 7.49998 1.76046 7.26039 1.8313 7.00623C1.90213 6.75206 2.05005 6.55831 2.27505 6.42498L7.85005 3.22498H9.52505C9.67505 3.22498 9.79588 3.27081 9.88755 3.36248C9.97921 3.45414 10.025 3.57498 10.025 3.72498V4.19998C10.025 4.74998 10.2167 5.21664 10.6 5.59998C10.9834 5.98331 11.45 6.17498 12 6.17498C12.55 6.17498 13.0167 5.98331 13.4 5.59998C13.7834 5.21664 13.975 4.74998 13.975 4.19998V3.72498C13.975 3.57498 14.0209 3.45414 14.1125 3.36248C14.2042 3.27081 14.325 3.22498 14.475 3.22498H16.15L21.725 6.42498C21.95 6.55831 22.098 6.75206 22.1688 7.00623C22.2396 7.26039 22.2084 7.49998 22.075 7.72498L20.175 11.05C20.0417 11.275 19.8459 11.4208 19.5875 11.4875C19.3292 11.5541 19.0834 11.5208 18.85 11.3875L17.8 10.8125V19.8C17.8 20.0666 17.7042 20.2958 17.5125 20.4875C17.3209 20.6791 17.0917 20.775 16.825 20.775H7.17505C6.90838 20.775 6.67921 20.6791 6.48755 20.4875C6.29588 20.2958 6.20005 20.0666 6.20005 19.8V10.8ZM8.07505 7.67498V18.9H15.925V7.67498L18.975 9.34998L20.025 7.62498L15.775 5.14998H15.725C15.5 5.99998 15.05 6.69581 14.375 7.23748C13.7 7.77914 12.9084 8.04998 12 8.04998C11.0917 8.04998 10.3 7.77914 9.62505 7.23748C8.95005 6.69581 8.50005 5.99998 8.27505 5.14998H8.22505L3.97505 7.62498L5.02505 9.34998L8.07505 7.67498Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/TvCasting.tsx b/components/Icons/TvCasting.tsx
new file mode 100644
index 000000000..ea6e7b90d
--- /dev/null
+++ b/components/Icons/TvCasting.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function TvCastingIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_69_3746"
+        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_3746)">
+        <path
+          d="M5.1375 15.9125H7.05C7.04167 15.3875 6.85208 14.9396 6.48125 14.5687C6.11042 14.1979 5.6625 14.0083 5.1375 14V15.9125ZM8.525 15.9125H9.9C9.9 14.5949 9.43566 13.4717 8.50697 12.543C7.57827 11.6143 6.45512 11.15 5.1375 11.15V12.525C6.07917 12.5333 6.87917 12.8646 7.5375 13.5187C8.19583 14.1729 8.525 14.9708 8.525 15.9125ZM11.375 15.9125H12.75C12.75 14.8658 12.5518 13.8785 12.1553 12.9507C11.7588 12.023 11.2156 11.2141 10.5257 10.5243C9.83584 9.83437 9.02702 9.29118 8.09925 8.8947C7.17147 8.49822 6.18422 8.29998 5.1375 8.29998V9.67783C6.8675 9.67783 8.33958 10.2836 9.55375 11.4952C10.7679 12.7067 11.375 14.1791 11.375 15.9125ZM4.125 18.8C3.60937 18.8 3.16796 18.6164 2.80077 18.2492C2.43359 17.882 2.25 17.4406 2.25 16.925V5.09998C2.25 4.58434 2.43359 4.14293 2.80077 3.77575C3.16796 3.40857 3.60937 3.22498 4.125 3.22498H19.875C20.3906 3.22498 20.832 3.40857 21.1992 3.77575C21.5664 4.14293 21.75 4.58434 21.75 5.09998V16.925C21.75 17.4406 21.5664 17.882 21.1992 18.2492C20.832 18.6164 20.3906 18.8 19.875 18.8H15.85V19.8375C15.85 20.0958 15.7583 20.3166 15.575 20.5C15.3917 20.6833 15.1708 20.775 14.9125 20.775H9.0875C8.82917 20.775 8.60833 20.6833 8.425 20.5C8.24167 20.3166 8.15 20.0958 8.15 19.8375V18.8H4.125ZM4.125 16.925H19.875V5.09998H4.125V16.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 15752b50c..f5410421f 100644
--- a/components/Icons/get-icon-by-icon-name.ts
+++ b/components/Icons/get-icon-by-icon-name.ts
@@ -4,8 +4,10 @@ import FacebookIcon from "./Facebook"
 import InstagramIcon from "./Instagram"
 import TripAdvisorIcon from "./TripAdvisor"
 import {
+  AccesoriesIcon,
   AccessibilityIcon,
   AccountCircleIcon,
+  AirIcon,
   AirplaneIcon,
   ArrowRightIcon,
   BarIcon,
@@ -22,27 +24,48 @@ import {
   ChevronRightSmallIcon,
   CloseIcon,
   CloseLargeIcon,
-  CoffeeIcon,
+  CoffeeAltIcon,
   ConciergeIcon,
+  ConvenienceStore24hIcon,
+  CoolIcon,
   CrossCircle,
   CulturalIcon,
   DoorOpenIcon,
+  DresserIcon,
   ElectricBikeIcon,
+  ElectricCarIcon,
   EmailIcon,
   EyeHideIcon,
   EyeShowIcon,
+  FanIcon,
   FitnessIcon,
+  FootstoolIcon,
   GalleryIcon,
+  GarageIcon,
   GiftIcon,
   GlobeIcon,
+  GolfIcon,
+  GroceriesIcon,
+  HangerAltIcon,
+  HangerIcon,
+  HeatIcon,
   HouseIcon,
   ImageIcon,
   InfoCircleIcon,
+  KayakingIcon,
+  KettleIcon,
+  LampIcon,
+  LaundryMachineIcon,
+  LocalBarIcon,
   LocationIcon,
   LockIcon,
   MapIcon,
   MinusIcon,
   MuseumIcon,
+  NatureIcon,
+  NightlifeIcon,
+  NoSmokingIcon,
+  OutdoorFurnitureIcon,
   ParkingIcon,
   People2Icon,
   PersonIcon,
@@ -51,14 +74,23 @@ import {
   PlusCircleIcon,
   PlusIcon,
   RestaurantIcon,
+  RoomServiceIcon,
   SaunaIcon,
   SearchIcon,
   ServiceIcon,
   ShoppingIcon,
+  SkateboardingIcon,
+  SmokingIcon,
   SnowflakeIcon,
+  SpaIcon,
   StarFilledIcon,
+  StreetIcon,
+  SwimIcon,
+  ThermostatIcon,
   TrainIcon,
+  TshirtIcon,
   TshirtWashIcon,
+  TvCastingIcon,
   WarningTriangle,
   WifiIcon,
 } from "."
@@ -67,10 +99,14 @@ import { IconName, IconProps } from "@/types/components/icon"
 
 export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
   switch (icon) {
+    case IconName.Accesories:
+      return AccesoriesIcon
     case IconName.Accessibility:
       return AccessibilityIcon
     case IconName.AccountCircle:
       return AccountCircleIcon
+    case IconName.Air:
+      return AirIcon
     case IconName.Airplane:
       return AirplaneIcon
     case IconName.ArrowRight:
@@ -105,32 +141,56 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
       return CloseIcon
     case IconName.CloseLarge:
       return CloseLargeIcon
-    case IconName.Coffee:
-      return CoffeeIcon
+    case IconName.ConvenienceStore24h:
+      return ConvenienceStore24hIcon
+    case IconName.Cool:
+      return CoolIcon
+    case IconName.CoffeeAlt:
+      return CoffeeAltIcon
     case IconName.Concierge:
       return ConciergeIcon
     case IconName.Cultural:
       return CulturalIcon
     case IconName.DoorOpen:
       return DoorOpenIcon
+    case IconName.Dresser:
+      return DresserIcon
     case IconName.ElectricBike:
       return ElectricBikeIcon
+    case IconName.ElectricCar:
+      return ElectricCarIcon
     case IconName.Email:
       return EmailIcon
     case IconName.EyeHide:
       return EyeHideIcon
     case IconName.EyeShow:
       return EyeShowIcon
+    case IconName.Fan:
+      return FanIcon
     case IconName.Facebook:
       return FacebookIcon
     case IconName.Fitness:
       return FitnessIcon
+    case IconName.Footstool:
+      return FootstoolIcon
     case IconName.Gallery:
       return GalleryIcon
+    case IconName.Garage:
+      return GarageIcon
     case IconName.Gift:
       return GiftIcon
     case IconName.Globe:
       return GlobeIcon
+    case IconName.Golf:
+      return GolfIcon
+    case IconName.Groceries:
+      return GroceriesIcon
+    case IconName.Hanger:
+      return HangerIcon
+    case IconName.HangerAlt:
+      return HangerAltIcon
+    case IconName.Heat:
+      return HeatIcon
     case IconName.House:
       return HouseIcon
     case IconName.Image:
@@ -139,6 +199,16 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
       return InfoCircleIcon
     case IconName.Instagram:
       return InstagramIcon
+    case IconName.Kayaking:
+      return KayakingIcon
+    case IconName.Kettle:
+      return KettleIcon
+    case IconName.Lamp:
+      return LampIcon
+    case IconName.LaundryMachine:
+      return LaundryMachineIcon
+    case IconName.LocalBar:
+      return LocalBarIcon
     case IconName.Location:
       return LocationIcon
     case IconName.Lock:
@@ -149,6 +219,14 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
       return MinusIcon
     case IconName.Museum:
       return MuseumIcon
+    case IconName.Nature:
+      return NatureIcon
+    case IconName.Nightlife:
+      return NightlifeIcon
+    case IconName.NoSmoking:
+      return NoSmokingIcon
+    case IconName.OutdoorFurniture:
+      return OutdoorFurnitureIcon
     case IconName.Parking:
       return ParkingIcon
     case IconName.Person:
@@ -165,6 +243,12 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
       return PlusCircleIcon
     case IconName.Restaurant:
       return RestaurantIcon
+    case IconName.RoomService:
+      return RoomServiceIcon
+    case IconName.Smoking:
+      return SmokingIcon
+    case IconName.Spa:
+      return SpaIcon
     case IconName.Sauna:
       return SaunaIcon
     case IconName.Search:
@@ -173,16 +257,28 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
       return ServiceIcon
     case IconName.Shopping:
       return ShoppingIcon
+    case IconName.Skateboarding:
+      return SkateboardingIcon
     case IconName.Snowflake:
       return SnowflakeIcon
     case IconName.StarFilled:
       return StarFilledIcon
+    case IconName.Street:
+      return StreetIcon
+    case IconName.Swim:
+      return SwimIcon
+    case IconName.Thermostat:
+      return ThermostatIcon
+    case IconName.Tshirt:
+      return TshirtIcon
     case IconName.Train:
       return TrainIcon
     case IconName.Tripadvisor:
       return TripAdvisorIcon
     case IconName.TshirtWash:
       return TshirtWashIcon
+    case IconName.TvCasting:
+      return TvCastingIcon
     case IconName.WarningTriangle:
       return WarningTriangle
     case IconName.Wifi:
diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx
index e8a0b6433..8a7764dd6 100644
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -1,5 +1,7 @@
+export { default as AccesoriesIcon } from "./Accesories"
 export { default as AccessibilityIcon } from "./Accessibility"
 export { default as AccountCircleIcon } from "./AccountCircle"
+export { default as AirIcon } from "./Air"
 export { default as AirplaneIcon } from "./Airplane"
 export { default as ArrowRightIcon } from "./ArrowRight"
 export { default as BarIcon } from "./Bar"
@@ -17,34 +19,55 @@ export { default as ChevronRightIcon } from "./ChevronRight"
 export { default as ChevronRightSmallIcon } from "./ChevronRightSmall"
 export { default as CloseIcon } from "./Close"
 export { default as CloseLargeIcon } from "./CloseLarge"
-export { default as CoffeeIcon } from "./Coffee"
+export { default as CoffeeAltIcon } from "./CoffeeAlt"
 export { default as ConciergeIcon } from "./Concierge"
+export { default as ConvenienceStore24hIcon } from "./ConvenienceStore24h"
+export { default as CoolIcon } from "./Cool"
 export { default as CreditCard } from "./CreditCard"
 export { default as CrossCircle } from "./CrossCircle"
 export { default as CulturalIcon } from "./Cultural"
 export { default as DeleteIcon } from "./Delete"
 export { default as DoorOpenIcon } from "./DoorOpen"
+export { default as DresserIcon } from "./Dresser"
 export { default as EditIcon } from "./Edit"
 export { default as ElectricBikeIcon } from "./ElectricBike"
+export { default as ElectricCarIcon } from "./ElectricCar"
 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 FanIcon } from "./Fan"
 export { default as FitnessIcon } from "./Fitness"
+export { default as FootstoolIcon } from "./Footstool"
 export { default as GalleryIcon } from "./Gallery"
+export { default as GarageIcon } from "./Garage"
 export { default as GiftIcon } from "./Gift"
 export { default as GlobeIcon } from "./Globe"
+export { default as GolfIcon } from "./Golf"
+export { default as GroceriesIcon } from "./Groceries"
+export { default as HangerIcon } from "./Hanger"
+export { default as HangerAltIcon } from "./HangerAlt"
 export { default as HeartIcon } from "./Heart"
+export { default as HeatIcon } from "./Heat"
 export { default as HouseIcon } from "./House"
 export { default as ImageIcon } from "./Image"
 export { default as InfoCircleIcon } from "./InfoCircle"
+export { default as KayakingIcon } from "./Kayaking"
+export { default as KettleIcon } from "./Kettle"
 export { default as KingBedIcon } from "./KingBed"
+export { default as LampIcon } from "./Lamp"
+export { default as LaundryMachineIcon } from "./LaundryMachine"
+export { default as LocalBarIcon } from "./LocalBar"
 export { default as LocationIcon } from "./Location"
 export { default as LockIcon } from "./Lock"
 export { default as MapIcon } from "./Map"
 export { default as MinusIcon } from "./Minus"
 export { default as MuseumIcon } from "./Museum"
+export { default as NatureIcon } from "./Nature"
+export { default as NightlifeIcon } from "./Nightlife"
 export { default as NoBreakfastIcon } from "./NoBreakfast"
+export { default as NoSmokingIcon } from "./NoSmoking"
+export { default as OutdoorFurnitureIcon } from "./OutdoorFurniture"
 export { default as ParkingIcon } from "./Parking"
 export { default as People2Icon } from "./People2"
 export { default as PersonIcon } from "./Person"
@@ -54,14 +77,23 @@ export { default as PlusIcon } from "./Plus"
 export { default as PlusCircleIcon } from "./PlusCircle"
 export { default as PriceTagIcon } from "./PriceTag"
 export { default as RestaurantIcon } from "./Restaurant"
+export { default as RoomServiceIcon } from "./RoomService"
 export { default as SaunaIcon } from "./Sauna"
 export { default as ScandicLogoIcon } from "./ScandicLogo"
 export { default as SearchIcon } from "./Search"
 export { default as ServiceIcon } from "./Service"
 export { default as ShoppingIcon } from "./Shopping"
+export { default as SkateboardingIcon } from "./Skateboarding"
+export { default as SmokingIcon } from "./Smoking"
 export { default as SnowflakeIcon } from "./Snowflake"
+export { default as SpaIcon } from "./Spa"
 export { default as StarFilledIcon } from "./StarFilled"
+export { default as StreetIcon } from "./Street"
+export { default as SwimIcon } from "./Swim"
+export { default as ThermostatIcon } from "./Thermostat"
 export { default as TrainIcon } from "./Train"
+export { default as TshirtIcon } from "./Tshirt"
 export { default as TshirtWashIcon } from "./TshirtWash"
+export { default as TvCastingIcon } from "./TvCasting"
 export { default as WarningTriangle } from "./WarningTriangle"
 export { default as WifiIcon } from "./Wifi"
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index 5692497f1..89e286185 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -6,6 +6,7 @@ import { imageMetaDataSchema, imageSizesSchema } from "./schemas/image"
 import { roomSchema } from "./schemas/room"
 import { getPoiGroupByCategoryName } from "./utils"
 
+import { FacilityEnum } from "@/types/enums/facilities"
 import { PointOfInterestCategoryNameEnum } from "@/types/hotel"
 
 const ratingsSchema = z
@@ -142,7 +143,7 @@ const hotelContentSchema = z.object({
 })
 
 const detailedFacilitySchema = z.object({
-  id: z.number(),
+  id: z.nativeEnum(FacilityEnum),
   name: z.string(),
   public: z.boolean(),
   sortOrder: z.number(),
@@ -402,7 +403,11 @@ export const getHotelDataSchema = z.object({
       }),
       location: locationSchema,
       hotelContent: hotelContentSchema,
-      detailedFacilities: z.array(detailedFacilitySchema),
+      detailedFacilities: z
+        .array(detailedFacilitySchema)
+        .transform((facilities) =>
+          facilities.sort((a, b) => b.sortOrder - a.sortOrder)
+        ),
       healthFacilities: z.array(healthFacilitySchema),
       merchantInformationData: merchantInformationSchema,
       rewardNight: rewardNightSchema,
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 4b3f1a84e..2fa4cfbe8 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -46,7 +46,7 @@ import {
   TWENTYFOUR_HOURS,
 } from "./utils"
 
-import { FacilityEnum } from "@/types/components/hotelPage/facilities"
+import { FacilityCardTypeEnum } from "@/types/components/hotelPage/facilities"
 import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
 import type { RequestOptionsWithOutBody } from "@/types/fetch"
 import type { Facility } from "@/types/hotel"
@@ -231,15 +231,15 @@ export const hotelQueryRouter = router({
       const facilities: Facility[] = [
         {
           ...apiJson.data.attributes.restaurantImages,
-          id: FacilityEnum.restaurant,
+          id: FacilityCardTypeEnum.restaurant,
         },
         {
           ...apiJson.data.attributes.conferencesAndMeetings,
-          id: FacilityEnum.conference,
+          id: FacilityCardTypeEnum.conference,
         },
         {
           ...apiJson.data.attributes.healthAndWellness,
-          id: FacilityEnum.wellness,
+          id: FacilityCardTypeEnum.wellness,
         },
       ]
 
diff --git a/types/components/hotelPage/facilities.ts b/types/components/hotelPage/facilities.ts
index 98a6a444d..333313fe0 100644
--- a/types/components/hotelPage/facilities.ts
+++ b/types/components/hotelPage/facilities.ts
@@ -34,7 +34,7 @@ export type CardGridProps = {
   facilitiesCardGrid: FacilityGrid
 }
 
-export enum FacilityEnum {
+export enum FacilityCardTypeEnum {
   wellness = "wellness-and-exercise",
   conference = "meetings-and-conferences",
   restaurant = "restaurant-and-bar",
@@ -46,9 +46,3 @@ export enum RestaurantHeadings {
   restaurant = "Restaurant",
   breakfastRestaurant = "Breakfast restaurant",
 }
-
-export enum FacilityIds {
-  bar = 1606,
-  rooftopBar = 1014,
-  restaurant = 1383,
-}
diff --git a/types/components/icon.ts b/types/components/icon.ts
index f50a79259..290c9ed32 100644
--- a/types/components/icon.ts
+++ b/types/components/icon.ts
@@ -7,8 +7,10 @@ export interface IconProps
     VariantProps<typeof iconVariants> {}
 
 export enum IconName {
+  Accesories = "Accesories",
   Accessibility = "Accessibility",
   AccountCircle = "AccountCircle",
+  Air = "Air",
   Airplane = "Airplane",
   ArrowRight = "ArrowRight",
   Bar = "Bar",
@@ -18,7 +20,6 @@ export enum IconName {
   Camera = "Camera",
   Cellphone = "Cellphone",
   Check = "Check",
-  CrossCircle = "CrossCircle",
   CheckCircle = "CheckCircle",
   ChevronDown = "ChevronDown",
   ChevronLeft = "ChevronLeft",
@@ -26,45 +27,76 @@ export enum IconName {
   ChevronRightSmall = "ChevronRightSmall",
   Close = "Close",
   CloseLarge = "CloseLarge",
-  Coffee = "Coffee",
+  CoffeeAlt = "CoffeeAlt",
   Concierge = "Concierge",
+  ConvenienceStore24h = "ConvenienceStore24h",
+  Cool = "Cool",
+  CrossCircle = "CrossCircle",
   Cultural = "Cultural",
   DoorOpen = "DoorOpen",
+  Dresser = "Dresser",
   ElectricBike = "ElectricBike",
+  ElectricCar = "ElectricCar",
   Email = "Email",
   EyeHide = "EyeHide",
   EyeShow = "EyeShow",
   Facebook = "Facebook",
+  Fan = "Fan",
   Fitness = "Fitness",
+  Footstool = "Footstool",
   Gallery = "Gallery",
+  Garage = "Garage",
   Gift = "Gift",
   Globe = "Globe",
+  Golf = "Golf",
+  Groceries = "Groceries",
+  Hanger = "Hanger",
+  HangerAlt = "HangerAlt",
+  Heat = "Heat",
   House = "House",
   Image = "Image",
   InfoCircle = "InfoCircle",
   Instagram = "Instagram",
+  Kayaking = "Kayaking",
+  Kettle = "Kettle",
+  Lamp = "Lamp",
+  LaundryMachine = "LaundryMachine",
+  LocalBar = "LocalBar",
   Location = "Location",
   Lock = "Lock",
   Map = "Map",
   Minus = "Minus",
   Museum = "Museum",
+  Nature = "Nature",
+  Nightlife = "Nightlife",
+  NoSmoking = "NoSmoking",
+  OutdoorFurniture = "OutdoorFurniture",
   Parking = "Parking",
-  Person = "Person",
   People2 = "People2",
+  Person = "Person",
   Pets = "Pets",
   Phone = "Phone",
   Plus = "Plus",
   PlusCircle = "PlusCircle",
   Restaurant = "Restaurant",
+  RoomService = "RoomService",
   Sauna = "Sauna",
   Search = "Search",
   Service = "Service",
   Shopping = "Shopping",
+  Skateboarding = "Skateboarding",
+  Smoking = "Smoking",
   Snowflake = "Snowflake",
+  Spa = "Spa",
   StarFilled = "StarFilled",
+  Street = "Street",
+  Swim = "Swim",
+  Thermostat = "Thermostat",
   Train = "Train",
   Tripadvisor = "Tripadvisor",
+  Tshirt = "Tshirt",
   TshirtWash = "TshirtWash",
-  Wifi = "Wifi",
+  TvCasting = "TvCasting",
   WarningTriangle = "WarningTriangle",
+  Wifi = "Wifi",
 }
diff --git a/types/enums/facilities.ts b/types/enums/facilities.ts
new file mode 100644
index 000000000..169aad6c0
--- /dev/null
+++ b/types/enums/facilities.ts
@@ -0,0 +1,262 @@
+export enum FacilityEnum {
+  AccessibleBathingControls = 2065,
+  AccessibleBathtubs = 2062,
+  AccessibleElevators = 2067,
+  AccessibleLightSwitch = 2066,
+  AccessibleRoomsAtHotel1 = 2659,
+  AccessibleRoomsAtHotel2 = 3010,
+  AccessibleToilets = 2068,
+  AccessibleWashBasins = 2063,
+  AdaptedRoomDoors = 2080,
+  AdjoiningConventionCentre = 1560,
+  AirConAirCooling = 2660,
+  AirConditioningInRoom = 5763,
+  AirportMaxDistance8Km = 1856,
+  AlarmsContinuouslyMonitored = 1876,
+  AlarmsHaveStrobeLightsForDeafHardHearingInAllGuestRooms = 1877,
+  AlarmsHaveStrobeLightsForDeafHardHearingInAllHallways = 1878,
+  AlarmsHaveStrobeLightsForDeafHardHearingInAllPublicAreas = 1879,
+  AllAudibleSmokeAlarmsHardwired = 1884,
+  AllExteriorDoorsRequireKeyAccessAtNightOrAutomaticallyLock = 2004,
+  AllGuestRoomDoorsHaveViewports = 2006,
+  AllGuestRoomDoorsSelfClosing = 2007,
+  AllParkingAreasPatrolled = 1933,
+  AllParkingAreasWellLit = 2013,
+  AllStairsWellsVentilated = 2053,
+  ArmchairBed = 104126,
+  AudibleAlarms = 1880,
+  AudibleSmokeAlarmsInAllHalls = 1881,
+  AudibleSmokeAlarmsInAllPublicAreas = 1882,
+  AudibleSmokeAlarmsInAllRooms = 1883,
+  AudioVisualEquipmentAvailable = 961,
+  AutolinkFireDepartment = 1886,
+  AutomatedExternalDefibrillatorOnSiteAED = 1917,
+  AutomaticFireDoors = 1887,
+  AutoRecallElevators = 1885,
+  BalconiesAccessibleToAdjoiningRooms = 1962,
+  Ballroom = 1609,
+  Banquet = 1557,
+  Bar = 1014,
+  BasicMedicalEquipmentOnSite = 1920,
+  BathroomsAdaptedForDisabledGuests = 2064,
+  Beach = 1827,
+  Beach0To1Km = 1019,
+  BeautySalon = 1015,
+  BedroomsWithWheelchairAccess = 2081,
+  BikesForLoan = 5550,
+  Bowling = 185105,
+  BrailleLargePrintHotelLiterature = 2069,
+  BrailleLargePrintMenus = 2070,
+  Breakfast = 5807,
+  Business1 = 1385,
+  Business2 = 83715,
+  BusinessCentre = 962,
+  Cafe = 1381,
+  CashFree8pmTill6am = 327877,
+  CashFreeHotel = 345180,
+  ChildrenWelcome = 1828,
+  City = 1857,
+  CoffeeInReceptionAtCharge = 332224,
+  CoffeeShop = 956,
+  CoffeeTeaFacilities = 5776,
+  ColourTVInRoomsAllScandicHotels = 5773,
+  ComplimentaryColdRefreshments = 157965,
+  CongressHall = 1558,
+  ConventionCentre = 963,
+  Couples = 2663,
+  DeadboltsOnConnectingDoors = 1990,
+  DeadboltsSecondaryLocksOnAllGuestRoomDoors = 1985,
+  Defibrillator = 99872,
+  Desk = 5777,
+  DirectDialPhoneInRoomsAllScandic = 5772,
+  DisabledEmergencyPlan1 = 1888,
+  DisabledEmergencyPlan2 = 2074,
+  DisabledParking = 2072,
+  DiscoNightClub = 958,
+  DJLiveMusic = 162587,
+  DO_NOT_USE_Restaurant = 1377,
+  Downtown = 969,
+  DrinkableTapWater = 5553,
+  DVDPlayer = 5778,
+  EBikesChargingStation = 265711,
+  ElectronicKeyCards = 1994,
+  Elevator = 959,
+  EmergencyBackUpGenerators = 1889,
+  EmergencyCallButtonOnPhone = 1998,
+  EmergencyCodesOrButtonsInRooms = 2075,
+  EmergencyEvacuationPlan1 = 1890,
+  EmergencyEvacuationPlan2 = 1895,
+  EmergencyEvaluationDrillFrequency = 1896,
+  EmergencyInfoInAllRooms = 1897,
+  EmergencyLightingAllScandic = 952,
+  EmergencyLightningInAllPublicAreas = 1898,
+  EmergencyServiceResponseTimeInMinutes = 1899,
+  Entertainment = 970,
+  EventVenue = 1559,
+  ExchangeFacility = 1605,
+  ExitMapsInRooms = 1900,
+  ExitSignsLit = 1901,
+  ExtraFamilyFriendly = 242920,
+  Families = 2664,
+  FaxFacilityInRoom = 5764,
+  Financial = 1409,
+  FireDetectorsAllScandic = 1869,
+  FireDetectorsInAllHalls = 1903,
+  FireDetectorsInAllPublicAreas = 1905,
+  FireDetectorsInAllRooms = 1906,
+  FireExtinguishersInAllPublicAreas = 1907,
+  FireExtinguishersInPublicAreasAllScandic = 1870,
+  FireSafetyAllScandic = 1871,
+  FirstAidAvailable = 1915,
+  FoodDrinks247 = 324100,
+  FreeWiFi = 1833,
+  GiftShop = 1376,
+  Golf = 1016,
+  GolfCourse0To30Km = 1607,
+  GuestRoomDoorsHaveASecondLock = 2005,
+  Gym = 1829,
+  GymTrainingFacilities = 2669,
+  Hairdresser = 348860,
+  HairdryerInRoomAllScandic = 5765,
+  HandicapFacilities = 2076,
+  HandrailsInBathrooms = 2078,
+  HearingInductionLoops = 2077,
+  Highway1 = 1858,
+  Highway2 = 1864,
+  Hiking0To3Km = 239346,
+  HotelCompliesWithAAASecurityStandards = 2011,
+  HotelIsFollowingScandicsSafetySecurityPolicy = 5559,
+  HotelWorksAccordingToScandicsAccessibilityConcepts = 5560,
+  IceMachine = 1405,
+  IceMachineReception = 332194,
+  IDRequiredToReplaceAGuestRoomKey = 2024,
+  IfNoWhatAreTheHoursUse24ClockEx0000To0600 = 1912,
+  InCountry = 1867,
+  IndustrialPark = 1859,
+  InternetHighSpeedInternetConnectionAllScandic = 5804,
+  InternetHotSpotsAllScandic = 1832,
+  IroningRoom = 238849,
+  IronIroningBoardAllScandic = 5780,
+  Jacuzzi = 162573,
+  JacuzziInRoom = 5766,
+  KayaksForLoan = 162585,
+  KeyAccessOnlySecuredFloorsAvailable = 2050,
+  KeyAccessOnlyToHealthClubGym = 2061,
+  KidsPlayRoom = 239349,
+  KidsUpToAndIncluding12YearsStayForFree = 5561,
+  KitchenInRoom = 5767,
+  Lake0To1Km = 1865,
+  LakeOrSea0To1Km = 245437,
+  LaptopSafe = 5283,
+  LaundryRoom = 326031,
+  LaundryService = 1834,
+  LaundryServiceExpress = 162583,
+  Leisure = 83716,
+  LifestyleConcierge = 162584,
+  LuggageLockers = 324098,
+  Massage = 348859,
+  MeetingConferenceFacilities = 5806,
+  MeetingRooms = 1017,
+  MinibarInRoom = 5768,
+  MobileLift = 113185,
+  Mountains0To1Km = 1866,
+  MovieChannelsInRoomAllScandic = 5770,
+  MultipleExitsOnEachFloor = 2012,
+  NonSmokingRoomsAllScandic = 5771,
+  OnSiteTrainingFacilities = 3014,
+  OtherExplainInBriefDescription = 1608,
+  OutdoorTerrace = 1382,
+  OvernightSecurity = 1913,
+  ParkingAdditionalCost = 1406,
+  ParkingAttendant = 1914,
+  ParkingElectricCharging = 5554,
+  ParkingFreeParking = 5562,
+  ParkingGarage = 2665,
+  ParkingOutdoor = 162574,
+  PCHookUpInRoom = 5769,
+  PetFriendlyRooms = 1835,
+  PillowAlarmsAvailable = 2079,
+  PlayStationInPlayArea = 175449,
+  Pool = 1831,
+  PoolSwimmingPoolJacuzziAtHotel = 2667,
+  PrintingService = 1380,
+  PropertyMeetsRequirementsFireSafety = 1875,
+  PublicAddressSystem = 2014,
+  RelaxationSuite = 5564,
+  Restaurant = 1383,
+  RestrictedRoomAccessAllScandic = 1872,
+  RooftopBar = 239348,
+  RoomsAccessibleFromTheInterior = 950,
+  RoomService = 1378,
+  RoomWindowsOpen = 2016,
+  RoomWindowsThatOpenHaveLockingDevice = 2020,
+  Rural1 = 1861,
+  Rural2 = 1868,
+  SafeDepositBoxInRoomsAllScandic = 5775,
+  SafeDepositBoxInRoomsCanHoldA17InchLaptop = 200124,
+  SafeDepositBoxInRoomsCannotHoldALaptop = 200123,
+  SafetyChainsOnGuestRoomDoor = 2047,
+  Sauna = 1379,
+  ScandicShop24Hrs = 1408,
+  SecondaryLocksOnSlidingGlassDoors = 2048,
+  SecondaryLocksOnWindows = 2049,
+  Security24Hours = 1911,
+  SecurityEscortsAvailableOnRequest = 1936,
+  SecurityPersonnelOnSite = 1934,
+  SeparateFloorsForWomen = 2051,
+  ServesBreakfastAlwaysIncluded = 1407,
+  ServesBreakfastNotAlwaysIncluded = 5556,
+  ServesOrganicBreakfastAlwaysIncluded = 5557,
+  ServesOrganicBreakfastNotAlwaysIncluded = 5558,
+  ServiceGuideDogsAllowed = 2071,
+  ServiceSecurity24Hrs = 326033,
+  Shopping = 971,
+  SkateboardsForLoan = 162586,
+  Skiing0To1Km = 245031,
+  Skybar = 1606,
+  SmokeDetectorsAllScandic = 1873,
+  Solarium = 1830,
+  SpecialNeedsMenus = 2082,
+  Sports = 83717,
+  SprinklersAllScandic = 1874,
+  SprinklersInAllHalls = 1908,
+  SprinklersInAllPublicAreas = 1909,
+  SprinklersInAllRooms = 1910,
+  StaffInDuplicateKeys = 1942,
+  StaffRedCrossCertifiedInCPR = 1941,
+  StaffTrainedForDisabledGuests = 1928,
+  StaffTrainedInAutomatedExternalDefibrillatorUsageAED = 1940,
+  StaffTrainedInCPR = 1923,
+  StaffTrainedInFirstAid = 1939,
+  StaffTrainedInFirstAidTechniques = 951,
+  StaffTrainedToCaterForDisabledGuestsAllScandic = 2073,
+  Suburbs = 1860,
+  SwingboltLock = 2052,
+  TeleConferencingFacilitiesAvailable = 1018,
+  TelevisionsWithSubtitlesOrClosedCaptions = 2083,
+  Tennis1 = 1836,
+  Tennis2 = 1838,
+  TennisPadel = 239350,
+  Theatre = 1862,
+  TrouserPress = 5779,
+  TVWithChromecast1 = 229127,
+  TVWithChromecast2 = 229144,
+  UniformSecurityOnPremises = 1935,
+  UtilityRoomForIroning = 324097,
+  VendingMachineWithNecessities = 324099,
+  VideoSurveillanceInHallways = 2056,
+  VideoSurveillanceInPublicAreas = 1386,
+  VideoSurveillanceMonitored24HrsADay = 2058,
+  VideoSurveillanceOfAllParkingAreas = 2055,
+  VideoSurveillanceOfExteriorFrontEntrance = 2054,
+  VideoSurveillanceRecorded24HrsADayParkingArea = 2059,
+  WallMountedCycleRack = 199642,
+  WellLitWalkways = 2060,
+  WellnessAndSaunaEntranceFeeAdmission16PlusYears = 267806,
+  WellnessPoolSaunaEntranceFeeAdmission16PlusYears = 307754,
+  WheelchairAccess = 2084,
+  WideCorridors = 2086,
+  WideEntrance = 2085,
+  WideRestaurantEntrance = 2087,
+  WiFiWirelessInternetAccessAllScandic = 5774,
+}
diff --git a/utils/facilityCards.ts b/utils/facilityCards.ts
index dd8c0a1a4..2ff48b946 100644
--- a/utils/facilityCards.ts
+++ b/utils/facilityCards.ts
@@ -10,12 +10,12 @@ import {
   type Facilities,
   type FacilityCard,
   type FacilityCardType,
-  FacilityEnum,
+  FacilityCardTypeEnum,
   type FacilityGrid,
-  FacilityIds,
   type FacilityImage,
   RestaurantHeadings,
 } from "@/types/components/hotelPage/facilities"
+import { FacilityEnum } from "@/types/enums/facilities"
 import type { Amenities, Facility } from "@/types/hotel"
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 
@@ -72,7 +72,7 @@ export function setFacilityCardGrids(facilities: Facility[]): Facilities {
     })
 
     switch (facility.id) {
-      case FacilityEnum.wellness:
+      case FacilityCardTypeEnum.wellness:
         card = setCardProps(
           "one",
           "Sauna and gym",
@@ -83,7 +83,7 @@ export function setFacilityCardGrids(facilities: Facility[]): Facilities {
         grid.unshift(card)
         break
 
-      case FacilityEnum.conference:
+      case FacilityCardTypeEnum.conference:
         card = setCardProps(
           "primaryDim",
           "Events that make an impression",
@@ -94,7 +94,7 @@ export function setFacilityCardGrids(facilities: Facility[]): Facilities {
         grid.push(card)
         break
 
-      case FacilityEnum.restaurant:
+      case FacilityCardTypeEnum.restaurant:
         //const title = getRestaurantHeading(amenities) // TODO will be used later
         card = setCardProps(
           "primaryDark",
@@ -114,10 +114,12 @@ export function setFacilityCardGrids(facilities: Facility[]): Facilities {
 export function getRestaurantHeading(amenities: Amenities): RestaurantHeadings {
   const hasBar = amenities.some(
     (facility) =>
-      facility.id === FacilityIds.bar || facility.id === FacilityIds.rooftopBar
+      facility.id === FacilityEnum.Bar ||
+      facility.id === FacilityEnum.RooftopBar ||
+      facility.id === FacilityEnum.Skybar
   )
   const hasRestaurant = amenities.some(
-    (facility) => facility.id === FacilityIds.restaurant
+    (facility) => facility.id === FacilityEnum.Restaurant
   )
 
   if (hasBar && hasRestaurant) {

From 2d23f9bbf3083dbff281a60125ccb3eb3a9f9406 Mon Sep 17 00:00:00 2001
From: Simon Emanuelsson <simon.emanuelsson@scandichotels.com>
Date: Tue, 22 Oct 2024 11:43:08 +0200
Subject: [PATCH 47/69] feat: booking confirmation page with hardcoded data

---
 .../booking-confirmation/loading.tsx          |   0
 .../booking-confirmation/page.module.css      | 157 ++++++++++
 .../booking-confirmation/page.tsx             | 279 ++++++++++++++++++
 .../(confirmation)/layout.module.css          |   5 +
 .../(confirmation)/layout.tsx                 |  15 +
 .../{ => (standard)}/[step]/layout.module.css |   0
 .../{ => (standard)}/[step]/layout.tsx        |   0
 .../{ => (standard)}/[step]/page.tsx          |   0
 .../{ => (standard)}/layout.module.css        |   0
 .../{ => (standard)}/layout.tsx               |   0
 .../{ => (standard)}/page.tsx                 |   0
 .../select-hotel/map/page.module.css          |   0
 .../select-hotel/map/page.tsx                 |   2 +-
 .../select-hotel/page.module.css              |   0
 .../{ => (standard)}/select-hotel/page.tsx    |   2 +-
 .../{ => (standard)}/select-hotel/utils.ts    |   0
 .../select-rate/page.module.css               |   0
 .../{ => (standard)}/select-rate/page.tsx     |   0
 .../booking-confirmation/page.module.css      |  16 -
 .../booking-confirmation/page.tsx             |  67 -----
 .../hotelreservation/[...paths]/page.tsx      |   1 +
 .../booking-confirmation/page.tsx             |   3 +
 .../@bookingwidget/hotelreservation/page.tsx  |   1 +
 .../IntroSection/index.tsx                    |  58 ----
 .../IntroSection/introSection.module.css      |  26 --
 .../BookingConfirmation/StaySection/index.tsx |  81 -----
 .../StaySection/staySection.module.css        |  78 -----
 .../SummarySection/index.tsx                  |  40 ---
 .../SummarySection/summarySection.module.css  |  13 -
 .../tempConfirmationData.ts                   |  27 --
 .../EnterDetails/Payment/index.tsx            |   2 +-
 components/Icons/Download.tsx                 |  40 +++
 components/Icons/Printer.tsx                  |  36 +++
 components/Icons/index.tsx                    |   2 +
 constants/booking.ts                          |   7 +
 i18n/dictionaries/en.json                     |  93 +++---
 i18n/index.ts                                 |   2 +-
 lib/dt.ts                                     |   2 +
 server/routers/booking/input.ts               |   6 +-
 server/routers/booking/mutation.ts            | 163 +++++-----
 server/routers/booking/output.ts              |  47 ++-
 server/routers/booking/query.ts               | 121 +++++++-
 42 files changed, 859 insertions(+), 533 deletions(-)
 rename app/[lang]/(live)/(public)/hotelreservation/{ => (confirmation)}/booking-confirmation/loading.tsx (100%)
 create mode 100644 app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.module.css
 create mode 100644 app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx
 create mode 100644 app/[lang]/(live)/(public)/hotelreservation/(confirmation)/layout.module.css
 create mode 100644 app/[lang]/(live)/(public)/hotelreservation/(confirmation)/layout.tsx
 rename app/[lang]/(live)/(public)/hotelreservation/{ => (standard)}/[step]/layout.module.css (100%)
 rename app/[lang]/(live)/(public)/hotelreservation/{ => (standard)}/[step]/layout.tsx (100%)
 rename app/[lang]/(live)/(public)/hotelreservation/{ => (standard)}/[step]/page.tsx (100%)
 rename app/[lang]/(live)/(public)/hotelreservation/{ => (standard)}/layout.module.css (100%)
 rename app/[lang]/(live)/(public)/hotelreservation/{ => (standard)}/layout.tsx (100%)
 rename app/[lang]/(live)/(public)/hotelreservation/{ => (standard)}/page.tsx (100%)
 rename app/[lang]/(live)/(public)/hotelreservation/{ => (standard)}/select-hotel/map/page.module.css (100%)
 rename app/[lang]/(live)/(public)/hotelreservation/{ => (standard)}/select-hotel/map/page.tsx (95%)
 rename app/[lang]/(live)/(public)/hotelreservation/{ => (standard)}/select-hotel/page.module.css (100%)
 rename app/[lang]/(live)/(public)/hotelreservation/{ => (standard)}/select-hotel/page.tsx (95%)
 rename app/[lang]/(live)/(public)/hotelreservation/{ => (standard)}/select-hotel/utils.ts (100%)
 rename app/[lang]/(live)/(public)/hotelreservation/{ => (standard)}/select-rate/page.module.css (100%)
 rename app/[lang]/(live)/(public)/hotelreservation/{ => (standard)}/select-rate/page.tsx (100%)
 delete mode 100644 app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css
 delete mode 100644 app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx
 create mode 100644 app/[lang]/(live)/@bookingwidget/hotelreservation/[...paths]/page.tsx
 create mode 100644 app/[lang]/(live)/@bookingwidget/hotelreservation/booking-confirmation/page.tsx
 create mode 100644 app/[lang]/(live)/@bookingwidget/hotelreservation/page.tsx
 delete mode 100644 components/HotelReservation/BookingConfirmation/IntroSection/index.tsx
 delete mode 100644 components/HotelReservation/BookingConfirmation/IntroSection/introSection.module.css
 delete mode 100644 components/HotelReservation/BookingConfirmation/StaySection/index.tsx
 delete mode 100644 components/HotelReservation/BookingConfirmation/StaySection/staySection.module.css
 delete mode 100644 components/HotelReservation/BookingConfirmation/SummarySection/index.tsx
 delete mode 100644 components/HotelReservation/BookingConfirmation/SummarySection/summarySection.module.css
 delete mode 100644 components/HotelReservation/BookingConfirmation/tempConfirmationData.ts
 create mode 100644 components/Icons/Download.tsx
 create mode 100644 components/Icons/Printer.tsx

diff --git a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/loading.tsx b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/loading.tsx
similarity index 100%
rename from app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/loading.tsx
rename to app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/loading.tsx
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.module.css
new file mode 100644
index 000000000..06b39ef41
--- /dev/null
+++ b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.module.css
@@ -0,0 +1,157 @@
+.details,
+.guest,
+.header,
+.hgroup,
+.hotel,
+.list,
+.main,
+.section,
+.receipt,
+.total {
+  display: flex;
+  flex-direction: column;
+}
+
+.main {
+  gap: var(--Spacing-x5);
+  margin: 0 auto;
+  width: min(calc(100dvw - (var(--Spacing-x3) * 2)), 708px);
+}
+
+.header,
+.hgroup {
+  align-items: center;
+}
+
+.header {
+  gap: var(--Spacing-x3);
+}
+
+.hgroup {
+  gap: var(--Spacing-x-half);
+}
+
+.body {
+  max-width: 560px;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x9);
+}
+
+.booking {
+  display: grid;
+  gap: var(--Spacing-x-one-and-half);
+  grid-template-areas:
+    "image"
+    "details"
+    "actions";
+}
+
+.actions,
+.details {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.details {
+  gap: var(--Spacing-x3);
+  grid-area: details;
+  padding: var(--Spacing-x2);
+}
+
+.tempImage {
+  align-items: center;
+  background-color: lightgrey;
+  border-radius: var(--Corner-radius-Medium);
+  display: flex;
+  grid-area: image;
+  justify-content: center;
+}
+
+.actions {
+  display: grid;
+  grid-area: actions;
+  padding: var(--Spacing-x1) var(--Spacing-x2);
+}
+
+.list {
+  gap: var(--Spacing-x-one-and-half);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.listItem {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x1);
+  justify-content: space-between;
+}
+
+.summary {
+  display: grid;
+  gap: var(--Spacing-x3);
+}
+
+.guest,
+.hotel {
+  gap: var(--Spacing-x-half);
+}
+
+.receipt,
+.total {
+  gap: var(--Spacing-x2);
+}
+
+.divider {
+  grid-column: 1 / -1;
+}
+
+@media screen and (max-width: 767px) {
+  .actions {
+    & > button[class*="btn"][class*="icon"][class*="small"] {
+      border-bottom: 1px solid var(--Base-Border-Subtle);
+      border-radius: 0;
+      justify-content: space-between;
+
+      &:last-of-type {
+        border-bottom: none;
+      }
+
+      & > svg {
+        order: 2;
+      }
+    }
+  }
+
+  .tempImage {
+    min-height: 250px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .booking {
+    grid-template-areas:
+      "details image"
+      "actions actions";
+    grid-template-columns: 1fr minmax(256px, min(256px, 100%));
+  }
+
+  .actions {
+    gap: var(--Spacing-x7);
+    grid-template-columns: repeat(auto-fit, minmax(50px, auto));
+    justify-content: center;
+    padding: var(--Spacing-x1) var(--Spacing-x3);
+  }
+
+  .details {
+    padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x2);
+  }
+
+  .summary {
+    grid-template-columns: 1fr 1fr;
+  }
+}
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx
new file mode 100644
index 000000000..23b5270d4
--- /dev/null
+++ b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx
@@ -0,0 +1,279 @@
+import { dt } from "@/lib/dt"
+import { serverClient } from "@/lib/trpc/server"
+
+import {
+  CalendarIcon,
+  DownloadIcon,
+  ImageIcon,
+  PrinterIcon,
+} from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+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 Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./page.module.css"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function BookingConfirmationPage({
+  params,
+}: PageArgs<LangParams>) {
+  const booking = await serverClient().booking.confirmation({
+    confirmationNumber: "991697377",
+  })
+
+  if (!booking) {
+    return null
+  }
+
+  const intl = await getIntl()
+  const text = intl.formatMessage<React.ReactNode>(
+    { id: "booking.confirmation.text" },
+    {
+      emailLink: (str) => (
+        <Link color="burgundy" href="#" textDecoration="underline">
+          {str}
+        </Link>
+      ),
+    }
+  )
+
+  const fromDate = dt(booking.temp.fromDate).locale(params.lang)
+  const toDate = dt(booking.temp.toDate).locale(params.lang)
+  const nights = intl.formatMessage(
+    { id: "booking.nights" },
+    {
+      totalNights: dt(toDate.format("YYYY-MM-DD")).diff(
+        dt(fromDate.format("YYYY-MM-DD")),
+        "days"
+      ),
+    }
+  )
+
+  return (
+    <main className={styles.main}>
+      <header className={styles.header}>
+        <hgroup className={styles.hgroup}>
+          <Title
+            as="h4"
+            color="red"
+            textAlign="center"
+            textTransform="regular"
+            type="h2"
+          >
+            {intl.formatMessage({ id: "booking.confirmation.title" })}
+          </Title>
+          <Title
+            as="h4"
+            color="burgundy"
+            textAlign="center"
+            textTransform="regular"
+            type="h1"
+          >
+            {booking.hotel.name}
+          </Title>
+        </hgroup>
+        <Body className={styles.body} textAlign="center">
+          {text}
+        </Body>
+      </header>
+      <section className={styles.section}>
+        <div className={styles.booking}>
+          <article className={styles.details}>
+            <header>
+              <Subtitle color="burgundy" type="two">
+                {intl.formatMessage(
+                  { id: "Reference #{bookingNr}" },
+                  { bookingNr: "A92320VV" }
+                )}
+              </Subtitle>
+            </header>
+            <ul className={styles.list}>
+              <li className={styles.listItem}>
+                <Body>{intl.formatMessage({ id: "Check-in" })}</Body>
+                <Body>
+                  {`${fromDate.format("ddd, D MMM")} ${intl.formatMessage({ id: "from" })} ${fromDate.format("HH:mm")}`}
+                </Body>
+              </li>
+              <li className={styles.listItem}>
+                <Body>{intl.formatMessage({ id: "Check-out" })}</Body>
+                <Body>
+                  {`${toDate.format("ddd, D MMM")} ${intl.formatMessage({ id: "from" })} ${toDate.format("HH:mm")}`}
+                </Body>
+              </li>
+              <li className={styles.listItem}>
+                <Body>{intl.formatMessage({ id: "Breakfast" })}</Body>
+                <Body>
+                  {booking.temp.breakfastFrom} - {booking.temp.breakfastTo}
+                </Body>
+              </li>
+              <li className={styles.listItem}>
+                <Body>{intl.formatMessage({ id: "Cancellation policy" })}</Body>
+                <Body>
+                  {intl.formatMessage({ id: booking.temp.cancelPolicy })}
+                </Body>
+              </li>
+              <li className={styles.listItem}>
+                <Body>{intl.formatMessage({ id: "Rebooking" })}</Body>
+                <Body>{`${intl.formatMessage({ id: "Free until" })} ${fromDate.subtract(3, "day").format("ddd, D MMM")}`}</Body>
+              </li>
+            </ul>
+          </article>
+          <aside className={styles.tempImage}>
+            <ImageIcon height={80} width={80} />
+          </aside>
+          <div className={styles.actions}>
+            <Button
+              intent="text"
+              size="small"
+              theme="base"
+              variant="icon"
+              wrapping
+            >
+              <CalendarIcon />
+              {intl.formatMessage({ id: "Add to calendar" })}
+            </Button>
+            <Button
+              intent="text"
+              size="small"
+              theme="base"
+              variant="icon"
+              wrapping
+            >
+              <PrinterIcon />
+              {intl.formatMessage({ id: "Print confirmation" })}
+            </Button>
+            <Button
+              intent="text"
+              size="small"
+              theme="base"
+              variant="icon"
+              wrapping
+            >
+              <DownloadIcon />
+              {intl.formatMessage({ id: "Download invoice" })}
+            </Button>
+          </div>
+        </div>
+        <div className={styles.summary}>
+          <div className={styles.guest}>
+            <Caption color="uiTextPlaceholder">
+              {intl.formatMessage({ id: "Guest" })}
+            </Caption>
+            <div>
+              <Body color="burgundy" textTransform="bold">
+                {`${booking.guest.firstName} ${booking.guest.lastName}${booking.guest.memberbershipNumber ? ` (${intl.formatMessage({ id: "member no" })} ${booking.guest.memberbershipNumber})` : ""}`}
+              </Body>
+              <Body color="uiTextHighContrast">{booking.guest.email}</Body>
+              <Body color="uiTextHighContrast">
+                {booking.guest.phoneNumber}
+              </Body>
+            </div>
+          </div>
+          <div className={styles.hotel}>
+            <Caption color="uiTextPlaceholder">
+              {intl.formatMessage({ id: "Your hotel" })}
+            </Caption>
+            <div>
+              <Body color="burgundy" textTransform="bold">
+                {booking.hotel.name}
+              </Body>
+              <Body color="uiTextHighContrast">{booking.hotel.email}</Body>
+              <Body color="uiTextHighContrast">
+                {booking.hotel.phoneNumber}
+              </Body>
+            </div>
+          </div>
+          <Divider className={styles.divider} color="primaryLightSubtle" />
+          <div className={styles.receipt}>
+            <div>
+              <Body color="burgundy" textTransform="bold">
+                {`${booking.temp.room.type}, ${nights}`}
+              </Body>
+              <Body color="uiTextHighContrast">{booking.temp.room.price}</Body>
+            </div>
+            {booking.temp.packages.map((pkg) => (
+              <div key={pkg.name}>
+                <Body color="burgundy" textTransform="bold">
+                  {pkg.name}
+                </Body>
+                <Body color="uiTextHighContrast">{pkg.price}</Body>
+              </div>
+            ))}
+          </div>
+          <div className={styles.total}>
+            <div>
+              <Body color="burgundy" textTransform="bold">
+                {intl.formatMessage({ id: "VAT" })}
+              </Body>
+              <Body color="uiTextHighContrast">{booking.temp.room.vat}</Body>
+            </div>
+            <div>
+              <Body color="burgundy" textTransform="bold">
+                {intl.formatMessage({ id: "Total cost" })}
+              </Body>
+              <Body color="uiTextHighContrast">{booking.temp.total}</Body>
+              <Caption color="uiTextPlaceholder">
+                {`${intl.formatMessage({ id: "Approx." })} ${booking.temp.totalInEuro}`}
+              </Caption>
+            </div>
+          </div>
+          <Divider className={styles.divider} color="primaryLightSubtle" />
+          <div>
+            <Body color="burgundy" textTransform="bold">
+              {`${intl.formatMessage({ id: "Payment received" })} ${dt(booking.temp.payment).locale(params.lang).format("D MMM YYYY, h:mm z")}`}
+            </Body>
+            <Caption color="uiTextPlaceholder">
+              {intl.formatMessage(
+                { id: "{card} ending with {cardno}" },
+                {
+                  card: "Mastercard",
+                  cardno: "2202",
+                }
+              )}
+            </Caption>
+          </div>
+        </div>
+      </section>
+    </main>
+  )
+}
+
+// const { email, hotel, stay, summary } = tempConfirmationData
+
+// const confirmationNumber = useMemo(() => {
+//   if (typeof window === "undefined") return ""
+
+//   const storedConfirmationNumber = sessionStorage.getItem(
+//     BOOKING_CONFIRMATION_NUMBER
+//   )
+// TODO: cleanup stored values
+// sessionStorage.removeItem(BOOKING_CONFIRMATION_NUMBER)
+//   return storedConfirmationNumber
+// }, [])
+
+// const bookingStatus = useHandleBookingStatus(
+//   confirmationNumber,
+//   BookingStatusEnum.BookingCompleted,
+//   maxRetries,
+//   retryInterval
+// )
+
+// if (
+//   confirmationNumber === null ||
+//   bookingStatus.isError ||
+//   (bookingStatus.isFetched && !bookingStatus.data)
+// ) {
+//   // TODO: handle error
+//   throw new Error("Error fetching booking status")
+// }
+
+// if (
+//   bookingStatus.data?.reservationStatus === BookingStatusEnum.BookingCompleted
+// ) {
+// return <LoadingSpinner />
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/layout.module.css b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/layout.module.css
new file mode 100644
index 000000000..3f89e6f51
--- /dev/null
+++ b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/layout.module.css
@@ -0,0 +1,5 @@
+.layout {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  min-height: 100dvh;
+  padding: 80px 0 160px;
+}
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/layout.tsx b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/layout.tsx
new file mode 100644
index 000000000..971c66e0d
--- /dev/null
+++ b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/layout.tsx
@@ -0,0 +1,15 @@
+import { notFound } from "next/navigation"
+
+import { env } from "@/env/server"
+
+import styles from "./layout.module.css"
+
+// route groups needed as layouts have different bgc
+export default function ConfirmedBookingLayout({
+  children,
+}: React.PropsWithChildren) {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    return notFound()
+  }
+  return <div className={styles.layout}>{children}</div>
+}
diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.module.css
similarity index 100%
rename from app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.module.css
diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.tsx
similarity index 100%
rename from app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.tsx
diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx
similarity index 100%
rename from app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx
diff --git a/app/[lang]/(live)/(public)/hotelreservation/layout.module.css b/app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.module.css
similarity index 100%
rename from app/[lang]/(live)/(public)/hotelreservation/layout.module.css
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.module.css
diff --git a/app/[lang]/(live)/(public)/hotelreservation/layout.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.tsx
similarity index 100%
rename from app/[lang]/(live)/(public)/hotelreservation/layout.tsx
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.tsx
diff --git a/app/[lang]/(live)/(public)/hotelreservation/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/page.tsx
similarity index 100%
rename from app/[lang]/(live)/(public)/hotelreservation/page.tsx
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/page.tsx
diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/map/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.module.css
similarity index 100%
rename from app/[lang]/(live)/(public)/hotelreservation/select-hotel/map/page.module.css
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.module.css
diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/map/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
similarity index 95%
rename from app/[lang]/(live)/(public)/hotelreservation/select-hotel/map/page.tsx
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
index 89f4e62ca..8dca8f4c7 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/map/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
@@ -3,7 +3,7 @@ import { env } from "@/env/server"
 import {
   fetchAvailableHotels,
   getFiltersFromHotels,
-} from "@/app/[lang]/(live)/(public)/hotelreservation/select-hotel/utils"
+} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
 import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
 import { setLang } from "@/i18n/serverContext"
 
diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css
similarity index 100%
rename from app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css
diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
similarity index 95%
rename from app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
index b6548122c..7dcec9130 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
@@ -3,7 +3,7 @@ import { selectHotelMap } from "@/constants/routes/hotelReservation"
 import {
   fetchAvailableHotels,
   getFiltersFromHotels,
-} from "@/app/[lang]/(live)/(public)/hotelreservation/select-hotel/utils"
+} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
 import { ChevronRightIcon } from "@/components/Icons"
diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/utils.ts b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts
similarity index 100%
rename from app/[lang]/(live)/(public)/hotelreservation/select-hotel/utils.ts
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts
diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.module.css
similarity index 100%
rename from app/[lang]/(live)/(public)/hotelreservation/select-rate/page.module.css
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.module.css
diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
similarity index 100%
rename from app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
rename to app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
diff --git a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css
deleted file mode 100644
index 2771aef75..000000000
--- a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.main {
-  display: flex;
-  justify-content: center;
-  padding: var(--Spacing-x4);
-  background-color: var(--Scandic-Brand-Warm-White);
-  min-height: 100dvh;
-  max-width: var(--max-width);
-  margin: 0 auto;
-}
-
-.section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x4);
-  width: 100%;
-}
diff --git a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx
deleted file mode 100644
index 0a22c5bc0..000000000
--- a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-"use client"
-
-import { useMemo } from "react"
-
-import {
-  BOOKING_CONFIRMATION_NUMBER,
-  BookingStatusEnum,
-} from "@/constants/booking"
-
-import IntroSection from "@/components/HotelReservation/BookingConfirmation/IntroSection"
-import StaySection from "@/components/HotelReservation/BookingConfirmation/StaySection"
-import SummarySection from "@/components/HotelReservation/BookingConfirmation/SummarySection"
-import { tempConfirmationData } from "@/components/HotelReservation/BookingConfirmation/tempConfirmationData"
-import LoadingSpinner from "@/components/LoadingSpinner"
-import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
-
-import styles from "./page.module.css"
-
-const maxRetries = 10
-const retryInterval = 2000
-
-export default function BookingConfirmationPage() {
-  const { email, hotel, stay, summary } = tempConfirmationData
-
-  const confirmationNumber = useMemo(() => {
-    if (typeof window === "undefined") return ""
-
-    const storedConfirmationNumber = sessionStorage.getItem(
-      BOOKING_CONFIRMATION_NUMBER
-    )
-    // TODO: cleanup stored values
-    // sessionStorage.removeItem(BOOKING_CONFIRMATION_NUMBER)
-    return storedConfirmationNumber
-  }, [])
-
-  const bookingStatus = useHandleBookingStatus(
-    confirmationNumber,
-    BookingStatusEnum.BookingCompleted,
-    maxRetries,
-    retryInterval
-  )
-
-  if (
-    confirmationNumber === null ||
-    bookingStatus.isError ||
-    (bookingStatus.isFetched && !bookingStatus.data)
-  ) {
-    // TODO: handle error
-    throw new Error("Error fetching booking status")
-  }
-
-  if (
-    bookingStatus.data?.reservationStatus === BookingStatusEnum.BookingCompleted
-  ) {
-    return (
-      <main className={styles.main}>
-        <section className={styles.section}>
-          <IntroSection email={email} />
-          <StaySection hotel={hotel} stay={stay} />
-          <SummarySection summary={summary} />
-        </section>
-      </main>
-    )
-  }
-
-  return <LoadingSpinner />
-}
diff --git a/app/[lang]/(live)/@bookingwidget/hotelreservation/[...paths]/page.tsx b/app/[lang]/(live)/@bookingwidget/hotelreservation/[...paths]/page.tsx
new file mode 100644
index 000000000..2ebaca014
--- /dev/null
+++ b/app/[lang]/(live)/@bookingwidget/hotelreservation/[...paths]/page.tsx
@@ -0,0 +1 @@
+export { default } from "../../page"
diff --git a/app/[lang]/(live)/@bookingwidget/hotelreservation/booking-confirmation/page.tsx b/app/[lang]/(live)/@bookingwidget/hotelreservation/booking-confirmation/page.tsx
new file mode 100644
index 000000000..e0ff199ee
--- /dev/null
+++ b/app/[lang]/(live)/@bookingwidget/hotelreservation/booking-confirmation/page.tsx
@@ -0,0 +1,3 @@
+export default function ConfirmedBookingSlot() {
+  return null
+}
diff --git a/app/[lang]/(live)/@bookingwidget/hotelreservation/page.tsx b/app/[lang]/(live)/@bookingwidget/hotelreservation/page.tsx
new file mode 100644
index 000000000..03a82e5f5
--- /dev/null
+++ b/app/[lang]/(live)/@bookingwidget/hotelreservation/page.tsx
@@ -0,0 +1 @@
+export { default } from "../page"
diff --git a/components/HotelReservation/BookingConfirmation/IntroSection/index.tsx b/components/HotelReservation/BookingConfirmation/IntroSection/index.tsx
deleted file mode 100644
index 448dc82e1..000000000
--- a/components/HotelReservation/BookingConfirmation/IntroSection/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useIntl } from "react-intl"
-
-import Button from "@/components/TempDesignSystem/Button"
-import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import Title from "@/components/TempDesignSystem/Text/Title"
-
-import styles from "./introSection.module.css"
-
-import { IntroSectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
-
-export default function IntroSection({ email }: IntroSectionProps) {
-  const intl = useIntl()
-
-  return (
-    <section className={styles.section}>
-      <div>
-        <Title textAlign="center" as="h2">
-          {intl.formatMessage({ id: "Thank you" })}
-        </Title>
-        <Subtitle textAlign="center" textTransform="uppercase">
-          {intl.formatMessage({ id: "We look forward to your visit!" })}
-        </Subtitle>
-      </div>
-      <Body color="burgundy" textAlign="center">
-        {intl.formatMessage({
-          id: "We have sent a detailed confirmation of your booking to your email: ",
-        })}
-        {email}
-      </Body>
-      <div className={styles.buttons}>
-        <Button
-          asChild
-          size="small"
-          theme="base"
-          intent="secondary"
-          className={styles.button}
-        >
-          <Link href="#" color="none">
-            {intl.formatMessage({ id: "Download the Scandic app" })}
-          </Link>
-        </Button>
-        <Button
-          asChild
-          size="small"
-          theme="base"
-          intent="secondary"
-          className={styles.button}
-        >
-          <Link href="#" color="none">
-            {intl.formatMessage({ id: "View your booking" })}
-          </Link>
-        </Button>
-      </div>
-    </section>
-  )
-}
diff --git a/components/HotelReservation/BookingConfirmation/IntroSection/introSection.module.css b/components/HotelReservation/BookingConfirmation/IntroSection/introSection.module.css
deleted file mode 100644
index 5b79c3796..000000000
--- a/components/HotelReservation/BookingConfirmation/IntroSection/introSection.module.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x3);
-  width: 100%;
-}
-
-.buttons {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--Spacing-x2);
-}
-
-.button {
-  width: 100%;
-  max-width: 240px;
-  justify-content: center;
-}
-
-@media screen and (min-width: 1367px) {
-  .buttons {
-    flex-direction: row;
-    justify-content: space-around;
-  }
-}
diff --git a/components/HotelReservation/BookingConfirmation/StaySection/index.tsx b/components/HotelReservation/BookingConfirmation/StaySection/index.tsx
deleted file mode 100644
index 7907ac191..000000000
--- a/components/HotelReservation/BookingConfirmation/StaySection/index.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { useIntl } from "react-intl"
-
-import { ArrowRightIcon, ScandicLogoIcon } from "@/components/Icons"
-import Image from "@/components/Image"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Title from "@/components/TempDesignSystem/Text/Title"
-
-import styles from "./staySection.module.css"
-
-import { StaySectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
-
-export default function StaySection({ hotel, stay }: StaySectionProps) {
-  const intl = useIntl()
-
-  const nightsText =
-    stay.nights > 1
-      ? intl.formatMessage({ id: "nights" })
-      : intl.formatMessage({ id: "night" })
-
-  return (
-    <>
-      <section className={styles.card}>
-        <Image
-          src={hotel.image}
-          alt=""
-          height={400}
-          width={200}
-          className={styles.image}
-        />
-        <div className={styles.info}>
-          <div className={styles.hotel}>
-            <ScandicLogoIcon color="red" />
-            <Title as="h5" textTransform="capitalize">
-              {hotel.name}
-            </Title>
-            <Caption color="burgundy" className={styles.caption}>
-              <span>{hotel.address}</span>
-              <span>{hotel.phone}</span>
-            </Caption>
-          </div>
-          <Body className={styles.stay}>
-            <span>{`${stay.nights} ${nightsText}`}</span>
-            <span className={styles.dates}>
-              <span>{stay.start}</span>
-              <ArrowRightIcon height={15} width={15} />
-              <span>{stay.end}</span>
-            </span>
-          </Body>
-        </div>
-      </section>
-      <section className={styles.table}>
-        <div className={styles.breakfast}>
-          <Body color="burgundy">
-            {intl.formatMessage({ id: "Breakfast" })}
-          </Body>
-          <Caption className={styles.caption}>
-            <span>{`${intl.formatMessage({ id: "Weekdays" })} ${hotel.breakfast.start}-${hotel.breakfast.end}`}</span>
-            <span>{`${intl.formatMessage({ id: "Weekends" })} ${hotel.breakfast.start}-${hotel.breakfast.end}`}</span>
-          </Caption>
-        </div>
-        <div className={styles.checkIn}>
-          <Body color="burgundy">{intl.formatMessage({ id: "Check in" })}</Body>
-          <Caption className={styles.caption}>
-            <span>{intl.formatMessage({ id: "From" })}</span>
-            <span>{hotel.checkIn}</span>
-          </Caption>
-        </div>
-        <div className={styles.checkOut}>
-          <Body color="burgundy">
-            {intl.formatMessage({ id: "Check out" })}
-          </Body>
-          <Caption className={styles.caption}>
-            <span>{intl.formatMessage({ id: "At latest" })}</span>
-            <span>{hotel.checkOut}</span>
-          </Caption>
-        </div>
-      </section>
-    </>
-  )
-}
diff --git a/components/HotelReservation/BookingConfirmation/StaySection/staySection.module.css b/components/HotelReservation/BookingConfirmation/StaySection/staySection.module.css
deleted file mode 100644
index 1eae5c732..000000000
--- a/components/HotelReservation/BookingConfirmation/StaySection/staySection.module.css
+++ /dev/null
@@ -1,78 +0,0 @@
-.card {
-  display: flex;
-  width: 100%;
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-Small);
-  overflow: hidden;
-}
-
-.image {
-  height: 100%;
-  width: 105px;
-  object-fit: cover;
-}
-
-.info {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  gap: var(--Spacing-x1);
-  padding: var(--Spacing-x2);
-}
-
-.hotel,
-.stay {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x-half);
-}
-
-.caption {
-  display: flex;
-  flex-direction: column;
-}
-
-.dates {
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x-half);
-}
-
-.table {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--Spacing-x2);
-  border-radius: var(--Corner-radius-Small);
-  background-color: var(--Base-Surface-Primary-dark-Normal);
-  width: 100%;
-}
-
-.breakfast,
-.checkIn,
-.checkOut {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x-half);
-}
-
-@media screen and (min-width: 1367px) {
-  .card {
-    flex-direction: column;
-  }
-  .image {
-    width: 100%;
-    max-height: 195px;
-  }
-
-  .info {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .hotel,
-  .stay {
-    width: 100%;
-    max-width: 230px;
-  }
-}
diff --git a/components/HotelReservation/BookingConfirmation/SummarySection/index.tsx b/components/HotelReservation/BookingConfirmation/SummarySection/index.tsx
deleted file mode 100644
index 16eb84330..000000000
--- a/components/HotelReservation/BookingConfirmation/SummarySection/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useIntl } from "react-intl"
-
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Title from "@/components/TempDesignSystem/Text/Title"
-
-import styles from "./summarySection.module.css"
-
-import { SummarySectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
-
-export default function SummarySection({ summary }: SummarySectionProps) {
-  const intl = useIntl()
-  const roomType = `${intl.formatMessage({ id: "Type of room" })}: ${summary.roomType}`
-  const bedType = `${intl.formatMessage({ id: "Type of bed" })}: ${summary.bedType}`
-  const breakfast = `${intl.formatMessage({ id: "Breakfast" })}: ${summary.breakfast}`
-  const flexibility = `${intl.formatMessage({ id: "Flexibility" })}: ${summary.flexibility}`
-
-  return (
-    <section className={styles.section}>
-      <Title as="h4" textAlign="center">
-        {intl.formatMessage({ id: "Summary" })}
-      </Title>
-      <Caption className={styles.summary}>
-        <span>{roomType}</span>
-        <span>1648 SEK</span>
-      </Caption>
-      <Caption className={styles.summary}>
-        <span>{bedType}</span>
-        <span>0 SEK</span>
-      </Caption>
-      <Caption className={styles.summary}>
-        <span>{breakfast}</span>
-        <span>198 SEK</span>
-      </Caption>
-      <Caption className={styles.summary}>
-        <span>{flexibility}</span>
-        <span>200 SEK</span>
-      </Caption>
-    </section>
-  )
-}
diff --git a/components/HotelReservation/BookingConfirmation/SummarySection/summarySection.module.css b/components/HotelReservation/BookingConfirmation/SummarySection/summarySection.module.css
deleted file mode 100644
index b65d92e76..000000000
--- a/components/HotelReservation/BookingConfirmation/SummarySection/summarySection.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.section {
-  width: 100%;
-}
-
-.summary {
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--Base-Border-Subtle);
-}
-
-.summary span {
-  padding: var(--Spacing-x2) var(--Spacing-x0);
-}
diff --git a/components/HotelReservation/BookingConfirmation/tempConfirmationData.ts b/components/HotelReservation/BookingConfirmation/tempConfirmationData.ts
deleted file mode 100644
index 2dbf572e7..000000000
--- a/components/HotelReservation/BookingConfirmation/tempConfirmationData.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { BookingConfirmation } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
-
-export const tempConfirmationData: BookingConfirmation = {
-  email: "lisa.andersson@outlook.com",
-  hotel: {
-    name: "Helsinki Hub",
-    address: "Kaisaniemenkatu 7, Helsinki",
-    location: "Helsinki",
-    phone: "+358 300 870680",
-    image:
-      "https://test3.scandichotels.com/imagevault/publishedmedia/i11isd60bh119s9486b7/downtown-camper-by-scandic-lobby-reception-desk-ch.jpg?w=640",
-    checkIn: "15.00",
-    checkOut: "12.00",
-    breakfast: { start: "06:30", end: "10:00" },
-  },
-  stay: {
-    nights: 1,
-    start: "2024.03.09",
-    end: "2024.03.10",
-  },
-  summary: {
-    roomType: "Standard Room",
-    bedType: "King size",
-    breakfast: "Yes",
-    flexibility: "Yes",
-  },
-}
diff --git a/components/HotelReservation/EnterDetails/Payment/index.tsx b/components/HotelReservation/EnterDetails/Payment/index.tsx
index 3d582e7e3..5ad6bdaf9 100644
--- a/components/HotelReservation/EnterDetails/Payment/index.tsx
+++ b/components/HotelReservation/EnterDetails/Payment/index.tsx
@@ -66,7 +66,7 @@ export default function Payment({
     resolver: zodResolver(paymentSchema),
   })
 
-  const initiateBooking = trpc.booking.booking.create.useMutation({
+  const initiateBooking = trpc.booking.create.useMutation({
     onSuccess: (result) => {
       if (result?.confirmationNumber) {
         setConfirmationNumber(result.confirmationNumber)
diff --git a/components/Icons/Download.tsx b/components/Icons/Download.tsx
new file mode 100644
index 000000000..7c1e9017a
--- /dev/null
+++ b/components/Icons/Download.tsx
@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function DownloadIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="21"
+      height="20"
+      viewBox="0 0 21 20"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_6955_3250"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="21"
+        height="21"
+      >
+        <rect x="0.5" y="0.000244141" width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_6955_3250)">
+        <path
+          d="M10.5013 12.9065C10.3971 12.9065 10.2982 12.8874 10.2044 12.8492C10.1107 12.811 10.0256 12.7537 9.94922 12.6773L7.05339 9.78145C6.90061 9.62868 6.82595 9.44812 6.82943 9.23979C6.8329 9.03145 6.90755 8.8509 7.05339 8.69812C7.20616 8.54534 7.38846 8.46722 7.60026 8.46375C7.81207 8.46027 7.99436 8.53493 8.14714 8.6877L9.72005 10.2606V4.32312C9.72005 4.10784 9.79644 3.92381 9.94922 3.77104C10.102 3.61826 10.286 3.54187 10.5013 3.54187C10.7166 3.54187 10.9006 3.61826 11.0534 3.77104C11.2062 3.92381 11.2826 4.10784 11.2826 4.32312V10.2606L12.8555 8.6877C13.0082 8.53493 13.1905 8.46027 13.4023 8.46375C13.6142 8.46722 13.7964 8.54534 13.9492 8.69812C14.0951 8.8509 14.1697 9.03145 14.1732 9.23979C14.1767 9.44812 14.102 9.62868 13.9492 9.78145L11.0534 12.6773C10.977 12.7537 10.8919 12.811 10.7982 12.8492C10.7044 12.8874 10.6055 12.9065 10.5013 12.9065ZM5.60547 16.4585C5.17491 16.4585 4.80686 16.3058 4.5013 16.0002C4.19575 15.6946 4.04297 15.3266 4.04297 14.896V13.2294C4.04297 13.0141 4.11936 12.8301 4.27214 12.6773C4.42491 12.5245 4.60894 12.4481 4.82422 12.4481C5.0395 12.4481 5.22352 12.5245 5.3763 12.6773C5.52908 12.8301 5.60547 13.0141 5.60547 13.2294V14.896H15.3971V13.2294C15.3971 13.0141 15.4735 12.8301 15.6263 12.6773C15.7791 12.5245 15.9631 12.4481 16.1784 12.4481C16.3937 12.4481 16.5777 12.5245 16.7305 12.6773C16.8832 12.8301 16.9596 13.0141 16.9596 13.2294V14.896C16.9596 15.3266 16.8069 15.6946 16.5013 16.0002C16.1957 16.3058 15.8277 16.4585 15.3971 16.4585H5.60547Z"
+          fill="#4D001B"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/Printer.tsx b/components/Icons/Printer.tsx
new file mode 100644
index 000000000..d703940da
--- /dev/null
+++ b/components/Icons/Printer.tsx
@@ -0,0 +1,36 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function PrinterIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="21"
+      height="20"
+      viewBox="0 0 21 20"
+      fill="none"
+      {...props}
+    >
+      <mask
+        id="mask0_6955_9062"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="21"
+        height="21"
+      >
+        <rect x="0.5" y="0.000244141" width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_6955_9062)">
+        <path
+          d="M7.20964 17.3127C6.77994 17.3127 6.4121 17.1598 6.10611 16.8538C5.80013 16.5478 5.64714 16.1799 5.64714 15.7502V14.0419H3.98047C3.55077 14.0419 3.18293 13.8889 2.87695 13.5829C2.57096 13.2769 2.41797 12.9091 2.41797 12.4794V9.14608C2.41797 8.47941 2.64887 7.91691 3.11068 7.45858C3.57248 7.00024 4.13325 6.77108 4.79297 6.77108H16.2096C16.8763 6.77108 17.4388 7.00024 17.8971 7.45858C18.3555 7.91691 18.5846 8.47941 18.5846 9.14608V12.4794C18.5846 12.9091 18.4316 13.2769 18.1257 13.5829C17.8197 13.8889 17.4518 14.0419 17.0221 14.0419H15.3555V15.7502C15.3555 16.1799 15.2025 16.5478 14.8965 16.8538C14.5905 17.1598 14.2227 17.3127 13.793 17.3127H7.20964ZM3.98047 12.4794H5.64714V12.4169C5.64714 11.9872 5.80013 11.6194 6.10611 11.3134C6.4121 11.0074 6.77994 10.8544 7.20964 10.8544H13.793C14.2227 10.8544 14.5905 11.0074 14.8965 11.3134C15.2025 11.6194 15.3555 11.9872 15.3555 12.4169V12.4794H17.0221V9.14608C17.0221 8.91587 16.944 8.7229 16.7878 8.56718C16.6316 8.41145 16.438 8.33358 16.207 8.33358H4.79564C4.56469 8.33358 4.37109 8.41145 4.21484 8.56718C4.05859 8.7229 3.98047 8.91587 3.98047 9.14608V12.4794ZM13.793 6.77108V4.31274H7.20964V6.77108H5.64714V4.31274C5.64714 3.88305 5.80013 3.51521 6.10611 3.20922C6.4121 2.90324 6.77994 2.75024 7.20964 2.75024H13.793C14.2227 2.75024 14.5905 2.90324 14.8965 3.20922C15.2025 3.51521 15.3555 3.88305 15.3555 4.31274V6.77108H13.793ZM15.3971 10.344C15.6124 10.344 15.7964 10.2676 15.9492 10.1148C16.102 9.96205 16.1784 9.77802 16.1784 9.56274C16.1784 9.34747 16.102 9.16344 15.9492 9.01066C15.7964 8.85788 15.6124 8.78149 15.3971 8.78149C15.1819 8.78149 14.9978 8.85788 14.8451 9.01066C14.6923 9.16344 14.6159 9.34747 14.6159 9.56274C14.6159 9.77802 14.6923 9.96205 14.8451 10.1148C14.9978 10.2676 15.1819 10.344 15.3971 10.344ZM13.793 15.7502V12.4169H7.20964V15.7502H13.793Z"
+          fill="#4D001B"
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx
index 8a7764dd6..e7547b178 100644
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -28,6 +28,7 @@ export { default as CrossCircle } from "./CrossCircle"
 export { default as CulturalIcon } from "./Cultural"
 export { default as DeleteIcon } from "./Delete"
 export { default as DoorOpenIcon } from "./DoorOpen"
+export { default as DownloadIcon } from "./Download"
 export { default as DresserIcon } from "./Dresser"
 export { default as EditIcon } from "./Edit"
 export { default as ElectricBikeIcon } from "./ElectricBike"
@@ -76,6 +77,7 @@ export { default as PhoneIcon } from "./Phone"
 export { default as PlusIcon } from "./Plus"
 export { default as PlusCircleIcon } from "./PlusCircle"
 export { default as PriceTagIcon } from "./PriceTag"
+export { default as PrinterIcon } from "./Printer"
 export { default as RestaurantIcon } from "./Restaurant"
 export { default as RoomServiceIcon } from "./RoomService"
 export { default as SaunaIcon } from "./Sauna"
diff --git a/constants/booking.ts b/constants/booking.ts
index 9f5b6fed9..81e23cd23 100644
--- a/constants/booking.ts
+++ b/constants/booking.ts
@@ -4,6 +4,13 @@ export enum BookingStatusEnum {
   BookingCompleted = "BookingCompleted",
 }
 
+export enum BedTypeEnum {
+  Crib = "Crib",
+  ExtraBed = "ExtraBed",
+  ParentsBed = "ParentsBed",
+  Unknown = "Unknown",
+}
+
 export const BOOKING_CONFIRMATION_NUMBER = "bookingConfirmationNumber"
 
 export enum PaymentMethodEnum {
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index 759c424d0..3500a8d01 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -9,6 +9,7 @@
   "Add Room": "Add room",
   "Add code": "Add code",
   "Add new card": "Add new card",
+  "Add to calendar": "Add to calendar",
   "Address": "Address",
   "Adults": "Adults",
   "Age": "Age",
@@ -25,7 +26,6 @@
   "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 of today": "as of today",
   "As our": "As our {level}",
   "As our Close Friend": "As our Close Friend",
   "At latest": "At latest",
@@ -39,12 +39,6 @@
   "Book": "Book",
   "Book reward night": "Book reward night",
   "Booking number": "Booking number",
-  "booking.adults": "{totalAdults, plural, one {# adult} other {# adults}}",
-  "booking.children": "{totalChildren, plural, one {# child} other {# children}}",
-  "booking.guests": "Max {nrOfGuests, plural, one {# guest} other {# guests}}",
-  "booking.nights": "{totalNights, plural, one {# night} other {# nights}}",
-  "booking.rooms": "{totalRooms, plural, one {# room} other {# rooms}}",
-  "booking.terms": "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsLink>Terms & Conditions</termsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyLink>Scandic's Privacy policy</privacyLink>. I also accept that Scandic require a valid credit card during my visit in case anything is left unpaid.",
   "Breakfast": "Breakfast",
   "Breakfast buffet": "Breakfast buffet",
   "Breakfast excluded": "Breakfast excluded",
@@ -53,12 +47,13 @@
   "Breakfast selection in next step.": "Breakfast selection in next step.",
   "Bus terminal": "Bus terminal",
   "Business": "Business",
-  "by": "by",
   "Cancel": "Cancel",
-  "characters": "characters",
+  "Cancellation policy": "Cancellation policy",
   "Check in": "Check in",
   "Check out": "Check out",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.",
+  "Check-in": "Check-in",
+  "Check-out": "Check-out",
   "Child age is required": "Child age is required",
   "Children": "Children",
   "Choose room": "Choose room",
@@ -100,6 +95,7 @@
   "Distance to city centre": "{number}km to city centre",
   "Do you want to start the day with Scandics famous breakfast buffé?": "Do you want to start the day with Scandics famous breakfast buffé?",
   "Done": "Done",
+  "Download invoice": "Download invoice",
   "Download the Scandic app": "Download the Scandic app",
   "Driving directions": "Driving directions",
   "Earn bonus nights & points": "Earn bonus nights & points",
@@ -114,9 +110,9 @@
   "Explore all levels and benefits": "Explore all levels and benefits",
   "Explore nearby": "Explore nearby",
   "Extras to your booking": "Extras to your booking",
+  "FAQ": "FAQ",
   "Failed to delete credit card, please try again later.": "Failed to delete credit card, please try again later.",
   "Fair": "Fair",
-  "FAQ": "FAQ",
   "Find booking": "Find booking",
   "Find hotels": "Find hotels",
   "First name": "First name",
@@ -125,14 +121,14 @@
   "Former Scandic Hotel": "Former Scandic Hotel",
   "Free cancellation": "Free cancellation",
   "Free rebooking": "Free rebooking",
+  "Free until": "Free until",
   "From": "From",
   "Get inspired": "Get inspired",
   "Get member benefits & offers": "Get member benefits & offers",
   "Go back to edit": "Go back to edit",
   "Go back to overview": "Go back to overview",
-  "guest": "guest",
+  "Guest": "Guest",
   "Guest information": "Guest information",
-  "guests": "guests",
   "Guests & Rooms": "Guests & Rooms",
   "Hi": "Hi",
   "Highest level": "Highest level",
@@ -140,9 +136,6 @@
   "Hotel": "Hotel",
   "Hotel facilities": "Hotel facilities",
   "Hotel surroundings": "Hotel surroundings",
-  "hotelPages.rooms.roomCard.person": "person",
-  "hotelPages.rooms.roomCard.persons": "persons",
-  "hotelPages.rooms.roomCard.seeRoomDetails": "See room details",
   "Hotels": "Hotels",
   "How do you want to sleep?": "How do you want to sleep?",
   "How it works": "How it works",
@@ -153,10 +146,9 @@
   "In extra bed": "In extra bed",
   "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 at no cost": "Join at no cost",
   "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",
   "Last name": "Last name",
   "Latest searches": "Latest searches",
@@ -176,7 +168,7 @@
   "Log in here": "Log in here",
   "Log in/Join": "Log in/Join",
   "Log out": "Log out",
-  "lowercase letter": "lowercase letter",
+  "MY SAVED CARDS": "MY SAVED CARDS",
   "Main menu": "Main menu",
   "Manage preferences": "Manage preferences",
   "Map": "Map",
@@ -186,9 +178,9 @@
   "Member price": "Member price",
   "Member price from": "Member price from",
   "Members": "Members",
-  "Membership cards": "Membership cards",
   "Membership ID": "Membership ID",
   "Membership ID copied to clipboard": "Membership ID copied to clipboard",
+  "Membership cards": "Membership cards",
   "Menu": "Menu",
   "Modify": "Modify",
   "Month": "Month",
@@ -198,16 +190,11 @@
   "My pages": "My pages",
   "My pages menu": "My pages menu",
   "My payment cards": "My payment cards",
-  "MY SAVED CARDS": "MY SAVED CARDS",
   "My wishes": "My wishes",
-  "n/a": "n/a",
   "Nearby": "Nearby",
   "Nearby companies": "Nearby companies",
   "New password": "New password",
   "Next": "Next",
-  "next level:": "next level:",
-  "night": "night",
-  "nights": "nights",
   "Nights needed to level up": "Nights needed to level up",
   "No breakfast": "No breakfast",
   "No content published": "No content published",
@@ -220,14 +207,12 @@
   "Nordic Swan Ecolabel": "Nordic Swan Ecolabel",
   "Not found": "Not found",
   "Nr night, nr adult": "{nights, number} night, {adults, number} adult",
-  "number": "number",
+  "OTHER PAYMENT METHODS": "OTHER PAYMENT METHODS",
   "On your journey": "On your journey",
   "Open": "Open",
   "Open language menu": "Open language menu",
   "Open menu": "Open menu",
   "Open my pages menu": "Open my pages menu",
-  "or": "or",
-  "OTHER PAYMENT METHODS": "OTHER PAYMENT METHODS",
   "Overview": "Overview",
   "Parking": "Parking",
   "Parking / Garage": "Parking / Garage",
@@ -235,11 +220,11 @@
   "Pay later": "Pay later",
   "Pay now": "Pay now",
   "Payment info": "Payment info",
+  "Payment received": "Payment received",
   "Phone": "Phone",
   "Phone is required": "Phone is required",
   "Phone number": "Phone number",
   "Please enter a valid phone number": "Please enter a valid phone number",
-  "points": "Points",
   "Points": "Points",
   "Points being calculated": "Points being calculated",
   "Points earned prior to May 1, 2021": "Points earned prior to May 1, 2021",
@@ -247,6 +232,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",
+  "Print confirmation": "Print confirmation",
   "Proceed to login": "Proceed to login",
   "Proceed to payment method": "Proceed to payment method",
   "Public price from": "Public price from",
@@ -256,6 +242,8 @@
   "Read more & book a table": "Read more & book a table",
   "Read more about the hotel": "Read more about the hotel",
   "Read more about wellness & exercise": "Read more about wellness & exercise",
+  "Rebooking": "Rebooking",
+  "Reference #{bookingNr}": "Reference #{bookingNr}",
   "Remove card from member profile": "Remove card from member profile",
   "Request bedtype": "Request bedtype",
   "Restaurant": "{count, plural, one {#Restaurant} other {#Restaurants}}",
@@ -301,34 +289,32 @@
   "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.",
   "Something went wrong!": "Something went wrong!",
-  "special character": "special character",
-  "spendable points expiring by": "{points} spendable points expiring by {date}",
   "Sports": "Sports",
   "Standard price": "Standard price",
   "Street": "Street",
   "Successfully updated profile!": "Successfully updated profile!",
   "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",
   "Things nearby HOTEL_NAME": "Things nearby {hotelName}",
-  "to": "to",
-  "Total incl VAT": "Total incl VAT",
   "Total Points": "Total Points",
+  "Total cost": "Total cost",
+  "Total incl VAT": "Total incl VAT",
   "Tourist": "Tourist",
   "Transaction date": "Transaction date",
   "Transactions": "Transactions",
   "Transportations": "Transportations",
   "Tripadvisor reviews": "{rating} ({count} reviews on Tripadvisor)",
-  "TUI Points": "TUI Points",
   "Type of bed": "Type of bed",
   "Type of room": "Type of room",
-  "uppercase letter": "uppercase letter",
   "Use bonus cheque": "Use bonus cheque",
   "Use code/voucher": "Use code/voucher",
   "User information": "User information",
+  "VAT": "VAT",
   "View as list": "View as list",
   "View as map": "View as map",
   "View your booking": "View your booking",
@@ -347,18 +333,19 @@
   "Where to": "Where to",
   "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, discard changes": "Yes, discard changes",
   "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.",
   "You have no previous stays.": "You have no previous stays.",
   "You have no upcoming stays.": "You have no upcoming stays.",
+  "Your Challenges Conquer & Earn!": "Your Challenges Conquer & Earn!",
   "Your card was successfully removed!": "Your card was successfully removed!",
   "Your card was successfully saved!": "Your card was successfully saved!",
-  "Your Challenges Conquer & Earn!": "Your Challenges Conquer & Earn!",
   "Your current level": "Your current level",
   "Your details": "Your details",
+  "Your hotel": "Your hotel",
   "Your level": "Your level",
   "Your points to spend": "Your points to spend",
   "Your room": "Your room",
@@ -366,7 +353,39 @@
   "Zoo": "Zoo",
   "Zoom in": "Zoom in",
   "Zoom out": "Zoom out",
+  "as of today": "as of today",
+  "booking.adults": "{totalAdults, plural, one {# adult} other {# adults}}",
+  "booking.children": "{totalChildren, plural, one {# child} other {# children}}",
+  "booking.confirmation.text": "Thank you for booking with us! We look forward to welcoming you and hope you have a pleasant stay. If you have any questions or need to make changes to your reservation, please <emailLink>email us.</emailLink>",
+  "booking.confirmation.title": "Your booking is confirmed",
+  "booking.guests": "Max {nrOfGuests, plural, one {# guest} other {# guests}}",
+  "booking.nights": "{totalNights, plural, one {# night} other {# nights}}",
+  "booking.rooms": "{totalRooms, plural, one {# room} other {# rooms}}",
+  "booking.terms": "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsLink>Terms & Conditions</termsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyLink>Scandic's Privacy policy</privacyLink>. I also accept that Scandic require a valid credit card during my visit in case anything is left unpaid.",
+  "by": "by",
+  "characters": "characters",
+  "from": "from",
+  "guest": "guest",
+  "guests": "guests",
+  "hotelPages.rooms.roomCard.person": "person",
+  "hotelPages.rooms.roomCard.persons": "persons",
+  "hotelPages.rooms.roomCard.seeRoomDetails": "See room details",
+  "km to city center": "km to city center",
+  "lowercase letter": "lowercase letter",
+  "member no": "member no",
+  "n/a": "n/a",
+  "next level:": "next level:",
+  "night": "night",
+  "nights": "nights",
+  "number": "number",
+  "or": "or",
+  "points": "Points",
+  "special character": "special character",
+  "spendable points expiring by": "{points} spendable points expiring by {date}",
+  "to": "to",
+  "uppercase letter": "uppercase letter",
   "{amount} {currency}": "{amount} {currency}",
+  "{card} ending with {cardno}": "{card} ending with {cardno}",
   "{difference}{amount} {currency}": "{difference}{amount} {currency}",
   "{width} cm × {length} cm": "{width} cm × {length} cm"
-}
+}
\ No newline at end of file
diff --git a/i18n/index.ts b/i18n/index.ts
index be2d744bb..0a8ebb67d 100644
--- a/i18n/index.ts
+++ b/i18n/index.ts
@@ -8,7 +8,7 @@ import { Lang } from "@/constants/languages"
 const cache = createIntlCache()
 
 async function initIntl(lang: Lang) {
-  return createIntl(
+  return createIntl<React.ReactNode>(
     {
       defaultLocale: Lang.en,
       locale: lang,
diff --git a/lib/dt.ts b/lib/dt.ts
index b90938475..5cbe77692 100644
--- a/lib/dt.ts
+++ b/lib/dt.ts
@@ -7,6 +7,7 @@ import d from "dayjs"
 import advancedFormat from "dayjs/plugin/advancedFormat"
 import isToday from "dayjs/plugin/isToday"
 import relativeTime from "dayjs/plugin/relativeTime"
+import timezone from "dayjs/plugin/timezone"
 import utc from "dayjs/plugin/utc"
 
 /**
@@ -59,6 +60,7 @@ d.locale("no", {
 d.extend(advancedFormat)
 d.extend(isToday)
 d.extend(relativeTime)
+d.extend(timezone)
 d.extend(utc)
 
 export const dt = d
diff --git a/server/routers/booking/input.ts b/server/routers/booking/input.ts
index 7e9b9b2c8..cbda7d3ef 100644
--- a/server/routers/booking/input.ts
+++ b/server/routers/booking/input.ts
@@ -63,6 +63,10 @@ export const createBookingInput = z.object({
 })
 
 // Query
-export const getBookingStatusInput = z.object({
+const confirmationNumberInput = z.object({
   confirmationNumber: z.string(),
 })
+
+export const bookingConfirmationInput = confirmationNumberInput
+
+export const getBookingStatusInput = confirmationNumberInput
diff --git a/server/routers/booking/mutation.ts b/server/routers/booking/mutation.ts
index 1ff3422af..9e5677d32 100644
--- a/server/routers/booking/mutation.ts
+++ b/server/routers/booking/mutation.ts
@@ -35,96 +35,95 @@ async function getMembershipNumber(
 }
 
 export const bookingMutationRouter = router({
-  booking: router({
-    create: serviceProcedure
-      .input(createBookingInput)
-      .mutation(async function ({ ctx, input }) {
-        const { checkInDate, checkOutDate, hotelId } = input
+  create: serviceProcedure.input(createBookingInput).mutation(async function ({
+    ctx,
+    input,
+  }) {
+    const { checkInDate, checkOutDate, hotelId } = input
 
-        // TODO: add support for user token OR service token in procedure
-        // then we can fetch membership number if user token exists
-        const loggingAttributes = {
-          // membershipNumber: await getMembershipNumber(ctx.session),
-          checkInDate,
-          checkOutDate,
-          hotelId,
-        }
+    // TODO: add support for user token OR service token in procedure
+    // then we can fetch membership number if user token exists
+    const loggingAttributes = {
+      // membershipNumber: await getMembershipNumber(ctx.session),
+      checkInDate,
+      checkOutDate,
+      hotelId,
+    }
 
-        createBookingCounter.add(1, { hotelId, checkInDate, checkOutDate })
+    createBookingCounter.add(1, { hotelId, checkInDate, checkOutDate })
 
-        console.info(
-          "api.booking.booking.create start",
-          JSON.stringify({
-            query: loggingAttributes,
-          })
-        )
-        const headers = {
-          Authorization: `Bearer ${ctx.serviceToken}`,
-        }
+    console.info(
+      "api.booking.create start",
+      JSON.stringify({
+        query: loggingAttributes,
+      })
+    )
+    const headers = {
+      Authorization: `Bearer ${ctx.serviceToken}`,
+    }
 
-        const apiResponse = await api.post(api.endpoints.v1.booking, {
-          headers,
-          body: input,
+    const apiResponse = await api.post(api.endpoints.v1.booking, {
+      headers,
+      body: input,
+    })
+
+    if (!apiResponse.ok) {
+      const text = await apiResponse.text()
+      createBookingFailCounter.add(1, {
+        hotelId,
+        checkInDate,
+        checkOutDate,
+        error_type: "http_error",
+        error: JSON.stringify({
+          status: apiResponse.status,
+        }),
+      })
+      console.error(
+        "api.booking.create error",
+        JSON.stringify({
+          query: loggingAttributes,
+          error: {
+            status: apiResponse.status,
+            statusText: apiResponse.statusText,
+            error: text,
+          },
         })
+      )
+      return null
+    }
 
-        if (!apiResponse.ok) {
-          const text = await apiResponse.text()
-          createBookingFailCounter.add(1, {
-            hotelId,
-            checkInDate,
-            checkOutDate,
-            error_type: "http_error",
-            error: JSON.stringify({
-              status: apiResponse.status,
-            }),
-          })
-          console.error(
-            "api.booking.booking.create error",
-            JSON.stringify({
-              query: loggingAttributes,
-              error: {
-                status: apiResponse.status,
-                statusText: apiResponse.statusText,
-                error: text,
-              },
-            })
-          )
-          return null
-        }
+    const apiJson = await apiResponse.json()
+    const verifiedData = createBookingSchema.safeParse(apiJson)
+    if (!verifiedData.success) {
+      createBookingFailCounter.add(1, {
+        hotelId,
+        checkInDate,
+        checkOutDate,
+        error_type: "validation_error",
+      })
 
-        const apiJson = await apiResponse.json()
-        const verifiedData = createBookingSchema.safeParse(apiJson)
-        if (!verifiedData.success) {
-          createBookingFailCounter.add(1, {
-            hotelId,
-            checkInDate,
-            checkOutDate,
-            error_type: "validation_error",
-          })
-
-          console.error(
-            "api.booking.booking.create validation error",
-            JSON.stringify({
-              query: loggingAttributes,
-              error: verifiedData.error,
-            })
-          )
-          return null
-        }
-
-        createBookingSuccessCounter.add(1, {
-          hotelId,
-          checkInDate,
-          checkOutDate,
+      console.error(
+        "api.booking.create validation error",
+        JSON.stringify({
+          query: loggingAttributes,
+          error: verifiedData.error,
         })
+      )
+      return null
+    }
 
-        console.info(
-          "api.booking.booking.create success",
-          JSON.stringify({
-            query: loggingAttributes,
-          })
-        )
-        return verifiedData.data
-      }),
+    createBookingSuccessCounter.add(1, {
+      hotelId,
+      checkInDate,
+      checkOutDate,
+    })
+
+    console.info(
+      "api.booking.create success",
+      JSON.stringify({
+        query: loggingAttributes,
+      })
+    )
+    return verifiedData.data
   }),
 })
diff --git a/server/routers/booking/output.ts b/server/routers/booking/output.ts
index 7535aac6e..aacf1ca6b 100644
--- a/server/routers/booking/output.ts
+++ b/server/routers/booking/output.ts
@@ -1,5 +1,8 @@
 import { z } from "zod"
 
+import { BedTypeEnum } from "@/constants/booking"
+
+// MUTATION
 export const createBookingSchema = z
   .object({
     data: z.object({
@@ -32,4 +35,46 @@ export const createBookingSchema = z
     paymentUrl: d.data.attributes.paymentUrl,
   }))
 
-type CreateBookingData = z.infer<typeof createBookingSchema>
+// QUERY
+const childrenAgesSchema = z.object({
+  age: z.number(),
+  bedType: z.nativeEnum(BedTypeEnum),
+})
+
+const guestSchema = z.object({
+  firstName: z.string(),
+  lastName: z.string(),
+})
+
+const packagesSchema = z.object({
+  accessibility: z.boolean(),
+  allergyFriendly: z.boolean(),
+  breakfast: z.boolean(),
+  petFriendly: z.boolean(),
+})
+
+export const bookingConfirmationSchema = z
+  .object({
+    data: z.object({
+      attributes: z.object({
+        adults: z.number(),
+        checkInDate: z.date({ coerce: true }),
+        checkOutDate: z.date({ coerce: true }),
+        createDateTime: z.date({ coerce: true }),
+        childrenAges: z.array(childrenAgesSchema),
+        computedReservationStatus: z.string(),
+        confirmationNumber: z.string(),
+        currencyCode: z.string(),
+        guest: guestSchema,
+        hasPayRouting: z.boolean(),
+        hotelId: z.string(),
+        packages: packagesSchema,
+        rateCode: z.string(),
+        reservationStatus: z.string(),
+        totalPrice: z.number(),
+      }),
+      id: z.string(),
+      type: z.literal("booking"),
+    }),
+  })
+  .transform(({ data }) => data.attributes)
diff --git a/server/routers/booking/query.ts b/server/routers/booking/query.ts
index d053782bd..76b874ba3 100644
--- a/server/routers/booking/query.ts
+++ b/server/routers/booking/query.ts
@@ -4,10 +4,20 @@ import * as api from "@/lib/api"
 import { badRequestError, serverErrorByStatus } from "@/server/errors/trpc"
 import { router, serviceProcedure } from "@/server/trpc"
 
-import { getBookingStatusInput } from "./input"
-import { createBookingSchema } from "./output"
+import { bookingConfirmationInput, getBookingStatusInput } from "./input"
+import { bookingConfirmationSchema, createBookingSchema } from "./output"
 
 const meter = metrics.getMeter("trpc.booking")
+const getBookingConfirmationCounter = meter.createCounter(
+  "trpc.booking.confirmation"
+)
+const getBookingConfirmationSuccessCounter = meter.createCounter(
+  "trpc.booking.confirmation-success"
+)
+const getBookingConfirmationFailCounter = meter.createCounter(
+  "trpc.booking.confirmation-fail"
+)
+
 const getBookingStatusCounter = meter.createCounter("trpc.booking.status")
 const getBookingStatusSuccessCounter = meter.createCounter(
   "trpc.booking.status-success"
@@ -17,6 +27,113 @@ const getBookingStatusFailCounter = meter.createCounter(
 )
 
 export const bookingQueryRouter = router({
+  confirmation: serviceProcedure
+    .input(bookingConfirmationInput)
+    .query(async function ({ ctx, input: { confirmationNumber } }) {
+      getBookingConfirmationCounter.add(1, { confirmationNumber })
+
+      const apiResponse = await api.get(
+        `${api.endpoints.v1.booking}/${confirmationNumber}`,
+        {
+          headers: {
+            Authorization: `Bearer ${ctx.serviceToken}`,
+          },
+        }
+      )
+
+      if (!apiResponse.ok) {
+        const responseMessage = await apiResponse.text()
+        getBookingConfirmationFailCounter.add(1, {
+          confirmationNumber,
+          error_type: "http_error",
+          error: responseMessage,
+        })
+        console.error(
+          "api.booking.confirmation error",
+          JSON.stringify({
+            query: { confirmationNumber },
+            error: {
+              status: apiResponse.status,
+              statusText: apiResponse.statusText,
+              text: responseMessage,
+            },
+          })
+        )
+
+        throw serverErrorByStatus(apiResponse.status, apiResponse)
+      }
+
+      const apiJson = await apiResponse.json()
+      const booking = bookingConfirmationSchema.safeParse(apiJson)
+      if (!booking.success) {
+        getBookingConfirmationFailCounter.add(1, {
+          confirmationNumber,
+          error_type: "validation_error",
+          error: JSON.stringify(booking.error),
+        })
+        console.error(
+          "api.booking.confirmation validation error",
+          JSON.stringify({
+            query: { confirmationNumber },
+            error: booking.error,
+          })
+        )
+        throw badRequestError()
+      }
+
+      getBookingConfirmationSuccessCounter.add(1, { confirmationNumber })
+      console.info(
+        "api.booking.confirmation success",
+        JSON.stringify({
+          query: { confirmationNumber },
+        })
+      )
+
+      return {
+        ...booking.data,
+        temp: {
+          breakfastFrom: "06:30",
+          breakfastTo: "11:00",
+          cancelPolicy: "Free rebooking",
+          fromDate: "2024-10-21 14:00",
+          packages: [
+            {
+              name: "Breakfast buffet",
+              price: "150 SEK",
+            },
+            {
+              name: "Member discount",
+              price: "-297 SEK",
+            },
+            {
+              name: "Points used / remaining",
+              price: "0 / 1044",
+            },
+          ],
+          payment: "2024-08-09 1:47",
+          room: {
+            price: "2 589 SEK",
+            type: "Cozy Cabin",
+            vat: "684,79 SEK",
+          },
+          toDate: "2024-10-22 11:00",
+          total: "2 739 SEK",
+          totalInEuro: "265 EUR",
+        },
+        guest: {
+          email: "sarah.obrian@gmail.com",
+          firstName: "Sarah",
+          lastName: "O'Brian",
+          memberbershipNumber: "19822",
+          phoneNumber: "+46702446688",
+        },
+        hotel: {
+          email: "bookings@scandichotels.com",
+          name: "Downtown Camper by Scandic",
+          phoneNumber: "+4689001350",
+        },
+      }
+    }),
   status: serviceProcedure.input(getBookingStatusInput).query(async function ({
     ctx,
     input,

From d5abe13a7e323a3a20f52c66394ae993065b1e98 Mon Sep 17 00:00:00 2001
From: Michael Zetterberg <michael.zetterberg@scandichotels.com>
Date: Wed, 23 Oct 2024 12:18:08 +0200
Subject: [PATCH 48/69] fix: add feature flag for service token scopes

---
 server/tokenManager.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/server/tokenManager.ts b/server/tokenManager.ts
index cdd6078dc..24180d017 100644
--- a/server/tokenManager.ts
+++ b/server/tokenManager.ts
@@ -70,7 +70,12 @@ async function fetchServiceToken(scopes: string[]) {
 }
 
 export async function getServiceToken() {
-  const scopes = ["profile", "hotel", "booking"]
+  let scopes: string[] = []
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    scopes = ["profile"]
+  } else {
+    scopes = ["profile", "hotel", "booking"]
+  }
   const tag = generateServiceTokenTag(scopes)
   const getCachedJwt = unstable_cache(
     async (scopes) => {

From 52c5f6d29ecfce9f0766432096f0891ce7d1c933 Mon Sep 17 00:00:00 2001
From: Michael Zetterberg <michael.zetterberg@scandichotels.com>
Date: Wed, 23 Oct 2024 12:18:55 +0200
Subject: [PATCH 49/69] fix: feature flag booking widget and sitewidealert

---
 app/[lang]/(live)/@bookingwidget/loading.tsx | 6 ++++++
 app/[lang]/(live)/@bookingwidget/page.tsx    | 5 +++++
 app/[lang]/(live)/@sitewidealert/page.tsx    | 6 ++++++
 3 files changed, 17 insertions(+)

diff --git a/app/[lang]/(live)/@bookingwidget/loading.tsx b/app/[lang]/(live)/@bookingwidget/loading.tsx
index 2c203967d..5e05ba68c 100644
--- a/app/[lang]/(live)/@bookingwidget/loading.tsx
+++ b/app/[lang]/(live)/@bookingwidget/loading.tsx
@@ -1,8 +1,14 @@
+import { env } from "@/env/server"
+
 import LoadingSpinner from "@/components/LoadingSpinner"
 
 import styles from "./loading.module.css"
 
 export default function LoadingBookingWidget() {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    return null
+  }
+
   return (
     <div className={styles.container}>
       <LoadingSpinner />
diff --git a/app/[lang]/(live)/@bookingwidget/page.tsx b/app/[lang]/(live)/@bookingwidget/page.tsx
index 13a414cba..7e197d0fa 100644
--- a/app/[lang]/(live)/@bookingwidget/page.tsx
+++ b/app/[lang]/(live)/@bookingwidget/page.tsx
@@ -1,8 +1,13 @@
+import { env } from "@/env/server"
 import { serverClient } from "@/lib/trpc/server"
 
 import BookingWidget, { preload } from "@/components/BookingWidget"
 
 export default async function BookingWidgetPage() {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    return null
+  }
+
   preload()
 
   // Get the booking widget show/hide status based on page specific settings
diff --git a/app/[lang]/(live)/@sitewidealert/page.tsx b/app/[lang]/(live)/@sitewidealert/page.tsx
index 618f3b5cb..be7ae2256 100644
--- a/app/[lang]/(live)/@sitewidealert/page.tsx
+++ b/app/[lang]/(live)/@sitewidealert/page.tsx
@@ -1,11 +1,17 @@
 import { Suspense } from "react"
 
+import { env } from "@/env/server"
+
 import SitewideAlert, { preload } from "@/components/SitewideAlert"
 import { setLang } from "@/i18n/serverContext"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
 export default function SitewideAlertPage({ params }: PageArgs<LangParams>) {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    return null
+  }
+
   setLang(params.lang)
   preload()
 

From 025c5c8291e5a1a4d0b09e03ac902ab8ade6e6a1 Mon Sep 17 00:00:00 2001
From: Tobias Johansson <tobias.johansson@scandichotels.com>
Date: Wed, 23 Oct 2024 11:51:44 +0000
Subject: [PATCH 50/69] Merged in feat/SW-659-payment-send-query-params (pull
 request #727)

feat(SW-659): Receive query params from Planet callbacks

* feat(SW-659): read confirmation number from url and update callback url if dev

* fix(SW-659): moved callback url into env variable


Approved-by: Simon.Emanuelsson
---
 .../booking-confirmation/page.tsx             |  6 ++-
 .../payment-callback/[lang]/[status]/route.ts | 16 ++++++--
 .../EnterDetails/Payment/index.tsx            | 39 +++++++++++--------
 constants/booking.ts                          |  2 +-
 env/client.ts                                 |  4 ++
 5 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx
index 23b5270d4..ef7e818c4 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx
@@ -22,9 +22,11 @@ import type { LangParams, PageArgs } from "@/types/params"
 
 export default async function BookingConfirmationPage({
   params,
-}: PageArgs<LangParams>) {
+  searchParams,
+}: PageArgs<LangParams, { confirmationNumber: string }>) {
+  const confirmationNumber = searchParams.confirmationNumber
   const booking = await serverClient().booking.confirmation({
-    confirmationNumber: "991697377",
+    confirmationNumber,
   })
 
   if (!booking) {
diff --git a/app/api/web/payment-callback/[lang]/[status]/route.ts b/app/api/web/payment-callback/[lang]/[status]/route.ts
index 4154aff14..baa8e4b8a 100644
--- a/app/api/web/payment-callback/[lang]/[status]/route.ts
+++ b/app/api/web/payment-callback/[lang]/[status]/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server"
-import { env } from "process"
 
+import { BOOKING_CONFIRMATION_NUMBER } from "@/constants/booking"
 import { Lang } from "@/constants/languages"
 import {
   bookingConfirmation,
@@ -17,14 +17,24 @@ export async function GET(
   console.log(`[payment-callback] callback started`)
   const lang = params.lang as Lang
   const status = params.status
-  const returnUrl = new URL(`${publicURL}/${payment[lang]}`)
 
-  if (status === "success") {
+  const queryParams = request.nextUrl.searchParams
+  const confirmationNumber = queryParams.get(BOOKING_CONFIRMATION_NUMBER)
+
+  if (status === "success" && confirmationNumber) {
     const confirmationUrl = new URL(`${publicURL}/${bookingConfirmation[lang]}`)
+    confirmationUrl.searchParams.set(
+      BOOKING_CONFIRMATION_NUMBER,
+      confirmationNumber
+    )
+
     console.log(`[payment-callback] redirecting to: ${confirmationUrl}`)
     return NextResponse.redirect(confirmationUrl)
   }
 
+  const returnUrl = new URL(`${publicURL}/${payment[lang]}`)
+  returnUrl.search = queryParams.toString()
+
   if (status === "cancel") {
     returnUrl.searchParams.set("cancel", "true")
   }
diff --git a/components/HotelReservation/EnterDetails/Payment/index.tsx b/components/HotelReservation/EnterDetails/Payment/index.tsx
index 5ad6bdaf9..0da2b79e2 100644
--- a/components/HotelReservation/EnterDetails/Payment/index.tsx
+++ b/components/HotelReservation/EnterDetails/Payment/index.tsx
@@ -1,14 +1,13 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { useRouter } from "next/navigation"
-import { useEffect, useState } from "react"
+import { useRouter, useSearchParams } from "next/navigation"
+import { useEffect, useMemo, useState } from "react"
 import { Label as AriaLabel } from "react-aria-components"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import {
-  BOOKING_CONFIRMATION_NUMBER,
   BookingStatusEnum,
   PAYMENT_METHOD_TITLES,
   PaymentMethodEnum,
@@ -17,7 +16,9 @@ import {
   bookingTermsAndConditions,
   privacyPolicy,
 } from "@/constants/currentWebHrefs"
+import { env } from "@/env/client"
 import { trpc } from "@/lib/trpc/client"
+import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Button from "@/components/TempDesignSystem/Button"
@@ -51,6 +52,9 @@ export default function Payment({
   const router = useRouter()
   const lang = useLang()
   const intl = useIntl()
+  const queryParams = useSearchParams()
+  const { firstName, lastName, email, phoneNumber, countryCode } =
+    useEnterDetailsStore((state) => state.data)
   const [confirmationNumber, setConfirmationNumber] = useState<string>("")
 
   const methods = useForm<PaymentFormData>({
@@ -90,14 +94,15 @@ export default function Payment({
   )
 
   useEffect(() => {
-    if (confirmationNumber && bookingStatus?.data?.paymentUrl) {
-      // Planet doesn't support query params so we have to store values in session storage
-      sessionStorage.setItem(BOOKING_CONFIRMATION_NUMBER, confirmationNumber)
+    if (bookingStatus?.data?.paymentUrl) {
       router.push(bookingStatus.data.paymentUrl)
     }
-  }, [confirmationNumber, bookingStatus, router])
+  }, [bookingStatus, router])
 
   function handleSubmit(data: PaymentFormData) {
+    const allQueryParams =
+      queryParams.size > 0 ? `?${queryParams.toString()}` : ""
+
     // set payment method to card if saved card is submitted
     const paymentMethod = isPaymentMethodEnum(data.paymentMethod)
       ? data.paymentMethod
@@ -118,13 +123,13 @@ export default function Payment({
           rateCode: "SAVEEU",
           roomTypeCode: "QC",
           guest: {
-            title: "Mr",
-            firstName: "Test",
-            lastName: "User",
-            email: "test.user@scandichotels.com",
-            phoneCountryCodePrefix: "string",
-            phoneNumber: "string",
-            countryCode: "string",
+            title: "Mr", // TODO: do we need title?
+            firstName,
+            lastName,
+            email,
+            phoneCountryCodePrefix: phoneNumber.slice(0, 3),
+            phoneNumber: phoneNumber.slice(3),
+            countryCode,
           },
           packages: {
             breakfast: true,
@@ -150,9 +155,9 @@ export default function Payment({
           phoneCountryCode: "",
           phoneSubscriber: "",
         },
-        success: `api/web/payment-callback/${lang}/success`,
-        error: `api/web/payment-callback/${lang}/error`,
-        cancel: `api/web/payment-callback/${lang}/cancel`,
+        success: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/success`,
+        error: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/error${allQueryParams}`,
+        cancel: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/cancel${allQueryParams}`,
       },
     })
   }
diff --git a/constants/booking.ts b/constants/booking.ts
index 81e23cd23..8f5acb120 100644
--- a/constants/booking.ts
+++ b/constants/booking.ts
@@ -11,7 +11,7 @@ export enum BedTypeEnum {
   Unknown = "Unknown",
 }
 
-export const BOOKING_CONFIRMATION_NUMBER = "bookingConfirmationNumber"
+export const BOOKING_CONFIRMATION_NUMBER = "confirmationNumber"
 
 export enum PaymentMethodEnum {
   card = "card",
diff --git a/env/client.ts b/env/client.ts
index 467100c01..4eafd5592 100644
--- a/env/client.ts
+++ b/env/client.ts
@@ -5,10 +5,14 @@ export const env = createEnv({
   client: {
     NEXT_PUBLIC_NODE_ENV: z.enum(["development", "test", "production"]),
     NEXT_PUBLIC_PORT: z.string().default("3000"),
+    NEXT_PUBLIC_PAYMENT_CALLBACK_URL: z
+      .string()
+      .default("/api/web/payment-callback"),
   },
   emptyStringAsUndefined: true,
   runtimeEnv: {
     NEXT_PUBLIC_NODE_ENV: process.env.NODE_ENV,
     NEXT_PUBLIC_PORT: process.env.NEXT_PUBLIC_PORT,
+    NEXT_PUBLIC_PAYMENT_CALLBACK_URL: `${process.env.NODE_ENV === "development" ? `http://localhost:${process.env.NEXT_PUBLIC_PORT}` : ""}/api/web/payment-callback`,
   },
 })

From d7676a22cc8565a323b0b9aa2663edda5251d914 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Wed, 23 Oct 2024 14:31:02 +0200
Subject: [PATCH 51/69] Added onClick to anchor tag as well #SW-222

---
 components/TempDesignSystem/Link/index.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/TempDesignSystem/Link/index.tsx b/components/TempDesignSystem/Link/index.tsx
index bae4ab9b1..716221b5b 100644
--- a/components/TempDesignSystem/Link/index.tsx
+++ b/components/TempDesignSystem/Link/index.tsx
@@ -75,7 +75,15 @@ export default function Link({
   }
 
   return isExternal ? (
-    <a {...linkProps} {...props} />
+    <a
+      {...linkProps}
+      {...props}
+      onClick={(e) => {
+        if (onClick) {
+          onClick(e)
+        }
+      }}
+    />
   ) : (
     <NextLink
       scroll={scroll}

From 0fe4a7c42cbedd9e857d9c7d00f40746e38dfede Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Thu, 17 Oct 2024 11:23:50 +0200
Subject: [PATCH 52/69] feat(SW-498): added sitewide alert

---
 app/[lang]/(live)/@sitewidealert/page.tsx | 10 ++------
 components/SitewideAlert/index.tsx        | 28 +++++++++++++----------
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/app/[lang]/(live)/@sitewidealert/page.tsx b/app/[lang]/(live)/@sitewidealert/page.tsx
index be7ae2256..0f0c75eba 100644
--- a/app/[lang]/(live)/@sitewidealert/page.tsx
+++ b/app/[lang]/(live)/@sitewidealert/page.tsx
@@ -1,11 +1,9 @@
-import { Suspense } from "react"
-
 import { env } from "@/env/server"
 
 import SitewideAlert, { preload } from "@/components/SitewideAlert"
 import { setLang } from "@/i18n/serverContext"
 
-import type { LangParams, PageArgs } from "@/types/params"
+import { LangParams, PageArgs } from "@/types/params"
 
 export default function SitewideAlertPage({ params }: PageArgs<LangParams>) {
   if (env.HIDE_FOR_NEXT_RELEASE) {
@@ -15,9 +13,5 @@ export default function SitewideAlertPage({ params }: PageArgs<LangParams>) {
   setLang(params.lang)
   preload()
 
-  return (
-    <Suspense>
-      <SitewideAlert />
-    </Suspense>
-  )
+  return <SitewideAlert />
 }
diff --git a/components/SitewideAlert/index.tsx b/components/SitewideAlert/index.tsx
index 2ce624119..c2cb6e728 100644
--- a/components/SitewideAlert/index.tsx
+++ b/components/SitewideAlert/index.tsx
@@ -1,3 +1,5 @@
+import { Suspense } from "react"
+
 import { getSiteConfig } from "@/lib/trpc/memoizedRequests"
 
 import Alert from "../TempDesignSystem/Alert"
@@ -17,17 +19,19 @@ export default async function SitewideAlert() {
 
   const { sitewideAlert } = siteConfig
   return (
-    <div className={`${styles.sitewideAlert} ${styles[sitewideAlert.type]}`}>
-      <Alert
-        variant="banner"
-        type={sitewideAlert.type}
-        link={sitewideAlert.link}
-        phoneContact={sitewideAlert.phoneContact}
-        sidepeekCtaText={sitewideAlert.sidepeekButton?.cta_text}
-        sidepeekContent={sitewideAlert.sidepeekContent}
-        heading={sitewideAlert.heading}
-        text={sitewideAlert.text}
-      />
-    </div>
+    <Suspense>
+      <div className={`${styles.sitewideAlert} ${styles[sitewideAlert.type]}`}>
+        <Alert
+          variant="banner"
+          type={sitewideAlert.type}
+          link={sitewideAlert.link}
+          phoneContact={sitewideAlert.phoneContact}
+          sidepeekCtaText={sitewideAlert.sidepeekButton?.cta_text}
+          sidepeekContent={sitewideAlert.sidepeekContent}
+          heading={sitewideAlert.heading}
+          text={sitewideAlert.text}
+        />
+      </div>
+    </Suspense>
   )
 }

From a29657a6b20488fe495f96f82392047ca61803a9 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Tue, 22 Oct 2024 10:49:01 +0200
Subject: [PATCH 53/69] feat(SW-508): Added hotel alerts

---
 app/[lang]/(live)/@sitewidealert/page.tsx     |  9 +++--
 .../HotelPage/hotelPage.module.css            | 16 +++++----
 components/ContentType/HotelPage/index.tsx    | 34 ++++++++++++++-----
 components/SitewideAlert/index.tsx            | 28 +++++++--------
 components/TempDesignSystem/Alert/alert.ts    |  4 +--
 components/TempDesignSystem/Alert/index.tsx   |  4 +++
 server/routers/hotels/output.ts               | 21 +++++++++++-
 server/routers/hotels/query.ts                |  2 ++
 8 files changed, 82 insertions(+), 36 deletions(-)

diff --git a/app/[lang]/(live)/@sitewidealert/page.tsx b/app/[lang]/(live)/@sitewidealert/page.tsx
index 0f0c75eba..b0bbf8765 100644
--- a/app/[lang]/(live)/@sitewidealert/page.tsx
+++ b/app/[lang]/(live)/@sitewidealert/page.tsx
@@ -1,9 +1,10 @@
 import { env } from "@/env/server"
+import { Suspense } from "react"
 
 import SitewideAlert, { preload } from "@/components/SitewideAlert"
 import { setLang } from "@/i18n/serverContext"
 
-import { LangParams, PageArgs } from "@/types/params"
+import type { LangParams, PageArgs } from "@/types/params"
 
 export default function SitewideAlertPage({ params }: PageArgs<LangParams>) {
   if (env.HIDE_FOR_NEXT_RELEASE) {
@@ -13,5 +14,9 @@ export default function SitewideAlertPage({ params }: PageArgs<LangParams>) {
   setLang(params.lang)
   preload()
 
-  return <SitewideAlert />
+  return (
+    <Suspense>
+      <SitewideAlert />
+    </Suspense>
+  )
 }
diff --git a/components/ContentType/HotelPage/hotelPage.module.css b/components/ContentType/HotelPage/hotelPage.module.css
index 771c4e76e..091444fe2 100644
--- a/components/ContentType/HotelPage/hotelPage.module.css
+++ b/components/ContentType/HotelPage/hotelPage.module.css
@@ -29,6 +29,11 @@
   display: none;
 }
 
+.overview {
+  display: grid;
+  gap: var(--Spacing-x3);
+}
+
 .introContainer {
   display: flex;
   flex-wrap: wrap;
@@ -37,6 +42,11 @@
   scroll-margin-top: var(--hotel-page-scroll-margin-top);
 }
 
+.alertsContainer {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
 @media screen and (min-width: 1367px) {
   .pageContainer {
     grid-template-areas:
@@ -76,10 +86,4 @@
     padding-left: var(--Spacing-x5);
     padding-right: var(--Spacing-x5);
   }
-  .introContainer {
-    grid-template-columns: 38rem minmax(max-content, 16rem);
-    justify-content: space-between;
-    gap: var(--Spacing-x2);
-    align-items: end;
-  }
 }
diff --git a/components/ContentType/HotelPage/index.tsx b/components/ContentType/HotelPage/index.tsx
index 5b0139d6f..d10244040 100644
--- a/components/ContentType/HotelPage/index.tsx
+++ b/components/ContentType/HotelPage/index.tsx
@@ -4,6 +4,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import AccordionSection from "@/components/Blocks/Accordion"
 import SidePeekProvider from "@/components/SidePeekProvider"
+import Alert from "@/components/TempDesignSystem/Alert"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
@@ -49,6 +50,7 @@ export default async function HotelPage() {
     pointsOfInterest,
     facilities,
     faq,
+    alerts,
   } = hotelData
 
   const topThreePois = pointsOfInterest.slice(0, 3)
@@ -69,16 +71,30 @@ export default async function HotelPage() {
         hasFAQ={!!faq}
       />
       <main className={styles.mainSection}>
-        <div id={HotelHashValues.overview} className={styles.introContainer}>
-          <IntroSection
-            hotelName={hotelName}
-            hotelDescription={hotelDescription}
-            location={hotelLocation}
-            address={hotelAddress}
-            tripAdvisor={hotelRatings?.tripAdvisor}
-          />
+        <div id={HotelHashValues.overview} className={styles.overview}>
+          <div className={styles.introContainer}>
+            <IntroSection
+              hotelName={hotelName}
+              hotelDescription={hotelDescription}
+              location={hotelLocation}
+              address={hotelAddress}
+              tripAdvisor={hotelRatings?.tripAdvisor}
+            />
 
-          <AmenitiesList detailedFacilities={hotelDetailedFacilities} />
+            <AmenitiesList detailedFacilities={hotelDetailedFacilities} />
+          </div>
+          {alerts.length ? (
+            <div className={styles.alertsContainer}>
+              {alerts.map((alert) => (
+                <Alert
+                  key={alert.id}
+                  type={alert.type}
+                  heading={alert.heading}
+                  text={alert.text}
+                />
+              ))}
+            </div>
+          ) : null}
         </div>
         <Rooms rooms={roomCategories} />
         <Facilities facilities={facilities} activitiesCard={activitiesCard} />
diff --git a/components/SitewideAlert/index.tsx b/components/SitewideAlert/index.tsx
index c2cb6e728..2ce624119 100644
--- a/components/SitewideAlert/index.tsx
+++ b/components/SitewideAlert/index.tsx
@@ -1,5 +1,3 @@
-import { Suspense } from "react"
-
 import { getSiteConfig } from "@/lib/trpc/memoizedRequests"
 
 import Alert from "../TempDesignSystem/Alert"
@@ -19,19 +17,17 @@ export default async function SitewideAlert() {
 
   const { sitewideAlert } = siteConfig
   return (
-    <Suspense>
-      <div className={`${styles.sitewideAlert} ${styles[sitewideAlert.type]}`}>
-        <Alert
-          variant="banner"
-          type={sitewideAlert.type}
-          link={sitewideAlert.link}
-          phoneContact={sitewideAlert.phoneContact}
-          sidepeekCtaText={sitewideAlert.sidepeekButton?.cta_text}
-          sidepeekContent={sitewideAlert.sidepeekContent}
-          heading={sitewideAlert.heading}
-          text={sitewideAlert.text}
-        />
-      </div>
-    </Suspense>
+    <div className={`${styles.sitewideAlert} ${styles[sitewideAlert.type]}`}>
+      <Alert
+        variant="banner"
+        type={sitewideAlert.type}
+        link={sitewideAlert.link}
+        phoneContact={sitewideAlert.phoneContact}
+        sidepeekCtaText={sitewideAlert.sidepeekButton?.cta_text}
+        sidepeekContent={sitewideAlert.sidepeekContent}
+        heading={sitewideAlert.heading}
+        text={sitewideAlert.text}
+      />
+    </div>
   )
 }
diff --git a/components/TempDesignSystem/Alert/alert.ts b/components/TempDesignSystem/Alert/alert.ts
index 20927d7fc..e63873c66 100644
--- a/components/TempDesignSystem/Alert/alert.ts
+++ b/components/TempDesignSystem/Alert/alert.ts
@@ -8,8 +8,8 @@ import type { SidepeekContent } from "@/types/trpc/routers/contentstack/siteConf
 export interface AlertProps extends VariantProps<typeof alertVariants> {
   className?: string
   type: AlertTypeEnum
-  heading?: string
-  text: string
+  heading?: string | null
+  text?: string | null
   phoneContact?: {
     displayText: string
     phoneNumber?: string
diff --git a/components/TempDesignSystem/Alert/index.tsx b/components/TempDesignSystem/Alert/index.tsx
index 6499c7126..2f1e97b6a 100644
--- a/components/TempDesignSystem/Alert/index.tsx
+++ b/components/TempDesignSystem/Alert/index.tsx
@@ -27,6 +27,10 @@ export default function Alert({
   })
   const Icon = getIconByAlertType(type)
 
+  if (!text && !heading) {
+    return null
+  }
+
   return (
     <section className={classNames}>
       <div className={styles.content}>
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index 89e286185..803ae012f 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -1,11 +1,13 @@
 import { z } from "zod"
 
+import { dt } from "@/lib/dt"
 import { toLang } from "@/server/utils"
 
 import { imageMetaDataSchema, imageSizesSchema } from "./schemas/image"
 import { roomSchema } from "./schemas/room"
 import { getPoiGroupByCategoryName } from "./utils"
 
+import { AlertTypeEnum } from "@/types/enums/alert"
 import { FacilityEnum } from "@/types/enums/facilities"
 import { PointOfInterestCategoryNameEnum } from "@/types/hotel"
 
@@ -321,6 +323,7 @@ const socialMediaSchema = z.object({
 
 const metaSpecialAlertSchema = z.object({
   type: z.string(),
+  title: z.string().optional(),
   description: z.string().optional(),
   displayInBookingFlow: z.boolean(),
   startDate: z.string(),
@@ -328,7 +331,23 @@ const metaSpecialAlertSchema = z.object({
 })
 
 const metaSchema = z.object({
-  specialAlerts: z.array(metaSpecialAlertSchema),
+  specialAlerts: z
+    .array(metaSpecialAlertSchema)
+    .transform((data) => {
+      const now = dt().utc().format("YYYY-MM-DD")
+      const filteredAlerts = data.filter((alert) => {
+        const shouldShowNow = alert.startDate <= now && alert.endDate >= now
+        const hasText = alert.description || alert.title
+        return shouldShowNow && hasText
+      })
+      return filteredAlerts.map((alert, idx) => ({
+        id: `alert-${alert.type}-${idx}`,
+        type: AlertTypeEnum.Info,
+        heading: alert.title || null,
+        text: alert.description || null,
+      }))
+    })
+    .default([]),
 })
 
 const relationshipsSchema = z.object({
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 2fa4cfbe8..b5b5ff34b 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -219,6 +219,7 @@ export const hotelQueryRouter = router({
 
       const hotelAttributes = validatedHotelData.data.data.attributes
       const images = extractHotelImages(hotelAttributes)
+      const hotelAlerts = hotelAttributes.meta?.specialAlerts || []
 
       const roomCategories = included
         ? included.filter((item) => item.type === "roomcategories")
@@ -262,6 +263,7 @@ export const hotelQueryRouter = router({
         roomCategories,
         activitiesCard: activities?.upcoming_activities_card,
         facilities,
+        alerts: hotelAlerts,
         faq: contentstackData?.faq,
       }
     }),

From d94c55a46daead7c320c97e40cec02994cca649c Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Thu, 24 Oct 2024 10:24:57 +0200
Subject: [PATCH 54/69] fix: import order fix

---
 app/[lang]/(live)/@sitewidealert/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/[lang]/(live)/@sitewidealert/page.tsx b/app/[lang]/(live)/@sitewidealert/page.tsx
index b0bbf8765..be7ae2256 100644
--- a/app/[lang]/(live)/@sitewidealert/page.tsx
+++ b/app/[lang]/(live)/@sitewidealert/page.tsx
@@ -1,6 +1,7 @@
-import { env } from "@/env/server"
 import { Suspense } from "react"
 
+import { env } from "@/env/server"
+
 import SitewideAlert, { preload } from "@/components/SitewideAlert"
 import { setLang } from "@/i18n/serverContext"
 

From 748021cdabcfb2e042ea740e1340c3810f4af16d Mon Sep 17 00:00:00 2001
From: Bianca Widstam <bianca.widstam@scandichotels.com>
Date: Thu, 24 Oct 2024 08:41:26 +0000
Subject: [PATCH 55/69] Merged in feat/SW-673-galleryicon-hotel-lightbox (pull
 request #734)

Feat/SW-673 galleryicon hotel lightbox

* feat(SW-673): add galleryChip to trigger lightbox

* feat(SW-673): add updated design galleryIcon

* feat(SW-673): add first image from hotelContent and heroImages

* feat(SW-673): fix import type

* feat(SW-673): fix css variables

* feat(SW-673): change component to include image that trigger lightbox

* feat(SW-673): refactor name to imageGallery


Approved-by: Niclas Edenvin
---
 .../HotelCard/hotelCard.module.css            | 13 ++++---
 .../HotelReservation/HotelCard/index.tsx      | 19 +++++-----
 .../HotelInfoCard/hotelInfoCard.module.css    |  8 ++---
 .../SelectRate/HotelInfoCard/index.tsx        | 17 +++++----
 .../ImageGallery/imageGallery.module.css      | 17 +++++++++
 .../SelectRate/ImageGallery/index.tsx         | 36 +++++++++++++++++++
 .../RoomSelection/RoomCard/index.tsx          | 29 +++------------
 .../RoomCard/roomCard.module.css              | 14 --------
 server/routers/hotels/output.ts               | 16 +++++++++
 .../selectRate/imageGallery.ts                |  3 ++
 types/hotel.ts                                |  4 ++-
 11 files changed, 111 insertions(+), 65 deletions(-)
 create mode 100644 components/HotelReservation/SelectRate/ImageGallery/imageGallery.module.css
 create mode 100644 components/HotelReservation/SelectRate/ImageGallery/index.tsx
 create mode 100644 types/components/hotelReservation/selectRate/imageGallery.ts

diff --git a/components/HotelReservation/HotelCard/hotelCard.module.css b/components/HotelReservation/HotelCard/hotelCard.module.css
index 0ffa5b150..587feb29a 100644
--- a/components/HotelReservation/HotelCard/hotelCard.module.css
+++ b/components/HotelReservation/HotelCard/hotelCard.module.css
@@ -14,15 +14,16 @@
 
 .imageContainer {
   grid-area: image;
+  position: relative;
+  height: 100%;
+  width: 116px;
 }
 
 .tripAdvisor {
   display: none;
 }
 
-.image {
-  height: 100%;
-  width: 116px;
+.imageContainer img {
   object-fit: cover;
 }
 
@@ -77,6 +78,8 @@
 
   .imageContainer {
     position: relative;
+    min-height: 200px;
+    width: 518px;
   }
 
   .tripAdvisor {
@@ -86,10 +89,6 @@
     top: 7px;
   }
 
-  .image {
-    width: 518px;
-  }
-
   .hotelInformation {
     padding-top: var(--Spacing-x2);
     padding-right: var(--Spacing-x2);
diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx
index 67ce49f17..9300771e9 100644
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -11,10 +11,11 @@ import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
 import ReadMore from "../ReadMore"
+import ImageGallery from "../SelectRate/ImageGallery"
 
 import styles from "./hotelCard.module.css"
 
-import { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
+import type { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
 
 export default async function HotelCard({ hotel }: HotelCardProps) {
   const intl = await getIntl()
@@ -27,13 +28,15 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
   return (
     <article className={styles.card}>
       <section className={styles.imageContainer}>
-        <Image
-          src={hotelData.hotelContent.images.imageSizes.medium}
-          alt={hotelData.hotelContent.images.metaData.altText}
-          width={300}
-          height={200}
-          className={styles.image}
-        />
+        {hotelData.gallery && (
+          <ImageGallery
+            title={hotelData.name}
+            images={[
+              hotelData.hotelContent.images,
+              ...hotelData.gallery.heroImages,
+            ]}
+          />
+        )}
         <div className={styles.tripAdvisor}>
           <Chip intent="primary" className={styles.tripAdvisor}>
             <TripAdvisorIcon color="white" />
diff --git a/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css b/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css
index 1482bf4c9..aacdf0449 100644
--- a/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css
+++ b/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css
@@ -12,10 +12,6 @@
   gap: var(--Spacing-x2);
 }
 
-.image {
-  border-radius: var(--Corner-radius-Medium);
-}
-
 .imageWrapper {
   position: relative;
   overflow: hidden;
@@ -24,6 +20,10 @@
   width: 100%;
 }
 
+.imageWrapper img {
+  border-radius: var(--Corner-radius-Medium);
+}
+
 .tripAdvisor {
   display: flex;
   align-items: center;
diff --git a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
index 1ec58dd07..120c0385d 100644
--- a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
+++ b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
@@ -10,6 +10,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import ReadMore from "../../ReadMore"
+import ImageGallery from "../ImageGallery"
 
 import styles from "./hotelInfoCard.module.css"
 
@@ -28,12 +29,6 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
       {hotelAttributes && (
         <section className={styles.wrapper}>
           <div className={styles.imageWrapper}>
-            <Image
-              src={hotelAttributes.hotelContent.images.imageSizes.medium}
-              alt={hotelAttributes.hotelContent.images.metaData.altText}
-              className={styles.image}
-              fill
-            />
             {hotelAttributes.ratings?.tripAdvisor && (
               <div className={styles.tripAdvisor}>
                 <TripAdvisorIcon color="burgundy" />
@@ -42,7 +37,15 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
                 </Caption>
               </div>
             )}
-            {/* TODO: gallery icon and image carousel */}
+            {hotelAttributes.gallery && (
+              <ImageGallery
+                title={hotelAttributes.name}
+                images={[
+                  hotelAttributes.hotelContent.images,
+                  ...hotelAttributes.gallery.heroImages,
+                ]}
+              />
+            )}
           </div>
           <div className={styles.hotelContent}>
             <div className={styles.hotelInformation}>
diff --git a/components/HotelReservation/SelectRate/ImageGallery/imageGallery.module.css b/components/HotelReservation/SelectRate/ImageGallery/imageGallery.module.css
new file mode 100644
index 000000000..5d156f77a
--- /dev/null
+++ b/components/HotelReservation/SelectRate/ImageGallery/imageGallery.module.css
@@ -0,0 +1,17 @@
+.galleryIcon {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  max-height: 32px;
+  width: 48px;
+  background-color: rgba(0, 0, 0, 0.6);
+  padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
+  border-radius: var(--Corner-radius-Small);
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-quarter);
+}
+
+.triggerArea {
+  cursor: pointer;
+}
diff --git a/components/HotelReservation/SelectRate/ImageGallery/index.tsx b/components/HotelReservation/SelectRate/ImageGallery/index.tsx
new file mode 100644
index 000000000..778c2d45e
--- /dev/null
+++ b/components/HotelReservation/SelectRate/ImageGallery/index.tsx
@@ -0,0 +1,36 @@
+import { GalleryIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Lightbox from "@/components/Lightbox"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import styles from "./imageGallery.module.css"
+
+import type { ImageGalleryProps } from "@/types/components/hotelReservation/selectRate/imageGallery"
+
+export default function ImageGallery({ images, title }: ImageGalleryProps) {
+  return (
+    <Lightbox
+      images={images.map((image) => ({
+        url: image.imageSizes.small,
+        alt: image.metaData.altText,
+        title: image.metaData.title,
+      }))}
+      dialogTitle={title}
+    >
+      <div className={styles.triggerArea} id="lightboxTrigger">
+        <Image
+          src={images[0].imageSizes.medium}
+          alt={images[0].metaData.altText}
+          className={styles.image}
+          fill
+        />
+        <div className={styles.galleryIcon}>
+          <GalleryIcon color="white" />
+          <Footnote color="white" type="label">
+            {images.length}
+          </Footnote>
+        </div>
+      </div>
+    </Lightbox>
+  )
+}
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
index 87b0143b5..444968ce1 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
@@ -5,18 +5,18 @@ import { useIntl } from "react-intl"
 import { RateDefinition } from "@/server/routers/hotels/output"
 
 import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
-import { ChevronRightSmallIcon, GalleryIcon } from "@/components/Icons"
-import Image from "@/components/Image"
-import Lightbox from "@/components/Lightbox"
+import { ChevronRightSmallIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
+import ImageGallery from "../../ImageGallery"
+
 import styles from "./roomCard.module.css"
 
-import { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"
+import type { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"
 
 export default function RoomCard({
   rateDefinitions,
@@ -25,7 +25,6 @@ export default function RoomCard({
   handleSelectRate,
 }: RoomCardProps) {
   const intl = useIntl()
-
   const saveRate = rateDefinitions.find(
     // TODO: Update string when API has decided
     (rate) => rate.cancellationRule === "NonCancellable"
@@ -153,26 +152,8 @@ export default function RoomCard({
           )}
           {/*NOTE: images from the test API are hosted on test3.scandichotels.com,
          which can't be accessed unless on Scandic's Wifi or using Citrix. */}
-          <Image
-            src={mainImage.imageSizes.small}
-            alt={mainImage.metaData.altText}
-            width={330}
-            height={185}
-          />
           {images && (
-            <Lightbox
-              images={images.map((image) => ({
-                url: image.imageSizes.small,
-                alt: image.metaData.altText,
-                title: image.metaData.title,
-              }))}
-              dialogTitle={roomConfiguration.roomType}
-            >
-              <div className={styles.galleryIcon} id="lightboxTrigger">
-                <GalleryIcon color="white" />
-                <Footnote color="white">{images.length}</Footnote>
-              </div>
-            </Lightbox>
+            <ImageGallery images={images} title={roomConfiguration.roomType} />
           )}
         </div>
       )}
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
index 25add23b5..ef5d9b8fc 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
@@ -77,17 +77,3 @@
   min-height: 185px;
   position: relative;
 }
-
-.galleryIcon {
-  position: absolute;
-  bottom: 16px;
-  right: 16px;
-  height: 24px;
-  background-color: rgba(64, 57, 55, 0.9);
-  padding: 0 var(--Spacing-x-half);
-  border-radius: var(--Corner-radius-Small);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x-quarter);
-}
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index 803ae012f..0f545d673 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -162,6 +162,21 @@ export const facilitySchema = z.object({
   ),
 })
 
+export const gallerySchema = z.object({
+  heroImages: z.array(
+    z.object({
+      metaData: imageMetaDataSchema,
+      imageSizes: imageSizesSchema,
+    })
+  ),
+  smallerImages: z.array(
+    z.object({
+      metaData: imageMetaDataSchema,
+      imageSizes: imageSizesSchema,
+    })
+  ),
+})
+
 const healthFacilitySchema = z.object({
   type: z.string(),
   content: z.object({
@@ -441,6 +456,7 @@ export const getHotelDataSchema = z.object({
       conferencesAndMeetings: facilitySchema.optional(),
       healthAndWellness: facilitySchema.optional(),
       restaurantImages: facilitySchema.optional(),
+      gallery: gallerySchema.optional(),
     }),
     relationships: relationshipsSchema,
   }),
diff --git a/types/components/hotelReservation/selectRate/imageGallery.ts b/types/components/hotelReservation/selectRate/imageGallery.ts
new file mode 100644
index 000000000..333ff2d94
--- /dev/null
+++ b/types/components/hotelReservation/selectRate/imageGallery.ts
@@ -0,0 +1,3 @@
+import type { GalleryImages } from "@/types/hotel"
+
+export type ImageGalleryProps = { images: GalleryImages; title: string }
diff --git a/types/hotel.ts b/types/hotel.ts
index a60204720..972c6459e 100644
--- a/types/hotel.ts
+++ b/types/hotel.ts
@@ -2,6 +2,7 @@ import { z } from "zod"
 
 import {
   facilitySchema,
+  gallerySchema,
   getHotelDataSchema,
   parkingSchema,
   pointOfInterestSchema,
@@ -13,7 +14,6 @@ export type HotelData = z.infer<typeof getHotelDataSchema>
 export type Hotel = HotelData["data"]["attributes"]
 export type HotelAddress = HotelData["data"]["attributes"]["address"]
 export type HotelLocation = HotelData["data"]["attributes"]["location"]
-
 export type Amenities = HotelData["data"]["attributes"]["detailedFacilities"]
 
 type HotelRatings = HotelData["data"]["attributes"]["ratings"]
@@ -22,6 +22,8 @@ export type HotelTripAdvisor =
   | undefined
 
 export type RoomData = z.infer<typeof roomSchema>
+export type GallerySchema = z.infer<typeof gallerySchema>
+export type GalleryImages = GallerySchema["heroImages"]
 
 export type PointOfInterest = z.output<typeof pointOfInterestSchema>
 

From 8d490e14f2ed757d85b8b9a4f2ec52bd6e1ebb7a Mon Sep 17 00:00:00 2001
From: Niclas Edenvin <niclas.edenvin@scandichotels.com>
Date: Thu, 24 Oct 2024 08:49:06 +0000
Subject: [PATCH 56/69] fix(SW-690): use correct naming of search params in
 booking

Approved-by: Bianca Widstam
Approved-by: Linus Flood
---
 .../(standard)/select-rate/page.tsx           | 14 +++++------
 components/BookingWidget/Client.tsx           |  4 ++--
 components/DatePicker/index.tsx               | 24 +++++++++----------
 .../Forms/BookingWidget/FormContent/index.tsx |  2 +-
 components/Forms/BookingWidget/schema.ts      |  4 ++--
 .../HotelReservation/HotelCard/index.tsx      |  6 ++++-
 components/TempDesignSystem/Link/index.tsx    |  7 +++---
 .../hotelReservation/selectRate/selectRate.ts |  6 ++---
 8 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
index 532228434..2d80356ac 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
@@ -17,11 +17,11 @@ export default async function SelectRatePage({
 }: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
   setLang(params.lang)
 
-  const selecetRoomParams = new URLSearchParams(searchParams)
-  const selecetRoomParamsObject =
-    getHotelReservationQueryParams(selecetRoomParams)
-  const adults = selecetRoomParamsObject.room[0].adults // TODO: Handle multiple rooms
-  const children = selecetRoomParamsObject.room[0].child.length // TODO: Handle multiple rooms
+  const selectRoomParams = new URLSearchParams(searchParams)
+  const selectRoomParamsObject =
+    getHotelReservationQueryParams(selectRoomParams)
+  const adults = selectRoomParamsObject.room[0].adults // TODO: Handle multiple rooms
+  const children = selectRoomParamsObject.room[0].child?.length // TODO: Handle multiple rooms
 
   const [hotelData, roomConfigurations, user] = await Promise.all([
     serverClient().hotel.hotelData.get({
@@ -33,8 +33,8 @@ export default async function SelectRatePage({
       hotelId: parseInt(searchParams.hotel, 10),
       roomStayStartDate: searchParams.fromDate,
       roomStayEndDate: searchParams.toDate,
-      adults: adults,
-      children: children,
+      adults,
+      children,
     }),
     getProfileSafely(),
   ])
diff --git a/components/BookingWidget/Client.tsx b/components/BookingWidget/Client.tsx
index eded233f0..68a6a1fc2 100644
--- a/components/BookingWidget/Client.tsx
+++ b/components/BookingWidget/Client.tsx
@@ -42,8 +42,8 @@ export default function BookingWidgetClient({
       date: {
         // UTC is required to handle requests from far away timezones https://scandichotels.atlassian.net/browse/SWAP-6375 & PET-507
         // This is specifically to handle timezones falling in different dates.
-        from: dt().utc().format("YYYY-MM-DD"),
-        to: dt().utc().add(1, "day").format("YYYY-MM-DD"),
+        fromDate: dt().utc().format("YYYY-MM-DD"),
+        toDate: dt().utc().add(1, "day").format("YYYY-MM-DD"),
       },
       bookingCode: "",
       redemption: false,
diff --git a/components/DatePicker/index.tsx b/components/DatePicker/index.tsx
index 503c0c6ac..b07b1a0d8 100644
--- a/components/DatePicker/index.tsx
+++ b/components/DatePicker/index.tsx
@@ -44,22 +44,22 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
   function handleSelectDate(selected: Date) {
     if (isSelectingFrom) {
       setValue(name, {
-        from: dt(selected).format("YYYY-MM-DD"),
-        to: undefined,
+        fromDate: dt(selected).format("YYYY-MM-DD"),
+        toDate: undefined,
       })
       setIsSelectingFrom(false)
     } else {
-      const fromDate = dt(selectedDate.from)
+      const fromDate = dt(selectedDate.fromDate)
       const toDate = dt(selected)
       if (toDate.isAfter(fromDate)) {
         setValue(name, {
-          from: selectedDate.from,
-          to: toDate.format("YYYY-MM-DD"),
+          fromDate: selectedDate.fromDate,
+          toDate: toDate.format("YYYY-MM-DD"),
         })
       } else {
         setValue(name, {
-          from: toDate.format("YYYY-MM-DD"),
-          to: selectedDate.from,
+          fromDate: toDate.format("YYYY-MM-DD"),
+          toDate: selectedDate.fromDate,
         })
       }
       setIsSelectingFrom(true)
@@ -79,11 +79,11 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
     }
   }, [setIsOpen])
 
-  const selectedFromDate = dt(selectedDate.from)
+  const selectedFromDate = dt(selectedDate.fromDate)
     .locale(lang)
     .format("ddd D MMM")
-  const selectedToDate = !!selectedDate.to
-    ? dt(selectedDate.to).locale(lang).format("ddd D MMM")
+  const selectedToDate = !!selectedDate.toDate
+    ? dt(selectedDate.toDate).locale(lang).format("ddd D MMM")
     : ""
 
   return (
@@ -93,8 +93,8 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
           {selectedFromDate} - {selectedToDate}
         </Body>
       </button>
-      <input {...register("date.from")} type="hidden" />
-      <input {...register("date.to")} type="hidden" />
+      <input {...register("date.fromDate")} type="hidden" />
+      <input {...register("date.toDate")} type="hidden" />
       <div aria-modal className={styles.hideWrapper} role="dialog">
         <DatePickerDesktop
           close={close}
diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx
index bbc763aef..bd7a65ba6 100644
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -27,7 +27,7 @@ export default function FormContent({
 
   const rooms = intl.formatMessage({ id: "Guests & Rooms" })
 
-  const nights = dt(selectedDate.to).diff(dt(selectedDate.from), "days")
+  const nights = dt(selectedDate.toDate).diff(dt(selectedDate.fromDate), "days")
 
   return (
     <>
diff --git a/components/Forms/BookingWidget/schema.ts b/components/Forms/BookingWidget/schema.ts
index cfa3cb03f..aa42b542d 100644
--- a/components/Forms/BookingWidget/schema.ts
+++ b/components/Forms/BookingWidget/schema.ts
@@ -18,8 +18,8 @@ export const bookingWidgetSchema = z.object({
   bookingCode: z.string(), // Update this as required when working with booking codes component
   date: z.object({
     // Update this as required once started working with Date picker in Nights component
-    from: z.string(),
-    to: z.string(),
+    fromDate: z.string(),
+    toDate: z.string(),
   }),
   location: z.string().refine(
     (value) => {
diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx
index 9300771e9..2bea7c895 100644
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -105,7 +105,11 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
           className={styles.button}
         >
           {/* TODO: Localize link and also use correct search params */}
-          <Link href="/en/hotelreservation/select-rate" color="none">
+          <Link
+            href={`/en/hotelreservation/select-rate?hotel=${hotelData.operaId}`}
+            color="none"
+            keepSearchParams
+          >
             {intl.formatMessage({ id: "See rooms" })}
           </Link>
         </Button>
diff --git a/components/TempDesignSystem/Link/index.tsx b/components/TempDesignSystem/Link/index.tsx
index 716221b5b..2c46c8b6f 100644
--- a/components/TempDesignSystem/Link/index.tsx
+++ b/components/TempDesignSystem/Link/index.tsx
@@ -51,9 +51,10 @@ export default function Link({
   const router = useRouter()
 
   const fullUrl = useMemo(() => {
-    const search =
-      keepSearchParams && searchParams.size ? `?${searchParams}` : ""
-    return `${href}${search}`
+    if (!keepSearchParams || !searchParams.size) return href
+
+    const delimiter = href.includes("?") ? "&" : "?"
+    return `${href}${delimiter}${searchParams}`
   }, [href, searchParams, keepSearchParams])
 
   // TODO: Remove this check (and hook) and only return <Link /> when current web is deleted
diff --git a/types/components/hotelReservation/selectRate/selectRate.ts b/types/components/hotelReservation/selectRate/selectRate.ts
index 58aa6fbbe..16b3f5dcf 100644
--- a/types/components/hotelReservation/selectRate/selectRate.ts
+++ b/types/components/hotelReservation/selectRate/selectRate.ts
@@ -7,9 +7,9 @@ interface Child {
 
 interface Room {
   adults: number
-  roomtypecode: string
-  ratecode: string
-  child: Child[]
+  roomcode?: string
+  ratecode?: string
+  child?: Child[]
 }
 
 export interface SelectRateSearchParams {

From 12d4be59d574224389d8f567e294dbb421a727c8 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Tue, 15 Oct 2024 09:05:20 +0200
Subject: [PATCH 57/69] chore: add a commit to enable pr for testing

---
 constants/routes/signup.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/constants/routes/signup.ts b/constants/routes/signup.ts
index 82a39ee41..9ef09c4a0 100644
--- a/constants/routes/signup.ts
+++ b/constants/routes/signup.ts
@@ -17,3 +17,11 @@ export const signupVerify: LangRoute = {
   da: `${signup.da}/bekraeft`,
   de: `${signup.de}/verifizieren`,
 }
+
+export const isSignupPage = (path: string): boolean => {
+  return Object.values(signup).includes(path)
+}
+
+export const isSignupVerifyPage = (path: string): boolean => {
+  return Object.values(signupVerify).includes(path)
+}

From 19049ce22c119c51ab452db4f8e7eef9a21e99cf Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Tue, 22 Oct 2024 10:46:11 +0200
Subject: [PATCH 58/69] fix(SW-360): signup cta ui + name lable formatting

---
 components/Forms/Register/form.module.css | 4 ++++
 components/Forms/Register/index.tsx       | 6 ++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/Forms/Register/form.module.css b/components/Forms/Register/form.module.css
index 612cbc8f8..dc913b792 100644
--- a/components/Forms/Register/form.module.css
+++ b/components/Forms/Register/form.module.css
@@ -46,4 +46,8 @@
   .nameInputs {
     grid-template-columns: 1fr 1fr;
   }
+
+  .signUpButton {
+    width: fit-content;
+  }
 }
diff --git a/components/Forms/Register/index.tsx b/components/Forms/Register/index.tsx
index ed82617b0..a8f3f6524 100644
--- a/components/Forms/Register/index.tsx
+++ b/components/Forms/Register/index.tsx
@@ -94,12 +94,12 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
               </header>
               <div className={styles.nameInputs}>
                 <Input
-                  label={"firstName"}
+                  label={intl.formatMessage({ id: "First name" })}
                   name="firstName"
                   registerOptions={{ required: true }}
                 />
                 <Input
-                  label={"lastName"}
+                  label={intl.formatMessage({ id: "Last name" })}
                   name="lastName"
                   registerOptions={{ required: true }}
                 />
@@ -171,7 +171,9 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
             </Checkbox>
           </section>
           <Button
+            className={styles.signUpButton}
             type="submit"
+            theme="base"
             intent="primary"
             disabled={methods.formState.isSubmitting}
             data-testid="submit"

From 7bafad54f966a3306713e921c7440b869521d3e8 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Tue, 22 Oct 2024 10:46:45 +0200
Subject: [PATCH 59/69] fix(SW-360): better country required msg

---
 components/Forms/Register/schema.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/Forms/Register/schema.ts b/components/Forms/Register/schema.ts
index 982641d2c..2584a02fe 100644
--- a/components/Forms/Register/schema.ts
+++ b/components/Forms/Register/schema.ts
@@ -3,6 +3,7 @@ import { z } from "zod"
 import { passwordValidator } from "@/utils/passwordValidator"
 import { phoneValidator } from "@/utils/phoneValidator"
 
+const countryRequiredMsg = "Country is required"
 export const registerSchema = z.object({
   firstName: z
     .string()
@@ -23,7 +24,12 @@ export const registerSchema = z.object({
   ),
   dateOfBirth: z.string().min(1),
   address: z.object({
-    countryCode: z.string(),
+    countryCode: z
+      .string({
+        required_error: countryRequiredMsg,
+        invalid_type_error: countryRequiredMsg,
+      })
+      .min(1, countryRequiredMsg),
     zipCode: z.string().min(1),
   }),
   password: passwordValidator("Password is required"),

From 28df164532dc7dacbc4dc64d0af4c0eec9ed34c9 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Tue, 22 Oct 2024 10:48:36 +0200
Subject: [PATCH 60/69] fix(SW-360): smaller phone contry code width on mobile

---
 components/TempDesignSystem/Form/Phone/phone.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/TempDesignSystem/Form/Phone/phone.module.css b/components/TempDesignSystem/Form/Phone/phone.module.css
index bda78a1af..f2b75136b 100644
--- a/components/TempDesignSystem/Form/Phone/phone.module.css
+++ b/components/TempDesignSystem/Form/Phone/phone.module.css
@@ -1,7 +1,7 @@
 .phone {
   display: grid;
   gap: var(--Spacing-x2);
-  grid-template-columns: max(164px) 1fr;
+  grid-template-columns: minmax(124px, 164px) 1fr;
 
   --react-international-phone-background-color: var(--Main-Grey-White);
   --react-international-phone-border-color: var(--Scandic-Beige-40);

From 158bae92aece19a7cec672df6117a0100cbe7fcc Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Tue, 22 Oct 2024 11:21:42 +0200
Subject: [PATCH 61/69] fix(SW-360): checkbox width expanding

---
 components/TempDesignSystem/Form/Checkbox/checkbox.module.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/TempDesignSystem/Form/Checkbox/checkbox.module.css b/components/TempDesignSystem/Form/Checkbox/checkbox.module.css
index 0afc51797..99077e212 100644
--- a/components/TempDesignSystem/Form/Checkbox/checkbox.module.css
+++ b/components/TempDesignSystem/Form/Checkbox/checkbox.module.css
@@ -21,7 +21,6 @@
 }
 
 .checkbox {
-  flex-grow: 1;
   width: 24px;
   height: 24px;
   min-width: 24px;

From 94744a42607f08d11a5737d97684aa5465c6f8ca Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 23 Oct 2024 11:41:20 +0200
Subject: [PATCH 62/69] chore(SW-360): use signup naming

---
 actions/registerUser.ts                       |  4 ++--
 .../SignupFormWrapper/index.tsx               |  2 +-
 .../{Register => Signup}/form.module.css      |  0
 .../Forms/{Register => Signup}/index.tsx      | 13 ++++++-----
 .../Forms/{Register => Signup}/schema.ts      | 22 +++++++------------
 .../form/{registerForm.ts => signupForm.ts}   |  2 +-
 6 files changed, 19 insertions(+), 24 deletions(-)
 rename components/Forms/{Register => Signup}/form.module.css (100%)
 rename components/Forms/{Register => Signup}/index.tsx (94%)
 rename components/Forms/{Register => Signup}/schema.ts (67%)
 rename types/components/form/{registerForm.ts => signupForm.ts} (69%)

diff --git a/actions/registerUser.ts b/actions/registerUser.ts
index 11afb22f4..7ce9c2e43 100644
--- a/actions/registerUser.ts
+++ b/actions/registerUser.ts
@@ -7,7 +7,7 @@ import { signupVerify } from "@/constants/routes/signup"
 import * as api from "@/lib/api"
 import { serviceServerActionProcedure } from "@/server/trpc"
 
-import { registerSchema } from "@/components/Forms/Register/schema"
+import { signUpSchema } from "@/components/Forms/Signup/schema"
 import { passwordValidator } from "@/utils/passwordValidator"
 import { phoneValidator } from "@/utils/phoneValidator"
 
@@ -29,7 +29,7 @@ const registerUserPayload = z.object({
 })
 
 export const registerUser = serviceServerActionProcedure
-  .input(registerSchema)
+  .input(signUpSchema)
   .mutation(async function ({ ctx, input }) {
     const payload = {
       ...input,
diff --git a/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx b/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
index 4c39dafc5..f69637847 100644
--- a/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
+++ b/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
@@ -3,7 +3,7 @@ import { redirect } from "next/navigation"
 import { overview } from "@/constants/routes/myPages"
 
 import { auth } from "@/auth"
-import Form from "@/components/Forms/Register"
+import Form from "@/components/Forms/Signup"
 import { getLang } from "@/i18n/serverContext"
 
 import { SignupFormWrapperProps } from "@/types/components/blocks/dynamicContent"
diff --git a/components/Forms/Register/form.module.css b/components/Forms/Signup/form.module.css
similarity index 100%
rename from components/Forms/Register/form.module.css
rename to components/Forms/Signup/form.module.css
diff --git a/components/Forms/Register/index.tsx b/components/Forms/Signup/index.tsx
similarity index 94%
rename from components/Forms/Register/index.tsx
rename to components/Forms/Signup/index.tsx
index a8f3f6524..d616d1e5f 100644
--- a/components/Forms/Register/index.tsx
+++ b/components/Forms/Signup/index.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
+import { useEffect,useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -22,16 +23,16 @@ import Title from "@/components/TempDesignSystem/Text/Title"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 
-import { RegisterSchema, registerSchema } from "./schema"
+import { SignUpSchema, signUpSchema } from "./schema"
 
 import styles from "./form.module.css"
 
-import type { RegisterFormProps } from "@/types/components/form/registerForm"
+import type { SignUpFormProps } from "@/types/components/form/signupForm"
 
-export default function Form({ link, subtitle, title }: RegisterFormProps) {
+export default function Form({ link, subtitle, title }: SignUpFormProps) {
   const intl = useIntl()
   const lang = useLang()
-  const methods = useForm<RegisterSchema>({
+  const methods = useForm<SignUpSchema>({
     defaultValues: {
       firstName: "",
       lastName: "",
@@ -47,7 +48,7 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
     },
     mode: "all",
     criteriaMode: "all",
-    resolver: zodResolver(registerSchema),
+    resolver: zodResolver(signUpSchema),
     reValidateMode: "onChange",
   })
   const country = intl.formatMessage({ id: "Country" })
@@ -55,7 +56,7 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
   const phoneNumber = intl.formatMessage({ id: "Phone number" })
   const zipCode = intl.formatMessage({ id: "Zip code" })
 
-  async function handleSubmit(data: RegisterSchema) {
+  async function handleSubmit(data: SignUpSchema) {
     try {
       const result = await registerUser(data)
       if (result && !result.success) {
diff --git a/components/Forms/Register/schema.ts b/components/Forms/Signup/schema.ts
similarity index 67%
rename from components/Forms/Register/schema.ts
rename to components/Forms/Signup/schema.ts
index 2584a02fe..6a8eecc22 100644
--- a/components/Forms/Register/schema.ts
+++ b/components/Forms/Signup/schema.ts
@@ -4,19 +4,13 @@ import { passwordValidator } from "@/utils/passwordValidator"
 import { phoneValidator } from "@/utils/phoneValidator"
 
 const countryRequiredMsg = "Country is required"
-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",
-    }),
+export const signUpSchema = z.object({
+  firstName: z.string().max(250).trim().min(1, {
+    message: "First name is required",
+  }),
+  lastName: z.string().max(250).trim().min(1, {
+    message: "Last name is required",
+  }),
   email: z.string().max(250).email(),
   phoneNumber: phoneValidator(
     "Phone is required",
@@ -38,4 +32,4 @@ export const registerSchema = z.object({
   }),
 })
 
-export type RegisterSchema = z.infer<typeof registerSchema>
+export type SignUpSchema = z.infer<typeof signUpSchema>
diff --git a/types/components/form/registerForm.ts b/types/components/form/signupForm.ts
similarity index 69%
rename from types/components/form/registerForm.ts
rename to types/components/form/signupForm.ts
index 41e783dd5..060c8d860 100644
--- a/types/components/form/registerForm.ts
+++ b/types/components/form/signupForm.ts
@@ -1,4 +1,4 @@
-export type RegisterFormProps = {
+export type SignUpFormProps = {
   link?: { href: string; text: string }
   subtitle?: string
   title: string

From 1056eee7e92b57ff4c16c388338dfeebfc3120e1 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 23 Oct 2024 14:51:27 +0200
Subject: [PATCH 63/69] feat(SW-360): trigger validation on form submission

---
 .../SignupFormWrapper/index.tsx               |  4 +--
 components/Forms/Signup/index.tsx             | 30 ++++++++++++++-----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx b/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
index f69637847..bf6af6294 100644
--- a/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
+++ b/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
@@ -3,7 +3,7 @@ import { redirect } from "next/navigation"
 import { overview } from "@/constants/routes/myPages"
 
 import { auth } from "@/auth"
-import Form from "@/components/Forms/Signup"
+import SignupForm from "@/components/Forms/Signup"
 import { getLang } from "@/i18n/serverContext"
 
 import { SignupFormWrapperProps } from "@/types/components/blocks/dynamicContent"
@@ -16,5 +16,5 @@ export default async function SignupFormWrapper({
     // We don't want to allow users to access signup if they are already authenticated.
     redirect(overview[getLang()])
   }
-  return <Form {...dynamic_content} />
+  return <SignupForm {...dynamic_content} />
 }
diff --git a/components/Forms/Signup/index.tsx b/components/Forms/Signup/index.tsx
index d616d1e5f..d9a273560 100644
--- a/components/Forms/Signup/index.tsx
+++ b/components/Forms/Signup/index.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { useEffect,useState } from "react"
+import { useEffect, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -29,9 +29,16 @@ import styles from "./form.module.css"
 
 import type { SignUpFormProps } from "@/types/components/form/signupForm"
 
-export default function Form({ link, subtitle, title }: SignUpFormProps) {
+export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
   const intl = useIntl()
   const lang = useLang()
+  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" })
+
+  const [isSubmitAttempted, setIsSubmitAttempted] = useState(false)
+
   const methods = useForm<SignUpSchema>({
     defaultValues: {
       firstName: "",
@@ -51,12 +58,18 @@ export default function Form({ link, subtitle, title }: SignUpFormProps) {
     resolver: zodResolver(signUpSchema),
     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: SignUpSchema) {
+  // Trigger validation for all fields upon invalid submissions.
+  useEffect(() => {
+    if (
+      isSubmitAttempted &&
+      (!methods.formState.isValid || !methods.formState.isSubmitting)
+    ) {
+      methods.trigger()
+    }
+  }, [isSubmitAttempted, methods])
+
+  async function onSubmit(data: SignUpSchema) {
     try {
       const result = await registerUser(data)
       if (result && !result.success) {
@@ -79,12 +92,12 @@ export default function Form({ link, subtitle, title }: SignUpFormProps) {
         <form
           className={styles.form}
           id="register"
+          onSubmit={methods.handleSubmit(onSubmit)}
           /**
            * 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.userInfo}>
             <div className={styles.container}>
@@ -178,6 +191,7 @@ export default function Form({ link, subtitle, title }: SignUpFormProps) {
             intent="primary"
             disabled={methods.formState.isSubmitting}
             data-testid="submit"
+            onClick={() => setIsSubmitAttempted(true)}
           >
             {intl.formatMessage({ id: "Sign up to Scandic Friends" })}
           </Button>

From eaf9c2f5f2231c539700703e0e5940b1aab1e328 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Thu, 24 Oct 2024 08:46:14 +0200
Subject: [PATCH 64/69] refactor(SW-360): trigger validation on submnission

---
 components/Forms/Signup/index.tsx | 55 +++++++++++++++++--------------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/components/Forms/Signup/index.tsx b/components/Forms/Signup/index.tsx
index d9a273560..39d389e91 100644
--- a/components/Forms/Signup/index.tsx
+++ b/components/Forms/Signup/index.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { useEffect, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -37,15 +36,13 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
   const phoneNumber = intl.formatMessage({ id: "Phone number" })
   const zipCode = intl.formatMessage({ id: "Zip code" })
 
-  const [isSubmitAttempted, setIsSubmitAttempted] = useState(false)
-
   const methods = useForm<SignUpSchema>({
     defaultValues: {
       firstName: "",
       lastName: "",
       email: "",
       phoneNumber: "",
-      dateOfBirth: "",
+      dateOfBirth: "1995-01-01",
       address: {
         countryCode: "",
         zipCode: "",
@@ -59,16 +56,6 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
     reValidateMode: "onChange",
   })
 
-  // Trigger validation for all fields upon invalid submissions.
-  useEffect(() => {
-    if (
-      isSubmitAttempted &&
-      (!methods.formState.isValid || !methods.formState.isSubmitting)
-    ) {
-      methods.trigger()
-    }
-  }, [isSubmitAttempted, methods])
-
   async function onSubmit(data: SignUpSchema) {
     try {
       const result = await registerUser(data)
@@ -184,17 +171,35 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
               </Body>
             </Checkbox>
           </section>
-          <Button
-            className={styles.signUpButton}
-            type="submit"
-            theme="base"
-            intent="primary"
-            disabled={methods.formState.isSubmitting}
-            data-testid="submit"
-            onClick={() => setIsSubmitAttempted(true)}
-          >
-            {intl.formatMessage({ id: "Sign up to Scandic Friends" })}
-          </Button>
+
+          {/* 
+            We use this approach to trigger validation for all invalid inputs upon submission.
+            To handle this programmatically in the future, we would need some major refactoring
+            of the Input component, which is out of scope for now.
+          */}
+          {!methods.formState.isValid ? (
+            <Button
+              className={styles.signUpButton}
+              type="button"
+              theme="base"
+              intent="primary"
+              onClick={() => methods.trigger()}
+              data-testid="trigger-validation"
+            >
+              {intl.formatMessage({ id: "Sign up to Scandic Friends" })}
+            </Button>
+          ) : (
+            <Button
+              className={styles.signUpButton}
+              type="submit"
+              theme="base"
+              intent="primary"
+              disabled={methods.formState.isSubmitting}
+              data-testid="submit"
+            >
+              {intl.formatMessage({ id: "Sign up to Scandic Friends" })}
+            </Button>
+          )}
         </form>
       </FormProvider>
     </section>

From 62eb5a9bb5dd2a94c86a1f2e4df51c58bac0a57c Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Thu, 24 Oct 2024 08:49:53 +0200
Subject: [PATCH 65/69] fix(SW-360): remove default date

---
 components/Forms/Signup/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Forms/Signup/index.tsx b/components/Forms/Signup/index.tsx
index 39d389e91..a64569f80 100644
--- a/components/Forms/Signup/index.tsx
+++ b/components/Forms/Signup/index.tsx
@@ -42,7 +42,7 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
       lastName: "",
       email: "",
       phoneNumber: "",
-      dateOfBirth: "1995-01-01",
+      dateOfBirth: "",
       address: {
         countryCode: "",
         zipCode: "",

From e25a974426cbb9a4befb85468a6fe584ae9fb7d3 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Thu, 24 Oct 2024 09:19:14 +0200
Subject: [PATCH 66/69] fix(SW-360): more context to how we handle triggers

---
 components/Forms/Signup/index.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/Forms/Signup/index.tsx b/components/Forms/Signup/index.tsx
index a64569f80..9f061f614 100644
--- a/components/Forms/Signup/index.tsx
+++ b/components/Forms/Signup/index.tsx
@@ -173,9 +173,10 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
           </section>
 
           {/* 
-            We use this approach to trigger validation for all invalid inputs upon submission.
-            To handle this programmatically in the future, we would need some major refactoring
-            of the Input component, which is out of scope for now.
+            This is a manual validation trigger workaround:
+            - The Controller component (which Input uses) doesn't re-render on submit,
+              which prevents automatic error display.
+            - Future fix requires Input component refactoring (out of scope for now).
           */}
           {!methods.formState.isValid ? (
             <Button

From fc129153456b4acf8965f86dd4df7e96ba64fdcd Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Thu, 24 Oct 2024 09:24:03 +0200
Subject: [PATCH 67/69] fix(SW-360): remove uneeded code

---
 constants/routes/signup.ts | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/constants/routes/signup.ts b/constants/routes/signup.ts
index 9ef09c4a0..82a39ee41 100644
--- a/constants/routes/signup.ts
+++ b/constants/routes/signup.ts
@@ -17,11 +17,3 @@ export const signupVerify: LangRoute = {
   da: `${signup.da}/bekraeft`,
   de: `${signup.de}/verifizieren`,
 }
-
-export const isSignupPage = (path: string): boolean => {
-  return Object.values(signup).includes(path)
-}
-
-export const isSignupVerifyPage = (path: string): boolean => {
-  return Object.values(signupVerify).includes(path)
-}

From 212af2105e0b47a624fc2efa6862479fb11271fc Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Thu, 24 Oct 2024 09:32:01 +0200
Subject: [PATCH 68/69] fix(SW-360): switch email translation

---
 components/Forms/Signup/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Forms/Signup/index.tsx b/components/Forms/Signup/index.tsx
index 9f061f614..ad66f6282 100644
--- a/components/Forms/Signup/index.tsx
+++ b/components/Forms/Signup/index.tsx
@@ -32,7 +32,7 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
   const intl = useIntl()
   const lang = useLang()
   const country = intl.formatMessage({ id: "Country" })
-  const email = `${intl.formatMessage({ id: "Email" })} ${intl.formatMessage({ id: "Address" }).toLowerCase()}`
+  const email = intl.formatMessage({ id: "Email address" })
   const phoneNumber = intl.formatMessage({ id: "Phone number" })
   const zipCode = intl.formatMessage({ id: "Zip code" })
 

From bbab8aa4f8cc9772ffd55eb9ffbac48f3ac4c339 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Thu, 24 Oct 2024 09:36:17 +0200
Subject: [PATCH 69/69] fix(SW-360): better phone parsing in server action

---
 actions/registerUser.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/actions/registerUser.ts b/actions/registerUser.ts
index 7ce9c2e43..e65fc357f 100644
--- a/actions/registerUser.ts
+++ b/actions/registerUser.ts
@@ -1,5 +1,6 @@
 "use server"
 
+import { parsePhoneNumber } from "libphonenumber-js"
 import { redirect } from "next/navigation"
 import { z } from "zod"
 
@@ -34,7 +35,9 @@ export const registerUser = serviceServerActionProcedure
     const payload = {
       ...input,
       language: ctx.lang,
-      phoneNumber: input.phoneNumber.replace(/\s+/g, ""),
+      phoneNumber: parsePhoneNumber(input.phoneNumber)
+        .formatNational()
+        .replace(/\s+/g, ""),
     }
 
     const parsedPayload = registerUserPayload.safeParse(payload)