From 0cd9c33512b5ee89b310f17035d512f96fefc6ec Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Wed, 27 Nov 2024 15:35:58 +0100 Subject: [PATCH] feat(SW-914): add accessibility component --- .../ContactInformation/index.tsx | 3 +- .../Accessibility/accessibility.module.css | 0 .../accessibilityAmenity.module.css | 5 ++ .../Accessibility/index.tsx | 27 +++++++- .../Breakfast/breakfast.module.css | 0 .../AccordionAmenities/Breakfast/index.tsx | 2 +- .../Parking/ParkingPrices/index.tsx | 29 +-------- .../AccordionAmenities/Parking/index.tsx | 64 ++++++++++--------- ...g.module.css => parkingAmenity.module.css} | 3 +- .../filteredAmenities.module.css} | 0 .../{Amenity => FilteredAmenities}/index.tsx | 8 ++- .../HotelPage/SidePeeks/Amenities/index.tsx | 21 ++++-- components/ContentType/HotelPage/data.ts | 6 +- components/ContentType/HotelPage/index.tsx | 1 + i18n/dictionaries/da.json | 1 + i18n/dictionaries/de.json | 1 + i18n/dictionaries/en.json | 1 + i18n/dictionaries/fi.json | 1 + i18n/dictionaries/no.json | 1 + i18n/dictionaries/sv.json | 1 + .../hotelPage/sidepeek/aboutTheHotel.ts | 5 ++ .../hotelPage/sidepeek/accessibility.ts | 5 ++ .../hotelPage/sidepeek/amenities.ts | 5 ++ .../components/hotelPage/sidepeek/amenity.ts | 5 -- .../hotelPage/sidepeek/contactInformation.ts | 6 -- types/enums/facilities.ts | 2 + 26 files changed, 117 insertions(+), 86 deletions(-) delete mode 100644 components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibility.module.css create mode 100644 components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibilityAmenity.module.css delete mode 100644 components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/breakfast.module.css rename components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/{parking.module.css => parkingAmenity.module.css} (87%) rename components/ContentType/HotelPage/SidePeeks/Amenities/{Amenity/amenity.module.css => FilteredAmenities/filteredAmenities.module.css} (100%) rename components/ContentType/HotelPage/SidePeeks/Amenities/{Amenity => FilteredAmenities}/index.tsx (75%) create mode 100644 types/components/hotelPage/sidepeek/accessibility.ts delete mode 100644 types/components/hotelPage/sidepeek/amenity.ts delete mode 100644 types/components/hotelPage/sidepeek/contactInformation.ts diff --git a/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx b/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx index f4bf137a4..d7e4d8a19 100644 --- 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}` diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibility.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibility.module.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibilityAmenity.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibilityAmenity.module.css new file mode 100644 index 000000000..00ab8aebe --- /dev/null +++ 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); +} diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx index a89fd0673..5313bb50a 100644 --- 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 ( - Accessibility +
+ {accessibility?.description && ( + {accessibility.description} + )} + {accessibility?.link && ( + + {intl.formatMessage({ id: "About accessibility" })} + + + )} +
) } diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/breakfast.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/breakfast.module.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx index aeb11aef5..c731bb86a 100644 --- 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 */} ) } diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx index 465d33558..1486faf6b 100644 --- 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 &&
hello
- })} - - ) + // TODO: Parking prices to be implemented. + return
} diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx index 044ee28f5..25c9939e2 100644 --- 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) { >
{parking.map((data) => ( - <> -
- {`${data.type} (${data.name})`} +
+
+ {`${data.type} ${data.name}`}
    -
  • {`Number of charging points for electric cars: ${data.numberOfChargingSpaces}`}
    • + {data.numberOfChargingSpaces ? ( +
  • {`Number of charging points for electric cars: ${data.numberOfChargingSpaces}`}
    • + ) : null}
  • {`${intl.formatMessage({ id: "Parking can be reserved in advance" })}: ${data.canMakeReservation ? intl.formatMessage({ id: "Yes" }) : intl.formatMessage({ id: "No" })}`}
    • -
  • {`${intl.formatMessage({ id: "Number of parking spots" })}: ${data.numberOfParkingSpots}`}
    • -
  • {`${intl.formatMessage({ id: "Distance to hotel" })}: ${data.distanceToHotel}`}
    • -
  • {`${intl.formatMessage({ id: "Address" })}: ${data.address}`}
    • + {data.numberOfParkingSpots ? ( +
  • {`${intl.formatMessage({ id: "Number of parking spots" })}: ${data.numberOfParkingSpots}`}
    • + ) : null} + {data.distanceToHotel ? ( +
  • {`${intl.formatMessage({ id: "Distance to hotel" })}: ${data.distanceToHotel}m`}
    • + ) : null} + {data.address ? ( +
  • {`${intl.formatMessage({ id: "Address" })}: ${data.address}`}
    • + ) : null}
-
+
{intl.formatMessage({ id: "Prices" })} -
-
- - {intl.formatMessage({ id: "Ordinary" })} - - -
-
- - {intl.formatMessage({ id: "Weekday" })} - - -
+
+ + {intl.formatMessage({ id: "Ordinary" })} + + +
+ + {intl.formatMessage({ id: "Weekday" })} + +
+
- +
))}
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parking.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parkingAmenity.module.css similarity index 87% rename from components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parking.module.css rename to components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parkingAmenity.module.css index 0a19979cd..eda13e63c 100644 --- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parking.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); } diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/amenity.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/filteredAmenities.module.css similarity index 100% rename from components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/amenity.module.css rename to components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/filteredAmenities.module.css diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/index.tsx similarity index 75% rename from components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/index.tsx rename to components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/index.tsx index f4a30872b..f121893e5 100644 --- a/components/ContentType/HotelPage/SidePeeks/Amenities/Amenity/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) => { diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx index 95f81ba97..5c9da2472 100644 --- 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 ? : null} - - + {accessibility && ( + + )} + ) diff --git a/components/ContentType/HotelPage/data.ts b/components/ContentType/HotelPage/data.ts index dd50ea6b5..7f828d429 100644 --- a/components/ContentType/HotelPage/data.ts +++ b/components/ContentType/HotelPage/data.ts @@ -281,13 +281,11 @@ const facilityToIconMap: Record = { [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 | null { const iconName = facilityToIconMap[id] return getIconByIconName(iconName) || null } - -export function mapFacilityToIconName(id: FacilityEnum): IconName { - return facilityToIconMap[id] -} diff --git a/components/ContentType/HotelPage/index.tsx b/components/ContentType/HotelPage/index.tsx index 7f627128d..561ae3ab9 100644 --- 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} /> diff --git a/types/components/hotelPage/sidepeek/accessibility.ts b/types/components/hotelPage/sidepeek/accessibility.ts new file mode 100644 index 000000000..335971419 --- /dev/null +++ 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"] +} diff --git a/types/components/hotelPage/sidepeek/amenities.ts b/types/components/hotelPage/sidepeek/amenities.ts index b2671226f..8ded22722 100644 --- 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"] } diff --git a/types/components/hotelPage/sidepeek/amenity.ts b/types/components/hotelPage/sidepeek/amenity.ts deleted file mode 100644 index fb1d9588b..000000000 --- a/types/components/hotelPage/sidepeek/amenity.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type { Hotel } from "@/types/hotel" - -export type AmenityProps = { - filteredAmenities?: Hotel["detailedFacilities"] -} diff --git a/types/components/hotelPage/sidepeek/contactInformation.ts b/types/components/hotelPage/sidepeek/contactInformation.ts deleted file mode 100644 index f1eb73196..000000000 --- a/types/components/hotelPage/sidepeek/contactInformation.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { AboutTheHotelSidePeekProps } from "./aboutTheHotel" - -export type ContactInformationProps = Omit< - AboutTheHotelSidePeekProps, - "descriptions" -> diff --git a/types/enums/facilities.ts b/types/enums/facilities.ts index 169aad6c0..f70da822b 100644 --- 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, }