refactor(SW-302): code cleanup

components/ContentType/HotelPage/AmenitiesList/index.tsx

@@ -10,12 +10,12 @@ import { getLang } from "@/i18n/serverContext"
 
 import styles from "./amenitiesList.module.css"
 
-import { HotelData } from "@/types/hotel"
+import type { Amenities } from "@/types/hotel"
 
 export default async function AmenitiesList({
   detailedFacilities,
 }: {
-  detailedFacilities: HotelData["data"]["attributes"]["detailedFacilities"]
+  detailedFacilities: Amenities
 }) {
   const intl = await getIntl()
   const sortedAmenities = detailedFacilities

components/ContentType/HotelPage/Facilities/CardGrid/index.tsx

@@ -6,31 +6,40 @@ import { sortCards } from "@/utils/imageCard"
 import styles from "./cardGrid.module.css"
 
 import type { CardGridProps } from "@/types/components/hotelPage/facilities"
+import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 
-export default async function CardGrid({ facility }: CardGridProps) {
-  const imageCard = sortCards(facility)
-  const nrCards = facility.length
+export default async function CardGrid({ facilities }: CardGridProps) {
+  const imageCard = sortCards(facilities)
+  const nrCards = facilities.length
+
+  function getCardClassName(card: CardProps): string {
+    if (nrCards === 1) {
+      return styles.spanThree
+    } else if (nrCards === 2 && card.backgroundImage) {
+      return styles.spanTwo
+    }
+    return styles.spanOne
+  }
 
   return (
     <section id={imageCard.card?.id}>
       <Grids.Stackable className={styles.desktopGrid}>
-        {facility.map((card: any, idx: number) => (
+        {facilities.map((card: CardProps, idx: number) => (
           <Card
             theme={card.theme || "primaryDark"}
-            key={idx}
+            key={
+              card.id ||
+              (card.title && `${card.title}-${idx}`) ||
+              (card.heading && `${card.heading}-${idx}`) ||
+              idx
+            }
             scriptedTopTitle={card.scriptedTopTitle}
             heading={card.heading}
             bodyText={card.bodyText}
             secondaryButton={card.secondaryButton}
             primaryButton={card.primaryButton}
             backgroundImage={card.backgroundImage}
-            className={
-              nrCards == 1
-                ? styles.spanThree
-                : nrCards == 2 && card.backgroundImage
-                  ? styles.spanTwo
-                  : styles.spanOne
-            }
+            className={getCardClassName(card)}
           />
         ))}
       </Grids.Stackable>

components/ContentType/HotelPage/Facilities/index.tsx

@@ -4,13 +4,16 @@ import CardGrid from "./CardGrid"
 
 import styles from "./facilities.module.css"
 
-import type { FacilityProps } from "@/types/components/hotelPage/facilities"
+import type {
+  FacilityCards,
+  FacilityProps,
+} from "@/types/components/hotelPage/facilities"
 
 export default async function Facilities({ facilities }: FacilityProps) {
   return (
     <SectionContainer className={styles.grid}>
-      {facilities.map((facility: any, idx: number) => (
-        <CardGrid key={`grid_${idx}`} facility={facility} />
+      {facilities.map((facilityCards: FacilityCards, idx: number) => (
+        <CardGrid key={`grid_${idx}`} facilities={facilityCards} />
       ))}
     </SectionContainer>
   )

components/TempDesignSystem/Card/CardImage/index.tsx

@@ -15,10 +15,16 @@ export default function CardImage({
     <article className={`${styles.container} ${className}`}>
       <div className={styles.imageContainer}>
         {imageCards.map(
-          ({ backgroundImage }) =>
+          ({ backgroundImage }, idx: Number) =>
             backgroundImage && (
               <Image
-                key={backgroundImage.title}
+                key={
+                  (backgroundImage.title &&
+                    `${backgroundImage.title}-${idx}`) ||
+                  (backgroundImage.meta.caption &&
+                    `${backgroundImage.meta.caption}-${idx}`) ||
+                  backgroundImage.url
+                }
                 src={backgroundImage.url}
                 className={styles.image}
                 alt={backgroundImage.title}

server/routers/hotels/output.ts

@@ -164,7 +164,7 @@ const detailedFacilitySchema = z.object({
   filter: z.string().optional(),
 })
 
-const facilitySchema = z.object({
+export const facilitySchema = z.object({
   headingText: z.string().optional(), // TODO: Should not be optional, remove when we get meetingsAndConferences headingText
   heroImages: z.array(
     z.object({

server/routers/hotels/query.ts

@@ -26,7 +26,6 @@ import {
   getRatesInputSchema,
 } from "./input"
 import {
-  Facility,
   getAvailabilitySchema,
   getHotelDataSchema,
   getRatesSchema,
@@ -44,6 +43,7 @@ import {
 import { FacilityEnum } from "@/types/components/hotelPage/facilities"
 import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
 import type { RequestOptionsWithOutBody } from "@/types/fetch"
+import type { Facility } from "@/types/hotel"
 import type { GetHotelPageData } from "@/types/trpc/routers/contentstack/hotelPage"
 
 const meter = metrics.getMeter("trpc.hotels")
@@ -213,7 +213,7 @@ export const hotelQueryRouter = router({
         ? contentstackData?.content[0]
         : null
 
-      const facilities: Array<Facility> = [
+      const facilities: Facility[] = [
         {
           ...apiJson.data.attributes.restaurantImages,
           id: FacilityEnum.restaurant,

types/components/hotelPage/facilities.ts

@@ -1,15 +1,15 @@
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 
-export type FacilityCards = Array<CardProps>
+export type FacilityCards = CardProps[]
 
-export type Facilities = Array<FacilityCards>
+export type Facilities = FacilityCards[]
 
 export type FacilityProps = {
   facilities: Facilities
 }
 
 export type CardGridProps = {
-  facility: FacilityCards
+  facilities: FacilityCards
 }
 
 export enum FacilityEnum {
@@ -17,3 +17,10 @@ export enum FacilityEnum {
   conference = "meetings-and-conferences",
   restaurant = "restaurant-and-bar",
 }
+
+export enum RestaurantHeadings {
+  restaurantAndBar = "Restaurant & Bar",
+  bar = "Bar",
+  restaurant = "Restaurant",
+  breakfastRestaurant = "Breakfast restaurant",
+}

types/hotel.ts

@@ -1,6 +1,7 @@
 import { z } from "zod"
 
 import {
+  facilitySchema,
   getHotelDataSchema,
   parkingSchema,
   pointOfInterestSchema,
@@ -13,6 +14,8 @@ export type Hotel = HotelData["data"]["attributes"]
 export type HotelAddress = HotelData["data"]["attributes"]["address"]
 export type HotelLocation = HotelData["data"]["attributes"]["location"]
 
+export type Amenities = HotelData["data"]["attributes"]["detailedFacilities"]
+
 type HotelRatings = HotelData["data"]["attributes"]["ratings"]
 export type HotelTripAdvisor =
   | NonNullable<HotelRatings>["tripAdvisor"]
@@ -52,3 +55,4 @@ export enum PointOfInterestGroupEnum {
 }
 
 export type ParkingData = z.infer<typeof parkingSchema>
+export type Facility = z.infer<typeof facilitySchema> & { id: string }

utils/facilityCards.ts

@@ -11,11 +11,11 @@ import {
   type Facilities,
   type FacilityCards,
   FacilityEnum,
+  RestaurantHeadings,
 } from "@/types/components/hotelPage/facilities"
 import type { ImageVaultAsset } from "@/types/components/imageVault"
-import type { HotelData } from "@/types/hotel"
+import type { Amenities, Facility } from "@/types/hotel"
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
-import type { Facility } from "@/server/routers/hotels/output"
 
 type ActivityCard = {
   background_image?: ImageVaultAsset
@@ -55,8 +55,8 @@ export function setActivityCard(activitiesCard: ActivityCard): FacilityCards {
 }
 
 export async function setFacilityCards(
-  facilities: Array<Facility>,
-  amenities: HotelData["data"]["attributes"]["detailedFacilities"]
+  facilities: Facility[],
+  amenities: Amenities
 ) {
   const lang = getLang()
   const intl = await getIntl()
@@ -135,28 +135,27 @@ export async function setFacilityCards(
   return cards
 }
 
-export function getRestaurantHeading(
-  amenities: HotelData["data"]["attributes"]["detailedFacilities"]
-) {
+export function getRestaurantHeading(amenities: Amenities): RestaurantHeadings {
   const hasBar = amenities.some(
     (facility) => facility.id == 1606 || facility.id == 1014 // bar & rooftop bar id
   )
   const hasRestaurant = amenities.some((facility) => facility.id == 1383) // restaurant id
 
   //let href,
-  let title: string
+  let title: RestaurantHeadings
+
   if (hasBar && hasRestaurant) {
     //href = restaurantAndBar
-    title = "Restaurant & Bar"
+    title = RestaurantHeadings.restaurantAndBar
   } else if (hasBar) {
     //href = bar
-    title = "Bar"
+    title = RestaurantHeadings.bar
   } else if (hasRestaurant) {
     //href = restaurant
-    title = "Restaurant"
+    title = RestaurantHeadings.restaurant
   } else {
     //href = breakfastRestaurant
-    title = "Breakfast restaurant"
+    title = RestaurantHeadings.breakfastRestaurant
   }
   return title
 }