@roomstay/frontend 2.5.2-2 → 2.5.2

package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryPromocodeInput.js

@@ -26,22 +26,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserSearchSummaryPromocdeInput = void 0;
+exports.UserSearchSummaryPromocodeInput = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const react_i18next_1 = require("react-i18next");
-const BEButton_1 = __importDefault(require("../../../generic/BEButton"));
-const Icon_1 = __importStar(require("../../../generic/Icon/Icon"));
-const Overlay_1 = require("../../../generic/Overlay/Overlay");
 const PromoCodeInput_1 = __importDefault(require("../../../generic/PromoCodeInput"));
-const Text_1 = __importStar(require("../../../generic/Text"));
 const Tooltip_1 = __importDefault(require("../../../generic/Tooltip/Tooltip"));
 const Translation_1 = require("../../../../translations/Translation");
 const Color_1 = require("../../../../util/Color");
-const DataLayer_1 = __importStar(require("../../../../util/DataLayer"));
-const UserSearchSummaryPromocdeInput = ({ row, disabled = false, onChange, promocodeTextColor = Color_1.Color.Navy, useUpdatedDesign = false, }) => {
+const UserSearchSummaryRow_module_scss_1 = __importDefault(require("./UserSearchSummaryRow.module.scss"));
+const UserSearchSummaryPromocodeInput = ({ row, disabled = false, onChange, promocodeTextColor = Color_1.Color.Navy, useUpdatedDesign = false, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const [isPromoModalOpen, setIsPromoModalOpen] = (0, react_1.useState)(false);
     let promoCodeTooltip = '';
     if (row.getPromoCodeStatus() === 'new') {
         promoCodeTooltip = row.getPromoCode() ? t(Translation_1.Translation.Step.Date.PromoCodeTooltip.Checking) : t(Translation_1.Translation.Step.Date.PromoCodeTooltip.NoValue);
@@ -55,38 +50,17 @@ const UserSearchSummaryPromocdeInput = ({ row, disabled = false, onChange, promo
         }
     }
     const thisElement = (0, react_1.useRef)(null);
-    const openPromoModalOnClick = () => {
-        if (disabled) {
-            return;
-        }
-        setIsPromoModalOpen(true);
-    };
-    const setPromoCodeOnClose = () => {
-        setIsPromoModalOpen(false);
-    };
-    const cancelPromoPopupOnClick = () => {
-        DataLayer_1.default.instance.sendInteraction('Cancel Promo Popup', DataLayer_1.InteractionType.BUTTON, DataLayer_1.InteractionStep.ROOMS);
-        setIsPromoModalOpen(false);
-    };
     const _onChangePromoCode = (code) => {
         onChange(code);
-        if (code) {
-            setIsPromoModalOpen(false);
-        }
     };
     promocodeTextColor = row.getPromoCode() ? row.getPromoCodeColour() : promocodeTextColor;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Tooltip_1.default, { title: promoCodeTooltip, wrapperClasses: "u-w-100@xl- d-flex", disabled: disabled },
-            react_1.default.createElement("div", { className: (0, classnames_1.default)('room-builder-progress--value u-cursor-pointer', { '--updated': useUpdatedDesign }), ref: thisElement, onClick: openPromoModalOnClick },
-                react_1.default.createElement("div", { className: "u-flex align-items-center justify-content-center u-w-100@xl- room-builder-progress--promo" },
-                    react_1.default.createElement(Text_1.default, { className: "u-pad-right--light", type: Text_1.TextType.Body, color: promocodeTextColor }, row.getPromoCode() ? row.getPromoCode() : t(Translation_1.Translation.Step.Date.PromoCode)),
-                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown, color: Color_1.Color.DarkGrey })))),
-        react_1.default.createElement(Overlay_1.Overlay, { open: isPromoModalOpen, 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: row === null || row === void 0 ? void 0 : row.getPromoCode(), onChange: _onChangePromoCode, valid: (row === null || row === void 0 ? void 0 : row.getPromoCodeStatus()) !== 'new' ? (row === null || row === void 0 ? void 0 : row.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: (0, classnames_1.default)('u-cursor-pointer', { '--updated': useUpdatedDesign }), ref: thisElement, style: { width: '100%' } },
+                react_1.default.createElement("div", { className: "u-flex align-items-center justify-content-center u-w-100@xl- room-builder-progress--promo", style: { width: '100%' } },
+                    react_1.default.createElement("div", { style: { width: '100%' } },
+                        react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-label'] }, t(Translation_1.Translation.Step.Date.PromoCode)),
+                        react_1.default.createElement(PromoCodeInput_1.default, { value: row === null || row === void 0 ? void 0 : row.getPromoCode(), onChange: _onChangePromoCode, valid: (row === null || row === void 0 ? void 0 : row.getPromoCodeStatus()) !== 'new' ? (row === null || row === void 0 ? void 0 : row.getPromoCodeStatus()) === 'valid' : undefined, variant: "text", hideValidText: true })))))));
 };
-exports.UserSearchSummaryPromocdeInput = UserSearchSummaryPromocdeInput;
+exports.UserSearchSummaryPromocodeInput = UserSearchSummaryPromocodeInput;
 //# sourceMappingURL=UserSearchSummaryPromocodeInput.js.map

