feat(SW-914): add accessibility component

2024-11-27 15:35:58 +01:00
parent 384f044dac
commit 0cd9c33512
26 changed files with 117 additions and 86 deletions
--- a/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx
@@ -10,7 +10,7 @@ import { getLang } from "@/i18n/serverContext"

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

-import type { ContactInformationProps } from "@/types/components/hotelPage/sidepeek/contactInformation"
+import type { ContactInformationProps } from "@/types/components/hotelPage/sidepeek/aboutTheHotel"

 export default async function ContactInformation({
  hotelAddress,
@@ -21,7 +21,6 @@ export default async function ContactInformation({
 }: ContactInformationProps) {
  const intl = await getIntl()
  const lang = getLang()
-
  const { latitude, longitude } = coordinates
  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`

--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibility.module.css
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibility.module.css
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibilityAmenity.module.css
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibilityAmenity.module.css
@@ -0,0 +1,5 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+}
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx
@@ -1,16 +1,39 @@
+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 styles from "./accessibilityAmenity.module.css"
+
+import type { AccessibilityAmenityProps } from "@/types/components/hotelPage/sidepeek/accessibility"
 import { IconName } from "@/types/components/icon"

-export default async function AccessibilityAmenity() {
+export default async function AccessibilityAmenity({
+  accessibility,
+}: AccessibilityAmenityProps) {
  const intl = await getIntl()
  return (
    <AccordionItem
      title={intl.formatMessage({ id: "Accessibility" })}
      icon={IconName.Accessibility}
    >
-      Accessibility
+      <div className={styles.wrapper}>
+        {accessibility?.description && (
+          <Body color="uiTextHighContrast">{accessibility.description}</Body>
+        )}
+        {accessibility?.link && (
+          <Link
+            href={accessibility.link}
+            color="burgundy"
+            textDecoration="underline"
+            variant="icon"
+          >
+            {intl.formatMessage({ id: "About accessibility" })}
+            <ArrowRightIcon color="burgundy" />
+          </Link>
+        )}
+      </div>
    </AccordionItem>
  )
 }
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/breakfast.module.css
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/breakfast.module.css
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx
@@ -10,7 +10,7 @@ export default async function BreakfastAmenity() {
      title={intl.formatMessage({ id: "Breakfast" })}
      icon={IconName.CoffeeAlt}
    >
-      Breakfast
+      {/* TODO: breakfast to be implemented */}
    </AccordionItem>
  )
 }
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx
@@ -1,31 +1,6 @@
-import { getIntl } from "@/i18n"
-
 import { ParkingPricesProps } from "@/types/components/hotelPage/sidepeek/parking"

 export default async function ParkingPrices({ data }: ParkingPricesProps) {
-  const intl = await getIntl()
-  const hour = intl.formatMessage({ id: "per hour during" })
-  const day = intl.formatMessage({ id: "per day during" })
-  const night = intl.formatMessage({ id: "per night during" })
-  const allDay = intl.formatMessage({ id: "per whole day" })
-
-  function translatePeriods(period: string) {
-    switch (period) {
-      case "Hour":
-        return hour
-      case "Day":
-        return day
-      case "Night":
-        return night
-      case "AllDay":
-        return allDay
-    }
-  }
-  return (
-    <>
-      {data?.map((price) => {
-        return price.amount && <div>hello</div>
-      })}
-    </>
-  )
+  // TODO: Parking prices to be implemented.
+  return <div></div>
 }
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
@@ -4,7 +4,7 @@ import { getIntl } from "@/i18n"

 import ParkingPrices from "./ParkingPrices"

-import styles from "./parking.module.css"
+import styles from "./parkingAmenity.module.css"

 import { ParkingAmenityProps } from "@/types/components/hotelPage/sidepeek/parking"
 import { IconName } from "@/types/components/icon"
@@ -19,45 +19,51 @@ export default async function ParkingAmenity({ parking }: ParkingAmenityProps) {
    >
      <div className={styles.wrapper}>
        {parking.map((data) => (
-          <>
-            <div key={data.type} className={styles.information}>
-              <Body textTransform="bold">{`${data.type} (${data.name})`}</Body>
+          <div key={data.type} className={styles.information}>
+            <div className={styles.list}>
+              <Body textTransform="bold">{`${data.type} ${data.name}`}</Body>
              <Body color="uiTextHighContrast" asChild>
                <ul>
-                  <li>{`Number of charging points for electric cars: ${data.numberOfChargingSpaces}`}</li>
+                  {data.numberOfChargingSpaces ? (
+                    <li>{`Number of charging points for electric cars: ${data.numberOfChargingSpaces}`}</li>
+                  ) : null}
                  <li>{`${intl.formatMessage({ id: "Parking can be reserved in advance" })}: ${data.canMakeReservation ? intl.formatMessage({ id: "Yes" }) : intl.formatMessage({ id: "No" })}`}</li>
-                  <li>{`${intl.formatMessage({ id: "Number of parking spots" })}: ${data.numberOfParkingSpots}`}</li>
-                  <li>{`${intl.formatMessage({ id: "Distance to hotel" })}: ${data.distanceToHotel}`}</li>
-                  <li>{`${intl.formatMessage({ id: "Address" })}: ${data.address}`}</li>
+                  {data.numberOfParkingSpots ? (
+                    <li>{`${intl.formatMessage({ id: "Number of parking spots" })}: ${data.numberOfParkingSpots}`}</li>
+                  ) : null}
+                  {data.distanceToHotel ? (
+                    <li>{`${intl.formatMessage({ id: "Distance to hotel" })}: ${data.distanceToHotel}m`}</li>
+                  ) : null}
+                  {data.address ? (
+                    <li>{`${intl.formatMessage({ id: "Address" })}: ${data.address}`}</li>
+                  ) : null}
                </ul>
              </Body>
            </div>
-            <div>
+            <div className={styles.prices}>
              <Body textTransform="bold">
                {intl.formatMessage({ id: "Prices" })}
              </Body>
-              <div className={styles.prices}>
-                <div>
-                  <Body color="uiTextMediumContrast">
-                    {intl.formatMessage({ id: "Ordinary" })}
-                  </Body>
-                  <ParkingPrices
-                    data={data.pricing.localCurrency.ordinary}
-                    currency={data.pricing.localCurrency.currency}
-                  />
-                </div>
-                <div>
-                  <Body color="uiTextMediumContrast">
-                    {intl.formatMessage({ id: "Weekday" })}
-                  </Body>
-                  <ParkingPrices
-                    data={data.pricing.localCurrency.weekend}
-                    currency={data.pricing.localCurrency.currency}
-                  />
-                </div>
+              <div>
+                <Body color="uiTextMediumContrast">
+                  {intl.formatMessage({ id: "Ordinary" })}
+                </Body>
+                <ParkingPrices
+                  data={data.pricing.localCurrency.ordinary}
+                  currency={data.pricing.localCurrency.currency}
+                />
+              </div>
+              <Body color="uiTextMediumContrast">
+                {intl.formatMessage({ id: "Weekday" })}
+              </Body>
+              <div>
+                <ParkingPrices
+                  data={data.pricing.localCurrency.weekend}
+                  currency={data.pricing.localCurrency.currency}
+                />
              </div>
            </div>
-          </>
+          </div>
        ))}
      </div>
    </AccordionItem>
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parkingAmenity.module.css
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parkingAmenity.module.css
@@ -11,8 +11,9 @@
  gap: var(--Spacing-x-one-and-half);
 }

+.list,
 .prices {
  display: flex;
  flex-direction: column;
-  gap: var(--Spacing-x1);
+  gap: var(--Spacing-x-half);
 }
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/filteredAmenities.module.css
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/filteredAmenities.module.css
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/index.tsx
@@ -3,11 +3,13 @@ import Body from "@/components/TempDesignSystem/Text/Body"

 import { mapFacilityToIcon } from "../../../data"

-import styles from "./amenity.module.css"
+import styles from "./filteredAmenities.module.css"

-import type { AmenityProps } from "@/types/components/hotelPage/sidepeek/amenity"
+import type { FilteredAmenitiesProps } from "@/types/components/hotelPage/sidepeek/amenities"

-export default function Amenity({ filteredAmenities }: AmenityProps) {
+export default function FilteredAmenities({
+  filteredAmenities,
+}: FilteredAmenitiesProps) {
  return (
    <>
      {filteredAmenities?.map((amenity) => {
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx
@@ -11,23 +11,30 @@ import {
  CheckInAmenity,
  ParkingAmenity,
 } from "./AccordionAmenities"
-import Amenity from "./Amenity"
+import FilteredAmenities from "./FilteredAmenities"

 import type { AmenitiesSidePeekProps } from "@/types/components/hotelPage/sidepeek/amenities"
+import { FacilityEnum } from "@/types/enums/facilities"

 export default async function AmenitiesSidePeek({
  amenitiesList,
  parking,
  checkInInformation,
+  accessibility,
 }: AmenitiesSidePeekProps) {
  const lang = getLang()
  const intl = await getIntl()

  const filteredAmenities = amenitiesList.filter((filter) => {
    return (
-      !filter.name.startsWith("Parking") &&
-      filter.name !== "Meeting / conference facilities" &&
-      filter.name !== "Late check-out until 14:00 guaranteed"
+      filter.id !== FacilityEnum.ParkingAdditionalCost &&
+      filter.id !== FacilityEnum.ParkingElectricCharging &&
+      filter.id !== FacilityEnum.ParkingFreeParking &&
+      filter.id !== FacilityEnum.ParkingGarage &&
+      filter.id !== FacilityEnum.ParkingOutdoor &&
+      filter.id !== FacilityEnum.MeetingArea &&
+      filter.id !== FacilityEnum.ServesBreakfastAlwaysIncluded &&
+      filter.id !== FacilityEnum.LateCheckOutUntil1400Guaranteed
    )
  })

@@ -40,8 +47,10 @@ export default async function AmenitiesSidePeek({
        {parking.length ? <ParkingAmenity parking={parking} /> : null}
        <BreakfastAmenity />
        <CheckInAmenity checkInInformation={checkInInformation} />
-        <AccessibilityAmenity />
-        <Amenity filteredAmenities={filteredAmenities} />
+        {accessibility && (
+          <AccessibilityAmenity accessibility={accessibility} />
+        )}
+        <FilteredAmenities filteredAmenities={filteredAmenities} />
      </Accordion>
    </SidePeek>
  )
--- a/components/ContentType/HotelPage/data.ts
+++ b/components/ContentType/HotelPage/data.ts
@@ -281,13 +281,11 @@ const facilityToIconMap: Record<FacilityEnum, IconName> = {
  [FacilityEnum.WideEntrance]: IconName.StarFilled,
  [FacilityEnum.WideRestaurantEntrance]: IconName.StarFilled,
  [FacilityEnum.WiFiWirelessInternetAccessAllScandic]: IconName.StarFilled,
+  [FacilityEnum.MeetingArea]: IconName.Business,
+  [FacilityEnum.LateCheckOutUntil1400Guaranteed]: IconName.Business,
 }

 export function mapFacilityToIcon(id: FacilityEnum): FC<IconProps> | null {
  const iconName = facilityToIconMap[id]
  return getIconByIconName(iconName) || null
 }
-
-export function mapFacilityToIconName(id: FacilityEnum): IconName {
-  return facilityToIconMap[id]
-}
--- a/components/ContentType/HotelPage/index.tsx
+++ b/components/ContentType/HotelPage/index.tsx
@@ -183,6 +183,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
          amenitiesList={detailedFacilities}
          parking={parking}
          checkInInformation={hotelFacts.checkin}
+          accessibility={hotelFacts.hotelInformation.accessibility}
        />
        <AboutTheHotelSidePeek
          hotelAddress={address}
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -6,6 +6,7 @@
  "A photo of the room": "Et foto af værelset",
  "ACCE": "Tilgængelighed",
  "ALLG": "Allergi",
+  "About accessibility": "Om tilgængelighed",
  "About meetings & conferences": "About meetings & conferences",
  "About the hotel": "Om hotellet",
  "Accept new price": "Accepter ny pris",
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -6,6 +6,7 @@
  "A photo of the room": "Ein Foto des Zimmers",
  "ACCE": "Zugänglichkeit",
  "ALLG": "Allergie",
+  "About accessibility": "Über Barrierefreiheit",
  "About meetings & conferences": "About meetings & conferences",
  "About the hotel": "Über das Hotel",
  "Accept new price": "Neuen Preis akzeptieren",
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -6,6 +6,7 @@
  "A photo of the room": "A photo of the room",
  "ACCE": "Accessibility",
  "ALLG": "Allergy",
+  "About accessibility": "About accessibility",
  "About meetings & conferences": "About meetings & conferences",
  "About the hotel": "About the hotel",
  "Accept new price": "Accept new price",
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -6,6 +6,7 @@
  "A photo of the room": "Kuva huoneesta",
  "ACCE": "Saavutettavuus",
  "ALLG": "Allergia",
+  "About accessibility": "Tietoja saavutettavuudesta",
  "About meetings & conferences": "About meetings & conferences",
  "About the hotel": "Tietoja hotellista",
  "Accept new price": "Hyväksy uusi hinta",
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -6,6 +6,7 @@
  "A photo of the room": "Et bilde av rommet",
  "ACCE": "Tilgjengelighet",
  "ALLG": "Allergi",
+  "About accessibility": "Om tilgjengelighet",
  "About meetings & conferences": "About meetings & conferences",
  "About the hotel": "Om hotellet",
  "Accept new price": "Aksepterer ny pris",
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -6,6 +6,7 @@
  "A photo of the room": "Ett foto av rummet",
  "ACCE": "Tillgänglighet",
  "ALLG": "Allergi",
+  "About accessibility": "Om tillgänglighet",
  "About meetings & conferences": "About meetings & conferences",
  "About the hotel": "Om hotellet",
  "Accept new price": "Accepter ny pris",
--- a/types/components/hotelPage/sidepeek/aboutTheHotel.ts
+++ b/types/components/hotelPage/sidepeek/aboutTheHotel.ts
@@ -8,3 +8,8 @@ export type AboutTheHotelSidePeekProps = {
  ecoLabels: Hotel["hotelFacts"]["ecoLabels"]
  descriptions: Hotel["hotelContent"]["texts"]
 }
+
+export type ContactInformationProps = Omit<
+  AboutTheHotelSidePeekProps,
+  "descriptions"
+>
--- a/types/components/hotelPage/sidepeek/accessibility.ts
+++ b/types/components/hotelPage/sidepeek/accessibility.ts
@@ -0,0 +1,5 @@
+import type { Hotel } from "@/types/hotel"
+
+export type AccessibilityAmenityProps = {
+  accessibility: Hotel["hotelFacts"]["hotelInformation"]["accessibility"]
+}
--- a/types/components/hotelPage/sidepeek/amenities.ts
+++ b/types/components/hotelPage/sidepeek/amenities.ts
@@ -4,4 +4,9 @@ export type AmenitiesSidePeekProps = {
  amenitiesList: Hotel["detailedFacilities"]
  parking: Hotel["parking"]
  checkInInformation: Hotel["hotelFacts"]["checkin"]
+  accessibility: Hotel["hotelFacts"]["hotelInformation"]["accessibility"]
+}
+
+export type FilteredAmenitiesProps = {
+  filteredAmenities: Hotel["detailedFacilities"]
 }
--- a/types/components/hotelPage/sidepeek/amenity.ts
+++ b/types/components/hotelPage/sidepeek/amenity.ts
@@ -1,5 +0,0 @@
-import type { Hotel } from "@/types/hotel"
-
-export type AmenityProps = {
-  filteredAmenities?: Hotel["detailedFacilities"]
-}
--- a/types/components/hotelPage/sidepeek/contactInformation.ts
+++ b/types/components/hotelPage/sidepeek/contactInformation.ts
@@ -1,6 +0,0 @@
-import type { AboutTheHotelSidePeekProps } from "./aboutTheHotel"
-
-export type ContactInformationProps = Omit<
-  AboutTheHotelSidePeekProps,
-  "descriptions"
->
--- a/types/enums/facilities.ts
+++ b/types/enums/facilities.ts
@@ -259,4 +259,6 @@ export enum FacilityEnum {
  WideEntrance = 2085,
  WideRestaurantEntrance = 2087,
  WiFiWirelessInternetAccessAllScandic = 5774,
+  MeetingArea = 1692,
+  LateCheckOutUntil1400Guaranteed = 324101,
 }