From 658afd0327020883cd4083989b5a3f6dd53e5459 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Thu, 12 Dec 2024 15:38:05 +0100
Subject: [PATCH 01/21] fix: handle cases with counterRateCode missing

---
 .../HotelReservation/EnterDetails/Payment/PaymentClient.tsx   | 4 +++-
 components/HotelReservation/EnterDetails/Summary/UI/index.tsx | 2 +-
 types/components/hotelReservation/enterDetails/bookingData.ts | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx b/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
index 635f7c775..dd244b473 100644
--- a/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
+++ b/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
@@ -217,7 +217,9 @@ export default function PaymentClient({
             bedType: bedTypeMap[parseInt(child.bed.toString())],
           })),
           rateCode:
-            user || join || membershipNo ? room.counterRateCode : room.rateCode,
+            (user || join || membershipNo) && room.counterRateCode
+              ? room.counterRateCode
+              : room.rateCode,
           roomTypeCode: bedType!.roomTypeCode, // A selection has been made in order to get to this step.
           guest: {
             firstName,
diff --git a/components/HotelReservation/EnterDetails/Summary/UI/index.tsx b/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
index 5a84dde6e..90dc0775d 100644
--- a/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
+++ b/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
@@ -67,7 +67,7 @@ export default function SummaryUI({
       }
     : null
 
-  const showMemberPrice = !!(isMember || join || membershipNo)
+  const showMemberPrice = !!(isMember || join || membershipNo) && memberPrice
 
   const diff = dt(booking.toDate).diff(booking.fromDate, "days")
 
diff --git a/types/components/hotelReservation/enterDetails/bookingData.ts b/types/components/hotelReservation/enterDetails/bookingData.ts
index c78b5c90e..12760e765 100644
--- a/types/components/hotelReservation/enterDetails/bookingData.ts
+++ b/types/components/hotelReservation/enterDetails/bookingData.ts
@@ -5,7 +5,7 @@ interface Room {
   adults: number
   roomTypeCode: string
   rateCode: string
-  counterRateCode: string
+  counterRateCode?: string
   children?: Child[]
   packages?: RoomPackageCodeEnum[]
 }

From 8534405358603914700dbbdc48883c47794c4877 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Thu, 12 Dec 2024 15:41:29 +0100
Subject: [PATCH 02/21] fix: reset searchparams after errorcode from planet

---
 hooks/booking/usePaymentFailedToast.ts | 15 ++++++++++++++-
 stores/enter-details/index.ts          | 18 +++++++++++++-----
 types/stores/enter-details.ts          |  4 +++-
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/hooks/booking/usePaymentFailedToast.ts b/hooks/booking/usePaymentFailedToast.ts
index 961ab0c2b..806c3d5a2 100644
--- a/hooks/booking/usePaymentFailedToast.ts
+++ b/hooks/booking/usePaymentFailedToast.ts
@@ -5,10 +5,14 @@ import { useCallback, useEffect } from "react"
 import { useIntl } from "react-intl"
 
 import { PaymentErrorCodeEnum } from "@/constants/booking"
+import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import { toast } from "@/components/TempDesignSystem/Toasts"
 
 export function usePaymentFailedToast() {
+  const updateSearchParams = useEnterDetailsStore(
+    (state) => state.actions.updateSeachParamString
+  )
   const intl = useIntl()
   const searchParams = useSearchParams()
   const pathname = usePathname()
@@ -43,6 +47,15 @@ export function usePaymentFailedToast() {
 
     const queryParams = new URLSearchParams(searchParams.toString())
     queryParams.delete("errorCode")
+
+    updateSearchParams(queryParams.toString())
     router.push(`${pathname}?${queryParams.toString()}`)
-  }, [searchParams, pathname, errorCode, errorMessage, router])
+  }, [
+    searchParams,
+    pathname,
+    errorCode,
+    errorMessage,
+    router,
+    updateSearchParams,
+  ])
 }
diff --git a/stores/enter-details/index.ts b/stores/enter-details/index.ts
index a469eb4f0..b2480471b 100644
--- a/stores/enter-details/index.ts
+++ b/stores/enter-details/index.ts
@@ -133,7 +133,7 @@ export function createDetailsStore(
             const currentStepIndex = state.steps.indexOf(state.currentStep)
             const nextStep = state.steps[currentStepIndex + 1]
             state.currentStep = nextStep
-            navigate(nextStep, searchParams)
+            navigate(nextStep, state.searchParamString)
           })
         )
       },
@@ -141,7 +141,7 @@ export function createDetailsStore(
         return set(
           produce((state) => {
             state.currentStep = step
-            navigate(step, searchParams)
+            navigate(step, state.searchParamString)
           })
         )
       },
@@ -185,7 +185,7 @@ export function createDetailsStore(
             const currentStepIndex = state.steps.indexOf(state.currentStep)
             const nextStep = state.steps[currentStepIndex + 1]
             state.currentStep = nextStep
-            navigate(nextStep, searchParams)
+            navigate(nextStep, state.searchParamString)
           })
         )
       },
@@ -266,7 +266,7 @@ export function createDetailsStore(
             const currentStepIndex = state.steps.indexOf(state.currentStep)
             const nextStep = state.steps[currentStepIndex + 1]
             state.currentStep = nextStep
-            navigate(nextStep, searchParams)
+            navigate(nextStep, state.searchParamString)
           })
         )
       },
@@ -304,11 +304,19 @@ export function createDetailsStore(
             const currentStepIndex = state.steps.indexOf(state.currentStep)
             const nextStep = state.steps[currentStepIndex + 1]
             state.currentStep = nextStep
-            navigate(nextStep, searchParams)
+            navigate(nextStep, state.searchParamString)
+          })
+        )
+      },
+      updateSeachParamString(searchParamString) {
+        return set(
+          produce((state: DetailsState) => {
+            state.searchParamString = searchParamString
           })
         )
       },
     },
+    searchParamString: searchParams,
     bedType: initialState.bedType ?? undefined,
     booking: initialState.booking,
     breakfast:
diff --git a/types/stores/enter-details.ts b/types/stores/enter-details.ts
index 9793d902a..e507ab146 100644
--- a/types/stores/enter-details.ts
+++ b/types/stores/enter-details.ts
@@ -5,7 +5,7 @@ import type {
   DetailsSchema,
   SignedInDetailsSchema,
 } from "@/types/components/hotelReservation/enterDetails/details"
-import { StepEnum } from "@/types/enums/step"
+import type { StepEnum } from "@/types/enums/step"
 import type { DetailsProviderProps } from "../providers/enter-details"
 import type { Packages } from "../requests/packages"
 
@@ -37,6 +37,7 @@ export interface DetailsState {
     updateBedType: (data: BedTypeSchema) => void
     updateBreakfast: (data: BreakfastPackage | false) => void
     updateDetails: (data: DetailsSchema) => void
+    updateSeachParamString: (searchParamString: string) => void
   }
   bedType: BedTypeSchema | undefined
   booking: BookingData
@@ -52,6 +53,7 @@ export interface DetailsState {
   roomPrice: Price
   steps: StepEnum[]
   totalPrice: Price
+  searchParamString: string
 }
 
 export type InitialState = Pick<DetailsState, "booking" | "packages"> &

From 6dc807d0b21303cd9073017188142af6c2b4c4a1 Mon Sep 17 00:00:00 2001
From: Tobias Johansson <tobias.johansson@scandichotels.com>
Date: Fri, 13 Dec 2024 09:58:09 +0100
Subject: [PATCH 03/21] fix: added default image for hotel images

---
 server/routers/hotels/output.ts | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index 17c7eb263..47bfb9e45 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -1,6 +1,6 @@
 import { z } from "zod"
 
-import { ChildBedTypeEnum, PaymentMethodEnum } from "@/constants/booking"
+import { ChildBedTypeEnum ,type  PaymentMethodEnum } from "@/constants/booking"
 import { dt } from "@/lib/dt"
 import { toLang } from "@/server/utils"
 
