@roomstay/frontend 2.0.12 → 2.1.0

package/dist/src/components/generic/BookingWizard/BookingWizardBottomSheet/BookingWizardBottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BookingWizardBottomSheet.js","sourceRoot":"/","sources":["src/components/generic/BookingWizard/BookingWizardBottomSheet/BookingWizardBottomSheet.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,4DAAoC;AACpC,kDAA0B;AAC1B,yEAA0E;AAE1E,kEAA+D;AAI/D,MAAM,wBAAwB,GAA4C,CAAC,KAAK,EAAE,EAAE;IAChF,MAAM,EAAE,QAAQ,EAAE,SAAS,KAA0B,KAAK,EAA1B,gBAAgB,UAAK,KAAK,EAApD,yBAA4C,CAAQ,CAAC;IAE3D,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,eAAK,CAAC,UAAU,CAAC,2CAAoB,CAAC,CAAC;IAEjF,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,4BAA4B,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;IAEjF,OAAO,CACH,8BAAC,uCAAW,kBAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,IAAM,gBAAgB,GAC9D,QAAQ,CACC,CACjB,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,wBAAwB,CAAC","sourcesContent":["import classNames from 'classnames';\nimport React from 'react';\nimport { BottomSheet, BottomSheetProps } from 'react-spring-bottom-sheet';\n\nimport { BookingWizardContext } from '../BookingWizardContext';\n\ninterface BookingWizardBottomSheetProps extends BottomSheetProps {}\n\nconst BookingWizardBottomSheet: React.FC<BookingWizardBottomSheetProps> = (props) => {\n    const { children, className, ...bottomSheetProps } = props;\n\n    const { style, className: bwClassname } = React.useContext(BookingWizardContext);\n\n    const classes = classNames('roomstay-booking-container', bwClassname, className);\n\n    return (\n        <BottomSheet className={classes} style={style} {...bottomSheetProps}>\n            {children}\n        </BottomSheet>\n    );\n};\n\nexport default BookingWizardBottomSheet;\n"]}

package/dist/src/components/generic/BookingWizard/BookingWizardContent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import 'react-spring-bottom-sheet/dist/style.css';
+import { BookingWizardProperty } from 'models/BookingWizard/BookingWizardProperty';
+import { TBookingWizardProperties } from 'models/BookingWizard/BookingWizardTypes';
+export interface BookingWizardContentProps {
+    defaultColors: BookingWizardProperty['colors'];
+    properties: TBookingWizardProperties;
+    selectedProperty?: BookingWizardProperty;
+}
+export declare const BookingWizardContent: React.FC<BookingWizardContentProps>;

package/dist/src/components/generic/BookingWizard/BookingWizardContent.js

@@ -0,0 +1,113 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BookingWizardContent = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importStar(require("react"));
+const BEButton_1 = __importDefault(require("../BEButton"));
+const BookingWizard_module_scss_1 = __importDefault(require("./BookingWizard.module.scss"));
+const BookingWizardContext_1 = require("./BookingWizardContext");
+const BookingWizardDateSelector_1 = require("./BookingWizardDateSelector/BookingWizardDateSelector");
+const BookingWizardGuestSelector_1 = require("./BookingWizardGuestSelector/BookingWizardGuestSelector");
+const BookingWizardHotelSelector_1 = require("./BookingWizardHotelSelector/BookingWizardHotelSelector");
+require("react-spring-bottom-sheet/dist/style.css");
+const RoomstayThemeEngine_1 = __importDefault(require("providers/RoomstayThemeEngine"));
+const BookingWizardContent = ({ properties, selectedProperty: defaultProperty, defaultColors }) => {
+    const bwContext = (0, react_1.useContext)(BookingWizardContext_1.BookingWizardContext);
+    const [checkInDate, setCheckInDate] = (0, react_1.useState)((0, dayjs_1.default)());
+    const [checkOutDate, setCheckOutDate] = (0, react_1.useState)((0, dayjs_1.default)().add(1, 'days'));
+    const [adults, setAdults] = (0, react_1.useState)(1);
+    const [children, setChildren] = (0, react_1.useState)(0);
+    const [room, setRoom] = (0, react_1.useState)(1);
+    const [selectedProperty, setSelectedProperty] = (0, react_1.useState)(defaultProperty);
+    (0, react_1.useEffect)(() => {
+        if (selectedProperty === null || selectedProperty === void 0 ? void 0 : selectedProperty.colors) {
+            RoomstayThemeEngine_1.default.changeTheme(selectedProperty.colors);
+        }
+        else if (defaultColors) {
+            RoomstayThemeEngine_1.default.changeTheme(defaultColors);
+        }
+    }, [selectedProperty]);
+    const setGuest = (guests) => {
+        setAdults(guests.adults);
+        setChildren(guests.children);
+        setRoom(guests.room);
+    };
+    const setDate = (startDate, endDate) => {
+        setCheckInDate(startDate);
+        setCheckOutDate(endDate);
+    };
+    const isValid = () => {
+        if (!selectedProperty)
+            return false;
+        if (!checkInDate)
+            return false;
+        if (!checkOutDate)
+            return false;
+        if (adults + children <= 0)
+            return false;
+        return true;
+    };
+    const _onSubmit = () => {
+        var _a;
+        if (!isValid())
+            return false;
+        // After passing validation, we pass the function up the chain for the engine
+        // Implementor to decide where the user should be redirected to
+        // This is to give the hotel team a chance to add tracking, or modify the request on their end.
+        (_a = bwContext.onSubmit) === null || _a === void 0 ? void 0 : _a.call(bwContext, {
+            id: selectedProperty === null || selectedProperty === void 0 ? void 0 : selectedProperty.id,
+            checkIn: checkInDate,
+            checkout: checkOutDate,
+            guests: {
+                adults,
+                children,
+                room,
+            },
+        });
+    };
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(BookingWizard_module_scss_1.default.content, BookingWizard_module_scss_1.default[`--${bwContext.layout}`], {
+            [BookingWizard_module_scss_1.default['--vertical']]: bwContext.layout === 'button',
+            [BookingWizard_module_scss_1.default.inline]: bwContext.type === 'inline',
+        }) },
+        react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: BookingWizard_module_scss_1.default.item },
+                react_1.default.createElement("label", { className: BookingWizard_module_scss_1.default.label }, "Choose hotel"),
+                react_1.default.createElement(BookingWizardHotelSelector_1.BookingWizardHotelSelector, { onChange: setSelectedProperty, properties: properties, selectedProperty: selectedProperty })),
+            react_1.default.createElement("div", { className: BookingWizard_module_scss_1.default.divider })),
+        react_1.default.createElement(BookingWizardDateSelector_1.BookingWizardDateSelector, { onChange: setDate }),
+        react_1.default.createElement("div", { className: BookingWizard_module_scss_1.default.divider }),
+        react_1.default.createElement("div", { className: BookingWizard_module_scss_1.default.item },
+            react_1.default.createElement("label", { className: BookingWizard_module_scss_1.default.label }, "Guests"),
+            react_1.default.createElement(BookingWizardGuestSelector_1.BookingWizardGuestSelector, { onChange: setGuest })),
+        react_1.default.createElement("div", { className: BookingWizard_module_scss_1.default.action },
+            react_1.default.createElement(BEButton_1.default, { disabled: !isValid(), className: BookingWizard_module_scss_1.default.bookNowBtn, onClick: _onSubmit }, "Book Now"))));
+};
+exports.BookingWizardContent = BookingWizardContent;
+//# sourceMappingURL=BookingWizardContent.js.map

