From d9b858c823930c45b62bb9bb842224df1af4fa3a Mon Sep 17 00:00:00 2001 From: Bianca Widstam Date: Fri, 22 Aug 2025 11:43:39 +0000 Subject: [PATCH] Merged in feat/SW-3289-replace-sidepeek-hotel-reservation (pull request #2686) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat(SW-3289): replace sidepeek * fix(SW-3289): replace sidepeek * fix(SW-3289): add wrapping prop and change prop name to buttonVariant * fix(SW-3289): replace body with typography * fix(SW-3289): fix intl message Approved-by: Joakim Jäderberg --- .../(standard)/details/page.tsx | 1 + .../hotelreservation/(standard)/layout.tsx | 9 +- .../Rooms/Room/RoomDetailsSidePeek/index.tsx | 48 ------- .../BookingConfirmation/Rooms/Room/index.tsx | 22 ++- .../EnterDetails/Header/ToggleSidePeek.tsx | 41 ------ .../EnterDetails/Header/index.tsx | 18 ++- .../SelectedRoom/ToggleSidePeek.tsx | 46 ------- .../EnterDetails/SelectedRoom/index.tsx | 28 ++-- .../SelectedRoom/selectedRoom.module.css | 1 + .../HotelReservation/HotelCard/index.tsx | 16 +-- .../Rooms/MultiRoom/RoomDetailsSidePeek.tsx | 13 +- .../Rooms/SingleRoom/RoomDetailsSidePeek.tsx | 18 ++- .../HotelReservation/MyStay/index.tsx | 2 - .../HotelReservation/SelectHotel/helpers.ts | 10 +- .../HotelInfoCard/HotelDescription/index.tsx | 24 ++-- .../SelectRate/HotelInfoCard/index.tsx | 31 +++-- .../RoomListItem/Details/ToggleSidePeek.tsx | 50 ------- .../RoomListItem/RoomImage/index.tsx | 21 ++- .../HotelReservation/SelectRate/index.tsx | 7 +- .../hotelSidePeek.module.css | 0 .../HotelSidePeekContent/index.tsx | 107 +++++++++++++++ .../SidePeeks/HotelDetailsSidePeek/index.tsx | 89 ++++++++++++ .../RoomSidePeekContent/index.tsx | 8 +- .../roomSidePeekContent.module.css | 0 .../SidePeeks/RoomDetailsSidePeek/index.tsx | 80 +++++++++++ .../SidePeekSelfControlled/index.tsx | 13 +- .../sidePeekSelfControlled.module.css | 4 - .../providers/EnterDetailsProvider.tsx | 2 + .../scandic-web/stores/enter-details/index.ts | 1 + apps/scandic-web/stores/my-stay/index.ts | 4 +- .../hotelReservation/amenitiesSidePeek.ts | 14 -- .../enterDetails/hotelHeader.ts | 2 +- .../hotelReservation/toggleSidePeekProps.ts | 9 -- .../types/providers/enter-details.ts | 2 + apps/scandic-web/types/sidepeek.ts | 5 + .../scandic-web/types/stores/enter-details.ts | 3 + .../lib/components/Contact/contact.module.css | 6 - .../lib/components/Contact/index.tsx | 98 ++++++++------ .../hotelReservationSidePeek.module.css | 5 - .../HotelReservationSidePeek/index.tsx | 84 ------------ .../lib/components/HotelSidePeek/index.tsx | 128 ------------------ .../components/OpenSidePeekButton/index.tsx | 52 ------- .../lib/components/RoomSidePeek/index.tsx | 35 ----- packages/booking-flow/lib/stores/sidepeek.ts | 62 --------- packages/booking-flow/package.json | 2 +- packages/trpc/lib/routers/booking/helpers.ts | 2 +- packages/trpc/lib/routers/booking/query.ts | 12 +- 47 files changed, 527 insertions(+), 708 deletions(-) delete mode 100644 apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/RoomDetailsSidePeek/index.tsx delete mode 100644 apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx delete mode 100644 apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx delete mode 100644 apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/ToggleSidePeek.tsx rename {packages/booking-flow/lib/components/HotelSidePeek => apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/HotelSidePeekContent}/hotelSidePeek.module.css (100%) create mode 100644 apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/HotelSidePeekContent/index.tsx create mode 100644 apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/index.tsx rename {packages/booking-flow/lib/components/RoomSidePeek => apps/scandic-web/components/SidePeeks/RoomDetailsSidePeek}/RoomSidePeekContent/index.tsx (97%) rename {packages/booking-flow/lib/components/RoomSidePeek => apps/scandic-web/components/SidePeeks/RoomDetailsSidePeek}/RoomSidePeekContent/roomSidePeekContent.module.css (100%) create mode 100644 apps/scandic-web/components/SidePeeks/RoomDetailsSidePeek/index.tsx delete mode 100644 apps/scandic-web/types/components/hotelReservation/amenitiesSidePeek.ts delete mode 100644 apps/scandic-web/types/components/hotelReservation/toggleSidePeekProps.ts create mode 100644 apps/scandic-web/types/sidepeek.ts delete mode 100644 packages/booking-flow/lib/components/HotelReservationSidePeek/hotelReservationSidePeek.module.css delete mode 100644 packages/booking-flow/lib/components/HotelReservationSidePeek/index.tsx delete mode 100644 packages/booking-flow/lib/components/HotelSidePeek/index.tsx delete mode 100644 packages/booking-flow/lib/components/OpenSidePeekButton/index.tsx delete mode 100644 packages/booking-flow/lib/components/RoomSidePeek/index.tsx delete mode 100644 packages/booking-flow/lib/stores/sidepeek.ts diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/details/page.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/details/page.tsx index 2e9a8f84f..821c8cd52 100644 --- a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/details/page.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/details/page.tsx @@ -125,6 +125,7 @@ export default async function DetailsPage( searchParamsStr={selectRoomParams.toString()} user={user} vat={hotel.vat} + roomCategories={hotelData.roomCategories} >
diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.tsx index 5a946f4bf..4546e26d8 100644 --- a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.tsx @@ -1,5 +1,3 @@ -import SidePeek from "@scandic-hotels/booking-flow/components/HotelReservationSidePeek" - import styles from "./layout.module.css" import type { LangParams, LayoutArgs } from "@/types/params" @@ -7,10 +5,5 @@ import type { LangParams, LayoutArgs } from "@/types/params" export default function StandardHotelReservationLayout({ children, }: React.PropsWithChildren>) { - return ( -
- {children} - -
- ) + return
{children}
} diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/RoomDetailsSidePeek/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/RoomDetailsSidePeek/index.tsx deleted file mode 100644 index a0722f2d3..000000000 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/RoomDetailsSidePeek/index.tsx +++ /dev/null @@ -1,48 +0,0 @@ -"use client" - -import { DialogTrigger } from "react-aria-components" -import { useIntl } from "react-intl" - -import { RoomSidePeekContent } from "@scandic-hotels/booking-flow/components/RoomSidePeekContent" -import { Button } from "@scandic-hotels/design-system/Button" -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" -import { getBookedHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers" - -import { useBookingConfirmationStore } from "@/stores/booking-confirmation" - -import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled" - -interface RoomDetailsSidePeekProps { - roomTypeCode: string -} - -export default function RoomDetailsSidePeek({ - roomTypeCode, -}: RoomDetailsSidePeekProps) { - const { roomCategories } = useBookingConfirmationStore((state) => ({ - roomCategories: state.roomCategories, - })) - const room = getBookedHotelRoom(roomCategories, roomTypeCode) - const intl = useIntl() - - if (!room) { - return null - } - - return ( - - - - - - - ) -} diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx index cdd561f29..f8f50d0da 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx @@ -11,13 +11,14 @@ import Caption from "@scandic-hotels/design-system/Caption" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import Image from "@scandic-hotels/design-system/Image" import { Typography } from "@scandic-hotels/design-system/Typography" +import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers" import { CancellationRuleEnum } from "@/constants/booking" +import { useBookingConfirmationStore } from "@/stores/booking-confirmation" +import RoomDetailsSidePeek from "@/components/SidePeeks/RoomDetailsSidePeek" import useLang from "@/hooks/useLang" -import RoomDetailsSidePeek from "./RoomDetailsSidePeek" - import styles from "./room.module.css" import type { RoomProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms/room" @@ -31,6 +32,10 @@ export default function Room({ }: RoomProps) { const intl = useIntl() const lang = useLang() + const { roomCategories } = useBookingConfirmationStore((state) => ({ + roomCategories: state.roomCategories, + })) + const room = getHotelRoom(roomCategories, booking.roomTypeCode) const guestName = `${booking.guest.firstName} ${booking.guest.lastName}` const fromDate = dt(booking.checkInDate).locale(lang) @@ -116,7 +121,18 @@ export default function Room({

{roomName}

 - + {room && ( + + )}
    diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx deleted file mode 100644 index 3ae42e7d0..000000000 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx +++ /dev/null @@ -1,41 +0,0 @@ -"use client" - -import { useIntl } from "react-intl" - -import useSidePeekStore, { - SidePeekEnum, -} from "@scandic-hotels/booking-flow/stores/sidepeek" -import { Button } from "@scandic-hotels/design-system/Button" -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import { trackOpenSidePeekEvent } from "@/utils/tracking" - -import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps" - -export default function ToggleSidePeek({ hotelId }: ToggleSidePeekProps) { - const intl = useIntl() - const openSidePeek = useSidePeekStore((state) => state.openSidePeek) - - return ( - - ) -} diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx index 09ba7d639..0a285e6a5 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx @@ -2,17 +2,18 @@ import Image from "@scandic-hotels/design-system/Image" import Title from "@scandic-hotels/design-system/Title" import { Typography } from "@scandic-hotels/design-system/Typography" -import ToggleSidePeek from "./ToggleSidePeek" +import HotelDetailsSidePeek from "@/components/SidePeeks/HotelDetailsSidePeek" +import { getIntl } from "@/i18n" import styles from "./header.module.css" import type { HotelHeaderProps } from "@/types/components/hotelReservation/enterDetails/hotelHeader" export default async function HotelHeader({ - hotelData: { hotel }, + hotelData: { hotel, url, restaurants, additionalData }, }: HotelHeaderProps) { const image = hotel.hotelContent?.images - + const intl = await getIntl() const addressStr = `${hotel.address.streetAddress}, ${hotel.address.city}` return ( @@ -49,7 +50,16 @@ export default async function HotelHeader({
    {addressStr}
    - + + diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx deleted file mode 100644 index 500144a54..000000000 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx +++ /dev/null @@ -1,46 +0,0 @@ -"use client" - -import { useIntl } from "react-intl" - -import useSidePeekStore, { - SidePeekEnum, -} from "@scandic-hotels/booking-flow/stores/sidepeek" -import { Button } from "@scandic-hotels/design-system/Button" -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import { trackOpenSidePeekEvent } from "@/utils/tracking" - -import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps" - -export default function ToggleSidePeek({ - hotelId, - roomTypeCode, - title, -}: ToggleSidePeekProps) { - const intl = useIntl() - const openSidePeek = useSidePeekStore((state) => state.openSidePeek) - - return ( - - ) -} diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx index f6933a1fc..9565e5766 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx @@ -9,14 +9,14 @@ import { Button } from "@scandic-hotels/design-system/Button" import Footnote from "@scandic-hotels/design-system/Footnote" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import Subtitle from "@scandic-hotels/design-system/Subtitle" +import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers" import { useEnterDetailsStore } from "@/stores/enter-details" +import RoomDetailsSidePeek from "@/components/SidePeeks/RoomDetailsSidePeek" import { useRoomContext } from "@/contexts/Details/Room" import useLang from "@/hooks/useLang" -import ToggleSidePeek from "./ToggleSidePeek" - import styles from "./selectedRoom.module.css" export default function SelectedRoom() { @@ -25,10 +25,13 @@ export default function SelectedRoom() { const router = useRouter() const [isPending, startTransition] = useTransition() const { room, idx } = useRoomContext() - const { hotelId, searchParamsStr } = useEnterDetailsStore((state) => ({ - hotelId: state.booking.hotelId, - searchParamsStr: state.searchParamString, - })) + const { hotelId, roomCategories, searchParamsStr } = useEnterDetailsStore( + (state) => ({ + hotelId: state.booking.hotelId, + roomCategories: state.roomCategories, + searchParamsStr: state.searchParamString, + }) + ) function changeRoom() { const searchParams = new URLSearchParams(searchParamsStr) @@ -39,6 +42,8 @@ export default function SelectedRoom() { }) } + const selectedRoom = getHotelRoom(roomCategories, room.roomTypeCode) + return (
    @@ -79,6 +84,7 @@ export default function SelectedRoom() { size="Small" onPress={changeRoom} isDisabled={isPending} + wrapping={false} typography="Body/Supporting text (caption)/smBold" > @@ -87,11 +93,17 @@ export default function SelectedRoom() { })}
    - {room.roomTypeCode && ( + {room.roomTypeCode && selectedRoom && (
    -
    )} diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css b/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css index d6324f984..b1a8a0297 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css @@ -48,6 +48,7 @@ .details { display: flex; justify-content: flex-start; + margin-top: var(--Space-x05); } @media screen and (min-width: 768px) { diff --git a/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx index caa1faa3a..99ef80da8 100644 --- a/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx +++ b/apps/scandic-web/components/HotelReservation/HotelCard/index.tsx @@ -10,9 +10,7 @@ import { import { memo } from "react" import { useIntl } from "react-intl" -import OpenSidePeekButton from "@scandic-hotels/booking-flow/components/OpenSidePeekButton" import TripAdvisorChip from "@scandic-hotels/booking-flow/components/TripAdvisorChip" -import { SidePeekEnum } from "@scandic-hotels/booking-flow/stores/sidepeek" import { alternativeHotelsMap, selectHotelMap, @@ -30,6 +28,7 @@ import { useHotelsMapStore } from "@/stores/hotels-map" import BookingCodeChip from "@/components/BookingCodeChip" import { FacilityToIcon } from "@/components/ContentType/HotelPage/data" +import HotelDetailsSidePeek from "@/components/SidePeeks/HotelDetailsSidePeek" import { mapApiImagesToGalleryImages } from "@/utils/imageGallery" import HotelChequeCard from "./HotelChequeCard" @@ -47,7 +46,7 @@ import { HotelCardListingTypeEnum } from "@/types/components/hotelReservation/se import type { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps" function HotelCard({ - hotelData: { availability, hotel }, + hotelData: { availability, hotel, additionalData, restaurants, url }, isUserLoggedIn, state = "default", type = HotelCardListingTypeEnum.PageListing, @@ -184,13 +183,14 @@ function HotelCard({
    ))} - - + { + trackOpenSidePeekEvent({ + name: SidePeekEnum.bookedRoomDetails, + hotelId: booking.hotelId, + includePathname: true, + }) + }} + > diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx index b4b38bcdc..c8e529f09 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx @@ -9,7 +9,9 @@ import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton import { useMyStayStore } from "@/stores/my-stay" import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek" +import { trackOpenSidePeekEvent } from "@/utils/tracking" +import { SidePeekEnum } from "@/types/sidepeek" import type { SafeUser } from "@/types/user" interface RoomDetailsSidePeekProps { @@ -21,9 +23,23 @@ export default function RoomDetailsSidePeek({ }: RoomDetailsSidePeekProps) { const intl = useIntl() const bookedRoom = useMyStayStore((state) => state.bookedRoom) + return ( - diff --git a/apps/scandic-web/components/HotelReservation/MyStay/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/index.tsx index 1cb47f816..2949918cf 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/index.tsx @@ -1,7 +1,6 @@ import { cookies } from "next/headers" import { notFound } from "next/navigation" -import SidePeek from "@scandic-hotels/booking-flow/components/HotelReservationSidePeek" import { dt } from "@scandic-hotels/common/dt" import { logger } from "@scandic-hotels/common/logger" import * as maskValue from "@scandic-hotels/common/utils/maskValue" @@ -268,7 +267,6 @@ export default async function MyStay(props: { )} - ) } diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/helpers.ts b/apps/scandic-web/components/HotelReservation/SelectHotel/helpers.ts index 138af84d2..8ce2e02e8 100644 --- a/apps/scandic-web/components/HotelReservation/SelectHotel/helpers.ts +++ b/apps/scandic-web/components/HotelReservation/SelectHotel/helpers.ts @@ -9,7 +9,11 @@ import { getLang } from "@/i18n/serverContext" import type { HotelsAvailabilityItem } from "@scandic-hotels/trpc/types/availability" import type { Child } from "@scandic-hotels/trpc/types/child" -import type { AdditionalData, Hotel } from "@scandic-hotels/trpc/types/hotel" +import type { + AdditionalData, + Hotel, + Restaurant, +} from "@scandic-hotels/trpc/types/hotel" import type { HotelLocation, Location, @@ -32,6 +36,8 @@ export interface HotelResponse { availability: HotelsAvailabilityItem hotel: Hotel additionalData: AdditionalData + url: string | null + restaurants: Restaurant[] } type Result = AvailabilityResponse | null @@ -55,6 +61,8 @@ async function enhanceHotels(hotels: HotelsAvailabilityItem[]) { availability, hotel: hotelData.hotel, additionalData: hotelData.additionalData, + url: hotelData.url, + restaurants: hotelData.restaurants, } }) ) diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx index 649a81616..6cc681ca0 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/HotelDescription/index.tsx @@ -4,25 +4,32 @@ import { useState } from "react" import { Button as ButtonRAC } from "react-aria-components" import { useIntl } from "react-intl" -import OpenSidePeekButton from "@scandic-hotels/booking-flow/components/OpenSidePeekButton" -import { SidePeekEnum } from "@scandic-hotels/booking-flow/stores/sidepeek" import { Typography } from "@scandic-hotels/design-system/Typography" import { FacilityToIcon } from "@/components/ContentType/HotelPage/data" +import HotelDetailsSidePeek from "@/components/SidePeeks/HotelDetailsSidePeek" import Alert from "@/components/TempDesignSystem/Alert" import styles from "./hotelDescription.module.css" -import type { Hotel } from "@scandic-hotels/trpc/types/hotel" +import type { + AdditionalData, + Hotel, + Restaurant, +} from "@scandic-hotels/trpc/types/hotel" export default function HotelDescription({ description, hotel, sortedFacilities, + restaurants, + additionalData, }: { description?: string hotel: Hotel sortedFacilities: Hotel["detailedFacilities"] + restaurants: Restaurant[] + additionalData: AdditionalData | undefined }) { const intl = useIntl() @@ -69,13 +76,14 @@ export default function HotelDescription({ {expanded && (
    - {hotel.specialAlerts.map((alert) => (
    @@ -101,13 +113,14 @@ export async function HotelInfoCard({ booking, hotel }: HotelInfoCardProps) { ))} - diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/ToggleSidePeek.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/ToggleSidePeek.tsx deleted file mode 100644 index 6bc25873a..000000000 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/ToggleSidePeek.tsx +++ /dev/null @@ -1,50 +0,0 @@ -"use client" - -import { useIntl } from "react-intl" - -import useSidePeekStore, { - SidePeekEnum, -} from "@scandic-hotels/booking-flow/stores/sidepeek" -import { Button } from "@scandic-hotels/design-system/Button" -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import { trackOpenSidePeekEvent } from "@/utils/tracking" - -import styles from "./details.module.css" - -import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps" - -export default function ToggleSidePeek({ - hotelId, - roomTypeCode, -}: ToggleSidePeekProps) { - const intl = useIntl() - const openSidePeek = useSidePeekStore((state) => state.openSidePeek) - - return ( - - ) -} diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/index.tsx index 02a4cd4f9..de2ad2bae 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/index.tsx @@ -4,12 +4,13 @@ import { useIntl } from "react-intl" import ImageGallery from "@scandic-hotels/design-system/ImageGallery" import { Typography } from "@scandic-hotels/design-system/Typography" +import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers" import { IconForFeatureCode } from "@/components/HotelReservation/utils" +import RoomDetailsSidePeek from "@/components/SidePeeks/RoomDetailsSidePeek" +import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext" import { mapApiImagesToGalleryImages } from "@/utils/imageGallery" -import ToggleSidePeek from "../Details/ToggleSidePeek" - import styles from "./image.module.css" import type { ApiImage } from "@scandic-hotels/trpc/types/hotel" @@ -34,7 +35,9 @@ const RoomImage = memo(function RoomImage({ hotelId, }: RoomListItemImageProps) { const galleryImages = mapApiImagesToGalleryImages(images || []) - + const { hotel } = useSelectRateContext() + const room = getHotelRoom(hotel?.data?.roomCategories ?? [], roomTypeCode) + const intl = useIntl() return (
    @@ -53,8 +56,16 @@ const RoomImage = memo(function RoomImage({ imageCountPosition="top" />
    - {roomTypeCode && ( - + {roomTypeCode && room && ( + )}
    diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/index.tsx index 00cfec116..33dc192e4 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectRate/index.tsx @@ -29,7 +29,12 @@ export default async function SelectRatePage({ } return ( <> - + {isInValidFNF ? ( diff --git a/packages/booking-flow/lib/components/HotelSidePeek/hotelSidePeek.module.css b/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/HotelSidePeekContent/hotelSidePeek.module.css similarity index 100% rename from packages/booking-flow/lib/components/HotelSidePeek/hotelSidePeek.module.css rename to apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/HotelSidePeekContent/hotelSidePeek.module.css diff --git a/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/HotelSidePeekContent/index.tsx b/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/HotelSidePeekContent/index.tsx new file mode 100644 index 000000000..207ea3f18 --- /dev/null +++ b/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/HotelSidePeekContent/index.tsx @@ -0,0 +1,107 @@ +import { useIntl } from "react-intl" + +import AdditionalAmenities from "@scandic-hotels/booking-flow/components/AdditionalAmenities" +import Contact from "@scandic-hotels/booking-flow/components/Contact" +import BreakfastAccordionItem from "@scandic-hotels/booking-flow/components/SidePeekAccordions/BreakfastAccordionItem" +import CheckInCheckOutAccordionItem from "@scandic-hotels/booking-flow/components/SidePeekAccordions/CheckInCheckOutAccordionItem" +import ParkingAccordionItem from "@scandic-hotels/booking-flow/components/SidePeekAccordions/ParkingAccordionItem" +import Accordion from "@scandic-hotels/design-system/Accordion" +import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" +import { IconName } from "@scandic-hotels/design-system/Icons/iconName" +import { Typography } from "@scandic-hotels/design-system/Typography" + +import { trackAccordionClick } from "@/utils/tracking" + +import styles from "./hotelSidePeek.module.css" + +import type { + AdditionalData, + Hotel, + Restaurant, +} from "@scandic-hotels/trpc/types/hotel" + +interface HotelSidePeekContentProps { + hotel: Hotel & { url: string | null } + restaurants: Restaurant[] + additionalHotelData: AdditionalData | undefined +} + +export function HotelSidePeekContent({ + hotel, + restaurants, + additionalHotelData, +}: HotelSidePeekContentProps) { + const intl = useIntl() + + return ( +
    + +

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

    +     + + + + + + + + + + {hotel.url ? ( + + {intl.formatMessage({ + defaultMessage: "Read more about the hotel", + })} + + ) : null} +
    + ) +} + +type AccessibilityAccordionItemProps = { + elevatorPitch?: string +} + +function AccessibilityAccordionItem({ + elevatorPitch, +}: AccessibilityAccordionItemProps) { + const intl = useIntl() + + if (!elevatorPitch) { + return null + } + + return ( + trackAccordionClick("amenities:accessibility")} + > +
    + +

    {elevatorPitch}

    +     +
    +     + ) +} diff --git a/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/index.tsx b/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/index.tsx new file mode 100644 index 000000000..4956230c4 --- /dev/null +++ b/apps/scandic-web/components/SidePeeks/HotelDetailsSidePeek/index.tsx @@ -0,0 +1,89 @@ +"use client" + +import { DialogTrigger } from "react-aria-components" + +import { Button } from "@scandic-hotels/design-system/Button" +import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" + +import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled" +import { trackOpenSidePeekEvent } from "@/utils/tracking" + +import { HotelSidePeekContent } from "./HotelSidePeekContent" + +import type { + AdditionalData, + Hotel, + Restaurant, +} from "@scandic-hotels/trpc/types/hotel" + +import { SidePeekEnum } from "@/types/sidepeek" + +interface HotelDetailsSidePeekProps { + hotel: Hotel & { url: string | null } + restaurants: Restaurant[] + additionalHotelData: AdditionalData | undefined + triggerLabel: string + buttonVariant: "primary" | "secondary" +} + +const buttonPropsMap: Record< + HotelDetailsSidePeekProps["buttonVariant"], + Pick< + React.ComponentProps, + "variant" | "color" | "size" | "typography" + > +> = { + primary: { + variant: "Text", + color: "Primary", + size: "Medium", + typography: "Body/Paragraph/mdBold", + }, + secondary: { + variant: "Secondary", + color: "Inverted", + size: "Small", + typography: "Body/Supporting text (caption)/smBold", + }, +} + +export default function HotelDetailsSidePeek({ + hotel, + restaurants, + additionalHotelData, + triggerLabel, + buttonVariant, +}: HotelDetailsSidePeekProps) { + const buttonProps = buttonPropsMap[buttonVariant] + + return ( + + + + + + + + ) +} diff --git a/packages/booking-flow/lib/components/RoomSidePeek/RoomSidePeekContent/index.tsx b/apps/scandic-web/components/SidePeeks/RoomDetailsSidePeek/RoomSidePeekContent/index.tsx similarity index 97% rename from packages/booking-flow/lib/components/RoomSidePeek/RoomSidePeekContent/index.tsx rename to apps/scandic-web/components/SidePeeks/RoomDetailsSidePeek/RoomSidePeekContent/index.tsx index 0cfb15d76..1e2db15aa 100644 --- a/packages/booking-flow/lib/components/RoomSidePeek/RoomSidePeekContent/index.tsx +++ b/apps/scandic-web/components/SidePeeks/RoomDetailsSidePeek/RoomSidePeekContent/index.tsx @@ -1,11 +1,13 @@ import { useIntl } from "react-intl" +import { + BED_TYPE_ICONS, + type BedTypes, +} from "@scandic-hotels/booking-flow/bedTypeIcons" import { FacilityIcon } from "@scandic-hotels/design-system/Icons/FacilityIcon" import ImageGallery from "@scandic-hotels/design-system/ImageGallery" import { Typography } from "@scandic-hotels/design-system/Typography" -import { BED_TYPE_ICONS, type BedTypes } from "../../../misc/bedTypeIcons" - import styles from "./roomSidePeekContent.module.css" import type { ApiImage, Room } from "@scandic-hotels/trpc/types/hotel" @@ -79,7 +81,7 @@ export function RoomSidePeekContent({ room }: RoomSidePeekContentProps) {
      - {room.roomFacilities + {[...room.roomFacilities] .sort((a, b) => a.sortOrder - b.sortOrder) .map((facility) => { return ( diff --git a/packages/booking-flow/lib/components/RoomSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css b/apps/scandic-web/components/SidePeeks/RoomDetailsSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css similarity index 100% rename from packages/booking-flow/lib/components/RoomSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css rename to apps/scandic-web/components/SidePeeks/RoomDetailsSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css diff --git a/apps/scandic-web/components/SidePeeks/RoomDetailsSidePeek/index.tsx b/apps/scandic-web/components/SidePeeks/RoomDetailsSidePeek/index.tsx new file mode 100644 index 000000000..c45e135d1 --- /dev/null +++ b/apps/scandic-web/components/SidePeeks/RoomDetailsSidePeek/index.tsx @@ -0,0 +1,80 @@ +"use client" + +import { DialogTrigger } from "react-aria-components" + +import { Button } from "@scandic-hotels/design-system/Button" +import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" + +import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled" +import { trackOpenSidePeekEvent } from "@/utils/tracking" + +import { RoomSidePeekContent } from "./RoomSidePeekContent" + +import type { Room } from "@scandic-hotels/trpc/types/hotel" + +import { SidePeekEnum } from "@/types/sidepeek" + +interface RoomDetailsSidePeekProps { + hotelId: string + room: Room + triggerLabel: string + roomTypeCode?: string + buttonVariant?: "primary" | "secondary" + wrapping?: boolean +} + +const buttonPropsMap: Record< + NonNullable, + Pick< + React.ComponentProps, + "variant" | "color" | "size" | "typography" + > +> = { + primary: { + variant: "Text", + color: "Primary", + size: "Medium", + typography: "Body/Paragraph/mdBold", + }, + secondary: { + variant: "Text", + color: "Inverted", + size: "Small", + typography: "Body/Supporting text (caption)/smBold", + }, +} + +export default function RoomDetailsSidePeek({ + hotelId, + room, + roomTypeCode, + triggerLabel, + wrapping = true, + buttonVariant: variant = "primary", +}: RoomDetailsSidePeekProps) { + const buttonProps = buttonPropsMap[variant] + + return ( + + + + + + + + ) +} diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/index.tsx b/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/index.tsx index 8f6aab8b9..3635c80b4 100644 --- a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/index.tsx @@ -4,8 +4,8 @@ import { useEffect } from "react" import { Dialog, Modal, ModalOverlay } from "react-aria-components" import { useIntl } from "react-intl" +import { IconButton } from "@scandic-hotels/design-system/IconButton" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" -import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA" @@ -34,19 +34,20 @@ export default function SidePeekSelfControlled({

      {title}

      ) : null} - +
      {children}
      diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/sidePeekSelfControlled.module.css b/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/sidePeekSelfControlled.module.css index 2cc0ad93b..78955278e 100644 --- a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/sidePeekSelfControlled.module.css +++ b/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/sidePeekSelfControlled.module.css @@ -72,10 +72,6 @@ justify-content: space-between; } -.closeButton { - padding: 0; -} - .heading { color: var(--Text-Heading); } diff --git a/apps/scandic-web/providers/EnterDetailsProvider.tsx b/apps/scandic-web/providers/EnterDetailsProvider.tsx index 8998e2039..04dd12c14 100644 --- a/apps/scandic-web/providers/EnterDetailsProvider.tsx +++ b/apps/scandic-web/providers/EnterDetailsProvider.tsx @@ -32,6 +32,7 @@ export default function EnterDetailsProvider({ searchParamsStr, user, vat, + roomCategories, }: DetailsProviderProps) { // This state is needed to be able to use defaultValues for // react-hook-form since values needs to be there on mount @@ -70,6 +71,7 @@ export default function EnterDetailsProvider({ isFlexRate: room.isFlexRate, })), vat, + roomCategories, } storeRef.current = createDetailsStore( diff --git a/apps/scandic-web/stores/enter-details/index.ts b/apps/scandic-web/stores/enter-details/index.ts index 3a434fa79..3e3852ecb 100644 --- a/apps/scandic-web/stores/enter-details/index.ts +++ b/apps/scandic-web/stores/enter-details/index.ts @@ -97,6 +97,7 @@ export function createDetailsStore( return create()((set) => ({ availableBeds, booking: initialState.booking, + roomCategories: initialState.roomCategories, breakfastPackages, canProceedToPayment: false, isSubmitting: false, diff --git a/apps/scandic-web/stores/my-stay/index.ts b/apps/scandic-web/stores/my-stay/index.ts index c3a20abd6..7d80a6d35 100644 --- a/apps/scandic-web/stores/my-stay/index.ts +++ b/apps/scandic-web/stores/my-stay/index.ts @@ -3,7 +3,7 @@ import { produce } from "immer" import { useContext } from "react" import { create, useStore } from "zustand" -import { getBookedHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers" +import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers" import { mapRoomDetails } from "@/components/HotelReservation/MyStay/utils/mapRoomDetails" import { MyStayContext } from "@/contexts/MyStay" @@ -39,7 +39,7 @@ export function createMyStayStore({ } const mappedRooms = rooms.map((booking, idx) => { - const room = getBookedHotelRoom(roomCategories, booking.roomTypeCode) + const room = getHotelRoom(roomCategories, booking.roomTypeCode) return mapRoomDetails({ booking, rates, diff --git a/apps/scandic-web/types/components/hotelReservation/amenitiesSidePeek.ts b/apps/scandic-web/types/components/hotelReservation/amenitiesSidePeek.ts deleted file mode 100644 index 26dc98cd2..000000000 --- a/apps/scandic-web/types/components/hotelReservation/amenitiesSidePeek.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type { SidePeekEnum } from "@scandic-hotels/booking-flow/stores/sidepeek" -import type { - AdditionalData, - Hotel, - Restaurant, -} from "@scandic-hotels/trpc/types/hotel" - -export type AmenitiesSidePeekProps = { - hotel: Hotel & { url: string | null } - restaurants: Restaurant[] - additionalHotelData: AdditionalData | undefined - activeSidePeek: SidePeekEnum - close: () => void -} diff --git a/apps/scandic-web/types/components/hotelReservation/enterDetails/hotelHeader.ts b/apps/scandic-web/types/components/hotelReservation/enterDetails/hotelHeader.ts index 26291ff06..33fda70ea 100644 --- a/apps/scandic-web/types/components/hotelReservation/enterDetails/hotelHeader.ts +++ b/apps/scandic-web/types/components/hotelReservation/enterDetails/hotelHeader.ts @@ -1,5 +1,5 @@ import type { HotelData } from "@scandic-hotels/trpc/types/hotel" export interface HotelHeaderProps { - hotelData: HotelData + hotelData: HotelData & { url: string | null } } diff --git a/apps/scandic-web/types/components/hotelReservation/toggleSidePeekProps.ts b/apps/scandic-web/types/components/hotelReservation/toggleSidePeekProps.ts deleted file mode 100644 index c3cd56cc1..000000000 --- a/apps/scandic-web/types/components/hotelReservation/toggleSidePeekProps.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type { SafeUser } from "@/types/user" - -export type ToggleSidePeekProps = { - hotelId: string - roomTypeCode?: string - title?: string - user?: SafeUser - confirmationNumber?: string -} diff --git a/apps/scandic-web/types/providers/enter-details.ts b/apps/scandic-web/types/providers/enter-details.ts index 774e350ce..2e6c9f4f9 100644 --- a/apps/scandic-web/types/providers/enter-details.ts +++ b/apps/scandic-web/types/providers/enter-details.ts @@ -1,4 +1,5 @@ import type { Lang } from "@scandic-hotels/common/constants/language" +import type { RoomCategories } from "@scandic-hotels/trpc/types/hotel" import type { Room } from "@scandic-hotels/trpc/types/room" import type { SafeUser } from "@/types/user" @@ -13,4 +14,5 @@ export interface DetailsProviderProps extends React.PropsWithChildren { searchParamsStr: string user: SafeUser vat: number + roomCategories: RoomCategories } diff --git a/apps/scandic-web/types/sidepeek.ts b/apps/scandic-web/types/sidepeek.ts new file mode 100644 index 000000000..bc9aa8029 --- /dev/null +++ b/apps/scandic-web/types/sidepeek.ts @@ -0,0 +1,5 @@ +export enum SidePeekEnum { + hotelDetails = "hotel-detail-side-peek", + roomDetails = "room-detail-side-peek", + bookedRoomDetails = "booked-room-detail-side-peek", +} diff --git a/apps/scandic-web/types/stores/enter-details.ts b/apps/scandic-web/types/stores/enter-details.ts index 80ef9d0b3..40f9314f2 100644 --- a/apps/scandic-web/types/stores/enter-details.ts +++ b/apps/scandic-web/types/stores/enter-details.ts @@ -1,6 +1,7 @@ import type { CurrencyEnum } from "@scandic-hotels/common/constants/currency" import type { BedTypeSelection } from "@scandic-hotels/trpc/types/bedTypeSelection" import type { Child } from "@scandic-hotels/trpc/types/child" +import type { RoomCategories } from "@scandic-hotels/trpc/types/hotel" import type { Packages } from "@scandic-hotels/trpc/types/packages" import type { @@ -80,6 +81,7 @@ export type InitialState = { booking: DetailsBooking rooms: InitialRoomData[] vat: number + roomCategories: RoomCategories } export interface DetailsState { @@ -100,6 +102,7 @@ export interface DetailsState { searchParamString: string totalPrice: Price vat: number + roomCategories: RoomCategories defaultCurrency: CurrencyEnum preSubmitCallbacks: Record void> } diff --git a/packages/booking-flow/lib/components/Contact/contact.module.css b/packages/booking-flow/lib/components/Contact/contact.module.css index 8cdf4e595..b71777721 100644 --- a/packages/booking-flow/lib/components/Contact/contact.module.css +++ b/packages/booking-flow/lib/components/Contact/contact.module.css @@ -59,9 +59,3 @@ flex-direction: column; justify-content: center; } - -.link { - text-decoration: underline; - font-family: var(--typography-Body-Regular-fontFamily); - color: var(--Text-Interactive-Secondary); -} diff --git a/packages/booking-flow/lib/components/Contact/index.tsx b/packages/booking-flow/lib/components/Contact/index.tsx index e285d573e..9878b1bb7 100644 --- a/packages/booking-flow/lib/components/Contact/index.tsx +++ b/packages/booking-flow/lib/components/Contact/index.tsx @@ -2,7 +2,6 @@ import { useIntl } from "react-intl" -import Body from "@scandic-hotels/design-system/Body" import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon" import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon" import Image from "@scandic-hotels/design-system/Image" @@ -13,6 +12,7 @@ import useLang from "../../hooks/useLang" import styles from "./contact.module.css" import type { Hotel } from "@scandic-hotels/trpc/types/hotel" +import { Typography } from "@scandic-hotels/design-system/Typography" interface ContactProps { hotel: Hotel @@ -30,55 +30,67 @@ export default function Contact({ hotel }: ContactProps) {
      • - - {intl.formatMessage({ - defaultMessage: "Address", - })} - - - {addressStr} -
        - {cityStr} - + +

        + {intl.formatMessage({ + defaultMessage: "Address", + })} +

        +         + +

        + {addressStr} +
        + {cityStr} +

        +
      • - - {intl.formatMessage({ - defaultMessage: "Driving directions", - })} - + +

        + {intl.formatMessage({ + defaultMessage: "Driving directions", + })} +

        +         - - {intl.formatMessage({ - defaultMessage: "Google Maps", - })} - + +

        + {intl.formatMessage({ + defaultMessage: "Google Maps", + })} +

        +
      • - - {intl.formatMessage({ - defaultMessage: "Contact us", - })} - + +

        + {intl.formatMessage({ + defaultMessage: "Contact us", + })} +

        +         - - {hotel.contactInformation.phoneNumber} - + +

        {hotel.contactInformation.phoneNumber}

        +
      • {(hotel.socialMedia.facebook || hotel.socialMedia.instagram) && ( <> - - {intl.formatMessage({ - defaultMessage: "Follow us", - })} - + +

        + {intl.formatMessage({ + defaultMessage: "Follow us", + })} +

        +
        {hotel.socialMedia.instagram && ( @@ -95,15 +107,17 @@ export default function Contact({ hotel }: ContactProps) { )}
      • - - {intl.formatMessage({ - defaultMessage: "Email", - })} - + +

        + {intl.formatMessage({ + defaultMessage: "Email", + })} +

        +         - - {hotel.contactInformation.email} - + +

        {hotel.contactInformation.email}

        +
      diff --git a/packages/booking-flow/lib/components/HotelReservationSidePeek/hotelReservationSidePeek.module.css b/packages/booking-flow/lib/components/HotelReservationSidePeek/hotelReservationSidePeek.module.css deleted file mode 100644 index be80e5dbd..000000000 --- a/packages/booking-flow/lib/components/HotelReservationSidePeek/hotelReservationSidePeek.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.spacing { - display: flex; - flex-direction: column; - gap: var(--Spacing-x2); -} diff --git a/packages/booking-flow/lib/components/HotelReservationSidePeek/index.tsx b/packages/booking-flow/lib/components/HotelReservationSidePeek/index.tsx deleted file mode 100644 index 8ae21d008..000000000 --- a/packages/booking-flow/lib/components/HotelReservationSidePeek/index.tsx +++ /dev/null @@ -1,84 +0,0 @@ -"use client" - -import { useEffect } from "react" - -import { trpc } from "@scandic-hotels/trpc/client" - -import useLang from "../../hooks/useLang" -import useSidePeekStore from "../../stores/sidepeek" -import HotelSidePeek from "../HotelSidePeek" -import RoomSidePeek from "../RoomSidePeek" - -export default function HotelReservationSidePeek() { - const { activeSidePeek, hotelId, roomTypeCode, showCTA } = useSidePeekStore( - (state) => ({ - activeSidePeek: state.activeSidePeek, - hotelId: state.hotelId, - roomTypeCode: state.roomTypeCode, - showCTA: state.showCTA, - }) - ) - const closeFn = useSidePeekStore((state) => state.closeSidePeek) - const lang = useLang() - - const { data: hotelData } = trpc.hotel.get.useQuery( - { - hotelId: hotelId ?? "", - language: lang, - isCardOnlyPayment: false, - }, - { - enabled: !!hotelId, - } - ) - - const selectedRoom = hotelData?.roomCategories.find((room) => - room.roomTypes.some((type) => type.code === roomTypeCode) - ) - - useEffect(() => { - if (activeSidePeek) { - window.history.pushState(null, "", window.location.href) - } - }, [activeSidePeek]) - - useEffect(() => { - function handlePopState() { - if (activeSidePeek) { - closeFn() - } - } - - window.addEventListener("popstate", handlePopState) - - return () => { - window.removeEventListener("popstate", handlePopState) - } - }, [activeSidePeek, closeFn]) - - if (activeSidePeek) { - return ( - <> - {hotelData && ( - - )} - {selectedRoom && ( - - )} - - ) - } - - return null -} diff --git a/packages/booking-flow/lib/components/HotelSidePeek/index.tsx b/packages/booking-flow/lib/components/HotelSidePeek/index.tsx deleted file mode 100644 index da61320a8..000000000 --- a/packages/booking-flow/lib/components/HotelSidePeek/index.tsx +++ /dev/null @@ -1,128 +0,0 @@ -"use client" - -import { useIntl } from "react-intl" - -import Accordion from "@scandic-hotels/design-system/Accordion" -import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem" -import ButtonLink from "@scandic-hotels/design-system/ButtonLink" -import { IconName } from "@scandic-hotels/design-system/Icons/iconName" -import SidePeek from "@scandic-hotels/design-system/SidePeek" -import { Typography } from "@scandic-hotels/design-system/Typography" - -import { SidePeekEnum } from "../../stores/sidepeek" -import { useTrackingContext } from "../../trackingContext" -import AdditionalAmenities from "../AdditionalAmenities" -import Contact from "../Contact" -import BreakfastAccordionItem from "../SidePeekAccordions/BreakfastAccordionItem" -import CheckInCheckOutAccordionItem from "../SidePeekAccordions/CheckInCheckOutAccordionItem" -import ParkingAccordionItem from "../SidePeekAccordions/ParkingAccordionItem" - -import styles from "./hotelSidePeek.module.css" - -import type { - AdditionalData, - Hotel, - Restaurant, -} from "@scandic-hotels/trpc/types/hotel" - -type HotelSidePeekProps = { - hotel: Hotel & { url: string | null } - restaurants: Restaurant[] - additionalHotelData: AdditionalData | undefined - activeSidePeek: SidePeekEnum - close: () => void - showCTA: boolean -} - -export default function HotelSidePeek({ - hotel, - restaurants, - additionalHotelData, - activeSidePeek, - close, -}: HotelSidePeekProps) { - const intl = useIntl() - - return ( - -
      - -

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

      -       - - - - - - - - - - {hotel.url ? ( - - {intl.formatMessage({ - defaultMessage: "Read more about the hotel", - })} - - ) : null} -
      -       - ) -} - -type AccessibilityAccordionItemProps = { - elevatorPitch?: string -} - -function AccessibilityAccordionItem({ - elevatorPitch, -}: AccessibilityAccordionItemProps) { - const intl = useIntl() - const tracking = useTrackingContext() - - if (!elevatorPitch) { - return null - } - - return ( - tracking.trackAccordionItemOpen("amenities:accessibility")} - > -
      - -

      {elevatorPitch}

      -       -
      -       - ) -} diff --git a/packages/booking-flow/lib/components/OpenSidePeekButton/index.tsx b/packages/booking-flow/lib/components/OpenSidePeekButton/index.tsx deleted file mode 100644 index 10593c686..000000000 --- a/packages/booking-flow/lib/components/OpenSidePeekButton/index.tsx +++ /dev/null @@ -1,52 +0,0 @@ -"use client" -import { useEffect } from "react" - -import { Button } from "@scandic-hotels/design-system/Button" -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" - -import useSidePeekStore, { type SidePeekEnum } from "../../stores/sidepeek" -import { useTrackingContext } from "../../trackingContext" - -interface OpenSidePeekButtonProps { - label: string - hotelId: string - showCTA: boolean - sidePeekKey: SidePeekEnum -} - -export default function OpenSidePeekButton({ - label, - hotelId, - showCTA, - sidePeekKey, -}: OpenSidePeekButtonProps) { - const tracking = useTrackingContext() - const { openSidePeek, closeSidePeek } = useSidePeekStore((state) => ({ - openSidePeek: state.openSidePeek, - closeSidePeek: state.closeSidePeek, - })) - - useEffect(() => { - return () => { - closeSidePeek() - } - }, [closeSidePeek]) - - return ( - - ) -} diff --git a/packages/booking-flow/lib/components/RoomSidePeek/index.tsx b/packages/booking-flow/lib/components/RoomSidePeek/index.tsx deleted file mode 100644 index b3272a6dd..000000000 --- a/packages/booking-flow/lib/components/RoomSidePeek/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useIntl } from "react-intl" - -import SidePeek from "@scandic-hotels/design-system/SidePeek" - -import { SidePeekEnum } from "../../stores/sidepeek" -import { RoomSidePeekContent } from "./RoomSidePeekContent" - -import type { Room } from "@scandic-hotels/trpc/types/hotel" - -export type RoomSidePeekProps = { - room: Room - activeSidePeek: SidePeekEnum | null - close: () => void -} - -export default function RoomSidePeek({ - room, - activeSidePeek, - close, -}: RoomSidePeekProps) { - const intl = useIntl() - - return ( - - - - ) -} diff --git a/packages/booking-flow/lib/stores/sidepeek.ts b/packages/booking-flow/lib/stores/sidepeek.ts deleted file mode 100644 index 4be9ae154..000000000 --- a/packages/booking-flow/lib/stores/sidepeek.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { create } from "zustand" - -export enum SidePeekEnum { - hotelDetails = "hotel-detail-side-peek", - roomDetails = "room-detail-side-peek", - bookedRoomDetails = "booked-room-detail-side-peek", -} - -interface SidePeekState { - activeSidePeek: SidePeekEnum | null - hotelId: string | null - roomTypeCode: string | null - showCTA: boolean - confirmationNumber: string - openSidePeek: ({ - key, - hotelId, - roomTypeCode, - showCTA, - confirmationNumber, - }: { - key: SidePeekEnum | null - hotelId: string - roomTypeCode?: string - showCTA?: boolean - confirmationNumber?: string - }) => void - closeSidePeek: () => void -} - -const useSidePeekStore = create((set) => ({ - activeSidePeek: null, - hotelId: null, - roomTypeCode: null, - showCTA: true, - user: null, - confirmationNumber: "", - openSidePeek: ({ - key, - hotelId, - roomTypeCode, - showCTA, - confirmationNumber, - }) => { - set({ - activeSidePeek: key, - hotelId, - roomTypeCode, - showCTA, - confirmationNumber, - }) - }, - closeSidePeek: () => - set({ - activeSidePeek: null, - hotelId: null, - roomTypeCode: null, - confirmationNumber: "", - }), -})) - -export default useSidePeekStore diff --git a/packages/booking-flow/package.json b/packages/booking-flow/package.json index 58787a34b..5e212f211 100644 --- a/packages/booking-flow/package.json +++ b/packages/booking-flow/package.json @@ -22,8 +22,8 @@ "./searchType": "./lib/misc/searchType.ts", "./bedTypeIcons": "./lib/misc/bedTypeIcons.ts", "./stores/bookingCode-filter": "./lib/stores/bookingCode-filter.ts", - "./stores/sidepeek": "./lib/stores/sidepeek.ts", "./components/TripAdvisorChip": "./lib/components/TripAdvisorChip/index.tsx", + "./components/Contact": "./lib/components/Contact/index.tsx", "./components/AdditionalAmenities": "./lib/components/AdditionalAmenities/index.tsx", "./components/HotelReservationSidePeek": "./lib/components/HotelReservationSidePeek/index.tsx", "./components/RoomSidePeekContent": "./lib/components/RoomSidePeek/RoomSidePeekContent/index.tsx", diff --git a/packages/trpc/lib/routers/booking/helpers.ts b/packages/trpc/lib/routers/booking/helpers.ts index 5144d35e6..70db9b928 100644 --- a/packages/trpc/lib/routers/booking/helpers.ts +++ b/packages/trpc/lib/routers/booking/helpers.ts @@ -1,7 +1,7 @@ import type { BookingConfirmation } from "../../types/bookingConfirmation" import type { Room } from "../../types/hotel" -export function getBookedHotelRoom( +export function getHotelRoom( rooms: Room[], roomTypeCode: BookingConfirmation["booking"]["roomTypeCode"] ) { diff --git a/packages/trpc/lib/routers/booking/query.ts b/packages/trpc/lib/routers/booking/query.ts index d66352b3e..a78cb6b1f 100644 --- a/packages/trpc/lib/routers/booking/query.ts +++ b/packages/trpc/lib/routers/booking/query.ts @@ -12,7 +12,7 @@ import { getHotel } from "../../routers/hotels/utils" import { toApiLang } from "../../utils" import { encrypt } from "../../utils/encryption" import { isValidSession } from "../../utils/session" -import { getBookedHotelRoom } from "./helpers" +import { getHotelRoom } from "./helpers" import { createRefIdInput, findBookingInput, @@ -85,10 +85,7 @@ export const bookingQueryRouter = router({ return { ...hotelData, booking, - room: getBookedHotelRoom( - hotelData.roomCategories, - booking.roomTypeCode - ), + room: getHotelRoom(hotelData.roomCategories, booking.roomTypeCode), } }), findBooking: safeProtectedServiceProcedure @@ -158,10 +155,7 @@ export const bookingQueryRouter = router({ return { ...hotelData, booking, - room: getBookedHotelRoom( - hotelData.roomCategories, - booking.roomTypeCode - ), + room: getHotelRoom(hotelData.roomCategories, booking.roomTypeCode), } }), linkedReservations: safeProtectedServiceProcedure