Merged in fix/multiroom-remove-flag (pull request #1461)
feat:multi room - remove feature flag * feat:multi room - remove feature flag Approved-by: Michael Zetterberg
This commit is contained in:
@@ -4,11 +4,8 @@ import { useCallback, useEffect } from "react"
|
|||||||
import { useFormContext, useWatch } from "react-hook-form"
|
import { useFormContext, useWatch } from "react-hook-form"
|
||||||
import { useIntl } from "react-intl"
|
import { useIntl } from "react-intl"
|
||||||
|
|
||||||
import { env } from "@/env/client"
|
|
||||||
|
|
||||||
import { CloseLargeIcon, PlusCircleIcon, PlusIcon } from "../Icons"
|
import { CloseLargeIcon, PlusCircleIcon, PlusIcon } from "../Icons"
|
||||||
import Button from "../TempDesignSystem/Button"
|
import Button from "../TempDesignSystem/Button"
|
||||||
import { Tooltip } from "../TempDesignSystem/Tooltip"
|
|
||||||
import { GuestsRoom } from "./GuestsRoom"
|
import { GuestsRoom } from "./GuestsRoom"
|
||||||
|
|
||||||
import styles from "./guests-rooms-picker.module.css"
|
import styles from "./guests-rooms-picker.module.css"
|
||||||
@@ -21,13 +18,11 @@ const MAX_ROOMS = 4
|
|||||||
interface GuestsRoomsPickerDialogProps {
|
interface GuestsRoomsPickerDialogProps {
|
||||||
rooms: TGuestsRoom[]
|
rooms: TGuestsRoom[]
|
||||||
onClose: () => void
|
onClose: () => void
|
||||||
isOverflowed?: boolean // ToDo Remove once Tooltip below is no longer required
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function GuestsRoomsPickerDialog({
|
export default function GuestsRoomsPickerDialog({
|
||||||
rooms,
|
rooms,
|
||||||
onClose,
|
onClose,
|
||||||
isOverflowed = false,
|
|
||||||
}: GuestsRoomsPickerDialogProps) {
|
}: GuestsRoomsPickerDialogProps) {
|
||||||
const intl = useIntl()
|
const intl = useIntl()
|
||||||
const { getFieldState, trigger, setValue } =
|
const { getFieldState, trigger, setValue } =
|
||||||
@@ -35,12 +30,6 @@ export default function GuestsRoomsPickerDialog({
|
|||||||
const roomsValue = useWatch<BookingWidgetSchema, "rooms">({ name: "rooms" })
|
const roomsValue = useWatch<BookingWidgetSchema, "rooms">({ name: "rooms" })
|
||||||
const addRoomLabel = intl.formatMessage({ id: "Add room" })
|
const addRoomLabel = intl.formatMessage({ id: "Add room" })
|
||||||
const doneLabel = intl.formatMessage({ id: "Done" })
|
const doneLabel = intl.formatMessage({ id: "Done" })
|
||||||
const disabledBookingOptionsHeader = intl.formatMessage({
|
|
||||||
id: "We're sorry",
|
|
||||||
})
|
|
||||||
const disabledBookingOptionsText = intl.formatMessage({
|
|
||||||
id: "Adding room is not available on the new website yet.",
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleClose = useCallback(async () => {
|
const handleClose = useCallback(async () => {
|
||||||
const isValid = await trigger("rooms")
|
const isValid = await trigger("rooms")
|
||||||
@@ -96,84 +85,37 @@ export default function GuestsRoomsPickerDialog({
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
{env.NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE ? (
|
{canAddRooms && (
|
||||||
<div className={styles.addRoomMobileContainer}>
|
<div className={styles.addRoomMobileContainer}>
|
||||||
<Tooltip
|
<Button
|
||||||
heading={disabledBookingOptionsHeader}
|
intent="text"
|
||||||
text={disabledBookingOptionsText}
|
variant="icon"
|
||||||
position="bottom"
|
wrapping
|
||||||
arrow="left"
|
theme="base"
|
||||||
|
fullWidth
|
||||||
|
onPress={handleAddRoom}
|
||||||
>
|
>
|
||||||
<Button
|
<PlusIcon />
|
||||||
intent="text"
|
{addRoomLabel}
|
||||||
variant="icon"
|
</Button>
|
||||||
wrapping
|
|
||||||
theme="base"
|
|
||||||
fullWidth
|
|
||||||
onPress={handleAddRoom}
|
|
||||||
disabled
|
|
||||||
>
|
|
||||||
<PlusIcon />
|
|
||||||
{addRoomLabel}
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
canAddRooms && (
|
|
||||||
<div className={styles.addRoomMobileContainer}>
|
|
||||||
<Button
|
|
||||||
intent="text"
|
|
||||||
variant="icon"
|
|
||||||
wrapping
|
|
||||||
theme="base"
|
|
||||||
fullWidth
|
|
||||||
onPress={handleAddRoom}
|
|
||||||
>
|
|
||||||
<PlusIcon />
|
|
||||||
{addRoomLabel}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<footer className={styles.footer}>
|
<footer className={styles.footer}>
|
||||||
{env.NEXT_PUBLIC_HIDE_FOR_NEXT_RELEASE ? (
|
{canAddRooms && (
|
||||||
<div className={styles.hideOnMobile}>
|
<div className={styles.hideOnMobile}>
|
||||||
<Tooltip
|
<Button
|
||||||
heading={disabledBookingOptionsHeader}
|
intent="text"
|
||||||
text={disabledBookingOptionsText}
|
variant="icon"
|
||||||
position={isOverflowed ? "top" : "bottom"}
|
wrapping
|
||||||
arrow="left"
|
theme="base"
|
||||||
|
onPress={handleAddRoom}
|
||||||
>
|
>
|
||||||
<Button
|
<PlusCircleIcon />
|
||||||
intent="text"
|
{addRoomLabel}
|
||||||
variant="icon"
|
</Button>
|
||||||
wrapping
|
|
||||||
theme="base"
|
|
||||||
disabled
|
|
||||||
onPress={handleAddRoom}
|
|
||||||
>
|
|
||||||
<PlusCircleIcon />
|
|
||||||
{addRoomLabel}
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
canAddRooms && (
|
|
||||||
<div className={styles.hideOnMobile}>
|
|
||||||
<Button
|
|
||||||
intent="text"
|
|
||||||
variant="icon"
|
|
||||||
wrapping
|
|
||||||
theme="base"
|
|
||||||
onPress={handleAddRoom}
|
|
||||||
>
|
|
||||||
<PlusCircleIcon />
|
|
||||||
{addRoomLabel}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
)}
|
)}
|
||||||
<Button
|
<Button
|
||||||
onPress={handleClose}
|
onPress={handleClose}
|
||||||
|
|||||||
Reference in New Issue
Block a user