feat(SW-415): Update Room card UI

2024-10-09 11:03:02 +02:00
parent 67df5f0771
commit 79442d80b8
19 changed files with 378 additions and 297 deletions
--- a/components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css
+++ b/components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css
@@ -32,6 +32,10 @@
  display: none;
 }

+.infoIcon {
+  stroke: var(--Base-Text-Disabled);
+}
+
@media screen and (min-width: 768px) {
  .vouchers {
    display: none;
--- a/components/Forms/BookingWidget/FormContent/formContent.module.css
+++ b/components/Forms/BookingWidget/FormContent/formContent.module.css
@@ -1,7 +1,3 @@
-.infoIcon {
-  stroke: var(--Base-Text-Disabled);
-}
-
 .vouchersHeader {
  display: flex;
  gap: var(--Spacing-x-one-and-half);
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceTable/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceTable/index.tsx
@@ -0,0 +1,56 @@
+import { useIntl } from "react-intl"
+
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import { PriceTableProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
+
+export default function PriceTable({
+  publicPrice,
+  memberPrice,
+}: PriceTableProps) {
+  const intl = useIntl()
+
+  const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
+    publicPrice || {}
+  const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
+    memberPrice || {}
+
+  const showRequestedPrice = publicRequestedPrice && memberRequestedPrice
+
+  return (
+    <dl>
+      <div>
+        <dt>{intl.formatMessage({ id: "Standard price" })}</dt>
+        <dd>
+          {publicLocalPrice ? (
+            <>
+              {publicLocalPrice.pricePerNight} {publicLocalPrice.currency}/
+              {intl.formatMessage({ id: "night" })}
+            </>
+          ) : (
+            <Subtitle type="two">{intl.formatMessage({ id: "n/a" })}</Subtitle>
+          )}
+        </dd>
+      </div>
+
+      {memberLocalPrice && (
+        <div>
+          <dt>{intl.formatMessage({ id: "Member price" })}</dt>
+          <dd>
+            {memberLocalPrice.pricePerNight} {memberLocalPrice.currency}/
+            {intl.formatMessage({ id: "night" })}
+          </dd>
+        </div>
+      )}
+      {showRequestedPrice && (
+        <div>
+          <dt>{intl.formatMessage({ id: "Approx." })}</dt>
+          <dd>
+            {publicRequestedPrice.pricePerNight}/
+            {memberRequestedPrice.pricePerNight} {publicRequestedPrice.currency}
+          </dd>
+        </div>
+      )}
+    </dl>
+  )
+}
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css
@@ -1,15 +1,32 @@
-.card {
-  font-size: 14px;
-  border-radius: var(--Corner-radius-Medium);
-  border: 1px solid var(--Base-Border-Normal);
+.card,
+.disabledCard {
+  border-radius: var(--Corner-radius-Large);
  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  background-color: var(--Base-Surface-Primary-light-Hover);
 }

+.disabledCard {
+  opacity: 0.6;
+}
+
+.disabledCard:hover {
+  cursor: not-allowed;
+}
+
+.card:hover {
+  cursor: pointer;
+}
 input[type="radio"]:checked + .card {
  background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }

 .header {
  display: flex;
-  justify-content: space-between;
+  gap: var(--Spacing-x-half);
+}
+
+.header .infoIcon,
+.header .infoIcon * {
+  stroke: var(--Base-Text-Disabled);
+  fill: var(--Base-Surface-Primary-light-Hover);
 }
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
@@ -1,9 +1,11 @@
 "use client"
 import { useIntl } from "react-intl"

-import Body from "@/components/TempDesignSystem/Text/Body"
+import { InfoCircleIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"

+import PriceTable from "./PriceTable"
+
 import styles from "./flexibilityOption.module.css"

 import { FlexibilityOptionProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
@@ -16,55 +18,35 @@ export default function FlexibilityOption({
  const intl = useIntl()

  if (!product) {
-    // TODO: Implement empty state when this rate can't be booked
-    return <div>TBI: Rate not available</div>
+    return (
+      <div className={styles.disabledCard}>
+        <div className={styles.header}>
+          <InfoCircleIcon className={styles.infoIcon} />
+          <Caption>{name}</Caption>
+          <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
+          <PriceTable />
+        </div>
+      </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="rateCode"
-        value={product.productType.public.rateCode}
+        value={product.productType.public?.rateCode}
      />
      <div className={styles.card}>
        <div className={styles.header}>
-          <Body>{name}</Body>
-          <Caption>{paymentTerm}</Caption>
+          <InfoCircleIcon className={styles.infoIcon} />
+          <Caption>{name}</Caption>
+          <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
+          <PriceTable publicPrice={publicPrice} memberPrice={memberPrice} />
        </div>
-        <dl>
-          <div>
-            <dt>{intl.formatMessage({ id: "Standard price" })}</dt>
-            <dd>
-              {publicLocalPrice.pricePerNight} {publicLocalPrice.currency}/
-              {intl.formatMessage({ id: "night" })}
-            </dd>
-          </div>
-          <div>
-            <dt>{intl.formatMessage({ id: "Member price" })}</dt>
-            <dd>
-              {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
@@ -2,6 +2,7 @@
 import { useIntl } from "react-intl"

 import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
+import { ChevronRightSmallIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -32,22 +33,22 @@ export default function RoomCard({
  const saveProduct = saveRate
    ? roomConfiguration.products.find(
        (product) =>
-          product.productType.public.rateCode === saveRate.rateCode ||
-          product.productType.member.rateCode === saveRate.rateCode
+          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
+          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
+          product.productType.public?.rateCode === flexRate.rateCode ||
+          product.productType.member?.rateCode === flexRate.rateCode
      )
    : undefined

@@ -55,14 +56,7 @@ export default function RoomCard({
    <div className={styles.card}>
      <div className={styles.cardBody}>
        <div className={styles.specification}>
-          <Subtitle className={styles.name} type="two">
-            {roomConfiguration.roomType}
-          </Subtitle>
-          <Caption>Room size TBI</Caption>
-          <Button intent="text" type="button" size="small" theme="base">
-            {intl.formatMessage({ id: "See room details" })}
-          </Button>
-          <Caption>
+          <Caption color="uiTextMediumContrast" className={styles.guests}>
            {/*TODO: Handle pluralisation*/}
            {intl.formatMessage(
              {
@@ -72,39 +66,53 @@ export default function RoomCard({
              // TODO: Correct number
              { nrOfGuests: 2 }
            )}
+          </Caption>
+          {
+            // Room size TBI
+          }
+          <Caption color="uiTextMediumContrast">11-13 m²</Caption>
+          <Button
+            intent="text"
+            type="button"
+            size="small"
+            theme="base"
+            className={styles.button}
+          >
+            {intl.formatMessage({ id: "See room details" })}
+            <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
+          </Button>
+        </div>
+        <div className={styles.container}>
+          <Subtitle className={styles.name} type="two">
+            {roomConfiguration.roomType}
+          </Subtitle>
+          <Caption>Room INFORMATION </Caption>
+
+          <Caption color="uiTextPlaceholder">
            {intl.formatMessage({
              id: "Breakfast included",
            })}
          </Caption>
+
+          <FlexibilityOption
+            name={intl.formatMessage({ id: "Non-refundable" })}
+            value="non-refundable"
+            paymentTerm={intl.formatMessage({ id: "Pay now" })}
+            product={saveProduct}
+          />
+          <FlexibilityOption
+            name={intl.formatMessage({ id: "Free rebooking" })}
+            value="free-rebooking"
+            paymentTerm={intl.formatMessage({ id: "Pay now" })}
+            product={changeProduct}
+          />
+          <FlexibilityOption
+            name={intl.formatMessage({ id: "Free cancellation" })}
+            value="free-cancellation"
+            paymentTerm={intl.formatMessage({ id: "Pay later" })}
+            product={flexProduct}
+          />
        </div>
-
-        <FlexibilityOption
-          name={intl.formatMessage({ id: "Non-refundable" })}
-          value="non-refundable"
-          paymentTerm={intl.formatMessage({ id: "Pay now" })}
-          product={saveProduct}
-        />
-        <FlexibilityOption
-          name={intl.formatMessage({ id: "Free rebooking" })}
-          value="free-rebooking"
-          paymentTerm={intl.formatMessage({ id: "Pay now" })}
-          product={changeProduct}
-        />
-        <FlexibilityOption
-          name={intl.formatMessage({ id: "Free cancellation" })}
-          value="free-cancellation"
-          paymentTerm={intl.formatMessage({ id: "Pay later" })}
-          product={flexProduct}
-        />
-
-        <Button
-          type="submit"
-          size="small"
-          theme="primaryDark"
-          className={styles.button}
-        >
-          {intl.formatMessage({ id: "Choose room" })}
-        </Button>
      </div>
      {/* TODO: maybe use the `Image` component instead of the `img` tag. Waiting until we know how to get the image */}
      {/* eslint-disable-next-line @next/next/no-img-element */}
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
@@ -8,14 +8,33 @@
 }

 .cardBody {
-  padding: var(--Spacing-x1);
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x1);
 }

 .specification {
-  padding: var(--Spacing-x1);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--Spacing-x1);
+  padding: 0 var(--Spacing-x1) 0 var(--Spacing-x-one-and-half);
+  height: 40px;
+}
+
+.specification .guests {
+  border-right: 1px solid var(--Base-Border-Subtle);
+  padding-right: var(--Spacing-x1);
+}
+
+.specification .button {
+  margin-left: auto;
+  padding: 0 0 0 var(--Spacing-x-half);
+  text-decoration: none;
+}
+
+.container {
+  padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x2);
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x1);
@@ -25,10 +44,6 @@
  display: inline-block;
 }

-.card .button {
-  display: inline;
-}
-
 .card img {
  max-width: 100%;
  aspect-ratio: 16/9;
--- a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
@@ -8,8 +8,7 @@
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
-  column-gap: var(--Spacing-x2);
-  row-gap: var(--Spacing-x4);
+  gap: var(--Spacing-x3);
 }

 .roomList > li {
--- a/components/TempDesignSystem/Text/Caption/caption.module.css
+++ b/components/TempDesignSystem/Text/Caption/caption.module.css
@@ -75,6 +75,10 @@ p.caption {
  color: var(--UI-Text-High-contrast);
 }

+.uiTextPlaceholder {
+  color: var(--UI-Text-Placeholder);
+}
+
 .disabled {
  color: var(--Base-Text-Disabled);
 }
--- a/components/TempDesignSystem/Text/Caption/variants.ts
+++ b/components/TempDesignSystem/Text/Caption/variants.ts
@@ -15,6 +15,7 @@ const config = {
      uiTextHighContrast: styles.uiTextHighContrast,
      uiTextActive: styles.uiTextActive,
      uiTextMediumContrast: styles.uiTextMediumContrast,
+      uiTextPlaceholder: styles.uiTextPlaceholder,
      disabled: styles.disabled,
    },
    textTransform: {