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/EnterDetails/Summary/UI/PriceDetailsTable/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/PriceDetailsTable/index.tsx
@@ -0,0 +1,273 @@
+"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 { RoomState } from "@/types/stores/enter-details"
+
+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 type Room = Pick<
+  RoomState["room"],
+  | "adults"
+  | "bedType"
+  | "breakfast"
+  | "childrenInRoom"
+  | "roomFeatures"
+  | "roomRate"
+  | "roomType"
+> & {
+  guest?: RoomState["room"]["guest"]
+}
+
+export interface PriceDetailsTableProps {
+  bookingCode?: string
+  fromDate: string
+  isMember: boolean
+  rooms: Room[]
+  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 =
+          room.guest?.join ||
+          room.guest?.membershipNo ||
+          (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
+                )}
+              />
+              {room.roomFeatures
+                ? room.roomFeatures.map((feature) => (
+                  <Row
+                    key={feature.code}
+                    label={feature.description}
+                    value={formatPrice(
+                      intl,
+                      +feature.localPrice.totalPrice,
+                      feature.localPrice.currency
+                    )}
+                  />
+                ))
+                : null}
+              {room.bedType ? (
+                <Row
+                  label={room.bedType.description}
+                  value={formatPrice(intl, 0, price.localPrice.currency)}
+                />
+              ) : null}
+              <Row
+                bold
+                label={intl.formatMessage({ id: "Room charge" })}
+                value={formatPrice(
+                  intl,
+                  price.localPrice.pricePerStay,
+                  price.localPrice.currency
+                )}
+              />
+            </TableSection>
+
+            {room.breakfast ? (
+              <TableSection>
+                <Row
+                  label={intl.formatMessage(
+                    {
+                      id: "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}) x {totalBreakfasts}",
+                    },
+                    { totalAdults: room.adults, totalBreakfasts: diff }
+                  )}
+                  value={formatPrice(
+                    intl,
+                    parseInt(room.breakfast.localPrice.price) * room.adults,
+                    room.breakfast.localPrice.currency
+                  )}
+                />
+                {room.childrenInRoom?.length ? (
+                  <Row
+                    label={intl.formatMessage(
+                      {
+                        id: "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}",
+                      },
+                      {
+                        totalChildren: room.childrenInRoom.length,
+                        totalBreakfasts: diff,
+                      }
+                    )}
+                    value={formatPrice(
+                      intl,
+                      0,
+                      room.breakfast.localPrice.currency
+                    )}
+                  />
+                ) : null}
+                <Row
+                  bold
+                  label={intl.formatMessage({
+                    id: "Breakfast charge",
+                  })}
+                  value={formatPrice(
+                    intl,
+                    parseInt(room.breakfast.localPrice.price) *
+                    room.adults *
+                    diff,
+                    room.breakfast.localPrice.currency
+                  )}
+                />
+              </TableSection>
+            ) : null}
+          </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/EnterDetails/Summary/UI/PriceDetailsTable/priceDetailsTable.module.css
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/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/EnterDetails/Summary/UI/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
@@ -22,6 +22,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 "./ui.module.css"

 import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
@@ -62,15 +64,14 @@ export default function SummaryUI({
      : null
  }

+  const roomOneGuest = rooms[0].room.guest
  const showSignupPromo =
    rooms.length === 1 &&
-    rooms
-      .slice(0, 1)
-      .some(
-        (r) => !isMember || !r.room.guest.join || !r.room.guest.membershipNo
-      )
+    !isMember &&
+    !roomOneGuest.membershipNo &&
+    !roomOneGuest.join

-  const memberPrice = getMemberPrice(rooms[0].room.roomRate)
+  const roomOneMemberPrice = getMemberPrice(rooms[0].room.roomRate)

  return (
    <section className={styles.summary}>
@@ -120,9 +121,12 @@ export default function SummaryUI({
        const memberPrice = getMemberPrice(room.roomRate)

        const isFirstRoomMember = roomNumber === 1 && isMember
-        const showMemberPrice =
-          !!(isFirstRoomMember || room.guest.join || room.guest.membershipNo) &&
-          memberPrice
+        const isOrWillBecomeMember = !!(
+          room.guest.join ||
+          room.guest.membershipNo ||
+          isFirstRoomMember
+        )
+        const showMemberPrice = !!(isOrWillBecomeMember && memberPrice)

        const adultsMsg = intl.formatMessage(
          { id: "{totalAdults, plural, one {# adult} other {# adults}}" },
@@ -160,11 +164,17 @@ export default function SummaryUI({
                <div className={styles.entry}>
                  <Body color="uiTextHighContrast">{room.roomType}</Body>
                  <Body color={showMemberPrice ? "red" : "uiTextHighContrast"}>
-                    {formatPrice(
-                      intl,
-                      room.roomPrice.perStay.local.price,
-                      room.roomPrice.perStay.local.currency
-                    )}
+                    {showMemberPrice
+                      ? formatPrice(
+                          intl,
+                          memberPrice.amount,
+                          memberPrice.currency
+                        )
+                      : formatPrice(
+                          intl,
+                          room.roomPrice.perStay.local.price,
+                          room.roomPrice.perStay.local.currency
+                        )}
                  </Body>
                </div>
                <Caption color="uiTextMediumContrast">
@@ -361,22 +371,17 @@ export default function SummaryUI({
                { b: (str) => <b>{str}</b> }
              )}
            </Body>
-            <PriceDetailsModal
-              fromDate={booking.fromDate}
-              toDate={booking.toDate}
-              rooms={rooms.map((r) => ({
-                adults: r.room.adults,
-                bedType: r.room.bedType,
-                breakfast: r.room.breakfast,
-                childrenInRoom: r.room.childrenInRoom,
-                roomFeatures: r.room.roomFeatures,
-                roomPrice: r.room.roomPrice,
-                roomType: r.room.roomType,
-              }))}
-              totalPrice={totalPrice}
-              vat={vat}
-              bookingCode={booking.bookingCode}
-            />
+            <PriceDetailsModal>
+              <PriceDetailsTable
+                bookingCode={booking.bookingCode}
+                fromDate={booking.fromDate}
+                isMember={isMember}
+                rooms={rooms.map((r) => r.room)}
+                toDate={booking.toDate}
+                totalPrice={totalPrice}
+                vat={vat}
+              />
+            </PriceDetailsModal>
          </div>
          <div>
            <Body textTransform="bold" data-testid="total-price">
@@ -419,8 +424,11 @@ export default function SummaryUI({
        )}
        <Divider className={styles.bottomDivider} color="primaryLightSubtle" />
      </div>
-      {showSignupPromo && memberPrice && !isMember ? (
-        <SignupPromoDesktop memberPrice={memberPrice} badgeContent={"✌️"} />
+      {showSignupPromo && roomOneMemberPrice && !isMember ? (
+        <SignupPromoDesktop
+          memberPrice={roomOneMemberPrice}
+          badgeContent={"✌️"}
+        />
      ) : null}
    </section>
  )