Merged in feat/SW-2078-update-confirmation-page-vouchers (pull request #1731)

Feat/SW-2078 update confirmation page vouchers and Corp Cheques rate * feat: SW-2078 Tablet bookingCode ref forward issue fix (cherry picked from commit 16a6a00fd99b6b6220a98ad74de062d67d35e1c0) * feat: SW-2078 Display Vouchers and Cheques prices on confirmation page (cherry picked from commit a76494de497a7d5e7641cb0036bd7055acf875c1) * feat: SW-2078 Rebase issue fix * feat: SW-2079 Updated rate title in terms modal * feat: SW-2078 Optimized code * feat: SW-2078 Removed extra tags Approved-by: Christian Andolf
2025-04-08 07:27:40 +00:00
parent c56a0b8ce9
commit 73cb423c95
26 changed files with 300 additions and 143 deletions
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/PriceDetailsModal/index.tsx
@@ -2,6 +2,7 @@
 import React from "react"
 import { useIntl } from "react-intl"

+import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"

@@ -10,7 +11,7 @@ import { useBookingConfirmationStore } from "@/stores/booking-confirmation"

 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
-import Body from "@/components/TempDesignSystem/Text/Body"
+import IconChip from "@/components/TempDesignSystem/IconChip"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"
@@ -45,15 +46,26 @@ function TableSection({ children }: React.PropsWithChildren) {
 function TableSectionHeader({
  title,
  subtitle,
+  bold,
 }: {
  title: string
  subtitle?: string
+  bold?: boolean
 }) {
+  const typographyVariant = bold
+    ? "Body/Paragraph/mdBold"
+    : "Body/Paragraph/mdRegular"
  return (
    <tr>
-      <th colSpan={2}>
-        <Body>{title}</Body>
-        {subtitle ? <Body>{subtitle}</Body> : null}
+      <th colSpan={2} align="left">
+        <Typography variant={typographyVariant}>
+          <p>{title}</p>
+        </Typography>
+        {subtitle ? (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p>{subtitle}</p>
+          </Typography>
+        ) : null}
      </th>
    </tr>
  )
@@ -130,12 +142,13 @@ export default function PriceDetailsModal() {
            <React.Fragment key={idx}>
              <TableSection>
                {rooms.length > 1 && (
-                  <Body textTransform="bold">
-                    {intl.formatMessage(
+                  <TableSectionHeader
+                    title={intl.formatMessage(
                      { id: "Room {roomIndex}" },
                      { roomIndex: idx + 1 }
                    )}
-                  </Body>
+                    bold
+                  />
                )}
                <TableSectionHeader title={room.name} subtitle={duration} />
                {room.roomFeatures
@@ -179,14 +192,14 @@ export default function PriceDetailsModal() {
                      currencyCode
                    )}
                  />
-                  {room.children ? (
+                  {room.childrenAges?.length ? (
                    <Row
                      label={intl.formatMessage(
                        {
                          id: "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}",
                        },
                        {
-                          totalChildren: room.children,
+                          totalChildren: room.childrenAges.length,
                          totalBreakfasts: diff,
                        }
                      )}
@@ -237,11 +250,26 @@ export default function PriceDetailsModal() {
          </tr>
          {bookingCode && (
            <tr className={styles.row}>
-              <td>
-                <MaterialIcon icon="sell" />
-                {bookingCode}
+              <td colSpan={2} align="left">
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  <IconChip
+                    color="blue"
+                    icon={<DiscountIcon color="Icon/Feedback/Information" />}
+                  >
+                    {intl.formatMessage(
+                      { id: "<strong>Booking code</strong>: {value}" },
+                      {
+                        value: bookingCode,
+                        strong: (text) => (
+                          <Typography variant="Body/Supporting text (caption)/smBold">
+                            <strong>{text}</strong>
+                          </Typography>
+                        ),
+                      }
+                    )}
+                  </IconChip>
+                </Typography>
              </td>
-              <td></td>
            </tr>
          )}
        </TableSection>
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx
@@ -23,10 +23,13 @@ export default function ReceiptRoom({
  roomIndex,
 }: BookingConfirmationReceiptRoomProps) {
  const intl = useIntl()
-  const { room, currencyCode } = useBookingConfirmationStore((state) => ({
-    room: state.rooms[roomIndex],
-    currencyCode: state.currencyCode,
-  }))
+  const { room, currencyCode, isVatCurrency } = useBookingConfirmationStore(
+    (state) => ({
+      room: state.rooms[roomIndex],
+      currencyCode: state.currencyCode,
+      isVatCurrency: state.isVatCurrency,
+    })
+  )

  if (!room) {
    return <RoomSkeletonLoader />
@@ -56,7 +59,7 @@ export default function ReceiptRoom({
        ) : (
          <Typography variant="Body/Paragraph/mdRegular">
            <p className={styles.uiTextHighContrast}>
-              {formatPrice(intl, room.roomPrice, currencyCode)}
+              {room.formattedTotalCost}
            </p>
          </Typography>
        )}
@@ -91,9 +94,9 @@ export default function ReceiptRoom({
            </Button>
          }
          title={
-            (room.roomPoints
-              ? room.rateDefinition.title
-              : room.rateDefinition.cancellationText) || ""
+            (isVatCurrency
+              ? room.rateDefinition.cancellationText
+              : room.rateDefinition.title) || ""
          }
          subtitle={
            room.rateDefinition.cancellationRule ===
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx
@@ -15,6 +15,7 @@ import { LinkedReservationCardSkeleton } from "./LinkedReservationCardSkeleton"
 import Retry from "./Retry"

 import type { LinkedReservationProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms/linkedReservation"
+import { CurrencyEnum } from "@/types/enums/currency"

 export function LinkedReservation({
  checkInTime,
@@ -27,13 +28,19 @@ export function LinkedReservation({
    confirmationNumber,
    lang,
  })
-  const { setRoom, setFormattedTotalCost, currencyCode, totalBookingPrice } =
-    useBookingConfirmationStore((state) => ({
-      setRoom: state.actions.setRoom,
-      setFormattedTotalCost: state.actions.setFormattedTotalCost,
-      currencyCode: state.currencyCode,
-      totalBookingPrice: state.totalBookingPrice,
-    }))
+  const {
+    setRoom,
+    setFormattedTotalCost,
+    currencyCode,
+    totalBookingPrice,
+    totalBookingCheques,
+  } = useBookingConfirmationStore((state) => ({
+    setRoom: state.actions.setRoom,
+    setFormattedTotalCost: state.actions.setFormattedTotalCost,
+    currencyCode: state.currencyCode,
+    totalBookingPrice: state.totalBookingPrice,
+    totalBookingCheques: state.totalBookingCheques,
+  }))
  const intl = useIntl()

  useEffect(() => {
@@ -41,18 +48,24 @@ export function LinkedReservation({
      const roomData = mapRoomState(data.booking, data.room, intl)
      setRoom(roomData, roomIndex)

-      const formattedTotalCost = formatPrice(
-        intl,
-        totalBookingPrice,
-        currencyCode
-      )
+      const formattedTotalCost = totalBookingCheques
+        ? formatPrice(
+            intl,
+            totalBookingCheques,
+            CurrencyEnum.CC,
+            totalBookingPrice,
+            currencyCode
+          )
+        : formatPrice(intl, totalBookingPrice, currencyCode)
+
      setFormattedTotalCost(formattedTotalCost)
    }
  }, [
    data,
    roomIndex,
-    setRoom,
    intl,
+    setRoom,
+    totalBookingCheques,
    totalBookingPrice,
    currencyCode,
    setFormattedTotalCost,
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Tracking/tracking.ts
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Tracking/tracking.ts
@@ -75,7 +75,7 @@ export function getTracking(
  }

  const noOfAdults = rooms.map((r) => r.adults).join(",")
-  const noOfChildren = rooms.map((r) => r.children ?? 0).join(",")
+  const noOfChildren = rooms.map((r) => r.childrenAges?.length ?? 0).join(",")
  const noOfRooms = rooms.length

  const hotelsTrackingData: TrackingSDKHotelInfo = {
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts
@@ -32,6 +32,20 @@ export function mapRoomState(
      booking.totalPrice,
      booking.currencyCode
    )
+  } else if (booking.cheques) {
+    formattedTotalCost = formatPrice(
+      intl,
+      booking.cheques,
+      CurrencyEnum.CC,
+      booking.totalPrice,
+      booking.currencyCode
+    )
+  } else if (booking.vouchers) {
+    formattedTotalCost = formatPrice(
+      intl,
+      booking.vouchers,
+      CurrencyEnum.Voucher
+    )
  }

  return {
@@ -39,7 +53,7 @@ export function mapRoomState(
    bedDescription: room.bedType.description,
    breakfast,
    breakfastIncluded,
-    children: booking.childrenAges.length,
+    cheques: booking.cheques,
    childrenAges: booking.childrenAges,
    childBedPreferences: booking.childBedPreferences,
    confirmationNumber: booking.confirmationNumber,
@@ -57,5 +71,6 @@ export function mapRoomState(
    totalPrice: booking.totalPrice,
    totalPriceExVat: booking.totalPriceExVat,
    vatAmount: booking.vatAmount,
+    vouchers: booking.vouchers,
  }
 }