From 8152aea6499c1eca275c594230e8d729a24b3346 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Wed, 23 Apr 2025 08:41:04 +0000 Subject: [PATCH] fix(SW-1241): Adjusted amenities sidepeek on hotel pages and booking flow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Approved-by: Michael Zetterberg Approved-by: Matilda Landström --- .../accessibilityAmenity.module.css | 5 - .../AccordionAmenities/Breakfast/index.tsx | 46 ------ .../AccordionAmenities/CheckIn/index.tsx | 47 ------ .../Parking/parkingAmenity.module.css | 4 - .../Amenities/AccordionAmenities/index.ts | 4 - .../Amenities/FilteredAmenities/index.tsx | 44 ------ .../HotelPage/SidePeeks/Amenities/index.tsx | 74 +++------ .../HotelReservation/HotelCard/index.tsx | 2 + .../HotelReservation/ReadMore/index.tsx | 23 ++- .../ReadMore/readMore.module.css | 25 --- .../SelectRate/HotelInfoCard/index.tsx | 2 + .../HotelReservation/SidePeek/index.tsx | 25 ++- .../AlternateOpeningHours/index.tsx | 9 +- .../components/OpeningHours/index.tsx | 18 ++- .../ParkingInformation/ParkingList/index.tsx | 15 +- .../ParkingPrices/index.tsx | 47 +++--- .../ParkingPrices/parkingPrices.module.css | 5 + .../components/ParkingInformation/index.tsx | 66 ++++---- .../parkingInformation.module.css | 8 + .../SidePeeks/AmenitiesSidePeek/index.tsx | 49 ++++++ .../Accordions/Accessibility.tsx} | 37 ++--- .../Accordions/Breakfast.tsx | 61 ++++++++ .../Accordions/CheckInCheckOut.tsx | 60 ++++++++ .../Accordions/Parking.tsx} | 28 ++-- .../Accordions/sidePeekAccordion.module.css | 26 ++++ .../additionalAmenities.module.css} | 1 + .../AdditionalAmenities/index.tsx | 42 +++++ .../Accordions/Accessibility.tsx | 24 --- .../Accordions/CheckInCheckOut.tsx | 47 ------ .../Accordions/MeetingsAndConferences.tsx | 24 --- .../HotelSidePeek/Accordions/Parking.tsx | 74 --------- .../HotelSidePeek/Accordions/Restaurant.tsx | 29 ---- .../Accordions/sidePeekAccordion.module.css | 24 --- .../HotelSidePeek/hotelSidePeek.module.css | 32 +--- .../SidePeeks/HotelSidePeek/index.tsx | 98 ++++-------- .../Accordion/AccordionItem/index.tsx | 6 +- apps/scandic-web/i18n/dictionaries/en.json | 143 +++++++++++++++++- .../hotelPage/sidepeek/accessibility.ts | 4 - .../hotelPage/sidepeek/amenities.ts | 27 ++-- .../components/hotelPage/sidepeek/checkIn.ts | 5 - .../hotelPage/sidepeek/openingHours.ts | 7 - .../hotelReservation/amenitiesSidePeek.ts | 10 ++ .../hotelReservation/hotelSidePeek.ts | 3 +- .../selectHotel/selectHotel.ts | 24 +-- .../components/hotelReservation/sidePeek.ts | 1 + .../types/components/sidePeeks/amenities.ts | 30 ++++ 46 files changed, 654 insertions(+), 731 deletions(-) delete mode 100644 apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibilityAmenity.module.css delete mode 100644 apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx delete mode 100644 apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckIn/index.tsx delete mode 100644 apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parkingAmenity.module.css delete mode 100644 apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/index.ts delete mode 100644 apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/index.tsx delete mode 100644 apps/scandic-web/components/HotelReservation/ReadMore/readMore.module.css create mode 100644 apps/scandic-web/components/SidePeeks/AmenitiesSidePeek/index.tsx rename apps/scandic-web/components/{ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx => SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx} (51%) create mode 100644 apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast.tsx create mode 100644 apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/CheckInCheckOut.tsx rename apps/scandic-web/components/{ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx => SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx} (62%) create mode 100644 apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/sidePeekAccordion.module.css rename apps/scandic-web/components/{ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/filteredAmenities.module.css => SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities/additionalAmenities.module.css} (85%) create mode 100644 apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities/index.tsx delete mode 100644 apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/Accessibility.tsx delete mode 100644 apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/CheckInCheckOut.tsx delete mode 100644 apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/MeetingsAndConferences.tsx delete mode 100644 apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/Parking.tsx delete mode 100644 apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/Restaurant.tsx delete mode 100644 apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/sidePeekAccordion.module.css delete mode 100644 apps/scandic-web/types/components/hotelPage/sidepeek/accessibility.ts delete mode 100644 apps/scandic-web/types/components/hotelPage/sidepeek/checkIn.ts delete mode 100644 apps/scandic-web/types/components/hotelPage/sidepeek/openingHours.ts create mode 100644 apps/scandic-web/types/components/hotelReservation/amenitiesSidePeek.ts create mode 100644 apps/scandic-web/types/components/sidePeeks/amenities.ts diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibilityAmenity.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibilityAmenity.module.css deleted file mode 100644 index 00ab8aebe..000000000 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/accessibilityAmenity.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.wrapper { - display: flex; - flex-direction: column; - gap: var(--Spacing-x3); -} diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx deleted file mode 100644 index 9b42adee9..000000000 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { IconName } from "@/components/Icons/iconName" -import OpeningHours from "@/components/OpeningHours" -import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" -import Body from "@/components/TempDesignSystem/Text/Body" -import { getIntl } from "@/i18n" - -import type { BreakfastAmenityProps } from "@/types/components/hotelPage/sidepeek/amenities" -import { HotelTypeEnum } from "@/types/enums/hotelType" - -export default async function BreakfastAmenity({ - openingHours, - alternateOpeningHours, - hotelType, -}: BreakfastAmenityProps) { - const intl = await getIntl() - - const accordionContent = - hotelType === HotelTypeEnum.ScandicGo ? ( - - {intl.formatMessage({ - defaultMessage: "All-day breakfast", - })} - - ) : ( - - ) - - return ( - - {accordionContent} - - ) -} diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckIn/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckIn/index.tsx deleted file mode 100644 index dd9ae942f..000000000 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckIn/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { IconName } from "@/components/Icons/iconName" -import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" -import Body from "@/components/TempDesignSystem/Text/Body" -import { getIntl } from "@/i18n" - -import type { CheckInAmenityProps } from "@/types/components/hotelPage/sidepeek/checkIn" - -export default async function CheckInAmenity({ - checkInInformation, -}: CheckInAmenityProps) { - const intl = await getIntl() - const { checkInTime, checkOutTime } = checkInInformation - return ( - - - {intl.formatMessage({ - defaultMessage: "Times", - })} - - - {intl.formatMessage( - { - defaultMessage: "Check in from: {checkInTime}", - }, - { checkInTime } - )} - - - {intl.formatMessage( - { - defaultMessage: "Check out at latest: {checkOutTime}", - }, - { checkOutTime } - )} - - - ) -} diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parkingAmenity.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parkingAmenity.module.css deleted file mode 100644 index 1f6c40d74..000000000 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parkingAmenity.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.wrapper { - display: grid; - gap: var(--Spacing-x3); -} diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/index.ts b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/index.ts deleted file mode 100644 index 58ecb1e2e..000000000 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { default as AccessibilityAmenity } from "./Accessibility" -export { default as BreakfastAmenity } from "./Breakfast" -export { default as CheckInAmenity } from "./CheckIn" -export { default as ParkingAmenity } from "./Parking" diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/index.tsx deleted file mode 100644 index d83066d67..000000000 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" - -import { FacilityToIcon } from "../../../data" - -import styles from "./filteredAmenities.module.css" - -import type { FilteredAmenitiesProps } from "@/types/components/hotelPage/sidepeek/amenities" - -export default function FilteredAmenities({ - filteredAmenities, -}: FilteredAmenitiesProps) { - return ( - <> - {filteredAmenities?.map((amenity) => { - const Icon = ( - - ) - return ( -
  • -
    - {Icon ? ( - Icon - ) : ( - - )} - - {amenity.name} - -
    -
    • - ) - })} - - ) -} diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx index 0e9ef9147..6149fe7e8 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx @@ -1,19 +1,14 @@ +import AccessibilityAccordionItem from "@/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility" +import BreakfastAccordionItem from "@/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast" +import CheckInCheckOutAccordionItem from "@/components/SidePeeks/AmenitiesSidepeekContent/Accordions/CheckInCheckOut" +import ParkingAccordionItem from "@/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking" +import AdditionalAmenities from "@/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities" import Accordion from "@/components/TempDesignSystem/Accordion" import SidePeek from "@/components/TempDesignSystem/SidePeek" import { getIntl } from "@/i18n" -import { - AccessibilityAmenity, - BreakfastAmenity, - CheckInAmenity, - ParkingAmenity, -} from "./AccordionAmenities" -import FilteredAmenities from "./FilteredAmenities" - import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage" import type { AmenitiesSidePeekProps } from "@/types/components/hotelPage/sidepeek/amenities" -import { FacilityEnum } from "@/types/enums/facilities" -import { HotelTypeEnum } from "@/types/enums/hotelType" export default async function AmenitiesSidePeek({ amenitiesList, @@ -25,35 +20,6 @@ export default async function AmenitiesSidePeek({ }: AmenitiesSidePeekProps) { const intl = await getIntl() - const amenitiesToRemove = [ - FacilityEnum.ParkingAdditionalCost, - FacilityEnum.ParkingElectricCharging, - FacilityEnum.ParkingFreeParking, - FacilityEnum.ParkingGarage, - FacilityEnum.ParkingOutdoor, - FacilityEnum.MeetingArea, - FacilityEnum.ServesBreakfastAlwaysIncluded, - FacilityEnum.LateCheckOutUntil1400Guaranteed, - ] - - const filteredAmenities = amenitiesList.filter( - (amenity) => !amenitiesToRemove.includes(amenity.id) - ) - - const breakfastOpeningHours = restaurants - ?.map((restaurant) => { - const breakfastDetail = restaurant.openingDetails.find( - (details) => - details.openingHours.name === "Breakfast" || - details.openingHours.name === - intl.formatMessage({ - defaultMessage: "Breakfast", - }) - ) - return breakfastDetail - }) - .filter(Boolean)[0] - return ( - - {(breakfastOpeningHours || hotelType === HotelTypeEnum.ScandicGo) && ( - - )} - - {(accessibility.elevatorPitch || - accessibility.accessibilityPageUrl) && ( - - )} - + + + + ) diff --git a/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx index ed828d383..63b8a8061 100644 --- a/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx +++ b/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx @@ -38,6 +38,7 @@ import styles from "./hotelCard.module.css" import { HotelCardListingTypeEnum } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps" import type { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps" +import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek" import { RateTypeEnum } from "@/types/enums/rateType" import type { Lang } from "@/constants/languages" @@ -173,6 +174,7 @@ function HotelCard({ hotelId={hotel.operaId} hotel={hotel} showCTA={true} + sidePeekKey={SidePeekEnum.hotelDetails} />
    diff --git a/apps/scandic-web/components/HotelReservation/ReadMore/index.tsx b/apps/scandic-web/components/HotelReservation/ReadMore/index.tsx index 865636fa1..7295fbe36 100644 --- a/apps/scandic-web/components/HotelReservation/ReadMore/index.tsx +++ b/apps/scandic-web/components/HotelReservation/ReadMore/index.tsx @@ -1,30 +1,29 @@ "use client" +import { Button } from "@scandic-hotels/design-system/Button" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import useSidePeekStore from "@/stores/sidepeek" -import Button from "@/components/TempDesignSystem/Button" - -import styles from "./readMore.module.css" - import type { ReadMoreProps } from "@/types/components/hotelReservation/selectHotel/selectHotel" -import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek" -export default function ReadMore({ label, hotelId, showCTA }: ReadMoreProps) { +export default function ReadMore({ + label, + hotelId, + showCTA, + sidePeekKey, +}: ReadMoreProps) { const openSidePeek = useSidePeekStore((state) => state.openSidePeek) return ( ) } diff --git a/apps/scandic-web/components/HotelReservation/ReadMore/readMore.module.css b/apps/scandic-web/components/HotelReservation/ReadMore/readMore.module.css deleted file mode 100644 index f7859a8fc..000000000 --- a/apps/scandic-web/components/HotelReservation/ReadMore/readMore.module.css +++ /dev/null @@ -1,25 +0,0 @@ -.detailsButton { - align-self: start; - border-radius: 0; - height: auto; - padding-left: 0; - padding-right: 0; -} - -.content { - display: grid; - gap: var(--Spacing-x2); -} - -.amenity { - font-family: var(--typography-Body-Regular-fontFamily); - border-bottom: 1px solid var(--Base-Border-Subtle); - /* padding set to align with AccordionItem which has a different composition */ - padding: var(--Spacing-x2) - calc(var(--Spacing-x1) + var(--Spacing-x-one-and-half)); -} - -.list { - font-family: var(--typography-Body-Regular-fontFamily); - list-style: inside; -} diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx index ccddde596..b534203f9 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx @@ -16,6 +16,7 @@ import TripAdvisorChip from "../../TripAdvisorChip" import styles from "./hotelInfoCard.module.css" import type { HotelInfoCardProps } from "@/types/components/hotelReservation/selectRate/hotelInfoCard" +import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek" export default async function HotelInfoCard({ hotel }: HotelInfoCardProps) { const intl = await getIntl() @@ -88,6 +89,7 @@ export default async function HotelInfoCard({ hotel }: HotelInfoCardProps) { hotelId={hotel.operaId} hotel={hotel} showCTA={false} + sidePeekKey={SidePeekEnum.amenities} />
    diff --git a/apps/scandic-web/components/HotelReservation/SidePeek/index.tsx b/apps/scandic-web/components/HotelReservation/SidePeek/index.tsx index c35f9a334..5f39a877d 100644 --- a/apps/scandic-web/components/HotelReservation/SidePeek/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SidePeek/index.tsx @@ -3,6 +3,7 @@ import { trpc } from "@/lib/trpc/client" import useSidePeekStore from "@/stores/sidepeek" +import AmenitiesSidePeek from "@/components/SidePeeks/AmenitiesSidePeek" import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek" import HotelSidePeek from "@/components/SidePeeks/HotelSidePeek" import RoomSidePeek from "@/components/SidePeeks/RoomSidePeek" @@ -39,13 +40,23 @@ export default function HotelReservationSidePeek() { return ( <> {hotelData && ( - + <> + + + )} {selectedRoom && ( +
      {numberOfChargingSpaces ? (
    • @@ -71,6 +74,6 @@ export default async function ParkingList({
      • ) : null}
    - +     ) } diff --git a/apps/scandic-web/components/ParkingInformation/ParkingPrices/index.tsx b/apps/scandic-web/components/ParkingInformation/ParkingPrices/index.tsx index e50458710..1d29b4a01 100644 --- a/apps/scandic-web/components/ParkingInformation/ParkingPrices/index.tsx +++ b/apps/scandic-web/components/ParkingInformation/ParkingPrices/index.tsx @@ -1,5 +1,9 @@ -import Body from "@/components/TempDesignSystem/Text/Body" -import { getIntl } from "@/i18n" +"use client" + +import { useIntl } from "react-intl" + +import { Typography } from "@scandic-hotels/design-system/Typography" + import { formatPrice } from "@/utils/numberFormatting" import { getPeriod } from "./utils" @@ -11,28 +15,28 @@ import { Periods, } from "@/types/components/hotelPage/sidepeek/parking" -export default async function ParkingPrices({ +export default function ParkingPrices({ currency = "", freeParking, pricing, }: ParkingPricesProps) { - const intl = await getIntl() + const intl = useIntl() return freeParking ? ( - - {intl.formatMessage({ - defaultMessage: "Free parking", - })} - + +

    + {intl.formatMessage({ defaultMessage: "Free parking" })} +

    +     ) : (
    {pricing?.map((parking) => (
    - +
    {getPeriod(intl, parking.period)}
    - - +     +
    {parking.amount ? formatPrice(intl, parking.amount, currency) @@ -40,24 +44,17 @@ export default async function ParkingPrices({ defaultMessage: "At a cost", })}
    - +
    {parking.startTime && parking.endTime && parking.period !== Periods.allDay && ( -
    - -
    - {intl.formatMessage({ - defaultMessage: "From", - })} -
    - - - {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} + +
    +
    {intl.formatMessage({ defaultMessage: "From" })}
    {`${parking.startTime}-${parking.endTime}`}
    - -
    +
    + )}
    ))} diff --git a/apps/scandic-web/components/ParkingInformation/ParkingPrices/parkingPrices.module.css b/apps/scandic-web/components/ParkingInformation/ParkingPrices/parkingPrices.module.css index 36e539f35..af64ab3eb 100644 --- a/apps/scandic-web/components/ParkingInformation/ParkingPrices/parkingPrices.module.css +++ b/apps/scandic-web/components/ParkingInformation/ParkingPrices/parkingPrices.module.css @@ -2,6 +2,7 @@ display: grid; row-gap: var(--Spacing-x1); margin: 0; + color: var(--Text-Default); } .period { @@ -13,3 +14,7 @@ margin: 0; flex: 1; } + +.priceHeading { + color: var(--Text-Secondary); +} diff --git a/apps/scandic-web/components/ParkingInformation/index.tsx b/apps/scandic-web/components/ParkingInformation/index.tsx index e4bdd9060..d2ab80908 100644 --- a/apps/scandic-web/components/ParkingInformation/index.tsx +++ b/apps/scandic-web/components/ParkingInformation/index.tsx @@ -1,13 +1,13 @@ -import Link from "next/link" +"use client" + +import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { Typography } from "@scandic-hotels/design-system/Typography" -import { getIntl } from "@/i18n" +import ButtonLink from "@/components/ButtonLink" +import Divider from "@/components/TempDesignSystem/Divider" -import Button from "../TempDesignSystem/Button" -import Divider from "../TempDesignSystem/Divider" -import Caption from "../TempDesignSystem/Text/Caption" -import Subtitle from "../TempDesignSystem/Text/Subtitle" import ParkingList from "./ParkingList" import ParkingPrices from "./ParkingPrices" @@ -20,17 +20,19 @@ interface ParkingInformationProps { showExternalParkingButton?: boolean } -export default async function ParkingInformation({ +export default function ParkingInformation({ parking, showExternalParkingButton = true, }: ParkingInformationProps) { - const intl = await getIntl() + const intl = useIntl() + const title = `${parking.type}${parking.name ? ` (${parking.name})` : ""}` + return (
    - -

    {parking.type}

    -     + +

    {title}

    +
    - -
    - {intl.formatMessage({ - defaultMessage: "Prices", - })} + +
    + {intl.formatMessage({ defaultMessage: "Prices" })}
    - +
    - - {intl.formatMessage({ - defaultMessage: "Weekday prices", - })} - + +
    + {intl.formatMessage({ defaultMessage: "Weekday prices" })} +
    +     {parking.pricing.localCurrency ? (
    - - {intl.formatMessage({ - defaultMessage: "Weekend prices", - })} - + +
    + {intl.formatMessage({ defaultMessage: "Weekend prices" })} +
    +     {parking.pricing.localCurrency ? (
    {parking.externalParkingUrl && showExternalParkingButton && ( - + + {intl.formatMessage({ defaultMessage: "Book parking" })} + + )}
    ) diff --git a/apps/scandic-web/components/ParkingInformation/parkingInformation.module.css b/apps/scandic-web/components/ParkingInformation/parkingInformation.module.css index a6549552a..fffccf114 100644 --- a/apps/scandic-web/components/ParkingInformation/parkingInformation.module.css +++ b/apps/scandic-web/components/ParkingInformation/parkingInformation.module.css @@ -16,3 +16,11 @@ display: grid; gap: var(--Spacing-x1); } + +.heading { + color: var(--Text-Default); +} + +.priceHeading { + color: var(--Text-Secondary); +} diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidePeek/index.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidePeek/index.tsx new file mode 100644 index 000000000..20c8436c6 --- /dev/null +++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidePeek/index.tsx @@ -0,0 +1,49 @@ +"use client" + +import { useIntl } from "react-intl" + +import AdditionalAmenities from "@/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities" +import Accordion from "@/components/TempDesignSystem/Accordion" +import SidePeek from "@/components/TempDesignSystem/SidePeek" + +import AccessibilityAccordionItem from "../AmenitiesSidepeekContent/Accordions/Accessibility" +import BreakfastAccordionItem from "../AmenitiesSidepeekContent/Accordions/Breakfast" +import CheckInCheckOutAccordionItem from "../AmenitiesSidepeekContent/Accordions/CheckInCheckOut" +import ParkingAccordionItem from "../AmenitiesSidepeekContent/Accordions/Parking" + +import type { AmenitiesSidePeekProps } from "@/types/components/hotelReservation/amenitiesSidePeek" +import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek" + +export default function AmenitiesSidePeek({ + hotel, + restaurants, + additionalHotelData, + activeSidePeek, + close, +}: AmenitiesSidePeekProps) { + const intl = useIntl() + + return ( + + + + + + + + + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx similarity index 51% rename from apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx rename to apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx index af0acb0bd..679e798d5 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx +++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx @@ -1,20 +1,26 @@ -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +"use client" + +import { useIntl } from "react-intl" + +import { Typography } from "@scandic-hotels/design-system/Typography" import ButtonLink from "@/components/ButtonLink" import { IconName } from "@/components/Icons/iconName" import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" -import Body from "@/components/TempDesignSystem/Text/Body" -import { getIntl } from "@/i18n" -import styles from "./accessibilityAmenity.module.css" +import styles from "./sidePeekAccordion.module.css" -import type { AccessibilityAmenityProps } from "@/types/components/hotelPage/sidepeek/accessibility" +import type { AccessibilityAccordionItemProps } from "@/types/components/sidePeeks/amenities" -export default async function AccessibilityAmenity({ +export default function AccessibilityAccordionItem({ elevatorPitch, accessibilityPageUrl, -}: AccessibilityAmenityProps) { - const intl = await getIntl() +}: AccessibilityAccordionItemProps) { + const intl = useIntl() + + if (!elevatorPitch && !accessibilityPageUrl) { + return null + } return ( -
    - {elevatorPitch && ( - {elevatorPitch} - )} +
    + +

    {elevatorPitch}

    +     {accessibilityPageUrl && ( - {intl.formatMessage({ - defaultMessage: "About accessibility", - })} - - + {intl.formatMessage({ defaultMessage: "About accessibility" })} )}
    diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast.tsx new file mode 100644 index 000000000..ca8513497 --- /dev/null +++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast.tsx @@ -0,0 +1,61 @@ +"use client" + +import { useIntl } from "react-intl" + +import { Typography } from "@scandic-hotels/design-system/Typography" + +import { isDefined } from "@/server/utils" + +import { IconName } from "@/components/Icons/iconName" +import OpeningHours from "@/components/OpeningHours" +import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" + +import styles from "./sidePeekAccordion.module.css" + +import type { BreakfastAccordionItemProps } from "@/types/components/sidePeeks/amenities" +import { HotelTypeEnum } from "@/types/enums/hotelType" + +export default function BreakfastAccordionItem({ + restaurants, + hotelType, +}: BreakfastAccordionItemProps) { + const intl = useIntl() + + const openingHours = restaurants + ?.map((restaurant) => { + const breakfastDetail = restaurant.openingDetails.find( + (details) => + details.openingHours.name === "Breakfast" || + details.openingHours.name === + intl.formatMessage({ defaultMessage: "Breakfast" }) + ) + return breakfastDetail + }) + .filter(isDefined)[0] + + if (!openingHours && hotelType !== HotelTypeEnum.ScandicGo) { + return null + } + + return ( + + {openingHours ? ( + + ) : ( + +

    {intl.formatMessage({ defaultMessage: "All-day breakfast" })}

    +     + )} +     + ) +} diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/CheckInCheckOut.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/CheckInCheckOut.tsx new file mode 100644 index 000000000..0bef319ec --- /dev/null +++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/CheckInCheckOut.tsx @@ -0,0 +1,60 @@ +"use client" + +import { useIntl } from "react-intl" + +import { Typography } from "@scandic-hotels/design-system/Typography" + +import { IconName } from "@/components/Icons/iconName" +import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" +import Divider from "@/components/TempDesignSystem/Divider" + +import styles from "./sidePeekAccordion.module.css" + +import type { CheckInCheckOutAccordionItemProps } from "@/types/components/sidePeeks/amenities" + +export default function CheckInCheckOutAccordionItem({ + checkInData, +}: CheckInCheckOutAccordionItemProps) { + const intl = useIntl() + + const { checkInTime, checkOutTime } = checkInData + + return ( + +
    + +

    + {intl.formatMessage({ defaultMessage: "Hours" })} +

    +     + + +
    +

    + {intl.formatMessage( + { defaultMessage: "Check in from: {checkInTime}" }, + { + checkInTime, + } + )} +

    +

    + {intl.formatMessage( + { defaultMessage: "Check out at latest: {checkOutTime}" }, + { + checkOutTime, + } + )} +

    +
    +     +
    +     + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx similarity index 62% rename from apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx rename to apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx index 5c1568ee9..3d8af8138 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx +++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx @@ -1,19 +1,24 @@ +"use client" + +import { useIntl } from "react-intl" + +import { Typography } from "@scandic-hotels/design-system/Typography" + import ButtonLink from "@/components/ButtonLink" import { IconName } from "@/components/Icons/iconName" import ParkingInformation from "@/components/ParkingInformation" import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" -import { getIntl } from "@/i18n" -import styles from "./parkingAmenity.module.css" +import styles from "./sidePeekAccordion.module.css" -import type { ParkingAmenityProps } from "@/types/components/hotelPage/sidepeek/parking" +import type { ParkingAccordionItemProps } from "@/types/components/sidePeeks/amenities" -export default async function ParkingAmenity({ +export default function ParkingAccordionItem({ parking, - parkingElevatorPitch, + elevatorPitch, parkingPageUrl, -}: ParkingAmenityProps) { - const intl = await getIntl() +}: ParkingAccordionItemProps) { + const intl = useIntl() return ( -
    - {parkingElevatorPitch} +
    + {elevatorPitch ? ( + +

    {elevatorPitch}

    +     + ) : null} {parking.map((data) => ( ))} diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/sidePeekAccordion.module.css b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/sidePeekAccordion.module.css new file mode 100644 index 000000000..82979f42a --- /dev/null +++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/sidePeekAccordion.module.css @@ -0,0 +1,26 @@ +.accordionItem { + color: var(--Text-Default); +} + +.parkingContent, +.accessibilityContent { + display: grid; + gap: var(--Space-x3); +} + +.checkInCheckOutContent { + display: grid; + gap: var(--Space-x15); +} + +.checkInCheckOutContent { + display: grid; + padding: var(--Space-x2) var(--Space-x3); + gap: var(--Space-x1); + border-radius: var(--Corner-radius-Medium); + background: var(--Surface-Secondary-Default); +} + +.subheading { + color: var(--Text-Secondary); +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/filteredAmenities.module.css b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities/additionalAmenities.module.css similarity index 85% rename from apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/filteredAmenities.module.css rename to apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities/additionalAmenities.module.css index ab3adb722..3b7c94f1d 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/FilteredAmenities/filteredAmenities.module.css +++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities/additionalAmenities.module.css @@ -1,6 +1,7 @@ .wrapper { padding: var(--Spacing-x1) var(--Spacing-x0); border-bottom: 1px solid var(--Base-Border-Subtle); + color: var(--Text-Interactive-Default); } .amenity { diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities/index.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities/index.tsx new file mode 100644 index 000000000..dff96d538 --- /dev/null +++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities/index.tsx @@ -0,0 +1,42 @@ +import { Typography } from "@scandic-hotels/design-system/Typography" + +import { FacilityToIcon } from "../../../ContentType/HotelPage/data" + +import styles from "./additionalAmenities.module.css" + +import type { AdditionalAmenitiesProps } from "@/types/components/sidePeeks/amenities" +import { FacilityEnum } from "@/types/enums/facilities" + +export default function AdditionalAmenities({ + amenities, +}: AdditionalAmenitiesProps) { + const amenitiesToIgnore = [ + FacilityEnum.ParkingAdditionalCost, + FacilityEnum.ParkingElectricCharging, + FacilityEnum.ParkingFreeParking, + FacilityEnum.ParkingGarage, + FacilityEnum.ParkingOutdoor, + FacilityEnum.MeetingArea, + FacilityEnum.ServesBreakfastAlwaysIncluded, + FacilityEnum.LateCheckOutUntil1400Guaranteed, + ] + + const filteredAmenities = amenities.filter( + (amenity) => !amenitiesToIgnore.includes(amenity.id) + ) + + return filteredAmenities?.map((amenity) => ( + +
  • +
    + + {amenity.name} +
    +
    • +     + )) +} diff --git a/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/Accessibility.tsx b/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/Accessibility.tsx deleted file mode 100644 index f9e2cec88..000000000 --- a/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/Accessibility.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { useIntl } from "react-intl" - -import { IconName } from "@/components/Icons/iconName" -import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" -import Body from "@/components/TempDesignSystem/Text/Body" - -import type { AccessibilityProps } from "@/types/components/hotelReservation/selectHotel/selectHotel" - -export default function Accessibility({ - elevatorPitchText, -}: AccessibilityProps) { - const intl = useIntl() - return ( - - {elevatorPitchText} - - ) -} diff --git a/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/CheckInCheckOut.tsx b/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/CheckInCheckOut.tsx deleted file mode 100644 index 995afc15b..000000000 --- a/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/CheckInCheckOut.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { useIntl } from "react-intl" - -import { IconName } from "@/components/Icons/iconName" -import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" -import Body from "@/components/TempDesignSystem/Text/Body" - -import type { CheckInCheckOutProps } from "@/types/components/hotelReservation/selectHotel/selectHotel" - -export default function CheckinCheckOut({ checkin }: CheckInCheckOutProps) { - const intl = useIntl() - - return ( - - - {intl.formatMessage({ - defaultMessage: "Hours", - })} - - - {intl.formatMessage( - { - defaultMessage: "Check in from: {checkInTime}", - }, - { - checkInTime: checkin.checkInTime, - } - )} - - - {intl.formatMessage( - { - defaultMessage: "Check out at latest: {checkOutTime}", - }, - { - checkOutTime: checkin.checkOutTime, - } - )} - - - ) -} diff --git a/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/MeetingsAndConferences.tsx b/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/MeetingsAndConferences.tsx deleted file mode 100644 index 230fe868b..000000000 --- a/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/MeetingsAndConferences.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { useIntl } from "react-intl" - -import { IconName } from "@/components/Icons/iconName" -import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" -import Body from "@/components/TempDesignSystem/Text/Body" - -import type { MeetingsAndConferencesProps } from "@/types/components/hotelReservation/selectHotel/selectHotel" - -export default function MeetingsAndConferences({ - meetingDescription, -}: MeetingsAndConferencesProps) { - const intl = useIntl() - return ( - - {meetingDescription} - - ) -} diff --git a/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/Parking.tsx b/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/Parking.tsx deleted file mode 100644 index 8101e19dd..000000000 --- a/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/Parking.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { useIntl } from "react-intl" - -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import { IconName } from "@/components/Icons/iconName" -import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" -import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" - -import styles from "./sidePeekAccordion.module.css" - -import type { ParkingProps } from "@/types/components/hotelReservation/selectHotel/selectHotel" - -export default function Parking({ parking }: ParkingProps) { - const intl = useIntl() - - return ( - - {parking.map((p) => { - const title = `${p.type}${p.name ? ` (${p.name})` : ""}` - - return ( -
    - {title} -
      - {p.address !== undefined && ( -
    • - - {intl.formatMessage( - { - defaultMessage: "Address: {address}", - }, - { - address: p.address, - } - )} -
      • - )} - {p.numberOfParkingSpots !== undefined && ( -
    • - - {intl.formatMessage( - { - defaultMessage: "Number of parking spots: {number}", - }, - { number: p.numberOfParkingSpots } - )} -
      • - )} - {p.numberOfChargingSpaces !== undefined && ( -
    • - - {intl.formatMessage( - { - defaultMessage: - "Number of charging points for electric cars: {number}", - }, - { number: p.numberOfChargingSpaces } - )} -
      • - )} -
    -
    - ) - })} -     - ) -} diff --git a/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/Restaurant.tsx b/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/Restaurant.tsx deleted file mode 100644 index e623f8809..000000000 --- a/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/Restaurant.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { useIntl } from "react-intl" - -import { IconName } from "@/components/Icons/iconName" -import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" -import Body from "@/components/TempDesignSystem/Text/Body" - -import type { RestaurantProps } from "@/types/components/hotelReservation/selectHotel/selectHotel" - -export default function Restaurant({ - restaurantsContentDescriptionMedium, -}: RestaurantProps) { - const intl = useIntl() - - return ( - - {restaurantsContentDescriptionMedium} - - ) -} diff --git a/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/sidePeekAccordion.module.css b/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/sidePeekAccordion.module.css deleted file mode 100644 index 0134e2165..000000000 --- a/apps/scandic-web/components/SidePeeks/HotelSidePeek/Accordions/sidePeekAccordion.module.css +++ /dev/null @@ -1,24 +0,0 @@ -.list { - font-family: var(--typography-Body-Regular-fontFamily); - list-style-position: inside; - list-style-type: none; - margin-top: var(--Spacing-x-one-and-half); -} - -.list li { - display: flex; - align-items: center; - gap: var(--Spacing-x1); - padding-left: var(--Spacing-x1); - justify-items: flex-start; -} - -.list li svg { - flex-shrink: 0; -} - -.parking details > div { - display: flex; - flex-direction: column; - gap: var(--Spacing-x2); -} diff --git a/apps/scandic-web/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css b/apps/scandic-web/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css index 481e6b47d..b58a25689 100644 --- a/apps/scandic-web/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css +++ b/apps/scandic-web/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css @@ -1,35 +1,5 @@ -.spacing { - display: flex; - flex-direction: column; - gap: var(--Spacing-x2); -} - .content { display: grid; gap: var(--Spacing-x2); -} - -.content:last-child { - gap: 0; -} - -.content > p { - margin-bottom: var(--Spacing-x-one-and-half); -} - -.content > ul > li:first-child { - border-top: 1px solid var(--Base-Border-Subtle); -} - -.amenity > p { - border-top: 1px solid var(--Base-Border-Subtle); - padding: calc(var(--Spacing-x-one-and-half) + var(--Spacing-x1)) - var(--Spacing-x1); - display: flex; - align-items: center; - gap: var(--Spacing-x1); -} - -.noIcon { - margin-left: var(--Spacing-x4); + color: var(--Text-Default); } diff --git a/apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx b/apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx index 7b38792d0..e0483a0e2 100644 --- a/apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx +++ b/apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx @@ -1,16 +1,18 @@ +"use client" + import { useIntl } from "react-intl" -import { FacilityToIcon } from "@/components/ContentType/HotelPage/data" +import { Typography } from "@scandic-hotels/design-system/Typography" + import Contact from "@/components/HotelReservation/Contact" +import AdditionalAmenities from "@/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities" import Accordion from "@/components/TempDesignSystem/Accordion" import SidePeek from "@/components/TempDesignSystem/SidePeek" -import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" -import Accessibility from "./Accordions/Accessibility" -import CheckinCheckOut from "./Accordions/CheckInCheckOut" -import MeetingsAndConferences from "./Accordions/MeetingsAndConferences" -import Parking from "./Accordions/Parking" -import Restaurant from "./Accordions/Restaurant" +import AccessibilityAccordionItem from "../AmenitiesSidepeekContent/Accordions/Accessibility" +import BreakfastAccordionItem from "../AmenitiesSidepeekContent/Accordions/Breakfast" +import CheckInCheckOutAccordionItem from "../AmenitiesSidepeekContent/Accordions/CheckInCheckOut" +import ParkingAccordionItem from "../AmenitiesSidepeekContent/Accordions/Parking" import styles from "./hotelSidePeek.module.css" @@ -19,17 +21,12 @@ import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek" export default function HotelSidePeek({ hotel, + restaurants, additionalHotelData, activeSidePeek, close, }: HotelSidePeekProps) { const intl = useIntl() - const amenitiesList = hotel.detailedFacilities.filter( - (facility) => facility.public - ) - const parking = hotel.parking.filter( - (p) => p?.numberOfParkingSpots || p?.numberOfChargingSpaces || p?.address - ) return (
    - - {intl.formatMessage({ - defaultMessage: "Practical information", - })} - + +

    + {intl.formatMessage({ defaultMessage: "Practical information" })} +

    +     - - {parking?.length > 0 && } - {additionalHotelData?.restaurantsOverviewPage - ?.restaurantsContentDescriptionMedium && ( - - )} - {additionalHotelData?.hotelSpecialNeeds.elevatorPitch && ( - - )} - {hotel.hotelFacts?.checkin && ( - - )} - {hotel.hotelContent.texts?.meetingDescription?.medium && ( - - )} - -
    - {amenitiesList.map((amenity) => { - const Icon = ( - - ) - return ( - - {Icon && Icon} - {amenity.name} - - ) - })} -
    - {/* TODO: handle linking to Hotel Page */} - {/* {showCTA && ( - - )} */} + + + + + + +
    ) diff --git a/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx b/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx index 2b24b3ae6..b6c6a8191 100644 --- a/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx @@ -32,7 +32,11 @@ export default function AccordionItem({ const IconComp = icon ? icon : iconName && ( - + ) function toggleAccordion() { diff --git a/apps/scandic-web/i18n/dictionaries/en.json b/apps/scandic-web/i18n/dictionaries/en.json index 511085af2..8196183d3 100644 --- a/apps/scandic-web/i18n/dictionaries/en.json +++ b/apps/scandic-web/i18n/dictionaries/en.json @@ -1,4 +1,10 @@ { + "+2LakC": [ + { + "type": 0, + "value": "Invalid membership number format" + } + ], "+CC2q2": [ { "type": 0, @@ -547,8 +553,7 @@ "value": "Please enter the code sent to " }, { - "children": [ - ], + "children": [], "type": 8, "value": "maskedContactInfo" }, @@ -901,6 +906,12 @@ "value": "Log in/Join" } ], + "5cIDjn": [ + { + "type": 0, + "value": "Booking code is invalid" + } + ], "5kfntb": [ { "type": 0, @@ -1009,6 +1020,12 @@ "value": "Continue with new price" } ], + "6TXxwM": [ + { + "type": 0, + "value": "Last name can't contain any special characters" + } + ], "6U6gjS": [ { "type": 0, @@ -1779,8 +1796,7 @@ "value": "Please enter the code sent to " }, { - "children": [ - ], + "children": [], "type": 8, "value": "maskedContactInfo" }, @@ -2170,6 +2186,12 @@ "value": "Find" } ], + "FPcbu0": [ + { + "type": 0, + "value": "Please enter a valid phone number" + } + ], "FZI5xl": [ { "type": 0, @@ -2420,6 +2442,12 @@ "value": "About accessibility" } ], + "HRrOrP": [ + { + "type": 0, + "value": "Bed choice is required" + } + ], "HW+bLl": [ { "type": 0, @@ -2849,6 +2877,12 @@ "value": "points" } ], + "KaH0vJ": [ + { + "type": 0, + "value": "You cannot have more children in adults bed than adults in the room" + } + ], "KgkOn/": [ { "type": 0, @@ -3497,6 +3531,12 @@ "value": "See details" } ], + "RS5Kmw": [ + { + "type": 0, + "value": "New password is required" + } + ], "RT3W/7": [ { "type": 0, @@ -3641,6 +3681,12 @@ "value": "Go back to My Pages" } ], + "Seanpx": [ + { + "type": 0, + "value": "Required" + } + ], "SjHZ7g": [ { "type": 0, @@ -4005,6 +4051,12 @@ "value": "You have cancelled to process to guarantee your booking." } ], + "Vp6BHv": [ + { + "type": 0, + "value": "Must be at least 18 years of age to continue" + } + ], "W1IuVy": [ { "type": 0, @@ -4335,8 +4387,7 @@ "value": "Please enter the code sent to " }, { - "children": [ - ], + "children": [], "type": 8, "value": "maskedContactInfo" }, @@ -4387,6 +4438,12 @@ "value": "Select a rate" } ], + "YqklRf": [ + { + "type": 0, + "value": "Destination required" + } + ], "Z+d8/1": [ { "type": 0, @@ -4697,6 +4754,12 @@ "value": "Where to?" } ], + "boU1pG": [ + { + "type": 0, + "value": "Code and voucher is not available with reward night." + } + ], "bsUwPW": [ { "type": 0, @@ -5247,6 +5310,12 @@ "value": " (incl VAT)" } ], + "gq4AYf": [ + { + "type": 0, + "value": "Only digits are allowed" + } + ], "gttxKw": [ { "type": 0, @@ -5349,6 +5418,12 @@ "value": "Your transaction" } ], + "iZMEZ+": [ + { + "type": 0, + "value": "Age is required" + } + ], "iwtnXO": [ { "type": 0, @@ -5439,6 +5514,12 @@ "value": " cm" } ], + "jlqOPq": [ + { + "type": 0, + "value": "Country is required" + } + ], "jvo0vs": [ { "type": 0, @@ -5557,6 +5638,12 @@ "value": "destination" } ], + "ktyBmE": [ + { + "type": 0, + "value": "Current password is required" + } + ], "kvOMtB": [ { "type": 0, @@ -6700,6 +6787,12 @@ "value": "Paid" } ], + "u8II6t": [ + { + "type": 0, + "value": "First name can't contain any special characters" + } + ], "uDm4Mt": [ { "type": 1, @@ -6740,6 +6833,12 @@ "value": "By adding a card you also guarantee your room booking for late arrival." } ], + "uiFoFm": [ + { + "type": 0, + "value": "Password is required" + } + ], "ujX0MU": [ { "type": 0, @@ -6920,6 +7019,12 @@ "value": "View your details" } ], + "vzqS9m": [ + { + "type": 0, + "value": "Phone is required" + } + ], "w0LSDs": [ { "type": 1, @@ -6964,6 +7069,12 @@ "value": "Sign up bonus" } ], + "wRUsWd": [ + { + "type": 0, + "value": "Retype new password does not match new password" + } + ], "wSh+Ly": [ { "type": 1, @@ -7195,6 +7306,12 @@ "value": "value" } ], + "yNJhk3": [ + { + "type": 0, + "value": "Retype new password is required" + } + ], "yP9SR1": [ { "type": 0, @@ -7243,12 +7360,24 @@ "value": "Last name is required" } ], + "yr+Os9": [ + { + "type": 0, + "value": "Date of birth is required" + } + ], "yxguVq": [ { "type": 0, "value": "Discard changes" } ], + "z7+EXa": [ + { + "type": 0, + "value": "Zip code is required" + } + ], "zA7LuX": [ { "type": 0, @@ -7359,4 +7488,4 @@ "value": "Map" } ] -} \ No newline at end of file +} diff --git a/apps/scandic-web/types/components/hotelPage/sidepeek/accessibility.ts b/apps/scandic-web/types/components/hotelPage/sidepeek/accessibility.ts deleted file mode 100644 index 1d1a07530..000000000 --- a/apps/scandic-web/types/components/hotelPage/sidepeek/accessibility.ts +++ /dev/null @@ -1,4 +0,0 @@ -export type AccessibilityAmenityProps = { - elevatorPitch?: string - accessibilityPageUrl?: string -} diff --git a/apps/scandic-web/types/components/hotelPage/sidepeek/amenities.ts b/apps/scandic-web/types/components/hotelPage/sidepeek/amenities.ts index abcc2e5dd..5d18670c0 100644 --- a/apps/scandic-web/types/components/hotelPage/sidepeek/amenities.ts +++ b/apps/scandic-web/types/components/hotelPage/sidepeek/amenities.ts @@ -1,22 +1,19 @@ -import type { Hotel, Restaurant, RestaurantOpeningHours } from "@/types/hotel" -import type { AccessibilityAmenityProps } from "./accessibility" +import type { + CheckInData, + DetailedFacility, + Hotel, + Restaurant, +} from "@/types/hotel" import type { ParkingAmenityProps } from "./parking" export type AmenitiesSidePeekProps = { - amenitiesList: Hotel["detailedFacilities"] + amenitiesList: DetailedFacility[] parking: ParkingAmenityProps - checkInInformation: Hotel["hotelFacts"]["checkin"] - accessibility: AccessibilityAmenityProps + checkInInformation: CheckInData + accessibility: { + elevatorPitch?: string + accessibilityPageUrl?: string + } restaurants: Restaurant[] hotelType: Hotel["hotelType"] } - -export type FilteredAmenitiesProps = { - filteredAmenities: Hotel["detailedFacilities"] -} - -export interface BreakfastAmenityProps { - openingHours?: RestaurantOpeningHours - alternateOpeningHours?: RestaurantOpeningHours - hotelType: Hotel["hotelType"] -} diff --git a/apps/scandic-web/types/components/hotelPage/sidepeek/checkIn.ts b/apps/scandic-web/types/components/hotelPage/sidepeek/checkIn.ts deleted file mode 100644 index e3a8d929b..000000000 --- a/apps/scandic-web/types/components/hotelPage/sidepeek/checkIn.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type { Hotel } from "@/types/hotel" - -export type CheckInAmenityProps = { - checkInInformation: Hotel["hotelFacts"]["checkin"] -} diff --git a/apps/scandic-web/types/components/hotelPage/sidepeek/openingHours.ts b/apps/scandic-web/types/components/hotelPage/sidepeek/openingHours.ts deleted file mode 100644 index d3890c2a5..000000000 --- a/apps/scandic-web/types/components/hotelPage/sidepeek/openingHours.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type { RestaurantOpeningHours } from "@/types/hotel" - -export interface OpeningHoursProps { - openingHours: RestaurantOpeningHours - alternateOpeningHours?: RestaurantOpeningHours - heading?: string -} diff --git a/apps/scandic-web/types/components/hotelReservation/amenitiesSidePeek.ts b/apps/scandic-web/types/components/hotelReservation/amenitiesSidePeek.ts new file mode 100644 index 000000000..81725b76a --- /dev/null +++ b/apps/scandic-web/types/components/hotelReservation/amenitiesSidePeek.ts @@ -0,0 +1,10 @@ +import type { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek" +import type { AdditionalData, Hotel, Restaurant } from "@/types/hotel" + +export type AmenitiesSidePeekProps = { + hotel: Hotel + restaurants: Restaurant[] + additionalHotelData: AdditionalData | undefined + activeSidePeek: SidePeekEnum + close: () => void +} diff --git a/apps/scandic-web/types/components/hotelReservation/hotelSidePeek.ts b/apps/scandic-web/types/components/hotelReservation/hotelSidePeek.ts index a1c91e68b..ac7345be2 100644 --- a/apps/scandic-web/types/components/hotelReservation/hotelSidePeek.ts +++ b/apps/scandic-web/types/components/hotelReservation/hotelSidePeek.ts @@ -1,8 +1,9 @@ import type { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek" -import type { AdditionalData, Hotel } from "@/types/hotel" +import type { AdditionalData, Hotel, Restaurant } from "@/types/hotel" export type HotelSidePeekProps = { hotel: Hotel + restaurants: Restaurant[] additionalHotelData: AdditionalData | undefined activeSidePeek: SidePeekEnum close: () => void diff --git a/apps/scandic-web/types/components/hotelReservation/selectHotel/selectHotel.ts b/apps/scandic-web/types/components/hotelReservation/selectHotel/selectHotel.ts index f49f879d3..31a37a571 100644 --- a/apps/scandic-web/types/components/hotelReservation/selectHotel/selectHotel.ts +++ b/apps/scandic-web/types/components/hotelReservation/selectHotel/selectHotel.ts @@ -1,5 +1,6 @@ -import type { CheckInData, Hotel, Parking } from "@/types/hotel" +import type { Hotel } from "@/types/hotel" import type { Lang } from "@/constants/languages" +import type { SidePeekEnum } from "../sidePeek" import type { AlternativeHotelsSearchParams, SelectHotelSearchParams, @@ -15,32 +16,13 @@ export interface ReadMoreProps { hotelId: string hotel: Hotel showCTA: boolean + sidePeekKey: SidePeekEnum } export interface ContactProps { hotel: Hotel } -export interface ParkingProps { - parking: Parking[] -} - -export interface AccessibilityProps { - elevatorPitchText: string -} - -export interface RestaurantProps { - restaurantsContentDescriptionMedium: string -} - -export interface CheckInCheckOutProps { - checkin: CheckInData -} - -export interface MeetingsAndConferencesProps { - meetingDescription: string -} - export interface SelectHotelProps { params: { lang: Lang diff --git a/apps/scandic-web/types/components/hotelReservation/sidePeek.ts b/apps/scandic-web/types/components/hotelReservation/sidePeek.ts index bc9aa8029..34956a2ad 100644 --- a/apps/scandic-web/types/components/hotelReservation/sidePeek.ts +++ b/apps/scandic-web/types/components/hotelReservation/sidePeek.ts @@ -1,5 +1,6 @@ export enum SidePeekEnum { hotelDetails = "hotel-detail-side-peek", + amenities = "amenities-side-peek", roomDetails = "room-detail-side-peek", bookedRoomDetails = "booked-room-detail-side-peek", } diff --git a/apps/scandic-web/types/components/sidePeeks/amenities.ts b/apps/scandic-web/types/components/sidePeeks/amenities.ts new file mode 100644 index 000000000..e1b33e783 --- /dev/null +++ b/apps/scandic-web/types/components/sidePeeks/amenities.ts @@ -0,0 +1,30 @@ +import type { + CheckInData, + DetailedFacility, + Parking, + Restaurant, +} from "@/types/hotel" + +export interface ParkingAccordionItemProps { + parkingPageUrl?: string + parking: Parking[] + elevatorPitch?: string +} + +export interface BreakfastAccordionItemProps { + restaurants?: Restaurant[] + hotelType: string +} + +export interface CheckInCheckOutAccordionItemProps { + checkInData: CheckInData +} + +export interface AccessibilityAccordionItemProps { + elevatorPitch?: string + accessibilityPageUrl?: string +} + +export interface AdditionalAmenitiesProps { + amenities: DetailedFacility[] +}