@roomstay/frontend 2.1.6 → 2.1.8

package/dist/src/components/steps/room/StepRoomSortBy.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepRoomSortBy.js","sourceRoot":"/","sources":["src/components/steps/room/StepRoomSortBy.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,iCAA6C;AAC7C,mEAAwD;AACxD,8DAA+E;AAC/E,iDAA0D;AAC1D,4DAAoC;AACpC,mEAA2C;AAC3C,+DAA4D;AAO5D,SAAwB,cAAc;IAClC,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,OAAO,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM,CAAC;IACzD,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACnD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IAChE,MAAM,eAAe,GAAG,CAAC,QAAkB,EAAE,EAAE;QAC3C,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,aAAa,EAAE,2BAAe,CAAC,QAAQ,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;QACnG,SAAS,CAAC,QAAQ,CAAC,CAAC;QACpB,SAAS,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAC3C,CAAC,CAAC;IACF,OAAO,CACH,oBAAC,eAAM,IACH,cAAc,QACd,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,2BAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;YAC9C,OAAO;gBACH,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,QAAQ;aAClB,CAAC;QACN,CAAC,CAAC,EACF,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,eAAe,EACzB,OAAO,EAAC,OAAO,EACf,SAAS,EAAC,MAAM,EAChB,SAAS,EAAE,IAAA,oBAAU,EAAC,2BAA2B,EAAE;YAC/C,YAAY,EAAE,QAAQ;SACzB,CAAC,GACJ,CACL,CAAC;AACN,CAAC;AA5BD,iCA4BC","sourcesContent":["import * as React from 'react';\nimport { useContext, useState } from 'react';\nimport { RoomSort } from '@/providers/RoomSortProvider';\nimport DataLayer, { InteractionStep, InteractionType } from '@/util/DataLayer';\nimport { BookingEngineContext } from '@frontend/contexts';\nimport classNames from 'classnames';\nimport ScreenSize from '@/util/ScreenSize';\nimport { Select } from '@/components/generic/Select/Select';\n\ninterface ISortSelectOption {\n    value: RoomSort;\n    text: string;\n}\n\nexport default function StepRoomSortBy() {\n    const context = useContext(BookingEngineContext);\n    const isMobile = context.screenSize <= ScreenSize.Medium;\n    const beContext = useContext(BookingEngineContext);\n    const [sortBy, setSortBy] = useState(beContext.currentRoomSort);\n    const onChangeHandler = (selected: RoomSort) => {\n        DataLayer.instance.sendInteraction('Change Sort', InteractionType.DROPDOWN, InteractionStep.ROOMS);\n        setSortBy(selected);\n        beContext.setCurrentRoomSort(selected);\n    };\n    return (\n        <Select<ISortSelectOption, 'value'>\n            nativeOnMobile\n            options={Object.values(RoomSort).map((sortName) => {\n                return {\n                    text: sortName,\n                    value: sortName,\n                };\n            })}\n            value={sortBy}\n            onChange={onChangeHandler}\n            keyName=\"value\"\n            labelName=\"text\"\n            className={classNames('u-flex align-items-center', {\n                'text-small': isMobile,\n            })}\n        />\n    );\n}\n"]}
+{"version":3,"file":"StepRoomSortBy.js","sourceRoot":"/","sources":["src/components/steps/room/StepRoomSortBy.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,iCAA6C;AAC7C,mEAAwD;AACxD,8DAA+E;AAC/E,iDAA0D;AAC1D,4DAAoC;AACpC,mEAA2C;AAC3C,+DAA4D;AAO5D,SAAwB,cAAc;IAClC,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,OAAO,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM,CAAC;IACzD,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACnD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IAChE,MAAM,eAAe,GAAG,CAAC,QAAkB,EAAE,EAAE;QAC3C,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,aAAa,EAAE,2BAAe,CAAC,QAAQ,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;QACnG,SAAS,CAAC,QAAQ,CAAC,CAAC;QACpB,SAAS,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAC3C,CAAC,CAAC;IACF,OAAO,CACH,8BAAC,eAAM,IACH,cAAc,QACd,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,2BAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;YAC9C,OAAO;gBACH,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,QAAQ;aAClB,CAAC;QACN,CAAC,CAAC,EACF,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,eAAe,EACzB,OAAO,EAAC,OAAO,EACf,SAAS,EAAC,MAAM,EAChB,SAAS,EAAE,IAAA,oBAAU,EAAC,2BAA2B,EAAE;YAC/C,YAAY,EAAE,QAAQ;SACzB,CAAC,GACJ,CACL,CAAC;AACN,CAAC;AA5BD,iCA4BC","sourcesContent":["import React from 'react';\nimport { useContext, useState } from 'react';\nimport { RoomSort } from '@/providers/RoomSortProvider';\nimport DataLayer, { InteractionStep, InteractionType } from '@/util/DataLayer';\nimport { BookingEngineContext } from '@frontend/contexts';\nimport classNames from 'classnames';\nimport ScreenSize from '@/util/ScreenSize';\nimport { Select } from '@/components/generic/Select/Select';\n\ninterface ISortSelectOption {\n    value: RoomSort;\n    text: string;\n}\n\nexport default function StepRoomSortBy() {\n    const context = useContext(BookingEngineContext);\n    const isMobile = context.screenSize <= ScreenSize.Medium;\n    const beContext = useContext(BookingEngineContext);\n    const [sortBy, setSortBy] = useState(beContext.currentRoomSort);\n    const onChangeHandler = (selected: RoomSort) => {\n        DataLayer.instance.sendInteraction('Change Sort', InteractionType.DROPDOWN, InteractionStep.ROOMS);\n        setSortBy(selected);\n        beContext.setCurrentRoomSort(selected);\n    };\n    return (\n        <Select<ISortSelectOption, 'value'>\n            nativeOnMobile\n            options={Object.values(RoomSort).map((sortName) => {\n                return {\n                    text: sortName,\n                    value: sortName,\n                };\n            })}\n            value={sortBy}\n            onChange={onChangeHandler}\n            keyName=\"value\"\n            labelName=\"text\"\n            className={classNames('u-flex align-items-center', {\n                'text-small': isMobile,\n            })}\n        />\n    );\n}\n"]}

package/dist/src/components/steps/room/StepRoomSummaryAndButton.js

@@ -1,49 +1,26 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const StepRoomNextStepButton_1 = __importDefault(require("./StepRoomNextStepButton"));
 const react_router_dom_1 = require("react-router-dom");
 const ScreenSize_1 = __importDefault(require("../../../util/ScreenSize"));
-const react_1 = require("react");
+const react_2 = require("react");
 const BESummary_1 = require("../../summary/BESummary");
 const react_use_measure_1 = __importDefault(require("react-use-measure"));
 const contexts_1 = require("../../../contexts/index.js");
 const BESummaryPrivacyPolicy_1 = __importDefault(require("../../summary/BESummaryPrivacyPolicy"));
 const contexts_2 = require("../../../contexts/index.js");
 function StepRoomSummaryAndButton() {
-    const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
-    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
-    const { currentStep } = (0, react_1.useContext)(contexts_2.FullPageEngineContext);
+    const context = (0, react_2.useContext)(contexts_1.BookingEngineContext);
+    const basketContext = (0, react_2.useContext)(contexts_1.BasketContext);
+    const { currentStep } = (0, react_2.useContext)(contexts_2.FullPageEngineContext);
     const history = (0, react_router_dom_1.useHistory)();
-    const [styles, setStyles] = (0, react_1.useState)({ top: 0 });
+    const [styles, setStyles] = (0, react_2.useState)({ top: 0 });
     const [measureBind, bounds] = (0, react_use_measure_1.default)();
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         const screenHeight = window.innerHeight;
         const { height } = bounds;
         if (screenHeight < height) {
@@ -53,14 +30,14 @@ function StepRoomSummaryAndButton() {
             setStyles({ top: 150 });
         }
     }, [bounds]);
-    return (0, react_1.useMemo)(() => (React.createElement("div", { ref: measureBind, style: Object.assign({ position: 'sticky' }, styles) },
-        !!basketContext.getAllValidRows().length && (React.createElement("div", { className: "u-marg-bottom--heavy" },
-            React.createElement(StepRoomNextStepButton_1.default, { currentStep: currentStep, history: history }))),
-        context.screenSize > ScreenSize_1.default.Medium && React.createElement(BESummary_1.BESummary, null),
-        React.createElement("div", { className: "u-marg-top--heavy" },
-            React.createElement(StepRoomNextStepButton_1.default, { currentStep: currentStep, history: history })),
-        context.screenSize > ScreenSize_1.default.Medium && (React.createElement("div", { className: "u-marg-top--heavy" },
-            React.createElement(BESummaryPrivacyPolicy_1.default, null))))), [context.screenSize, styles.top]);
+    return (0, react_2.useMemo)(() => (react_1.default.createElement("div", { ref: measureBind, style: Object.assign({ position: 'sticky' }, styles) },
+        !!basketContext.getAllValidRows().length && (react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
+            react_1.default.createElement(StepRoomNextStepButton_1.default, { currentStep: currentStep, history: history }))),
+        context.screenSize > ScreenSize_1.default.Medium && react_1.default.createElement(BESummary_1.BESummary, null),
+        react_1.default.createElement("div", { className: "u-marg-top--heavy" },
+            react_1.default.createElement(StepRoomNextStepButton_1.default, { currentStep: currentStep, history: history })),
+        context.screenSize > ScreenSize_1.default.Medium && (react_1.default.createElement("div", { className: "u-marg-top--heavy" },
+            react_1.default.createElement(BESummaryPrivacyPolicy_1.default, null))))), [context.screenSize, styles.top]);
 }
 exports.default = StepRoomSummaryAndButton;
 //# sourceMappingURL=StepRoomSummaryAndButton.js.map

