Merge remote-tracking branch 'origin' into feature/tracking

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx

@@ -1,17 +1,13 @@
 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,26 +18,13 @@ export default async function SelectHotelMapPage({
   searchParams,
 }: PageArgs<LangParams, SelectHotelSearchParams>) {
   setLang(params.lang)
-  const locations = await getLocations()
+  const searchDetails = await getHotelSearchDetails({ searchParams })
+  if (!searchDetails) return notFound()
+  const { city, adultsInRoom, childrenInRoom, childrenInRoomArray } =
+    searchDetails
 
-  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 child = selectHotelParamsObject.room[0].child // TODO: Handle multiple rooms
-
   return (
     <div className={styles.main}>
       <MapContainer>
@@ -54,7 +37,7 @@ export default async function SelectHotelMapPage({
             searchParams={searchParams}
             adultsInRoom={adultsInRoom}
             childrenInRoom={childrenInRoom}
-            child={child}
+            child={childrenInRoomArray}
           />
         </Suspense>
       </MapContainer>

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx

@@ -1,16 +1,13 @@
 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 {
+import { getHotelReservationQueryParams } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
-  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,46 +16,29 @@ export default async function SelectHotelPage({
   searchParams,
 }: PageArgs<LangParams, SelectHotelSearchParams>) {
   setLang(params.lang)
-  const locations = await getLocations()
+  const searchDetails = await getHotelSearchDetails({ searchParams })
-
+  if (!searchDetails) return notFound()
-  if (!locations || "error" in locations) {
+  const {
-    return null
+    city,
-  }
+    urlSearchParams,
-  const city = locations.data.find(
+    adultsInRoom,
-    (location) =>
+    childrenInRoom,
-      location.name.toLowerCase() === searchParams.city.toLowerCase()
+    childrenInRoomArray,
-  )
+  } = searchDetails
 
   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 child = selectHotelParamsObject.room[0].child // TODO: Handle multiple rooms
-
   const reservationParams = {
-    selectHotelParams,
+    selectHotelParams: urlSearchParams,
     searchParams,
-    adultsParams,
+    adultsInRoom,
-    childrenParams,
+    childrenInRoom,
-    child,
+    childrenInRoomArray,
   }
 
   return (
     <Suspense
-      key={`${city.name}-${searchParams.fromDate}-${searchParams.toDate}-${adultsParams}-${childrenParams}`}
+      key={`${city.name}-${searchParams.fromDate}-${searchParams.toDate}-${adultsInRoom}-${childrenInRoom}`}
       fallback={<SelectHotelSkeleton />}
     >
       <SelectHotel

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx

@@ -2,16 +2,15 @@ import { differenceInCalendarDays, format, isWeekend } from "date-fns"
 import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
-import { getHotelData, getLocations } from "@/lib/trpc/memoizedRequests"
+import { getHotelData } 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 TrackingSDK from "@/components/TrackingSDK"
 import { setLang } from "@/i18n/serverContext"
-import { safeTry } from "@/utils/safeTry"
 
+import { getHotelSearchDetails } from "../utils"
 import { getValidDates } from "./getValidDates"
 
 import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
@@ -28,46 +27,24 @@ export default async function SelectRatePage({
   searchParams,
 }: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
   setLang(params.lang)
+  const searchDetails = await getHotelSearchDetails({ searchParams })
+  if (!searchDetails) return notFound()
+  const { hotel, adultsInRoom, childrenInRoomArray } = searchDetails
 
-  const locations = await getLocations()
+  if (!hotel) return notFound()
-  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) {
+  const hotelData = await getHotelData({
-    return notFound()
+    hotelId: hotel.id,
-  }
+    language: params.lang,
+  })
 
   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 arrivalDate = new Date(searchParams.fromDate)
   const departureDate = new Date(searchParams.toDate)
-  const hotelAttributes = hotelData?.data.attributes
-
-  const roomCategories = hotelData?.included
 
   const pageTrackingData: TrackingSDKPageData = {
     pageId: "select-rate",
@@ -80,26 +57,28 @@ export default async function SelectRatePage({
   }
 
   const hotelsTrackingData: TrackingSDKHotelInfo = {
-    searchTerm: searchParams.city ?? hotelAttributes?.name,
+    searchTerm: searchParams.city ?? hotel?.name,
     arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
     departureDate: format(departureDate, "yyyy-MM-dd"),
-    noOfAdults: adults,
+    noOfAdults: adultsInRoom,
-    noOfChildren: children?.length,
+    noOfChildren: childrenInRoomArray?.length,
-    ageOfChildren: children?.map((c) => c.age).join(","),
+    ageOfChildren: childrenInRoomArray?.map((c) => c.age).join(","),
-    childBedPreference: children?.map((c) => ChildBedMapEnum[c.bed]).join("|"),
+    childBedPreference: childrenInRoomArray
+      ?.map((c) => ChildBedMapEnum[c.bed])
+      .join("|"),
     noOfRooms: 1, // // TODO: Handle multiple rooms
     duration: differenceInCalendarDays(departureDate, arrivalDate),
     leadTime: differenceInCalendarDays(arrivalDate, new Date()),
     searchType: "hotel",
     bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
-    country: hotelAttributes?.address.country,
+    country: hotelData?.data?.attributes.address.country,
-    hotelID: hotelAttributes?.operaId,
+    hotelID: hotel?.id,
-    region: hotelAttributes?.address.city,
+    region: hotelData?.data?.attributes.address.city,
-    availableResults: roomCategories?.length,
+    //availableResults: roomCategories?.length,
     //lowestRoomPrice:
   }
 
-  const hotelId = +searchParams.hotel
+  const hotelId = +hotel.id
 
   return (
     <>
@@ -108,8 +87,8 @@ export default async function SelectRatePage({
         lang={params.lang}
         fromDate={fromDate.toDate()}
         toDate={toDate.toDate()}
-        adultCount={adults}
+        adultCount={adultsInRoom}
-        childArray={children}
+        childArray={childrenInRoomArray}
       />
 
       <Suspense key={hotelId} fallback={<RoomsContainerSkeleton />}>
@@ -118,8 +97,8 @@ export default async function SelectRatePage({
           lang={params.lang}
           fromDate={fromDate.toDate()}
           toDate={toDate.toDate()}
-          adultCount={adults}
+          adultCount={adultsInRoom}
-          childArray={children}
+          childArray={childrenInRoomArray}
         />
       </Suspense>
       <Suspense fallback={null}>

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 | null
+  hotel: Location | null
+  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 ?? null,
+    hotel: hotel ?? null,
+    urlSearchParams,
+    adultsInRoom,
+    childrenInRoom,
+    childrenInRoomArray,
+  }
+}

components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx

@@ -17,6 +17,7 @@ export default function ClientCurrentRewards({
   rewards,
   pageSize,
   showRedeem,
+  membershipNumber,
 }: 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} membershipNumber={membershipNumber} />
               </div>
             )}
           </article>

components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx

@@ -18,6 +18,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"
 
@@ -28,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 }: RedeemProps) {
+export default function Redeem({ reward, membershipNumber }: 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}>
+                    <ConfirmationBadge reward={reward} />
-                      <div className={styles.redeemed}>
-                        <CheckCircleIcon color="uiSemanticSuccess" />
-                        <Caption>
-                          {intl.formatMessage({
-                            id: "Redeemed & valid through:",
-                          })}
-                        </Caption>
-                      </div>
-                      <Countdown />
-                    </div>
                   )}
                   <RewardIcon rewardId={reward.reward_id} />
                   <Title level="h3" textAlign="center" textTransform="regular">
@@ -127,6 +119,13 @@ export default function Redeem({ reward }: RedeemProps) {
                         {reward.redeem_description}
                       </Body>
                     )}
+                  {redeemStep === "redeemed" &&
+                    isRestaurantOnSiteTierReward(reward) &&
+                    membershipNumber && (
+                      <MembershipNumberBadge
+                        membershipNumber={membershipNumber}
+                      />
+                    )}
                 </div>
                 {redeemStep === "initial" && (
                   <footer className={styles.modalFooter}>
@@ -189,3 +188,75 @@ 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 />
+    </>
+  )
+}
+
+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>
+  )
+}

components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css

@@ -130,3 +130,16 @@
   display: flex;
   align-items: center;
 }
+
+.active {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+  color: var(--UI-Semantic-Success);
+}
+
+.membershipNumberBadge {
+  border-radius: var(--Small);
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  background: var(--Base-Surface-Secondary-light-Normal);
+}

components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx

@@ -1,5 +1,8 @@
 import { env } from "@/env/server"
-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"
@@ -14,7 +17,10 @@ export default async function CurrentRewardsBlock({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const rewardsResponse = await serverClient().contentstack.rewards.current()
+  const [rewardsResponse, membershipLevel] = await Promise.all([
+    getCurrentRewards(),
+    getMembershipLevel(),
+  ])
 
   if (!rewardsResponse?.rewards.length) {
     return null
@@ -27,6 +33,7 @@ export default async function CurrentRewardsBlock({
         rewards={rewardsResponse.rewards}
         pageSize={6}
         showRedeem={env.USE_NEW_REWARDS_ENDPOINT && env.USE_NEW_REWARD_MODEL}
+        membershipNumber={membershipLevel?.membershipNumber}
       />
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>

components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts

@@ -1,53 +1,55 @@
+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 REWARD_IDS.TenPercentFood:
-    case RewardId.FifteenPercentFood:
+    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 REWARD_IDS.Bonus50SEK:
-    case RewardId.Bonus75SEK:
+    case REWARD_IDS.Bonus75SEK:
-    case RewardId.Bonus100SEK:
+    case REWARD_IDS.Bonus100SEK:
-    case RewardId.Bonus150SEK:
+    case REWARD_IDS.Bonus150SEK:
-    case RewardId.Bonus200SEK:
+    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 REWARD_IDS.EarnRate25Percent:
-    case RewardId.EarnRate50Percent:
+    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: {

components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx

@@ -218,7 +218,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,

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")
 

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(() => {
+  const sortedHotels = useMemo(
-    switch (sortBy) {
+    () => getSortedHotels({ hotels: hotelData, sortBy }),
-      case SortOrder.Name:
+    [hotelData, sortBy]
-        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 hotels = useMemo(() => {
-    if (activeFilters.length === 0) {
+    if (activeFilters.length === 0) return sortedHotels
-      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 = () => {
+    setResultCount(hotels?.length ?? 0)
-      const hasScrolledPast = window.scrollY > 490
-      setShowBackToTop(hasScrolledPast)
-    }
-
-    window.addEventListener("scroll", handleScroll, { passive: true })
-    return () => window.removeEventListener("scroll", handleScroll)
-  }, [])
-
-  useEffect(() => {
-    setResultCount(hotels ? hotels.length : 0)
   }, [hotels, setResultCount])
 
-  function scrollToTop() {
-    window.scrollTo({ top: 0, behavior: "smooth" })
-  }
-
   return (
     <section className={styles.hotelCards}>
       {hotels?.length ? (

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]
+  )
+}

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>(true)
-  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) =>
@@ -102,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])
 
@@ -116,7 +99,7 @@ export default function SelectHotelContent({
     () =>
       debounce(() => {
         if (!map) return
-        setShowSkeleton(false)
+        setShowSkeleton(true)
         getHotelCards()
       }, 100),
     [map, getHotelCards]
@@ -155,11 +138,12 @@ export default function SelectHotelContent({
           </Button>
           <FilterAndSortModal filters={filterList} />
         </div>
+
         {showSkeleton ? (
-          <>
+          <div className={styles.skeletonContainer}>
             <RoomCardSkeleton />
             <RoomCardSkeleton />
-          </>
+          </div>
         ) : (
           <HotelListing hotels={visibleHotels} />
         )}

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);
+  }
 }

components/HotelReservation/SelectHotel/index.tsx

@@ -47,9 +47,9 @@ export default async function SelectHotel({
   const {
     selectHotelParams,
     searchParams,
-    adultsParams,
+    adultsInRoom,
-    childrenParams,
+    childrenInRoom,
-    child,
+    childrenInRoomArray,
   } = reservationParams
 
   const intl = await getIntl()
@@ -59,8 +59,8 @@ export default async function SelectHotel({
       cityId: city.id,
       roomStayStartDate: searchParams.fromDate,
       roomStayEndDate: searchParams.toDate,
-      adults: adultsParams,
+      adults: adultsInRoom,
-      children: childrenParams?.toString(),
+      children: childrenInRoom,
     })
   )
 
@@ -115,10 +115,12 @@ export default async function SelectHotel({
     searchTerm: searchParams.city,
     arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
     departureDate: format(departureDate, "yyyy-MM-dd"),
-    noOfAdults: adultsParams,
+    noOfAdults: adultsInRoom,
-    noOfChildren: child?.length,
+    noOfChildren: childrenInRoomArray?.length,
-    ageOfChildren: child?.map((c) => c.age).join(","),
+    ageOfChildren: childrenInRoomArray?.map((c) => c.age).join(","),
-    childBedPreference: child?.map((c) => ChildBedMapEnum[c.bed]).join("|"),
+    childBedPreference: childrenInRoomArray
+      ?.map((c) => ChildBedMapEnum[c.bed])
+      .join("|"),
     noOfRooms: 1, // // TODO: Handle multiple rooms
     duration: differenceInCalendarDays(departureDate, arrivalDate),
     leadTime: differenceInCalendarDays(arrivalDate, new Date()),

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>
-
+      {showRequestedPrice && (
-      <div className={styles.priceRow}>
+        <div className={styles.priceRow}>
-        <dt>
+          <dt>
-          <Caption
+            <Caption color="uiTextMediumContrast">
-            color={showRequestedPrice ? "uiTextMediumContrast" : "disabled"}
+              {intl.formatMessage({ id: "Approx." })}
-          >
+            </Caption>
-            {intl.formatMessage({ id: "Approx." })}
+          </dt>
-          </Caption>
+          <dd>
-        </dt>
-        <dd>
-          {showRequestedPrice ? (
             <Caption color="uiTextMediumContrast">
               {totalPublicRequestedPricePerNight}/
               {totalMemberRequestedPricePerNight}{" "}
               {publicRequestedPrice.currency}
             </Caption>
-          ) : (
+          </dd>
-            <Caption color="disabled">- / - EUR</Caption>
+        </div>
-          )}
+      )}
-        </dd>
-      </div>
     </dl>
   )
 }

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>
+          <div className={styles.priceType}>
-          <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
+            <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"

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) => (
+          {roomConfigurations.map((roomConfiguration, index) => (
-            <li key={roomConfiguration.roomTypeCode}>
+            <li
+              key={roomConfiguration.roomTypeCode}
+              ref={(el) => {
+                if (el) roomRefs.current[index] = el
+              }}
+            >
               <RoomCard
                 hotelId={roomsAvailability.hotelId.toString()}
                 hotelType={hotelType}

components/HotelReservation/SelectRate/RoomSelection/utils.ts

@@ -101,3 +101,5 @@ export function createQueryParamsForEnterDetails(
 
   return searchParams
 }
+
+export const rateCardEqualHeightSelector = "rateCardEqualHeight"

constants/rewards.ts

@@ -0,0 +1,39 @@
+export const REWARD_IDS = {
+  // 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",
+
+  // 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",
+
+  // 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",
+
+  // Earning & Points
+  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",
+} as const
+
+export const RESTAURANT_REWARD_IDS = [
+  REWARD_IDS.TenPercentFood,
+  REWARD_IDS.TwoForOneBreakfast,
+  REWARD_IDS.FifteenPercentFood,
+  REWARD_IDS.FreeKidsDrink,
+  REWARD_IDS.FreeBreakfast,
+] as const

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,
+  ])
 }

hooks/useScrollToTop.ts

@@ -0,0 +1,32 @@
+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 }
+}

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",

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",

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",

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",

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",

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",

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()
+  }
+)

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"

server/routers/contentstack/reward/query.ts

@@ -16,9 +16,10 @@ import {
   rewardsUpdateInput,
 } from "./input"
 import {
-type 
+  type Reward,
-  Reward,  validateApiRewardSchema,
+  validateApiRewardSchema,
-  validateCategorizedRewardsSchema} from "./output"
+  validateCategorizedRewardsSchema,
+} from "./output"
 import {
   getAllCachedApiRewards,
   getAllRewardCounter,
@@ -41,7 +42,6 @@ import {
   getUnwrapSurpriseSuccessCounter,
 } from "./utils"
 
-
 const ONE_HOUR = 60 * 60
 
 export const rewardQueryRouter = router({
@@ -245,13 +245,17 @@ export const rewardQueryRouter = router({
       .map(({ rewardId }) => rewardId)
 
     const rewards = cmsRewards
-      .filter((reward) => !wrappedSurprisesIds.includes(reward.reward_id))
+      .filter((cmsReward) => !wrappedSurprisesIds.includes(cmsReward.reward_id))
-      .map((reward) => {
+      .map((cmsReward) => {
+        const apiReward = validatedApiRewards.data.find(
+          ({ rewardId }) => rewardId === cmsReward.reward_id
+        )
+
         return {
-          ...reward,
+          ...cmsReward,
-          id: validatedApiRewards.data.find(
+          id: apiReward?.id,
-            ({ rewardId }) => rewardId === reward.reward_id
+          rewardType: apiReward?.rewardType,
-          )?.id,
+          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 || [] : [],
         }
       })

server/routers/hotels/output.ts

@@ -105,8 +105,18 @@ const hotelContentSchema = z.object({
       imageSizes: imageSizesSchema,
     })
     .default({
-      metaData: { title: "", altText: "", altText_En: "", copyRight: "" },
+      metaData: {
-      imageSizes: { tiny: "", small: "", medium: "", large: "" },
+        title: "default image",
+        altText: "default image",
+        altText_En: "default image",
+        copyRight: "default image",
+      },
+      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(),

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:

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[]
 }

types/components/hotelReservation/selectHotel/selectHotel.ts

@@ -46,10 +46,10 @@ export interface SelectHotelProps {
     lang: Lang
   }
   reservationParams: {
-    selectHotelParams: URLSearchParams
+    selectHotelParams: URLSearchParams | undefined
     searchParams: SelectHotelSearchParams
-    adultsParams: number
+    adultsInRoom: number
-    childrenParams: string | undefined
+    childrenInRoom: string | undefined
-    child: Child[] | undefined
+    childrenInRoomArray: Child[] | undefined
   }
 }

types/components/hotelReservation/selectRate/section.ts

@@ -1,6 +1,5 @@
-import { PaymentMethodEnum } from "@/constants/booking"
+import type { CreditCard, SafeUser } from "@/types/user"
-
+import type { PaymentMethodEnum } from "@/constants/booking"
-import { CreditCard, SafeUser } from "@/types/user"
 
 export interface SectionProps {
   nextPath: string

types/components/myPages/myPage/accountPage.ts

@@ -26,10 +26,12 @@ export interface CurrentRewardsClientProps {
   rewards: (Reward | RewardWithRedeem)[]
   pageSize: number
   showRedeem: boolean
+  membershipNumber?: string | null
 }
 
 export interface RedeemProps {
   reward: RewardWithRedeem
+  membershipNumber?: string | null
 }
 
 export type RedeemModalState = "unmounted" | "hidden" | "visible"

types/components/myPages/rewards.ts

@@ -1,6 +1,11 @@
 import type { IconProps } from "@/types/components/icon"
+import type { RESTAURANT_REWARD_IDS, REWARD_IDS } from "@/constants/rewards"
 
 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]

types/enums/rewards.ts

@@ -1,31 +0,0 @@
-export enum 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",
-
-  // 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",
-
-  // 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",
-
-  // Earning & Points
-  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",
-}

types/stores/enter-details.ts

@@ -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"> &

utils/rewards.ts

@@ -1,5 +1,38 @@
-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 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)
 }