package/dist/src/components/generic/BookingWizard/BookingWizardContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BookingWizardContent.js","sourceRoot":"/","sources":["src/components/generic/BookingWizard/BookingWizardContent.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames';\nimport dayjs from 'dayjs';\nimport React, { useContext, useEffect, useState } from 'react';\n\nimport BEButton from '../BEButton';\nimport styles from './BookingWizard.module.scss';\nimport { BookingWizardContext, BookingWizardOnBooking } from './BookingWizardContext';\nimport { BookingWizardDateSelector } from './BookingWizardDateSelector/BookingWizardDateSelector';\nimport { BookingWizardGuestSelector } from './BookingWizardGuestSelector/BookingWizardGuestSelector';\nimport { BookingWizardHotelSelector } from './BookingWizardHotelSelector/BookingWizardHotelSelector';\n\nimport 'react-spring-bottom-sheet/dist/style.css';\nimport { BookingWizardProperty } from 'models/BookingWizard/BookingWizardProperty';\nimport { TBookingWizardProperties } from 'models/BookingWizard/BookingWizardTypes';\nimport RoomstayThemeEngine from 'providers/RoomstayThemeEngine';\n\nexport interface BookingWizardContentProps {\n    defaultColors: BookingWizardProperty['colors'];\n    properties: TBookingWizardProperties;\n    selectedProperty?: BookingWizardProperty;\n}\n\nexport const BookingWizardContent: React.FC<BookingWizardContentProps> = ({ properties, selectedProperty: defaultProperty, defaultColors }) => {\n    const bwContext = useContext(BookingWizardContext);\n\n    const [checkInDate, setCheckInDate] = useState<dayjs.Dayjs | null>(dayjs());\n    const [checkOutDate, setCheckOutDate] = useState<dayjs.Dayjs | null>(dayjs().add(1, 'days'));\n    const [adults, setAdults] = useState<number>(1);\n    const [children, setChildren] = useState<number>(0);\n    const [room, setRoom] = useState<number>(1);\n    const [selectedProperty, setSelectedProperty] = useState<BookingWizardProperty>(defaultProperty);\n\n    useEffect(() => {\n        if (selectedProperty?.colors) {\n            RoomstayThemeEngine.changeTheme(selectedProperty.colors);\n        } else if (defaultColors) {\n            RoomstayThemeEngine.changeTheme(defaultColors);\n        }\n    }, [selectedProperty]);\n\n    const setGuest = (guests: BookingWizardOnBooking['guests']) => {\n        setAdults(guests.adults);\n        setChildren(guests.children);\n        setRoom(guests.room);\n    };\n\n    const setDate = (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => {\n        setCheckInDate(startDate);\n        setCheckOutDate(endDate);\n    };\n\n    const isValid = () => {\n        if (!selectedProperty) return false;\n        if (!checkInDate) return false;\n        if (!checkOutDate) return false;\n        if (adults + children <= 0) return false;\n\n        return true;\n    };\n\n    const _onSubmit = () => {\n        if (!isValid()) return false;\n\n        // After passing validation, we pass the function up the chain for the engine\n        // Implementor to decide where the user should be redirected to\n        // This is to give the hotel team a chance to add tracking, or modify the request on their end.\n        bwContext.onSubmit?.({\n            id: selectedProperty?.id,\n            checkIn: checkInDate,\n            checkout: checkOutDate,\n            guests: {\n                adults,\n                children,\n                room,\n            },\n        });\n    };\n\n    return (\n        <div\n            className={classNames(styles.content, styles[`--${bwContext.layout}`], {\n                [styles['--vertical']]: bwContext.layout === 'button',\n                [styles.inline]: bwContext.type === 'inline',\n            })}\n        >\n            <>\n                <div className={styles.item}>\n                    <label className={styles.label}>Choose hotel</label>\n                    <BookingWizardHotelSelector onChange={setSelectedProperty} properties={properties} selectedProperty={selectedProperty} />\n                </div>\n                <div className={styles.divider} />\n            </>\n            <BookingWizardDateSelector onChange={setDate} />\n\n            <div className={styles.divider} />\n            <div className={styles.item}>\n                <label className={styles.label}>Guests</label>\n                <BookingWizardGuestSelector onChange={setGuest} />\n            </div>\n            <div className={styles.action}>\n                <BEButton disabled={!isValid()} className={styles.bookNowBtn} onClick={_onSubmit}>\n                    Book Now\n                </BEButton>\n            </div>\n        </div>\n    );\n};\n"]}

