Merge branch 'master' into feat/sw-929-release-preps

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css

@@ -46,6 +46,13 @@ input[type="radio"]:checked + .card .checkIcon {
 .header {
   display: flex;
   gap: var(--Spacing-x-half);
+  align-items: flex-start;
+}
+
+.priceType {
+  display: flex;
+  gap: var(--Spacing-x-half);
+  flex-wrap: wrap;
 }
 
 .button {

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx

@@ -36,7 +36,7 @@ export default function FlexibilityOption({
         </div>
         <Label size="regular" className={styles.noPricesLabel}>
           <Caption color="uiTextHighContrast" type="bold">
-            {intl.formatMessage({ id: "No Prices available" })}
+            {intl.formatMessage({ id: "No prices available" })}
           </Caption>
         </Label>
       </div>
@@ -46,15 +46,10 @@ export default function FlexibilityOption({
   const { public: publicPrice, member: memberPrice } = product.productType
 
   function onChange() {
-    const rate = {
-      roomTypeCode,
-      roomType,
-      priceName: name,
-      public: publicPrice,
-      member: memberPrice,
-      features: petRoomPackage ? features : [],
-    }
-    handleSelectRate(rate)
+    handleSelectRate({
+      publicRateCode: publicPrice.rateCode,
+      roomTypeCode: roomTypeCode,
+    })
   }
 
   return (
@@ -94,8 +89,10 @@ export default function FlexibilityOption({
               </Caption>
             ))}
           </Popover>
-          <Caption color="uiTextHighContrast">{name}</Caption>
-          <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
+          <div className={styles.priceType}>
+            <Caption color="uiTextHighContrast">{name}</Caption>
+            <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
+          </div>
         </div>
         <PriceTable
           publicPrice={publicPrice}

components/HotelReservation/SelectRate/RoomSelection/RoomCard/RoomCardSkeleton.module.css

@@ -0,0 +1,26 @@
+.card {
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  border-radius: var(--Corner-radius-Large);
+  border: 1px solid var(--Base-Border-Subtle);
+  position: relative;
+  height: 100%;
+  justify-content: space-between;
+  min-height: 200px;
+  flex: 1;
+  overflow: hidden;
+}
+
+.imageContainer {
+  aspect-ratio: 16/9;
+  width: 100%;
+}
+
+.priceVariants {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x2);
+}

components/HotelReservation/SelectRate/RoomSelection/RoomCard/RoomCardSkeleton.tsx

@@ -0,0 +1,21 @@
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+
+import styles from "./RoomCardSkeleton.module.css"
+
+export function RoomCardSkeleton() {
+  return (
+    <article className={styles.card}>
+      {/* image container */}
+      <div className={styles.imageContainer}>
+        <SkeletonShimmer width={"100%"} height="100%" />
+      </div>
+
+      <div className={styles.priceVariants}>
+        {/* price variants */}
+        {Array.from({ length: 3 }).map((_, index) => (
+          <SkeletonShimmer key={index} height={"100px"} />
+        ))}
+      </div>
+    </article>
+  )
+}

components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx

@@ -77,11 +77,13 @@ export default function RoomCard({
       packages?.find((pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM)) ||
     undefined
 
-  const selectedRoom = roomCategories.find(
-    (room) => room.name === roomConfiguration.roomType
+  const selectedRoom = roomCategories.find((roomCategory) =>
+    roomCategory.roomTypes.some(
+      (roomType) => roomType.code === roomConfiguration.roomTypeCode
+    )
   )
 
-  const { roomSize, occupancy, images } = selectedRoom || {}
+  const { name, roomSize, occupancy, images } = selectedRoom || {}
 
   const freeCancelation = intl.formatMessage({ id: "Free cancellation" })
   const nonRefundable = intl.formatMessage({ id: "Non-refundable" })
@@ -174,9 +176,9 @@ export default function RoomCard({
         </div>
         <div className={styles.roomDetails}>
           <Subtitle className={styles.name} type="two">
-            {roomConfiguration.roomType}
+            {name}
           </Subtitle>
-          {/* Out of scope for now        
+          {/* Out of scope for now
             <Body>{descriptions?.short}</Body>
             */}
         </div>

components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css

@@ -20,9 +20,9 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   gap: var(--Spacing-x1);
   padding: 0 var(--Spacing-x1) 0 var(--Spacing-x-one-and-half);
-  height: 40px;
 }
 
 .specification .guests {
@@ -34,6 +34,10 @@
   margin-left: auto;
 }
 
+.toggleSidePeek button {
+  text-align: start;
+}
+
 .container {
   padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x2);
   display: flex;

components/HotelReservation/SelectRate/RoomSelection/index.tsx

@@ -14,9 +14,9 @@ export default function RoomSelection({
   roomsAvailability,
   roomCategories,
   user,
-  packages,
+  availablePackages,
   selectedPackages,
-  setRateSummary,
+  setRateCode,
   rateSummary,
 }: RoomSelectionProps) {
   const router = useRouter()
@@ -70,9 +70,9 @@ export default function RoomSelection({
                 rateDefinitions={rateDefinitions}
                 roomConfiguration={roomConfiguration}
                 roomCategories={roomCategories}
-                handleSelectRate={setRateSummary}
+                handleSelectRate={setRateCode}
                 selectedPackages={selectedPackages}
-                packages={packages}
+                packages={availablePackages}
               />
             </li>
           ))}
@@ -81,7 +81,7 @@ export default function RoomSelection({
           <RateSummary
             rateSummary={rateSummary}
             isUserLoggedIn={isUserLoggedIn}
-            packages={packages}
+            packages={availablePackages}
             roomsAvailability={roomsAvailability}
           />
         )}

components/HotelReservation/SelectRate/RoomSelection/utils.ts

@@ -50,6 +50,54 @@ export function getQueryParamsForEnterDetails(
       roomTypeCode: room.roomtype,
       rateCode: room.ratecode,
       packages: room.packages?.split(",") as RoomPackageCodeEnum[],
+      counterRateCode: room.counterratecode,
     })),
   }
 }
+
+export function createQueryParamsForEnterDetails(
+  bookingData: BookingData,
+  intitalSearchParams: URLSearchParams
+) {
+  const { hotel, fromDate, toDate, rooms } = bookingData
+
+  const bookingSearchParams = new URLSearchParams({ hotel, fromDate, toDate })
+  const searchParams = new URLSearchParams([
+    ...intitalSearchParams,
+    ...bookingSearchParams,
+  ])
+
+  rooms.forEach((item, index) => {
+    if (item?.adults) {
+      searchParams.set(`room[${index}].adults`, item.adults.toString())
+    }
+    if (item?.children) {
+      item.children.forEach((child, childIndex) => {
+        searchParams.set(
+          `room[${index}].child[${childIndex}].age`,
+          child.age.toString()
+        )
+        searchParams.set(
+          `room[${index}].child[${childIndex}].bed`,
+          child.bed.toString()
+        )
+      })
+    }
+    if (item?.roomTypeCode) {
+      searchParams.set(`room[${index}].roomtype`, item.roomTypeCode)
+    }
+    if (item?.rateCode) {
+      searchParams.set(`room[${index}].ratecode`, item.rateCode)
+    }
+
+    if (item?.counterRateCode) {
+      searchParams.set(`room[${index}].counterratecode`, item.counterRateCode)
+    }
+
+    if (item.packages && item.packages.length > 0) {
+      searchParams.set(`room[${index}].packages`, item.packages.join(","))
+    }
+  })
+
+  return searchParams
+}