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/Details/RoomOne/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx
@@ -55,15 +55,19 @@ export default function Details({ user }: DetailsProps) {
    reValidateMode: "onChange",
    values: {
      countryCode: user?.address?.countryCode ?? initialData.countryCode,
-      dateOfBirth: initialData.dateOfBirth,
+      dateOfBirth:
+        "dateOfBirth" in initialData ? initialData.dateOfBirth : undefined,
      email: user?.email ?? initialData.email,
      firstName: user?.firstName ?? initialData.firstName,
      join: initialData.join,
      lastName: user?.lastName ?? initialData.lastName,
      membershipNo: initialData.membershipNo,
      phoneNumber: user?.phoneNumber ?? initialData.phoneNumber,
-      zipCode: initialData.zipCode,
-      specialRequests: initialData.specialRequests,
+      zipCode: "zipCode" in initialData ? initialData.zipCode : undefined,
+      specialRequests:
+        "specialRequests" in initialData
+          ? initialData.specialRequests
+          : undefined,
    },
  })

--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
@@ -255,24 +255,24 @@ export default function PaymentClient({
      const guarantee = data.guarantee
      const useSavedCard = savedCreditCard
        ? {
-            card: {
-              alias: savedCreditCard.alias,
-              expiryDate: savedCreditCard.expirationDate,
-              cardType: savedCreditCard.cardType,
-            },
-          }
+          card: {
+            alias: savedCreditCard.alias,
+            expiryDate: savedCreditCard.expirationDate,
+            cardType: savedCreditCard.cardType,
+          },
+        }
        : {}

      const shouldUsePayment = !isFlexRate || guarantee

      const payment = shouldUsePayment
        ? {
-            paymentMethod: paymentMethod,
-            ...useSavedCard,
-            success: `${paymentRedirectUrl}/success`,
-            error: `${paymentRedirectUrl}/error`,
-            cancel: `${paymentRedirectUrl}/cancel`,
-          }
+          paymentMethod: paymentMethod,
+          ...useSavedCard,
+          success: `${paymentRedirectUrl}/success`,
+          error: `${paymentRedirectUrl}/error`,
+          cancel: `${paymentRedirectUrl}/cancel`,
+        }
        : undefined

      trackPaymentEvent({
@@ -285,56 +285,65 @@ export default function PaymentClient({
      })

      initiateBooking.mutate({
-        language: lang,
-        hotelId,
        checkInDate: fromDate,
        checkOutDate: toDate,
+        hotelId,
+        language: lang,
+        payment,
        rooms: rooms.map(({ room }, idx) => ({
          adults: room.adults,
          childrenAges: room.childrenInRoom?.map((child) => ({
            age: child.age,
            bedType: bedTypeMap[parseInt(child.bed.toString())],
          })),
-          rateCode:
-            (room.guest.join || room.guest.membershipNo) &&
-            booking.rooms[idx].counterRateCode
-              ? booking.rooms[idx].counterRateCode
-              : booking.rooms[idx].rateCode,
-          roomTypeCode: room.bedType!.roomTypeCode, // A selection has been made in order to get to this step.
          guest: {
            becomeMember: room.guest.join,
            countryCode: room.guest.countryCode,
-            dateOfBirth: room.guest.dateOfBirth,
            email: room.guest.email,
            firstName: room.guest.firstName,
            lastName: room.guest.lastName,
            membershipNumber: room.guest.membershipNo,
            phoneNumber: room.guest.phoneNumber,
-            postalCode: room.guest.zipCode,
+            // Only allowed for room one
+            ...(idx === 0 && {
+              dateOfBirth:
+                "dateOfBirth" in room.guest && room.guest.dateOfBirth
+                  ? room.guest.dateOfBirth
+                  : undefined,
+              postalCode:
+                "zipCode" in room.guest && room.guest.zipCode
+                  ? room.guest.zipCode
+                  : undefined,
+            }),
          },
          packages: {
-            breakfast: !!(room.breakfast && room.breakfast.code),
-            allergyFriendly:
-              room.roomFeatures?.some(
-                (feature) => feature.code === RoomPackageCodeEnum.ALLERGY_ROOM
-              ) ?? false,
-            petFriendly:
-              room.roomFeatures?.some(
-                (feature) => feature.code === RoomPackageCodeEnum.PET_ROOM
-              ) ?? false,
            accessibility:
              room.roomFeatures?.some(
                (feature) =>
                  feature.code === RoomPackageCodeEnum.ACCESSIBILITY_ROOM
              ) ?? false,
+            allergyFriendly:
+              room.roomFeatures?.some(
+                (feature) => feature.code === RoomPackageCodeEnum.ALLERGY_ROOM
+              ) ?? false,
+            breakfast: !!(room.breakfast && room.breakfast.code),
+            petFriendly:
+              room.roomFeatures?.some(
+                (feature) => feature.code === RoomPackageCodeEnum.PET_ROOM
+              ) ?? false,
          },
-          smsConfirmationRequested: data.smsConfirmation,
+          rateCode:
+            (room.guest.join || room.guest.membershipNo) &&
+              booking.rooms[idx].counterRateCode
+              ? booking.rooms[idx].counterRateCode
+              : booking.rooms[idx].rateCode,
          roomPrice: {
            memberPrice: room.roomRate.memberRate?.localPrice.pricePerStay,
            publicPrice: room.roomRate.publicRate?.localPrice.pricePerStay,
          },
+          roomTypeCode: room.bedType!.roomTypeCode, // A selection has been made in order to get to this step.
+          smsConfirmationRequested: data.smsConfirmation,
        })),
-        payment,
      })
    },
    [
@@ -436,7 +445,7 @@ export default function PaymentClient({
                      value={paymentMethod}
                      label={
                        PAYMENT_METHOD_TITLES[
-                          paymentMethod as PaymentMethodEnum
+                        paymentMethod as PaymentMethodEnum
                        ]
                      }
                    />
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
@@ -1,6 +1,6 @@
 "use client"

-import { useState, Fragment } from "react"
+import { Fragment, useState } from "react"
 import {
  Dialog,
  DialogTrigger,
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx
@@ -15,7 +15,8 @@ import { calculateTotalRoomPrice } from "../Payment/helpers"
 import PriceChangeSummary from "./PriceChangeSummary"

 import styles from "./priceChangeDialog.module.css"
-import { PriceChangeData } from "@/types/components/hotelReservation/enterDetails/payment"
+
+import type { PriceChangeData } from "@/types/components/hotelReservation/enterDetails/payment"

 type PriceDetailsState = {
  newTotalPrice: number
--- 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>
  )