package/dist/src/components/generic/BookingWizard/BookingWizardContext.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import type { Placement } from '@popperjs/core';
+import * as dayjs from 'dayjs';
+import type ColorProfile from 'models/Client/Hotel/ColorProfile';
+import { EBookingWizardTheme } from './BookingWizard';
+export type BookingWizardLayout = 'vertical' | 'horizontal' | 'button';
+export type BookingWizardOverlayType = 'popup' | 'inline' | 'bottom-sheet';
+export type BookingWizardTheme = EBookingWizardTheme;
+export interface BookingWizardOnBooking {
+    id: string;
+    checkIn: dayjs.Dayjs;
+    checkout: dayjs.Dayjs;
+    guests: {
+        adults: number;
+        children: number;
+        room: number;
+    };
+}
+export interface BookingWizardContextType {
+    layout: BookingWizardLayout;
+    type: BookingWizardOverlayType;
+    theme: BookingWizardTheme;
+    className?: string;
+    style?: any;
+    color?: ColorProfile;
+    onSubmit?: (result: BookingWizardOnBooking) => void;
+    overlay?: {
+        offset?: [number, number];
+        placement?: Placement;
+        fallbackPlacements?: Placement;
+        dateOffset?: [number, number];
+    };
+}
+export declare const BookingWizardContext: import("react").Context<BookingWizardContextType>;
+export declare const useBookingWizard: () => BookingWizardContextType;

package/dist/src/components/generic/BookingWizard/BookingWizardContext.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBookingWizard = exports.BookingWizardContext = void 0;
+const react_1 = require("react");
+exports.BookingWizardContext = (0, react_1.createContext)(null);
+const useBookingWizard = () => (0, react_1.useContext)(exports.BookingWizardContext);
+exports.useBookingWizard = useBookingWizard;
+//# sourceMappingURL=BookingWizardContext.js.map

package/dist/src/components/generic/BookingWizard/BookingWizardContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BookingWizardContext.js","sourceRoot":"/","sources":["src/components/generic/BookingWizard/BookingWizardContext.ts"],"names":[],"mappings":";;;AAGA,iCAAkD;AAoCrC,QAAA,oBAAoB,GAAG,IAAA,qBAAa,EAA2B,IAAI,CAAC,CAAC;AAE3E,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,IAAA,kBAAU,EAAC,4BAAoB,CAAC,CAAC;AAA1D,QAAA,gBAAgB,oBAA0C","sourcesContent":["import type { Placement } from '@popperjs/core';\nimport * as dayjs from 'dayjs';\nimport type ColorProfile from 'models/Client/Hotel/ColorProfile';\nimport { createContext, useContext } from 'react';\nimport { EBookingWizardTheme } from './BookingWizard';\n\nexport type BookingWizardLayout = 'vertical' | 'horizontal' | 'button';\nexport type BookingWizardOverlayType = 'popup' | 'inline' | 'bottom-sheet';\nexport type BookingWizardTheme = EBookingWizardTheme;\n\nexport interface BookingWizardOnBooking {\n    id: string;\n    checkIn: dayjs.Dayjs;\n    checkout: dayjs.Dayjs;\n    guests: {\n        adults: number;\n        children: number;\n        room: number;\n    };\n}\n\nexport interface BookingWizardContextType {\n    layout: BookingWizardLayout;\n    type: BookingWizardOverlayType;\n    theme: BookingWizardTheme;\n    className?: string;\n    style?: any;\n    color?: ColorProfile;\n\n    onSubmit?: (result: BookingWizardOnBooking) => void;\n\n    overlay?: {\n        offset?: [number, number];\n        placement?: Placement;\n        fallbackPlacements?: Placement;\n        dateOffset?: [number, number];\n    };\n}\n\nexport const BookingWizardContext = createContext<BookingWizardContextType>(null);\n\nexport const useBookingWizard = () => useContext(BookingWizardContext);\n"]}

package/dist/src/components/generic/BookingWizard/BookingWizardDateSelector/BookingWizardDateSelector.d.ts

