feat(SW-415): Update Room card UI

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>
+  )
+}

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);
 }

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>
   )