scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-716-multiroom-guest-picker (pull request #1084)

Browse Source 
feat(SW-716) Added UI to add more rooms in guest/room picker

* feat(SW-716) Added UI to add more rooms in guest/room picker

* feat(SW-716) Renamed GuestRoom Type and updated html structure

* Feat(SW-716): Created a BookingFlowIteration1 folder

* feat(SW-716) Moved forms/bookingwidget to new flow

* feat(SW-716) Added new ENABLE_BOOKING_FLOW_ITERATION_1 and ENABLE_BOOKING_FLOW_ITERATION_2

* feat(SW-716) Re added booking widget into interaction1 of how it looks now in prod

* Revert "feat(SW-716) Re added booking widget into interaction1 of how it looks now in prod"

This reverts commit 9a5514e8e71b1487e610bf64986ca77a538c0023.

* Revert "feat(SW-716) Added new ENABLE_BOOKING_FLOW_ITERATION_1 and ENABLE_BOOKING_FLOW_ITERATION_2"

This reverts commit b00bfc08cb7878d91483220ba3e8322671c145e4.

* Revert "feat(SW-716) Moved forms/bookingwidget to new flow"

This reverts commit 6c81635fe929a71fb3a42d8f174706787d8578ed.

* Revert "Feat(SW-716): Created a BookingFlowIteration1 folder"

This reverts commit db41f1c7fcd8e3adf15713d5d36f0da11e03e3a4.

* feat(SW-716): Added NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE

* feat(SW-716) Readded Tooltip if NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE is true

* feat(SW-716) remove log


Approved-by: Niclas Edenvin
Approved-by: Christian Andolf
This commit is contained in:
Pontus Dreij
2025-01-08 15:09:29 +00:00
parent 85c9ec5b3b
commit b4060d720b
9 changed files with 266 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
components/GuestsRoomsPicker/index.tsx
View File

@@ -18,11 +18,11 @@ import PickerForm from "./Form"
import styles from "./guests-rooms-picker.module.css"
import type { GuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker"
import type { TGuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker"
export default function GuestsRoomsPickerForm() {
const { watch, trigger } = useFormContext()
const rooms = watch("rooms") as GuestsRoom[]
const rooms = watch("rooms") as TGuestsRoom[]
const checkIsDesktop = useMediaQuery("(min-width: 1367px)")
const [isDesktop, setIsDesktop] = useState(true)
@@ -83,10 +83,10 @@ export default function GuestsRoomsPickerForm() {
}, [containerHeight])
useEffect(() => {
if (typeof window !== undefined && isDesktop) {
if (typeof window !== undefined && isDesktop && rooms.length > 0) {
updateHeight()
}
}, [childCount, isDesktop, updateHeight])
}, [childCount, isDesktop, updateHeight, rooms])
return isDesktop ? (
<DialogTrigger onOpenChange={setOverflowClip} isOpen={isOpen}>
@@ -104,13 +104,7 @@ export default function GuestsRoomsPickerForm() {
style={containerHeight ? { overflow: "auto" } : {}}
>
<Dialog className={styles.pickerContainerDesktop}>
{({ close }) => (
<PickerForm
rooms={rooms}
onClose={close}
isOverflowed={!!containerHeight}
/>
)}
{({ close }) => <PickerForm rooms={rooms} onClose={close} />}
</Dialog>
</Popover>
</DialogTrigger>
@@ -137,7 +131,7 @@ function Trigger({
className,
triggerFn,
}: {
rooms: GuestsRoom[]
rooms: TGuestsRoom[]
className: string
triggerFn?: () => void
}) {
@@ -149,27 +143,30 @@ function Trigger({
type="button"
onPress={triggerFn}
>
<Body>
{rooms.map((room, i) => (
<span key={i}>
{intl.formatMessage(
{ id: "booking.rooms" },
{ totalRooms: rooms.length }
)}
{", "}
{intl.formatMessage(
{ id: "booking.adults" },
{ totalAdults: room.adults }
)}
{room.child.length > 0
? ", " +
intl.formatMessage(
{ id: "booking.children" },
{ totalChildren: room.child.length }
)
: null}
</span>
))}
<Body color="uiTextHighContrast">
<span>
{intl.formatMessage(
{ id: "booking.rooms" },
{ totalRooms: rooms.length }
)}
{", "}
{intl.formatMessage(
{ id: "booking.adults" },
{ totalAdults: rooms.reduce((acc, room) => acc + room.adults, 0) }
)}
{rooms.some((room) => room.child.length > 0)
? ", " +
intl.formatMessage(
{ id: "booking.children" },
{
totalChildren: rooms.reduce(
(acc, room) => acc + room.child.length,
0
),
}
)
: null}
</span>
</Body>
</Button>
)