From 624a106964b8f20b00e1665b0ad5c3f9c2115850 Mon Sep 17 00:00:00 2001 From: Matilda Haneling Date: Wed, 19 Nov 2025 08:21:42 +0000 Subject: [PATCH] Merged in fix/book-510-rearrange-special-needs-filter-and-code (pull request #3115) BOOK-510: updated booking chip/special needs filter order on mobile * BOOK-510: updated booking chip/special needs filter order on mobile * BOOK-510: updated the close button to IconButton to fix styling issues on iOS * book-510: added aria-label * BOOK-510: refctored solution * small spacing fixes * fix(BOOK-510) updated aria-label Approved-by: Erik Tiekstra --- .../RoomsHeader/RoomPackageFilter/index.tsx | 96 ++++++++++++++----- .../roomPackageFilter.module.css | 55 ++++++++++- .../Rooms/RoomsHeader/index.tsx | 3 - .../Rooms/RoomsHeader/roomsHeader.module.css | 8 +- 4 files changed, 127 insertions(+), 35 deletions(-) diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/index.tsx b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/index.tsx index 28779b503..2b8af938d 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/index.tsx +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/index.tsx @@ -1,12 +1,16 @@ "use client" -import { Button as ButtonRAC } from "react-aria-components" +import { cx } from "class-variance-authority" +import { useIntl } from "react-intl" + +import { IconButton } from "@scandic-hotels/design-system/IconButton" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter" import { useSelectRateContext } from "../../../../../../contexts/SelectRate/SelectRateContext" import { useBreakpoint } from "../../../../../../hooks/useBreakpoint" +import { RemoveBookingCodeButton } from "../RemoveBookingCodeButton/RemoveBookingCodeButton" import PetRoomMessage from "./Form/Checkboxes/PetRoomMessage" import { RoomPackageFilterModal } from "./Modal" import { RoomPackageFilterPopover } from "./Popover" @@ -21,8 +25,10 @@ import type { ReactNode } from "react" export function RoomPackageFilter({ roomIndex }: { roomIndex: number }) { const displayAsModal = useBreakpoint("mobile") + const intl = useIntl() const { + input: { bookingCode }, getPackagesForRoom, actions: { selectPackages }, } = useSelectRateContext() @@ -65,32 +71,66 @@ export function RoomPackageFilter({ roomIndex }: { roomIndex: number }) { }) return ( -
-
- {selectedPackages.map((pkg) => ( - - - - {packageLabels[pkg.code] ?? pkg.description} - deletePackage(pkg.code)} - className={styles.removeButton} - > - - - - - ))} +
+
+ +
+
+ {selectedPackages.map((pkg) => { + const filterLabel = packageLabels[pkg.code] ?? pkg.description + return ( + + + + {filterLabel} + deletePackage(pkg.code)} + aria-label={intl.formatMessage( + { + id: "booking.removeSpecialNeedsFilter", + defaultMessage: "Remove {filter} filter", + }, + { + filter: filterLabel, + } + )} + className={styles.removeButton} + > + + + + + ) + })}
{displayAsModal ? ( -
+
pkg.code)} @@ -100,7 +140,11 @@ export function RoomPackageFilter({ roomIndex }: { roomIndex: number }) { />
) : ( -
+
pkg.code)} diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/roomPackageFilter.module.css b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/roomPackageFilter.module.css index 6607b2423..8855e5733 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/roomPackageFilter.module.css +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/roomPackageFilter.module.css @@ -1,12 +1,15 @@ .roomPackageFilter { display: flex; gap: var(--Space-x1); - flex-direction: column-reverse; - align-items: flex-start; + width: 100%; + align-items: center; + justify-content: flex-end; + flex-wrap: wrap; } .selectedPackages { display: flex; + justify-content: flex-end; gap: var(--Space-x1); flex-wrap: wrap; } @@ -93,12 +96,58 @@ } } -@media screen and (min-width: 768px) { +@media screen and (max-width: 949px) { + .roomPackageFilter { + flex-wrap: wrap-reverse; + &.hasBookingCode { + flex-wrap: wrap; + } + } + .selectedPackages { + order: 1; + &.hasBookingCode { + order: 3; + width: 100%; + } + } + .filterSelector { + order: 2; + display: flex; + justify-content: flex-end; + &.hasBookingCode { + width: fit-content; + order: 2; + } + } + .bookingCode { + &.hasBookingCode { + display: flex; + order: 1; + } + } +} + +@media screen and (min-width: 950px) { .roomPackageFilter { flex-direction: row; align-items: stretch; } + .selectedPackages { + flex: 1 100% auto; + order: 2; + min-width: fit-content; + } + .filterSelector { + order: 3; + flex: 0 0 auto; + } + .bookingCode { + order: 1; + flex: 0 0 auto; + } +} +@media screen and (min-width: 768px) { .modalOverlay { display: none; } diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx index e8a487ad0..dbefe9784 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx @@ -2,7 +2,6 @@ import { ErrorBoundary } from "../../../../ErrorBoundary/ErrorBoundary" import NoAvailabilityAlert from "../NoAvailabilityAlert" -import { RemoveBookingCodeButton } from "./RemoveBookingCodeButton/RemoveBookingCodeButton" import { AvailableRoomsCount } from "./AvailableRoomsCount" import { RoomPackageFilter } from "./RoomPackageFilter" @@ -29,9 +28,7 @@ function InnerRoomsHeader({ roomIndex }: { roomIndex: number }) { className={styles.noAvailabilityAlert} />
- - {/* */}
) diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/roomsHeader.module.css b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/roomsHeader.module.css index 33818d6a2..ca374d4e1 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/roomsHeader.module.css +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/roomsHeader.module.css @@ -1,7 +1,7 @@ .container { display: grid; - gap: var(--Space-x3); - align-items: center; + gap: var(--Space-x1); + align-items: flex-start; grid-template-areas: "availableRoomsCount" "noAvailabilityAlert" @@ -21,11 +21,13 @@ display: flex; gap: var(--Space-x1); align-items: flex-start; + justify-content: flex-end; + flex-wrap: wrap; } @media screen and (min-width: 768px) { .container { - grid-template-columns: 1fr auto; + grid-template-columns: auto 1fr; grid-template-areas: "availableRoomsCount filters" "noAvailabilityAlert noAvailabilityAlert";