@@ -99,10 +99,25 @@ const locationSchema = z.object({
 })
 
 const hotelContentSchema = z.object({
-  images: z.object({
-    metaData: imageMetaDataSchema,
-    imageSizes: imageSizesSchema,
-  }),
+  images: z
+    .object({
+      metaData: imageMetaDataSchema,
+      imageSizes: imageSizesSchema,
+    })
+    .default({
+      metaData: {
+        title: "",
+        altText: "",
+        altText_En: "",
+        copyRight: "",
+      },
+      imageSizes: {
+        tiny: "https://placehold.co/1280x720",
+        small: "https://placehold.co/1280x720",
+        medium: "https://placehold.co/1280x720",
+        large: "https://placehold.co/1280x720",
+      },
+    }),
   texts: z.object({
     facilityInformation: z.string().optional(),
     surroundingInformation: z.string(),

From aa8cfe86c4a0873c0a80a9cf354cd96d16c2816a Mon Sep 17 00:00:00 2001
From: Tobias Johansson <tobias.johansson@scandichotels.com>
Date: Fri, 13 Dec 2024 10:02:28 +0100
Subject: [PATCH 04/21] fix: added placeholder meta data

---
 server/routers/hotels/output.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index 47bfb9e45..1bffd3543 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -1,6 +1,6 @@
 import { z } from "zod"
 
-import { ChildBedTypeEnum ,type  PaymentMethodEnum } from "@/constants/booking"
+import { ChildBedTypeEnum, type PaymentMethodEnum } from "@/constants/booking"
 import { dt } from "@/lib/dt"
 import { toLang } from "@/server/utils"
 
@@ -106,10 +106,10 @@ const hotelContentSchema = z.object({
     })
     .default({
       metaData: {
-        title: "",
-        altText: "",
-        altText_En: "",
-        copyRight: "",
+        title: "default image",
+        altText: "default image",
+        altText_En: "default image",
+        copyRight: "default image",
       },
       imageSizes: {
         tiny: "https://placehold.co/1280x720",

From ec0c6234ef7cf05c270e5e173551b6de9fe83e0f Mon Sep 17 00:00:00 2001
From: Bianca Widstam <bianca.widstam@scandichotels.com>
Date: Fri, 13 Dec 2024 10:21:59 +0000
Subject: [PATCH 05/21] Merged in fix/SW-1119-select-room-same-currency (pull
 request #1075)

fix(SW-1119): remove approx currency if same and synchronize price option height

* fix(SW-1119): remove approx currency if same and synchronize price option height

* fix(SW-1119): use debounce and observer for performance

* fix(SW-1119): export selector variable to utils


Approved-by: Pontus Dreij
Approved-by: Niclas Edenvin
---
 .../FlexibilityOption/PriceList/index.tsx     | 32 ++++----
 .../RoomSelection/FlexibilityOption/index.tsx | 11 ++-
 .../SelectRate/RoomSelection/index.tsx        | 76 +++++++++++++++++--
 .../SelectRate/RoomSelection/utils.ts         |  2 +
 4 files changed, 95 insertions(+), 26 deletions(-)

diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
index a201a44b1..eff2e3717 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
@@ -28,7 +28,10 @@ export default function PriceList({
   const petRoomLocalPrice = petRoomPackage?.localPrice
   const petRoomRequestedPrice = petRoomPackage?.requestedPrice
 
-  const showRequestedPrice = publicRequestedPrice && memberRequestedPrice
+  const showRequestedPrice =
+    publicRequestedPrice &&
+    memberRequestedPrice &&
+    publicRequestedPrice.currency !== publicLocalPrice.currency
   const searchParams = useSearchParams()
   const fromDate = searchParams.get("fromDate")
   const toDate = searchParams.get("toDate")
@@ -114,27 +117,22 @@ export default function PriceList({
           )}
         </dd>
       </div>
-
-      <div className={styles.priceRow}>
-        <dt>
-          <Caption
-            color={showRequestedPrice ? "uiTextMediumContrast" : "disabled"}
-          >
-            {intl.formatMessage({ id: "Approx." })}
-          </Caption>
-        </dt>
-        <dd>
-          {showRequestedPrice ? (
+      {showRequestedPrice && (
+        <div className={styles.priceRow}>
+          <dt>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage({ id: "Approx." })}
+            </Caption>
+          </dt>
+          <dd>
             <Caption color="uiTextMediumContrast">
               {totalPublicRequestedPricePerNight}/
               {totalMemberRequestedPricePerNight}{" "}
               {publicRequestedPrice.currency}
             </Caption>
-          ) : (
-            <Caption color="disabled">- / - EUR</Caption>
-          )}
-        </dd>
-      </div>
+          </dd>
+        </div>
+      )}
     </dl>
   )
 }
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
index 1a227d568..5e13bd1e9 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
@@ -7,6 +7,7 @@ import Label from "@/components/TempDesignSystem/Form/Label"
 import Popover from "@/components/TempDesignSystem/Popover"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
+import { rateCardEqualHeightSelector } from "../utils"
 import PriceTable from "./PriceList"
 
 import styles from "./flexibilityOption.module.css"
@@ -26,11 +27,13 @@ export default function FlexibilityOption({
 
   if (!product) {
     return (
-      <div className={styles.noPricesCard}>
+      <div className={`${styles.noPricesCard} ${rateCardEqualHeightSelector}`}>
         <div className={styles.header}>
           <InfoCircleIcon width={16} height={16} color="uiTextMediumContrast" />
-          <Caption>{name}</Caption>
-          <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
+          <div className={styles.priceType}>
+            <Caption>{name}</Caption>
+            <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
+          </div>
         </div>
         <Label size="regular" className={styles.noPricesLabel}>
           <Caption color="uiTextHighContrast" type="bold">
@@ -70,7 +73,7 @@ export default function FlexibilityOption({
         value={publicPrice?.rateCode}
         onClick={onClick}
       />
-      <div className={styles.card}>
+      <div className={`${styles.card} ${rateCardEqualHeightSelector}`}>
         <div className={styles.header}>
           <Popover
             placement="bottom left"
diff --git a/components/HotelReservation/SelectRate/RoomSelection/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
index 9f63b4923..3c6b75707 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
@@ -1,10 +1,15 @@
 "use client"
 import { useRouter, useSearchParams } from "next/navigation"
-import { useMemo } from "react"
+import { useCallback, useEffect, useMemo, useRef } from "react"
+
+import { debounce } from "@/utils/debounce"
 
 import RateSummary from "./RateSummary"
 import RoomCard from "./RoomCard"
-import { getHotelReservationQueryParams } from "./utils"
+import {
+  getHotelReservationQueryParams,
+  rateCardEqualHeightSelector,
+} from "./utils"
 
 import styles from "./roomSelection.module.css"
 
@@ -23,9 +28,65 @@ export default function RoomSelection({
   const router = useRouter()
   const searchParams = useSearchParams()
   const isUserLoggedIn = !!user
-
+  const roomRefs = useRef<HTMLLIElement[]>([])
   const { roomConfigurations, rateDefinitions } = roomsAvailability
 
+  const equalizePriceOptionHeights = useCallback(() => {
+    if (!roomRefs.current.length) return
+
+    roomRefs.current.forEach((room) => {
+      const options = room.querySelectorAll<HTMLDivElement>(
+        `.${rateCardEqualHeightSelector}`
+      )
+      options.forEach((option) => {
+        option.style.height = "auto"
+      })
+    })
+
+    const numOptions =
+      roomRefs.current[0]?.querySelectorAll<HTMLDivElement>(
+        `.${rateCardEqualHeightSelector}`
+      ).length || 0
+
+    for (let i = 0; i < numOptions; i++) {
+      let maxHeight = 0
+
+      roomRefs.current.forEach((room) => {
+        const option = room.querySelectorAll<HTMLDivElement>(
+          `.${rateCardEqualHeightSelector}`
+        )[i]
+        if (option) {
+          maxHeight = Math.max(maxHeight, option.offsetHeight)
+        }
+      })
+
+      roomRefs.current.forEach((room) => {
+        const option = room.querySelectorAll<HTMLDivElement>(
+          `.${rateCardEqualHeightSelector}`
+        )[i]
+        if (option) {
+          option.style.height = `${maxHeight}px`
+        }
+      })
+    }
+  }, [])
+
+  useEffect(() => {
+    const debouncedResizeHandler = debounce(function () {
+      equalizePriceOptionHeights()
+    })
+
+    const observer = new ResizeObserver(debouncedResizeHandler)
+
+    observer.observe(document.documentElement)
+
+    return () => {
+      if (observer) {
+        observer.unobserve(document.documentElement)
+      }
+    }
+  }, [roomRefs, equalizePriceOptionHeights])
+
   const queryParams = useMemo(() => {
     const params = new URLSearchParams(searchParams)
     const searchParamsObject = getHotelReservationQueryParams(searchParams)
@@ -64,8 +125,13 @@ export default function RoomSelection({
         onSubmit={handleSubmit}
       >
         <ul className={styles.roomList}>
-          {roomConfigurations.map((roomConfiguration) => (
-            <li key={roomConfiguration.roomTypeCode}>
+          {roomConfigurations.map((roomConfiguration, index) => (
+            <li
+              key={roomConfiguration.roomTypeCode}
+              ref={(el) => {
+                if (el) roomRefs.current[index] = el
+              }}
+            >
               <RoomCard
                 hotelId={roomsAvailability.hotelId.toString()}
                 hotelType={hotelType}
diff --git a/components/HotelReservation/SelectRate/RoomSelection/utils.ts b/components/HotelReservation/SelectRate/RoomSelection/utils.ts
index a37da6eb0..92ef0be01 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/utils.ts
+++ b/components/HotelReservation/SelectRate/RoomSelection/utils.ts
@@ -101,3 +101,5 @@ export function createQueryParamsForEnterDetails(
 
   return searchParams
 }
+
+export const rateCardEqualHeightSelector = "rateCardEqualHeight"

From 50fc8a183caea5d8bf8e088928b84a90357c3459 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Thu, 12 Dec 2024 14:36:41 +0100
Subject: [PATCH 06/21] Fix: created util to handle searchParams for
 hotelreservation

---
 .../(standard)/select-hotel/map/page.tsx      | 30 ++------
 .../(standard)/select-hotel/page.tsx          | 45 ++---------
 .../(standard)/select-rate/page.tsx           | 49 +++---------
 .../hotelreservation/(standard)/utils.ts      | 77 +++++++++++++++++++
 .../HotelReservation/SelectHotel/index.tsx    |  6 +-
 .../selectHotel/selectHotel.ts                |  9 +--
 6 files changed, 106 insertions(+), 110 deletions(-)
 create mode 100644 app/[lang]/(live)/(public)/hotelreservation/(standard)/utils.ts

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
index 29caabded..2296489ac 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
@@ -1,17 +1,12 @@
-import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
-import { getLocations } from "@/lib/trpc/memoizedRequests"
-
 import { SelectHotelMapContainer } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer"
 import { SelectHotelMapContainerSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton"
-import {
-  generateChildrenString,
-  getHotelReservationQueryParams,
-} from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import { MapContainer } from "@/components/MapContainer"
 import { setLang } from "@/i18n/serverContext"
 
+import { getHotelSearchDetails } from "../../utils"
+
 import styles from "./page.module.css"
 
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
@@ -22,24 +17,9 @@ export default async function SelectHotelMapPage({
   searchParams,
 }: PageArgs<LangParams, SelectHotelSearchParams>) {
   setLang(params.lang)
-  const locations = await getLocations()
-
-  if (!locations || "error" in locations) {
-    return null
-  }
-  const city = locations.data.find(
-    (location) =>
-      location.name.toLowerCase() === searchParams.city.toLowerCase()
-  )
-  if (!city) return notFound()
-
-  const selectHotelParams = new URLSearchParams(searchParams)
-  const selectHotelParamsObject =
-    getHotelReservationQueryParams(selectHotelParams)
-  const adultsInRoom = selectHotelParamsObject.room[0].adults // TODO: Handle multiple rooms
-  const childrenInRoom = selectHotelParamsObject.room[0].child
-    ? generateChildrenString(selectHotelParamsObject.room[0].child)
-    : undefined // TODO: Handle multiple rooms
+  const searchDetails = await getHotelSearchDetails({ searchParams })
+  if (!searchDetails) return null
+  const { city, adultsInRoom, childrenInRoom } = searchDetails
 
   return (
     <div className={styles.main}>
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
index 3c3435dd4..04439fdf4 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
@@ -1,16 +1,11 @@
-import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
-import { getLocations } from "@/lib/trpc/memoizedRequests"
-
 import SelectHotel from "@/components/HotelReservation/SelectHotel"
 import { SelectHotelSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelSkeleton"
-import {
-  generateChildrenString,
-  getHotelReservationQueryParams,
-} from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import { setLang } from "@/i18n/serverContext"
 
+import { getHotelSearchDetails } from "../utils"
+
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import type { LangParams, PageArgs } from "@/types/params"
 
@@ -19,39 +14,15 @@ export default async function SelectHotelPage({
   searchParams,
 }: PageArgs<LangParams, SelectHotelSearchParams>) {
   setLang(params.lang)
-  const locations = await getLocations()
-
-  if (!locations || "error" in locations) {
-    return null
-  }
-  const city = locations.data.find(
-    (location) =>
-      location.name.toLowerCase() === searchParams.city.toLowerCase()
-  )
-
-  if (!city) return notFound()
-
-  const selectHotelParams = new URLSearchParams(searchParams)
-  const selectHotelParamsObject =
-    getHotelReservationQueryParams(selectHotelParams)
-
-  if (
-    !selectHotelParamsObject.room ||
-    selectHotelParamsObject.room.length === 0
-  ) {
-    return notFound()
-  }
-
-  const adultsParams = selectHotelParamsObject.room[0].adults // TODO: Handle multiple rooms
-  const childrenParams = selectHotelParamsObject.room[0].child
-    ? generateChildrenString(selectHotelParamsObject.room[0].child)
-    : undefined // TODO: Handle multiple rooms
+  const searchDetails = await getHotelSearchDetails({ searchParams })
+  if (!searchDetails) return null
+  const { city, urlSearchParams, adultsInRoom, childrenInRoom } = searchDetails
 
   const reservationParams = {
-    selectHotelParams,
+    selectHotelParams: urlSearchParams,
     searchParams,
-    adultsParams,
-    childrenParams,
+    adultsInRoom,
+    childrenInRoom,
   }
 
   return (
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 fa32a54cd..c916ae231 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
@@ -1,15 +1,11 @@
-import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
-import { getHotelData, getLocations } from "@/lib/trpc/memoizedRequests"
-
 import HotelInfoCard from "@/components/HotelReservation/SelectRate/HotelInfoCard"
 import { RoomsContainer } from "@/components/HotelReservation/SelectRate/Rooms/RoomsContainer"
 import { RoomsContainerSkeleton } from "@/components/HotelReservation/SelectRate/Rooms/RoomsContainerSkeleton"
-import { getHotelReservationQueryParams } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import { setLang } from "@/i18n/serverContext"
-import { safeTry } from "@/utils/safeTry"
 
+import { getHotelSearchDetails } from "../utils"
 import { getValidDates } from "./getValidDates"
 
 import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
@@ -20,43 +16,16 @@ export default async function SelectRatePage({
   searchParams,
 }: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
   setLang(params.lang)
-
-  const locations = await getLocations()
-  if (!locations || "error" in locations) {
-    return null
-  }
-  const hotel = locations.data.find(
-    (location) =>
-      "operaId" in location && location.operaId == searchParams.hotel
-  )
-  if (!hotel) {
-    return notFound()
-  }
-  const selectRoomParams = new URLSearchParams(searchParams)
-  const selectRoomParamsObject =
-    getHotelReservationQueryParams(selectRoomParams)
-
-  if (!selectRoomParamsObject.room) {
-    return notFound()
-  }
+  const searchDetails = await getHotelSearchDetails({ searchParams })
+  if (!searchDetails) return null
+  const { hotel, adultsInRoom, childrenInRoomArray } = searchDetails
 
   const { fromDate, toDate } = getValidDates(
     searchParams.fromDate,
     searchParams.toDate
   )
 
-  const adults = selectRoomParamsObject.room[0].adults || 1 // TODO: Handle multiple rooms
-  const children = selectRoomParamsObject.room[0].child // TODO: Handle multiple rooms
-
-  const [hotelData, hotelDataError] = await safeTry(
-    getHotelData({ hotelId: searchParams.hotel, language: params.lang })
-  )
-
-  if (!hotelData && !hotelDataError) {
-    return notFound()
-  }
-
-  const hotelId = +searchParams.hotel
+  const hotelId = +hotel.id
   return (
     <>
       <HotelInfoCard
@@ -64,8 +33,8 @@ export default async function SelectRatePage({
         lang={params.lang}
         fromDate={fromDate.toDate()}
         toDate={toDate.toDate()}
-        adultCount={adults}
-        childArray={children}
+        adultCount={adultsInRoom}
+        childArray={childrenInRoomArray}
       />
 
       <Suspense key={hotelId} fallback={<RoomsContainerSkeleton />}>
@@ -74,8 +43,8 @@ export default async function SelectRatePage({
           lang={params.lang}
           fromDate={fromDate.toDate()}
           toDate={toDate.toDate()}
-          adultCount={adults}
-          childArray={children}
+          adultCount={adultsInRoom}
+          childArray={childrenInRoomArray}
         />
       </Suspense>
     </>
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils.ts b/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils.ts
new file mode 100644
index 000000000..d2f9271b3
--- /dev/null
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils.ts
@@ -0,0 +1,77 @@
+import { notFound } from "next/navigation"
+
+import { getLocations } from "@/lib/trpc/memoizedRequests"
+
+import {
+  generateChildrenString,
+  getHotelReservationQueryParams,
+} from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+
+import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
+import type {
+  Child,
+  SelectRateSearchParams,
+} from "@/types/components/hotelReservation/selectRate/selectRate"
+import type { Location } from "@/types/trpc/routers/hotel/locations"
+
+interface HotelSearchDetails {
+  city: Location
+  hotel: Location
+  urlSearchParams?: URLSearchParams
+  adultsInRoom: number
+  childrenInRoom?: string
+  childrenInRoomArray?: Child[]
+}
+
+export async function getHotelSearchDetails({
+  searchParams,
+}: {
+  searchParams:
+    | (SelectHotelSearchParams & {
+        [key: string]: string
+      })
+    | (SelectRateSearchParams & {
+        [key: string]: string
+      })
+}): Promise<HotelSearchDetails | null> {
+  const locations = await getLocations()
+
+  if (!locations || "error" in locations) return null
+
+  const city = locations.data.find(
+    (location) =>
+      location.name.toLowerCase() === searchParams.city?.toLowerCase()
+  )
+  const hotel = locations.data.find(
+    (location) =>
+      "operaId" in location && location.operaId == searchParams.hotel
+  )
+
+  if (!city && !hotel) return notFound()
+
+  const urlSearchParams = new URLSearchParams(searchParams)
+  const searchParamsObject = getHotelReservationQueryParams(urlSearchParams)
+
+  let adultsInRoom = 1
+  let childrenInRoom: string | undefined = undefined
+  let childrenInRoomArray: Child[] | undefined = undefined
+
+  if (searchParamsObject.room && searchParamsObject.room.length > 0) {
+    adultsInRoom = searchParamsObject.room[0].adults // TODO: Handle multiple rooms
+    childrenInRoom = searchParamsObject.room[0].child
+      ? generateChildrenString(searchParamsObject.room[0].child)
+      : undefined // TODO: Handle multiple rooms
+    childrenInRoomArray = searchParamsObject.room[0].child
+      ? searchParamsObject.room[0].child
+      : undefined // TODO: Handle multiple rooms
+  }
+
+  return {
+    city: city!,
+    hotel: hotel!,
+    urlSearchParams,
+    adultsInRoom,
+    childrenInRoom,
+    childrenInRoomArray,
+  }
+}
diff --git a/components/HotelReservation/SelectHotel/index.tsx b/components/HotelReservation/SelectHotel/index.tsx
index 2795d0c00..16c17520e 100644
--- a/components/HotelReservation/SelectHotel/index.tsx
+++ b/components/HotelReservation/SelectHotel/index.tsx
@@ -34,7 +34,7 @@ export default async function SelectHotel({
   params,
   reservationParams,
 }: SelectHotelProps) {
-  const { selectHotelParams, searchParams, adultsParams, childrenParams } =
+  const { selectHotelParams, searchParams, adultsInRoom, childrenInRoom } =
     reservationParams
 
   const intl = await getIntl()
@@ -44,8 +44,8 @@ export default async function SelectHotel({
       cityId: city.id,
       roomStayStartDate: searchParams.fromDate,
       roomStayEndDate: searchParams.toDate,
-      adults: adultsParams,
-      children: childrenParams?.toString(),
+      adults: adultsInRoom,
+      children: childrenInRoom,
     })
   )
 
diff --git a/types/components/hotelReservation/selectHotel/selectHotel.ts b/types/components/hotelReservation/selectHotel/selectHotel.ts
index 016645813..4303d65a7 100644
--- a/types/components/hotelReservation/selectHotel/selectHotel.ts
+++ b/types/components/hotelReservation/selectHotel/selectHotel.ts
@@ -1,7 +1,6 @@
-import { Lang } from "@/constants/languages"
-
 import type { CheckInData, Hotel, ParkingData } from "@/types/hotel"
 import type { Location } from "@/types/trpc/routers/hotel/locations"
+import type { Lang } from "@/constants/languages"
 import type { SelectHotelSearchParams } from "./selectHotelSearchParams"
 
 export enum AvailabilityEnum {
@@ -46,9 +45,9 @@ export interface SelectHotelProps {
     lang: Lang
   }
   reservationParams: {
-    selectHotelParams: URLSearchParams
+    selectHotelParams: URLSearchParams | undefined
     searchParams: SelectHotelSearchParams
-    adultsParams: number
-    childrenParams: string | undefined
+    adultsInRoom: number
+    childrenInRoom: string | undefined
   }
 }

From c2b4d8abcf4597af3477816b98c920d8ffb0dbc7 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Thu, 12 Dec 2024 14:37:41 +0100
Subject: [PATCH 07/21] Fix: created hook for useScrollToTop to reuse
 functionallity and util for getSortedHotels

---
 .../HotelCardListing/index.tsx                | 68 +++----------------
 .../HotelCardListing/utils.ts                 | 35 ++++++++++
 .../SelectHotelMapContent/index.tsx           | 29 ++------
 hooks/useScrollToTop.ts                       | 33 +++++++++
 4 files changed, 85 insertions(+), 80 deletions(-)
 create mode 100644 components/HotelReservation/HotelCardListing/utils.ts
 create mode 100644 hooks/useScrollToTop.ts

diff --git a/components/HotelReservation/HotelCardListing/index.tsx b/components/HotelReservation/HotelCardListing/index.tsx
index c7687362b..353bf2588 100644
--- a/components/HotelReservation/HotelCardListing/index.tsx
+++ b/components/HotelReservation/HotelCardListing/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { useSearchParams } from "next/navigation"
-import { useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo } from "react"
 import { useIntl } from "react-intl"
 
 import { useHotelFilterStore } from "@/stores/hotel-filters"
@@ -8,18 +8,18 @@ import { useHotelsMapStore } from "@/stores/hotels-map"
 
 import Alert from "@/components/TempDesignSystem/Alert"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
+import { useScrollToTop } from "@/hooks/useScrollToTop"
 
 import HotelCard from "../HotelCard"
 import { DEFAULT_SORT } from "../SelectHotel/HotelSorter"
+import { getSortedHotels } from "./utils"
 
 import styles from "./hotelCardListing.module.css"
 
 import {
   type HotelCardListingProps,
   HotelCardListingTypeEnum,
-  type HotelData,
 } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
-import { SortOrder } from "@/types/components/hotelReservation/selectHotel/hotelSorter"
 import { AlertTypeEnum } from "@/types/enums/alert"
 
 export default function HotelCardListing({
@@ -29,82 +29,36 @@ export default function HotelCardListing({
   const searchParams = useSearchParams()
   const activeFilters = useHotelFilterStore((state) => state.activeFilters)
   const setResultCount = useHotelFilterStore((state) => state.setResultCount)
-  const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
   const intl = useIntl()
   const { activeHotelCard } = useHotelsMapStore()
+  const { showBackToTop, scrollToTop } = useScrollToTop({ threshold: 490 })
 
   const sortBy = useMemo(
     () => searchParams.get("sort") ?? DEFAULT_SORT,
     [searchParams]
   )
 
-  const sortedHotels = useMemo(() => {
-    switch (sortBy) {
-      case SortOrder.Name:
-        return [...hotelData].sort((a, b) =>
-          a.hotelData.name.localeCompare(b.hotelData.name)
-        )
-      case SortOrder.TripAdvisorRating:
-        return [...hotelData].sort(
-          (a, b) =>
-            (b.hotelData.ratings?.tripAdvisor.rating ?? 0) -
-            (a.hotelData.ratings?.tripAdvisor.rating ?? 0)
-        )
-      case SortOrder.Price:
-        const getPricePerNight = (hotel: HotelData): number => {
-          return (
-            hotel.price?.member?.localPrice?.pricePerNight ??
-            hotel.price?.public?.localPrice?.pricePerNight ??
-            Infinity
-          )
-        }
-        return [...hotelData].sort(
-          (a, b) => getPricePerNight(a) - getPricePerNight(b)
-        )
-      case SortOrder.Distance:
-      default:
-        return [...hotelData].sort(
-          (a, b) =>
-            a.hotelData.location.distanceToCentre -
-            b.hotelData.location.distanceToCentre
-        )
-    }
-  }, [hotelData, sortBy])
+  const sortedHotels = useMemo(
+    () => getSortedHotels({ hotels: hotelData, sortBy }),
+    [hotelData, sortBy]
+  )
 
   const hotels = useMemo(() => {
-    if (activeFilters.length === 0) {
-      return sortedHotels
-    }
+    if (activeFilters.length === 0) return sortedHotels
 
-    const filteredHotels = sortedHotels.filter((hotel) =>
+    return sortedHotels.filter((hotel) =>
       activeFilters.every((appliedFilterId) =>
         hotel.hotelData.detailedFacilities.some(
           (facility) => facility.id.toString() === appliedFilterId
         )
       )
     )
-
-    return filteredHotels
   }, [activeFilters, sortedHotels])
 
   useEffect(() => {
-    const handleScroll = () => {
-      const hasScrolledPast = window.scrollY > 490
-      setShowBackToTop(hasScrolledPast)
-    }
-
-    window.addEventListener("scroll", handleScroll, { passive: true })
-    return () => window.removeEventListener("scroll", handleScroll)
-  }, [])
-
-  useEffect(() => {
-    setResultCount(hotels ? hotels.length : 0)
+    setResultCount(hotels?.length ?? 0)
   }, [hotels, setResultCount])
 
-  function scrollToTop() {
-    window.scrollTo({ top: 0, behavior: "smooth" })
-  }
-
   return (
     <section className={styles.hotelCards}>
       {hotels?.length ? (
diff --git a/components/HotelReservation/HotelCardListing/utils.ts b/components/HotelReservation/HotelCardListing/utils.ts
new file mode 100644
index 000000000..1e57a6721
--- /dev/null
+++ b/components/HotelReservation/HotelCardListing/utils.ts
@@ -0,0 +1,35 @@
+import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+import { SortOrder } from "@/types/components/hotelReservation/selectHotel/hotelSorter"
+
+export function getSortedHotels({
+  hotels,
+  sortBy,
+}: {
+  hotels: HotelData[]
+  sortBy: string
+}) {
+  const getPricePerNight = (hotel: HotelData): number =>
+    hotel.price?.member?.localPrice?.pricePerNight ??
+    hotel.price?.public?.localPrice?.pricePerNight ??
+    Infinity
+
+  const sortingStrategies: Record<
+    string,
+    (a: HotelData, b: HotelData) => number
+  > = {
+    [SortOrder.Name]: (a: HotelData, b: HotelData) =>
+      a.hotelData.name.localeCompare(b.hotelData.name),
+    [SortOrder.TripAdvisorRating]: (a: HotelData, b: HotelData) =>
+      (b.hotelData.ratings?.tripAdvisor.rating ?? 0) -
+      (a.hotelData.ratings?.tripAdvisor.rating ?? 0),
+    [SortOrder.Price]: (a: HotelData, b: HotelData) =>
+      getPricePerNight(a) - getPricePerNight(b),
+    [SortOrder.Distance]: (a: HotelData, b: HotelData) =>
+      a.hotelData.location.distanceToCentre -
+      b.hotelData.location.distanceToCentre,
+  }
+
+  return [...hotels].sort(
+    sortingStrategies[sortBy] ?? sortingStrategies[SortOrder.Distance]
+  )
+}
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
index ed496c4cf..7dbb89171 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
@@ -15,6 +15,7 @@ import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
+import { useScrollToTop } from "@/hooks/useScrollToTop"
 import { debounce } from "@/utils/debounce"
 
 import FilterAndSortModal from "../../FilterAndSortModal"
@@ -41,13 +42,17 @@ export default function SelectHotelContent({
 
   const isAboveMobile = useMediaQuery("(min-width: 768px)")
   const [visibleHotels, setVisibleHotels] = useState<HotelData[]>([])
-  const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
   const [showSkeleton, setShowSkeleton] = useState<boolean>(false)
   const listingContainerRef = useRef<HTMLDivElement | null>(null)
 
   const activeFilters = useHotelFilterStore((state) => state.activeFilters)
   const { activeHotelCard, activeHotelPin } = useHotelsMapStore()
 
+  const { showBackToTop, scrollToTop } = useScrollToTop({
+    threshold: 490,
+    elementRef: listingContainerRef,
+  })
+
   const coordinates = useMemo(
     () =>
       isAboveMobile
@@ -66,28 +71,6 @@ export default function SelectHotelContent({
     }
   }, [activeHotelCard, activeHotelPin])
 
-  useEffect(() => {
-    const hotelListingElement = document.querySelector(
-      `.${styles.listingContainer}`
-    )
-    if (!hotelListingElement) return
-
-    const handleScroll = () => {
-      const hasScrolledPast = hotelListingElement.scrollTop > 490
-      setShowBackToTop(hasScrolledPast)
-    }
-
-    hotelListingElement.addEventListener("scroll", handleScroll)
-    return () => hotelListingElement.removeEventListener("scroll", handleScroll)
-  }, [])
-
-  function scrollToTop() {
-    const hotelListingElement = document.querySelector(
-      `.${styles.listingContainer}`
-    )
-    hotelListingElement?.scrollTo({ top: 0, behavior: "smooth" })
-  }
-
   const filteredHotelPins = useMemo(
     () =>
       hotelPins.filter((hotel) =>
diff --git a/hooks/useScrollToTop.ts b/hooks/useScrollToTop.ts
new file mode 100644
index 000000000..70f306783
--- /dev/null
+++ b/hooks/useScrollToTop.ts
@@ -0,0 +1,33 @@
+import { type  RefObject,useEffect,useState  } from "react"
+
+
+interface UseScrollToTopProps {
+  threshold: number
+  elementRef?: RefObject<HTMLElement>
+}
+
+export function useScrollToTop({ threshold, elementRef }: UseScrollToTopProps) {
+  const [showBackToTop, setShowBackToTop] = useState(false)
+
+  useEffect(() => {
+    const element = elementRef?.current ?? window
+
+    function handleScroll() {
+      const scrollTop = elementRef?.current
+        ? elementRef.current.scrollTop
+        : window.scrollY
+      setShowBackToTop(scrollTop > threshold)
+    }
+
+    element.addEventListener("scroll", handleScroll, { passive: true })
+    return () => element.removeEventListener("scroll", handleScroll)
+  }, [threshold, elementRef])
+
+  function scrollToTop() {
+    if (elementRef?.current)
+      elementRef.current.scrollTo({ top: 0, behavior: "smooth" })
+    else window.scrollTo({ top: 0, behavior: "smooth" })
+  }
+
+  return { showBackToTop, scrollToTop }
+}

From 20cbb4b0a006aa4e6ccc330fd4b04604aae318e4 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Fri, 13 Dec 2024 09:51:35 +0100
Subject: [PATCH 08/21] Fix: Merging issues

---
 .../hotelreservation/(standard)/select-hotel/page.tsx |  2 +-
 .../SelectHotelMap/SelectHotelMapContent/index.tsx    | 11 ++++++-----
 .../selectHotelMapContent.module.css                  |  6 ++++++
 hooks/useScrollToTop.ts                               |  3 +--
 server/routers/hotels/output.ts                       |  6 +++++-
 5 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
index 04439fdf4..821e2d3cb 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
@@ -27,7 +27,7 @@ export default async function SelectHotelPage({
 
   return (
     <Suspense
-      key={`${city.name}-${searchParams.fromDate}-${searchParams.toDate}-${adultsParams}-${childrenParams}`}
+      key={`${city.name}-${searchParams.fromDate}-${searchParams.toDate}-${adultsInRoom}-${childrenInRoom}`}
       fallback={<SelectHotelSkeleton />}
     >
       <SelectHotel
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
index 7dbb89171..a9b72d220 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
@@ -42,7 +42,7 @@ export default function SelectHotelContent({
 
   const isAboveMobile = useMediaQuery("(min-width: 768px)")
   const [visibleHotels, setVisibleHotels] = useState<HotelData[]>([])
-  const [showSkeleton, setShowSkeleton] = useState<boolean>(false)
+  const [showSkeleton, setShowSkeleton] = useState<boolean>(true)
   const listingContainerRef = useRef<HTMLDivElement | null>(null)
 
   const activeFilters = useHotelFilterStore((state) => state.activeFilters)
@@ -85,7 +85,7 @@ export default function SelectHotelContent({
     const visibleHotels = getVisibleHotels(hotels, filteredHotelPins, map)
     setVisibleHotels(visibleHotels)
     setTimeout(() => {
-      setShowSkeleton(true)
+      setShowSkeleton(false)
     }, SKELETON_LOAD_DELAY)
   }, [hotels, filteredHotelPins, map])
 
@@ -99,7 +99,7 @@ export default function SelectHotelContent({
     () =>
       debounce(() => {
         if (!map) return
-        setShowSkeleton(false)
+        setShowSkeleton(true)
         getHotelCards()
       }, 100),
     [map, getHotelCards]
@@ -138,11 +138,12 @@ export default function SelectHotelContent({
           </Button>
           <FilterAndSortModal filters={filterList} />
         </div>
+
         {showSkeleton ? (
-          <>
+          <div className={styles.skeletonContainer}>
             <RoomCardSkeleton />
             <RoomCardSkeleton />
-          </>
+          </div>
         ) : (
           <HotelListing hotels={visibleHotels} />
         )}
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
index 811f94d68..ae6b81191 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
@@ -48,4 +48,10 @@
     padding: 0 0 var(--Spacing-x1);
     position: static;
   }
+
+  .skeletonContainer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--Spacing-x2);
+  }
 }
diff --git a/hooks/useScrollToTop.ts b/hooks/useScrollToTop.ts
index 70f306783..39ff5da0c 100644
--- a/hooks/useScrollToTop.ts
+++ b/hooks/useScrollToTop.ts
@@ -1,5 +1,4 @@
-import { type  RefObject,useEffect,useState  } from "react"
-
+import { type RefObject, useEffect, useState } from "react"
 
 interface UseScrollToTopProps {
   threshold: number
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index 1bffd3543..937506b5d 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -470,7 +470,11 @@ export const hotelAttributesSchema = z.object({
   isPublished: z.boolean(),
   keywords: z.array(z.string()),
   location: locationSchema,
-  merchantInformationData: merchantInformationSchema,
+  merchantInformationData: merchantInformationSchema.default({
+    webMerchantId: "",
+    cards: {},
+    alternatePaymentOptions: {},
+  }),
   name: z.string(),
   operaId: z.string(),
   parking: z.array(parkingSchema),

From 78bf7ef387d3adfbd10aafdb93ebce155401b347 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Fri, 13 Dec 2024 13:57:44 +0100
Subject: [PATCH 09/21] fixed issue where city and hotel is undefined or null

---
 .../hotelreservation/(standard)/select-hotel/map/page.tsx | 5 ++++-
 .../hotelreservation/(standard)/select-hotel/page.tsx     | 5 ++++-
 .../hotelreservation/(standard)/select-rate/page.tsx      | 5 ++++-
 .../(live)/(public)/hotelreservation/(standard)/utils.ts  | 8 ++++----
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
index 2296489ac..34ae44b6f 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
@@ -1,3 +1,4 @@
+import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
 import { SelectHotelMapContainer } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer"
@@ -18,9 +19,11 @@ export default async function SelectHotelMapPage({
 }: PageArgs<LangParams, SelectHotelSearchParams>) {
   setLang(params.lang)
   const searchDetails = await getHotelSearchDetails({ searchParams })
-  if (!searchDetails) return null
+  if (!searchDetails) return notFound()
   const { city, adultsInRoom, childrenInRoom } = searchDetails
 
+  if (!city) return notFound()
+
   return (
     <div className={styles.main}>
       <MapContainer>
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
index 821e2d3cb..2d4aea4af 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
@@ -1,3 +1,4 @@
+import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
 import SelectHotel from "@/components/HotelReservation/SelectHotel"
@@ -15,9 +16,11 @@ export default async function SelectHotelPage({
 }: PageArgs<LangParams, SelectHotelSearchParams>) {
   setLang(params.lang)
   const searchDetails = await getHotelSearchDetails({ searchParams })
-  if (!searchDetails) return null
+  if (!searchDetails) return notFound()
   const { city, urlSearchParams, adultsInRoom, childrenInRoom } = searchDetails
 
+  if (!city) return notFound()
+
   const reservationParams = {
     selectHotelParams: urlSearchParams,
     searchParams,
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 c916ae231..979d370e5 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
@@ -1,3 +1,4 @@
+import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
 import HotelInfoCard from "@/components/HotelReservation/SelectRate/HotelInfoCard"
@@ -17,9 +18,11 @@ export default async function SelectRatePage({
 }: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
   setLang(params.lang)
   const searchDetails = await getHotelSearchDetails({ searchParams })
-  if (!searchDetails) return null
+  if (!searchDetails) return notFound()
   const { hotel, adultsInRoom, childrenInRoomArray } = searchDetails
 
+  if (!hotel) return notFound()
+
   const { fromDate, toDate } = getValidDates(
     searchParams.fromDate,
     searchParams.toDate
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils.ts b/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils.ts
index d2f9271b3..2a0ae8d42 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils.ts
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils.ts
@@ -15,8 +15,8 @@ import type {
 import type { Location } from "@/types/trpc/routers/hotel/locations"
 
 interface HotelSearchDetails {
-  city: Location
-  hotel: Location
+  city: Location | null
+  hotel: Location | null
   urlSearchParams?: URLSearchParams
   adultsInRoom: number
   childrenInRoom?: string
@@ -67,8 +67,8 @@ export async function getHotelSearchDetails({
   }
 
   return {
-    city: city!,
-    hotel: hotel!,
+    city: city ?? null,
+    hotel: hotel ?? null,
     urlSearchParams,
     adultsInRoom,
     childrenInRoom,

From eb2a0a4cb9eb6fb6ab2a39925d2f0333d0a633a4 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Fri, 13 Dec 2024 14:03:13 +0100
Subject: [PATCH 10/21] Fix: Added optional merchantInformationData

---
 .../(public)/hotelreservation/(standard)/step/page.tsx    | 5 +++--
 server/routers/hotels/output.ts                           | 6 +-----
 server/routers/hotels/query.ts                            | 8 ++++++--
 types/components/hotelReservation/selectRate/section.ts   | 5 ++---
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx
index 82feef50c..63ec174a5 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx
@@ -216,10 +216,11 @@ export default async function StepPage({
                     roomPrice={roomPrice}
                     otherPaymentOptions={
                       hotelData.data.attributes.merchantInformationData
-                        .alternatePaymentOptions
+                        ?.alternatePaymentOptions ?? []
                     }
                     supportedCards={
-                      hotelData.data.attributes.merchantInformationData.cards
+                      hotelData.data.attributes.merchantInformationData
+                        ?.cards ?? []
                     }
                     mustBeGuaranteed={mustBeGuaranteed}
                   />
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index 937506b5d..aba2ecbb1 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -470,11 +470,7 @@ export const hotelAttributesSchema = z.object({
   isPublished: z.boolean(),
   keywords: z.array(z.string()),
   location: locationSchema,
-  merchantInformationData: merchantInformationSchema.default({
-    webMerchantId: "",
-    cards: {},
-    alternatePaymentOptions: {},
-  }),
+  merchantInformationData: merchantInformationSchema.optional(),
   name: z.string(),
   operaId: z.string(),
   parking: z.array(parkingSchema),
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 4b40ecc33..155426bc9 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -193,8 +193,12 @@ export const getHotelData = cache(
     const hotelData = validateHotelData.data
 
     if (isCardOnlyPayment) {
-      hotelData.data.attributes.merchantInformationData.alternatePaymentOptions =
-        []
+      const currentData = hotelData.data.attributes.merchantInformationData
+      hotelData.data.attributes.merchantInformationData = {
+        webMerchantId: currentData?.webMerchantId ?? "",
+        cards: currentData?.cards ?? [],
+        alternatePaymentOptions: [],
+      }
     }
     if (hotelData.data.attributes.gallery) {
       const smallerImages = hotelData.data.attributes.gallery.smallerImages
diff --git a/types/components/hotelReservation/selectRate/section.ts b/types/components/hotelReservation/selectRate/section.ts
index 15f50da7c..164222a88 100644
--- a/types/components/hotelReservation/selectRate/section.ts
+++ b/types/components/hotelReservation/selectRate/section.ts
@@ -1,6 +1,5 @@
-import { PaymentMethodEnum } from "@/constants/booking"
-
-import { CreditCard, SafeUser } from "@/types/user"
+import type { CreditCard, SafeUser } from "@/types/user"
+import type { PaymentMethodEnum } from "@/constants/booking"
 
 export interface SectionProps {
   nextPath: string

From be33837b5592d3fcf1edaf911440267ea956a9e2 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Fri, 13 Dec 2024 14:11:33 +0100
Subject: [PATCH 11/21] fix: update merchantInformationData query

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

diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 155426bc9..415677035 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -193,11 +193,9 @@ export const getHotelData = cache(
     const hotelData = validateHotelData.data
 
     if (isCardOnlyPayment) {
-      const currentData = hotelData.data.attributes.merchantInformationData
-      hotelData.data.attributes.merchantInformationData = {
-        webMerchantId: currentData?.webMerchantId ?? "",
-        cards: currentData?.cards ?? [],
-        alternatePaymentOptions: [],
+      if (hotelData.data.attributes.merchantInformationData) {
+        hotelData.data.attributes.merchantInformationData.alternatePaymentOptions =
+          []
       }
     }
     if (hotelData.data.attributes.gallery) {

From 07a7dc93666ba2d4f939aedc310cd819c56bb231 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Fri, 13 Dec 2024 14:36:13 +0100
Subject: [PATCH 12/21] Reveret merchantInformationData fix

---
 .../(public)/hotelreservation/(standard)/step/page.tsx      | 5 ++---
 server/routers/hotels/output.ts                             | 2 +-
 server/routers/hotels/query.ts                              | 6 ++----
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx
index 63ec174a5..82feef50c 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx
@@ -216,11 +216,10 @@ export default async function StepPage({
                     roomPrice={roomPrice}
                     otherPaymentOptions={
                       hotelData.data.attributes.merchantInformationData
-                        ?.alternatePaymentOptions ?? []
+                        .alternatePaymentOptions
                     }
                     supportedCards={
-                      hotelData.data.attributes.merchantInformationData
-                        ?.cards ?? []
+                      hotelData.data.attributes.merchantInformationData.cards
                     }
                     mustBeGuaranteed={mustBeGuaranteed}
                   />
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index aba2ecbb1..1bffd3543 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -470,7 +470,7 @@ export const hotelAttributesSchema = z.object({
   isPublished: z.boolean(),
   keywords: z.array(z.string()),
   location: locationSchema,
-  merchantInformationData: merchantInformationSchema.optional(),
+  merchantInformationData: merchantInformationSchema,
   name: z.string(),
   operaId: z.string(),
   parking: z.array(parkingSchema),
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 415677035..4b40ecc33 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -193,10 +193,8 @@ export const getHotelData = cache(
     const hotelData = validateHotelData.data
 
     if (isCardOnlyPayment) {
-      if (hotelData.data.attributes.merchantInformationData) {
-        hotelData.data.attributes.merchantInformationData.alternatePaymentOptions =
-          []
-      }
+      hotelData.data.attributes.merchantInformationData.alternatePaymentOptions =
+        []
     }
     if (hotelData.data.attributes.gallery) {
       const smallerImages = hotelData.data.attributes.gallery.smallerImages

From 457f2b942d1ad526dfb575d8ff995eeb8ee8bde4 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 11 Dec 2024 09:32:42 +0100
Subject: [PATCH 13/21] feat(LOY-64): add ActiveRedeemedBadge UI for on site
 tier rewards

---
 .../Rewards/CurrentRewards/Client.tsx         |  3 +-
 .../Rewards/CurrentRewards/Redeem.tsx         | 82 ++++++++++++++++---
 .../Rewards/CurrentRewards/current.module.css | 14 ++++
 .../Rewards/CurrentRewards/index.tsx          |  7 +-
 i18n/dictionaries/da.json                     |  1 +
 i18n/dictionaries/de.json                     |  1 +
 i18n/dictionaries/en.json                     |  1 +
 i18n/dictionaries/fi.json                     |  1 +
 i18n/dictionaries/no.json                     |  1 +
 i18n/dictionaries/sv.json                     |  1 +
 server/routers/contentstack/reward/output.ts  | 12 ++-
 server/routers/contentstack/reward/query.ts   | 18 ++--
 .../components/myPages/myPage/accountPage.ts  |  2 +
 types/enums/rewards.ts                        | 46 ++++++-----
 utils/rewards.ts                              | 38 +++++++++
 15 files changed, 184 insertions(+), 44 deletions(-)

diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx
index 761682e83..ac42942e0 100644
--- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx
+++ b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx
@@ -17,6 +17,7 @@ export default function ClientCurrentRewards({
   rewards,
   pageSize,
   showRedeem,
+  memberId,
 }: CurrentRewardsClientProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const [currentPage, setCurrentPage] = useState(1)
@@ -55,7 +56,7 @@ export default function ClientCurrentRewards({
             </div>
             {showRedeem && "redeem_description" in reward && (
               <div className={styles.btnContainer}>
-                <Redeem reward={reward} />
+                <Redeem reward={reward} memberId={memberId} />
               </div>
             )}
           </article>
diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx
index 5686ad8a0..734ee56f5 100644
--- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx
+++ b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { motion } from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion"
 import { useState } from "react"
 import {
   Dialog,
@@ -11,6 +11,7 @@ import {
 import { useIntl } from "react-intl"
 
 import { trpc } from "@/lib/trpc/client"
+import { Reward } from "@/server/routers/contentstack/reward/output"
 
 import Countdown from "@/components/Countdown"
 import { CheckCircleIcon, CloseLargeIcon } from "@/components/Icons"
@@ -18,6 +19,7 @@ import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { isRestaurantOnSiteTierReward } from "@/utils/rewards"
 
 import { RewardIcon } from "../RewardIcon"
 
@@ -32,7 +34,7 @@ import type {
 const MotionOverlay = motion(ModalOverlay)
 const MotionModal = motion(Modal)
 
-export default function Redeem({ reward }: RedeemProps) {
+export default function Redeem({ reward, memberId }: RedeemProps) {
   const [animation, setAnimation] = useState<RedeemModalState>("unmounted")
   const intl = useIntl()
   const update = trpc.contentstack.rewards.redeem.useMutation()
@@ -100,17 +102,7 @@ export default function Redeem({ reward }: RedeemProps) {
                 </header>
                 <div className={styles.modalContent}>
                   {redeemStep === "redeemed" && (
-                    <div className={styles.badge}>
-                      <div className={styles.redeemed}>
-                        <CheckCircleIcon color="uiSemanticSuccess" />
-                        <Caption>
-                          {intl.formatMessage({
-                            id: "Redeemed & valid through:",
-                          })}
-                        </Caption>
-                      </div>
-                      <Countdown />
-                    </div>
+                    <ConfirmationBadge reward={reward} />
                   )}
                   <RewardIcon rewardId={reward.reward_id} />
                   <Title level="h3" textAlign="center" textTransform="regular">
@@ -127,6 +119,18 @@ export default function Redeem({ reward }: RedeemProps) {
                         {reward.redeem_description}
                       </Body>
                     )}
+                  {redeemStep === "redeemed" &&
+                    isRestaurantOnSiteTierReward(reward) && (
+                      <div className={styles.memberIdBadge}>
+                        <Caption
+                          textTransform="uppercase"
+                          textAlign="center"
+                          color="uiTextHighContrast"
+                        >
+                          {intl.formatMessage({ id: "Member ID:" })} {memberId}
+                        </Caption>
+                      </div>
+                    )}
                 </div>
                 {redeemStep === "initial" && (
                   <footer className={styles.modalFooter}>
@@ -189,3 +193,55 @@ const variants = {
     },
   },
 }
+
+function ConfirmationBadge({ reward }: { reward: Reward }) {
+  return (
+    <div className={styles.badge}>
+      {isRestaurantOnSiteTierReward(reward) ? (
+        <ActiveRedeemedBadge />
+      ) : (
+        <TimedRedeemedBadge />
+      )}
+    </div>
+  )
+}
+
+function ActiveRedeemedBadge() {
+  const intl = useIntl()
+
+  return (
+    <div className={styles.redeemed}>
+      <motion.div
+        animate={{
+          opacity: [1, 0.4, 1],
+        }}
+        transition={{
+          duration: 2,
+          repeat: Infinity,
+          ease: "easeInOut",
+        }}
+      >
+        <CheckCircleIcon color="uiSemanticSuccess" />
+      </motion.div>
+      <Caption>{intl.formatMessage({ id: "Active" })}</Caption>
+    </div>
+  )
+}
+
+function TimedRedeemedBadge() {
+  const intl = useIntl()
+
+  return (
+    <>
+      <div className={styles.redeemed}>
+        <CheckCircleIcon color="uiSemanticSuccess" />
+        <Caption>
+          {intl.formatMessage({
+            id: "Redeemed & valid through:",
+          })}
+        </Caption>
+      </div>
+      <Countdown />
+    </>
+  )
+}
diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css b/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css
index 5c70c1022..4ce8508e8 100644
--- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css
+++ b/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css
@@ -36,6 +36,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  min-height: 48px;
 }
 
 .redeemed {
@@ -129,4 +130,17 @@
   height: var(--button-height);
   display: flex;
   align-items: center;
+}
+
+.active {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+  color: var(--UI-Semantic-Success);
+}
+
+.memberIdBadge {
+  border-radius: var(--Small);
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  background: var(--Base-Surface-Secondary-light-Normal);
 }
\ No newline at end of file
diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx b/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx
index 8dd47b612..b78d940fc 100644
--- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx
+++ b/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx
@@ -1,4 +1,5 @@
 import { env } from "@/env/server"
+import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
@@ -14,7 +15,10 @@ export default async function CurrentRewardsBlock({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const rewardsResponse = await serverClient().contentstack.rewards.current()
+  const [rewardsResponse, membershipLevel] = await Promise.all([
+    serverClient().contentstack.rewards.current(),
+    getMembershipLevel(),
+  ])
 
   if (!rewardsResponse?.rewards.length) {
     return null
@@ -27,6 +31,7 @@ export default async function CurrentRewardsBlock({
         rewards={rewardsResponse.rewards}
         pageSize={6}
         showRedeem={env.USE_NEW_REWARDS_ENDPOINT && env.USE_NEW_REWARD_MODEL}
+        memberId={membershipLevel?.membershipNumber}
       />
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index ab139c66b..6021dd963 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -13,6 +13,7 @@
   "Accept new price": "Accepter ny pris",
   "Accessibility": "Tilgængelighed",
   "Accessible Room": "Tilgængelighedsrum",
+  "Active": "Aktiv",
   "Activities": "Aktiviteter",
   "Add Room": "Tilføj værelse",
   "Add code": "Tilføj kode",
diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json
index fad304104..a7d4bec54 100644
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -13,6 +13,7 @@
   "Accept new price": "Neuen Preis akzeptieren",
   "Accessibility": "Zugänglichkeit",
   "Accessible Room": "Barrierefreies Zimmer",
+  "Active": "Aktiv",
   "Activities": "Aktivitäten",
   "Add Room": "Zimmer hinzufügen",
   "Add code": "Code hinzufügen",
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index b04236e5d..4aa97e93d 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -13,6 +13,7 @@
   "Accept new price": "Accept new price",
   "Accessibility": "Accessibility",
   "Accessible Room": "Accessibility room",
+  "Active": "Active",
   "Activities": "Activities",
   "Add Room": "Add room",
   "Add code": "Add code",
diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json
index 0b5230cf9..e96377e7c 100644
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -13,6 +13,7 @@
   "Accept new price": "Hyväksy uusi hinta",
   "Accessibility": "Saavutettavuus",
   "Accessible Room": "Esteetön huone",
+  "Active": "Aktiivinen",
   "Activities": "Aktiviteetit",
   "Add Room": "Lisää huone",
   "Add code": "Lisää koodi",
diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json
index 2ad4b66b0..0c71eb088 100644
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -13,6 +13,7 @@
   "Accept new price": "Aksepterer ny pris",
   "Accessibility": "Tilgjengelighet",
   "Accessible Room": "Tilgjengelighetsrom",
+  "Active": "Aktiv",
   "Activities": "Aktiviteter",
   "Add Room": "Legg til rom",
   "Add code": "Legg til kode",
diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json
index 540211cdb..6863d28c7 100644
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -13,6 +13,7 @@
   "Accept new price": "Accepter ny pris",
   "Accessibility": "Tillgänglighet",
   "Accessible Room": "Tillgänglighetsrum",
+  "Active": "Aktiv",
   "Activities": "Aktiviteter",
   "Add Room": "Lägg till rum",
   "Add code": "Lägg till kod",
diff --git a/server/routers/contentstack/reward/output.ts b/server/routers/contentstack/reward/output.ts
index 05547ca00..f3a38b11b 100644
--- a/server/routers/contentstack/reward/output.ts
+++ b/server/routers/contentstack/reward/output.ts
@@ -161,10 +161,14 @@ export type CMSRewardWithRedeem = z.output<
 
 export type Reward = CMSReward & {
   id: string | undefined
+  rewardType: string | undefined
+  redeemLocation: string | undefined
 }
 
 export type RewardWithRedeem = CMSRewardWithRedeem & {
   id: string | undefined
+  rewardType: string | undefined
+  redeemLocation: string | undefined
 }
 
 // New endpoint related types and schemas.
@@ -172,10 +176,11 @@ export type RewardWithRedeem = CMSRewardWithRedeem & {
 const BenefitReward = z.object({
   title: z.string().optional(),
   id: z.string().optional(),
-  status: z.string().optional(),
+  redeemLocation: z.string().optional(),
   rewardId: z.string().optional(),
   rewardType: z.string().optional(),
   rewardTierLevel: z.string().optional(),
+  status: z.string().optional(),
 })
 
 const CouponState = z.enum(["claimed", "redeemed", "viewed"])
@@ -191,6 +196,7 @@ const CouponReward = z.object({
   id: z.string().optional(),
   rewardId: z.string().optional(),
   rewardType: z.string().optional(),
+  redeemLocation: z.string().optional(),
   status: z.string().optional(),
   coupon: z.array(CouponData).optional(),
 })
@@ -224,3 +230,7 @@ export const validateApiAllTiersSchema = z.record(
   }),
   z.array(BenefitReward)
 )
+
+export type RedeemLocation = "Non-redeemable" | "On-site" | "Online"
+
+export type RewardType = "Tier" | "Member-voucher" | "Surprise" | "Campaign"
diff --git a/server/routers/contentstack/reward/query.ts b/server/routers/contentstack/reward/query.ts
index 6f62241e2..9bb1b1daf 100644
--- a/server/routers/contentstack/reward/query.ts
+++ b/server/routers/contentstack/reward/query.ts
@@ -245,13 +245,17 @@ export const rewardQueryRouter = router({
       .map(({ rewardId }) => rewardId)
 
     const rewards = cmsRewards
-      .filter((reward) => !wrappedSurprisesIds.includes(reward.reward_id))
-      .map((reward) => {
+      .filter((cmsReward) => !wrappedSurprisesIds.includes(cmsReward.reward_id))
+      .map((cmsReward) => {
+        const apiReward = validatedApiRewards.data.find(
+          ({ rewardId }) => rewardId === cmsReward.reward_id
+        )
+
         return {
-          ...reward,
-          id: validatedApiRewards.data.find(
-            ({ rewardId }) => rewardId === reward.reward_id
-          )?.id,
+          ...cmsReward,
+          id: apiReward?.id,
+          rewardType: apiReward?.rewardType,
+          redeemLocation: apiReward?.redeemLocation,
         }
       })
 
@@ -364,6 +368,8 @@ export const rewardQueryRouter = router({
         return {
           ...reward,
           id: surprise.id,
+          rewardType: surprise.rewardType,
+          redeemLocation: surprise.redeemLocation,
           coupons: "coupon" in surprise ? surprise.coupon || [] : [],
         }
       })
diff --git a/types/components/myPages/myPage/accountPage.ts b/types/components/myPages/myPage/accountPage.ts
index 3725d1505..c1992b187 100644
--- a/types/components/myPages/myPage/accountPage.ts
+++ b/types/components/myPages/myPage/accountPage.ts
@@ -27,10 +27,12 @@ export interface CurrentRewardsClientProps {
   rewards: (Reward | RewardWithRedeem)[]
   pageSize: number
   showRedeem: boolean
+  memberId?: string | null
 }
 
 export interface RedeemProps {
   reward: RewardWithRedeem
+  memberId?: string | null
 }
 
 export type RedeemModalState = "unmounted" | "hidden" | "visible"
diff --git a/types/enums/rewards.ts b/types/enums/rewards.ts
index 0daf4afed..4de125a3f 100644
--- a/types/enums/rewards.ts
+++ b/types/enums/rewards.ts
@@ -1,31 +1,33 @@
-export enum RewardId {
+export const RewardId = {
   // Food & Beverage
-  TenPercentFood = "tier_10_percent_food_tier",
-  TwoForOneBreakfast = "tier_2_for_one_breakfast",
-  FifteenPercentFood = "tier_15_percent_food",
-  FreeKidsDrink = "tier_free_kids_drink",
-  FreeBreakfast = "tier_free_breakfast",
+  TenPercentFood: "tier_10_percent_food_tier",
+  TwoForOneBreakfast: "tier_2_for_one_breakfast",
+  FifteenPercentFood: "tier_15_percent_food",
+  FreeKidsDrink: "tier_free_kids_drink",
+  FreeBreakfast: "tier_free_breakfast",
 
   // Monetary Vouchers
-  Bonus50SEK = "tier_50_SEK_bonus_voucher",
-  Bonus75SEK = "tier_75_SEK_bonus_voucher",
-  Bonus100SEK = "tier_100_SEK_bonus_voucher",
-  Bonus150SEK = "tier_150_SEK_bonus_voucher",
-  Bonus200SEK = "tier_200_SEK_bonus_voucher",
+  Bonus50SEK: "tier_50_SEK_bonus_voucher",
+  Bonus75SEK: "tier_75_SEK_bonus_voucher",
+  Bonus100SEK: "tier_100_SEK_bonus_voucher",
+  Bonus150SEK: "tier_150_SEK_bonus_voucher",
+  Bonus200SEK: "tier_200_SEK_bonus_voucher",
 
   // Hotel Perks
-  EarlyCheckin = "tier_early_checkin_tier",
-  LateCheckout = "tier_late_checkout",
-  FreeUpgrade = "tier_free_upgrade",
-  RoomGuarantee48H = "tier_48_h_room_guarantee",
-  // GymAccess = "tier_gym_access",
+  EarlyCheckin: "tier_early_checkin_tier",
+  LateCheckout: "tier_late_checkout",
+  FreeUpgrade: "tier_free_upgrade",
+  RoomGuarantee48H: "tier_48_h_room_guarantee",
+  // GymAccess: "tier_gym_access",
 
   // Earning & Points
-  EarnRate25Percent = "tier_25_percent_earn_rate",
-  EarnRate50Percent = "tier_50_percent_earn_rate",
-  StayBoostForKids = "tier_stay_boost_for_kids",
-  MemberRate = "tier_member_rate",
+  EarnRate25Percent: "tier_25_percent_earn_rate",
+  EarnRate50Percent: "tier_50_percent_earn_rate",
+  StayBoostForKids: "tier_stay_boost_for_kids",
+  MemberRate: "tier_member_rate",
 
   // Special
-  YearlyExclusiveGift = "tier_yearly_exclusive_gift",
-}
+  YearlyExclusiveGift: "tier_yearly_exclusive_gift",
+} as const
+
+export type RewardId = (typeof RewardId)[keyof typeof RewardId]
\ No newline at end of file
diff --git a/utils/rewards.ts b/utils/rewards.ts
index 9bf5940a5..0825989f6 100644
--- a/utils/rewards.ts
+++ b/utils/rewards.ts
@@ -1,5 +1,43 @@
 import { RewardId } from "@/types/enums/rewards"
+import type { Reward } from "@/server/routers/contentstack/reward/output"
 
 export function isValidRewardId(id: string): id is RewardId {
   return Object.values<string>(RewardId).includes(id)
 }
+
+export const RESTAURANT_REWARD_IDS = [
+  RewardId.TenPercentFood,
+  RewardId.TwoForOneBreakfast,
+  RewardId.FifteenPercentFood,
+  RewardId.FreeKidsDrink,
+  RewardId.FreeBreakfast,
+] as const
+
+export type RestaurantRewardId = (typeof RESTAURANT_REWARD_IDS)[number]
+
+export function isRestaurantReward(
+  rewardId: string
+): rewardId is RestaurantRewardId {
+  return RESTAURANT_REWARD_IDS.some((id) => id === rewardId)
+}
+
+export function redeemLocationIsOnSite(
+  location: Reward["redeemLocation"]
+): location is "On-site" {
+  return location === "On-site"
+}
+
+export function isTierType(type: Reward["rewardType"]): type is "Tier" {
+  return type === "Tier"
+}
+
+export function isOnSiteTierReward(reward: Reward): boolean {
+  return (
+    redeemLocationIsOnSite(reward.redeemLocation) &&
+    isTierType(reward.rewardType)
+  )
+}
+
+export function isRestaurantOnSiteTierReward(reward: Reward): boolean {
+  return isOnSiteTierReward(reward) && isRestaurantReward(reward.reward_id)
+}
\ No newline at end of file

From 87ff783c87641c5ec2f3b8d2fa4d371982a4a763 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 11 Dec 2024 09:39:46 +0100
Subject: [PATCH 14/21] fix(LOY-64): remove uneeded css

---
 .../DynamicContent/Rewards/CurrentRewards/current.module.css     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css b/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css
index 4ce8508e8..e15dc6e13 100644
--- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css
+++ b/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css
@@ -36,7 +36,6 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  min-height: 48px;
 }
 
 .redeemed {

From c33f12533250b6f63440015f4b36d54180cbd545 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 11 Dec 2024 11:17:55 +0100
Subject: [PATCH 15/21] chore(LOY-64): better organisation of reward types and
 data

---
 .../DynamicContent/Rewards/RewardIcon/data.ts | 46 ++++++++++---------
 {types/enums => constants}/rewards.ts         | 10 +++-
 types/components/myPages/rewards.ts           |  6 +++
 utils/rewards.ts                              | 21 ++++-----
 4 files changed, 46 insertions(+), 37 deletions(-)
 rename {types/enums => constants}/rewards.ts (81%)

diff --git a/components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts b/components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts
index fcb388b64..e62c8cc1b 100644
--- a/components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts
+++ b/components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts
@@ -1,53 +1,55 @@
+import type { FC } from "react"
+
+import { REWARD_IDS } from "@/constants/rewards"
+
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 import { isValidRewardId } from "@/utils/rewards"
 
-import type { FC } from "react"
-
 import { IconName, type IconProps } from "@/types/components/icon"
-import { RewardId } from "@/types/enums/rewards"
+import type { RewardId } from "@/types/components/myPages/rewards"
 
 function getIconForRewardId(rewardId: RewardId): IconName {
   switch (rewardId) {
     // Food & beverage
-    case RewardId.TenPercentFood:
-    case RewardId.FifteenPercentFood:
+    case REWARD_IDS.TenPercentFood:
+    case REWARD_IDS.FifteenPercentFood:
       return IconName.CroissantCoffeeEgg
-    case RewardId.TwoForOneBreakfast:
+    case REWARD_IDS.TwoForOneBreakfast:
       return IconName.CutleryTwo
-    case RewardId.FreeBreakfast:
+    case REWARD_IDS.FreeBreakfast:
       return IconName.CutleryOne
-    case RewardId.FreeKidsDrink:
+    case REWARD_IDS.FreeKidsDrink:
       return IconName.KidsMocktail
 
     // Monetary vouchers
-    case RewardId.Bonus50SEK:
-    case RewardId.Bonus75SEK:
-    case RewardId.Bonus100SEK:
-    case RewardId.Bonus150SEK:
-    case RewardId.Bonus200SEK:
+    case REWARD_IDS.Bonus50SEK:
+    case REWARD_IDS.Bonus75SEK:
+    case REWARD_IDS.Bonus100SEK:
+    case REWARD_IDS.Bonus150SEK:
+    case REWARD_IDS.Bonus200SEK:
       return IconName.Voucher
 
     // Hotel perks
-    case RewardId.EarlyCheckin:
+    case REWARD_IDS.EarlyCheckin:
       return IconName.HandKey
-    case RewardId.LateCheckout:
+    case REWARD_IDS.LateCheckout:
       return IconName.HotelNight
-    case RewardId.FreeUpgrade:
+    case REWARD_IDS.FreeUpgrade:
       return IconName.MagicWand
-    case RewardId.RoomGuarantee48H:
+    case REWARD_IDS.RoomGuarantee48H:
       return IconName.Bed
 
     // Earnings
-    case RewardId.EarnRate25Percent:
-    case RewardId.EarnRate50Percent:
+    case REWARD_IDS.EarnRate25Percent:
+    case REWARD_IDS.EarnRate50Percent:
       return IconName.MoneyHand
-    case RewardId.StayBoostForKids:
+    case REWARD_IDS.StayBoostForKids:
       return IconName.Kids
-    case RewardId.MemberRate:
+    case REWARD_IDS.MemberRate:
       return IconName.Coin
 
     // Special
-    case RewardId.YearlyExclusiveGift:
+    case REWARD_IDS.YearlyExclusiveGift:
       return IconName.GiftOpen
 
     default: {
diff --git a/types/enums/rewards.ts b/constants/rewards.ts
similarity index 81%
rename from types/enums/rewards.ts
rename to constants/rewards.ts
index 4de125a3f..56a743ca4 100644
--- a/types/enums/rewards.ts
+++ b/constants/rewards.ts
@@ -1,4 +1,4 @@
-export const RewardId = {
+export const REWARD_IDS = {
   // Food & Beverage
   TenPercentFood: "tier_10_percent_food_tier",
   TwoForOneBreakfast: "tier_2_for_one_breakfast",
@@ -30,4 +30,10 @@ export const RewardId = {
   YearlyExclusiveGift: "tier_yearly_exclusive_gift",
 } as const
 
-export type RewardId = (typeof RewardId)[keyof typeof RewardId]
\ No newline at end of file
+export const RESTAURANT_REWARD_IDS = [
+  REWARD_IDS.TenPercentFood,
+  REWARD_IDS.TwoForOneBreakfast,
+  REWARD_IDS.FifteenPercentFood,
+  REWARD_IDS.FreeKidsDrink,
+  REWARD_IDS.FreeBreakfast,
+] as const
diff --git a/types/components/myPages/rewards.ts b/types/components/myPages/rewards.ts
index 0598ca7e8..acef4808a 100644
--- a/types/components/myPages/rewards.ts
+++ b/types/components/myPages/rewards.ts
@@ -1,6 +1,12 @@
+import { RESTAURANT_REWARD_IDS, REWARD_IDS } from "@/constants/rewards"
+
 import type { IconProps } from "@/types/components/icon"
 
 export interface RewardIconProps extends IconProps {
   rewardId: string
   size?: "small" | "medium" | "large"
 }
+
+export type RewardId = (typeof REWARD_IDS)[keyof typeof REWARD_IDS]
+
+export type RestaurantRewardId = (typeof RESTAURANT_REWARD_IDS)[number]
diff --git a/utils/rewards.ts b/utils/rewards.ts
index 0825989f6..272ce3954 100644
--- a/utils/rewards.ts
+++ b/utils/rewards.ts
@@ -1,20 +1,15 @@
-import { RewardId } from "@/types/enums/rewards"
+import { RESTAURANT_REWARD_IDS, REWARD_IDS } from "@/constants/rewards"
+
+import type {
+  RestaurantRewardId,
+  RewardId,
+} from "@/types/components/myPages/rewards"
 import type { Reward } from "@/server/routers/contentstack/reward/output"
 
 export function isValidRewardId(id: string): id is RewardId {
-  return Object.values<string>(RewardId).includes(id)
+  return Object.values<string>(REWARD_IDS).includes(id)
 }
 
-export const RESTAURANT_REWARD_IDS = [
-  RewardId.TenPercentFood,
-  RewardId.TwoForOneBreakfast,
-  RewardId.FifteenPercentFood,
-  RewardId.FreeKidsDrink,
-  RewardId.FreeBreakfast,
-] as const
-
-export type RestaurantRewardId = (typeof RESTAURANT_REWARD_IDS)[number]
-
 export function isRestaurantReward(
   rewardId: string
 ): rewardId is RestaurantRewardId {
@@ -40,4 +35,4 @@ export function isOnSiteTierReward(reward: Reward): boolean {
 
 export function isRestaurantOnSiteTierReward(reward: Reward): boolean {
   return isOnSiteTierReward(reward) && isRestaurantReward(reward.reward_id)
-}
\ No newline at end of file
+}

From aa9e2e0a1b5038adeaf610b2b292e155fc39bf9f Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 11 Dec 2024 11:24:20 +0100
Subject: [PATCH 16/21] chore(LOY-64): remove unused import

---
 .../Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx
index 734ee56f5..d871c0806 100644
--- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx
+++ b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { AnimatePresence, motion } from "framer-motion"
+import { motion } from "framer-motion"
 import { useState } from "react"
 import {
   Dialog,

From 839655d4df2698bcc1bd043538ef499cdbacf2a9 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 11 Dec 2024 11:27:39 +0100
Subject: [PATCH 17/21] fix(LOY-64): use memberId in conditonal

---
 .../Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx
index d871c0806..f113c3901 100644
--- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx
+++ b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx
@@ -120,7 +120,8 @@ export default function Redeem({ reward, memberId }: RedeemProps) {
                       </Body>
                     )}
                   {redeemStep === "redeemed" &&
-                    isRestaurantOnSiteTierReward(reward) && (
+                    isRestaurantOnSiteTierReward(reward) &&
+                    memberId && (
                       <div className={styles.memberIdBadge}>
                         <Caption
                           textTransform="uppercase"

From 9247ea0e9c2e9026432ee1811063862704ff07ca Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Fri, 13 Dec 2024 10:43:36 +0100
Subject: [PATCH 18/21] fix(LOY-64): abstract membershipbadge to its own
 component

---
 .../Rewards/CurrentRewards/Client.tsx         |  4 +-
 .../Rewards/CurrentRewards/Redeem.tsx         | 38 +++++++++++++------
 .../Rewards/CurrentRewards/current.module.css |  4 +-
 .../Rewards/CurrentRewards/index.tsx          |  2 +-
 .../components/myPages/myPage/accountPage.ts  | 13 +++----
 5 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx
index ac42942e0..693b8a409 100644
--- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx
+++ b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx
@@ -17,7 +17,7 @@ export default function ClientCurrentRewards({
   rewards,
   pageSize,
   showRedeem,
-  memberId,
+  membershipNumber,
 }: CurrentRewardsClientProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const [currentPage, setCurrentPage] = useState(1)
@@ -56,7 +56,7 @@ export default function ClientCurrentRewards({
             </div>
             {showRedeem && "redeem_description" in reward && (
               <div className={styles.btnContainer}>
-                <Redeem reward={reward} memberId={memberId} />
+                <Redeem reward={reward} membershipNumber={membershipNumber} />
               </div>
             )}
           </article>
diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx
index f113c3901..8b02f4ea1 100644
--- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx
+++ b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx
@@ -11,7 +11,6 @@ import {
 import { useIntl } from "react-intl"
 
 import { trpc } from "@/lib/trpc/client"
-import { Reward } from "@/server/routers/contentstack/reward/output"
 
 import Countdown from "@/components/Countdown"
 import { CheckCircleIcon, CloseLargeIcon } from "@/components/Icons"
@@ -30,11 +29,12 @@ import type {
   RedeemProps,
   RedeemStep,
 } from "@/types/components/myPages/myPage/accountPage"
+import type { Reward } from "@/server/routers/contentstack/reward/output"
 
 const MotionOverlay = motion(ModalOverlay)
 const MotionModal = motion(Modal)
 
-export default function Redeem({ reward, memberId }: RedeemProps) {
+export default function Redeem({ reward, membershipNumber }: RedeemProps) {
   const [animation, setAnimation] = useState<RedeemModalState>("unmounted")
   const intl = useIntl()
   const update = trpc.contentstack.rewards.redeem.useMutation()
@@ -121,16 +121,10 @@ export default function Redeem({ reward, memberId }: RedeemProps) {
                     )}
                   {redeemStep === "redeemed" &&
                     isRestaurantOnSiteTierReward(reward) &&
-                    memberId && (
-                      <div className={styles.memberIdBadge}>
-                        <Caption
-                          textTransform="uppercase"
-                          textAlign="center"
-                          color="uiTextHighContrast"
-                        >
-                          {intl.formatMessage({ id: "Member ID:" })} {memberId}
-                        </Caption>
-                      </div>
+                    membershipNumber && (
+                      <MemberShipNumberBadge
+                        membershipNumber={membershipNumber}
+                      />
                     )}
                 </div>
                 {redeemStep === "initial" && (
@@ -246,3 +240,23 @@ function TimedRedeemedBadge() {
     </>
   )
 }
+
+function MemberShipNumberBadge({
+  membershipNumber,
+}: {
+  membershipNumber: string
+}) {
+  const intl = useIntl()
+
+  return (
+    <div className={styles.memberShipNumberBadge}>
+      <Caption
+        textTransform="uppercase"
+        textAlign="center"
+        color="uiTextHighContrast"
+      >
+        {intl.formatMessage({ id: "Membership ID:" })} {membershipNumber}
+      </Caption>
+    </div>
+  )
+}
diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css b/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css
index e15dc6e13..d96064ddb 100644
--- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css
+++ b/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css
@@ -138,8 +138,8 @@
   color: var(--UI-Semantic-Success);
 }
 
-.memberIdBadge {
+.memberShipNumberBadge {
   border-radius: var(--Small);
   padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
   background: var(--Base-Surface-Secondary-light-Normal);
-}
\ No newline at end of file
+}
diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx b/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx
index b78d940fc..b957d31c2 100644
--- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx
+++ b/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx
@@ -31,7 +31,7 @@ export default async function CurrentRewardsBlock({
         rewards={rewardsResponse.rewards}
         pageSize={6}
         showRedeem={env.USE_NEW_REWARDS_ENDPOINT && env.USE_NEW_REWARD_MODEL}
-        memberId={membershipLevel?.membershipNumber}
+        membershipNumber={membershipLevel?.membershipNumber}
       />
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>
diff --git a/types/components/myPages/myPage/accountPage.ts b/types/components/myPages/myPage/accountPage.ts
index c1992b187..e5133c758 100644
--- a/types/components/myPages/myPage/accountPage.ts
+++ b/types/components/myPages/myPage/accountPage.ts
@@ -1,13 +1,12 @@
-import { z } from "zod"
+import type { z } from "zod"
 
-import { blocksSchema } from "@/server/routers/contentstack/accountPage/output"
-import {
+import type { DynamicContent } from "@/types/trpc/routers/contentstack/blocks"
+import type { blocksSchema } from "@/server/routers/contentstack/accountPage/output"
+import type {
   Reward,
   RewardWithRedeem,
 } from "@/server/routers/contentstack/reward/output"
 
-import { DynamicContent } from "@/types/trpc/routers/contentstack/blocks"
-
 export interface AccountPageContentProps
   extends Pick<DynamicContent, "dynamic_content"> {}
 
@@ -27,12 +26,12 @@ export interface CurrentRewardsClientProps {
   rewards: (Reward | RewardWithRedeem)[]
   pageSize: number
   showRedeem: boolean
-  memberId?: string | null
+  membershipNumber?: string | null
 }
 
 export interface RedeemProps {
   reward: RewardWithRedeem
-  memberId?: string | null
+  membershipNumber?: string | null
 }
 
 export type RedeemModalState = "unmounted" | "hidden" | "visible"

From 079d8dbf3333a958f4db93c6bc4d77cf6ddb0e91 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Fri, 13 Dec 2024 10:50:13 +0100
Subject: [PATCH 19/21] fix(LOY-64): lint fix

---
 components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts b/components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts
index e62c8cc1b..11aedfc09 100644
--- a/components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts
+++ b/components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts
@@ -1,10 +1,10 @@
-import type { FC } from "react"
-
 import { REWARD_IDS } from "@/constants/rewards"
 
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 import { isValidRewardId } from "@/utils/rewards"
 
+import type { FC } from "react"
+
 import { IconName, type IconProps } from "@/types/components/icon"
 import type { RewardId } from "@/types/components/myPages/rewards"
 

From 9d9084f60dda21883a787ed25db6ccbb4ac5fa9c Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Fri, 13 Dec 2024 10:59:36 +0100
Subject: [PATCH 20/21] fix(LOY-64): memoize getCurrentRewards call

---
 .../DynamicContent/Rewards/CurrentRewards/index.tsx       | 8 +++++---
 lib/trpc/memoizedRequests/index.ts                        | 6 ++++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx b/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx
index b957d31c2..62eff7a54 100644
--- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx
+++ b/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx
@@ -1,6 +1,8 @@
 import { env } from "@/env/server"
-import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
-import { serverClient } from "@/lib/trpc/server"
+import {
+  getCurrentRewards,
+  getMembershipLevel,
+} from "@/lib/trpc/memoizedRequests"
 
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
@@ -16,7 +18,7 @@ export default async function CurrentRewardsBlock({
   link,
 }: AccountPageComponentProps) {
   const [rewardsResponse, membershipLevel] = await Promise.all([
-    serverClient().contentstack.rewards.current(),
+    getCurrentRewards(),
     getMembershipLevel(),
   ])
 
diff --git a/lib/trpc/memoizedRequests/index.ts b/lib/trpc/memoizedRequests/index.ts
index 8a84c6d4a..22d1ac385 100644
--- a/lib/trpc/memoizedRequests/index.ts
+++ b/lib/trpc/memoizedRequests/index.ts
@@ -148,3 +148,9 @@ export const getCityCoordinates = cache(
     return serverClient().hotel.map.city(input)
   }
 )
+
+export const getCurrentRewards = cache(
+  async function getMemoizedCurrentRewards() {
+    return serverClient().contentstack.rewards.current()
+  }
+)

From 01c0d5c35eccf345fddb88e9c5e55ab0554e2222 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Fri, 13 Dec 2024 11:15:27 +0100
Subject: [PATCH 21/21] fix(LOY-64): lowercase s on membershipbadge

---
 .../Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx | 6 +++---
 .../Rewards/CurrentRewards/current.module.css               | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx
index 8b02f4ea1..1c18fea56 100644
--- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx
+++ b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx
@@ -122,7 +122,7 @@ export default function Redeem({ reward, membershipNumber }: RedeemProps) {
                   {redeemStep === "redeemed" &&
                     isRestaurantOnSiteTierReward(reward) &&
                     membershipNumber && (
-                      <MemberShipNumberBadge
+                      <MembershipNumberBadge
                         membershipNumber={membershipNumber}
                       />
                     )}
@@ -241,7 +241,7 @@ function TimedRedeemedBadge() {
   )
 }
 
-function MemberShipNumberBadge({
+function MembershipNumberBadge({
   membershipNumber,
 }: {
   membershipNumber: string
@@ -249,7 +249,7 @@ function MemberShipNumberBadge({
   const intl = useIntl()
 
   return (
-    <div className={styles.memberShipNumberBadge}>
+    <div className={styles.membershipNumberBadge}>
       <Caption
         textTransform="uppercase"
         textAlign="center"
diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css b/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css
index d96064ddb..605e8835b 100644
--- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css
+++ b/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css
@@ -138,7 +138,7 @@
   color: var(--UI-Semantic-Success);
 }
 
-.memberShipNumberBadge {
+.membershipNumberBadge {
   border-radius: var(--Small);
   padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
   background: var(--Base-Surface-Secondary-light-Normal);