package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryPromocodeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserSearchSummaryPromocodeInput.js","sourceRoot":"/","sources":["src/components/steps/room/UserSearchSummary/UserSearchSummaryPromocodeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { default as cx } from 'classnames';\nimport React, { useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport BEButton from '@/components/generic/BEButton';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\nimport PromoCodeInput from '@/components/generic/PromoCodeInput';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport BasketRow from '@/models/BasketRow';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\nimport DataLayer, { InteractionStep, InteractionType } from '@/util/DataLayer';\n\ntype UserSearchSummaryPromocodeInputProps = {\n    row: BasketRow;\n    onChange: (code: string) => void;\n\n    disabled?: boolean;\n    promocodeTextColor?: Color;\n    useUpdatedDesign?: boolean;\n};\n\nexport const UserSearchSummaryPromocdeInput = ({\n    row,\n    disabled = false,\n    onChange,\n    promocodeTextColor = Color.Navy,\n    useUpdatedDesign = false,\n}: UserSearchSummaryPromocodeInputProps) => {\n    const { t } = useTranslation();\n    const [isPromoModalOpen, setIsPromoModalOpen] = useState(false);\n\n    let promoCodeTooltip = '';\n\n    if (row.getPromoCodeStatus() === 'new') {\n        promoCodeTooltip = row.getPromoCode() ? t(Translation.Step.Date.PromoCodeTooltip.Checking) : t(Translation.Step.Date.PromoCodeTooltip.NoValue);\n    } else {\n        if (row.getPromoCodeStatus() === 'valid') {\n            promoCodeTooltip = t(Translation.Step.Date.PromoCodeTooltip.Valid);\n        } else {\n            promoCodeTooltip = t(Translation.Step.Date.PromoCodeTooltip.Invalid);\n        }\n    }\n\n    const thisElement = useRef<HTMLDivElement | null>(null);\n\n    const openPromoModalOnClick = () => {\n        if (disabled) {\n            return;\n        }\n\n        setIsPromoModalOpen(true);\n    };\n    const setPromoCodeOnClose = () => {\n        setIsPromoModalOpen(false);\n    };\n\n    const cancelPromoPopupOnClick = () => {\n        DataLayer.instance.sendInteraction('Cancel Promo Popup', InteractionType.BUTTON, InteractionStep.ROOMS);\n        setIsPromoModalOpen(false);\n    };\n\n    const _onChangePromoCode = (code: string) => {\n        onChange(code);\n        if (code) {\n            setIsPromoModalOpen(false);\n        }\n    };\n\n    promocodeTextColor = row.getPromoCode() ? row.getPromoCodeColour() : promocodeTextColor;\n\n    return (\n        <>\n            <Tooltip title={promoCodeTooltip} wrapperClasses=\"u-w-100@xl- d-flex\" disabled={disabled}>\n                <div className={cx('room-builder-progress--value u-cursor-pointer', { '--updated': useUpdatedDesign })} ref={thisElement} onClick={openPromoModalOnClick}>\n                    <div className=\"u-flex align-items-center justify-content-center u-w-100@xl- room-builder-progress--promo\">\n                        <Text className=\"u-pad-right--light\" type={TextType.Body} color={promocodeTextColor}>\n                            {row.getPromoCode() ? row.getPromoCode() : t(Translation.Step.Date.PromoCode)}\n                        </Text>\n                        <Icon icon={IconType.Dropdown} color={Color.DarkGrey} />\n                    </div>\n                </div>\n            </Tooltip>\n            <Overlay open={isPromoModalOpen} followElement={thisElement.current} onClose={setPromoCodeOnClose}>\n                <div className=\"u-pad--heavy\">\n                    <div>\n                        <PromoCodeInput\n                            value={row?.getPromoCode()}\n                            onChange={_onChangePromoCode}\n                            valid={row?.getPromoCodeStatus() !== 'new' ? row?.getPromoCodeStatus() === 'valid' : undefined}\n                        />\n                    </div>\n\n                    <div className=\"u-flex justify-content-end align-items-center u-marg-top\">\n                        <BEButton isText size=\"small\" onClick={cancelPromoPopupOnClick}>\n                            {t(Translation.Misc.Cancel)}\n                        </BEButton>\n                    </div>\n                </div>\n            </Overlay>\n        </>\n    );\n};\n"]}
+{"version":3,"file":"UserSearchSummaryPromocodeInput.js","sourceRoot":"/","sources":["src/components/steps/room/UserSearchSummary/UserSearchSummaryPromocodeInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4DAA2C;AAC3C,+CAAsC;AACtC,iDAA+C;AAE/C,yFAAiE;AACjE,mFAA2D;AAE3D,4DAAyD;AACzD,wCAAqC;AAErC,0GAAwD;AAWjD,MAAM,+BAA+B,GAAG,CAAC,EAC5C,GAAG,EACH,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,kBAAkB,GAAG,aAAK,CAAC,IAAI,EAC/B,gBAAgB,GAAG,KAAK,GACW,EAAE,EAAE;IACvC,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,IAAI,gBAAgB,GAAG,EAAE,CAAC;IAE1B,IAAI,GAAG,CAAC,kBAAkB,EAAE,KAAK,KAAK,EAAE;QACpC,gBAAgB,GAAG,GAAG,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;KAClJ;SAAM;QACH,IAAI,GAAG,CAAC,kBAAkB,EAAE,KAAK,OAAO,EAAE;YACtC,gBAAgB,GAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACtE;aAAM;YACH,gBAAgB,GAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;SACxE;KACJ;IAED,MAAM,WAAW,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IAExD,MAAM,kBAAkB,GAAG,CAAC,IAAY,EAAE,EAAE;QACxC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,kBAAkB,GAAG,GAAG,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC;IAExF,OAAO,CACH;QACI,8BAAC,iBAAO,IAAC,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAC,oBAAoB,EAAC,QAAQ,EAAE,QAAQ;YACpF,uCAAK,SAAS,EAAE,IAAA,oBAAE,EAAC,kBAAkB,EAAE,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;gBACjH,uCAAK,SAAS,EAAC,2FAA2F,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;oBAC/H,uCAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;wBACzB,uCAAK,SAAS,EAAE,0CAAM,CAAC,gCAAgC,CAAC,IAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAO;wBACpG,8BAAC,wBAAc,IACX,KAAK,EAAE,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,YAAY,EAAE,EAC1B,QAAQ,EAAE,kBAAkB,EAC5B,KAAK,EAAE,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,kBAAkB,EAAE,MAAK,KAAK,CAAC,CAAC,CAAC,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,kBAAkB,EAAE,MAAK,OAAO,CAAC,CAAC,CAAC,SAAS,EAC9F,OAAO,EAAC,MAAM,EACd,aAAa,SACf,CACA,CACJ,CACJ,CACA,CACX,CACN,CAAC;AACN,CAAC,CAAC;AAhDW,QAAA,+BAA+B,mCAgD1C","sourcesContent":["import { default as cx } from 'classnames';\nimport React, { useRef } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport PromoCodeInput from '@/components/generic/PromoCodeInput';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport BasketRow from '@/models/BasketRow';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\n\nimport styles from './UserSearchSummaryRow.module.scss';\n\ntype UserSearchSummaryPromocodeInputProps = {\n    row: BasketRow;\n    onChange: (code: string) => void;\n\n    disabled?: boolean;\n    promocodeTextColor?: Color;\n    useUpdatedDesign?: boolean;\n};\n\nexport const UserSearchSummaryPromocodeInput = ({\n    row,\n    disabled = false,\n    onChange,\n    promocodeTextColor = Color.Navy,\n    useUpdatedDesign = false,\n}: UserSearchSummaryPromocodeInputProps) => {\n    const { t } = useTranslation();\n    let promoCodeTooltip = '';\n\n    if (row.getPromoCodeStatus() === 'new') {\n        promoCodeTooltip = row.getPromoCode() ? t(Translation.Step.Date.PromoCodeTooltip.Checking) : t(Translation.Step.Date.PromoCodeTooltip.NoValue);\n    } else {\n        if (row.getPromoCodeStatus() === 'valid') {\n            promoCodeTooltip = t(Translation.Step.Date.PromoCodeTooltip.Valid);\n        } else {\n            promoCodeTooltip = t(Translation.Step.Date.PromoCodeTooltip.Invalid);\n        }\n    }\n\n    const thisElement = useRef<HTMLDivElement | null>(null);\n\n    const _onChangePromoCode = (code: string) => {\n        onChange(code);\n    };\n\n    promocodeTextColor = row.getPromoCode() ? row.getPromoCodeColour() : promocodeTextColor;\n\n    return (\n        <>\n            <Tooltip title={promoCodeTooltip} wrapperClasses=\"u-w-100@xl- d-flex\" disabled={disabled}>\n                <div className={cx('u-cursor-pointer', { '--updated': useUpdatedDesign })} ref={thisElement} style={{ width: '100%' }}>\n                    <div className=\"u-flex align-items-center justify-content-center u-w-100@xl- room-builder-progress--promo\" style={{ width: '100%' }}>\n                        <div style={{ width: '100%' }}>\n                            <div className={styles['user-search-summary-card-label']}>{t(Translation.Step.Date.PromoCode)}</div>\n                            <PromoCodeInput\n                                value={row?.getPromoCode()}\n                                onChange={_onChangePromoCode}\n                                valid={row?.getPromoCodeStatus() !== 'new' ? row?.getPromoCodeStatus() === 'valid' : undefined}\n                                variant=\"text\"\n                                hideValidText\n                            />\n                        </div>\n                    </div>\n                </div>\n            </Tooltip>\n        </>\n    );\n};\n"]}

package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryRow.js

@@ -43,14 +43,16 @@ const Color_1 = require("../../../../util/Color");
 const DataLayer_1 = __importStar(require("../../../../util/DataLayer"));
 const ScreenSize_1 = __importDefault(require("../../../../util/ScreenSize"));
 const StringHelper_1 = __importDefault(require("../../../../util/StringHelper"));
-const NumberOfAdultsPicker_1 = __importDefault(require("../roomBuilderProgress/NumberOfAdultsPicker"));
-const NumberOfChildrenPicker_1 = __importDefault(require("../roomBuilderProgress/NumberOfChildrenPicker"));
+const BookingWizard_1 = require("../../../generic/BookingWizard/BookingWizard");
+const BookingWizardContext_1 = require("../../../generic/BookingWizard/BookingWizardContext");
+const BookingWizardGuestSelector_1 = require("../../../generic/BookingWizard/BookingWizardGuestSelector/BookingWizardGuestSelector");
 const UserSearchSummaryPromocodeInput_1 = require("./UserSearchSummaryPromocodeInput");
 const UserSearchSummaryRow_module_scss_1 = __importDefault(require("./UserSearchSummaryRow.module.scss"));
 const UserSearchSummaryRow = ({ row, index }) => {
+    var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
     const removeButtonRef = (0, react_1.useRef)();
-    const { isAccent2ColorDark } = (0, hooks_1.useCurrentHotel)();
+    const { isAccent2ColorDark, hotel } = (0, hooks_1.useCurrentHotel)();
     const { selectedBasketRow, currentBasketRows, updateBasketRow, removeBasketRow, selectBasketRow } = (0, react_1.useContext)(contexts_1.BasketContext);
     const { isHidingPromoField } = (0, react_1.useContext)(contexts_1.CompanyContext);
     const engineContext = (0, react_1.useContext)(contexts_1.BookingEngineContext);
@@ -62,7 +64,7 @@ const UserSearchSummaryRow = ({ row, index }) => {
         DataLayer_1.default.instance.sendInteraction('Remove Room', DataLayer_1.InteractionType.BUTTON, DataLayer_1.InteractionStep.ROOMS);
         removeBasketRow(row);
     };
-    const updatePeopleValues = ({ adults, children, updatedPromoCode }) => {
+    const updatePeopleValues = ({ adults, children, infants, updatedPromoCode }) => {
         if (adults && adults !== row.getAdults()) {
             DataLayer_1.default.instance.sendInteraction('Guests', DataLayer_1.InteractionType.NUMBER_INPUT, DataLayer_1.InteractionStep.ROOMS);
             row.setAdults(adults);
@@ -71,6 +73,10 @@ const UserSearchSummaryRow = ({ row, index }) => {
             DataLayer_1.default.instance.sendInteraction('Guests', DataLayer_1.InteractionType.NUMBER_INPUT, DataLayer_1.InteractionStep.ROOMS);
             row.setChildren(children);
         }
+        if ((infants || infants === 0) && infants !== row.getInfants()) {
+            DataLayer_1.default.instance.sendInteraction('Guests', DataLayer_1.InteractionType.NUMBER_INPUT, DataLayer_1.InteractionStep.ROOMS);
+            row.setInfants(infants);
+        }
         if ((updatedPromoCode || updatedPromoCode === '') && updatedPromoCode !== row.getPromoCode()) {
             DataLayer_1.default.instance.sendInteraction('Promo Code', DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.ROOMS);
             row.setPromoCode(updatedPromoCode);
@@ -93,11 +99,12 @@ const UserSearchSummaryRow = ({ row, index }) => {
         }
         updateBasketRow(row);
     };
-    const updateNumberOfAdultsOnChange = (value) => {
-        updatePeopleValues({ adults: +value });
-    };
-    const updateNumberOfChildrenOnChange = (value) => {
-        updatePeopleValues({ children: +value });
+    const setGuest = (guests) => {
+        updatePeopleValues({
+            adults: guests.adults,
+            children: guests.children,
+            infants: guests.infants,
+        });
     };
     const changePromoCode = (val) => {
         updatePromoCode(val);
@@ -118,6 +125,11 @@ const UserSearchSummaryRow = ({ row, index }) => {
     const removeButton = (react_1.default.createElement(Tooltip_1.default, { title: canRemove ? 'Remove this room' : 'Cannot remove this room as at least one must be selected.', followElement: removeButtonRef === null || removeButtonRef === void 0 ? void 0 : removeButtonRef.current, wrapperClasses: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__remove-tooltip'] },
         react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__remove'], onClick: removeRoomOnClick, ref: removeButtonRef },
             react_1.default.createElement(BEButton_1.default, { textColor: textColor, isText: true, icon: Icon_1.IconType.Close, iconPosition: "right", stopIconAnimation: true, disabled: !canRemove, onClick: removeRoomOnClick }))));
+    const bookingWizardContext = {
+        layout: 'booking-summary',
+        theme: BookingWizard_1.EBookingWizardTheme.Default,
+        type: sizeMediumDown ? 'top-sheet' : 'popup',
+    };
     if (isValid && !isSelectedRow) {
         return (react_1.default.createElement("div", { className: `${UserSearchSummaryRow_module_scss_1.default['user-completed-summary-row']} u-flex w-100` },
             react_1.default.createElement("div", { className: "u-flex justify-content-start" },
@@ -129,7 +141,10 @@ const UserSearchSummaryRow = ({ row, index }) => {
                             react_1.default.createElement("span", { className: "u-marg-left--light@xl" },
                                 StringHelper_1.default.pluralWithDictAndCount(row.getAdults(), Translation_1.Translation.Step.Date.Adult, t),
                                 ",\u00A0",
-                                StringHelper_1.default.pluralWithDictAndCount(row.getChildren(), Translation_1.Translation.Step.Date.Child, t)))),
+                                StringHelper_1.default.pluralWithDictAndCount(row.getChildren(), Translation_1.Translation.Step.Date.Child, t),
+                                ((_a = hotel === null || hotel === void 0 ? void 0 : hotel.childConfiguration) === null || _a === void 0 ? void 0 : _a.supportInfants) ? (react_1.default.createElement(react_1.default.Fragment, null,
+                                    ",\u00A0",
+                                    StringHelper_1.default.pluralWithDictAndCount(row.getInfants(), Translation_1.Translation.Step.Date.Infant, t))) : null))),
                     react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Caption, color: Color_1.Color.DarkGrey },
                         react_1.default.createElement("strong", null, row.getStayDateRange('ddd, MMM D, YYYY', ' -')))),
                 row.isPromoCodeValid() && (react_1.default.createElement("div", { className: "u-marg-left d-flex align-items-center" },
@@ -148,29 +163,35 @@ const UserSearchSummaryRow = ({ row, index }) => {
         }) },
         react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row--inner'] },
             react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group'] },
-                react_1.default.createElement(Text_1.default, { inline: true, bold: true, className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group-label'], color: textColor }, "Dates:"),
                 react_1.default.createElement(FloatingDatePicker_1.default, { startDate: row.getStartDate(), endDate: row.getEndDate(), selectedDateChanged: updateDateValues, isAboveNav: true, className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__input'] },
                     react_1.default.createElement(Tooltip_1.default, { disabled: !isSelectedRow, title: t(Translation_1.Translation.Step.Date.SelectArrivalAndDepartureDatesByClickingHere) },
                         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: shouldTextBeWhite ? Color_1.Color.White : Color_1.Color.Accent, bold: true, className: "u-nowrap" }, row.getArrivalDate()),
-                            react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2, color: shouldTextBeWhite ? Color_1.Color.White : undefined }),
-                            react_1.default.createElement(Text_1.default, { color: shouldTextBeWhite ? Color_1.Color.White : Color_1.Color.Accent, bold: true, className: "u-nowrap" }, row.getDepartureDate()))))),
+                            react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-date-range'] },
+                                react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-date-range--item'] },
+                                    react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-label'] }, t(Translation_1.Translation.Misc.CheckIn)),
+                                    react_1.default.createElement(Text_1.default, { color: shouldTextBeWhite ? Color_1.Color.White : Color_1.Color.Accent, bold: true, className: "u-nowrap" }, row.getArrivalDate())),
+                                react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-date-range--icon'] },
+                                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2, color: shouldTextBeWhite ? Color_1.Color.White : undefined })),
+                                react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-date-range--item'] },
+                                    react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-label'] }, t(Translation_1.Translation.Misc.CheckOut)),
+                                    react_1.default.createElement(Text_1.default, { color: shouldTextBeWhite ? Color_1.Color.White : Color_1.Color.Accent, bold: true, className: "u-nowrap" }, row.getDepartureDate()))))))),
             react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__divider'] }),
             react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group'] },
