Merged in feat/SW-1078-rate-terms-scenarios (pull request #1500)

feat(SW-1078): mixed rate scenario * feat(SW-1078): mixed rate scenario * fix: change from css string modification to array join * refactor: split out big reduce function into smaller parts * fix: minor fixes and improvments * fix: added room index map to localization string Approved-by: Christian Andolf
2025-03-12 10:34:35 +00:00
parent 01740e3300
commit ad05f792fb
18 changed files with 264 additions and 10 deletions
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx
@@ -0,0 +1,136 @@
+import React from "react"
+import { useIntl } from "react-intl"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import {
+  calculateTotalRoomPrice,
+  hasFlexibleRate,
+  hasPrepaidRate,
+} from "../helpers"
+
+import styles from "./mixedRatePaymentBreakdown.module.css"
+
+import type { RoomState } from "@/types/stores/enter-details"
+
+type PaymentBreakdownState = {
+  roomsWithPrepaidRate: number[]
+  roomsWithFlexRate: number[]
+  payNowPrice: number
+  payNowComparisonPrice: number
+  payAtCheckInPrice: number
+  payAtCheckInComparisonPrice: number
+}
+
+interface MixedRatePaymentBreakdownProps {
+  rooms: RoomState[]
+  currency: string
+}
+
+export default function MixedRatePaymentBreakdown({
+  rooms,
+  currency,
+}: MixedRatePaymentBreakdownProps) {
+  const intl = useIntl()
+  const payNowTitle = intl.formatMessage({ id: "Pay now" })
+  const payAtCheckInTitle = intl.formatMessage({ id: "Pay at check-in" })
+
+  const initialState: PaymentBreakdownState = {
+    roomsWithPrepaidRate: [],
+    roomsWithFlexRate: [],
+    payNowPrice: 0,
+    payNowComparisonPrice: 0,
+    payAtCheckInPrice: 0,
+    payAtCheckInComparisonPrice: 0,
+  }
+
+  const {
+    roomsWithPrepaidRate,
+    roomsWithFlexRate,
+    payNowPrice,
+    payNowComparisonPrice,
+    payAtCheckInPrice,
+    payAtCheckInComparisonPrice,
+  } = rooms.reduce((acc, room, idx) => {
+    if (hasPrepaidRate(room)) {
+      acc.roomsWithPrepaidRate.push(idx)
+      const { totalPrice, comparisonPrice } = calculateTotalRoomPrice(room)
+      acc.payNowPrice += totalPrice
+      acc.payNowComparisonPrice += comparisonPrice
+    }
+    if (hasFlexibleRate(room)) {
+      acc.roomsWithFlexRate.push(idx)
+      const { totalPrice, comparisonPrice } = calculateTotalRoomPrice(room)
+      acc.payAtCheckInPrice += totalPrice
+      acc.payAtCheckInComparisonPrice += comparisonPrice
+    }
+    return acc
+  }, initialState)
+
+  return (
+    <div className={styles.container}>
+      <PaymentCard
+        title={payNowTitle}
+        price={payNowPrice}
+        comparisonPrice={payNowComparisonPrice}
+        currency={currency}
+        roomIndexes={roomsWithPrepaidRate}
+      />
+      <PaymentCard
+        title={payAtCheckInTitle}
+        price={payAtCheckInPrice}
+        comparisonPrice={payAtCheckInComparisonPrice}
+        currency={currency}
+        roomIndexes={roomsWithFlexRate}
+      />
+    </div>
+  )
+}
+
+interface PaymentCardProps {
+  title: string
+  price: number
+  comparisonPrice: number
+  currency: string
+  roomIndexes: number[]
+}
+
+function PaymentCard({
+  title,
+  price,
+  comparisonPrice,
+  currency,
+  roomIndexes,
+}: PaymentCardProps) {
+  const intl = useIntl()
+  const isMemberRateApplied = price < comparisonPrice
+
+  return (
+    <div className={styles.card}>
+      <Caption
+        type="bold"
+        textTransform="uppercase"
+        className={styles.cardTitle}
+      >
+        {title}{" "}
+        <span>
+          /{" "}
+          {intl.formatMessage(
+            { id: "Room {roomIndex}" },
+            {
+              roomIndex: roomIndexes.map((idx) => idx + 1).join(" & "),
+            }
+          )}
+        </span>
+      </Caption>
+      <Body textTransform="bold" className={styles.priceItem}>
+        {formatPrice(intl, price, currency)}
+        {isMemberRateApplied && comparisonPrice ? (
+          <span>{formatPrice(intl, comparisonPrice, currency)}</span>
+        ) : null}
+      </Body>
+    </div>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css
@@ -0,0 +1,36 @@
+.container {
+  display: flex;
+  gap: var(--Spacing-x1);
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  background-color: var(--Scandic-Blue-00);
+  padding: var(--Spacing-x-one-and-half);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.cardTitle {
+  text-transform: uppercase;
+}
+
+.cardTitle > span {
+  color: var(--UI-Text-Placeholder);
+}
+
+.card.inactive {
+  background-color: transparent;
+}
+
+.priceItem {
+  display: flex;
+  gap: var(--Spacing-x1);
+}
+
+.priceItem > span {
+  font-weight: 400;
+  text-decoration: line-through;
+}