SW-454 Use the API on select room page

2024-10-08 15:22:51 +02:00
parent 4b9a6d2e8e
commit baf6ed9f2b
12 changed files with 348 additions and 92 deletions
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
@@ -9,17 +9,23 @@ import styles from "./flexibilityOption.module.css"
 import { FlexibilityOptionProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"

 export default function FlexibilityOption({
-  currency,
-  standardPrice,
-  memberPrice,
+  product,
  name,
-  value,
  paymentTerm,
 }: FlexibilityOptionProps) {
  const intl = useIntl()
+
+  if (!product) {
+    // TODO: Implement empty state when this rate can't be booked
+    return <div>TBI: Rate not available</div>
+  }
  return (
    <label>
-      <input type="radio" name="flexibility" value={value} />
+      <input
+        type="radio"
+        name="rateCode"
+        value={product.productType.public.rateCode}
+      />
      <div className={styles.card}>
        <div className={styles.header}>
          <Body>{name}</Body>
@@ -29,15 +35,30 @@ export default function FlexibilityOption({
          <div>
            <dt>{intl.formatMessage({ id: "Standard price" })}</dt>
            <dd>
-              {standardPrice} {currency}
+              {product.productType.public.localPrice.pricePerNight}{" "}
+              {product.productType.public.localPrice.currency}/
+              {intl.formatMessage({ id: "night" })}
            </dd>
          </div>
          <div>
            <dt>{intl.formatMessage({ id: "Member price" })}</dt>
            <dd>
-              {memberPrice} {currency}
+              {product.productType.member.localPrice.pricePerNight}{" "}
+              {product.productType.member.localPrice.currency}/
+              {intl.formatMessage({ id: "night" })}
            </dd>
          </div>
+          {product.productType.public.requestedPrice &&
+            product.productType.member.requestedPrice && (
+              <div>
+                <dt>{intl.formatMessage({ id: "Approx." })}</dt>
+                <dd>
+                  {product.productType.public.requestedPrice.pricePerNight}/
+                  {product.productType.member.requestedPrice.pricePerNight}{" "}
+                  {product.productType.public.requestedPrice.currency}
+                </dd>
+              </div>
+            )}
        </dl>
      </div>
    </label>
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
@@ -11,20 +11,54 @@ import styles from "./roomCard.module.css"
 import { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"

 export default function RoomCard({
-  room,
-  nrOfAdults,
-  nrOfNights,
-  breakfastIncluded,
+  rateDefinitions,
+  roomConfiguration,
 }: RoomCardProps) {
  const intl = useIntl()
+
+  const saveRate = rateDefinitions.find(
+    // TODO: Update string when API has decided
+    (rate) => rate.cancellationRule === "NonCancellable"
+  )
+  const changeRate = rateDefinitions.find(
+    // TODO: Update string when API has decided
+    (rate) => rate.cancellationRule === "Modifiable"
+  )
+  const flexRate = rateDefinitions.find(
+    // TODO: Update string when API has decided
+    (rate) => rate.cancellationRule === "CancellableBefore6PM"
+  )
+
+  const saveProduct = saveRate
+    ? roomConfiguration.products.find(
+        (product) =>
+          product.productType.public.rateCode === saveRate.rateCode ||
+          product.productType.member.rateCode === saveRate.rateCode
+      )
+    : undefined
+  const changeProduct = changeRate
+    ? roomConfiguration.products.find(
+        (product) =>
+          product.productType.public.rateCode === changeRate.rateCode ||
+          product.productType.member.rateCode === changeRate.rateCode
+      )
+    : undefined
+  const flexProduct = flexRate
+    ? roomConfiguration.products.find(
+        (product) =>
+          product.productType.public.rateCode === flexRate.rateCode ||
+          product.productType.member.rateCode === flexRate.rateCode
+      )
+    : undefined
+
  return (
    <div className={styles.card}>
      <div className={styles.cardBody}>
        <div className={styles.specification}>
          <Subtitle className={styles.name} type="two">
-            {room.name}
+            {roomConfiguration.roomType}
          </Subtitle>
-          <Caption>{room.size}</Caption>
+          <Caption>Room size TBI</Caption>
          <Button intent="text" type="button" size="small" theme="base">
            {intl.formatMessage({ id: "See room details" })}
          </Button>
@@ -32,20 +66,15 @@ export default function RoomCard({
            {/*TODO: Handle pluralisation*/}
            {intl.formatMessage(
              {
-                id: "Nr night, nr adult",
-                defaultMessage:
-                  "{nights, number} night, {adults, number} adult",
+                id: "Max {nrOfGuests} guests",
+                defaultMessage: "Max {nrOfGuests} guests",
              },
-              { nights: nrOfNights, adults: nrOfAdults }
+              // TODO: Correct number
+              { nrOfGuests: 2 }
            )}
-            {" | "}
-            {breakfastIncluded
-              ? intl.formatMessage({
-                  id: "Breakfast included",
-                })
-              : intl.formatMessage({
-                  id: "Breakfast excluded",
-                })}
+            {intl.formatMessage({
+              id: "Breakfast included",
+            })}
          </Caption>
        </div>

@@ -53,25 +82,19 @@ export default function RoomCard({
          name={intl.formatMessage({ id: "Non-refundable" })}
          value="non-refundable"
          paymentTerm={intl.formatMessage({ id: "Pay now" })}
-          standardPrice={room.prices.nonRefundable.standard}
-          memberPrice={room.prices.nonRefundable.member}
-          currency={room.prices.currency}
+          product={saveProduct}
        />
        <FlexibilityOption
          name={intl.formatMessage({ id: "Free rebooking" })}
          value="free-rebooking"
          paymentTerm={intl.formatMessage({ id: "Pay now" })}
-          standardPrice={room.prices.freeRebooking.standard}
-          memberPrice={room.prices.freeRebooking.member}
-          currency={room.prices.currency}
+          product={changeProduct}
        />
        <FlexibilityOption
          name={intl.formatMessage({ id: "Free cancellation" })}
          value="free-cancellation"
          paymentTerm={intl.formatMessage({ id: "Pay later" })}
-          standardPrice={room.prices.freeCancellation.standard}
-          memberPrice={room.prices.freeCancellation.member}
-          currency={room.prices.currency}
+          product={flexProduct}
        />

        <Button
@@ -87,7 +110,8 @@ export default function RoomCard({
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        alt={intl.formatMessage({ id: "A photo of the room" })}
-        src={room.imageSrc}
+        // TODO: Correct image URL
+        src="https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg"
      />
    </div>
  )
--- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
@@ -1,5 +1,8 @@
 "use client"
 import { useRouter, useSearchParams } from "next/navigation"
+import { useIntl } from "react-intl"
+
+import Button from "@/components/TempDesignSystem/Button"

 import RoomCard from "./RoomCard"

@@ -8,12 +11,11 @@ import styles from "./roomSelection.module.css"
 import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"

 export default function RoomSelection({
-  rates,
-  nrOfNights,
-  nrOfAdults,
+  roomConfigurations,
 }: RoomSelectionProps) {
  const router = useRouter()
  const searchParams = useSearchParams()
+  const intl = useIntl()

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
@@ -25,31 +27,28 @@ export default function RoomSelection({

  return (
    <div className={styles.wrapper}>
-      <ul className={styles.roomList}>
-        {rates.map((room) => (
-          <li key={room.id}>
-            <form
-              method="GET"
-              action={`select-bed?${searchParams}`}
-              onSubmit={handleSubmit}
-            >
-              <input
-                type="hidden"
-                name="roomClass"
-                value={room.id}
-                id={`room-${room.id}`}
-              />
+      <form
+        method="GET"
+        action={`select-bed?${searchParams}`}
+        onSubmit={handleSubmit}
+      >
+        <ul className={styles.roomList}>
+          {roomConfigurations.roomConfigurations.map((roomConfiguration) => (
+            <li key={roomConfiguration.roomType}>
              <RoomCard
-                room={room}
-                nrOfAdults={nrOfAdults}
-                nrOfNights={nrOfNights}
-                breakfastIncluded={room.breakfastIncluded}
+                rateDefinitions={roomConfigurations.rateDefinitions}
+                roomConfiguration={roomConfiguration}
              />
-            </form>
-          </li>
-        ))}
-      </ul>
-      <div className={styles.summary}>This is summary</div>
+            </li>
+          ))}
+        </ul>
+        <div className={styles.summary}>
+          This is summary
+          <Button type="submit" size="small" theme="primaryDark">
+            {intl.formatMessage({ id: "Choose room" })}
+          </Button>
+        </div>
+      </form>
    </div>
  )
 }
--- a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
@@ -27,4 +27,6 @@
  bottom: 0;
  left: 0;
  right: 0;
+  background-color: white;
+  padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
 }