feat(SW-718) Refactor select rate to support multiroom

2025-01-21 10:31:15 +01:00
parent 7d716dcf4a
commit edcf146ce1
27 changed files with 202 additions and 131 deletions
--- a/components/HotelReservation/SelectRate/RoomList/FlexibilityOption/PriceList/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomList/FlexibilityOption/PriceList/index.tsx
@@ -0,0 +1,143 @@
+import { useSearchParams } from "next/navigation"
+import { useIntl } from "react-intl"
+
+import { dt } from "@/lib/dt"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import { calculatePricesPerNight } from "./utils"
+
+import styles from "./priceList.module.css"
+
+import type { PriceListProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
+
+export default function PriceList({
+  publicPrice = {},
+  memberPrice = {},
+  petRoomPackage,
+}: PriceListProps) {
+  const intl = useIntl()
+
+  const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
+    publicPrice
+  const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
+    memberPrice
+
+  const petRoomLocalPrice = petRoomPackage?.localPrice
+  const petRoomRequestedPrice = petRoomPackage?.requestedPrice
+
+  const showRequestedPrice =
+    publicRequestedPrice &&
+    memberRequestedPrice &&
+    publicRequestedPrice.currency !== publicLocalPrice.currency
+  const searchParams = useSearchParams()
+  const fromDate = searchParams.get("fromDate")
+  const toDate = searchParams.get("toDate")
+
+  let nights = 1
+
+  if (fromDate && toDate) {
+    nights = dt(toDate).diff(dt(fromDate), "days")
+  }
+
+  const {
+    totalPublicLocalPricePerNight,
+    totalMemberLocalPricePerNight,
+    totalPublicRequestedPricePerNight,
+    totalMemberRequestedPricePerNight,
+  } = calculatePricesPerNight({
+    publicLocalPrice,
+    memberLocalPrice,
+    publicRequestedPrice,
+    memberRequestedPrice,
+    petRoomLocalPrice,
+    petRoomRequestedPrice,
+    nights,
+  })
+
+  return (
+    <dl className={styles.priceList}>
+      <div className={styles.priceRow}>
+        <dt>
+          <Caption
+            type="bold"
+            color={
+              totalPublicLocalPricePerNight ? "uiTextHighContrast" : "disabled"
+            }
+          >
+            {intl.formatMessage({ id: "Standard price" })}
+          </Caption>
+        </dt>
+        <dd>
+          {publicLocalPrice ? (
+            <div className={styles.price}>
+              <Subtitle type="two" color="uiTextHighContrast">
+                {totalPublicLocalPricePerNight}
+              </Subtitle>
+              <Body color="uiTextHighContrast" textTransform="bold">
+                {publicLocalPrice.currency}
+                <span className={styles.perNight}>
+                  /{intl.formatMessage({ id: "night" })}
+                </span>
+              </Body>
+            </div>
+          ) : (
+            <Subtitle type="two" color="baseTextDisabled">
+              {intl.formatMessage({ id: "N/A" })}
+            </Subtitle>
+          )}
+        </dd>
+      </div>
+
+      <div className={styles.priceRow}>
+        <dt>
+          <Caption type="bold" color={memberLocalPrice ? "red" : "disabled"}>
+            {intl.formatMessage({ id: "Member price" })}
+          </Caption>
+        </dt>
+        <dd>
+          {memberLocalPrice ? (
+            <div className={styles.price}>
+              <Subtitle type="two" color="red">
+                {totalMemberLocalPricePerNight}
+              </Subtitle>
+              <Body color="red" textTransform="bold">
+                {memberLocalPrice.currency}
+                <span className={styles.perNight}>
+                  /{intl.formatMessage({ id: "night" })}
+                </span>
+              </Body>
+            </div>
+          ) : (
+            <Body textTransform="bold" color="disabled">
+              -
+            </Body>
+          )}
+        </dd>
+      </div>
+      {showRequestedPrice && (
+        <div className={styles.priceRow}>
+          <dt>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage({ id: "Approx." })}
+            </Caption>
+          </dt>
+          <dd>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage(
+                { id: "{publicPrice}/{memberPrice} {currency}" },
+                {
+                  publicPrice: totalPublicRequestedPricePerNight,
+                  memberPrice: totalMemberRequestedPricePerNight,
+                  currency: publicRequestedPrice.currency,
+                }
+              )}
+            </Caption>
+          </dd>
+        </div>
+      )}
+    </dl>
+  )
+}