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}