From 3e62df27cc9acea5714f775511c326b1b543e8e5 Mon Sep 17 00:00:00 2001
From: Bianca Widstam <bianca.widstam@scandichotels.com>
Date: Thu, 14 Nov 2024 10:31:11 +0000
Subject: [PATCH] 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
---
 .../RoomSelection/RoomCard/index.tsx          | 154 ++++++++++--------
 .../RoomCard/roomCard.module.css              |  12 +-
 .../RoomSelection/roomSelection.module.css    |  12 +-
 3 files changed, 89 insertions(+), 89 deletions(-)

diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
index c9a5e2143..70f1c5aa6 100644
--- 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>
   )
 }
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
index 799726d1b..1d7ac0a0e 100644
--- 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 {
diff --git a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
index 1dab63afb..3da3c9fb2 100644
--- 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));
 }