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}