-                react_1.default.createElement(Text_1.default, { inline: true, bold: true, className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group-label'], color: textColor }, "Who:"),
-                react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__input'] },
-                    react_1.default.createElement(NumberOfAdultsPicker_1.default, { row: row, onChange: updateNumberOfAdultsOnChange, labelColor: textColor })),
                 react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__input'] },
-                    react_1.default.createElement(NumberOfChildrenPicker_1.default, { row: row, onChange: updateNumberOfChildrenOnChange, labelColor: textColor }))),
+                    react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-item'] },
+                        react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-card-label'] }, t(Translation_1.Translation.Misc.Who)),
+                        react_1.default.createElement(BookingWizardContext_1.BookingWizardContext.Provider, { value: bookingWizardContext },
+                            react_1.default.createElement(BookingWizardGuestSelector_1.BookingWizardGuestSelector, { defaultValue: {
+                                    adults: row.getAdults(),
+                                    children: row.getChildren(),
+                                    infants: row.getInfants(),
+                                }, onChange: setGuest, disableChild: engineContext.engine.getConfig().disableChild, disableRoom: true }))))),
             !isHidingPromoField && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__divider'] }),
                 react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__group'] },
                     react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row__input'] },
-                        react_1.default.createElement(UserSearchSummaryPromocodeInput_1.UserSearchSummaryPromocdeInput, { row: row, onChange: changePromoCode, disabled: !isSelectedRow, promocodeTextColor: textColor, useUpdatedDesign: true })))))),
-        react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row--buttons'] }, isSelectedRow && isValid ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(BEButton_1.default, { isText: true, size: "tiny", onClick: onClickCancelRoomChanges, textColor: textColor }, t(Translation_1.Translation.Misc.Cancel)))) : (removeButton)),
-        react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row--mobile-select-label'] },
-            react_1.default.createElement(Text_1.default, { type: sizeMediumDown ? Text_1.TextType.Small : Text_1.TextType.Body, color: textColor, bold: true }, "Select room for"))));
+                        react_1.default.createElement(UserSearchSummaryPromocodeInput_1.UserSearchSummaryPromocodeInput, { row: row, onChange: changePromoCode, disabled: !isSelectedRow, promocodeTextColor: textColor, useUpdatedDesign: true })))))),
+        react_1.default.createElement("div", { className: UserSearchSummaryRow_module_scss_1.default['user-search-summary-row--buttons'] }, isSelectedRow && isValid ? (react_1.default.createElement(BEButton_1.default, { isText: true, size: "tiny", onClick: onClickCancelRoomChanges, textColor: textColor }, t(Translation_1.Translation.Misc.Cancel))) : (removeButton))));
 };
 exports.UserSearchSummaryRow = UserSearchSummaryRow;
 //# sourceMappingURL=UserSearchSummaryRow.js.map

