Merged in feat/SW-2971-subpage-openinghours (pull request #2300)

feat(SW-2971): update subpage wellness opening hours

* feat(SW-2971): update subpage wellness opening hours


Approved-by: Erik Tiekstra

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/OpeningHours/index.tsx

@@ -0,0 +1,95 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { getIntl } from "@/i18n"
+
+import styles from "./openingHours.module.css"
+
+import {
+  ExternalGymDetails,
+  HealthFacilitiesEnum,
+  OpeningHoursType,
+} from "@/types/components/hotelPage/facilities"
+import type { FacilityProps } from "@/types/components/hotelPage/sidepeek/facility"
+
+interface OpeningHoursType extends FacilityProps {
+  showTitle?: boolean
+}
+
+export default async function OpeningHours({
+  data,
+  showTitle = true,
+}: OpeningHoursType) {
+  const intl = await getIntl()
+
+  const ordinaryOpeningTimes = data.openingDetails.openingHours.ordinary
+  const weekendOpeningTimes = data.openingDetails.openingHours.weekends
+  const shortDescription = data.content.texts.descriptions?.short
+
+  const isExternalGym =
+    data.type === HealthFacilitiesEnum.Gym &&
+    data.details.find((d) => d.name === ExternalGymDetails.ExternalGym)
+      ?.value === "True"
+
+  const showOpeningHours =
+    data.openingDetails.openingHoursType !== OpeningHoursType.SetFreeText &&
+    !isExternalGym
+
+  return (
+    <>
+      {shortDescription ? (
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>{shortDescription}</p>
+        </Typography>
+      ) : null}
+      {showOpeningHours ? (
+        <div className={styles.openingHoursContainer}>
+          {showTitle ? (
+            <Typography variant="Title/Subtitle/md">
+              <h4>
+                {intl.formatMessage({
+                  defaultMessage: "Opening hours",
+                })}
+              </h4>
+            </Typography>
+          ) : null}
+          <Typography variant="Body/Paragraph/mdRegular">
+            <div className={styles.openingHours}>
+              <p>
+                {ordinaryOpeningTimes.alwaysOpen
+                  ? intl.formatMessage({
+                      defaultMessage: "Monday–Friday: Always open",
+                    })
+                  : intl.formatMessage(
+                      {
+                        defaultMessage:
+                          "Monday–Friday: {openingTime}–{closingTime}",
+                      },
+                      {
+                        openingTime: ordinaryOpeningTimes.openingTime,
+                        closingTime: ordinaryOpeningTimes.closingTime,
+                      }
+                    )}
+              </p>
+              <p>
+                {weekendOpeningTimes.alwaysOpen
+                  ? intl.formatMessage({
+                      defaultMessage: "Saturday–Sunday: Always open",
+                    })
+                  : intl.formatMessage(
+                      {
+                        defaultMessage:
+                          "Saturday–Sunday: {openingTime}–{closingTime}",
+                      },
+                      {
+                        openingTime: weekendOpeningTimes.openingTime,
+                        closingTime: weekendOpeningTimes.closingTime,
+                      }
+                    )}
+              </p>
+            </div>
+          </Typography>
+        </div>
+      ) : null}
+    </>
+  )
+}

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/OpeningHours/openingHours.module.css

@@ -0,0 +1,11 @@
+.openingHoursContainer {
+  display: grid;
+  gap: var(--Space-x15);
+}
+
+.openingHours {
+  display: grid;
+  padding: var(--Space-x2) var(--Space-x3);
+  border-radius: var(--Corner-radius-md);
+  background: var(--Surface-Secondary-Default);
+}

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/facility.module.css

@@ -1,27 +1,15 @@
 .content {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .information {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x-one-and-half);
-}
-
-.openingHoursContainer {
-  display: grid;
   gap: var(--Space-x15);
 }
 
-.openingHours {
-  display: grid;
-  padding: var(--Space-x2) var(--Space-x3);
-  border-radius: var(--Corner-radius-md);
-  background: var(--Surface-Secondary-Default);
-}
-
 .title {
   color: var(--Text-Interactive-Default);
 }

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx

@@ -4,35 +4,22 @@ import { getIntl } from "@/i18n"
 
 import { translateWellnessType } from "../../../utils"
 import SidePeekImages from "../../Images"
+import OpeningHours from "./OpeningHours"
 import { translateWellnessDetails } from "./utils"
 
 import styles from "./facility.module.css"
 
-import {
-  ExternalGymDetails,
-  HealthFacilitiesEnum,
-  OpeningHoursType,
-} from "@/types/components/hotelPage/facilities"
 import type { FacilityProps } from "@/types/components/hotelPage/sidepeek/facility"
 
 export default async function Facility({ data }: FacilityProps) {
   const intl = await getIntl()
   const image = data.content.images[0]
-  const ordinaryOpeningTimes = data.openingDetails.openingHours.ordinary
-  const weekendOpeningTimes = data.openingDetails.openingHours.weekends
-  const shortDescription = data.content.texts.descriptions?.short
-  const isExternalGym =
-    data.type === HealthFacilitiesEnum.Gym &&
-    data.details.find((d) => d.name === ExternalGymDetails.ExternalGym)
-      ?.value === "True"
 
   const details = await translateWellnessDetails({
     details: data.details,
     type: data.type,
   })
-  const showOpeningHours =
-    data.openingDetails.openingHoursType !== OpeningHoursType.SetFreeText &&
-    !isExternalGym
+
   return (
     <div className={styles.content}>
       {image ? <SidePeekImages images={[image]} /> : null}
@@ -49,58 +36,7 @@ export default async function Facility({ data }: FacilityProps) {
             </ul>
           </Typography>
         )}
-        {shortDescription ? (
-          <Typography variant="Body/Paragraph/mdRegular">
-            <p>{shortDescription}</p>
-          </Typography>
-        ) : null}
-        {showOpeningHours ? (
-          <div className={styles.openingHoursContainer}>
-            <Typography variant="Title/Subtitle/md">
-              <h4>
-                {intl.formatMessage({
-                  defaultMessage: "Opening hours",
-                })}
-              </h4>
-            </Typography>
-            <Typography variant="Body/Paragraph/mdRegular">
-              <div className={styles.openingHours}>
-                <p>
-                  {ordinaryOpeningTimes.alwaysOpen
-                    ? intl.formatMessage({
-                        defaultMessage: "Monday–Friday: Always open",
-                      })
-                    : intl.formatMessage(
-                        {
-                          defaultMessage:
-                            "Monday–Friday: {openingTime}–{closingTime}",
-                        },
-                        {
-                          openingTime: ordinaryOpeningTimes.openingTime,
-                          closingTime: ordinaryOpeningTimes.closingTime,
-                        }
-                      )}
-                </p>
-                <p>
-                  {weekendOpeningTimes.alwaysOpen
-                    ? intl.formatMessage({
-                        defaultMessage: "Saturday–Sunday: Always open",
-                      })
-                    : intl.formatMessage(
-                        {
-                          defaultMessage:
-                            "Saturday–Sunday: {openingTime}–{closingTime}",
-                        },
-                        {
-                          openingTime: weekendOpeningTimes.openingTime,
-                          closingTime: weekendOpeningTimes.closingTime,
-                        }
-                      )}
-                </p>
-              </div>
-            </Typography>
-          </div>
-        ) : null}
+        <OpeningHours data={data} />
       </div>
     </div>
   )

apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/WellnessSidebar.tsx

@@ -3,6 +3,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 
+import OpeningHours from "../../HotelPage/SidePeeks/WellnessAndExercise/Facility/OpeningHours"
 import { translateWellnessType } from "../../HotelPage/utils"
 
 import styles from "./sidebar.module.css"
@@ -34,58 +35,12 @@ export default async function WellnessSidebar({
           </h3>
         </Typography>
         {healthFacilities.map((facility) => (
-          <div key={facility.type}>
+          <div key={facility.type} className={styles.facility}>
             <Typography variant="Title/Subtitle/md" className={styles.text}>
               <h4>{translateWellnessType(facility.type, intl)}</h4>
             </Typography>
 
-            <Typography
-              variant="Body/Paragraph/mdRegular"
-              className={styles.text}
-            >
-              <div>
-                <p>
-                  {facility.openingDetails.openingHours.ordinary.alwaysOpen
-                    ? intl.formatMessage({
-                        defaultMessage: "Monday–Friday: Always open",
-                      })
-                    : intl.formatMessage(
-                        {
-                          defaultMessage:
-                            "Monday–Friday: {openingTime}–{closingTime}",
-                        },
-                        {
-                          openingTime:
-                            facility.openingDetails.openingHours.ordinary
-                              .openingTime,
-                          closingTime:
-                            facility.openingDetails.openingHours.ordinary
-                              .closingTime,
-                        }
-                      )}
-                </p>
-                <p>
-                  {facility.openingDetails.openingHours.weekends.alwaysOpen
-                    ? intl.formatMessage({
-                        defaultMessage: "Saturday–Sunday: Always open",
-                      })
-                    : intl.formatMessage(
-                        {
-                          defaultMessage:
-                            "Saturday–Sunday: {openingTime}–{closingTime}",
-                        },
-                        {
-                          openingTime:
-                            facility.openingDetails.openingHours.weekends
-                              .openingTime,
-                          closingTime:
-                            facility.openingDetails.openingHours.weekends
-                              .closingTime,
-                        }
-                      )}
-                </p>
-              </div>
-            </Typography>
+            <OpeningHours data={facility} showTitle={false} />
           </div>
         ))}
       </div>

apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/sidebar.module.css

@@ -1,3 +1,8 @@
+.facility {
+  display: grid;
+  gap: var(--Space-x15);
+}
+
 .content {
   display: grid;
   gap: var(--Space-x15);
@@ -18,10 +23,6 @@
   color: var(--Text-Heading);
 }
 
-.text {
-  color: var(--Text-Default);
-}
-
 @media screen and (max-width: 1366px) {
   .buttonContainer {
     display: none;