feat/SW-763-image-gallery-update (pull request #846)

feat(SW-763): update to smallerImages for select-hotel/rate page and slice size depending on signature

* feat(SW-763): update to smallerImages for select- hotel/rate page and slice size depending on signature

* fix(SW-763): add hotelType enum

* feat(SW-763): move hotel type check to the route for the hotelData

* fix(SW-763): remove unused import

* fix(SW-763): fix comment

* fix(SW-763): add optional galleryImages check


Approved-by: Christian Andolf
Approved-by: Pontus Dreij
Approved-by: Niclas Edenvin

components/HotelReservation/HotelCard/index.tsx

@@ -56,13 +56,10 @@ export default function HotelCard({
       onMouseLeave={handleMouseLeave}
     >
       <section className={styles.imageContainer}>
-        {hotelData.gallery && (
+        {hotelData?.galleryImages && (
           <ImageGallery
             title={hotelData.name}
-            images={[
-              hotelData.hotelContent.images,
-              ...hotelData.gallery.heroImages,
-            ]}
+            images={hotelData.galleryImages}
           />
         )}
         <div className={styles.tripAdvisor}>

components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -29,13 +29,10 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
       {hotelAttributes && (
         <section className={styles.wrapper}>
           <div className={styles.imageWrapper}>
-            {hotelAttributes.gallery && (
+            {hotelAttributes?.galleryImages && (
               <ImageGallery
                 title={hotelAttributes.name}
-                images={[
-                  hotelAttributes.hotelContent.images,
-                  ...hotelAttributes.gallery.heroImages,
-                ]}
+                images={hotelAttributes.galleryImages}
               />
             )}
             {hotelAttributes.ratings?.tripAdvisor && (

server/routers/hotels/output.ts

@@ -449,6 +449,7 @@ export const getHotelDataSchema = z.object({
           facilities.sort((a, b) => b.sortOrder - a.sortOrder)
         ),
       gallery: gallerySchema.optional(),
+      galleryImages: z.array(imageSchema).optional(),
       healthAndWellness: facilitySchema.optional(),
       healthFacilities: z.array(healthFacilitySchema),
       hotelContent: hotelContentSchema,

server/routers/hotels/query.ts

@@ -60,6 +60,7 @@ import { FacilityCardTypeEnum } from "@/types/components/hotelPage/facilities"
 import type { BedTypeSelection } from "@/types/components/hotelReservation/enterDetails/bedType"
 import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
 import { BreakfastPackageEnum } from "@/types/enums/breakfast"
+import { HotelTypeEnum } from "@/types/enums/hotelType"
 import type { RequestOptionsWithOutBody } from "@/types/fetch"
 import type { Facility } from "@/types/hotel"
 import type { GetHotelPageData } from "@/types/trpc/routers/contentstack/hotelPage"
@@ -257,13 +258,22 @@ export const getHotelData = cache(
         query: { hotelId, params: params },
       })
     )
+    const hotelData = validateHotelData.data
 
     if (isCardOnlyPayment) {
-      validateHotelData.data.data.attributes.merchantInformationData.alternatePaymentOptions =
+      hotelData.data.attributes.merchantInformationData.alternatePaymentOptions =
         []
     }
+    if (hotelData.data.attributes.gallery) {
+      const smallerImages = hotelData.data.attributes.gallery.smallerImages
+      const hotelGalleryImages =
+        hotelData.data.attributes.hotelType === HotelTypeEnum.Signature
+          ? smallerImages.slice(0, 10)
+          : smallerImages.slice(0, 6)
+      hotelData.data.attributes.galleryImages = hotelGalleryImages
+    }
 
-    return validateHotelData.data
+    return hotelData
   }
 )
 

types/enums/hotelType.ts

@@ -0,0 +1,5 @@
+export enum HotelTypeEnum {
+  Signature = "signature",
+  ScandicGo = "scandicgo",
+  Regular = "regular",
+}