Merged in feat/SW-2113-allow-feature-combinations (pull request #1719)

Feat/SW-2113 allow feature combinations * feat(SW-2113): Refactor features data to be fetched on filter room filter change * feat(SW-2113): added loading state * fix: now clear room selection when applying filter and room doesnt exists. And added room features to mobile summary * fix * fix: add package to price details * feat(SW-2113): added buttons to room filter * fix: active room * fix: remove console log * fix: added form and close handler to room package filter * fix: add restriction so you cannot select pet room with allergy room and vice versa * fix: fixes from review feedback * fix * fix: hide modify button if on nextcoming rooms if no selection is made, and adjust filter logic in togglePackage * fix: forgot to use roomFeatureCodes from input.. * fix: naming Approved-by: Simon.Emanuelsson
2025-04-07 11:36:34 +00:00
parent 8d34e1c8bb
commit e6ae6ff650
31 changed files with 725 additions and 359 deletions
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/PriceDetailsTable/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/PriceDetailsTable/index.tsx
@@ -100,6 +100,10 @@ export default function PriceDetailsTable({
        const isMainRoom = idx === 0
        const getMemberRate = isMainRoom && isMember

+        if (!room) {
+          return null
+        }
+
        let price
        if (
          getMemberRate &&
@@ -130,6 +134,17 @@ export default function PriceDetailsTable({
                  price.localPrice.currency
                )}
              />
+              {room.packages?.map((pkg) => (
+                <Row
+                  key={pkg.code}
+                  label={pkg.description}
+                  value={formatPrice(
+                    intl,
+                    +pkg.localPrice.totalPrice,
+                    pkg.localPrice.currency
+                  )}
+                />
+              ))}
              <Row
                bold
                label={intl.formatMessage({ id: "Room charge" })}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
@@ -56,10 +56,11 @@ export default function Summary({
    return null
  }

-  const memberPrice = getMemberPrice(rooms[0].roomRate)
+  const memberPrice =
+    rooms.length === 1 && rooms[0] ? getMemberPrice(rooms[0].roomRate) : null

-  const containsBookingCodeRate = rooms.find((r) =>
-    isBookingCodeRate(r.roomRate)
+  const containsBookingCodeRate = rooms.find(
+    (r) => r && isBookingCodeRate(r.roomRate)
  )
  const showDiscounted = containsBookingCodeRate || isMember

@@ -93,6 +94,10 @@ export default function Summary({
      </header>
      <Divider color="primaryLightSubtle" />
      {rooms.map((room, idx) => {
+        if (!room) {
+          return null
+        }
+
        const roomNumber = idx + 1
        const adults = room.adults
        const childrenInRoom = room.childrenInRoom
@@ -137,6 +142,8 @@ export default function Summary({
          guestsParts.push(childrenMsg)
        }

+        const roomPackages = room.packages
+
        return (
          <Fragment key={idx}>
            <div
@@ -245,6 +252,21 @@ export default function Summary({
                  </Body>
                </div>
              ) : null}
+              {roomPackages?.map((pkg) => (
+                <div className={styles.entry} key={pkg.code}>
+                  <div>
+                    <Body color="uiTextHighContrast">{pkg.description}</Body>
+                  </div>
+
+                  <Body color="uiTextHighContrast">
+                    {formatPrice(
+                      intl,
+                      pkg.localPrice.price,
+                      pkg.localPrice.currency
+                    )}
+                  </Body>
+                </div>
+              ))}
            </div>
            <Divider color="primaryLightSubtle" />
          </Fragment>
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
@@ -27,14 +27,21 @@ export default function MobileSummary({
  const scrollY = useRef(0)
  const [isSummaryOpen, setIsSummaryOpen] = useState(false)

-  const { booking, bookingRooms, roomsAvailability, rateSummary, vat } =
-    useRatesStore((state) => ({
-      booking: state.booking,
-      bookingRooms: state.booking.rooms,
-      roomsAvailability: state.roomsAvailability,
-      rateSummary: state.rateSummary,
-      vat: state.vat,
-    }))
+  const {
+    booking,
+    bookingRooms,
+    roomsAvailability,
+    rateSummary,
+    vat,
+    packages,
+  } = useRatesStore((state) => ({
+    booking: state.booking,
+    bookingRooms: state.booking.rooms,
+    roomsAvailability: state.roomsAvailability,
+    rateSummary: state.rateSummary,
+    vat: state.vat,
+    packages: state.packages,
+  }))

  function toggleSummaryOpen() {
    setIsSummaryOpen(!isSummaryOpen)
@@ -71,11 +78,11 @@ export default function MobileSummary({
  }

  const rooms = rateSummary.map((room, index) =>
-    mapRate(room, index, bookingRooms)
+    room ? mapRate(room, index, bookingRooms, packages) : null
  )

-  const containsBookingCodeRate = rateSummary.find((r) =>
-    isBookingCodeRate(r.product)
+  const containsBookingCodeRate = rateSummary.find(
+    (r) => r && isBookingCodeRate(r.product)
  )
  const showDiscounted = containsBookingCodeRate || isUserLoggedIn

--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/mapRate.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/mapRate.ts
@@ -3,8 +3,18 @@ import type {
  Room,
 } from "@/types/components/hotelReservation/selectRate/selectRate"
 import { CurrencyEnum } from "@/types/enums/currency"
+import type { Packages } from "@/types/requests/packages"
+
+export function mapRate(
+  room: Rate,
+  index: number,
+  bookingRooms: Room[],
+  packages: NonNullable<Packages>
+) {
+  const roomPackages = room.packages
+    .map((code) => packages.find((pkg) => pkg.code === code))
+    .filter((pkg): pkg is NonNullable<typeof pkg> => Boolean(pkg))

-export function mapRate(room: Rate, index: number, bookingRooms: Room[]) {
  const rate = {
    adults: bookingRooms[index].adults,
    cancellationText: room.product.rateDefinition?.cancellationText ?? "",
@@ -29,6 +39,7 @@ export function mapRate(room: Rate, index: number, bookingRooms: Room[]) {
    },
    roomRate: room.product,
    roomType: room.roomType,
+    packages: roomPackages,
  }

  if ("corporateCheque" in room.product) {
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
@@ -16,16 +16,10 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { formatPrice } from "@/utils/numberFormatting"

 import MobileSummary from "./MobileSummary"
-import {
-  calculateCorporateChequePrice,
-  calculateRedemptionTotalPrice,
-  calculateTotalPrice,
-  calculateVoucherPrice,
-} from "./utils"
+import { getTotalPrice } from "./utils"

 import styles from "./rateSummary.module.css"

-import type { Price } from "@/types/components/hotelReservation/price"
 import type { RateSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary"
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import { RateEnum } from "@/types/enums/rate"
@@ -96,9 +90,10 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
  const summaryPriceText = `${totalNights}, ${totalAdults}${totalChildren}, ${totalRooms}`

  const totalRoomsRequired = bookingRooms.length
-  const isAllRoomsSelected = rateSummary.length === totalRoomsRequired
+  const isAllRoomsSelected =
+    rateSummary.filter((rate) => rate !== null).length === totalRoomsRequired
  const hasMemberRates = rateSummary.some(
-    (room) => "member" in room.product && room.product.member
+    (room) => room && "member" in room.product && room.product.member
  )
  const showMemberDiscountBanner = hasMemberRates && !isUserLoggedIn

@@ -134,12 +129,15 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {

  const isBookingCodeRate = rateSummary.some(
    (rate) =>
+      rate &&
      "public" in rate.product &&
      rate.product.public?.rateType !== RateTypeEnum.Regular
  )
-  const isVoucherRate = rateSummary.some((rate) => "voucher" in rate.product)
+  const isVoucherRate = rateSummary.some(
+    (rate) => rate && "voucher" in rate.product
+  )
  const isCorporateChequeRate = rateSummary.some(
-    (rate) => "corporateCheque" in rate.product
+    (rate) => rate && "corporateCheque" in rate.product
  )
  const showDiscounted =
    isUserLoggedIn ||
@@ -148,37 +146,29 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
    isCorporateChequeRate

  const mainRoomProduct = rateSummary[0]
-  let totalPriceToShow: Price
-  if ("redemption" in mainRoomProduct.product) {
-    // In case of reward night (redemption) only single room booking is supported by business rules
-    totalPriceToShow = calculateRedemptionTotalPrice(
-      mainRoomProduct.product.redemption
-    )
-  } else if ("voucher" in mainRoomProduct.product) {
-    totalPriceToShow = calculateVoucherPrice(rateSummary)
-  } else if ("corporateCheque" in mainRoomProduct.product) {
-    totalPriceToShow = calculateCorporateChequePrice(rateSummary)
-  } else {
-    totalPriceToShow = calculateTotalPrice(
-      rateSummary,
-      isUserLoggedIn,
-      petRoomPackage
-    )
+  const totalPriceToShow = getTotalPrice(
+    mainRoomProduct,
+    rateSummary,
+    isUserLoggedIn,
+    petRoomPackage
+  )
+
+  const rateProduct = rateSummary.find((rate) => rate?.product)?.product
+
+  if (!totalPriceToShow || !rateProduct) {
+    return null
  }

  let mainRoomCurrency = ""
-  if (
-    "member" in mainRoomProduct.product &&
-    mainRoomProduct.product.member?.localPrice
-  ) {
-    mainRoomCurrency = mainRoomProduct.product.member.localPrice.currency
+  if ("member" in rateProduct && rateProduct.member?.localPrice) {
+    mainRoomCurrency = rateProduct.member.localPrice.currency
  }
  if (
    !mainRoomCurrency &&
-    "public" in mainRoomProduct.product &&
-    mainRoomProduct.product.public?.localPrice
+    "public" in rateProduct &&
+    rateProduct.public?.localPrice
  ) {
-    mainRoomCurrency = mainRoomProduct.product.public.localPrice.currency
+    mainRoomCurrency = rateProduct.public.localPrice.currency
  }

  return (
@@ -186,38 +176,56 @@ 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}>
-                {rateSummary.length > 1 ? (
-                  <>
-                    <Subtitle color="uiTextHighContrast">
+            {rateSummary.map((room, index) => {
+              if (!room) {
+                return (
+                  <div key={`unselected-${index}`}>
+                    <Subtitle color="uiTextPlaceholder">
                      {intl.formatMessage(
                        { id: "Room {roomIndex}" },
                        { roomIndex: index + 1 }
                      )}
                    </Subtitle>
-                    <Body color="uiTextMediumContrast">{room.roomType}</Body>
-                    <Caption color="uiTextMediumContrast">
-                      {getRateDetails(room.rate)}
-                    </Caption>
-                  </>
-                ) : (
-                  <>
-                    <Subtitle color="uiTextHighContrast">
-                      {room.roomType}
-                    </Subtitle>
-                    <Body color="uiTextMediumContrast">
-                      {getRateDetails(room.rate)}
+                    <Body color="uiTextPlaceholder">
+                      {intl.formatMessage({ id: "Select room" })}
                    </Body>
-                  </>
-                )}
-              </div>
-            ))}
+                  </div>
+                )
+              }
+
+              return (
+                <div key={index}>
+                  {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(room.rate)}
+                      </Caption>
+                    </>
+                  ) : (
+                    <>
+                      <Subtitle color="uiTextHighContrast">
+                        {room.roomType}
+                      </Subtitle>
+                      <Body color="uiTextMediumContrast">
+                        {getRateDetails(room.rate)}
+                      </Body>
+                    </>
+                  )}
+                </div>
+              )
+            })}
            {/* Render unselected rooms */}
            {Array.from({
              length: totalRoomsRequired - rateSummary.length,
            }).map((_, index) => (
-              <div key={`unselected-${index}`} className={styles.roomSummary}>
+              <div key={`unselected-${index}`}>
                <Subtitle color="uiTextPlaceholder">
                  {intl.formatMessage(
                    { id: "Room {roomIndex}" },
@@ -235,47 +243,45 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
              <div className={styles.promoContainer}>
                <SignupPromoDesktop
                  memberPrice={{
-                    amount: rateSummary.reduce(
-                      (
-                        total,
-                        { features, packages: roomPackages, product }
-                      ) => {
-                        const memberExists =
-                          "member" in product && product.member
-                        const publicExists =
-                          "public" in product && product.public
-                        if (!memberExists) {
-                          if (!publicExists) {
-                            return total
-                          }
-                        }
+                    amount: rateSummary.reduce((total, rate) => {
+                      if (!rate) {
+                        return total
+                      }

-                        const price =
-                          product.member?.localPrice.pricePerStay ||
-                          product.public?.localPrice.pricePerStay
+                      const { features, packages: roomPackages, product } = rate

-                        if (!price) {
+                      const memberExists = "member" in product && product.member
+                      const publicExists = "public" in product && product.public
+                      if (!memberExists) {
+                        if (!publicExists) {
                          return total
                        }
+                      }

-                        const hasSelectedPetRoom = roomPackages.includes(
-                          RoomPackageCodeEnum.PET_ROOM
-                        )
-                        if (!hasSelectedPetRoom) {
-                          return total + price
-                        }
-                        const isPetRoom = features.find(
-                          (feature) =>
-                            feature.code === RoomPackageCodeEnum.PET_ROOM
-                        )
-                        const petRoomPrice =
-                          isPetRoom && petRoomPackage
-                            ? Number(petRoomPackage.localPrice.totalPrice)
-                            : 0
-                        return total + price + petRoomPrice
-                      },
-                      0
-                    ),
+                      const price =
+                        product.member?.localPrice.pricePerStay ||
+                        product.public?.localPrice.pricePerStay
+
+                      if (!price) {
+                        return total
+                      }
+
+                      const hasSelectedPetRoom = roomPackages.includes(
+                        RoomPackageCodeEnum.PET_ROOM
+                      )
+                      if (!hasSelectedPetRoom) {
+                        return total + price
+                      }
+                      const isPetRoom = features.find(
+                        (feature) =>
+                          feature.code === RoomPackageCodeEnum.PET_ROOM
+                      )
+                      const petRoomPrice =
+                        isPetRoom && petRoomPackage
+                          ? Number(petRoomPackage.localPrice.totalPrice)
+                          : 0
+                      return total + price + petRoomPrice
+                    }, 0),
                    currency: mainRoomCurrency,
                  }}
                />
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/utils.ts
@@ -5,6 +5,7 @@ import {
 } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
 import { CurrencyEnum } from "@/types/enums/currency"
+import type { Packages } from "@/types/requests/packages"
 import type { RedemptionProduct } from "@/types/trpc/routers/hotel/roomAvailability"

 export function calculateTotalPrice(
@@ -194,3 +195,32 @@ export function calculateCorporateChequePrice(selectedRateSummary: Rate[]) {
    }
  )
 }
+
+export function getTotalPrice(
+  mainRoomProduct: Rate | null,
+  rateSummary: Array<Rate | null>,
+  isUserLoggedIn: boolean,
+  petRoomPackage: NonNullable<Packages>[number] | undefined
+): Price | null {
+  const summaryArray = rateSummary.filter((rate): rate is Rate => rate !== null)
+
+  if (summaryArray.some((rate) => "corporateCheque" in rate.product)) {
+    return calculateCorporateChequePrice(summaryArray)
+  }
+
+  if (!mainRoomProduct) {
+    return calculateTotalPrice(summaryArray, isUserLoggedIn, petRoomPackage)
+  }
+
+  const { product } = mainRoomProduct
+
+  // In case of reward night (redemption) or voucher only single room booking is supported by business rules
+  if ("redemption" in product) {
+    return calculateRedemptionTotalPrice(product.redemption)
+  }
+  if ("voucher" in product) {
+    return calculateVoucherPrice(summaryArray)
+  }
+
+  return calculateTotalPrice(summaryArray, isUserLoggedIn, petRoomPackage)
+}