package/dist/src/components/steps/room/StepRoomSummaryAndButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepRoomSummaryAndButton.js","sourceRoot":"/","sources":["src/components/steps/room/StepRoomSummaryAndButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,4GAAoF;AACpF,uDAA8C;AAC9C,mEAA2C;AAC3C,iCAAiE;AACjE,8DAA2D;AAC3D,0EAA2C;AAC3C,iDAAyE;AACzE,yGAAiF;AACjF,iDAA2D;AAE3D,SAAwB,wBAAwB;IAC5C,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACjD,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAEhD,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAU,EAAC,gCAAqB,CAAC,CAAC;IAE1D,MAAM,OAAO,GAAG,IAAA,6BAAU,GAAE,CAAC;IAE7B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAkB,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;IAClE,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,GAAG,IAAA,2BAAU,GAAE,CAAC;IAE3C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,MAAM,YAAY,GAAG,MAAM,CAAC,WAAW,CAAC;QAExC,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;QAE1B,IAAI,YAAY,GAAG,MAAM,EAAE;YACvB,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,GAAG,YAAY,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;SACrD;aAAM;YACH,SAAS,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;SAC3B;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,IAAA,eAAO,EACV,GAAG,EAAE,CAAC,CACF,6BAAK,GAAG,EAAE,WAAW,EAAE,KAAK,kBAAI,QAAQ,EAAE,QAAQ,IAAK,MAAM;QACxD,CAAC,CAAC,aAAa,CAAC,eAAe,EAAE,CAAC,MAAM,IAAI,CACzC,6BAAK,SAAS,EAAC,sBAAsB;YACjC,oBAAC,gCAAsB,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,GAAI,CACpE,CACT;QACA,OAAO,CAAC,UAAU,GAAG,oBAAU,CAAC,MAAM,IAAI,oBAAC,qBAAS,OAAG;QACxD,6BAAK,SAAS,EAAC,mBAAmB;YAC9B,oBAAC,gCAAsB,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,GAAI,CACpE;QACL,OAAO,CAAC,UAAU,GAAG,oBAAU,CAAC,MAAM,IAAI,CACvC,6BAAK,SAAS,EAAC,mBAAmB;YAC9B,oBAAC,gCAAsB,OAAG,CACxB,CACT,CACC,CACT,EACD,CAAC,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,CAAC,CACnC,CAAC;AACN,CAAC;AA5CD,2CA4CC","sourcesContent":["import * as React from 'react';\nimport StepRoomNextStepButton from '@/components/steps/room/StepRoomNextStepButton';\nimport { useHistory } from 'react-router-dom';\nimport ScreenSize from '@/util/ScreenSize';\nimport { useContext, useState, useEffect, useMemo } from 'react';\nimport { BESummary } from '@/components/summary/BESummary';\nimport useMeasure from 'react-use-measure';\nimport { BasketContext, BookingEngineContext } from '@frontend/contexts';\nimport BESummaryPrivacyPolicy from '@/components/summary/BESummaryPrivacyPolicy';\nimport { FullPageEngineContext } from '@frontend/contexts';\n\nexport default function StepRoomSummaryAndButton() {\n    const context = useContext(BookingEngineContext);\n    const basketContext = useContext(BasketContext);\n\n    const { currentStep } = useContext(FullPageEngineContext);\n\n    const history = useHistory();\n\n    const [styles, setStyles] = useState<{ top: number }>({ top: 0 });\n    const [measureBind, bounds] = useMeasure();\n\n    useEffect(() => {\n        const screenHeight = window.innerHeight;\n\n        const { height } = bounds;\n\n        if (screenHeight < height) {\n            setStyles({ top: -(height - screenHeight + 40) });\n        } else {\n            setStyles({ top: 150 });\n        }\n    }, [bounds]);\n\n    return useMemo(\n        () => (\n            <div ref={measureBind} style={{ position: 'sticky', ...styles }}>\n                {!!basketContext.getAllValidRows().length && (\n                    <div className=\"u-marg-bottom--heavy\">\n                        <StepRoomNextStepButton currentStep={currentStep} history={history} />\n                    </div>\n                )}\n                {context.screenSize > ScreenSize.Medium && <BESummary />}\n                <div className=\"u-marg-top--heavy\">\n                    <StepRoomNextStepButton currentStep={currentStep} history={history} />\n                </div>\n                {context.screenSize > ScreenSize.Medium && (\n                    <div className=\"u-marg-top--heavy\">\n                        <BESummaryPrivacyPolicy />\n                    </div>\n                )}\n            </div>\n        ),\n        [context.screenSize, styles.top]\n    );\n}\n"]}
+{"version":3,"file":"StepRoomSummaryAndButton.js","sourceRoot":"/","sources":["src/components/steps/room/StepRoomSummaryAndButton.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,4GAAoF;AACpF,uDAA8C;AAC9C,mEAA2C;AAC3C,iCAAiE;AACjE,8DAA2D;AAC3D,0EAA2C;AAC3C,iDAAyE;AACzE,yGAAiF;AACjF,iDAA2D;AAE3D,SAAwB,wBAAwB;IAC5C,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACjD,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAEhD,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,kBAAU,EAAC,gCAAqB,CAAC,CAAC;IAE1D,MAAM,OAAO,GAAG,IAAA,6BAAU,GAAE,CAAC;IAE7B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAkB,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;IAClE,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,GAAG,IAAA,2BAAU,GAAE,CAAC;IAE3C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,MAAM,YAAY,GAAG,MAAM,CAAC,WAAW,CAAC;QAExC,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;QAE1B,IAAI,YAAY,GAAG,MAAM,EAAE;YACvB,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,GAAG,YAAY,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;SACrD;aAAM;YACH,SAAS,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;SAC3B;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,IAAA,eAAO,EACV,GAAG,EAAE,CAAC,CACF,uCAAK,GAAG,EAAE,WAAW,EAAE,KAAK,kBAAI,QAAQ,EAAE,QAAQ,IAAK,MAAM;QACxD,CAAC,CAAC,aAAa,CAAC,eAAe,EAAE,CAAC,MAAM,IAAI,CACzC,uCAAK,SAAS,EAAC,sBAAsB;YACjC,8BAAC,gCAAsB,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,GAAI,CACpE,CACT;QACA,OAAO,CAAC,UAAU,GAAG,oBAAU,CAAC,MAAM,IAAI,8BAAC,qBAAS,OAAG;QACxD,uCAAK,SAAS,EAAC,mBAAmB;YAC9B,8BAAC,gCAAsB,IAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,GAAI,CACpE;QACL,OAAO,CAAC,UAAU,GAAG,oBAAU,CAAC,MAAM,IAAI,CACvC,uCAAK,SAAS,EAAC,mBAAmB;YAC9B,8BAAC,gCAAsB,OAAG,CACxB,CACT,CACC,CACT,EACD,CAAC,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,CAAC,CACnC,CAAC;AACN,CAAC;AA5CD,2CA4CC","sourcesContent":["import React from 'react';\nimport StepRoomNextStepButton from '@/components/steps/room/StepRoomNextStepButton';\nimport { useHistory } from 'react-router-dom';\nimport ScreenSize from '@/util/ScreenSize';\nimport { useContext, useState, useEffect, useMemo } from 'react';\nimport { BESummary } from '@/components/summary/BESummary';\nimport useMeasure from 'react-use-measure';\nimport { BasketContext, BookingEngineContext } from '@frontend/contexts';\nimport BESummaryPrivacyPolicy from '@/components/summary/BESummaryPrivacyPolicy';\nimport { FullPageEngineContext } from '@frontend/contexts';\n\nexport default function StepRoomSummaryAndButton() {\n    const context = useContext(BookingEngineContext);\n    const basketContext = useContext(BasketContext);\n\n    const { currentStep } = useContext(FullPageEngineContext);\n\n    const history = useHistory();\n\n    const [styles, setStyles] = useState<{ top: number }>({ top: 0 });\n    const [measureBind, bounds] = useMeasure();\n\n    useEffect(() => {\n        const screenHeight = window.innerHeight;\n\n        const { height } = bounds;\n\n        if (screenHeight < height) {\n            setStyles({ top: -(height - screenHeight + 40) });\n        } else {\n            setStyles({ top: 150 });\n        }\n    }, [bounds]);\n\n    return useMemo(\n        () => (\n            <div ref={measureBind} style={{ position: 'sticky', ...styles }}>\n                {!!basketContext.getAllValidRows().length && (\n                    <div className=\"u-marg-bottom--heavy\">\n                        <StepRoomNextStepButton currentStep={currentStep} history={history} />\n                    </div>\n                )}\n                {context.screenSize > ScreenSize.Medium && <BESummary />}\n                <div className=\"u-marg-top--heavy\">\n                    <StepRoomNextStepButton currentStep={currentStep} history={history} />\n                </div>\n                {context.screenSize > ScreenSize.Medium && (\n                    <div className=\"u-marg-top--heavy\">\n                        <BESummaryPrivacyPolicy />\n                    </div>\n                )}\n            </div>\n        ),\n        [context.screenSize, styles.top]\n    );\n}\n"]}

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

@@ -1,32 +1,9 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../../../hooks/index.js");
 const Translation_1 = require("translations/Translation");
@@ -42,7 +19,7 @@ function NumberOfAdultsPicker(props) {
     if (maxOccupancy < 1 || isNaN(maxOccupancy)) {
         maxOccupancy = 1;
     }
-    return (React.createElement(Select_1.Select, { nativeOnMobile: true, options: [...Array(maxOccupancy)].map((v, value) => {
+    return (react_1.default.createElement(Select_1.Select, { nativeOnMobile: true, options: [...Array(maxOccupancy)].map((v, value) => {
             value += 1;
             return {
                 text: StringHelper_1.default.pluralWithDictAndCount(value, Translation_1.Translation.Step.Date.Adult, t),

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

@@ -1 +1 @@
-{"version":3,"file":"NumberOfAdultsPicker.js","sourceRoot":"/","sources":["src/components/steps/room/roomBuilderProgress/NumberOfAdultsPicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,iDAA+C;AAE/C,2CAAkD;AAElD,0DAAuD;AACvD,uEAA+C;AAC/C,+DAAkF;AAOlF,SAAwB,oBAAoB,CAAC,KAAgC;;IACzE,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,SAAS,EAAE,mCAAI,CAAC,CAAC;IAClD,IAAI,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,KAAG,MAAA,KAAK,CAAC,GAAG,0CAAE,WAAW,EAAE,CAAA,EAAE,aAAa,CAAC,CAAC;IAC3F,eAAe;IACf,IAAI,YAAY,GAAG,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,EAAE;QACzC,YAAY,GAAG,CAAC,CAAC;KACpB;IAED,OAAO,CACH,oBAAC,eAAM,IACH,cAAc,QACd,OAAO,EAAE,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,KAAa,EAAE,EAAE;YAC5D,KAAK,IAAI,CAAC,CAAC;YACX,OAAO;gBACH,IAAI,EAAE,sBAAY,CAAC,sBAAsB,CAAC,KAAK,EAAE,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;gBAChF,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,GAClB,CACL,CAAC;AACN,CAAC;AA5BD,uCA4BC","sourcesContent":["import * as React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { useCurrentHotel } from '@frontend/hooks';\nimport BasketRow from '@/models/BasketRow';\nimport { Translation } from 'translations/Translation';\nimport StringHelper from '@/util/StringHelper';\nimport { IDefaultSelectOption, Select } from '@/components/generic/Select/Select';\n\ninterface NumberOfAdultsPickerProps {\n    row: BasketRow;\n    onChange: (value: string) => void;\n}\n\nexport default function NumberOfAdultsPicker(props: NumberOfAdultsPickerProps) {\n    const { hotel } = useCurrentHotel();\n\n    const { t } = useTranslation();\n\n    const selectedValue = props.row?.getAdults() ?? 1;\n    let maxOccupancy = Math.max(hotel?.maxOccupancy - props.row?.getChildren(), selectedValue);\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                value += 1;\n                return {\n                    text: StringHelper.pluralWithDictAndCount(value, Translation.Step.Date.Adult, t),\n                    value: value.toString(),\n                };\n            })}\n            value={selectedValue?.toString()}\n            onChange={props.onChange}\n            keyName=\"value\"\n            labelName=\"text\"\n        />\n    );\n}\n"]}
+{"version":3,"file":"NumberOfAdultsPicker.js","sourceRoot":"/","sources":["src/components/steps/room/roomBuilderProgress/NumberOfAdultsPicker.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,iDAA+C;AAE/C,2CAAkD;AAElD,0DAAuD;AACvD,uEAA+C;AAC/C,+DAAkF;AAOlF,SAAwB,oBAAoB,CAAC,KAAgC;;IACzE,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,SAAS,EAAE,mCAAI,CAAC,CAAC;IAClD,IAAI,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAuB,KAAG,MAAA,KAAK,CAAC,GAAG,0CAAE,WAAW,EAAE,CAAA,EAAE,aAAa,CAAC,CAAC;IACvG,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,KAAK,IAAI,CAAC,CAAC;YACX,OAAO;gBACH,IAAI,EAAE,sBAAY,CAAC,sBAAsB,CAAC,KAAK,EAAE,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;gBAChF,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,GAClB,CACL,CAAC;AACN,CAAC;AA5BD,uCA4BC","sourcesContent":["import React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { useCurrentHotel } from '@frontend/hooks';\nimport BasketRow from '@/models/BasketRow';\nimport { Translation } from 'translations/Translation';\nimport StringHelper from '@/util/StringHelper';\nimport { IDefaultSelectOption, Select } from '@/components/generic/Select/Select';\n\ninterface NumberOfAdultsPickerProps {\n    row: BasketRow;\n    onChange: (value: string) => void;\n}\n\nexport default function NumberOfAdultsPicker(props: NumberOfAdultsPickerProps) {\n    const { hotel } = useCurrentHotel();\n\n    const { t } = useTranslation();\n\n    const selectedValue = props.row?.getAdults() ?? 1;\n    let maxOccupancy = Math.max((hotel?.maxOccupancy as number) - props.row?.getChildren(), selectedValue);\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                value += 1;\n                return {\n                    text: StringHelper.pluralWithDictAndCount(value, Translation.Step.Date.Adult, t),\n                    value: value.toString(),\n                };\n            })}\n            value={selectedValue?.toString()}\n            onChange={props.onChange}\n            keyName=\"value\"\n            labelName=\"text\"\n        />\n    );\n}\n"]}

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

@@ -1,32 +1,9 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../../../hooks/index.js");
 const Translation_1 = require("translations/Translation");
@@ -42,7 +19,7 @@ function NumberOfChildrenPicker(props) {
     if (maxOccupancy < 1 || isNaN(maxOccupancy)) {
         maxOccupancy = 1;
     }
-    return (React.createElement(Select_1.Select, { nativeOnMobile: true, options: [...Array(maxOccupancy)].map((v, value) => {
+    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.Child, t),
                 value: value.toString(),

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

@@ -1 +1 @@
-{"version":3,"file":"NumberOfChildrenPicker.js","sourceRoot":"/","sources":["src/components/steps/room/roomBuilderProgress/NumberOfChildrenPicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,iDAA+C;AAE/C,2CAAkD;AAElD,0DAAuD;AACvD,uEAA+C;AAC/C,+DAAkF;AAOlF,SAAwB,sBAAsB,CAAC,KAAkC;;IAC7E,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,WAAW,EAAE,mCAAI,CAAC,CAAC;IACpD,IAAI,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,IAAG,CAAC,IAAG,MAAA,KAAK,CAAC,GAAG,0CAAE,SAAS,EAAE,CAAA,CAAC,CAAC;IAC9E,eAAe;IACf,IAAI,YAAY,GAAG,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,EAAE;QACzC,YAAY,GAAG,CAAC,CAAC;KACpB;IAED,OAAO,CACH,oBAAC,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,KAAK,EAAE,CAAC,CAAC;gBAChF,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,GAClB,CACL,CAAC;AACN,CAAC;AA3BD,yCA2BC","sourcesContent":["import * as React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { useCurrentHotel } from '@frontend/hooks';\nimport BasketRow from '@/models/BasketRow';\nimport { Translation } from 'translations/Translation';\nimport StringHelper from '@/util/StringHelper';\nimport { IDefaultSelectOption, Select } from '@/components/generic/Select/Select';\n\ninterface NumberOfChildrenPickerProps {\n    row: BasketRow;\n    onChange: (value: string) => void;\n}\n\nexport default function NumberOfChildrenPicker(props: NumberOfChildrenPickerProps) {\n    const { hotel } = useCurrentHotel();\n\n    const { t } = useTranslation();\n\n    const selectedValue = props.row?.getChildren() ?? 1;\n    let maxOccupancy = Math.max(hotel?.maxOccupancy + 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.Child, t),\n                    value: value.toString(),\n                };\n            })}\n            value={selectedValue?.toString()}\n            onChange={props.onChange}\n            keyName=\"value\"\n            labelName=\"text\"\n        />\n    );\n}\n"]}
+{"version":3,"file":"NumberOfChildrenPicker.js","sourceRoot":"/","sources":["src/components/steps/room/roomBuilderProgress/NumberOfChildrenPicker.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,iDAA+C;AAE/C,2CAAkD;AAElD,0DAAuD;AACvD,uEAA+C;AAC/C,+DAAkF;AAOlF,SAAwB,sBAAsB,CAAC,KAAkC;;IAC7E,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,WAAW,EAAE,mCAAI,CAAC,CAAC;IACpD,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,KAAK,EAAE,CAAC,CAAC;gBAChF,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,GAClB,CACL,CAAC;AACN,CAAC;AA3BD,yCA2BC","sourcesContent":["import React from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { useCurrentHotel } from '@frontend/hooks';\nimport BasketRow from '@/models/BasketRow';\nimport { Translation } from 'translations/Translation';\nimport StringHelper from '@/util/StringHelper';\nimport { IDefaultSelectOption, Select } from '@/components/generic/Select/Select';\n\ninterface NumberOfChildrenPickerProps {\n    row: BasketRow;\n    onChange: (value: string) => void;\n}\n\nexport default function NumberOfChildrenPicker(props: NumberOfChildrenPickerProps) {\n    const { hotel } = useCurrentHotel();\n\n    const { t } = useTranslation();\n\n    const selectedValue = props.row?.getChildren() ?? 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.Child, t),\n                    value: value.toString(),\n                };\n            })}\n            value={selectedValue?.toString()}\n            onChange={props.onChange}\n            keyName=\"value\"\n            labelName=\"text\"\n        />\n    );\n}\n"]}

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

@@ -26,8 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const BasketRow_1 = __importDefault(require("../../../../models/BasketRow"));
 const RoomBuilderProgressRow_1 = __importDefault(require("./RoomBuilderProgressRow"));
 const BEButton_1 = __importDefault(require("../../../generic/BEButton"));
@@ -37,21 +37,21 @@ const react_i18next_1 = require("react-i18next");
 const Translation_1 = require("translations/Translation");
 const DataLayer_1 = __importStar(require("../../../../util/DataLayer"));
 function RoomBuilderProgress() {
-    const { currentBasketRows, addBasketRow, selectedBasketRow } = (0, react_1.useContext)(contexts_1.BasketContext);
+    const { currentBasketRows, addBasketRow, selectedBasketRow } = (0, react_2.useContext)(contexts_1.BasketContext);
     const { t } = (0, react_i18next_1.useTranslation)();
     const addRoomRowOnClick = () => {
         DataLayer_1.default.instance.sendInteraction('Add Room Row', DataLayer_1.InteractionType.BUTTON, DataLayer_1.InteractionStep.ROOMS);
         addBasketRow(new BasketRow_1.default());
     };
-    return (0, react_1.useMemo)(() => (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "room-builder-progress" },
+    return (0, react_2.useMemo)(() => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "room-builder-progress" },
             !!currentBasketRows.length &&
                 currentBasketRows.map((row, index) => {
-                    return React.createElement(RoomBuilderProgressRow_1.default, { row: row, key: row.getID(), number: index });
+                    return react_1.default.createElement(RoomBuilderProgressRow_1.default, { row: row, key: row.getID(), number: index });
                 }),
-            React.createElement("div", { className: "u-flex justify-content-end" },
-                React.createElement(BEButton_1.default, { icon: Icon_1.IconType.Add, onClick: addRoomRowOnClick, stopIconAnimation: true }, t(Translation_1.Translation.Step.Room.RoomInfo.AddRoom)))),
-        React.createElement("script", { type: "application/ld+json" }, JSON.stringify({
+            react_1.default.createElement("div", { className: "u-flex justify-content-end" },
+                react_1.default.createElement(BEButton_1.default, { icon: Icon_1.IconType.Add, onClick: addRoomRowOnClick, stopIconAnimation: true }, t(Translation_1.Translation.Step.Room.RoomInfo.AddRoom)))),
+        react_1.default.createElement("script", { type: "application/ld+json" }, JSON.stringify({
             '@context': 'https://structured-data.triptease.io',
             '@type': 'LodgingSearch',
             checkinTime: selectedBasketRow === null || selectedBasketRow === void 0 ? void 0 : selectedBasketRow.getStartDate().format('YYYY-M-D'),

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

@@ -1 +1 @@
-{"version":3,"file":"RoomBuilderProgress.js","sourceRoot":"/","sources":["src/components/steps/room/roomBuilderProgress/RoomBuilderProgress.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,iCAA4C;AAC5C,mEAA2C;AAC3C,gIAAwG;AACxG,6EAAqD;AACrD,yDAA0D;AAC1D,iDAAmD;AACnD,iDAA+C;AAC/C,0DAAuD;AACvD,8DAA+E;AAE/E,SAAwB,mBAAmB;IACvC,MAAM,EAAE,iBAAiB,EAAE,YAAY,EAAE,iBAAiB,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAEzF,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,cAAc,EAAE,2BAAe,CAAC,MAAM,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;QAClG,YAAY,CAAC,IAAI,mBAAS,EAAE,CAAC,CAAC;IAClC,CAAC,CAAC;IACF,OAAO,IAAA,eAAO,EACV,GAAG,EAAE,CAAC,CACF;QACI,6BAAK,SAAS,EAAC,uBAAuB;YACjC,CAAC,CAAC,iBAAiB,CAAC,MAAM;gBACvB,iBAAiB,CAAC,GAAG,CAAC,CAAC,GAAc,EAAE,KAAa,EAAE,EAAE;oBACpD,OAAO,oBAAC,gCAAsB,IAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,GAAI,CAAC;gBACjF,CAAC,CAAC;YACN,6BAAK,SAAS,EAAC,4BAA4B;gBACvC,oBAAC,kBAAQ,IAAC,IAAI,EAAE,eAAQ,CAAC,GAAG,EAAE,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,IAC5E,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CACnC,CACT,CACJ;QACN,gCAAQ,IAAI,EAAC,qBAAqB,IAC7B,IAAI,CAAC,SAAS,CAAC;YACZ,UAAU,EAAE,sCAAsC;YAClD,OAAO,EAAE,eAAe;YACxB,WAAW,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC;YACjE,YAAY,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;YAChE,SAAS,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,SAAS,EAAE;YACzC,WAAW,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,WAAW,EAAE;YAC7C,QAAQ,EAAE,GAAG;SAChB,CAAC,CACG,CACV,CACN,EACD,CAAC,iBAAiB,EAAE,CAAC,CAAC,CACzB,CAAC;AACN,CAAC;AArCD,sCAqCC","sourcesContent":["import * as React from 'react';\nimport { useContext, useMemo } from 'react';\nimport BasketRow from '@/models/BasketRow';\nimport RoomBuilderProgressRow from '@/components/steps/room/roomBuilderProgress/RoomBuilderProgressRow';\nimport BEButton from '@/components/generic/BEButton';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport { BasketContext } from '@frontend/contexts';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport DataLayer, { InteractionStep, InteractionType } from '@/util/DataLayer';\n\nexport default function RoomBuilderProgress() {\n    const { currentBasketRows, addBasketRow, selectedBasketRow } = useContext(BasketContext);\n\n    const { t } = useTranslation();\n    const addRoomRowOnClick = () => {\n        DataLayer.instance.sendInteraction('Add Room Row', InteractionType.BUTTON, InteractionStep.ROOMS);\n        addBasketRow(new BasketRow());\n    };\n    return useMemo(\n        () => (\n            <>\n                <div className=\"room-builder-progress\">\n                    {!!currentBasketRows.length &&\n                        currentBasketRows.map((row: BasketRow, index: number) => {\n                            return <RoomBuilderProgressRow row={row} key={row.getID()} number={index} />;\n                        })}\n                    <div className=\"u-flex justify-content-end\">\n                        <BEButton icon={IconType.Add} onClick={addRoomRowOnClick} stopIconAnimation={true}>\n                            {t(Translation.Step.Room.RoomInfo.AddRoom)}\n                        </BEButton>\n                    </div>\n                </div>\n                <script type=\"application/ld+json\">\n                    {JSON.stringify({\n                        '@context': 'https://structured-data.triptease.io',\n                        '@type': 'LodgingSearch',\n                        checkinTime: selectedBasketRow?.getStartDate().format('YYYY-M-D'),\n                        checkoutTime: selectedBasketRow?.getEndDate().format('YYYY-M-D'),\n                        numAdults: selectedBasketRow?.getAdults(),\n                        numChildren: selectedBasketRow?.getChildren(),\n                        numRooms: '1',\n                    })}\n                </script>\n            </>\n        ),\n        [currentBasketRows, t]\n    );\n}\n"]}
+{"version":3,"file":"RoomBuilderProgress.js","sourceRoot":"/","sources":["src/components/steps/room/roomBuilderProgress/RoomBuilderProgress.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,iCAA4C;AAC5C,mEAA2C;AAC3C,gIAAwG;AACxG,6EAAqD;AACrD,yDAA0D;AAC1D,iDAAmD;AACnD,iDAA+C;AAC/C,0DAAuD;AACvD,8DAA+E;AAE/E,SAAwB,mBAAmB;IACvC,MAAM,EAAE,iBAAiB,EAAE,YAAY,EAAE,iBAAiB,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAEzF,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,mBAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,cAAc,EAAE,2BAAe,CAAC,MAAM,EAAE,2BAAe,CAAC,KAAK,CAAC,CAAC;QAClG,YAAY,CAAC,IAAI,mBAAS,EAAE,CAAC,CAAC;IAClC,CAAC,CAAC;IACF,OAAO,IAAA,eAAO,EACV,GAAG,EAAE,CAAC,CACF;QACI,uCAAK,SAAS,EAAC,uBAAuB;YACjC,CAAC,CAAC,iBAAiB,CAAC,MAAM;gBACvB,iBAAiB,CAAC,GAAG,CAAC,CAAC,GAAc,EAAE,KAAa,EAAE,EAAE;oBACpD,OAAO,8BAAC,gCAAsB,IAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,GAAI,CAAC;gBACjF,CAAC,CAAC;YACN,uCAAK,SAAS,EAAC,4BAA4B;gBACvC,8BAAC,kBAAQ,IAAC,IAAI,EAAE,eAAQ,CAAC,GAAG,EAAE,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,UACtE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CACnC,CACT,CACJ;QACN,0CAAQ,IAAI,EAAC,qBAAqB,IAC7B,IAAI,CAAC,SAAS,CAAC;YACZ,UAAU,EAAE,sCAAsC;YAClD,OAAO,EAAE,eAAe;YACxB,WAAW,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC;YACjE,YAAY,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;YAChE,SAAS,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,SAAS,EAAE;YACzC,WAAW,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,WAAW,EAAE;YAC7C,QAAQ,EAAE,GAAG;SAChB,CAAC,CACG,CACV,CACN,EACD,CAAC,iBAAiB,EAAE,CAAC,CAAC,CACzB,CAAC;AACN,CAAC;AArCD,sCAqCC","sourcesContent":["import React from 'react';\nimport { useContext, useMemo } from 'react';\nimport BasketRow from '@/models/BasketRow';\nimport RoomBuilderProgressRow from '@/components/steps/room/roomBuilderProgress/RoomBuilderProgressRow';\nimport BEButton from '@/components/generic/BEButton';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport { BasketContext } from '@frontend/contexts';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport DataLayer, { InteractionStep, InteractionType } from '@/util/DataLayer';\n\nexport default function RoomBuilderProgress() {\n    const { currentBasketRows, addBasketRow, selectedBasketRow } = useContext(BasketContext);\n\n    const { t } = useTranslation();\n    const addRoomRowOnClick = () => {\n        DataLayer.instance.sendInteraction('Add Room Row', InteractionType.BUTTON, InteractionStep.ROOMS);\n        addBasketRow(new BasketRow());\n    };\n    return useMemo(\n        () => (\n            <>\n                <div className=\"room-builder-progress\">\n                    {!!currentBasketRows.length &&\n                        currentBasketRows.map((row: BasketRow, index: number) => {\n                            return <RoomBuilderProgressRow row={row} key={row.getID()} number={index} />;\n                        })}\n                    <div className=\"u-flex justify-content-end\">\n                        <BEButton icon={IconType.Add} onClick={addRoomRowOnClick} stopIconAnimation>\n                            {t(Translation.Step.Room.RoomInfo.AddRoom)}\n                        </BEButton>\n                    </div>\n                </div>\n                <script type=\"application/ld+json\">\n                    {JSON.stringify({\n                        '@context': 'https://structured-data.triptease.io',\n                        '@type': 'LodgingSearch',\n                        checkinTime: selectedBasketRow?.getStartDate().format('YYYY-M-D'),\n                        checkoutTime: selectedBasketRow?.getEndDate().format('YYYY-M-D'),\n                        numAdults: selectedBasketRow?.getAdults(),\n                        numChildren: selectedBasketRow?.getChildren(),\n                        numRooms: '1',\n                    })}\n                </script>\n            </>\n        ),\n        [currentBasketRows, t]\n    );\n}\n"]}

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

@@ -26,8 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
 const BEButton_1 = __importDefault(require("../../../generic/BEButton"));
 const react_i18next_1 = require("react-i18next");
@@ -48,20 +48,20 @@ const NumberOfAdultsPicker_1 = __importDefault(require("./NumberOfAdultsPicker")
 const Overlay_1 = require("../../../generic/Overlay/Overlay");
 function RoomBuilderProgressRow(props) {
     var _a, _b, _c;
-    const context = (0, react_1.useContext)(contexts_1.BasketContext);
-    const engineContext = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const context = (0, react_2.useContext)(contexts_1.BasketContext);
+    const engineContext = (0, react_2.useContext)(contexts_1.BookingEngineContext);
     const { t } = (0, react_i18next_1.useTranslation)();
-    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
+    const [isEditing, setIsEditing] = (0, react_2.useState)(false);
     const { row } = props;
     const isCurrent = context.selectedBasketRow && context.selectedBasketRow.getID() === row.getID();
     const classes = (0, classnames_1.default)('room-builder-progress--item', {
         '--current': isCurrent,
         '--complete': row.isValid(),
     });
-    const [promoCode, setPromoCode] = (0, react_1.useState)(row.getPromoCode());
-    const thisElement = (0, react_1.useRef)();
-    const [isPromoModalOpen, setIsPromoModalOpen] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
+    const [promoCode, setPromoCode] = (0, react_2.useState)(row.getPromoCode());
+    const thisElement = (0, react_2.useRef)(null);
+    const [isPromoModalOpen, setIsPromoModalOpen] = (0, react_2.useState)(false);
+    (0, react_2.useEffect)(() => {
         if (isEditing && !isCurrent) {
             setIsEditing(false);
         }
@@ -105,9 +105,9 @@ function RoomBuilderProgressRow(props) {
         DataLayer_1.default.instance.sendInteraction('Remove Room', DataLayer_1.InteractionType.BUTTON, DataLayer_1.InteractionStep.ROOMS);
         context.removeBasketRow(row);
     };
-    const removeButton = (React.createElement(Tooltip_1.default, { title: isRemovable ? 'Remove this room' : 'Cannot remove this room as at least one must be selected.' },
-        React.createElement("div", { className: "room-builder-progress--remove" },
-            React.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.Close, iconPosition: "right", stopIconAnimation: true, disabled: !isRemovable, onClick: removeRoomOnClick }))));
+    const removeButton = (react_1.default.createElement(Tooltip_1.default, { title: isRemovable ? 'Remove this room' : 'Cannot remove this room as at least one must be selected.' },
+        react_1.default.createElement("div", { className: "room-builder-progress--remove" },
+            react_1.default.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.Close, iconPosition: "right", stopIconAnimation: true, disabled: !isRemovable, onClick: removeRoomOnClick }))));
     const isLargerThanLarge = engineContext.screenSize > ScreenSize_1.default.ExtraLarge;
     const showEditSection = isLargerThanLarge || isCurrent;
     const roomLabel = context.currentBasketRows.length !== 1 ? props.number + 1 : '';
@@ -159,71 +159,73 @@ function RoomBuilderProgressRow(props) {
     const updateNumberOfChildrenOnChange = (value) => {
         updatePeopleValues({ children: +value });
     };
-    return (React.createElement("div", { className: classes }, isCurrent || !row.isValid() ? (React.createElement("div", { className: "u-flex w-100" },
-        React.createElement("div", { className: "u-flex flex-wrap flex-xl-nowrap flex-row u-w-100@xl- align-items-center" },
-            React.createElement("div", null, row.isValid() ? (React.createElement(Text_1.default, null,
-                React.createElement("strong", { className: "u-nowrap" },
+    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,
+                react_1.default.createElement("strong", { className: "u-nowrap" },
                     t(Translation_1.Translation.Step.Room.EditingRoom),
                     " ",
-                    roomLabel))) : (React.createElement(Text_1.default, null,
-                React.createElement("strong", { className: "u-nowrap" },
+                    roomLabel))) : (react_1.default.createElement(Text_1.default, null,
+                react_1.default.createElement("strong", { className: "u-nowrap" },
                     t(Translation_1.Translation.Step.Room.SelectRoom),
                     " ",
                     roomLabel)))),
-            showEditSection ? (React.createElement(React.Fragment, null,
-                !isLargerThanLarge && (React.createElement("div", { className: 'w-100 d-flex' + (showEditSection ? ' u-marg-bottom@xl-' : '') },
-                    React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey, inline: true }, "Choose room below"))),
-                React.createElement(Tooltip_1.default, { title: "Update number of adults", wrapperClasses: 'u-w-100@xl- d-flex' },
-                    React.createElement("div", { className: "room-builder-progress--value u-flex-justify-center u-flex" },
-                        React.createElement(NumberOfAdultsPicker_1.default, { row: row, onChange: updateNumberOfAdultsOnChange }))),
-                React.createElement(Tooltip_1.default, { title: "Update number of children", wrapperClasses: 'u-w-100@xl- d-flex' },
-                    React.createElement("div", { className: "room-builder-progress--value u-flex-justify-center u-flex" },
-                        React.createElement(NumberOfChildrenPicker_1.default, { row: row, onChange: updateNumberOfChildrenOnChange }))),
-                React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: "room-builder-progress--value" },
-                        React.createElement(FloatingDatePicker_1.default, { startDate: row.getStartDate(), selectedDateChanged: updateDateValues, className: "u-w-100@xl- d-flex align-items-center justify-content-center" },
-                            React.createElement(Tooltip_1.default, { title: "Select Arrival and departure dates by clicking here" },
-                                React.createElement("div", { className: "u-flex align-items-center justify-content-center u-w-100@xl- u-cursor-pointer" },
-                                    React.createElement(Text_1.default, { color: Color_1.Color.Accent, bold: true, className: "u-nowrap" }, row.getArrivalDate()),
-                                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2 }),
-                                    React.createElement(Text_1.default, { color: Color_1.Color.Accent, bold: true, className: "u-nowrap" }, row.getDepartureDate()))))),
-                    React.createElement(Tooltip_1.default, { title: promoCodeTooltip, wrapperClasses: 'u-w-100@xl- d-flex' },
-                        React.createElement("div", { className: "room-builder-progress--value u-cursor-pointer", ref: thisElement, onClick: openPromoModalOnClick },
-                            React.createElement("div", { className: "u-flex align-items-center justify-content-center u-w-100@xl-" },
-                                React.createElement(Text_1.default, { className: "u-pad-right--light", type: Text_1.TextType.Body, color: row.getPromoCode() ? row.getPromoCodeColour() : Color_1.Color.Navy }, row.getPromoCode() ? row.getPromoCode() : 'Promo Code'),
-                                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown, color: Color_1.Color.DarkGrey }))))),
-                React.createElement(Overlay_1.Overlay, { open: isPromoModalOpen, followElement: thisElement.current, onClose: setPromoCodeOnClose },
-                    React.createElement("div", { className: "u-pad--heavy" },
-                        React.createElement("div", null,
-                            React.createElement(PromoCodeInput_1.default, { value: (_a = context.selectedBasketRow) === null || _a === void 0 ? void 0 : _a.getPromoCode(), onChange: changePromoCode, valid: ((_b = context.selectedBasketRow) === null || _b === void 0 ? void 0 : _b.getPromoCodeStatus()) !== 'new' ? ((_c = context.selectedBasketRow) === null || _c === void 0 ? void 0 : _c.getPromoCodeStatus()) === 'valid' : null })),
-                        React.createElement("div", { className: "u-flex justify-content-end align-items-center u-marg-top" },
-                            React.createElement(BEButton_1.default, { isText: true, size: "small", onClick: cancelPromoPopupOnClick }, "Cancel")))),
-                !isLargerThanLarge && row.isValid() && (React.createElement(BEButton_1.default, { wide: true, primary: true, filled: true, onClick: saveRoomChangesOnClick }, "Save")))) : (React.createElement("div", { className: "w-100" },
-                React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey }, t(Translation_1.Translation.Step.Room.NextRoom))))),
-        React.createElement("div", { className: "u-flex align-items-center" },
-            row.isValid() && (React.createElement("div", { className: "u-none@xl-" },
-                React.createElement(Tooltip_1.default, { title: "Cancel changes" },
-                    React.createElement("div", { className: "u-flex align-items-center" },
-                        React.createElement(BEButton_1.default, { isText: true, size: "tiny", onClick: cancelRoomChangesOnClick }, t(Translation_1.Translation.Misc.Cancel).toUpperCase()))))),
-            removeButton))) : (React.createElement("div", { className: "u-flex w-100" },
-        React.createElement("div", { className: "u-flex justify-content-start" },
-            React.createElement("div", { className: "u-flex flex-column" },
-                React.createElement("span", null,
-                    React.createElement(Text_1.default, { inline: isLargerThanLarge },
-                        React.createElement("strong", null, row.getRoom().name)),
-                    React.createElement(Text_1.default, { inline: isLargerThanLarge, type: isLargerThanLarge ? Text_1.TextType.Body : Text_1.TextType.Small },
-                        React.createElement("span", { className: "u-marg-left--light@xl" },
+            showEditSection ? (react_1.default.createElement(react_1.default.Fragment, null,
+                !isLargerThanLarge && (react_1.default.createElement("div", { className: 'w-100 d-flex' + (showEditSection ? ' u-marg-bottom@xl-' : '') },
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey, inline: true }, "Choose room below"))),
+                react_1.default.createElement(Tooltip_1.default, { title: "Update number of adults", 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(NumberOfAdultsPicker_1.default, { row: row, onChange: updateNumberOfAdultsOnChange }))),
+                react_1.default.createElement(Tooltip_1.default, { title: "Update number of children", 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(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" },
+                            react_1.default.createElement(Tooltip_1.default, { title: "Select Arrival and departure dates by clicking here" },
+                                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: Color_1.Color.Accent, bold: true, className: "u-nowrap" }, row.getArrivalDate()),
+                                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2 }),
+                                    react_1.default.createElement(Text_1.default, { color: Color_1.Color.Accent, bold: true, className: "u-nowrap" }, row.getDepartureDate()))))),
+                    react_1.default.createElement(Tooltip_1.default, { title: promoCodeTooltip, wrapperClasses: "u-w-100@xl- d-flex" },
+                        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.getPromoCode() ? row.getPromoCodeColour() : Color_1.Color.Navy }, row.getPromoCode() ? row.getPromoCode() : 'Promo Code'),
+                                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: (_a = context.selectedBasketRow) === null || _a === void 0 ? void 0 : _a.getPromoCode(), onChange: changePromoCode, valid: ((_b = context.selectedBasketRow) === null || _b === void 0 ? void 0 : _b.getPromoCodeStatus()) !== 'new'
+                                    ? ((_c = context.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 }, "Cancel")))),
+                !isLargerThanLarge && row.isValid() && (react_1.default.createElement(BEButton_1.default, { wide: true, primary: true, filled: true, onClick: saveRoomChangesOnClick }, "Save")))) : (react_1.default.createElement("div", { className: "w-100" },
+                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey }, t(Translation_1.Translation.Step.Room.NextRoom))))),
+        react_1.default.createElement("div", { className: "u-flex align-items-center" },
+            row.isValid() && (react_1.default.createElement("div", { className: "u-none@xl-" },
+                react_1.default.createElement(Tooltip_1.default, { title: "Cancel changes" },
+                    react_1.default.createElement("div", { className: "u-flex align-items-center" },
+                        react_1.default.createElement(BEButton_1.default, { isText: true, size: "tiny", onClick: cancelRoomChangesOnClick }, t(Translation_1.Translation.Misc.Cancel).toUpperCase()))))),
+            removeButton))) : (react_1.default.createElement("div", { className: "u-flex w-100" },
+        react_1.default.createElement("div", { className: "u-flex justify-content-start" },
+            react_1.default.createElement("div", { className: "u-flex flex-column" },
+                react_1.default.createElement("span", null,
+                    react_1.default.createElement(Text_1.default, { inline: isLargerThanLarge },
+                        react_1.default.createElement("strong", null, row.getRoom().name)),
+                    react_1.default.createElement(Text_1.default, { inline: isLargerThanLarge, type: isLargerThanLarge ? Text_1.TextType.Body : Text_1.TextType.Small },
+                        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)))),
-                React.createElement(Text_1.default, { type: Text_1.TextType.Caption, color: Color_1.Color.DarkGrey },
-                    React.createElement("strong", null, row.getStayDateRange('ddd, MMM D, YYYY', ' -')))),
-            row.isPromoCodeValid() && (React.createElement("div", { className: "u-marg-left d-flex align-items-center" },
-                React.createElement(Pill_1.default, { type: Pill_1.PillType.Success, icon: Icon_1.IconType.Money }, row.getPromoCode())))),
-        React.createElement("div", { className: "u-flex align-items-center" },
-            React.createElement(Tooltip_1.default, { title: "Edit this room" },
-                React.createElement("div", { className: "u-flex align-items-center room-builder-progress--edit" },
-                    React.createElement(BEButton_1.default, { isText: true, size: "tiny", onClick: editRoomOnClick }, t(Translation_1.Translation.Misc.Edit).toUpperCase()))),
+                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" },
+                react_1.default.createElement(Pill_1.default, { type: Pill_1.PillType.Success, icon: Icon_1.IconType.Money }, row.getPromoCode())))),
+        react_1.default.createElement("div", { className: "u-flex align-items-center" },
+            react_1.default.createElement(Tooltip_1.default, { title: "Edit this room" },
+                react_1.default.createElement("div", { className: "u-flex align-items-center room-builder-progress--edit" },
+                    react_1.default.createElement(BEButton_1.default, { isText: true, size: "tiny", onClick: editRoomOnClick }, t(Translation_1.Translation.Misc.Edit).toUpperCase()))),
             removeButton)))));
 }
 exports.default = RoomBuilderProgressRow;