@roomstay/frontend 2.6.59 → 2.6.61-0

package/dist/src/engines/InlineRoomMiniEngine/InlineRoomMiniEngine.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineRoomMiniEngine.js","sourceRoot":"/","sources":["src/engines/InlineRoomMiniEngine/InlineRoomMiniEngine.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,qDAAyF;AACzF,4GAA+G;AAE/G,0FAAkE;AAMlE,MAAa,oBAAqB,SAAQ,uBAAsC;IAG5E,YAAY,gBAA6B,EAAE,QAAgB,EAAE,MAAmC;QAC5F,KAAK,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,MAAM,GAAG,gCAAmB,CAAC,MAAM,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC7B,CAAC;IAEM,WAAW;QACd,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IAEe,MAAM;;YAClB,IAAA,+DAAiC,EAAC,6BAAmB,CAAC,4BAA4B,CAAC,KAAK,EAAE,oBAAoB,CAAC,EAAE,IAAI,CAAC,CAAC;QAC3H,CAAC;KAAA;CACJ;AAhBD,oDAgBC","sourcesContent":["import { BaseEngine, BaseEngineConfig, BookingEngineSource } from '@/engines/BaseEngine';\nimport { renderInlineRoomMiniEngineElement } from '@/engines/InlineRoomMiniEngine/InlineRoomMiniEngineElement';\nimport { ConfigCompany } from '@/models/Client/Hotel/Company';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\n\nexport interface InlineRoomMiniEngineConfig extends BaseEngineConfig {\n    company: ConfigCompany;\n}\n\nexport class InlineRoomMiniEngine extends BaseEngine<InlineRoomMiniEngineConfig> {\n    private roomCode: string;\n\n    constructor(bookingContainer: HTMLElement, roomCode: string, config?: InlineRoomMiniEngineConfig) {\n        super(bookingContainer, config);\n        this.source = BookingEngineSource.Inline;\n        this.roomCode = roomCode;\n    }\n\n    public getRoomCode(): string {\n        return this.roomCode;\n    }\n\n    protected async render() {\n        renderInlineRoomMiniEngineElement(RoomstayThemeEngine.createElementOrReuseExisting('div', 'inline-mini-engine'), this);\n    }\n}\n"]}
+{"version":3,"file":"InlineRoomMiniEngine.js","sourceRoot":"/","sources":["src/engines/InlineRoomMiniEngine/InlineRoomMiniEngine.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAEA,qDAAyF;AACzF,4GAA+G;AAE/G,0FAAkE;AASlE,MAAa,oBAAqB,SAAQ,uBAAsC;IAG5E,YAAY,gBAA6B,EAAE,QAAgB,EAAE,MAAmC;QAC5F,KAAK,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,MAAM,GAAG,gCAAmB,CAAC,MAAM,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC7B,CAAC;IAEM,WAAW;QACd,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IAEe,MAAM;;YAClB,IAAA,+DAAiC,EAAC,6BAAmB,CAAC,4BAA4B,CAAC,KAAK,EAAE,oBAAoB,CAAC,EAAE,IAAI,CAAC,CAAC;QAC3H,CAAC;KAAA;CACJ;AAhBD,oDAgBC","sourcesContent":["import { ReactNode } from 'react';\n\nimport { BaseEngine, BaseEngineConfig, BookingEngineSource } from '@/engines/BaseEngine';\nimport { renderInlineRoomMiniEngineElement } from '@/engines/InlineRoomMiniEngine/InlineRoomMiniEngineElement';\nimport { ConfigCompany } from '@/models/Client/Hotel/Company';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\n\nexport interface InlineRoomMiniEngineConfig extends BaseEngineConfig {\n    company: ConfigCompany;\n    layout?: 'default' | 'card'; // Added layout, Default: default\n    policy?: ReactNode;\n    priceDescription?: ReactNode;\n}\n\nexport class InlineRoomMiniEngine extends BaseEngine<InlineRoomMiniEngineConfig> {\n    private roomCode: string;\n\n    constructor(bookingContainer: HTMLElement, roomCode: string, config?: InlineRoomMiniEngineConfig) {\n        super(bookingContainer, config);\n        this.source = BookingEngineSource.Inline;\n        this.roomCode = roomCode;\n    }\n\n    public getRoomCode(): string {\n        return this.roomCode;\n    }\n\n    protected async render() {\n        renderInlineRoomMiniEngineElement(RoomstayThemeEngine.createElementOrReuseExisting('div', 'inline-mini-engine'), this);\n    }\n}\n"]}

package/dist/src/engines/InlineRoomMiniEngine/InlineRoomMiniEngineElement.d.ts

@@ -1,6 +1,34 @@
+import React from 'react';
 import type { InlineRoomMiniEngine } from './InlineRoomMiniEngine';
 export interface InlineRoomMiniEngineElementProps {
     engine: InlineRoomMiniEngine;
 }
 export default function InlineRoomMiniEngineElement(props: InlineRoomMiniEngineElementProps): JSX.Element;
 export declare const renderInlineRoomMiniEngineElement: (container: Element, engine: InlineRoomMiniEngine) => void;
+export declare const GuestSelectorCustom: ({ maxAdults, maxChildren, maxInfants, defaultValue, onChange, disableChild, showInfants, disableRoom, applyButton, promoCodeConfig, }: {
+    maxAdults?: number | undefined;
+    maxChildren?: number | undefined;
+    maxInfants?: number | undefined;
+    defaultValue?: {
+        adults?: number | undefined;
+        children?: number | undefined;
+        infants?: number | undefined;
+        room?: number | undefined;
+    } | undefined;
+    onChange?: ((params: {
+        adults: number;
+        children: number;
+        infants: number;
+        room: number;
+    }) => void) | undefined;
+    disableChild?: boolean | undefined;
+    showInfants?: boolean | undefined;
+    disableRoom?: boolean | undefined;
+    applyButton?: boolean | undefined;
+    promoCodeConfig?: {
+        promoCode: string;
+        setPromoCode: React.Dispatch<React.SetStateAction<string>>;
+        onChange: (val: any) => void;
+        valid?: boolean | undefined;
+    } | undefined;
+}) => JSX.Element;

package/dist/src/engines/InlineRoomMiniEngine/InlineRoomMiniEngineElement.js

@@ -35,9 +35,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderInlineRoomMiniEngineElement = void 0;
+exports.GuestSelectorCustom = exports.renderInlineRoomMiniEngineElement = void 0;
 const contexts_1 = require("../../contexts/index.js");
 const hooks_1 = require("../../hooks/index.js");
+const classnames_1 = __importDefault(require("classnames"));
 const ErrorContext_1 = require("contexts/ErrorContext");
 const NotificationContext_1 = require("contexts/NotificationContext");
 const dayjs_1 = __importDefault(require("dayjs"));
@@ -54,6 +55,7 @@ const BookNowPayLaterInfoBlock_1 = require("../../components/generic/BookNowPayL
 const FloatingDatePicker_1 = __importDefault(require("../../components/generic/date/FloatingDatePicker"));
 const Icon_1 = __importStar(require("../../components/generic/Icon/Icon"));
 const LargeLoader_1 = __importDefault(require("../../components/generic/loader/LargeLoader"));
+const NumberIncrement_1 = __importDefault(require("../../components/generic/NumberIncrement"));
 const Overlay_1 = require("../../components/generic/Overlay/Overlay");
 const PromoCodeInput_1 = __importDefault(require("../../components/generic/PromoCodeInput"));
 const Select_1 = require("../../components/generic/Select/Select");
@@ -70,13 +72,19 @@ const RoomstayThemeEngine_1 = __importDefault(require("../../providers/RoomstayT
 const Color_1 = require("../../util/Color");
 const DataLayer_1 = __importStar(require("../../util/DataLayer"));
 const StringHelper_1 = __importDefault(require("../../util/StringHelper"));
+const InlineRoomMiniEngine_module_scss_1 = __importDefault(require("./InlineRoomMiniEngine.module.scss"));
 function InlineRoomMiniEngineElement(props) {
-    var _a;
+    var _a, _b, _c;
+    const { layout = 'default', policy, priceDescription } = props.engine.getConfig();
+    const isCardLayout = layout === 'card';
     const { hotel } = (0, hooks_1.useCurrentHotel)();
     const { memberNumber } = (0, useSignedInMember_1.useSignedInMember)();
     const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
     const ccx = (0, react_1.useContext)(contexts_1.CompanyContext);
     const row = basketContext.currentBasketRows[0];
+    if (row) {
+        row.setRoomCode(props.engine.getRoomCode());
+    }
     const [isLoading, setLoading] = (0, react_1.useState)(true);
     const [ranFirstLoad, setRanFirstLoad] = (0, react_1.useState)(false);
     const [rooms, setRooms] = (0, react_1.useState)([]);
@@ -155,6 +163,7 @@ function InlineRoomMiniEngineElement(props) {
                 numChildren: row === null || row === void 0 ? void 0 : row.getChildren(),
                 numRooms: 1,
                 promoCode: promoCode,
+                roomCode: props.engine.getRoomCode(),
             };
             const eventRooms = (_f = rooms === null || rooms === void 0 ? void 0 : rooms.map((room) => {
                 var _a, _b;
@@ -203,7 +212,9 @@ function InlineRoomMiniEngineElement(props) {
             DataLayer_1.default.instance.sendInteraction('Guests', DataLayer_1.InteractionType.NUMBER_INPUT, DataLayer_1.InteractionStep.ROOMS);
             row.setChildren(children);
         }
-        basketContext.updateBasketRow(row);
+        if (!isCardLayout) {
+            basketContext.updateBasketRow(row);
+        }
     };
     const updateDateValues = (startDate, endDate) => {
         if (startDate && endDate) {
@@ -219,9 +230,12 @@ function InlineRoomMiniEngineElement(props) {
     }
     const isCompact = bounds.width < 1000 ? '--compact' : '';
     const findRoomsOnClick = () => __awaiter(this, void 0, void 0, function* () {
-        var _b;
+        var _d;
+        if (isCardLayout) {
+            basketContext.updateBasketRow(row);
+        }
         setLoading(true);
-        setRooms((_b = (yield BookingAPI_1.default.Availability.fetchAvailabilityData(row, hotel === null || hotel === void 0 ? void 0 : hotel.hotelID, memberNumber))) === null || _b === void 0 ? void 0 : _b.filter((room) => room.code === props.engine.getRoomCode()));
+        setRooms((_d = (yield BookingAPI_1.default.Availability.fetchAvailabilityData(row, hotel === null || hotel === void 0 ? void 0 : hotel.hotelID, memberNumber))) === null || _d === void 0 ? void 0 : _d.filter((room) => room.code === props.engine.getRoomCode()));
         setLoading(false);
     });
     const getButtonLabelHandler = () => {
@@ -233,6 +247,12 @@ function InlineRoomMiniEngineElement(props) {
     const updateNumberOfChildrenOnChange = (value) => {
         updatePeopleValues({ children: +value });
     };
+    const defaultGuestValue = {
+        adults: (_a = row === null || row === void 0 ? void 0 : row.getAdults()) !== null && _a !== void 0 ? _a : 1,
+        children: (_b = row === null || row === void 0 ? void 0 : row.getChildren()) !== null && _b !== void 0 ? _b : 0,
+        infants: 0,
+        room: 1,
+    };
     const updatePromoCode = (code) => {
         DataLayer_1.default.instance.sendInteraction('Promo Code updated', DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.ROOMS);
         if (row) {
@@ -272,39 +292,98 @@ function InlineRoomMiniEngineElement(props) {
     const changePromoCode = (val) => {
         updatePromoCode(val);
     };
-    const maxOccupancy = (_a = hotel === null || hotel === void 0 ? void 0 : hotel.maxOccupancy) !== null && _a !== void 0 ? _a : 1;
+    const maxOccupancy = (_c = hotel === null || hotel === void 0 ? void 0 : hotel.maxOccupancy) !== null && _c !== void 0 ? _c : 1;
+    const DatePickerSelector = () => {
+        const inner = () => {
+            if (isCardLayout) {
+                return (react_1.default.createElement("div", { className: (0, classnames_1.default)('u-cursor-pointer', InlineRoomMiniEngine_module_scss_1.default['rs-inline-filter-item-dates-inner']) },
+                    react_1.default.createElement("div", { className: (0, classnames_1.default)(InlineRoomMiniEngine_module_scss_1.default['card']) },
+                        react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['image'] },
+                            react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Calendar })),
+                        react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['content'] },
+                            react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['title'], type: Text_1.TextType.Body }, t(Translation_1.Translation.Misc.CheckIn)),
+                            react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['sub-title'], type: Text_1.TextType.Body, color: Color_1.Color.Navy }, (row === null || row === void 0 ? void 0 : row.getArrivalDate()) ? row.getArrivalDate() : t(Translation_1.Translation.Misc.CheckInPlaceHolder)))),
+                    react_1.default.createElement("div", { className: (0, classnames_1.default)(InlineRoomMiniEngine_module_scss_1.default['card']) },
+                        react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['image'] },
+                            react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Calendar })),
+                        react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['content'] },
+                            react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['title'], type: Text_1.TextType.Body }, t(Translation_1.Translation.Misc.CheckOut)),
+                            react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['sub-title'] }, (row === null || row === void 0 ? void 0 : row.getDepartureDate()) ? row.getDepartureDate() : t(Translation_1.Translation.Misc.CheckOutPlaceHolder))))));
+            }
+            else {
+                return (react_1.default.createElement("div", { className: "u-flex align-items-center justify-content-center u-w-100@xl- u-cursor-pointer" },
+                    react_1.default.createElement(Text_1.default, { color: (row === null || row === void 0 ? void 0 : row.getArrivalDate()) ? Color_1.Color.Accent : Color_1.Color.Graphite, className: "u-mw-75 u-align-center", bold: !!(row === null || row === void 0 ? void 0 : row.getArrivalDate()) },
+                        react_1.default.createElement("span", null, (row === null || row === void 0 ? void 0 : row.getArrivalDate()) ? row.getArrivalDate() : 'Arrival Date')),
+                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2 }),
+                    react_1.default.createElement(Text_1.default, { color: (row === null || row === void 0 ? void 0 : row.getDepartureDate()) ? Color_1.Color.Accent : Color_1.Color.Graphite, className: "u-marg-right u-mw-75 u-align-center", bold: !!(row === null || row === void 0 ? void 0 : row.getDepartureDate()) },
+                        react_1.default.createElement("span", null, (row === null || row === void 0 ? void 0 : row.getDepartureDate()) ? row.getDepartureDate() : 'Departure Date'))));
+            }
+        };
+        return (react_1.default.createElement(FloatingDatePicker_1.default, { startDate: row === null || row === void 0 ? void 0 : row.getStartDate(), selectedDateChanged: updateDateValues, className: (0, classnames_1.default)('rs-inline-filter-item-dates', {
+                'u-w-100@xl- room-builder-progress--value u-marg-left--none ': !isCardLayout,
+                [InlineRoomMiniEngine_module_scss_1.default['rs-inline-filter-item-dates']]: isCardLayout,
+            }) },
+            react_1.default.createElement(Tooltip_1.default, { title: t(Translation_1.Translation.Step.Date.SelectArrivalAndDepartureDatesByClickingHere), wrapperClasses: "u-w-100@xl-" }, inner())));
+    };
+    const GuestSelector = () => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (isCardLayout) {
+            const numChildren = ((_a = row === null || row === void 0 ? void 0 : row.getChildren) === null || _a === void 0 ? void 0 : _a.call(row)) || 0;
+            const maxAdults = maxOccupancy - numChildren;
+            const maxChildren = maxOccupancy + 1 - (((_b = row === null || row === void 0 ? void 0 : row.getAdults) === null || _b === void 0 ? void 0 : _b.call(row)) || 0);
+            return (react_1.default.createElement(exports.GuestSelectorCustom, { maxAdults: maxAdults, maxChildren: maxChildren, onChange: (newValue) => {
+                    updatePeopleValues({
+                        adults: +newValue.adults,
+                        children: +newValue.children,
+                    });
+                }, disableChild: false, showInfants: false, disableRoom: true, applyButton: false, defaultValue: defaultGuestValue, promoCodeConfig: {
+                    promoCode: (_c = basketContext.selectedBasketRow) === null || _c === void 0 ? void 0 : _c.getPromoCode(),
+                    setPromoCode,
+                    onChange: changePromoCode,
+                    valid: ((_d = basketContext.selectedBasketRow) === null || _d === void 0 ? void 0 : _d.getPromoCodeStatus()) !== 'new' ? ((_e = basketContext.selectedBasketRow) === null || _e === void 0 ? void 0 : _e.getPromoCodeStatus()) === 'valid' : undefined,
+                } }));
+        }
+        else {
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(Tooltip_1.default, { title: t(Translation_1.Translation.Step.Date.UpdateAdults), wrapperClasses: "u-w-100@xl- rs-inline-filter-item-adult" },
+                    react_1.default.createElement("div", { className: "room-builder-progress--value --mw-l u-flex justify-content-center " },
+                        react_1.default.createElement(Select_1.Select, { nativeOnMobile: true, options: [...Array(maxOccupancy - ((row === null || row === void 0 ? void 0 : row.getChildren()) ? row.getChildren() : 0))].map((v, value) => {
+                                value += 1;
+                                return {
+                                    text: StringHelper_1.default.pluralWithDictAndCount(value, Translation_1.Translation.Step.Date.Adult, t),
+                                    value: value.toString(),
+                                };
+                            }), value: (_f = row === null || row === void 0 ? void 0 : row.getAdults()) === null || _f === void 0 ? void 0 : _f.toString(), onChange: updateNumberOfAdultsOnChange, keyName: "value", labelName: "text" }))),
+                react_1.default.createElement(Tooltip_1.default, { title: t(Translation_1.Translation.Step.Date.UpdateChildren), wrapperClasses: "u-w-100@xl- rs-inline-filter-item-children" },
+                    react_1.default.createElement("div", { className: "room-builder-progress--value --mw-l u-flex justify-content-center" },
+                        react_1.default.createElement(Select_1.Select, { nativeOnMobile: true, options: [...Array(maxOccupancy + 1 - ((row === null || row === void 0 ? void 0 : row.getAdults()) ? row.getAdults() : 0))].map((v, value) => {
+                                return {
+                                    text: StringHelper_1.default.pluralWithDictAndCount(value, Translation_1.Translation.Step.Date.Child, t),
+                                    value: value.toString(),
+                                };
+                            }), value: (_g = row === null || row === void 0 ? void 0 : row.getChildren()) === null || _g === void 0 ? void 0 : _g.toString(), onChange: updateNumberOfChildrenOnChange, keyName: "value", labelName: "text" })))));
+        }
+    };
     return (0, react_1.useMemo)(() => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { className: `room-builder-progress ${isCompact} rs-inline-container` },
-                react_1.default.createElement("div", { className: "u-flex w-100 flex-wrap room-builder-progress--item --current rs-inline-filter", ref: ref },
-                    react_1.default.createElement("div", { className: "u-flex u-flex-align-center flex-wrap flex-row u-w-100@xl-" },
-                        react_1.default.createElement(FloatingDatePicker_1.default, { startDate: row === null || row === void 0 ? void 0 : row.getStartDate(), selectedDateChanged: updateDateValues, className: "u-w-100@xl- room-builder-progress--value u-marg-left--none rs-inline-filter-item-dates" },
-                            react_1.default.createElement(Tooltip_1.default, { title: t(Translation_1.Translation.Step.Date.SelectArrivalAndDepartureDatesByClickingHere), wrapperClasses: "u-w-100@xl-" },
-                                react_1.default.createElement("div", { className: "u-flex align-items-center justify-content-center u-w-100@xl- u-cursor-pointer" },
-                                    react_1.default.createElement(Text_1.default, { color: (row === null || row === void 0 ? void 0 : row.getArrivalDate()) ? Color_1.Color.Accent : Color_1.Color.Graphite, className: "u-mw-75 u-align-center", bold: !!(row === null || row === void 0 ? void 0 : row.getArrivalDate()) },
-                                        react_1.default.createElement("span", null, (row === null || row === void 0 ? void 0 : row.getArrivalDate()) ? row.getArrivalDate() : 'Arrival Date')),
-                                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2 }),
-                                    react_1.default.createElement(Text_1.default, { color: (row === null || row === void 0 ? void 0 : row.getDepartureDate()) ? Color_1.Color.Accent : Color_1.Color.Graphite, className: "u-marg-right u-mw-75 u-align-center", bold: !!(row === null || row === void 0 ? void 0 : row.getDepartureDate()) },
-                                        react_1.default.createElement("span", null, (row === null || row === void 0 ? void 0 : row.getDepartureDate()) ? row.getDepartureDate() : 'Departure Date'))))),
-                        react_1.default.createElement(Tooltip_1.default, { title: t(Translation_1.Translation.Step.Date.UpdateAdults), wrapperClasses: "u-w-100@xl- rs-inline-filter-item-adult" },
-                            react_1.default.createElement("div", { className: "room-builder-progress--value --mw-l u-flex justify-content-center " },
-                                react_1.default.createElement(Select_1.Select, { nativeOnMobile: true, options: [...Array(maxOccupancy - ((row === null || row === void 0 ? void 0 : row.getChildren()) ? row.getChildren() : 0))].map((v, value) => {
-                                        value += 1;
-                                        return {
-                                            text: StringHelper_1.default.pluralWithDictAndCount(value, Translation_1.Translation.Step.Date.Adult, t),
-                                            value: value.toString(),
-                                        };
-                                    }), value: (_a = row === null || row === void 0 ? void 0 : row.getAdults()) === null || _a === void 0 ? void 0 : _a.toString(), onChange: updateNumberOfAdultsOnChange, keyName: "value", labelName: "text" }))),
-                        react_1.default.createElement(Tooltip_1.default, { title: t(Translation_1.Translation.Step.Date.UpdateChildren), wrapperClasses: "u-w-100@xl- rs-inline-filter-item-children" },
-                            react_1.default.createElement("div", { className: "room-builder-progress--value --mw-l u-flex justify-content-center" },
-                                react_1.default.createElement(Select_1.Select, { nativeOnMobile: true, options: [...Array(maxOccupancy + 1 - ((row === null || row === void 0 ? void 0 : row.getAdults()) ? row.getAdults() : 0))].map((v, value) => {
-                                        return {
-                                            text: StringHelper_1.default.pluralWithDictAndCount(value, Translation_1.Translation.Step.Date.Child, t),
-                                            value: value.toString(),
-                                        };
-                                    }), value: (_b = row === null || row === void 0 ? void 0 : row.getChildren()) === null || _b === void 0 ? void 0 : _b.toString(), onChange: updateNumberOfChildrenOnChange, keyName: "value", labelName: "text" }))),
-                        react_1.default.createElement(Tooltip_1.default, { title: promoCodeTooltip, wrapperClasses: "u-w-100@xl- rs-inline-filter-item-promo" },
+            react_1.default.createElement("div", { className: (0, classnames_1.default)(`room-builder-progress ${isCompact} rs-inline-container`, {
+                    [InlineRoomMiniEngine_module_scss_1.default['rs-inline-container']]: isCardLayout,
+                    [InlineRoomMiniEngine_module_scss_1.default['rs-inline-container--card-layout']]: isCardLayout,
+                }) },
+                react_1.default.createElement("div", { className: (0, classnames_1.default)('rs-inline-filter-container', {
+                        'u-flex w-100 flex-wrap room-builder-progress--item --current': !isCardLayout,
+                        [InlineRoomMiniEngine_module_scss_1.default['rs-inline-filter-container']]: isCardLayout,
+                    }), ref: ref },
+                    react_1.default.createElement("div", { className: (0, classnames_1.default)('rs-inline-filter-inner', {
+                            'u-flex u-flex-align-center flex-wrap flex-row u-w-100@xl-': !isCardLayout,
+                            [InlineRoomMiniEngine_module_scss_1.default['rs-inline-filter-inner']]: isCardLayout,
+                        }) },
+                        react_1.default.createElement(DatePickerSelector, null),
+                        react_1.default.createElement(GuestSelector, null),
+                        react_1.default.createElement(Tooltip_1.default, { title: promoCodeTooltip, wrapperClasses: (0, classnames_1.default)('u-w-100@xl- rs-inline-filter-item-promo', {
+                                [InlineRoomMiniEngine_module_scss_1.default['rs-inline-filter-item-promo']]: isCardLayout,
+                            }) },
                             react_1.default.createElement("div", { className: "room-builder-progress--value u-cursor-pointer", ref: thisElement, onClick: openPromoModalOnClick },
                                 react_1.default.createElement("div", { className: "u-flex align-items-center justify-content-center u-w-100@xl-" },
                                     react_1.default.createElement(Text_1.default, { className: "u-pad-right--light", type: Text_1.TextType.Body, color: (row === null || row === void 0 ? void 0 : row.getPromoCode()) ? row === null || row === void 0 ? void 0 : row.getPromoCodeColour() : Color_1.Color.Navy }, (row === null || row === void 0 ? void 0 : row.getPromoCode()) ? row === null || row === void 0 ? void 0 : row.getPromoCode() : 'Promo Code'),
@@ -312,17 +391,24 @@ function InlineRoomMiniEngineElement(props) {
                         react_1.default.createElement(Overlay_1.Overlay, { open: isPromoModalOpen, container: RoomstayThemeEngine_1.default.EngineContainer, followElement: thisElement.current, onClose: setPromoCodeOnClose },
                             react_1.default.createElement("div", { className: "u-pad--heavy" },
                                 react_1.default.createElement("div", null,
-                                    react_1.default.createElement(PromoCodeInput_1.default, { value: (_c = basketContext.selectedBasketRow) === null || _c === void 0 ? void 0 : _c.getPromoCode(), onChange: changePromoCode, valid: ((_d = basketContext.selectedBasketRow) === null || _d === void 0 ? void 0 : _d.getPromoCodeStatus()) !== 'new'
-                                            ? ((_e = basketContext.selectedBasketRow) === null || _e === void 0 ? void 0 : _e.getPromoCodeStatus()) === 'valid'
+                                    react_1.default.createElement(PromoCodeInput_1.default, { value: (_a = basketContext.selectedBasketRow) === null || _a === void 0 ? void 0 : _a.getPromoCode(), onChange: changePromoCode, valid: ((_b = basketContext.selectedBasketRow) === null || _b === void 0 ? void 0 : _b.getPromoCodeStatus()) !== 'new'
+                                            ? ((_c = basketContext.selectedBasketRow) === null || _c === void 0 ? void 0 : _c.getPromoCodeStatus()) === 'valid'
                                             : undefined })),
                                 react_1.default.createElement("div", { className: "u-flex justify-content-end align-items-center u-marg-top" },
                                     react_1.default.createElement(BEButton_1.default, { isText: true, size: "small", onClick: cancelPromoPopupOnClick }, t(Translation_1.Translation.Misc.Cancel)))))),
-                    react_1.default.createElement("div", { className: `u-flex flex-xl-nowrap flex-row ${isCompact ? 'w-100' : ''}` },
+                    react_1.default.createElement("div", { className: (0, classnames_1.default)(`u-flex flex-xl-nowrap flex-row rs-inline-filter-button`, {
+                            'w-100': isCompact,
+                            [InlineRoomMiniEngine_module_scss_1.default['rs-inline-filter-button']]: isCardLayout,
+                        }) },
                         react_1.default.createElement(BEButton_1.default, { filled: true, primary: true, isLoading: isLoading, wide: isCompact !== '', onClick: findRoomsOnClick }, t(Translation_1.Translation.Misc.CheckRates)))),
-                react_1.default.createElement("div", { className: "u-border-rounded rs-inline-content" }, !isLoading ? (react_1.default.createElement(AutoAutoHeight_1.default, { open: !isLoading },
+                react_1.default.createElement("div", { className: (0, classnames_1.default)('u-border-rounded rs-inline-content', {
+                        [InlineRoomMiniEngine_module_scss_1.default['rs-inline-content']]: isCardLayout,
+                    }) }, !isLoading ? (react_1.default.createElement(AutoAutoHeight_1.default, { open: !isLoading },
                     react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(BookNowPayLaterInfoBlock_1.BookNowPayLaterInfoBlock, null),
-                        rooms.length > 0 ? (react_1.default.createElement(RoomRates_1.default, { classNames: "rs-inline-content-list", featuredRates: featuredRates, rates: standardRates, roomCode: rooms[0].code, getButtonLabel: getButtonLabelHandler, onAddToBasketOverride: onAddToBasketOverrideHandler })) : (react_1.default.createElement(RatesNotFoundBlock_1.default, null))))) : (react_1.default.createElement(LargeLoader_1.default, null))))));
+                        rooms.length > 0 ? (react_1.default.createElement(RoomRates_1.default, { classNames: (0, classnames_1.default)('rs-inline-content-list', {
+                                [InlineRoomMiniEngine_module_scss_1.default['rs-inline-content-list']]: isCardLayout,
+                            }), featuredRates: featuredRates, rates: standardRates, roomCode: rooms[0].code, getButtonLabel: getButtonLabelHandler, onAddToBasketOverride: onAddToBasketOverrideHandler, isCardLayout: isCardLayout, policy: policy, priceDescription: priceDescription })) : (react_1.default.createElement(RatesNotFoundBlock_1.default, null))))) : (react_1.default.createElement(LargeLoader_1.default, null))))));
     }, [isCompact, isLoading, rooms, basketContext.currentBasketRows, isPromoModalOpen, hotel]);
 }
 exports.default = InlineRoomMiniEngineElement;
