From ce965fd130b88f018c3cfc7996aac24e1badbbc1 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Mon, 18 Nov 2024 11:23:34 +0100
Subject: [PATCH] feat(SW-880): refactor facility component

---
 .../facility.module.css}                      |  2 +-
 .../WellnessAndExercise/Facility/index.tsx    | 64 +++++++++++++++++++
 .../FacilityCard/index.tsx                    | 54 ----------------
 .../SidePeeks/WellnessAndExercise/index.tsx   | 11 +---
 .../components/hotelPage/sidepeek/facility.ts |  5 ++
 .../hotelPage/sidepeek/facilityCard.ts        | 19 ------
 6 files changed, 72 insertions(+), 83 deletions(-)
 rename components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/{FacilityCard/facilityCard.module.css => Facility/facility.module.css} (95%)
 create mode 100644 components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx
 delete mode 100644 components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/index.tsx
 create mode 100644 types/components/hotelPage/sidepeek/facility.ts
 delete mode 100644 types/components/hotelPage/sidepeek/facilityCard.ts

diff --git a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/facilityCard.module.css b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/facility.module.css
similarity index 95%
rename from components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/facilityCard.module.css
rename to components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/facility.module.css
index 5abac9f32..22aea5bce 100644
--- a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/facilityCard.module.css
+++ b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/facility.module.css
@@ -17,6 +17,6 @@
   gap: var(--Spacing-x-one-and-half);
 }
 
