Merged in feat/SW-1067-special-needs-accessibility-page (pull request #1253)

feat/SW-1067 special needs accessibility page * feat(SW-1067): update types * feat(SW-1067): add sidebar * feat(SW-1067): add additional content component * feat(SW-1067): add special needs list * feat(SW-1067): update type * feat(SW-1067): update import * feat(SW-1067): remove component * feat(SW-1067): re add component * feat(SW-1067): update folder structure Approved-by: Erik Tiekstra
2025-02-05 10:27:26 +00:00
parent 86a7650813
commit a389fba8ce
21 changed files with 145 additions and 16 deletions
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx
@@ -1,8 +1,11 @@
+import { accessibilitySubPage } from "@/constants/routes/hotelSubpages"
+
 import { ArrowRightIcon } from "@/components/Icons"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"

 import styles from "./accessibilityAmenity.module.css"

@@ -10,9 +13,12 @@ import type { AccessibilityAmenityProps } from "@/types/components/hotelPage/sid
 import { IconName } from "@/types/components/icon"

 export default async function AccessibilityAmenity({
-  accessibility,
+  elevatorPitch,
+  hasExtraAccessibilityPage,
 }: AccessibilityAmenityProps) {
  const intl = await getIntl()
+  const lang = getLang()
+
  return (
    <AccordionItem
      title={intl.formatMessage({ id: "Accessibility" })}
@@ -21,15 +27,16 @@ export default async function AccessibilityAmenity({
      trackingId="amenities:accessibility"
    >
      <div className={styles.wrapper}>
-        {accessibility?.description && (
-          <Body color="uiTextHighContrast">{accessibility.description}</Body>
+        {elevatorPitch && (
+          <Body color="uiTextHighContrast">{elevatorPitch}</Body>
        )}
-        {accessibility?.link && (
+        {hasExtraAccessibilityPage && (
          <Link
-            href={accessibility.link}
+            href={`/${accessibilitySubPage[lang]}`}
            color="burgundy"
            textDecoration="underline"
            variant="icon"
+            appendToCurrentPath
          >
            {intl.formatMessage({ id: "About accessibility" })}
            <ArrowRightIcon color="burgundy" />
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx
@@ -70,8 +70,12 @@ export default async function AmenitiesSidePeek({
          />
        )}
        <CheckInAmenity checkInInformation={checkInInformation} />
-        {accessibility && (
-          <AccessibilityAmenity accessibility={accessibility} />
+        {(accessibility.elevatorPitch ||
+          accessibility.hasExtraAccessibilityPage) && (
+          <AccessibilityAmenity
+            hasExtraAccessibilityPage={accessibility.hasExtraAccessibilityPage}
+            elevatorPitch={accessibility.elevatorPitch}
+          />
        )}
        <FilteredAmenities filteredAmenities={filteredAmenities} />
      </Accordion>
--- a/components/ContentType/HotelPage/index.tsx
+++ b/components/ContentType/HotelPage/index.tsx
@@ -88,6 +88,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
    gallery,
    hotelParking,
    displayWebPage,
+    hotelSpecialNeeds,
  } = hotelData.additionalData

  const images = gallery?.smallerImages
@@ -217,7 +218,10 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
            hasExtraParkingPage: displayWebPage.parking,
          }}
          checkInInformation={hotelFacts.checkin}
-          accessibility={hotelFacts.hotelInformation.accessibility}
+          accessibility={{
+            elevatorPitch: hotelSpecialNeeds.elevatorPitch,
+            hasExtraAccessibilityPage: displayWebPage.specialNeeds,
+          }}
          restaurants={restaurants}
        />
        <AboutTheHotelSidePeek
--- a/components/ContentType/HotelSubpage/AdditionalContent/Accessibility/accessibilityAdditionalContent.module.css
+++ b/components/ContentType/HotelSubpage/AdditionalContent/Accessibility/accessibilityAdditionalContent.module.css
@@ -0,0 +1,23 @@
+.container {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
+.accessibilityGroup {
+  display: grid;
+  gap: var(--Spacing-x1);
+}
+
+.list {
+  display: grid;
+  gap: var(--Spacing-x1);
+  list-style-type: none;
+}
+
+.list > li::before {
+  content: url("/_static/icons/heart.svg");
+  position: relative;
+  height: 8px;
+  top: 3px;
+  margin-right: var(--Spacing-x1);
+}
--- a/components/ContentType/HotelSubpage/AdditionalContent/Accessibility/index.tsx
+++ b/components/ContentType/HotelSubpage/AdditionalContent/Accessibility/index.tsx
@@ -0,0 +1,40 @@
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./accessibilityAdditionalContent.module.css"
+
+import type { AdditionalData } from "@/types/hotel"
+
+interface AccessibilityAdditionalContentProps {
+  additionalData: AdditionalData
+}
+
+export default function AccessibilityAdditionalContent({
+  additionalData,
+}: AccessibilityAdditionalContentProps) {
+  return (
+    <div className={styles.container}>
+      {additionalData.specialNeedGroups.map((accessibilityGroup) => (
+        <div
+          key={accessibilityGroup.name}
+          className={styles.accessibilityGroup}
+        >
+          <Subtitle type="two" color="uiTextHighContrast" asChild>
+            <h2>{accessibilityGroup.name}</h2>
+          </Subtitle>
+          <ul className={styles.list}>
+            {accessibilityGroup.specialNeeds.map((groupItem) => (
+              <Body key={groupItem.name} asChild>
+                <li>
+                  {groupItem.details
+                    ? `${groupItem.name}: ${groupItem.details}`
+                    : groupItem.name}
+                </li>
+              </Body>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  )
+}
--- a/components/ContentType/HotelSubpage/AdditionalContent/ParkingAdditionalContent.tsx
+++ b/components/ContentType/HotelSubpage/AdditionalContent/ParkingAdditionalContent.tsx
@@ -1,6 +1,6 @@
 import ParkingInformation from "@/components/ParkingInformation"

-import styles from "./additionalContent.module.css"
+import styles from "./parkingAdditionalContent.module.css"

 import type { Hotel } from "@/types/hotel"

--- a/components/ContentType/HotelSubpage/AdditionalContent/Parking/parkingAdditionalContent.module.css
+++ b/components/ContentType/HotelSubpage/AdditionalContent/Parking/parkingAdditionalContent.module.css
--- a/components/ContentType/HotelSubpage/AdditionalContent/index.tsx
+++ b/components/ContentType/HotelSubpage/AdditionalContent/index.tsx
@@ -1,22 +1,26 @@
 import {
+  accessibilitySubPage,
  parkingSubPage,
  wellnessSubPage,
 } from "@/constants/routes/hotelSubpages"

 import { getLang } from "@/i18n/serverContext"

-import ParkingAdditionalContent from "./ParkingAdditionalContent"
+import AccessibilityAdditionalContent from "./Accessibility"
+import ParkingAdditionalContent from "./Parking"

-import type { Hotel } from "@/types/hotel"
+import type { AdditionalData, Hotel } from "@/types/hotel"

 interface HotelSubpageAdditionalContentProps {
  subpage: string
  hotel: Hotel
+  additionalData: AdditionalData
 }

 export default function HotelSubpageAdditionalContent({
  subpage,
  hotel,
+  additionalData,
 }: HotelSubpageAdditionalContentProps) {
  const lang = getLang()

@@ -25,6 +29,8 @@ export default function HotelSubpageAdditionalContent({
      return <ParkingAdditionalContent hotel={hotel} />
    case wellnessSubPage[lang]:
      return null
+    case accessibilitySubPage[lang]:
+      return <AccessibilityAdditionalContent additionalData={additionalData} />
    default:
      return null
  }
--- a/components/ContentType/HotelSubpage/Sidebar/index.tsx
+++ b/components/ContentType/HotelSubpage/Sidebar/index.tsx
@@ -1,4 +1,5 @@
 import {
+  accessibilitySubPage,
  parkingSubPage,
  wellnessSubPage,
 } from "@/constants/routes/hotelSubpages"
@@ -25,6 +26,8 @@ export default function HotelSubpageSidebar({
      return <ParkingSidebar hotel={hotel} />
    case wellnessSubPage[lang]:
      return <WellnessSidebar hotel={hotel} />
+    case accessibilitySubPage[lang]:
+      return null
    default:
      return null
  }
--- a/components/ContentType/HotelSubpage/index.tsx
+++ b/components/ContentType/HotelSubpage/index.tsx
@@ -63,7 +63,9 @@ export default async function HotelSubpage({
        <div className={styles.contentContainer}>
          <main className={styles.mainContent}>
            <div className={styles.intro}>
-              <Title level="h1">{pageData.heading}</Title>
+              <Title as="h2" level="h1">
+                {pageData.heading}
+              </Title>
              <Preamble>{pageData.elevatorPitch}</Preamble>
            </div>

@@ -72,6 +74,7 @@ export default async function HotelSubpage({
            <HotelSubpageAdditionalContent
              subpage={subpage}
              hotel={hotelData.hotel}
+              additionalData={hotelData.additionalData}
            />
          </main>

--- a/components/ContentType/HotelSubpage/utils.ts
+++ b/components/ContentType/HotelSubpage/utils.ts
@@ -1,4 +1,5 @@
 import {
+  accessibilitySubPage,
  parkingSubPage,
  wellnessSubPage,
 } from "@/constants/routes/hotelSubpages"
@@ -44,6 +45,23 @@ export function getSubpageData(
            }
          : null,
      }
+    case accessibilitySubPage[lang]:
+      const accessibilityImage = additionalData.accessibility?.heroImages[0]
+      return {
+        ...additionalData.hotelSpecialNeeds,
+        heading: intl.formatMessage(
+          { id: "Accessibility at {hotel}" },
+          {
+            hotel: hotel.name,
+          }
+        ),
+        heroImage: accessibilityImage
+          ? {
+              src: accessibilityImage.imageSizes.medium,
+              alt: accessibilityImage.metaData.altText || "",
+            }
+          : null,
+      }
    default:
      return null
  }
--- a/constants/routes/hotelSubpages.ts
+++ b/constants/routes/hotelSubpages.ts
@@ -15,3 +15,12 @@ export const wellnessSubPage = {
  fi: "spa",
  de: "Wellness",
 }
+
+export const accessibilitySubPage = {
+  en: "accessibility",
+  sv: "tillganglighet",
+  no: "tilgjengelighet",
+  da: "tilgaengelighed",
+  fi: "saavutettavuus",
+  de: "barrierefreiheit",
+}
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -12,6 +12,7 @@
  "About the hotel": "Om hotellet",
  "Accept new price": "Accepter ny pris",
  "Accessibility": "Tilgængelighed",
+  "Accessibility at {hotel}": "Tilgængelighed på {hotel}",
  "Accessible Room": "Tilgængelighedsrum",
  "Active": "Aktiv",
  "Activities": "Aktiviteter",
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -12,6 +12,7 @@
  "About the hotel": "Über das Hotel",
  "Accept new price": "Neuen Preis akzeptieren",
  "Accessibility": "Zugänglichkeit",
+  "Accessibility at {hotel}": "Barrierefreiheit im {hotel}",
  "Accessible Room": "Barrierefreies Zimmer",
  "Active": "Aktiv",
  "Activities": "Aktivitäten",
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -12,6 +12,7 @@
  "About the hotel": "About the hotel",
  "Accept new price": "Accept new price",
  "Accessibility": "Accessibility",
+  "Accessibility at {hotel}": "Accessibility at {hotel}",
  "Accessible Room": "Accessibility room",
  "Active": "Active",
  "Activities": "Activities",
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -12,6 +12,7 @@
  "About the hotel": "Tietoja hotellista",
  "Accept new price": "Hyväksy uusi hinta",
  "Accessibility": "Saavutettavuus",
+  "Accessibility at {hotel}": "Esteettömyys {hotel}",
  "Accessible Room": "Esteetön huone",
  "Active": "Aktiivinen",
  "Activities": "Aktiviteetit",
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -12,6 +12,7 @@
  "About the hotel": "Om hotellet",
  "Accept new price": "Aksepterer ny pris",
  "Accessibility": "Tilgjengelighet",
+  "Accessibility at {hotel}": "Tilgjengelighet på {hotel}",
  "Accessible Room": "Tilgjengelighetsrom",
  "Active": "Aktiv",
  "Activities": "Aktiviteter",
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -12,6 +12,7 @@
  "About the hotel": "Om hotellet",
  "Accept new price": "Accepter ny pris",
  "Accessibility": "Tillgänglighet",
+  "Accessibility at {hotel}": "Tillgänglighet på {hotel}",
  "Accessible Room": "Tillgänglighetsrum",
  "Active": "Aktiv",
  "Activities": "Aktiviteter",
--- a/server/routers/hotels/schemas/additionalData.ts
+++ b/server/routers/hotels/schemas/additionalData.ts
@@ -34,6 +34,11 @@ export const extraPageSchema = z.object({
  mainBody: z.string().optional(),
 })

+export const accessibilitySchema = z.object({
+  headingText: z.string().default(""),
+  heroImages: z.array(imageSchema),
+})
+
 export const additionalDataSchema = z.object({
  attributes: z.object({
    name: z.string(),
@@ -56,6 +61,7 @@ export const additionalDataSchema = z.object({
    hotelParking: extraPageSchema,
    hotelSpecialNeeds: extraPageSchema,
    hotelRoomElevatorPitchText: z.string().optional(),
+    accessibility: accessibilitySchema.optional(),
  }),
  type: z.literal("additionalData"),
 })
--- a/types/components/hotelPage/sidepeek/accessibility.ts
+++ b/types/components/hotelPage/sidepeek/accessibility.ts
@@ -1,5 +1,4 @@
-import type { Hotel } from "@/types/hotel"
-
 export type AccessibilityAmenityProps = {
-  accessibility: Hotel["hotelFacts"]["hotelInformation"]["accessibility"]
+  elevatorPitch?: string
+  hasExtraAccessibilityPage: boolean
 }
--- a/types/components/hotelPage/sidepeek/amenities.ts
+++ b/types/components/hotelPage/sidepeek/amenities.ts
@@ -1,11 +1,12 @@
 import type { Hotel, Restaurant, RestaurantOpeningHours } from "@/types/hotel"
+import type { AccessibilityAmenityProps } from "./accessibility"
 import type { ParkingAmenityProps } from "./parking"

 export type AmenitiesSidePeekProps = {
  amenitiesList: Hotel["detailedFacilities"]
  parking: ParkingAmenityProps
  checkInInformation: Hotel["hotelFacts"]["checkin"]
-  accessibility: Hotel["hotelFacts"]["hotelInformation"]["accessibility"]
+  accessibility: AccessibilityAmenityProps
  restaurants: Restaurant[]
 }