package/dist/src/components/steps/room/UserSearchSummary/UserSearchSummaryRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserSearchSummaryRow.js","sourceRoot":"/","sources":["src/components/steps/room/UserSearchSummary/UserSearchSummaryRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BasketContext, BookingEngineContext, CompanyContext } from '@frontend/contexts';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { default as cx } from 'classnames';\nimport dayjs from 'dayjs';\nimport React, { useContext, useMemo, useRef } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport BEButton from '@/components/generic/BEButton';\nimport FloatingDatePicker from '@/components/generic/date/FloatingDatePicker';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Pill, { PillType } from '@/components/generic/Pill';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport BasketRow from '@/models/BasketRow';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\nimport DataLayer, { InteractionStep, InteractionType } from '@/util/DataLayer';\nimport ScreenSize from '@/util/ScreenSize';\nimport StringHelper from '@/util/StringHelper';\n\nimport NumberOfAdultsPicker from '../roomBuilderProgress/NumberOfAdultsPicker';\nimport NumberOfChildrenPicker from '../roomBuilderProgress/NumberOfChildrenPicker';\nimport { UserSearchSummaryPromocdeInput } from './UserSearchSummaryPromocodeInput';\nimport styles from './UserSearchSummaryRow.module.scss';\n\ntype UserSearchSummaryRowProps = {\n    row: BasketRow;\n    index: number;\n};\n\nexport const UserSearchSummaryRow = ({ row, index }: UserSearchSummaryRowProps) => {\n    const { t } = useTranslation();\n    const removeButtonRef = useRef<any>();\n    const { isAccent2ColorDark } = useCurrentHotel();\n\n    const { selectedBasketRow, currentBasketRows, updateBasketRow, removeBasketRow, selectBasketRow } = useContext(BasketContext);\n    const { isHidingPromoField } = useContext(CompanyContext);\n\n    const engineContext = useContext(BookingEngineContext);\n\n    const isSelectedRow = useMemo(() => {\n        return selectedBasketRow?.getID() === row?.getID();\n    }, [selectedBasketRow]);\n\n    const canRemove = currentBasketRows.length > 1;\n    const removeRoomOnClick = () => {\n        DataLayer.instance.sendInteraction('Remove Room', InteractionType.BUTTON, InteractionStep.ROOMS);\n        removeBasketRow(row);\n    };\n\n    const updatePeopleValues = ({ adults, children, updatedPromoCode }: { adults?: number; children?: number; updatedPromoCode?: string }) => {\n        if (adults && adults !== row.getAdults()) {\n            DataLayer.instance.sendInteraction('Guests', InteractionType.NUMBER_INPUT, InteractionStep.ROOMS);\n            row.setAdults(adults);\n        }\n\n        if ((children || children === 0) && children !== row.getChildren()) {\n            DataLayer.instance.sendInteraction('Guests', InteractionType.NUMBER_INPUT, InteractionStep.ROOMS);\n            row.setChildren(children);\n        }\n\n        if ((updatedPromoCode || updatedPromoCode === '') && updatedPromoCode !== row.getPromoCode()) {\n            DataLayer.instance.sendInteraction('Promo Code', InteractionType.FORM_FIELD, InteractionStep.ROOMS);\n            row.setPromoCode(updatedPromoCode);\n        }\n\n        updateBasketRow(row);\n    };\n\n    const updatePromoCode = (code: string) => {\n        DataLayer.instance.sendInteraction('Promo Code', InteractionType.FORM_FIELD, InteractionStep.ROOMS);\n\n        if (selectedBasketRow) {\n            selectedBasketRow.setPromoCode(code);\n            updateBasketRow(selectedBasketRow);\n        }\n    };\n\n    const updateDateValues = (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => {\n        if (startDate) {\n            row.setStartDate(startDate);\n        }\n\n        if (endDate) {\n            row.setEndDate(endDate);\n        }\n\n        updateBasketRow(row);\n    };\n\n    const updateNumberOfAdultsOnChange = (value: string) => {\n        updatePeopleValues({ adults: +value });\n    };\n    const updateNumberOfChildrenOnChange = (value: string) => {\n        updatePeopleValues({ children: +value });\n    };\n    const changePromoCode = (val: any) => {\n        updatePromoCode(val);\n    };\n\n    const onClickCancelRoomChanges = () => {\n        DataLayer.instance.sendInteraction('Cancel Room Changes', InteractionType.LINK, InteractionStep.ROOMS);\n        selectBasketRow(null);\n    };\n    const onClickEditRoom = () => {\n        DataLayer.instance.sendInteraction('Edit Room', InteractionType.LINK, InteractionStep.ROOMS);\n        selectBasketRow(row);\n    };\n\n    const isValid = row.isValid();\n    const isLargerThanLarge = engineContext.screenSize > ScreenSize.ExtraLarge;\n\n    const sizeMediumDown = engineContext.screenSize <= ScreenSize.Medium;\n\n    const shouldTextBeWhite = (isValid ? isAccent2ColorDark : false) && isSelectedRow;\n\n    const textColor = shouldTextBeWhite ? Color.White : undefined;\n\n    const removeButton = (\n        <Tooltip\n            title={canRemove ? 'Remove this room' : 'Cannot remove this room as at least one must be selected.'}\n            followElement={removeButtonRef?.current}\n            wrapperClasses={styles['user-search-summary-row__remove-tooltip']}\n        >\n            <div className={styles['user-search-summary-row__remove']} onClick={removeRoomOnClick} ref={removeButtonRef}>\n                <BEButton textColor={textColor} isText icon={IconType.Close} iconPosition=\"right\" stopIconAnimation disabled={!canRemove} onClick={removeRoomOnClick} />\n            </div>\n        </Tooltip>\n    );\n\n    if (isValid && !isSelectedRow) {\n        return (\n            <div className={`${styles['user-completed-summary-row']} u-flex w-100`}>\n                <div className=\"u-flex justify-content-start\">\n                    <div className=\"u-flex flex-column\">\n                        <span>\n                            <Text inline={isLargerThanLarge}>\n                                <strong>{row.getRoom().name}</strong>\n                            </Text>\n                            <Text inline={isLargerThanLarge} type={isLargerThanLarge ? TextType.Body : TextType.Small}>\n                                <span className=\"u-marg-left--light@xl\">\n                                    {StringHelper.pluralWithDictAndCount(row.getAdults(), Translation.Step.Date.Adult, t)}\n                                    ,&nbsp;\n                                    {StringHelper.pluralWithDictAndCount(row.getChildren(), Translation.Step.Date.Child, t)}\n                                </span>\n                            </Text>\n                        </span>\n                        <Text type={TextType.Caption} color={Color.DarkGrey}>\n                            <strong>{row.getStayDateRange('ddd, MMM D, YYYY', ' -')}</strong>\n                        </Text>\n                    </div>\n                    {row.isPromoCodeValid() && (\n                        <div className=\"u-marg-left d-flex align-items-center\">\n                            <Pill type={PillType.Success} icon={IconType.Money}>\n                                {row.getPromoCode()}\n                            </Pill>\n                        </div>\n                    )}\n                </div>\n                <div className=\"u-flex align-items-center\">\n                    <div className=\"u-flex align-items-center room-builder-progress--edit\">\n                        <Tooltip title={t(Translation.Step.Room.EditThisRoom)}>\n                            <div className=\"u-flex align-items-center\">\n                                <BEButton isText size=\"tiny\" onClick={onClickEditRoom}>\n                                    {t(Translation.Misc.Edit).toUpperCase()}\n                                </BEButton>\n                            </div>\n                        </Tooltip>\n                    </div>\n                    {removeButton}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            className={cx(styles['user-search-summary-row'], {\n                [styles['--selected']]: isSelectedRow,\n                [styles['--valid']]: isValid,\n                [styles['--has-dark-bg']]: shouldTextBeWhite,\n            })}\n        >\n            <div className={styles['user-search-summary-row--inner']}>\n                <div className={styles['user-search-summary-row__group']}>\n                    <Text inline bold className={styles['user-search-summary-row__group-label']} color={textColor}>\n                        Dates:\n                    </Text>\n                    <FloatingDatePicker\n                        startDate={row.getStartDate()}\n                        endDate={row.getEndDate()}\n                        selectedDateChanged={updateDateValues}\n                        isAboveNav\n                        className={styles['user-search-summary-row__input']}\n                    >\n                        <Tooltip disabled={!isSelectedRow} title={t(Translation.Step.Date.SelectArrivalAndDepartureDatesByClickingHere)}>\n                            <div className=\"u-flex align-items-center justify-content-center u-w-100@xl- u-cursor-pointer\">\n                                <Text color={shouldTextBeWhite ? Color.White : Color.Accent} bold className=\"u-nowrap\">\n                                    {row.getArrivalDate()}\n                                </Text>\n                                <Icon icon={IconType.ArrowRight2} color={shouldTextBeWhite ? Color.White : undefined} />\n                                <Text color={shouldTextBeWhite ? Color.White : Color.Accent} bold className=\"u-nowrap\">\n                                    {row.getDepartureDate()}\n                                </Text>\n                            </div>\n                        </Tooltip>\n                    </FloatingDatePicker>\n                </div>\n                <div className={styles['user-search-summary-row__divider']} />\n                <div className={styles['user-search-summary-row__group']}>\n                    <Text inline bold className={styles['user-search-summary-row__group-label']} color={textColor}>\n                        Who:\n                    </Text>\n                    <div className={styles['user-search-summary-row__input']}>\n                        <NumberOfAdultsPicker row={row} onChange={updateNumberOfAdultsOnChange} labelColor={textColor} />\n                    </div>\n                    <div className={styles['user-search-summary-row__input']}>\n                        <NumberOfChildrenPicker row={row} onChange={updateNumberOfChildrenOnChange} labelColor={textColor} />\n                    </div>\n                </div>\n                {!isHidingPromoField && (\n                    <>\n                        <div className={styles['user-search-summary-row__divider']} />\n                        <div className={styles['user-search-summary-row__group']}>\n                            <div className={styles['user-search-summary-row__input']}>\n                                <UserSearchSummaryPromocdeInput row={row} onChange={changePromoCode} disabled={!isSelectedRow} promocodeTextColor={textColor} useUpdatedDesign />\n                            </div>\n                        </div>\n                    </>\n                )}\n            </div>\n\n            <div className={styles['user-search-summary-row--buttons']}>\n                {isSelectedRow && isValid ? (\n                    <>\n                        <BEButton isText size=\"tiny\" onClick={onClickCancelRoomChanges} textColor={textColor}>\n                            {t(Translation.Misc.Cancel)}\n                        </BEButton>\n                    </>\n                ) : (\n                    removeButton\n                )}\n            </div>\n            <div className={styles['user-search-summary-row--mobile-select-label']}>\n                <Text type={sizeMediumDown ? TextType.Small : TextType.Body} color={textColor} bold>\n                    Select room for\n                </Text>\n            </div>\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"UserSearchSummaryRow.js","sourceRoot":"/","sources":["src/components/steps/room/UserSearchSummary/UserSearchSummaryRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { BasketContext, BookingEngineContext, CompanyContext } from '@frontend/contexts';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { default as cx } from 'classnames';\nimport dayjs from 'dayjs';\nimport React, { useContext, useMemo, useRef } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport BEButton from '@/components/generic/BEButton';\nimport FloatingDatePicker from '@/components/generic/date/FloatingDatePicker';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport Pill, { PillType } from '@/components/generic/Pill';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport BasketRow from '@/models/BasketRow';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\nimport DataLayer, { InteractionStep, InteractionType } from '@/util/DataLayer';\nimport ScreenSize from '@/util/ScreenSize';\nimport StringHelper from '@/util/StringHelper';\n\nimport { EBookingWizardTheme } from '../../../generic/BookingWizard/BookingWizard';\nimport { BookingWizardContext, BookingWizardContextType, BookingWizardOnBooking } from '../../../generic/BookingWizard/BookingWizardContext';\nimport { BookingWizardGuestSelector } from '../../../generic/BookingWizard/BookingWizardGuestSelector/BookingWizardGuestSelector';\nimport { UserSearchSummaryPromocodeInput } from './UserSearchSummaryPromocodeInput';\nimport styles from './UserSearchSummaryRow.module.scss';\n\ntype UserSearchSummaryRowProps = {\n    row: BasketRow;\n    index: number;\n};\n\nexport const UserSearchSummaryRow = ({ row, index }: UserSearchSummaryRowProps) => {\n    const { t } = useTranslation();\n    const removeButtonRef = useRef<any>();\n    const { isAccent2ColorDark, hotel } = useCurrentHotel();\n\n    const { selectedBasketRow, currentBasketRows, updateBasketRow, removeBasketRow, selectBasketRow } = useContext(BasketContext);\n    const { isHidingPromoField } = useContext(CompanyContext);\n\n    const engineContext = useContext(BookingEngineContext);\n\n    const isSelectedRow = useMemo(() => {\n        return selectedBasketRow?.getID() === row?.getID();\n    }, [selectedBasketRow]);\n\n    const canRemove = currentBasketRows.length > 1;\n    const removeRoomOnClick = () => {\n        DataLayer.instance.sendInteraction('Remove Room', InteractionType.BUTTON, InteractionStep.ROOMS);\n        removeBasketRow(row);\n    };\n\n    const updatePeopleValues = ({ adults, children, infants, updatedPromoCode }: { adults?: number; children?: number; infants?: number; updatedPromoCode?: string }) => {\n        if (adults && adults !== row.getAdults()) {\n            DataLayer.instance.sendInteraction('Guests', InteractionType.NUMBER_INPUT, InteractionStep.ROOMS);\n            row.setAdults(adults);\n        }\n\n        if ((children || children === 0) && children !== row.getChildren()) {\n            DataLayer.instance.sendInteraction('Guests', InteractionType.NUMBER_INPUT, InteractionStep.ROOMS);\n            row.setChildren(children);\n        }\n\n        if ((infants || infants === 0) && infants !== row.getInfants()) {\n            DataLayer.instance.sendInteraction('Guests', InteractionType.NUMBER_INPUT, InteractionStep.ROOMS);\n            row.setInfants(infants);\n        }\n\n        if ((updatedPromoCode || updatedPromoCode === '') && updatedPromoCode !== row.getPromoCode()) {\n            DataLayer.instance.sendInteraction('Promo Code', InteractionType.FORM_FIELD, InteractionStep.ROOMS);\n            row.setPromoCode(updatedPromoCode);\n        }\n\n        updateBasketRow(row);\n    };\n\n    const updatePromoCode = (code: string) => {\n        DataLayer.instance.sendInteraction('Promo Code', InteractionType.FORM_FIELD, InteractionStep.ROOMS);\n\n        if (selectedBasketRow) {\n            selectedBasketRow.setPromoCode(code);\n            updateBasketRow(selectedBasketRow);\n        }\n    };\n\n    const updateDateValues = (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => {\n        if (startDate) {\n            row.setStartDate(startDate);\n        }\n\n        if (endDate) {\n            row.setEndDate(endDate);\n        }\n\n        updateBasketRow(row);\n    };\n\n    const setGuest = (guests: BookingWizardOnBooking['guests']) => {\n        updatePeopleValues({\n            adults: guests.adults,\n            children: guests.children,\n            infants: guests.infants,\n        });\n    };\n\n    const changePromoCode = (val: any) => {\n        updatePromoCode(val);\n    };\n\n    const onClickCancelRoomChanges = () => {\n        DataLayer.instance.sendInteraction('Cancel Room Changes', InteractionType.LINK, InteractionStep.ROOMS);\n        selectBasketRow(null);\n    };\n    const onClickEditRoom = () => {\n        DataLayer.instance.sendInteraction('Edit Room', InteractionType.LINK, InteractionStep.ROOMS);\n        selectBasketRow(row);\n    };\n\n    const isValid = row.isValid();\n    const isLargerThanLarge = engineContext.screenSize > ScreenSize.ExtraLarge;\n\n    const sizeMediumDown = engineContext.screenSize <= ScreenSize.Medium;\n\n    const shouldTextBeWhite = (isValid ? isAccent2ColorDark : false) && isSelectedRow;\n\n    const textColor = shouldTextBeWhite ? Color.White : undefined;\n\n    const removeButton = (\n        <Tooltip\n            title={canRemove ? 'Remove this room' : 'Cannot remove this room as at least one must be selected.'}\n            followElement={removeButtonRef?.current}\n            wrapperClasses={styles['user-search-summary-row__remove-tooltip']}\n        >\n            <div className={styles['user-search-summary-row__remove']} onClick={removeRoomOnClick} ref={removeButtonRef}>\n                <BEButton textColor={textColor} isText icon={IconType.Close} iconPosition=\"right\" stopIconAnimation disabled={!canRemove} onClick={removeRoomOnClick} />\n            </div>\n        </Tooltip>\n    );\n\n    const bookingWizardContext: BookingWizardContextType = {\n        layout: 'booking-summary',\n        theme: EBookingWizardTheme.Default,\n        type: sizeMediumDown ? 'top-sheet' : 'popup',\n    };\n\n    if (isValid && !isSelectedRow) {\n        return (\n            <div className={`${styles['user-completed-summary-row']} u-flex w-100`}>\n                <div className=\"u-flex justify-content-start\">\n                    <div className=\"u-flex flex-column\">\n                        <span>\n                            <Text inline={isLargerThanLarge}>\n                                <strong>{row.getRoom().name}</strong>\n                            </Text>\n                            <Text inline={isLargerThanLarge} type={isLargerThanLarge ? TextType.Body : TextType.Small}>\n                                <span className=\"u-marg-left--light@xl\">\n                                    {StringHelper.pluralWithDictAndCount(row.getAdults(), Translation.Step.Date.Adult, t)}\n                                    ,&nbsp;\n                                    {StringHelper.pluralWithDictAndCount(row.getChildren(), Translation.Step.Date.Child, t)}\n                                    {hotel?.childConfiguration?.supportInfants ? (\n                                        <>\n                                            ,&nbsp;\n                                            {StringHelper.pluralWithDictAndCount(row.getInfants(), Translation.Step.Date.Infant, t)}\n                                        </>\n                                    ) : null}\n                                </span>\n                            </Text>\n                        </span>\n                        <Text type={TextType.Caption} color={Color.DarkGrey}>\n                            <strong>{row.getStayDateRange('ddd, MMM D, YYYY', ' -')}</strong>\n                        </Text>\n                    </div>\n                    {row.isPromoCodeValid() && (\n                        <div className=\"u-marg-left d-flex align-items-center\">\n                            <Pill type={PillType.Success} icon={IconType.Money}>\n                                {row.getPromoCode()}\n                            </Pill>\n                        </div>\n                    )}\n                </div>\n                <div className=\"u-flex align-items-center\">\n                    <div className=\"u-flex align-items-center room-builder-progress--edit\">\n                        <Tooltip title={t(Translation.Step.Room.EditThisRoom)}>\n                            <div className=\"u-flex align-items-center\">\n                                <BEButton isText size=\"tiny\" onClick={onClickEditRoom}>\n                                    {t(Translation.Misc.Edit).toUpperCase()}\n                                </BEButton>\n                            </div>\n                        </Tooltip>\n                    </div>\n                    {removeButton}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            className={cx(styles['user-search-summary-row'], {\n                [styles['--selected']]: isSelectedRow,\n                [styles['--valid']]: isValid,\n                [styles['--has-dark-bg']]: shouldTextBeWhite,\n            })}\n        >\n            <div className={styles['user-search-summary-row--inner']}>\n                <div className={styles['user-search-summary-row__group']}>\n                    <FloatingDatePicker\n                        startDate={row.getStartDate()}\n                        endDate={row.getEndDate()}\n                        selectedDateChanged={updateDateValues}\n                        isAboveNav\n                        className={styles['user-search-summary-row__input']}\n                    >\n                        <Tooltip disabled={!isSelectedRow} title={t(Translation.Step.Date.SelectArrivalAndDepartureDatesByClickingHere)}>\n                            <div className=\"u-flex align-items-center justify-content-center u-w-100@xl- u-cursor-pointer\">\n                                <div className={styles['user-search-summary-card-date-range']}>\n                                    <div className={styles['user-search-summary-card-date-range--item']}>\n                                        <div className={styles['user-search-summary-card-label']}>{t(Translation.Misc.CheckIn)}</div>\n                                        <Text color={shouldTextBeWhite ? Color.White : Color.Accent} bold className=\"u-nowrap\">\n                                            {row.getArrivalDate()}\n                                        </Text>\n                                    </div>\n                                    <div className={styles['user-search-summary-card-date-range--icon']}>\n                                        <Icon icon={IconType.ArrowRight2} color={shouldTextBeWhite ? Color.White : undefined} />\n                                    </div>\n                                    <div className={styles['user-search-summary-card-date-range--item']}>\n                                        <div className={styles['user-search-summary-card-label']}>{t(Translation.Misc.CheckOut)}</div>\n                                        <Text color={shouldTextBeWhite ? Color.White : Color.Accent} bold className=\"u-nowrap\">\n                                            {row.getDepartureDate()}\n                                        </Text>\n                                    </div>\n                                </div>\n                            </div>\n                        </Tooltip>\n                    </FloatingDatePicker>\n                </div>\n                <div className={styles['user-search-summary-row__divider']} />\n                <div className={styles['user-search-summary-row__group']}>\n                    <div className={styles['user-search-summary-row__input']}>\n                        <div className={styles['user-search-summary-card-item']}>\n                            <div className={styles['user-search-summary-card-label']}>{t(Translation.Misc.Who)}</div>\n                            <BookingWizardContext.Provider value={bookingWizardContext}>\n                                <BookingWizardGuestSelector\n                                    defaultValue={{\n                                        adults: row.getAdults(),\n                                        children: row.getChildren(),\n                                        infants: row.getInfants(),\n                                    }}\n                                    onChange={setGuest}\n                                    disableChild={engineContext.engine.getConfig().disableChild}\n                                    disableRoom\n                                />\n                            </BookingWizardContext.Provider>\n                        </div>\n                    </div>\n                </div>\n                {!isHidingPromoField && (\n                    <>\n                        <div className={styles['user-search-summary-row__divider']} />\n                        <div className={styles['user-search-summary-row__group']}>\n                            <div className={styles['user-search-summary-row__input']}>\n                                <UserSearchSummaryPromocodeInput row={row} onChange={changePromoCode} disabled={!isSelectedRow} promocodeTextColor={textColor} useUpdatedDesign />\n                            </div>\n                        </div>\n                    </>\n                )}\n            </div>\n\n            <div className={styles['user-search-summary-row--buttons']}>\n                {isSelectedRow && isValid ? (\n                    <BEButton isText size=\"tiny\" onClick={onClickCancelRoomChanges} textColor={textColor}>\n                        {t(Translation.Misc.Cancel)}\n                    </BEButton>\n                ) : (\n                    removeButton\n                )}\n            </div>\n        </div>\n    );\n};\n"]}

package/dist/src/components/steps/room/roomBuilderProgress/NumberOfInfantsPicker.d.ts

@@ -0,0 +1,9 @@
+import BasketRow from '../../../../models/BasketRow';
+import { Color } from '../../../../util/Color';
+interface NumberOfInfantsPickerProps {
+    row: BasketRow;
+    onChange: (value: string) => void;
+    labelColor?: Color;
+}
+export default function NumberOfInfantsPicker(props: NumberOfInfantsPickerProps): JSX.Element;
+export {};

package/dist/src/components/steps/room/roomBuilderProgress/NumberOfInfantsPicker.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const hooks_1 = require("../../../../hooks/index.js");
+const react_1 = __importDefault(require("react"));
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("translations/Translation");
+const Select_1 = require("../../../generic/Select/Select");
+const StringHelper_1 = __importDefault(require("../../../../util/StringHelper"));
+function NumberOfInfantsPicker(props) {
+    var _a, _b, _c;
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const selectedValue = (_b = (_a = props.row) === null || _a === void 0 ? void 0 : _a.getInfants()) !== null && _b !== void 0 ? _b : 1;
+    let maxOccupancy = Math.max((hotel === null || hotel === void 0 ? void 0 : hotel.maxOccupancy) + 1 - ((_c = props.row) === null || _c === void 0 ? void 0 : _c.getAdults()));
+    // Just in Case
+    if (maxOccupancy < 1 || isNaN(maxOccupancy)) {
+        maxOccupancy = 1;
+    }
+    return (react_1.default.createElement(Select_1.Select, { nativeOnMobile: true, options: [...Array(maxOccupancy)].map((v, value) => {
+            return {
+                text: StringHelper_1.default.pluralWithDictAndCount(value, Translation_1.Translation.Step.Date.Infant, t),
+                value: value.toString(),
+            };
+        }), value: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.toString(), onChange: props.onChange, keyName: "value", labelName: "text", inputLabelColor: props.labelColor }));
+}
+exports.default = NumberOfInfantsPicker;
+//# sourceMappingURL=NumberOfInfantsPicker.js.map

package/dist/src/components/steps/room/roomBuilderProgress/NumberOfInfantsPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberOfInfantsPicker.js","sourceRoot":"/","sources":["src/components/steps/room/roomBuilderProgress/NumberOfInfantsPicker.tsx"],"names":[],"mappings":";;;;;AAAA,2CAAkD;AAClD,kDAA0B;AAC1B,iDAA+C;AAC/C,0DAAuD;AAEvD,+DAAkF;AAGlF,uEAA+C;AAS/C,SAAwB,qBAAqB,CAAC,KAAiC;;IAC3E,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IAEpC,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,aAAa,GAAG,MAAA,MAAA,KAAK,CAAC,GAAG,0CAAE,UAAU,EAAE,mCAAI,CAAC,CAAC;IACnD,IAAI,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAuB,IAAG,CAAC,IAAG,MAAA,KAAK,CAAC,GAAG,0CAAE,SAAS,EAAE,CAAA,CAAC,CAAC;IAC1F,eAAe;IACf,IAAI,YAAY,GAAG,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,EAAE;QACzC,YAAY,GAAG,CAAC,CAAC;KACpB;IAED,OAAO,CACH,8BAAC,eAAM,IACH,cAAc,QACd,OAAO,EAAE,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,KAAa,EAAE,EAAE;YAC5D,OAAO;gBACH,IAAI,EAAE,sBAAY,CAAC,sBAAsB,CAAC,KAAK,EAAE,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;gBACjF,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;aAC1B,CAAC;QACN,CAAC,CAAC,EACF,KAAK,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,EAAE,EAChC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAC,OAAO,EACf,SAAS,EAAC,MAAM,EAChB,eAAe,EAAE,KAAK,CAAC,UAAU,GACnC,CACL,CAAC;AACN,CAAC;AA5BD,wCA4BC","sourcesContent":["import { useCurrentHotel } from '@frontend/hooks';\nimport React from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport { IDefaultSelectOption, Select } from '@/components/generic/Select/Select';\nimport BasketRow from '@/models/BasketRow';\nimport { Color } from '@/util/Color';\nimport StringHelper from '@/util/StringHelper';\n\ninterface NumberOfInfantsPickerProps {\n    row: BasketRow;\n    onChange: (value: string) => void;\n\n    labelColor?: Color;\n}\n\nexport default function NumberOfInfantsPicker(props: NumberOfInfantsPickerProps) {\n    const { hotel } = useCurrentHotel();\n\n    const { t } = useTranslation();\n\n    const selectedValue = props.row?.getInfants() ?? 1;\n    let maxOccupancy = Math.max((hotel?.maxOccupancy as number) + 1 - props.row?.getAdults());\n    // Just in Case\n    if (maxOccupancy < 1 || isNaN(maxOccupancy)) {\n        maxOccupancy = 1;\n    }\n\n    return (\n        <Select<IDefaultSelectOption, 'value'>\n            nativeOnMobile\n            options={[...Array(maxOccupancy)].map((v: any, value: number) => {\n                return {\n                    text: StringHelper.pluralWithDictAndCount(value, Translation.Step.Date.Infant, t),\n                    value: value.toString(),\n                };\n            })}\n            value={selectedValue?.toString()}\n            onChange={props.onChange}\n            keyName=\"value\"\n            labelName=\"text\"\n            inputLabelColor={props.labelColor}\n        />\n    );\n}\n"]}

package/dist/src/components/steps/room/roomBuilderProgress/RoomBuilderProgressRow.js

@@ -45,11 +45,14 @@ const Color_1 = require("../../../../util/Color");
 const DataLayer_1 = __importStar(require("../../../../util/DataLayer"));
 const ScreenSize_1 = __importDefault(require("../../../../util/ScreenSize"));
 const StringHelper_1 = __importDefault(require("../../../../util/StringHelper"));
+const hooks_1 = require("../../../../hooks");
+const NumberOfInfantsPicker_1 = __importDefault(require("./NumberOfInfantsPicker"));
 function RoomBuilderProgressRow(props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const context = (0, react_1.useContext)(contexts_1.BasketContext);
     const engineContext = (0, react_1.useContext)(contexts_1.BookingEngineContext);
     const { isHidingPromoField } = (0, react_1.useContext)(contexts_1.CompanyContext);
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
     const { t } = (0, react_i18next_1.useTranslation)();
     const [isEditing, setIsEditing] = (0, react_1.useState)(false);
     const { row } = props;
@@ -65,7 +68,7 @@ function RoomBuilderProgressRow(props) {
             setIsEditing(false);
         }
     }, [context.selectBasketRow]);
-    const updatePeopleValues = ({ adults, children, updatedPromoCode }) => {
+    const updatePeopleValues = ({ adults, children, infants, updatedPromoCode }) => {
         if (adults && adults !== row.getAdults()) {
             DataLayer_1.default.instance.sendInteraction('Guests', DataLayer_1.InteractionType.NUMBER_INPUT, DataLayer_1.InteractionStep.ROOMS);
             row.setAdults(adults);
@@ -74,6 +77,10 @@ function RoomBuilderProgressRow(props) {
             DataLayer_1.default.instance.sendInteraction('Guests', DataLayer_1.InteractionType.NUMBER_INPUT, DataLayer_1.InteractionStep.ROOMS);
             row.setChildren(children);
         }
+        if ((infants || infants === 0) && infants !== row.getInfants()) {
+            DataLayer_1.default.instance.sendInteraction('Guests', DataLayer_1.InteractionType.NUMBER_INPUT, DataLayer_1.InteractionStep.ROOMS);
+            row.setInfants(infants);
+        }
         if ((updatedPromoCode || updatedPromoCode === '') && updatedPromoCode !== row.getPromoCode()) {
             DataLayer_1.default.instance.sendInteraction('Promo Code', DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.ROOMS);
             row.setPromoCode(updatedPromoCode);
@@ -156,6 +163,9 @@ function RoomBuilderProgressRow(props) {
     const updateNumberOfChildrenOnChange = (value) => {
         updatePeopleValues({ children: +value });
     };
+    const updateNumberOfInfantsOnChange = (value) => {
+        updatePeopleValues({ infants: +value });
+    };
     return (react_1.default.createElement("div", { className: classes }, isCurrent || !row.isValid() ? (react_1.default.createElement("div", { className: "u-flex w-100" },
         react_1.default.createElement("div", { className: "u-flex flex-wrap flex-xl-nowrap flex-row u-w-100@xl- align-items-center" },
             react_1.default.createElement("div", null, row.isValid() ? (react_1.default.createElement(Text_1.default, null,
@@ -176,6 +186,9 @@ function RoomBuilderProgressRow(props) {
                 react_1.default.createElement(Tooltip_1.default, { title: t(Translation_1.Translation.Step.Date.UpdateChildren), wrapperClasses: "u-w-100@xl- d-flex" },
                     react_1.default.createElement("div", { className: "room-builder-progress--value u-flex-justify-center u-flex" },
                         react_1.default.createElement(NumberOfChildrenPicker_1.default, { row: row, onChange: updateNumberOfChildrenOnChange }))),
+                react_1.default.createElement(Tooltip_1.default, { title: t(Translation_1.Translation.Step.Date.UpdateInfants), wrapperClasses: "u-w-100@xl- d-flex" },
+                    react_1.default.createElement("div", { className: "room-builder-progress--value u-flex-justify-center u-flex" },
+                        react_1.default.createElement(NumberOfInfantsPicker_1.default, { row: row, onChange: updateNumberOfInfantsOnChange }))),
                 react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement("div", { className: "room-builder-progress--value" },
                         react_1.default.createElement(FloatingDatePicker_1.default, { startDate: row.getStartDate(), selectedDateChanged: updateDateValues, className: "u-w-100@xl- d-flex align-items-center justify-content-center", isAboveNav: true },
@@ -214,7 +227,10 @@ function RoomBuilderProgressRow(props) {
                         react_1.default.createElement("span", { className: "u-marg-left--light@xl" },
                             StringHelper_1.default.pluralWithDictAndCount(row.getAdults(), Translation_1.Translation.Step.Date.Adult, t),
                             ",\u00A0",
-                            StringHelper_1.default.pluralWithDictAndCount(row.getChildren(), Translation_1.Translation.Step.Date.Child, t)))),
+                            StringHelper_1.default.pluralWithDictAndCount(row.getChildren(), Translation_1.Translation.Step.Date.Child, t),
+                            ((_d = hotel === null || hotel === void 0 ? void 0 : hotel.childConfiguration) === null || _d === void 0 ? void 0 : _d.supportInfants) ? (react_1.default.createElement(react_1.default.Fragment, null,
+                                ",\u00A0",
+                                StringHelper_1.default.pluralWithDictAndCount(row.getInfants(), Translation_1.Translation.Step.Date.Infant, t))) : null))),
                 react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Caption, color: Color_1.Color.DarkGrey },
                     react_1.default.createElement("strong", null, row.getStayDateRange('ddd, MMM D, YYYY', ' -')))),
             row.isPromoCodeValid() && !isHidingPromoField && (react_1.default.createElement("div", { className: "u-marg-left d-flex align-items-center" },