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,76 +69,29 @@ 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 className={styles.specification}>
-          <Caption color="uiTextMediumContrast" className={styles.guests}>
-            {intl.formatMessage(
-              {
-                id: "booking.guests",
-              },
-              { nrOfGuests: occupancy?.total }
-            )}
-          </Caption>
-          <Caption color="uiTextMediumContrast">
-            {roomSize?.min === roomSize?.max
-              ? roomSize?.min
-              : `${roomSize?.min}-${roomSize?.max}`}
-            m²
-          </Caption>
-          <div className={styles.toggleSidePeek}>
-            {roomConfiguration.roomTypeCode && (
-              <ToggleSidePeek
-                hotelId={hotelId}
-                roomTypeCode={roomConfiguration.roomTypeCode}
-              />
-            )}
-          </div>
-        </div>
-        <div className={styles.container}>
-          <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>
+      <div>
        {mainImage && (
          <div className={styles.imageContainer}>
            <div className={styles.chipContainer}>
@@ -171,6 +124,63 @@ export default function RoomCard({
            />
          </div>
        )}
+        <div className={styles.specification}>
+          <Caption color="uiTextMediumContrast" className={styles.guests}>
+            {intl.formatMessage(
+              {
+                id: "booking.guests",
+              },
+              { nrOfGuests: occupancy?.total }
+            )}
+          </Caption>
+          <Caption color="uiTextMediumContrast">
+            {roomSize?.min === roomSize?.max
+              ? roomSize?.min
+              : `${roomSize?.min}-${roomSize?.max}`}
+            m²
+          </Caption>
+          <div className={styles.toggleSidePeek}>
+            {roomConfiguration.roomTypeCode && (
+              <ToggleSidePeek
+                hotelId={hotelId}
+                roomTypeCode={roomConfiguration.roomTypeCode}
+              />
+            )}
+          </div>
+        </div>
+        <div className={styles.roomDetails}>
+          <Subtitle className={styles.name} type="two">
+            {roomConfiguration.roomType}
+          </Subtitle>
+          {/* Out of scope for now        
+            <Body>{descriptions?.short}</Body>
+            */}
+        </div>
+      </div>
+      <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));
 }