Merged in feat/SW-966 (pull request #1361)

feat: show both prices for multiroom room 2-4 on all users Approved-by: Michael Zetterberg
2025-02-25 09:44:21 +00:00
parent 3b63223778 b536c51889
commit 2c72957dc6
12 changed files with 92 additions and 49 deletions
--- a/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
+++ b/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
@@ -102,7 +102,7 @@ export default function Summary({
        const childBedExtraBed = childrenBeds?.get(ChildBedMapEnum.IN_EXTRA_BED)

        const memberPrice = getMemberPrice(room.roomRate)
-        const showMemberPrice = !!(isMember && memberPrice)
+        const showMemberPrice = !!(isMember && memberPrice && roomNumber === 1)

        const adultsMsg = intl.formatMessage(
          { id: "{totalAdults, plural, one {# adult} other {# adults}}" },
--- a/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
@@ -38,6 +38,7 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
    roomsAvailability: state.roomsAvailability,
    searchParams: state.searchParams,
  }))
+
  const intl = useIntl()
  const router = useRouter()
  const params = new URLSearchParams(searchParams)
@@ -130,24 +131,44 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
      <div className={styles.summary}>
        <div className={styles.content}>
          <div className={styles.summaryText}>
-            {rateSummary.map((room, index) => (
-              <div key={index} className={styles.roomSummary}>
-                <Subtitle color="uiTextHighContrast">
-                  {intl.formatMessage(
-                    { id: "Room {roomIndex}" },
-                    { roomIndex: index + 1 }
+            {rateSummary.map((room, index) => {
+              const isMainRoom = index + 1 === 1
+              return (
+                <div key={index} className={styles.roomSummary}>
+                  {rateSummary.length > 1 ? (
+                    <>
+                      <Subtitle color="uiTextHighContrast">
+                        {intl.formatMessage(
+                          { id: "Room {roomIndex}" },
+                          { roomIndex: index + 1 }
+                        )}
+                      </Subtitle>
+                      <Body color="uiTextMediumContrast">{room.roomType}</Body>
+                      <Caption color="uiTextMediumContrast">
+                        {getRateDetails(
+                          isUserLoggedIn && room.member && isMainRoom
+                            ? room.member?.rateCode
+                            : room.public.rateCode
+                        )}
+                      </Caption>
+                    </>
+                  ) : (
+                    <>
+                      <Subtitle color="uiTextHighContrast">
+                        {room.roomType}
+                      </Subtitle>
+                      <Body color="uiTextMediumContrast">
+                        {getRateDetails(
+                          isUserLoggedIn && room.member && isMainRoom
+                            ? room.member?.rateCode
+                            : room.public.rateCode
+                        )}
+                      </Body>
+                    </>
                  )}
-                </Subtitle>
-                <Body color="uiTextMediumContrast">{room.roomType}</Body>
-                <Caption color="uiTextMediumContrast">
-                  {getRateDetails(
-                    isUserLoggedIn && room.member
-                      ? room.member?.rateCode
-                      : room.public.rateCode
-                  )}
-                </Caption>
-              </div>
-            ))}
+                </div>
+              )
+            })}
            {/* Render unselected rooms */}
            {Array.from({
              length: totalRoomsRequired - rateSummary.length,
--- a/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/utils.ts
+++ b/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/utils.ts
@@ -11,9 +11,11 @@ export const calculateTotalPrice = (
  petRoomPackage: RoomPackage | undefined
 ) => {
  return selectedRateSummary.reduce<Price>(
-    (total, room) => {
+    (total, room, idx) => {
      const priceToUse =
-        isUserLoggedIn && room.member ? room.member : room.public
+        isUserLoggedIn && room.member && idx + 1 === 1
+          ? room.member
+          : room.public
      const isPetRoom = room.features.find(
        (feature) => feature.code === RoomPackageCodeEnum.PET_ROOM
      )
--- a/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
@@ -26,6 +26,7 @@ export default function SelectedRoomPanel() {
  }))
  const {
    actions: { modifyRate },
+    isMainRoom,
    roomNr,
    selectedRate,
  } = useRoomContext()
@@ -64,10 +65,10 @@ export default function SelectedRoomPanel() {
    }
  }

-  const rateCode =
-    isUserLoggedIn && selectedRate?.product.productType.member
-      ? selectedRate?.product.productType.member?.rateCode
-      : selectedRate?.product.productType.public.rateCode
+  const rate =
+    isUserLoggedIn && isMainRoom && selectedRate?.product.productType.member
+      ? selectedRate?.product.productType.member
+      : selectedRate?.product.productType.public

  return (
    <div className={styles.selectedRoomPanel}>
@@ -82,11 +83,10 @@ export default function SelectedRoomPanel() {
          {selectedRate?.roomType}
        </Subtitle>
        <Body color="uiTextMediumContrast">
-          {rateCode ? getRateDetails(rateCode) : null}
+          {rate?.rateCode ? getRateDetails(rate.rateCode) : null}
        </Body>
        <Body color="uiTextHighContrast">
-          {selectedRate?.product.productType.public.localPrice.pricePerNight}{" "}
-          {selectedRate?.product.productType.public.localPrice.currency}/
+          {rate?.localPrice.pricePerNight} {rate?.localPrice.currency}/
          {intl.formatMessage({ id: "night" })}
        </Body>
      </div>
--- a/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/PriceList/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/PriceList/index.tsx
@@ -1,4 +1,5 @@
 import { useSearchParams } from "next/navigation"
+import { useSession } from "next-auth/react"
 import { useIntl } from "react-intl"

 import { dt } from "@/lib/dt"
@@ -6,6 +7,8 @@ import { dt } from "@/lib/dt"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { useRoomContext } from "@/contexts/Room"
+import { isValidClientSession } from "@/utils/clientSession"

 import { calculatePricesPerNight } from "./utils"

@@ -14,12 +17,14 @@ import styles from "./priceList.module.css"
 import type { PriceListProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"

 export default function PriceList({
-  isUserLoggedIn,
  publicPrice = {},
  memberPrice = {},
  petRoomPackage,
 }: PriceListProps) {
  const intl = useIntl()
+  const { isMainRoom } = useRoomContext()
+  const { data: session } = useSession()
+  const isUserLoggedIn = isValidClientSession(session)

  const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
    publicPrice
@@ -60,7 +65,7 @@ export default function PriceList({

  return (
    <dl className={styles.priceList}>
-      {isUserLoggedIn ? null : (
+      {isUserLoggedIn && isMainRoom ? null : (
        <div className={styles.priceRow}>
          <dt>
            <Caption
--- a/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/index.tsx
@@ -1,4 +1,5 @@
 "use client"
+import { useSession } from "next-auth/react"
 import { useIntl } from "react-intl"

 import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
@@ -8,6 +9,7 @@ import Label from "@/components/TempDesignSystem/Form/Label"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { useRoomContext } from "@/contexts/Room"
+import { isValidClientSession } from "@/utils/clientSession"

 import PriceTable from "./PriceList"

@@ -18,7 +20,6 @@ import type { FlexibilityOptionProps } from "@/types/components/hotelReservation
 export default function FlexibilityOption({
  features,
  isSelected,
-  isUserLoggedIn,
  paymentTerm,
  priceInformation,
  petRoomPackage,
@@ -28,8 +29,11 @@ export default function FlexibilityOption({
  title,
 }: FlexibilityOptionProps) {
  const intl = useIntl()
+  const { data: session } = useSession()
+  const isUserLoggedIn = isValidClientSession(session)
  const {
    actions: { selectRate },
+    isMainRoom,
  } = useRoomContext()

  function handleSelect() {
@@ -63,15 +67,17 @@ export default function FlexibilityOption({
  }

  const { public: publicPrice, member: memberPrice } = product.productType
+  const rate =
+    isUserLoggedIn && isMainRoom && memberPrice ? memberPrice : publicPrice

  return (
    <label>
      <input
        checked={isSelected}
-        name={`rateCode-${product.productType.public.rateCode}`}
+        name={`rateCode-${rate.rateCode}`}
        onChange={handleSelect}
        type="radio"
-        value={publicPrice?.rateCode}
+        value={rate.rateCode}
      />
      <div className={styles.card}>
        <div className={styles.header}>
@@ -112,10 +118,9 @@ export default function FlexibilityOption({
          </div>
        </div>
        <PriceTable
-          isUserLoggedIn={isUserLoggedIn}
-          publicPrice={publicPrice}
          memberPrice={memberPrice}
          petRoomPackage={petRoomPackage}
+          publicPrice={publicPrice}
        />

        <div className={styles.checkIcon}>
--- a/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/index.tsx
@@ -81,7 +81,7 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
    rateDefinitions: state.roomsAvailability?.rateDefinitions,
    roomCategories: state.roomCategories,
  }))
-  const { selectedPackage, selectedRate } = useRoomContext()
+  const { isMainRoom, selectedPackage, selectedRate } = useRoomContext()

  const classNames = cardVariants({
    availability:
@@ -197,7 +197,7 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
      throw new Error("We should never make it where without rateCodes")
    }

-    const key = isUserLoggedIn ? memberRate : publicRate
+    const key = isUserLoggedIn && isMainRoom ? memberRate : publicRate
    return getRate(key)
  }

@@ -299,7 +299,6 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
                    selectedRate?.roomTypeCode ===
                      roomConfiguration.roomTypeCode
                  }
-                  isUserLoggedIn={isUserLoggedIn}
                  paymentTerm={rate.isFlex ? payLater : payNow}
                  petRoomPackage={petRoomPackageSelected}
                  product={rate.notAvailable ? undefined : product}
--- a/package-lock.json
+++ b/package-lock.json
@@ -11896,7 +11896,6 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "domelementtype": "^2.3.0",
@@ -11911,7 +11910,6 @@
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@@ -11946,7 +11944,6 @@
      "version": "5.0.3",
      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-      "dev": true,
      "license": "BSD-2-Clause",
      "dependencies": {
        "domelementtype": "^2.3.0"
@@ -11963,7 +11960,6 @@
      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
      "license": "BSD-2-Clause",
-      "dev":true,
      "dependencies": {
        "dom-serializer": "^2.0.0",
        "domelementtype": "^2.3.0",
@@ -12189,7 +12185,6 @@
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
      "license": "BSD-2-Clause",
      "engines": {
        "node": ">=0.12"
--- a/providers/RoomProvider.tsx
+++ b/providers/RoomProvider.tsx
@@ -15,6 +15,7 @@ export default function RoomProvider({
  const modifyRate = useRatesStore((state) => state.actions.modifyRate(idx))
  const selectFilter = useRatesStore((state) => state.actions.selectFilter(idx))
  const selectRate = useRatesStore((state) => state.actions.selectRate(idx))
+  const roomNr = idx + 1
  return (
    <RoomContext.Provider
      value={{
@@ -25,7 +26,8 @@ export default function RoomProvider({
          selectRate,
        },
        isActiveRoom: activeRoom === idx,
-        roomNr: idx + 1,
+        isMainRoom: roomNr === 1,
+        roomNr,
      }}
    >
      {children}
--- a/stores/select-rate/index.ts
+++ b/stores/select-rate/index.ts
@@ -109,6 +109,15 @@ export function createRatesStore({
    }
  })

+  let activeRoom = rateSummary.length
+  if (searchParams.has("modifyRateIndex")) {
+    activeRoom = Number(searchParams.get("modifyRateIndex"))
+  } else if (rateSummary.length === booking.rooms.length) {
+    // Since all rooms has selections, all sections should be
+    // closed on load
+    activeRoom = -1
+  }
+
  return create<RatesState>()((set) => ({
    actions: {
      modifyRate(idx) {
@@ -168,17 +177,23 @@ export function createRatesStore({
                roomTypeCode: selectedRate.roomTypeCode,
              }

+              const roomNr = idx + 1
+              const isMemberRate =
+                isUserLoggedIn &&
+                roomNr === 1 &&
+                selectedRate.product.productType.member
              const searchParams = new URLSearchParams(state.searchParams)
              searchParams.set(
                `room[${idx}].counterratecode`,
-                isUserLoggedIn && selectedRate.product.productType.member
+                isMemberRate
                  ? selectedRate.product.productType.public.rateCode
                  : selectedRate.product.productType.member?.rateCode ?? ""
              )
              searchParams.set(
                `room[${idx}].ratecode`,
-                isUserLoggedIn && selectedRate.product.productType.member
-                  ? selectedRate.product.productType.member.rateCode
+                isMemberRate
+                  ? // already checked in isMemberRate
+                    selectedRate.product.productType.member!.rateCode
                  : selectedRate.product.productType.public.rateCode
              )
              searchParams.set(
@@ -202,7 +217,7 @@ export function createRatesStore({
        }
      },
    },
-    activeRoom: rateSummary.length,
+    activeRoom,
    allRooms,
    booking,
    filterOptions,
--- a/types/components/hotelReservation/selectRate/flexibilityOption.ts
+++ b/types/components/hotelReservation/selectRate/flexibilityOption.ts
@@ -16,7 +16,6 @@ export type RoomPriceSchema = z.output<typeof priceSchema>
 export type FlexibilityOptionProps = {
  features: RoomConfiguration["features"]
  isSelected: boolean
-  isUserLoggedIn: boolean
  paymentTerm: string
  petRoomPackage: RoomPackage | undefined
  priceInformation?: Array<string>
@@ -27,7 +26,6 @@ export type FlexibilityOptionProps = {
 }

 export interface PriceListProps {
-  isUserLoggedIn: boolean
  publicPrice?: ProductPrice | Record<string, never>
  memberPrice?: ProductPrice | Record<string, never>
  petRoomPackage?: RoomPackage
--- a/types/contexts/room.ts
+++ b/types/contexts/room.ts
@@ -8,5 +8,6 @@ export interface RoomContextValue extends SelectedRoom {
    selectRate: (rate: SelectedRate) => void
  }
  isActiveRoom: boolean
+  isMainRoom: boolean
  roomNr: number
 }