fix/SW-674-rate-cards-vertically-aligned (pull request #858)

Fix/SW-674 rate cards vertically aligned * fix(SW-674): fix cards aligned * fix(SW-674): fix columns for smaller ipad/tablet * fix(SW-674): fix height on flexibility options * fix(SW-674): fix comments * fix(SW-674): remove margin * fix(SW-674): auto fill with columns Approved-by: Simon.Emanuelsson Approved-by: Pontus Dreij Approved-by: Niclas Edenvin
2024-11-14 10:31:11 +00:00
parent 3698d6a5bb
commit 3e62df27cc
3 changed files with 89 additions and 89 deletions
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
@@ -1,6 +1,6 @@
 "use client"

-import { createElement } from "react"
+import { createElement, useCallback } from "react"
 import { useIntl } from "react-intl"

 import { RateDefinition } from "@/server/routers/hotels/output"
@@ -69,9 +69,61 @@ export default function RoomCard({
  const { roomSize, occupancy, descriptions, images } = selectedRoom || {}
  const mainImage = images?.[0]

+  const freeCancelation = intl.formatMessage({ id: "Free cancellation" })
+  const nonRefundable = intl.formatMessage({ id: "Non-refundable" })
+  const freeBooking = intl.formatMessage({ id: "Free rebooking" })
+  const payLater = intl.formatMessage({ id: "Pay later" })
+  const payNow = intl.formatMessage({ id: "Pay now" })
+
+  const rateKey = useCallback(
+    (key: string) => {
+      switch (key) {
+        case "flexRate":
+          return freeCancelation
+        case "saveRate":
+          return nonRefundable
+        default:
+          return freeBooking
+      }
+    },
+    [freeCancelation, freeBooking, nonRefundable]
+  )
+
  return (
    <div className={styles.card}>
-      <div className={styles.cardBody}>
+      <div>
+        {mainImage && (
+          <div className={styles.imageContainer}>
+            <div className={styles.chipContainer}>
+              {roomConfiguration.roomsLeft < 5 && (
+                <span className={styles.chip}>
+                  <Footnote
+                    color="burgundy"
+                    textTransform="uppercase"
+                  >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
+                </span>
+              )}
+              {roomConfiguration.features
+                .filter((feature) => selectedPackages.includes(feature.code))
+                .map((feature) => (
+                  <span className={styles.chip} key={feature.code}>
+                    {createElement(getIconForFeatureCode(feature.code), {
+                      width: 16,
+                      height: 16,
+                      color: "burgundy",
+                    })}
+                  </span>
+                ))}
+            </div>
+            {/*NOTE: images from the test API are hosted on test3.scandichotels.com,
+         which can't be accessed unless on Scandic's Wifi or using Citrix. */}
+            <ImageGallery
+              images={images}
+              title={roomConfiguration.roomType}
+              fill
+            />
+          </div>
+        )}
        <div className={styles.specification}>
          <Caption color="uiTextMediumContrast" className={styles.guests}>
            {intl.formatMessage(
@@ -96,81 +148,39 @@ export default function RoomCard({
            )}
          </div>
        </div>
-        <div className={styles.container}>
-          <div className={styles.roomDetails}>
-            <Subtitle className={styles.name} type="two">
-              {roomConfiguration.roomType}
-            </Subtitle>
-            {/* Out of scope for now        
+        <div className={styles.roomDetails}>
+          <Subtitle className={styles.name} type="two">
+            {roomConfiguration.roomType}
+          </Subtitle>
+          {/* Out of scope for now        
            <Body>{descriptions?.short}</Body>
            */}
-            <Caption color="uiTextHighContrast" type="bold">
-              {intl.formatMessage({
-                id: "Breakfast selection in next step.",
-              })}
-            </Caption>
-          </div>
-
-          <div className={styles.flexibilityOptions}>
-            {Object.entries(rates).map(([key, rate]) => (
-              <FlexibilityOption
-                key={key}
-                name={intl.formatMessage({
-                  id:
-                    key === "flexRate"
-                      ? "Free cancellation"
-                      : key === "saveRate"
-                        ? "Non-refundable"
-                        : "Free rebooking",
-                })}
-                value={key.toLowerCase()}
-                paymentTerm={intl.formatMessage({
-                  id: key === "flexRate" ? "Pay later" : "Pay now",
-                })}
-                product={findProductForRate(rate)}
-                priceInformation={getPriceInformationForRate(rate)}
-                handleSelectRate={handleSelectRate}
-                roomType={roomConfiguration.roomType}
-                roomTypeCode={roomConfiguration.roomTypeCode}
-                features={roomConfiguration.features}
-                petRoomPackage={petRoomPackage}
-              />
-            ))}
-          </div>
        </div>
      </div>
-      {mainImage && (
-        <div className={styles.imageContainer}>
-          <div className={styles.chipContainer}>
-            {roomConfiguration.roomsLeft < 5 && (
-              <span className={styles.chip}>
-                <Footnote
-                  color="burgundy"
-                  textTransform="uppercase"
-                >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
-              </span>
-            )}
-            {roomConfiguration.features
-              .filter((feature) => selectedPackages.includes(feature.code))
-              .map((feature) => (
-                <span className={styles.chip} key={feature.code}>
-                  {createElement(getIconForFeatureCode(feature.code), {
-                    width: 16,
-                    height: 16,
-                    color: "burgundy",
-                  })}
-                </span>
-              ))}
-          </div>
-          {/*NOTE: images from the test API are hosted on test3.scandichotels.com,
-         which can't be accessed unless on Scandic's Wifi or using Citrix. */}
-          <ImageGallery
-            images={images}
-            title={roomConfiguration.roomType}
-            fill
-          />
+      <div className={styles.container}>
+        <Caption color="uiTextHighContrast" type="bold">
+          {intl.formatMessage({
+            id: "Breakfast selection in next step.",
+          })}
+        </Caption>
+        <div className={styles.flexibilityOptions}>
+          {Object.entries(rates).map(([key, rate]) => (
+            <FlexibilityOption
+              key={key}
+              name={rateKey(key)}
+              value={key.toLowerCase()}
+              paymentTerm={key === "flexRate" ? payLater : payNow}
+              product={findProductForRate(rate)}
+              priceInformation={getPriceInformationForRate(rate)}
+              handleSelectRate={handleSelectRate}
+              roomType={roomConfiguration.roomType}
+              roomTypeCode={roomConfiguration.roomTypeCode}
+              features={roomConfiguration.features}
+              petRoomPackage={petRoomPackage}
+            />
+          ))}
        </div>
-      )}
+      </div>
    </div>
  )
 }
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
@@ -1,16 +1,13 @@
 .card {
  font-size: 14px;
  display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
  background-color: #fff;
  border-radius: var(--Corner-radius-Large);
  border: 1px solid var(--Base-Border-Subtle);
  position: relative;
-}
-
-.cardBody {
-  display: flex;
-  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
 }

 .specification {
@@ -41,7 +38,8 @@
 .roomDetails {
  display: flex;
  flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x2);
 }

 .name {
--- a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
@@ -19,14 +19,6 @@
  width: 0;
 }

-@media (min-width: 767px) {
-  .roomList {
-    grid-template-columns: repeat(3, minmax(240px, 1fr));
-  }
-}
-
-@media (min-width: 1367px) {
-  .roomList {
-    grid-template-columns: repeat(4, 1fr);
-  }
+.roomList {
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 }