@@ -0,0 +1,7 @@
+import dayjs from 'dayjs';
+import React from 'react';
+export interface BookingWizardDateSelectorProps {
+    open?: boolean;
+    onChange?: (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => void;
+}
+export declare const BookingWizardDateSelector: React.FC<BookingWizardDateSelectorProps>;

package/dist/src/components/generic/BookingWizard/BookingWizardDateSelector/BookingWizardDateSelector.js

@@ -0,0 +1,146 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BookingWizardDateSelector = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const dayjs_1 = __importDefault(require("dayjs"));
+const react_1 = __importStar(require("react"));
+const AutoAutoHeight_1 = __importDefault(require("animations/AutoAutoHeight"));
+const BEButton_1 = __importDefault(require("components/generic/BEButton"));
+const DateRangePicker_1 = __importDefault(require("components/generic/DateRangePicker/DateRangePicker"));
+const Icon_1 = __importStar(require("components/generic/Icon/Icon"));
+const WindowSize_1 = require("hooks/WindowSize");
+const FloatingDateRangePicker_1 = __importDefault(require("../../DateRangePicker/FloatingDateRangePicker"));
+const Text_1 = __importDefault(require("../../Text"));
+const BookingWizard_module_scss_1 = __importDefault(require("../BookingWizard.module.scss"));
+const BookingWizardBottomSheet_1 = __importDefault(require("../BookingWizardBottomSheet/BookingWizardBottomSheet"));
+const BookingWizardContext_1 = require("../BookingWizardContext");
+const BookingWizardDateSelector_module_scss_1 = __importDefault(require("./BookingWizardDateSelector.module.scss"));
+const BookingWizard_1 = require("../BookingWizard");
+const BookingWizardDateSelector = (props) => {
+    const { onChange } = props;
+    const { overlay, theme, layout, type: overlayType } = (0, BookingWizardContext_1.useBookingWizard)();
+    const checkOutDatePickerRef = react_1.default.useRef(null);
+    const [startDate, setStartDate] = (0, react_1.useState)((0, dayjs_1.default)());
+    const [endDate, setEndDate] = (0, react_1.useState)((0, dayjs_1.default)().add(1, 'days'));
+    const [selectingStartDate, setSelectingStartDate] = (0, react_1.useState)(startDate);
+    const [selectingSEndDate, setSelectingEndDate] = (0, react_1.useState)(endDate);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [checkInWrapperRef, setCheckInWrapperRef] = react_1.default.useState(null);
+    const { isMobile } = (0, WindowSize_1.useWindowSize)();
+    let RowWrapper = react_1.default.Fragment;
+    const rowWrapperProps = {};
+    if (layout === 'button' || isMobile) {
+        RowWrapper = 'div';
+        rowWrapperProps.className = BookingWizard_module_scss_1.default.itemGroup;
+        rowWrapperProps.ref = (ref) => {
+            if (layout === 'button') {
+                setCheckInWrapperRef(ref);
+            }
+        };
+    }
+    const setDate = (startDate, endDate) => {
+        setStartDate(startDate);
+        setEndDate(endDate);
+    };
+    const _onCheckoutDateChange = (newEndDate) => {
+        if (props.onChange && onChange) {
+            props.onChange(startDate, newEndDate);
+        }
+        setEndDate(newEndDate);
+        if (newEndDate) {
+            setIsOpen(false);
+        }
+    };
+    const _toggleInlineDatePicker = () => {
+        var _a;
+        (_a = checkOutDatePickerRef === null || checkOutDatePickerRef === void 0 ? void 0 : checkOutDatePickerRef.current) === null || _a === void 0 ? void 0 : _a.toggle();
+        setIsOpen(!isOpen);
+    };
+    const _checkInDate = (date, disabledClass) => {
+        return (react_1.default.createElement("div", { className: disabledClass ? '' : BookingWizard_module_scss_1.default.item, onClick: _toggleInlineDatePicker },
+            react_1.default.createElement("label", { className: BookingWizardDateSelector_module_scss_1.default.label }, "Check-in"),
+            react_1.default.createElement(Text_1.default, { className: BookingWizardDateSelector_module_scss_1.default.date }, (date === null || date === void 0 ? void 0 : date.format('MMM DD')) || '-')));
+    };
+    const _checkOutDate = (date) => {
+        return (react_1.default.createElement("div", { className: BookingWizard_module_scss_1.default.item, onClick: _toggleInlineDatePicker },
+            react_1.default.createElement("label", { className: BookingWizardDateSelector_module_scss_1.default.label }, "Check-out"),
+            react_1.default.createElement(Text_1.default, { className: BookingWizardDateSelector_module_scss_1.default.date }, (date === null || date === void 0 ? void 0 : date.format('MMM DD')) || '-')));
+    };
+    const _combineDates = (checkIn, checkOut) => {
+        return (react_1.default.createElement("div", { onClick: _toggleInlineDatePicker },
+            react_1.default.createElement("label", { className: BookingWizardDateSelector_module_scss_1.default.label }, "Dates"),
+            react_1.default.createElement(Text_1.default, { className: BookingWizardDateSelector_module_scss_1.default.date }, `${(checkIn === null || checkIn === void 0 ? void 0 : checkIn.format('MMM DD')) || ''} - ${(checkOut === null || checkOut === void 0 ? void 0 : checkOut.format('MMM DD')) || ''}`)));
+    };
+    const showMultipleMonths = layout === 'horizontal' && !isMobile;
+    if (overlayType === 'inline') {
+        return (react_1.default.createElement("div", { className: (0, classnames_1.default)(BookingWizardDateSelector_module_scss_1.default.container, { [BookingWizardDateSelector_module_scss_1.default['--open']]: isOpen }) },
+            react_1.default.createElement(RowWrapper, Object.assign({}, rowWrapperProps),
+                _checkInDate(startDate),
+                react_1.default.createElement("div", { className: BookingWizard_module_scss_1.default.divider }),
+                _checkOutDate(endDate)),
+            react_1.default.createElement("div", { className: BookingWizardDateSelector_module_scss_1.default['inline-container'] },
+                react_1.default.createElement(AutoAutoHeight_1.default, { open: isOpen },
+                    react_1.default.createElement("div", { className: BookingWizardDateSelector_module_scss_1.default['inline-box'] },
+                        react_1.default.createElement(DateRangePicker_1.default, { selectedStartDate: startDate, selectedEndDate: endDate, onStartDateChanged: setStartDate, onEndDateChanged: _onCheckoutDateChange, theme: theme }))))));
+    }
+    if (overlayType === 'bottom-sheet') {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(RowWrapper, Object.assign({}, rowWrapperProps), !isMobile && layout === 'horizontal' ? (react_1.default.createElement("div", { className: BookingWizard_module_scss_1.default.item }, _combineDates(startDate, endDate))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                _checkInDate(startDate),
+                react_1.default.createElement("div", { className: BookingWizard_module_scss_1.default.divider }),
+                _checkOutDate(endDate)))),
+            react_1.default.createElement(BookingWizardBottomSheet_1.default, { className: (0, classnames_1.default)(BookingWizardDateSelector_module_scss_1.default.container, BookingWizardDateSelector_module_scss_1.default['bottom-sheet-container']), open: isOpen, onDismiss: () => setIsOpen(false), header: react_1.default.createElement("div", { className: BookingWizardDateSelector_module_scss_1.default.header },
+                    react_1.default.createElement(Text_1.default, null, "Choose dates"),
+                    " ",
+                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Close, onClick: () => setIsOpen(false) })) },
+                react_1.default.createElement("div", { className: BookingWizardDateSelector_module_scss_1.default['bottom-sheet-container-box'] },
+                    react_1.default.createElement(DateRangePicker_1.default, { selectedStartDate: startDate, selectedEndDate: endDate, onStartDateChanged: setSelectingStartDate, onEndDateChanged: setSelectingEndDate, theme: theme }),
+                    react_1.default.createElement(BEButton_1.default, { wide: true, className: BookingWizardDateSelector_module_scss_1.default.applyBtn, primary: true, filled: true, onClick: () => {
+                            setStartDate(selectingStartDate);
+                            setEndDate(selectingSEndDate);
+                            setIsOpen(false);
+                        } }, "Apply")))));
+    }
+    if (layout === 'horizontal' && theme === BookingWizard_1.EBookingWizardTheme.Specific && !isMobile) {
+        return (react_1.default.createElement(RowWrapper, Object.assign({}, rowWrapperProps),
+            react_1.default.createElement(FloatingDateRangePicker_1.default, { ref: checkOutDatePickerRef, container: checkInWrapperRef, startDate: startDate, endDate: endDate, selectedDateChanged: setDate, overlayOffset: overlay === null || overlay === void 0 ? void 0 : overlay.dateOffset, className: BookingWizard_module_scss_1.default.item, theme: theme, showMultipleMonths: showMultipleMonths, overlay: {
+                    placement: overlay === null || overlay === void 0 ? void 0 : overlay.placement,
+                    fallbackPlacements: overlay === null || overlay === void 0 ? void 0 : overlay.fallbackPlacements,
+                } }, _combineDates(startDate, endDate))));
+    }
+    return (react_1.default.createElement(RowWrapper, Object.assign({}, rowWrapperProps),
+        react_1.default.createElement(FloatingDateRangePicker_1.default, { ref: checkOutDatePickerRef, container: checkInWrapperRef, startDate: startDate, endDate: endDate, selectedDateChanged: setDate, overlayOffset: overlay === null || overlay === void 0 ? void 0 : overlay.dateOffset, theme: theme, showMultipleMonths: showMultipleMonths, className: BookingWizard_module_scss_1.default.item, overlay: {
+                placement: overlay === null || overlay === void 0 ? void 0 : overlay.placement,
+                fallbackPlacements: overlay === null || overlay === void 0 ? void 0 : overlay.fallbackPlacements,
+            } }, _checkInDate(startDate, true)),
+        react_1.default.createElement("div", { className: layout !== 'button' && !isMobile ? BookingWizard_module_scss_1.default.divider : '' }),
+        _checkOutDate(endDate)));
+};
+exports.BookingWizardDateSelector = BookingWizardDateSelector;
+//# sourceMappingURL=BookingWizardDateSelector.js.map

