From 322268595d5d9d8dde97b73708f24347d4dbb145 Mon Sep 17 00:00:00 2001 From: Anton Gunnarsson Date: Thu, 14 Aug 2025 12:25:40 +0000 Subject: [PATCH] Merged in feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow (pull request #2600) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat(SW-2873): Move HotelReservationSidePeek to booking-flow * Move sidepeek store to booking-flow * Begin move of HotelReservationSidePeek to booking-flow * Copy Link * Update AccessibilityAccordionItem * Split AccessibilityAccordionItem into two components * Fix tracking for Accordion * Duplicate ButtonLink to booking-flow TEMP * AdditionalAmeneties * wip * Move sidepeek accordion items * Remove temp ButtonLink * Merge branch 'master' into feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow * Fix accordion tracking * Merge branch 'master' into feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow * Update exports * Fix self-referencing import * Merge branch 'master' into feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow * Add 'use client' to tracking function * Merge branch 'master' into feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow * Fix TEMP folder * Refactor sidepeek tracking * Merge branch 'master' into feat/sw-3218-move-hotelreservationsidepeek-to-booking-flow Approved-by: Joakim Jäderberg --- apps/partner-sas/app/[lang]/layout.tsx | 6 +- apps/partner-sas/app/utils/tracking.ts | 6 +- .../hotelreservation/(standard)/layout.tsx | 2 +- apps/scandic-web/app/[lang]/(live)/layout.tsx | 2 + .../HotelPage/SidePeeks/Amenities/index.tsx | 8 +- .../SidePeeks/Room/RoomFacilities/index.tsx | 2 +- .../SidePeeks/Room/RoomTypes/index.tsx | 2 +- .../ContentType/HotelPage/SidePeeks/index.tsx | 2 +- .../Rooms/Room/RoomDetailsSidePeek/index.tsx | 2 +- .../EnterDetails/BedType/index.tsx | 2 +- .../EnterDetails/Header/ToggleSidePeek.tsx | 15 +- .../SelectedRoom/ToggleSidePeek.tsx | 16 +- .../HotelReservation/HotelCard/index.tsx | 2 +- .../HotelReservation/MyStay/index.tsx | 2 +- .../HotelReservation/ReadMore/index.tsx | 8 +- .../HotelInfoCard/HotelDescription/index.tsx | 3 +- .../SelectRate/HotelInfoCard/index.tsx | 2 +- .../RoomListItem/Details/ToggleSidePeek.tsx | 16 +- .../BookedRoomSidePeek/RoomDetails.tsx | 4 +- .../SidePeeks/RoomSidePeek/facilityIcon.tsx | 240 -------------- .../RoomSidePeek/bedIcon.ts => utils.ts} | 0 apps/scandic-web/constants/booking.ts | 35 -- .../hotelReservation/amenitiesSidePeek.ts | 2 +- .../hotelReservation/hotelSidePeek.ts | 15 - .../selectHotel/selectHotel.ts | 8 +- .../components/hotelReservation/sidePeek.ts | 5 - .../types/components/sidePeeks/amenities.ts | 26 -- .../components/sidePeeks/roomSidePeek.ts | 8 - .../utils/tracking/componentEvents.ts | 18 +- .../additionalAmenities.module.css | 0 .../components}/AdditionalAmenities/index.tsx | 8 +- .../components}/Contact/contact.module.css | 0 .../lib/components}/Contact/index.tsx | 8 +- .../hotelReservationSidePeek.module.css | 0 .../HotelReservationSidePeek}/index.tsx | 9 +- .../HotelSidePeek/hotelSidePeek.module.css | 0 .../lib/components}/HotelSidePeek/index.tsx | 65 +++- .../RoomSidePeekContent/index.tsx | 22 +- .../roomSidePeekContent.module.css | 0 .../lib/components}/RoomSidePeek/index.tsx | 10 +- .../BreakfastAccordionItem.tsx | 12 +- .../CheckInCheckOutAccordionItem.tsx | 11 +- .../ParkingAccordionItem.tsx | 13 +- .../sidePeekAccordion.module.css | 26 ++ .../lib/components/TEMP/FacilityToIcon.tsx | 305 ++++++++++++++++++ .../booking-flow/lib/misc/bedTypeIcons.ts | 35 ++ .../booking-flow/lib}/stores/sidepeek.ts | 15 +- packages/booking-flow/lib/trackingContext.tsx | 1 + packages/booking-flow/package.json | 10 +- packages/booking-flow/tsconfig.json | 5 +- .../design-system/.storybook/vitest.setup.ts | 2 +- .../lib/components/Icons/FacilityIcon.tsx | 234 ++++++++++++++ packages/design-system/package.json | 1 + 53 files changed, 826 insertions(+), 425 deletions(-) delete mode 100644 apps/scandic-web/components/SidePeeks/RoomSidePeek/facilityIcon.tsx rename apps/scandic-web/components/{SidePeeks/RoomSidePeek/bedIcon.ts => utils.ts} (100%) delete mode 100644 apps/scandic-web/types/components/hotelReservation/hotelSidePeek.ts delete mode 100644 apps/scandic-web/types/components/hotelReservation/sidePeek.ts delete mode 100644 apps/scandic-web/types/components/sidePeeks/roomSidePeek.ts rename {apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent => packages/booking-flow/lib/components}/AdditionalAmenities/additionalAmenities.module.css (100%) rename {apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent => packages/booking-flow/lib/components}/AdditionalAmenities/index.tsx (85%) rename {apps/scandic-web/components/HotelReservation => packages/booking-flow/lib/components}/Contact/contact.module.css (100%) rename {apps/scandic-web/components/HotelReservation => packages/booking-flow/lib/components}/Contact/index.tsx (96%) rename {apps/scandic-web/components/HotelReservation/SidePeek => packages/booking-flow/lib/components/HotelReservationSidePeek}/hotelReservationSidePeek.module.css (100%) rename {apps/scandic-web/components/HotelReservation/SidePeek => packages/booking-flow/lib/components/HotelReservationSidePeek}/index.tsx (89%) rename {apps/scandic-web/components/SidePeeks => packages/booking-flow/lib/components}/HotelSidePeek/hotelSidePeek.module.css (100%) rename {apps/scandic-web/components/SidePeeks => packages/booking-flow/lib/components}/HotelSidePeek/index.tsx (54%) rename {apps/scandic-web/components/SidePeeks => packages/booking-flow/lib/components}/RoomSidePeek/RoomSidePeekContent/index.tsx (89%) rename {apps/scandic-web/components/SidePeeks => packages/booking-flow/lib/components}/RoomSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css (100%) rename {apps/scandic-web/components/SidePeeks => packages/booking-flow/lib/components}/RoomSidePeek/index.tsx (72%) rename apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast.tsx => packages/booking-flow/lib/components/SidePeekAccordions/BreakfastAccordionItem.tsx (84%) rename apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/CheckInCheckOut.tsx => packages/booking-flow/lib/components/SidePeekAccordions/CheckInCheckOutAccordionItem.tsx (83%) rename apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx => packages/booking-flow/lib/components/SidePeekAccordions/ParkingAccordionItem.tsx (82%) create mode 100644 packages/booking-flow/lib/components/SidePeekAccordions/sidePeekAccordion.module.css create mode 100644 packages/booking-flow/lib/components/TEMP/FacilityToIcon.tsx create mode 100644 packages/booking-flow/lib/misc/bedTypeIcons.ts rename {apps/scandic-web => packages/booking-flow/lib}/stores/sidepeek.ts (76%) create mode 100644 packages/design-system/lib/components/Icons/FacilityIcon.tsx diff --git a/apps/partner-sas/app/[lang]/layout.tsx b/apps/partner-sas/app/[lang]/layout.tsx index b6fc29b9a..7a55048a0 100644 --- a/apps/partner-sas/app/[lang]/layout.tsx +++ b/apps/partner-sas/app/[lang]/layout.tsx @@ -11,7 +11,10 @@ import { getMessages } from "@/i18n" import ClientIntlProvider from "@/i18n/Provider" import { setLang } from "@/i18n/serverContext" -import { trackBookingSearchClick } from "../utils/tracking" +import { + trackAccordionItemOpen, + trackBookingSearchClick, +} from "../utils/tracking" import type { Metadata } from "next" @@ -53,6 +56,7 @@ export default async function RootLayout(props: RootLayoutProps) {
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 2a183f7b2..428ebdf37 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx @@ -1,11 +1,11 @@ +import AdditionalAmenities from "@scandic-hotels/booking-flow/components/AdditionalAmenities" +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 SidePeek from "@scandic-hotels/design-system/SidePeek" 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 { getIntl } from "@/i18n" import { appendSlugToPathname } from "@/utils/appendSlugToPathname" diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/RoomFacilities/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/RoomFacilities/index.tsx index 4ad21a9e6..b67b3a021 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/RoomFacilities/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/RoomFacilities/index.tsx @@ -4,9 +4,9 @@ import { cx } from "class-variance-authority" import { useRef, useState } from "react" import { useIntl } from "react-intl" +import { FacilityIcon } from "@scandic-hotels/design-system/Icons/FacilityIcon" import { Typography } from "@scandic-hotels/design-system/Typography" -import { FacilityIcon } from "@/components/SidePeeks/RoomSidePeek/facilityIcon" import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton" import styles from "./roomFacilities.module.css" diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/RoomTypes/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/RoomTypes/index.tsx index c766a1741..21d6621de 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/RoomTypes/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/RoomTypes/index.tsx @@ -1,7 +1,7 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" -import { getBedIconName } from "@/components/SidePeeks/RoomSidePeek/bedIcon" +import { getBedIconName } from "@/components/utils" import { getIntl } from "@/i18n" import { getBedDescriptionText } from "../utils" diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/index.tsx index 092391d08..476af26b7 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/index.tsx @@ -15,7 +15,7 @@ export default function SidePeeks({ hotelId, children }: SidePeeksProps) { const searchParams = useSearchParams() function handleOpen(sidePeek: string) { - trackOpenSidePeekEvent(sidePeek, hotelId) + trackOpenSidePeekEvent({ name: sidePeek, hotelId }) } function handleClose() { 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 index ffd23c0ab..a0722f2d3 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/RoomDetailsSidePeek/index.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/RoomDetailsSidePeek/index.tsx @@ -3,13 +3,13 @@ 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 { RoomSidePeekContent } from "@/components/SidePeeks/RoomSidePeek/RoomSidePeekContent" import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled" interface RoomDetailsSidePeekProps { diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/BedType/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/BedType/index.tsx index b851e66bf..affd352df 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/BedType/index.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/BedType/index.tsx @@ -4,9 +4,9 @@ import { zodResolver } from "@hookform/resolvers/zod" import { useCallback, useEffect, useState } from "react" import { FormProvider, useForm } from "react-hook-form" +import { BED_TYPE_ICONS } from "@scandic-hotels/booking-flow/bedTypeIcons" import RadioCard from "@scandic-hotels/design-system/Form/RadioCard" -import { BED_TYPE_ICONS } from "@/constants/booking" import { useEnterDetailsStore } from "@/stores/enter-details" import { useRoomContext } from "@/contexts/Details/Room" diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx index ba48deaa4..3ae42e7d0 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx @@ -2,12 +2,14 @@ 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 useSidePeekStore from "@/stores/sidepeek" +import { trackOpenSidePeekEvent } from "@/utils/tracking" -import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek" import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps" export default function ToggleSidePeek({ hotelId }: ToggleSidePeekProps) { @@ -16,7 +18,14 @@ export default function ToggleSidePeek({ hotelId }: ToggleSidePeekProps) { return (