Merged in feat/sw-2879-booking-widget-to-booking-flow-package (pull request #2532)
feat(SW-2879): Move BookingWidget to booking-flow package * Fix lockfile * Fix styling * a tiny little booking widget test * Tiny fixes * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Remove unused scripts * lint:fix * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Tiny lint fixes * update test * Update Input in booking-flow * Clean up comments etc * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Setup tracking context for booking-flow * Add missing use client * Fix temp tracking function * Pass booking to booking-widget * Remove comment * Add use client to booking widget tracking provider * Add use client to tracking functions * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Move debug page * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package Approved-by: Bianca Widstam
This commit is contained in:
Anton Gunnarsson
@@ -0,0 +1,226 @@
|
||||
"use client"
|
||||
|
||||
import { useCallback, useEffect } from "react"
|
||||
import { useFormContext, useWatch } from "react-hook-form"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
|
||||
import { Tooltip } from "@scandic-hotels/design-system/Tooltip"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
|
||||
|
||||
import { GuestsRoom } from "./GuestsRoom"
|
||||
|
||||
import styles from "./guests-rooms-picker.module.css"
|
||||
|
||||
import type { GuestsRoom as TGuestsRoom } from ".."
|
||||
import type { BookingWidgetSchema } from "../Client"
|
||||
|
||||
const MAX_ROOMS = 4
|
||||
|
||||
interface GuestsRoomsPickerDialogProps {
|
||||
rooms: TGuestsRoom[]
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export default function GuestsRoomsPickerDialog({
|
||||
rooms,
|
||||
onClose,
|
||||
}: GuestsRoomsPickerDialogProps) {
|
||||
const intl = useIntl()
|
||||
const { getFieldState, trigger, setValue, getValues } =
|
||||
useFormContext<BookingWidgetSchema>()
|
||||
const roomsValue = useWatch<BookingWidgetSchema, "rooms">({ name: "rooms" })
|
||||
const addRoomLabel = intl.formatMessage({
|
||||
defaultMessage: "Add room",
|
||||
})
|
||||
const doneLabel = intl.formatMessage({
|
||||
defaultMessage: "Done",
|
||||
})
|
||||
// Disable add room if booking code is either voucher or corporate cheque, or reward night is enabled
|
||||
const addRoomDisabledTextForSpecialRate = getValues(SEARCH_TYPE_REDEMPTION)
|
||||
? intl.formatMessage({
|
||||
defaultMessage:
|
||||
"Multi-room booking is not available with reward night.",
|
||||
})
|
||||
: getValues("bookingCode.value")?.toLowerCase().startsWith("vo") &&
|
||||
intl.formatMessage({
|
||||
defaultMessage:
|
||||
"Multi-room booking is not available with this booking code.",
|
||||
})
|
||||
|
||||
const handleClose = useCallback(async () => {
|
||||
const isValid = await trigger("rooms")
|
||||
if (isValid) onClose()
|
||||
}, [trigger, onClose])
|
||||
|
||||
const handleAddRoom = useCallback(() => {
|
||||
setValue("rooms", [...roomsValue, { adults: 1, childrenInRoom: [] }], {
|
||||
shouldValidate: true,
|
||||
shouldDirty: true,
|
||||
})
|
||||
}, [roomsValue, setValue])
|
||||
|
||||
const handleRemoveRoom = useCallback(
|
||||
(index: number) => {
|
||||
const updatedRooms = roomsValue.filter((_, i) => i !== index)
|
||||
|
||||
setValue("rooms", updatedRooms, {
|
||||
shouldValidate: true,
|
||||
shouldDirty: true,
|
||||
})
|
||||
|
||||
if (updatedRooms.length === 1) {
|
||||
trigger("bookingCode.value")
|
||||
trigger(SEARCH_TYPE_REDEMPTION)
|
||||
}
|
||||
},
|
||||
[roomsValue, trigger, setValue]
|
||||
)
|
||||
|
||||
// Validate rooms when they change
|
||||
useEffect(() => {
|
||||
const fieldState = getFieldState("rooms")
|
||||
if (fieldState.invalid) trigger("rooms")
|
||||
}, [roomsValue, getFieldState, trigger])
|
||||
|
||||
const isInvalid =
|
||||
getFieldState("rooms").invalid ||
|
||||
roomsValue.some((room) =>
|
||||
room.childrenInRoom.some((child) => child.age === undefined)
|
||||
)
|
||||
const canAddRooms = rooms.length < MAX_ROOMS
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className={styles.contentWrapper}>
|
||||
<header className={styles.header}>
|
||||
<button type="button" className={styles.close} onClick={onClose}>
|
||||
<MaterialIcon icon="close" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className={styles.contentContainer}>
|
||||
{rooms.map((room, index) => (
|
||||
<GuestsRoom
|
||||
key={index}
|
||||
room={room}
|
||||
index={index}
|
||||
onRemove={handleRemoveRoom}
|
||||
/>
|
||||
))}
|
||||
|
||||
{addRoomDisabledTextForSpecialRate ? (
|
||||
<div className={styles.addRoomMobileContainer}>
|
||||
<Button
|
||||
intent="text"
|
||||
variant="icon"
|
||||
wrapping
|
||||
theme="base"
|
||||
fullWidth
|
||||
onPress={handleAddRoom}
|
||||
disabled
|
||||
>
|
||||
<MaterialIcon icon="add" color="CurrentColor" />
|
||||
{addRoomLabel}
|
||||
</Button>
|
||||
<div className={styles.errorContainer}>
|
||||
<Typography
|
||||
className={styles.error}
|
||||
variant="Body/Supporting text (caption)/smRegular"
|
||||
>
|
||||
<span>
|
||||
<MaterialIcon
|
||||
icon="error"
|
||||
size={20}
|
||||
color="Icon/Feedback/Error"
|
||||
isFilled
|
||||
/>
|
||||
{addRoomDisabledTextForSpecialRate}
|
||||
</span>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
canAddRooms && (
|
||||
<div className={styles.addRoomMobileContainer}>
|
||||
<Button
|
||||
className={styles.addRoomBtn}
|
||||
intent="text"
|
||||
variant="icon"
|
||||
wrapping
|
||||
theme="base"
|
||||
fullWidth
|
||||
onPress={handleAddRoom}
|
||||
>
|
||||
<MaterialIcon icon="add" color="CurrentColor" />
|
||||
{addRoomLabel}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<footer className={styles.footer}>
|
||||
{addRoomDisabledTextForSpecialRate ? (
|
||||
<div className={styles.hideOnMobile}>
|
||||
<Tooltip
|
||||
text={addRoomDisabledTextForSpecialRate}
|
||||
position="bottom"
|
||||
arrow="left"
|
||||
>
|
||||
<Button
|
||||
intent="text"
|
||||
variant="icon"
|
||||
wrapping
|
||||
theme="base"
|
||||
disabled
|
||||
onPress={handleAddRoom}
|
||||
>
|
||||
<MaterialIcon icon="add_circle" color="CurrentColor" />
|
||||
{addRoomLabel}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
) : (
|
||||
canAddRooms && (
|
||||
<div className={styles.hideOnMobile}>
|
||||
<Button
|
||||
className={styles.addRoomBtn}
|
||||
intent="text"
|
||||
variant="icon"
|
||||
wrapping
|
||||
theme="base"
|
||||
onPress={handleAddRoom}
|
||||
>
|
||||
<MaterialIcon icon="add_circle" color="CurrentColor" />
|
||||
{addRoomLabel}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
<Button
|
||||
onPress={handleClose}
|
||||
disabled={isInvalid}
|
||||
className={styles.hideOnDesktop}
|
||||
intent="tertiary"
|
||||
theme="base"
|
||||
size="large"
|
||||
>
|
||||
{doneLabel}
|
||||
</Button>
|
||||
<Button
|
||||
onPress={handleClose}
|
||||
disabled={isInvalid}
|
||||
className={styles.hideOnMobile}
|
||||
intent="tertiary"
|
||||
theme="base"
|
||||
size="small"
|
||||
>
|
||||
{doneLabel}
|
||||
</Button>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user