@@ -339,4 +425,83 @@ const renderInlineRoomMiniEngineElement = (container, engine) => {
                             react_1.default.createElement(InlineRoomMiniEngineElement, { engine: engine }))))))), container);
 };
 exports.renderInlineRoomMiniEngineElement = renderInlineRoomMiniEngineElement;
+const GuestSelectorCustom = ({ maxAdults, maxChildren, maxInfants = 10, defaultValue, onChange, disableChild, showInfants, disableRoom, applyButton, promoCodeConfig, }) => {
+    var _a, _b, _c, _d;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const ref = react_1.default.useRef(null);
+    const targetRef = (0, react_1.useRef)(null);
+    const [adults, setAdults] = (0, react_1.useState)((_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.adults) !== null && _a !== void 0 ? _a : 1);
+    const [children, setChildren] = (0, react_1.useState)((_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.children) !== null && _b !== void 0 ? _b : 0);
+    const [infants, setInfants] = (0, react_1.useState)((_c = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.infants) !== null && _c !== void 0 ? _c : 0);
+    const [room, setRoom] = (0, react_1.useState)((_d = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.room) !== null && _d !== void 0 ? _d : 1);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const onChangeAdults = (newValue) => {
+        setAdults(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange({ adults: newValue, children: children, infants: infants, room: room });
+    };
+    const onChangeChildren = (newValue) => {
+        setChildren(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange({ adults: adults, children: newValue, infants: infants, room: room });
+    };
+    const onChangeInfants = (newValue) => {
+        setInfants(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange({ adults: adults, children: children, infants: newValue, room: room });
+    };
+    const onChangeRoom = (newValue) => {
+        setRoom(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange({ adults: adults, children: children, infants: infants, room: newValue });
+    };
+    const inner = () => {
+        return (react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['popper--box'] },
+            react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['popper--content'], ref: ref },
+                react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['row-wrapper'] },
+                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.row },
+                        react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['title'], type: Text_1.TextType.Small }, StringHelper_1.default.plural(adults, 'Adult', t)),
+                        react_1.default.createElement(NumberIncrement_1.default, { number: adults, min: 1, max: maxAdults, onChange: (value) => onChangeAdults(value), textSize: Text_1.TextType.Small }))),
+                disableChild ? null : (react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['row-wrapper'] },
+                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.divider }),
+                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.row },
+                        react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['title'], type: Text_1.TextType.Small }, StringHelper_1.default.plural(children, 'Child', t)),
+                        react_1.default.createElement(NumberIncrement_1.default, { number: children, min: 0, max: maxChildren, onChange: (value) => onChangeChildren(value), textSize: Text_1.TextType.Small })))),
+                showInfants ? (react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['row-wrapper'] },
+                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.divider }),
+                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.row },
+                        react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['title'], type: Text_1.TextType.Small }, StringHelper_1.default.plural(infants, 'Infant', t)),
+                        react_1.default.createElement(NumberIncrement_1.default, { number: infants, min: 0, onChange: (value) => onChangeInfants(value), textSize: Text_1.TextType.Small })),
+                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.divider }))) : null,
+                disableRoom ? null : (react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['row-wrapper'] },
+                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.divider }),
+                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.row },
+                        react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['title'], type: Text_1.TextType.Small }, StringHelper_1.default.plural(room, 'Room', t)),
+                        react_1.default.createElement(NumberIncrement_1.default, { number: room, min: 1, max: 10, onChange: (value) => onChangeRoom(value), textSize: Text_1.TextType.Small })))),
+                promoCodeConfig ? (react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['row-wrapper'] },
+                    react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default.divider }),
+                    react_1.default.createElement("div", { className: (0, classnames_1.default)(InlineRoomMiniEngine_module_scss_1.default.row) },
+                        react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['title'], type: Text_1.TextType.Small }, t(Translation_1.Translation.Misc.Promocode)),
+                        react_1.default.createElement(PromoCodeInput_1.default, { className: InlineRoomMiniEngine_module_scss_1.default.promo, value: promoCodeConfig.promoCode, onChange: promoCodeConfig.onChange, valid: promoCodeConfig.valid })))) : null)));
+    };
+    const content = () => {
+        return (react_1.default.createElement(Overlay_1.Overlay, { offset: [0, 6], usePortal: false, followElement: targetRef.current, placement: "top-start", strategy: "absolute", open: open, onClose: () => setOpen === null || setOpen === void 0 ? void 0 : setOpen(false), className: InlineRoomMiniEngine_module_scss_1.default.popper, hideStyles: true }, inner()));
+    };
+    const getValueAsText = () => {
+        const parts = [StringHelper_1.default.pluralWithCount(adults, 'Adult', t)];
+        if (children > 0) {
+            parts.push(StringHelper_1.default.pluralWithCount(children, 'Child', t));
+        }
+        if (infants > 0) {
+            parts.push(StringHelper_1.default.pluralWithCount(infants, 'Infant', t));
+        }
+        return parts.join(' - ');
+    };
+    return (react_1.default.createElement("div", { ref: targetRef, className: (0, classnames_1.default)('u-cursor-pointer', 'rs-inline-filter-item-guest', InlineRoomMiniEngine_module_scss_1.default['rs-inline-filter-item-guest']) },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(InlineRoomMiniEngine_module_scss_1.default['card']), onClick: () => setOpen === null || setOpen === void 0 ? void 0 : setOpen(!open) },
+            react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['image'] },
+                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.People })),
+            react_1.default.createElement("div", { className: InlineRoomMiniEngine_module_scss_1.default['content'] },
+                react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['title'], type: Text_1.TextType.Body }, t(Translation_1.Translation.Misc.Guests)),
+                react_1.default.createElement(Text_1.default, { className: InlineRoomMiniEngine_module_scss_1.default['sub-title'], type: Text_1.TextType.Body, color: Color_1.Color.Navy }, getValueAsText())),
+            react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown })),
+        content()));
+};
+exports.GuestSelectorCustom = GuestSelectorCustom;
 //# sourceMappingURL=InlineRoomMiniEngineElement.js.map