feat: add multiroom tracking to booking flow

2025-03-05 11:53:05 +01:00
parent 540402b969
commit 1812591903
72 changed files with 2277 additions and 1308 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
@@ -0,0 +1,189 @@
+"use client"
+
+import { Fragment } from "react"
+import { useIntl } from "react-intl"
+
+import { dt } from "@/lib/dt"
+
+import { PriceTagIcon } from "@/components/Icons"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import useLang from "@/hooks/useLang"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./priceDetailsTable.module.css"
+
+import type { Price } from "@/types/components/hotelReservation/price"
+import type { SelectRateSummaryProps } from "@/types/components/hotelReservation/summary"
+
+function Row({
+  label,
+  value,
+  bold,
+}: {
+  label: string
+  value: string
+  bold?: boolean
+}) {
+  return (
+    <tr className={styles.row}>
+      <td>
+        <Caption type={bold ? "bold" : undefined}>{label}</Caption>
+      </td>
+      <td className={styles.price}>
+        <Caption type={bold ? "bold" : undefined}>{value}</Caption>
+      </td>
+    </tr>
+  )
+}
+
+function TableSection({ children }: React.PropsWithChildren) {
+  return <tbody className={styles.tableSection}>{children}</tbody>
+}
+
+function TableSectionHeader({
+  title,
+  subtitle,
+}: {
+  title: string
+  subtitle?: string
+}) {
+  return (
+    <tr>
+      <th colSpan={2}>
+        <Body>{title}</Body>
+        {subtitle ? <Body>{subtitle}</Body> : null}
+      </th>
+    </tr>
+  )
+}
+
+export interface PriceDetailsTableProps {
+  bookingCode?: string
+  fromDate: string
+  isMember: boolean
+  rooms: SelectRateSummaryProps["rooms"]
+  toDate: string
+  totalPrice: Price
+  vat: number
+}
+
+export default function PriceDetailsTable({
+  bookingCode,
+  fromDate,
+  isMember,
+  rooms,
+  toDate,
+  totalPrice,
+  vat,
+}: PriceDetailsTableProps) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  const diff = dt(toDate).diff(fromDate, "days")
+  const nights = intl.formatMessage(
+    { id: "{totalNights, plural, one {# night} other {# nights}}" },
+    { totalNights: diff }
+  )
+  const vatPercentage = vat / 100
+  const vatAmount = totalPrice.local.price * vatPercentage
+
+  const priceExclVat = totalPrice.local.price - vatAmount
+
+  const duration = ` ${dt(fromDate).locale(lang).format("ddd, D MMM")}
+          -
+          ${dt(toDate).locale(lang).format("ddd, D MMM")} (${nights})`
+  return (
+    <table className={styles.priceDetailsTable}>
+      {rooms.map((room, idx) => {
+        const getMemberRate = idx === 0 && isMember
+        const price =
+          getMemberRate && room.roomRate.memberRate
+            ? room.roomRate.memberRate
+            : room.roomRate.publicRate
+        if (!price) {
+          return null
+        }
+        return (
+          <Fragment key={idx}>
+            <TableSection>
+              {rooms.length > 1 && (
+                <Body textTransform="bold">
+                  {intl.formatMessage({ id: "Room" })} {idx + 1}
+                </Body>
+              )}
+              <TableSectionHeader title={room.roomType} subtitle={duration} />
+              <Row
+                label={intl.formatMessage({ id: "Average price per night" })}
+                value={formatPrice(
+                  intl,
+                  price.localPrice.pricePerNight,
+                  price.localPrice.currency
+                )}
+              />
+              <Row
+                bold
+                label={intl.formatMessage({ id: "Room charge" })}
+                value={formatPrice(
+                  intl,
+                  price.localPrice.pricePerStay,
+                  price.localPrice.currency
+                )}
+              />
+            </TableSection>
+          </Fragment>
+        )
+      })}
+      <TableSection>
+        <TableSectionHeader title={intl.formatMessage({ id: "Total" })} />
+        <Row
+          label={intl.formatMessage({ id: "Price excluding VAT" })}
+          value={formatPrice(intl, priceExclVat, totalPrice.local.currency)}
+        />
+        <Row
+          label={intl.formatMessage({ id: "VAT {vat}%" }, { vat })}
+          value={formatPrice(intl, vatAmount, totalPrice.local.currency)}
+        />
+        <tr className={styles.row}>
+          <td>
+            <Body textTransform="bold">
+              {intl.formatMessage({ id: "Price including VAT" })}
+            </Body>
+          </td>
+          <td className={styles.price}>
+            <Body textTransform="bold">
+              {formatPrice(
+                intl,
+                totalPrice.local.price,
+                totalPrice.local.currency
+              )}
+            </Body>
+          </td>
+        </tr>
+        {totalPrice.local.regularPrice && (
+          <tr className={styles.row}>
+            <td></td>
+            <td className={styles.price}>
+              <Caption color="uiTextMediumContrast" striked={true}>
+                {formatPrice(
+                  intl,
+                  totalPrice.local.regularPrice,
+                  totalPrice.local.currency
+                )}
+              </Caption>
+            </td>
+          </tr>
+        )}
+        {bookingCode && totalPrice.local.regularPrice && (
+          <tr className={styles.row}>
+            <td>
+              <PriceTagIcon />
+              {bookingCode}
+            </td>
+            <td></td>
+          </tr>
+        )}
+      </TableSection>
+    </table>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/PriceDetailsTable/priceDetailsTable.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/PriceDetailsTable/priceDetailsTable.module.css
@@ -0,0 +1,36 @@
+.priceDetailsTable {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.price {
+  text-align: end;
+}
+
+.tableSection {
+  display: flex;
+  gap: var(--Spacing-x-half);
+  flex-direction: column;
+  width: 100%;
+}
+
+.tableSection:has(tr > th) {
+  padding-top: var(--Spacing-x2);
+}
+
+.tableSection:has(tr > th):not(:first-of-type) {
+  border-top: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+}
+
+.tableSection:not(:last-child) {
+  padding-bottom: var(--Spacing-x2);
+}
+.row {
+  display: flex;
+  justify-content: space-between;
+}
+@media screen and (min-width: 768px) {
+  .priceDetailsTable {
+    min-width: 512px;
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
@@ -20,6 +20,8 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"

+import PriceDetailsTable from "./PriceDetailsTable"
+
 import styles from "./summary.module.css"

 import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
@@ -249,19 +251,17 @@ export default function Summary({
                { b: (str) => <b>{str}</b> }
              )}
            </Body>
-            <PriceDetailsModal
-              fromDate={booking.fromDate}
-              toDate={booking.toDate}
-              rooms={rooms.map((r) => ({
-                adults: r.adults,
-                childrenInRoom: r.childrenInRoom,
-                roomPrice: r.roomPrice,
-                roomType: r.roomType,
-              }))}
-              totalPrice={totalPrice}
-              vat={vat}
-              bookingCode={booking.bookingCode}
-            />
+            <PriceDetailsModal>
+              <PriceDetailsTable
+                bookingCode={booking.bookingCode}
+                fromDate={booking.fromDate}
+                isMember={isMember}
+                rooms={rooms}
+                toDate={booking.toDate}
+                totalPrice={totalPrice}
+                vat={vat}
+              />
+            </PriceDetailsModal>
          </div>
          <div>
            <Body
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
@@ -15,6 +15,7 @@ import styles from "./mobileSummary.module.css"

 import type { MobileSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary"
 import { RateTypeEnum } from "@/types/enums/rateType"
+import type { RoomsAvailability } from "@/types/trpc/routers/hotel/roomAvailability"

 export default function MobileSummary({
  isAllRoomsSelected,
@@ -25,11 +26,11 @@ export default function MobileSummary({
  const scrollY = useRef(0)
  const [isSummaryOpen, setIsSummaryOpen] = useState(false)

-  const { booking, bookingRooms, rateDefinitions, rateSummary, vat } =
+  const { booking, bookingRooms, roomsAvailability, rateSummary, vat } =
    useRatesStore((state) => ({
      booking: state.booking,
      bookingRooms: state.booking.rooms,
-      rateDefinitions: state.roomsAvailability?.rateDefinitions,
+      roomsAvailability: state.roomsAvailability,
      rateSummary: state.rateSummary,
      vat: state.vat,
    }))
@@ -61,10 +62,15 @@ export default function MobileSummary({
    }
  }, [isSummaryOpen])

-  if (!rateDefinitions) {
+  const roomRateDefinitions = roomsAvailability?.find(
+    (ra): ra is RoomsAvailability => "rateDefinitions" in ra
+  )
+  if (!roomRateDefinitions) {
    return null
  }

+  const rateDefinitions = roomRateDefinitions.rateDefinitions
+
  const rooms = rateSummary.map((room, index) => ({
    adults: bookingRooms[index].adults,
    childrenInRoom: bookingRooms[index].childrenInRoom ?? undefined,
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
@@ -28,12 +28,17 @@ import { RateTypeEnum } from "@/types/enums/rateType"
 export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
  const {
    bookingRooms,
+    dates,
    petRoomPackage,
    rateSummary,
    roomsAvailability,
    searchParams,
  } = useRatesStore((state) => ({
    bookingRooms: state.booking.rooms,
+    dates: {
+      checkInDate: state.booking.fromDate,
+      checkOutDate: state.booking.toDate,
+    },
    petRoomPackage: state.petRoomPackage,
    rateSummary: state.rateSummary,
    roomsAvailability: state.roomsAvailability,
@@ -50,8 +55,8 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
    return null
  }

-  const checkInDate = new Date(roomsAvailability.checkInDate)
-  const checkOutDate = new Date(roomsAvailability.checkOutDate)
+  const checkInDate = new Date(dates.checkInDate)
+  const checkOutDate = new Date(dates.checkOutDate)
  const nights = dt(checkOutDate).diff(dt(checkInDate), "days")
  const bookingCode = params.get("bookingCode")

@@ -186,8 +191,15 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
                <SignupPromoDesktop
                  memberPrice={{
                    amount: rateSummary.reduce((total, room) => {
-                      const memberPrice =
-                        room.member?.localPrice.pricePerStay ?? 0
+                      const memberPrice = room.member?.localPrice.pricePerStay
+                      if (!memberPrice) {
+                        return total
+                      }
+                      const hasSelectedPetRoom =
+                        room.package === RoomPackageCodeEnum.PET_ROOM
+                      if (!hasSelectedPetRoom) {
+                        return total + memberPrice
+                      }
                      const isPetRoom = room.features.find(
                        (feature) =>
                          feature.code === RoomPackageCodeEnum.PET_ROOM
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
@@ -20,7 +20,6 @@ export default function SelectedRoomPanel() {
  const intl = useIntl()
  const { isUserLoggedIn, roomCategories } = useRatesStore((state) => ({
    isUserLoggedIn: state.isUserLoggedIn,
-    rateDefinitions: state.roomsAvailability?.rateDefinitions,
    roomCategories: state.roomCategories,
  }))
  const {
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/index.tsx
@@ -75,24 +75,18 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
  const searchParams = useSearchParams()
  const bookingCode = searchParams.get("bookingCode")

-  const {
-    hotelId,
-    hotelType,
-    isUserLoggedIn,
-    petRoomPackage,
-    rateDefinitions,
-    roomCategories,
-  } = useRatesStore((state) => ({
-    hotelId: state.booking.hotelId,
-    hotelType: state.hotelType,
-    isUserLoggedIn: state.isUserLoggedIn,
-    petRoomPackage: state.petRoomPackage,
-    rateDefinitions: state.roomsAvailability?.rateDefinitions,
-    roomCategories: state.roomCategories,
-  }))
-  const { isMainRoom, roomNr, selectedPackage } = useRoomContext()
+  const { hotelId, hotelType, isUserLoggedIn, petRoomPackage, roomCategories } =
+    useRatesStore((state) => ({
+      hotelId: state.booking.hotelId,
+      hotelType: state.hotelType,
+      isUserLoggedIn: state.isUserLoggedIn,
+      petRoomPackage: state.petRoomPackage,
+      roomCategories: state.roomCategories,
+    }))
+  const { isMainRoom, roomAvailability, roomNr, selectedPackage } =
+    useRoomContext()

-  if (!rateDefinitions) {
+  if (!roomAvailability || !("rateDefinitions" in roomAvailability)) {
    return null
  }

@@ -217,16 +211,16 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
          <Caption color="uiTextMediumContrast">
            {occupancy.max === occupancy.min
              ? intl.formatMessage(
-                  { id: "{guests, plural, one {# guest} other {# guests}}" },
-                  { guests: occupancy.max }
-                )
+                { id: "{guests, plural, one {# guest} other {# guests}}" },
+                { guests: occupancy.max }
+              )
              : intl.formatMessage(
-                  { id: "{min}-{max} guests" },
-                  {
-                    min: occupancy.min,
-                    max: occupancy.max,
-                  }
-                )}
+                { id: "{min}-{max} guests" },
+                {
+                  min: occupancy.min,
+                  max: occupancy.max,
+                }
+              )}
          </Caption>
        )}
        <RoomSize roomSize={roomSize} />
@@ -282,7 +276,10 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
              const isAvailable =
                product.public ||
                (product.member && isUserLoggedIn && isMainRoom)
-              const rateDefinition = getRateDefinition(product, rateDefinitions)
+              const rateDefinition = getRateDefinition(
+                product,
+                roomAvailability.rateDefinitions
+              )
              return (
                <FlexibilityOption
                  key={product.rate}
@@ -296,7 +293,7 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
                  title={rateTitle}
                  rateTitle={
                    product.public &&
-                    product.public?.rateType !== RateTypeEnum.Regular
+                      product.public?.rateType !== RateTypeEnum.Regular
                      ? rateDefinition?.title
                      : undefined
                  }
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomTypeFilter/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomTypeFilter/index.tsx
@@ -27,7 +27,7 @@ export default function RoomTypeFilter() {
  const intl = useIntl()

  const availableRooms = rooms.filter(
-    (r) => r.status === AvailabilityEnum.Available
+    (room) => room.status === AvailabilityEnum.Available
  ).length

  // const tooltipText = intl.formatMessage({
@@ -48,7 +48,7 @@ export default function RoomTypeFilter() {
      id: "{availableRooms}/{numberOfRooms, plural, one {# room type} other {# room types}} available",
    },
    {
-      availableRooms: availableRooms,
+      availableRooms,
      numberOfRooms: totalRooms,
    }
  )
@@ -81,7 +81,7 @@ export default function RoomTypeFilter() {
            aria-label={option.description}
            className={styles.radio}
            id={option.code}
-            key={option.itemCode}
+            key={option.code}
          >
            <div className={styles.circle} />
            <Caption color="uiTextHighContrast">{option.description}</Caption>
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/index.tsx
@@ -25,19 +25,21 @@ export default function Rooms() {
    departureDate: state.booking.toDate,
    hotelId: state.booking.hotelId,
    rooms: state.rooms,
-    visibleRooms: state.allRooms,
+    visibleRooms: state.roomConfigurations,
  }))

  useEffect(() => {
-    const pricesWithCurrencies = visibleRooms.flatMap((room) =>
-      room.products
-        .filter((product) => product.member || product.public)
-        .map((product) => ({
-          currency: (product.public?.localPrice.currency ||
-            product.member?.localPrice.currency)!,
-          price: (product.public?.localPrice.pricePerNight ||
-            product.member?.localPrice.pricePerNight)!,
-        }))
+    const pricesWithCurrencies = visibleRooms.flatMap((roomConfiguration) =>
+      roomConfiguration.flatMap((room) =>
+        room.products
+          .filter((product) => product.member || product.public)
+          .map((product) => ({
+            currency: (product.public?.localPrice.currency ||
+              product.member?.localPrice.currency)!,
+            price: (product.public?.localPrice.pricePerNight ||
+              product.member?.localPrice.pricePerNight)!,
+          }))
+      )
    )
    const lowestPrice = pricesWithCurrencies.reduce(
      (minPrice, { price }) => Math.min(minPrice, price),
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.tsx
@@ -26,11 +26,9 @@ export function RoomsContainer({
  const fromDateString = dt(fromDate).format("YYYY-MM-DD")
  const toDateString = dt(toDate).format("YYYY-MM-DD")

-  const uniqueAdultsCount = Array.from(new Set(adultArray))
-
-  const { isPending: isLoadingAvailability, data: roomsAvailability } =
+  const { data: roomsAvailability, isPending: isLoadingAvailability } =
    useRoomsAvailability(
-      uniqueAdultsCount,
+      adultArray,
      hotelId,
      fromDateString,
      toDateString,