Merge branch 'develop' into feature/sw-561-design-fixes

2024-10-09 14:51:44 +02:00
parent 31356a264d 974b8aa1e4
commit aa38382b14
72 changed files with 1215 additions and 298 deletions
--- a/components/HotelReservation/EnterDetails/BedType/index.tsx
+++ b/components/HotelReservation/EnterDetails/BedType/index.tsx
@@ -5,7 +5,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"

 import { KingBedIcon } from "@/components/Icons"
-import RadioCard from "@/components/TempDesignSystem/Form/Card/Radio"
+import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"

 import { bedTypeSchema } from "./schema"

@@ -24,9 +24,7 @@ export default function BedType() {
    reValidateMode: "onChange",
  })

-  // @ts-expect-error - Types mismatch docs as this is
-  // a pattern that is allowed https://formatjs.io/docs/react-intl/api#usage
-  const text = intl.formatMessage(
+  const text = intl.formatMessage<React.ReactNode>(
    { id: "<b>Included</b> (based on availability)" },
    { b: (str) => <b>{str}</b> }
  )
--- a/components/HotelReservation/EnterDetails/Breakfast/index.tsx
+++ b/components/HotelReservation/EnterDetails/Breakfast/index.tsx
@@ -5,7 +5,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"

 import { BreakfastIcon, NoBreakfastIcon } from "@/components/Icons"
-import RadioCard from "@/components/TempDesignSystem/Form/Card/Radio"
+import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"

 import { breakfastSchema } from "./schema"

@@ -31,9 +31,7 @@ export default function Breakfast() {
          Icon={BreakfastIcon}
          id={breakfastEnum.BREAKFAST}
          name="breakfast"
-          // @ts-expect-error - Types mismatch docs as this is
-          // a pattern that is allowed https://formatjs.io/docs/react-intl/api#usage
-          subtitle={intl.formatMessage(
+          subtitle={intl.formatMessage<React.ReactNode>(
            { id: "<b>{amount} {currency}</b>/night per adult" },
            {
              amount: "150",
--- a/components/HotelReservation/EnterDetails/Details/index.tsx
+++ b/components/HotelReservation/EnterDetails/Details/index.tsx
@@ -4,7 +4,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"

 import Button from "@/components/TempDesignSystem/Button"
-import CheckboxCard from "@/components/TempDesignSystem/Form/Card/Checkbox"
+import CheckboxCard from "@/components/TempDesignSystem/Form/ChoiceCard/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
@@ -88,8 +88,9 @@ export default function Details({ user }: DetailsProps) {
        <footer className={styles.footer}>
          {user ? null : (
            <CheckboxCard
+              highlightSubtitle
              list={list}
-              saving
+              name="join"
              subtitle={intl.formatMessage(
                {
                  id: "{difference}{amount} {currency}",
--- a/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx
+++ b/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { EditIcon, ImageIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./selectedRoom.module.css"
+
+export default function SelectedRoom() {
+  const intl = useIntl()
+  return (
+    <article className={styles.container}>
+      <div className={styles.tempImage}>
+        <ImageIcon
+          color="baseButtonTertiaryOnFillNormal"
+          height={60}
+          width={60}
+        />
+      </div>
+      <div className={styles.content}>
+        <div className={styles.textContainer}>
+          <Footnote
+            className={styles.label}
+            color="uiTextPlaceholder"
+            textTransform="uppercase"
+          >
+            {intl.formatMessage({ id: "Your room" })}
+          </Footnote>
+          <div className={styles.text}>
+            {/**
+             * [TEMP]
+             * No translation on Subtitles as they will be derived
+             * from Room selection.
+             */}
+            <Subtitle
+              className={styles.room}
+              color="uiTextHighContrast"
+              type="two"
+            >
+              Cozy cabin
+            </Subtitle>
+            <Subtitle
+              className={styles.invertFontWeight}
+              color="uiTextMediumContrast"
+              type="two"
+            >
+              Free rebooking
+            </Subtitle>
+            <Subtitle
+              className={styles.invertFontWeight}
+              color="uiTextMediumContrast"
+              type="two"
+            >
+              Pay now
+            </Subtitle>
+          </div>
+        </div>
+        <Button
+          asChild
+          intent="tertiary"
+          size="small"
+          theme="base"
+          variant="icon"
+        >
+          <Link href="#">
+            <EditIcon color="baseButtonTertiaryOnFillNormal" />
+            {intl.formatMessage({ id: "Modify" })}
+          </Link>
+        </Button>
+      </div>
+    </article>
+  )
+}
--- a/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css
+++ b/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css
@@ -0,0 +1,51 @@
+.container {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Large);
+  display: grid;
+  grid-template-columns: 144px 1fr;
+  gap: var(--Spacing-x3);
+  padding: var(--Spacing-x2) var(--Spacing-x4) var(--Spacing-x2)
+    var(--Spacing-x2);
+}
+
+.tempImage {
+  align-items: center;
+  background-color: lightgray;
+  border-radius: var(--Corner-radius-Medium);
+  display: flex;
+  height: auto;
+  justify-content: center;
+  min-height: 80px;
+}
+
+.content {
+  align-items: center;
+  display: grid;
+  gap: var(--Spacing-x3);
+  grid-template-columns: 1fr auto;
+}
+
+.textContainer {
+  display: grid;
+}
+
+.label {
+  grid-column: 1 / -1;
+}
+
+.text {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--Spacing-x1);
+}
+
+p.invertFontWeight {
+  font-weight: 400;
+}
+
+.invertFontWeight:not(:last-of-type)::after,
+.room::after {
+  color: var(--UI-Text-Medium-contrast);
+  content: "∙";
+  padding-left: var(--Spacing-x1);
+}
--- a/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css
+++ b/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css
@@ -1,10 +1,13 @@
 .hotelSelectionHeader {
-  display: flex;
-  flex-direction: column;
  background-color: var(--Base-Surface-Subtle-Normal);
  padding: var(--Spacing-x3) var(--Spacing-x2);
-  justify-content: center;
+}
+
+.hotelSelectionHeaderWrapper {
+  display: flex;
+  flex-direction: column;
  gap: var(--Spacing-x3);
+  justify-content: center;
 }

 .titleContainer {
@@ -33,9 +36,15 @@

@media (min-width: 768px) {
  .hotelSelectionHeader {
-    flex-direction: row;
    padding: var(--Spacing-x4) var(--Spacing-x5);
+  }
+
+  .hotelSelectionHeaderWrapper {
+    flex-direction: row;
    gap: var(--Spacing-x6);
+    max-width: var(--max-width-navigation);
+    margin: 0 auto;
+    width: 100%;
  }

  .titleContainer > h1 {
--- a/components/HotelReservation/HotelSelectionHeader/index.tsx
+++ b/components/HotelReservation/HotelSelectionHeader/index.tsx
@@ -19,35 +19,35 @@ export default function HotelSelectionHeader({

  return (
    <header className={styles.hotelSelectionHeader}>
-      <div className={styles.titleContainer}>
-        <Title as="h3" level="h1">
-          {hotel.name}
-        </Title>
-        <address className={styles.address}>
-          <Caption color="textMediumContrast">
-            {hotel.address.streetAddress}, {hotel.address.city}
-          </Caption>
-          <div>
-            <Divider variant="vertical" color="subtle" />
-          </div>
-          <Caption color="textMediumContrast">
-            {intl.formatMessage(
-              {
-                id: "Distance to city centre",
-              },
-              { number: hotel.location.distanceToCentre }
-            )}
-          </Caption>
-        </address>
-      </div>
-      <div className={styles.dividerContainer}>
-        <Divider variant="vertical" color="subtle" />
-      </div>
-      <div className={styles.descriptionContainer}>
-        <Body color="textHighContrast">
-          {hotel.hotelContent.texts.descriptions.short}
-        </Body>
-        <HotelDetailSidePeek />
+      <div className={styles.hotelSelectionHeaderWrapper}>
+        <div className={styles.titleContainer}>
+          <Title as="h3" level="h1">
+            {hotel.name}
+          </Title>
+          <address className={styles.address}>
+            <Caption color="textMediumContrast">
+              {hotel.address.streetAddress}, {hotel.address.city}
+            </Caption>
+            <div>
+              <Divider variant="vertical" color="subtle" />
+            </div>
+            <Caption color="textMediumContrast">
+              {intl.formatMessage(
+                { id: "Distance to city centre" },
+                { number: hotel.location.distanceToCentre }
+              )}
+            </Caption>
+          </address>
+        </div>
+        <div className={styles.dividerContainer}>
+          <Divider variant="vertical" color="subtle" />
+        </div>
+        <div className={styles.descriptionContainer}>
+          <Body color="textHighContrast">
+            {hotel.hotelContent.texts.descriptions.short}
+          </Body>
+          <HotelDetailSidePeek />
+        </div>
      </div>
    </header>
  )
--- a/components/HotelReservation/SelectRate/Payment/index.tsx
+++ b/components/HotelReservation/SelectRate/Payment/index.tsx
@@ -129,7 +129,7 @@ export default function Payment({ hotel }: PaymentProps) {
              name="payment-method"
              id="card"
              value="card"
-              checked={selectedPaymentMethod === "card"}
+              defaultChecked={selectedPaymentMethod === "card"}
            />
            <label htmlFor="card">card</label>
          </button>
@@ -145,7 +145,7 @@ export default function Payment({ hotel }: PaymentProps) {
                  name="payment-method"
                  id={paymentOption}
                  value={paymentOption}
-                  checked={selectedPaymentMethod === paymentOption}
+                  defaultChecked={selectedPaymentMethod === paymentOption}
                />
                <label htmlFor={paymentOption}>{paymentOption}</label>
              </button>
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
@@ -9,17 +9,31 @@ 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>
+  }
+
+  const { productType } = product
+  const { public: publicPrice, member: memberPrice } = productType
+  const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
+    publicPrice
+  const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
+    memberPrice
+
  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 +43,27 @@ export default function FlexibilityOption({
          <div>
            <dt>{intl.formatMessage({ id: "Standard price" })}</dt>
            <dd>
-              {standardPrice} {currency}
+              {publicLocalPrice.pricePerNight} {publicLocalPrice.currency}/
+              {intl.formatMessage({ id: "night" })}
            </dd>
          </div>
          <div>
            <dt>{intl.formatMessage({ id: "Member price" })}</dt>
            <dd>
-              {memberPrice} {currency}
+              {memberLocalPrice.pricePerNight} {memberLocalPrice.currency}/
+              {intl.formatMessage({ id: "night" })}
            </dd>
          </div>
+          {publicRequestedPrice && memberRequestedPrice && (
+            <div>
+              <dt>{intl.formatMessage({ id: "Approx." })}</dt>
+              <dd>
+                {publicRequestedPrice.pricePerNight}/
+                {memberRequestedPrice.pricePerNight}{" "}
+                {publicRequestedPrice.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);
 }
--- a/components/HotelReservation/SelectRate/SectionAccordion/sectionAccordion.module.css
+++ b/components/HotelReservation/SelectRate/SectionAccordion/sectionAccordion.module.css
@@ -40,7 +40,7 @@
 .iconWrapper {
  position: relative;
  top: var(--Spacing-x1);
-  z-index: 10;
+  z-index: 2;
 }

 .circle {