package/dist/src/components/generic/BookingWizard/BookingWizardDateSelector/BookingWizardDateSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BookingWizardDateSelector.js","sourceRoot":"/","sources":["src/components/generic/BookingWizard/BookingWizardDateSelector/BookingWizardDateSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames';\nimport dayjs from 'dayjs';\nimport React, { useState } from 'react';\n\nimport AutoAutoHeight from 'animations/AutoAutoHeight';\nimport BEButton from 'components/generic/BEButton';\nimport DateRangePicker from 'components/generic/DateRangePicker/DateRangePicker';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\nimport { useWindowSize } from 'hooks/WindowSize';\nimport FloatingDateRangePicker, { FloatingDateRangePickerHandle } from '../../DateRangePicker/FloatingDateRangePicker';\nimport Text from '../../Text';\nimport bookingWizardStyles from '../BookingWizard.module.scss';\nimport BookingWizardBottomSheet from '../BookingWizardBottomSheet/BookingWizardBottomSheet';\nimport { useBookingWizard } from '../BookingWizardContext';\nimport styles from './BookingWizardDateSelector.module.scss';\nimport { EBookingWizardTheme } from '../BookingWizard';\n\nexport interface BookingWizardDateSelectorProps {\n    open?: boolean;\n    onChange?: (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => void;\n}\n\nexport const BookingWizardDateSelector: React.FC<BookingWizardDateSelectorProps> = (props) => {\n    const { onChange } = props;\n\n    const { overlay, theme, layout, type: overlayType } = useBookingWizard();\n\n    const checkOutDatePickerRef = React.useRef<FloatingDateRangePickerHandle>(null);\n\n    const [startDate, setStartDate] = useState<dayjs.Dayjs | null>(dayjs());\n    const [endDate, setEndDate] = useState<dayjs.Dayjs | null>(dayjs().add(1, 'days'));\n    const [selectingStartDate, setSelectingStartDate] = useState<dayjs.Dayjs | null>(startDate);\n    const [selectingSEndDate, setSelectingEndDate] = useState<dayjs.Dayjs | null>(endDate);\n    const [isOpen, setIsOpen] = useState(false);\n    const [checkInWrapperRef, setCheckInWrapperRef] = React.useState(null);\n\n    const { isMobile } = useWindowSize();\n\n    let RowWrapper: any = React.Fragment;\n    const rowWrapperProps = {} as any;\n    if (layout === 'button' || isMobile) {\n        RowWrapper = 'div';\n        rowWrapperProps.className = bookingWizardStyles.itemGroup;\n        rowWrapperProps.ref = (ref: any) => {\n            if (layout === 'button') {\n                setCheckInWrapperRef(ref);\n            }\n        };\n    }\n\n    const setDate = (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => {\n        setStartDate(startDate);\n        setEndDate(endDate);\n    };\n\n    const _onCheckoutDateChange = (newEndDate: dayjs.Dayjs) => {\n        if (props.onChange && onChange) {\n            props.onChange(startDate, newEndDate);\n        }\n\n        setEndDate(newEndDate);\n        if (newEndDate) {\n            setIsOpen(false);\n        }\n    };\n\n    const _toggleInlineDatePicker = () => {\n        checkOutDatePickerRef?.current?.toggle();\n        setIsOpen(!isOpen);\n    };\n\n    const _checkInDate = (date?: dayjs.Dayjs, disabledClass?: boolean) => {\n        return (\n            <div className={disabledClass ? '' : bookingWizardStyles.item} onClick={_toggleInlineDatePicker}>\n                <label className={styles.label}>Check-in</label>\n                <Text className={styles.date}>{date?.format('MMM DD') || '-'}</Text>\n            </div>\n        );\n    };\n\n    const _checkOutDate = (date?: dayjs.Dayjs) => {\n        return (\n            <div className={bookingWizardStyles.item} onClick={_toggleInlineDatePicker}>\n                <label className={styles.label}>Check-out</label>\n                <Text className={styles.date}>{date?.format('MMM DD') || '-'}</Text>\n            </div>\n        );\n    };\n\n    const _combineDates = (checkIn?: dayjs.Dayjs, checkOut?: dayjs.Dayjs) => {\n        return (\n            <div onClick={_toggleInlineDatePicker}>\n                <label className={styles.label}>Dates</label>\n                <Text className={styles.date}>{`${checkIn?.format('MMM DD') || ''} - ${checkOut?.format('MMM DD') || ''}`}</Text>\n            </div>\n        );\n    };\n\n    const showMultipleMonths = layout === 'horizontal' && !isMobile;\n\n    if (overlayType === 'inline') {\n        return (\n            <div className={classNames(styles.container, { [styles['--open']]: isOpen })}>\n                <RowWrapper {...rowWrapperProps}>\n                    {_checkInDate(startDate)}\n                    <div className={bookingWizardStyles.divider} />\n                    {_checkOutDate(endDate)}\n                </RowWrapper>\n                <div className={styles['inline-container']}>\n                    <AutoAutoHeight open={isOpen}>\n                        <div className={styles['inline-box']}>\n                            <DateRangePicker\n                                selectedStartDate={startDate}\n                                selectedEndDate={endDate}\n                                onStartDateChanged={setStartDate}\n                                onEndDateChanged={_onCheckoutDateChange}\n                                theme={theme}\n                            />\n                        </div>\n                    </AutoAutoHeight>\n                </div>\n            </div>\n        );\n    }\n\n    if (overlayType === 'bottom-sheet') {\n        return (\n            <>\n                <RowWrapper {...rowWrapperProps}>\n                    {!isMobile && layout === 'horizontal' ? (\n                        <div className={bookingWizardStyles.item}>{_combineDates(startDate, endDate)}</div>\n                    ) : (\n                        <>\n                            {_checkInDate(startDate)}\n                            <div className={bookingWizardStyles.divider} />\n                            {_checkOutDate(endDate)}\n                        </>\n                    )}\n                </RowWrapper>\n                <BookingWizardBottomSheet\n                    className={classNames(styles.container, styles['bottom-sheet-container'])}\n                    open={isOpen}\n                    onDismiss={() => setIsOpen(false)}\n                    header={\n                        <div className={styles.header}>\n                            <Text>Choose dates</Text> <Icon icon={IconType.Close} onClick={() => setIsOpen(false)} />\n                        </div>\n                    }\n                >\n                    <div className={styles['bottom-sheet-container-box']}>\n                        <DateRangePicker\n                            selectedStartDate={startDate}\n                            selectedEndDate={endDate}\n                            onStartDateChanged={setSelectingStartDate}\n                            onEndDateChanged={setSelectingEndDate}\n                            theme={theme}\n                        />\n                        <BEButton\n                            wide\n                            className={styles.applyBtn}\n                            primary={true}\n                            filled={true}\n                            onClick={() => {\n                                setStartDate(selectingStartDate);\n                                setEndDate(selectingSEndDate);\n                                setIsOpen(false);\n                            }}\n                        >\n                            Apply\n                        </BEButton>\n                    </div>\n                </BookingWizardBottomSheet>\n            </>\n        );\n    }\n\n    if (layout === 'horizontal' && theme === EBookingWizardTheme.Specific && !isMobile) {\n        return (\n            <RowWrapper {...rowWrapperProps}>\n                <FloatingDateRangePicker\n                    ref={checkOutDatePickerRef}\n                    container={checkInWrapperRef}\n                    startDate={startDate}\n                    endDate={endDate}\n                    selectedDateChanged={setDate}\n                    overlayOffset={overlay?.dateOffset}\n                    className={bookingWizardStyles.item}\n                    theme={theme}\n                    showMultipleMonths={showMultipleMonths}\n                    overlay={{\n                        placement: overlay?.placement,\n                        fallbackPlacements: overlay?.fallbackPlacements,\n                    }}\n                >\n                    {_combineDates(startDate, endDate)}\n                </FloatingDateRangePicker>\n            </RowWrapper>\n        );\n    }\n\n    return (\n        <RowWrapper {...rowWrapperProps}>\n            <FloatingDateRangePicker\n                ref={checkOutDatePickerRef}\n                container={checkInWrapperRef}\n                startDate={startDate}\n                endDate={endDate}\n                selectedDateChanged={setDate}\n                overlayOffset={overlay?.dateOffset}\n                theme={theme}\n                showMultipleMonths={showMultipleMonths}\n                className={bookingWizardStyles.item}\n                overlay={{\n                    placement: overlay?.placement,\n                    fallbackPlacements: overlay?.fallbackPlacements,\n                }}\n            >\n                {_checkInDate(startDate, true)}\n            </FloatingDateRangePicker>\n            <div className={layout !== 'button' && !isMobile ? bookingWizardStyles.divider : ''} />\n            {_checkOutDate(endDate)}\n        </RowWrapper>\n    );\n};\n"]}