-.body {
+.openingHours {
   margin-top: var(--Spacing-x1);
 }
diff --git a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx
new file mode 100644
index 000000000..474ccb901
--- /dev/null
+++ b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx
@@ -0,0 +1,64 @@
+import Image from "@/components/Image"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./facility.module.css"
+
+import { FacilityProps } from "@/types/components/hotelPage/sidepeek/facility"
+
+export default async function Facility({ data }: FacilityProps) {
+  const intl = await getIntl()
+  const imgUrl = data.content.images[0]?.imageSizes.medium
+  const imgAltText = data.content.images[0]?.metaData.altText
+  const facilityType = data.type
+  const ordinaryOpeningTimes = {
+    alwaysOpen: data.openingDetails.openingHours.ordinary.alwaysOpen,
+    openingTime: data.openingDetails.openingHours.ordinary.openingTime,
+    closingTime: data.openingDetails.openingHours.ordinary.closingTime,
+  }
+  const weekendOpeningTimes = {
+    alwaysOpen: data.openingDetails.openingHours.weekends.alwaysOpen,
+    openingTime: data.openingDetails.openingHours.weekends.openingTime,
+    closingTime: data.openingDetails.openingHours.weekends.closingTime,
+  }
+
+  return (
+    <div className={styles.content}>
+      {imgUrl && (
+        <Image
+          src={imgUrl}
+          alt={imgAltText || ""}
+          className={styles.image}
+          height={400}
+          width={200}
+        />
+      )}
+      <div className={styles.information}>
+        <Subtitle color="burgundy" asChild type="one">
+          <Title level="h3">
+            {intl.formatMessage({ id: `${facilityType}` })}
+          </Title>
+        </Subtitle>
+        <div>
+          <Subtitle type="two" color="uiTextHighContrast">
+            {intl.formatMessage({ id: " Opening Hours" })}
+          </Subtitle>
+          <div className={styles.openingHours}>
+            <Body color="uiTextHighContrast">
+              {ordinaryOpeningTimes.alwaysOpen
+                ? `${intl.formatMessage({ id: "Mon-Fri" })} ${intl.formatMessage({ id: "Always open" })}`
+                : `${intl.formatMessage({ id: "Mon-Fri" })} ${ordinaryOpeningTimes.openingTime}-${ordinaryOpeningTimes.closingTime}`}
+            </Body>
+            <Body color="uiTextHighContrast">
+              {weekendOpeningTimes.alwaysOpen
+                ? `${intl.formatMessage({ id: "Sat-Sun" })} ${intl.formatMessage({ id: "Always open" })}`
+                : `${intl.formatMessage({ id: "Sat-Sun" })} ${weekendOpeningTimes.openingTime}-${weekendOpeningTimes.closingTime}`}
+            </Body>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/index.tsx b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/index.tsx
deleted file mode 100644
index ba3925baf..000000000
--- a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/FacilityCard/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import Image from "@/components/Image"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
-
-import styles from "./facilityCard.module.css"
-
-import type { FacilityCardProps } from "@/types/components/hotelPage/sidepeek/facilityCard"
-
-export default async function FacilityCard({
-  imgUrl,
-  imgAltText,
-  facilityType,
-  ordinaryOpeningTimes,
-  weekendOpeningTimes,
-}: FacilityCardProps) {
-  const intl = await getIntl()
-  return (
-    <div className={styles.content}>
-      {imgUrl && (
-        <Image
-          src={imgUrl}
-          alt={imgAltText || ""}
-          className={styles.image}
-          height={400}
-          width={200}
-        />
-      )}
-      <div className={styles.information}>
-        <Subtitle color="burgundy" asChild type="one">
-          <Title level="h3">
-            {intl.formatMessage({ id: `${facilityType}` })}
-          </Title>
-        </Subtitle>
-        <div>
-          <Subtitle type="two" color="uiTextHighContrast">
-            {intl.formatMessage({ id: " Opening Hours" })}
-          </Subtitle>
-          <Body color="uiTextHighContrast" className={styles.body}>
-            {ordinaryOpeningTimes.alwaysOpen
-              ? `${intl.formatMessage({ id: "Mon-Fri" })} ${intl.formatMessage({ id: "Always open" })}`
-              : `${intl.formatMessage({ id: "Mon-Fri" })} ${ordinaryOpeningTimes.openingTime}-${ordinaryOpeningTimes.closingTime}`}
-          </Body>
-          <Body color="uiTextHighContrast">
-            {weekendOpeningTimes.alwaysOpen
-              ? `${intl.formatMessage({ id: "Sat-Sun" })} ${intl.formatMessage({ id: "Always open" })}`
-              : `${intl.formatMessage({ id: "Sat-Sun" })} ${weekendOpeningTimes.openingTime}-${weekendOpeningTimes.closingTime}`}
-          </Body>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx
index d7f381d9b..97ac09a91 100644
--- a/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/index.tsx
@@ -6,7 +6,7 @@ import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
-import FacilityCard from "./FacilityCard"
+import Facility from "./Facility"
 
 import styles from "./wellnessAndExercise.module.css"
 
@@ -26,14 +26,7 @@ export default async function WellnessAndExerciseSidePeek({
     >
       <div className={styles.wrapper}>
         {healthFacilities.map((facility) => (
-          <FacilityCard
-            key={facility.type}
-            imgUrl={facility.content.images[0]?.imageSizes.medium}
-            imgAltText={facility.content.images[0]?.metaData.altText}
-            facilityType={facility.type}
-            ordinaryOpeningTimes={facility.openingDetails.openingHours.ordinary}
-            weekendOpeningTimes={facility.openingDetails.openingHours.weekends}
-          />
+          <Facility key={facility.type} data={facility} />
         ))}
       </div>
       {buttonUrl && (
diff --git a/types/components/hotelPage/sidepeek/facility.ts b/types/components/hotelPage/sidepeek/facility.ts
new file mode 100644
index 000000000..6cb6f0796
--- /dev/null
+++ b/types/components/hotelPage/sidepeek/facility.ts
@@ -0,0 +1,5 @@
+import type { Hotel } from "@/types/hotel"
+
+export type FacilityProps = {
+  data: Hotel["healthFacilities"][number]
+}
diff --git a/types/components/hotelPage/sidepeek/facilityCard.ts b/types/components/hotelPage/sidepeek/facilityCard.ts
deleted file mode 100644
index fbf6e9942..000000000
--- a/types/components/hotelPage/sidepeek/facilityCard.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export type FacilityCardProps = {
-  imgUrl: string
-  imgAltText: string
-  facilityType: string
-  ordinaryOpeningTimes: {
-    alwaysOpen: boolean
-    isClosed: boolean
-    openingTime?: string
-    closingTime?: string
-    sortOrder?: number
-  }
-  weekendOpeningTimes: {
-    alwaysOpen: boolean
-    isClosed: boolean
-    openingTime?: string
-    closingTime?: string
-    sortOrder?: number
-  }
-}