package/dist/src/components/generic/BookingWizard/BookingWizardGuestSelector/BookingWizardGuestSelector.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export interface BookingWizardGuestSelectorProps {
+    onChange?: ({ adults, children, room }: {
+        adults: number;
+        children: number;
+        room: number;
+    }) => void;
+}
+export declare const BookingWizardGuestSelector: FC<BookingWizardGuestSelectorProps>;

package/dist/src/components/generic/BookingWizard/BookingWizardGuestSelector/BookingWizardGuestSelector.js

@@ -0,0 +1,111 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BookingWizardGuestSelector = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const AutoAutoHeight_1 = __importDefault(require("animations/AutoAutoHeight"));
+const BEButton_1 = __importDefault(require("components/generic/BEButton"));
+const Icon_1 = __importStar(require("components/generic/Icon/Icon"));
+const NumberIncrement_1 = __importDefault(require("components/generic/NumberIncrement"));
+const Overlay_1 = require("components/generic/Overlay/Overlay");
+const Text_1 = __importDefault(require("components/generic/Text"));
+const BookingWizardContext_1 = require("../BookingWizardContext");
+const BookingWizardGuestSelector_module_scss_1 = __importDefault(require("./BookingWizardGuestSelector.module.scss"));
+const BookingWizardBottomSheet_1 = __importDefault(require("../BookingWizardBottomSheet/BookingWizardBottomSheet"));
+const StringHelper_1 = __importDefault(require("util/StringHelper"));
+const BookingWizardGuestSelector = ({ onChange }) => {
+    const { overlay, type: overlayType, theme } = (0, BookingWizardContext_1.useBookingWizard)();
+    const ref = (0, react_1.useRef)(null);
+    const targetRef = (0, react_1.useRef)(null);
+    const [adults, setAdults] = (0, react_1.useState)(1);
+    const [children, setChildren] = (0, react_1.useState)(0);
+    const [room, setRoom] = (0, react_1.useState)(1);
+    const [editingAdults, setEditingAdults] = (0, react_1.useState)(adults);
+    const [editingChildren, setEditingChildren] = (0, react_1.useState)(children);
+    const [editingRoom, setEditingRoom] = (0, react_1.useState)(room);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setEditingAdults(adults);
+    }, [adults]);
+    (0, react_1.useEffect)(() => {
+        setEditingChildren(children);
+    }, [children]);
+    const onApply = () => {
+        setAdults(editingAdults);
+        setChildren(editingChildren);
+        setRoom(editingRoom);
+        setOpen(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange({ adults: editingAdults, children: editingChildren, room: editingRoom });
+    };
+    const getValueAsText = () => {
+        const parts = [StringHelper_1.default.pluralWithCount(adults, 'Adult')];
+        if (children > 0) {
+            parts.push(StringHelper_1.default.pluralWithCount(children, 'Child'));
+        }
+        return parts.join(' - ');
+    };
+    const inner = (applyButton = true) => {
+        return (react_1.default.createElement("div", { className: BookingWizardGuestSelector_module_scss_1.default['popper--box'] },
+            react_1.default.createElement("div", { className: BookingWizardGuestSelector_module_scss_1.default['popper--content'], ref: ref },
+                react_1.default.createElement("div", { className: BookingWizardGuestSelector_module_scss_1.default.row },
+                    react_1.default.createElement(Text_1.default, null, StringHelper_1.default.plural(editingAdults, 'Adult')),
+                    react_1.default.createElement(NumberIncrement_1.default, { number: editingAdults, min: 1, max: 10, onChange: applyButton ? setEditingAdults : setAdults })),
+                react_1.default.createElement("div", { className: BookingWizardGuestSelector_module_scss_1.default.row },
+                    react_1.default.createElement(Text_1.default, null, StringHelper_1.default.plural(editingChildren, 'Child')),
+                    react_1.default.createElement(NumberIncrement_1.default, { number: editingChildren, min: 0, max: 10, onChange: applyButton ? setEditingChildren : setChildren })),
+                react_1.default.createElement("div", { className: BookingWizardGuestSelector_module_scss_1.default.row },
+                    react_1.default.createElement(Text_1.default, null, StringHelper_1.default.plural(editingRoom, 'Room')),
+                    react_1.default.createElement(NumberIncrement_1.default, { number: editingRoom, min: 1, max: 10, onChange: applyButton ? setEditingRoom : setRoom })),
+                applyButton ? (react_1.default.createElement("div", { className: BookingWizardGuestSelector_module_scss_1.default['popper--action'] },
+                    react_1.default.createElement(BEButton_1.default, { wide: overlayType === 'bottom-sheet', className: BookingWizardGuestSelector_module_scss_1.default.applyBtn, onClick: onApply }, "Apply"))) : null)));
+    };
+    const content = () => {
+        if (overlayType === 'inline') {
+            return (react_1.default.createElement("div", { className: BookingWizardGuestSelector_module_scss_1.default.popper },
+                react_1.default.createElement(AutoAutoHeight_1.default, { open: open }, inner(false))));
+        }
+        if (overlayType === 'bottom-sheet') {
+            return (react_1.default.createElement(BookingWizardBottomSheet_1.default, { className: (0, classnames_1.default)(BookingWizardGuestSelector_module_scss_1.default.container, BookingWizardGuestSelector_module_scss_1.default['--bottom-sheet']), open: open, onDismiss: () => setOpen(false), header: react_1.default.createElement("div", { className: BookingWizardGuestSelector_module_scss_1.default.header },
+                    react_1.default.createElement(Text_1.default, null, "How many guests?"),
+                    " ",
+                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Close, onClick: () => setOpen(false) })) },
+                react_1.default.createElement("div", { className: BookingWizardGuestSelector_module_scss_1.default.popper },
+                    inner(),
+                    " ")));
+        }
+        return (react_1.default.createElement(Overlay_1.Overlay, { offset: overlay === null || overlay === void 0 ? void 0 : overlay.offset, usePortal: false, followElement: targetRef.current, placement: overlay === null || overlay === void 0 ? void 0 : overlay.placement, fallbackPlacements: overlay === null || overlay === void 0 ? void 0 : overlay.fallbackPlacements, strategy: 'absolute', open: open, onClose: () => setOpen === null || setOpen === void 0 ? void 0 : setOpen(!open), className: BookingWizardGuestSelector_module_scss_1.default.popper, containerClassName: BookingWizardGuestSelector_module_scss_1.default['custom-overlay'] }, inner()));
+    };
+    return (react_1.default.createElement("div", { ref: targetRef, className: (0, classnames_1.default)(BookingWizardGuestSelector_module_scss_1.default.container, { [BookingWizardGuestSelector_module_scss_1.default['--inline']]: overlayType === 'inline', [BookingWizardGuestSelector_module_scss_1.default['--open']]: open }) },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(BookingWizardGuestSelector_module_scss_1.default['container--search']), onClick: () => setOpen === null || setOpen === void 0 ? void 0 : setOpen(!open) },
+            react_1.default.createElement(Text_1.default, { className: BookingWizardGuestSelector_module_scss_1.default['text-display'] }, getValueAsText()),
+            react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown })),
+        content()));
+};
+exports.BookingWizardGuestSelector = BookingWizardGuestSelector;
+//# sourceMappingURL=BookingWizardGuestSelector.js.map

package/dist/src/components/generic/BookingWizard/BookingWizardGuestSelector/BookingWizardGuestSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BookingWizardGuestSelector.js","sourceRoot":"/","sources":["src/components/generic/BookingWizard/BookingWizardGuestSelector/BookingWizardGuestSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames';\nimport React, { FC, useEffect, useRef, useState } from 'react';\n\nimport AutoAutoHeight from 'animations/AutoAutoHeight';\nimport BEButton from 'components/generic/BEButton';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\nimport NumberIncrement from 'components/generic/NumberIncrement';\nimport { Overlay } from 'components/generic/Overlay/Overlay';\nimport Text from 'components/generic/Text';\nimport { useBookingWizard } from '../BookingWizardContext';\nimport styles from './BookingWizardGuestSelector.module.scss';\nimport BookingWizardBottomSheet from '../BookingWizardBottomSheet/BookingWizardBottomSheet';\nimport StringHelper from 'util/StringHelper';\n\nexport interface BookingWizardGuestSelectorProps {\n    onChange?: ({ adults, children, room }: { adults: number; children: number; room: number }) => void;\n}\n\nexport const BookingWizardGuestSelector: FC<BookingWizardGuestSelectorProps> = ({ onChange }) => {\n    const { overlay, type: overlayType, theme } = useBookingWizard();\n\n    const ref = useRef(null);\n    const targetRef = useRef(null);\n\n    const [adults, setAdults] = useState(1);\n    const [children, setChildren] = useState(0);\n    const [room, setRoom] = useState(1);\n    const [editingAdults, setEditingAdults] = useState(adults);\n    const [editingChildren, setEditingChildren] = useState(children);\n    const [editingRoom, setEditingRoom] = useState(room);\n\n    const [open, setOpen] = useState(false);\n\n    useEffect(() => {\n        setEditingAdults(adults);\n    }, [adults]);\n\n    useEffect(() => {\n        setEditingChildren(children);\n    }, [children]);\n\n    const onApply = () => {\n        setAdults(editingAdults);\n        setChildren(editingChildren);\n        setRoom(editingRoom);\n        setOpen(false);\n        onChange?.({ adults: editingAdults, children: editingChildren, room: editingRoom });\n    };\n\n    const getValueAsText = () => {\n        const parts = [StringHelper.pluralWithCount(adults, 'Adult')];\n\n        if (children > 0) {\n            parts.push(StringHelper.pluralWithCount(children, 'Child'));\n        }\n\n        return parts.join(' - ');\n    };\n\n    const inner = (applyButton = true) => {\n        return (\n            <div className={styles['popper--box']}>\n                <div className={styles['popper--content']} ref={ref}>\n                    <div className={styles.row}>\n                        <Text>{StringHelper.plural(editingAdults, 'Adult')}</Text>\n                        <NumberIncrement number={editingAdults} min={1} max={10} onChange={applyButton ? setEditingAdults : setAdults} />\n                    </div>\n                    <div className={styles.row}>\n                        <Text>{StringHelper.plural(editingChildren, 'Child')}</Text>\n                        <NumberIncrement number={editingChildren} min={0} max={10} onChange={applyButton ? setEditingChildren : setChildren} />\n                    </div>\n                    <div className={styles.row}>\n                        <Text>{StringHelper.plural(editingRoom, 'Room')}</Text>\n                        <NumberIncrement number={editingRoom} min={1} max={10} onChange={applyButton ? setEditingRoom : setRoom} />\n                    </div>\n                    {applyButton ? (\n                        <div className={styles['popper--action']}>\n                            <BEButton wide={overlayType === 'bottom-sheet'} className={styles.applyBtn} onClick={onApply}>\n                                Apply\n                            </BEButton>\n                        </div>\n                    ) : null}\n                </div>\n            </div>\n        );\n    };\n\n    const content = () => {\n        if (overlayType === 'inline') {\n            return (\n                <div className={styles.popper}>\n                    <AutoAutoHeight open={open}>{inner(false)}</AutoAutoHeight>\n                </div>\n            );\n        }\n\n        if (overlayType === 'bottom-sheet') {\n            return (\n                <BookingWizardBottomSheet\n                    className={classNames(styles.container, styles['--bottom-sheet'])}\n                    open={open}\n                    onDismiss={() => setOpen(false)}\n                    header={\n                        <div className={styles.header}>\n                            <Text>How many guests?</Text> <Icon icon={IconType.Close} onClick={() => setOpen(false)} />\n                        </div>\n                    }\n                >\n                    <div className={styles.popper}>{inner()} </div>\n                </BookingWizardBottomSheet>\n            );\n        }\n\n        return (\n            <Overlay\n                offset={overlay?.offset}\n                usePortal={false}\n                followElement={targetRef.current}\n                placement={overlay?.placement}\n                fallbackPlacements={overlay?.fallbackPlacements}\n                strategy={'absolute'}\n                open={open}\n                onClose={() => setOpen?.(!open)}\n                className={styles.popper}\n                containerClassName={styles['custom-overlay']}\n            >\n                {inner()}\n            </Overlay>\n        );\n    };\n\n    return (\n        <div ref={targetRef} className={classNames(styles.container, { [styles['--inline']]: overlayType === 'inline', [styles['--open']]: open })}>\n            <div className={classNames(styles['container--search'])} onClick={() => setOpen?.(!open)}>\n                <Text className={styles['text-display']}>{getValueAsText()}</Text>\n\n                <Icon icon={IconType.Dropdown} />\n            </div>\n\n            {content()}\n        </div>\n    );\n};\n"]}

package/dist/src/components/generic/BookingWizard/BookingWizardHotelSelector/BookingWizardHotelSelector.d.ts

@@ -0,0 +1,10 @@
+import { BookingWizardProperty } from 'models/BookingWizard/BookingWizardProperty';
+import { TBookingWizardProperties } from 'models/BookingWizard/BookingWizardTypes';
+interface BookingWizardHotelSelectorProps {
+    disabled?: boolean;
+    selectedProperty?: BookingWizardProperty;
+    properties: TBookingWizardProperties;
+    onChange?: (hotel: BookingWizardProperty | null) => void;
+}
+export declare const BookingWizardHotelSelector: (props: BookingWizardHotelSelectorProps) => JSX.Element;
+export {};