@roomstay/frontend 2.1.6 → 2.1.8

package/dist/src/components/generic/Tooltip/Tooltip.js

@@ -1,50 +1,27 @@
 "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 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const Overlay_1 = require("../Overlay/Overlay");
 const Tooltip_module_scss_1 = __importDefault(require("./Tooltip.module.scss"));
 function Tooltip(props) {
     var _a;
     const wrapperClass = (_a = props.wrapperClasses) !== null && _a !== void 0 ? _a : '';
-    const containerRef = (0, react_1.useRef)(null);
-    const [isDisplayed, setDisplayed] = (0, react_1.useState)(false);
+    const containerRef = (0, react_2.useRef)(null);
+    const [isDisplayed, setDisplayed] = (0, react_2.useState)(false);
     const displayFalse = () => {
         setDisplayed(false);
     };
     const displayTrue = () => {
         setDisplayed(true);
     };
-    return (React.createElement("div", { ref: containerRef, onMouseLeave: displayFalse, onMouseEnter: displayTrue, onMouseDown: displayFalse, className: wrapperClass },
-        React.createElement(Overlay_1.Overlay, { open: isDisplayed, container: props.overrideContainer, hideStyles: true, followElement: containerRef === null || containerRef === void 0 ? void 0 : containerRef.current },
-            React.createElement("div", { className: Tooltip_module_scss_1.default['rs-tooltip'] },
-                React.createElement("div", { className: Tooltip_module_scss_1.default['rs-tooltip-arrow'] }),
+    return (react_1.default.createElement("div", { ref: containerRef, onMouseLeave: displayFalse, onMouseEnter: displayTrue, onMouseDown: displayFalse, className: wrapperClass },
+        react_1.default.createElement(Overlay_1.Overlay, { open: isDisplayed, container: props.overrideContainer, hideStyles: true, followElement: containerRef === null || containerRef === void 0 ? void 0 : containerRef.current },
+            react_1.default.createElement("div", { className: Tooltip_module_scss_1.default['rs-tooltip'] },
+                react_1.default.createElement("div", { className: Tooltip_module_scss_1.default['rs-tooltip-arrow'] }),
                 props.title)),
         props.children));
 }

package/dist/src/components/generic/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"/","sources":["src/components/generic/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,iCAAqD;AACrD,kEAA+D;AAE/D,gFAA2C;AAU3C,SAAwB,OAAO,CAAC,KAAqB;;IACjD,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,cAAc,mCAAI,EAAE,CAAC;IAChD,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAElC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,YAAY,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,OAAO,CACH,6BAAK,GAAG,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY;QAC7H,oBAAC,iBAAO,IAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,CAAC,iBAAiB,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO;YAClH,6BAAK,SAAS,EAAE,6BAAM,CAAC,YAAY,CAAC;gBAChC,6BAAK,SAAS,EAAE,6BAAM,CAAC,kBAAkB,CAAC,GAAQ;gBACjD,KAAK,CAAC,KAAK,CACV,CACA;QACT,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC;AAzBD,0BAyBC","sourcesContent":["import * as React from 'react';\n\nimport { useState, useRef, ReactChild } from 'react';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\n\nimport styles from './Tooltip.module.scss';\n\nexport interface BETooltipProps {\n    wrapperClasses?: string;\n    overrideContainer?: HTMLElement;\n\n    children: ReactChild | ReactChild[];\n    title: string;\n}\n\nexport default function Tooltip(props: BETooltipProps) {\n    const wrapperClass = props.wrapperClasses ?? '';\n    const containerRef = useRef(null);\n\n    const [isDisplayed, setDisplayed] = useState(false);\n\n    const displayFalse = () => {\n        setDisplayed(false);\n    };\n\n    const displayTrue = () => {\n        setDisplayed(true);\n    };\n\n    return (\n        <div ref={containerRef} onMouseLeave={displayFalse} onMouseEnter={displayTrue} onMouseDown={displayFalse} className={wrapperClass}>\n            <Overlay open={isDisplayed} container={props.overrideContainer} hideStyles={true} followElement={containerRef?.current}>\n                <div className={styles['rs-tooltip']}>\n                    <div className={styles['rs-tooltip-arrow']}></div>\n                    {props.title}\n                </div>\n            </Overlay>\n            {props.children}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"Tooltip.js","sourceRoot":"/","sources":["src/components/generic/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAE1B,iCAAqD;AACrD,kEAA+D;AAE/D,gFAA2C;AAS3C,SAAwB,OAAO,CAAC,KAAqB;;IACjD,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,cAAc,mCAAI,EAAE,CAAC;IAChD,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAElC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,YAAY,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,OAAO,CACH,uCAAK,GAAG,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY;QAC7H,8BAAC,iBAAO,IAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,CAAC,iBAAiB,EAAE,UAAU,QAAC,aAAa,EAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO;YAC3G,uCAAK,SAAS,EAAE,6BAAM,CAAC,YAAY,CAAC;gBAChC,uCAAK,SAAS,EAAE,6BAAM,CAAC,kBAAkB,CAAC,GAAQ;gBACjD,KAAK,CAAC,KAAK,CACV,CACA;QACT,KAAK,CAAC,QAAQ,CACb,CACT,CAAC;AACN,CAAC;AAzBD,0BAyBC","sourcesContent":["import React from 'react';\n\nimport { useState, useRef, ReactChild } from 'react';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\n\nimport styles from './Tooltip.module.scss';\n\nexport interface BETooltipProps {\n    wrapperClasses?: string;\n    overrideContainer?: HTMLElement | null;\n    children: ReactChild | ReactChild[];\n    title: string;\n}\n\nexport default function Tooltip(props: BETooltipProps) {\n    const wrapperClass = props.wrapperClasses ?? '';\n    const containerRef = useRef(null);\n\n    const [isDisplayed, setDisplayed] = useState(false);\n\n    const displayFalse = () => {\n        setDisplayed(false);\n    };\n\n    const displayTrue = () => {\n        setDisplayed(true);\n    };\n\n    return (\n        <div ref={containerRef} onMouseLeave={displayFalse} onMouseEnter={displayTrue} onMouseDown={displayFalse} className={wrapperClass}>\n            <Overlay open={isDisplayed} container={props.overrideContainer} hideStyles followElement={containerRef?.current}>\n                <div className={styles['rs-tooltip']}>\n                    <div className={styles['rs-tooltip-arrow']}></div>\n                    {props.title}\n                </div>\n            </Overlay>\n            {props.children}\n        </div>\n    );\n}\n"]}

package/dist/src/components/generic/badging/SSLSecureBadge.js

@@ -1,37 +1,14 @@
 "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 RoomstayThemeEngine_1 = __importDefault(require("../../../providers/RoomstayThemeEngine"));
 const Tooltip_1 = __importDefault(require("../Tooltip/Tooltip"));
 function SSLSecureBadge() {
-    return (React.createElement(Tooltip_1.default, { title: "Shop without worries! This site is protected by high level encryption, to ensure every purchase is always safe & secure" },
-        React.createElement("img", { src: RoomstayThemeEngine_1.default.getAssetUrl() + 'assets/img/ssl-secure-connection.png' })));
+    return (react_1.default.createElement(Tooltip_1.default, { title: "Shop without worries! This site is protected by high level encryption, to ensure every purchase is always safe & secure" },
+        react_1.default.createElement("img", { src: RoomstayThemeEngine_1.default.getAssetUrl() + 'assets/img/ssl-secure-connection.png' })));
 }
 exports.default = SSLSecureBadge;
 //# sourceMappingURL=SSLSecureBadge.js.map

package/dist/src/components/generic/badging/SSLSecureBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"SSLSecureBadge.js","sourceRoot":"/","sources":["src/components/generic/badging/SSLSecureBadge.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,0FAAkE;AAClE,mFAA2D;AAE3D,SAAwB,cAAc;IAClC,OAAO,CACH,oBAAC,iBAAO,IAAC,KAAK,EAAC,yHAAyH;QACpI,6BAAK,GAAG,EAAE,6BAAmB,CAAC,WAAW,EAAE,GAAG,sCAAsC,GAAI,CAClF,CACb,CAAC;AACN,CAAC;AAND,iCAMC","sourcesContent":["import * as React from 'react';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\n\nexport default function SSLSecureBadge() {\n    return (\n        <Tooltip title=\"Shop without worries! This site is protected by high level encryption, to ensure every purchase is always safe & secure\">\n            <img src={RoomstayThemeEngine.getAssetUrl() + 'assets/img/ssl-secure-connection.png'} />\n        </Tooltip>\n    );\n}\n"]}
+{"version":3,"file":"SSLSecureBadge.js","sourceRoot":"/","sources":["src/components/generic/badging/SSLSecureBadge.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,0FAAkE;AAClE,mFAA2D;AAE3D,SAAwB,cAAc;IAClC,OAAO,CACH,8BAAC,iBAAO,IAAC,KAAK,EAAC,yHAAyH;QACpI,uCAAK,GAAG,EAAE,6BAAmB,CAAC,WAAW,EAAE,GAAG,sCAAsC,GAAI,CAClF,CACb,CAAC;AACN,CAAC;AAND,iCAMC","sourcesContent":["import React from 'react';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\n\nexport default function SSLSecureBadge() {\n    return (\n        <Tooltip title=\"Shop without worries! This site is protected by high level encryption, to ensure every purchase is always safe & secure\">\n            <img src={RoomstayThemeEngine.getAssetUrl() + 'assets/img/ssl-secure-connection.png'} />\n        </Tooltip>\n    );\n}\n"]}

package/dist/src/components/generic/buttons/NextStepButton.js

@@ -1,27 +1,4 @@
 "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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -35,22 +12,22 @@ 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 BEButton_1 = __importDefault(require("../BEButton"));
 const Icon_1 = require("../Icon/Icon");
 const ScreenSize_1 = __importDefault(require("../../../util/ScreenSize"));
 const StepManager_1 = __importDefault(require("../../../util/StepManager"));
 const contexts_1 = require("../../../contexts/index.js");
 function NextStepButton(props) {
-    const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const context = (0, react_2.useContext)(contexts_1.BookingEngineContext);
     const buttonClickHandler = () => __awaiter(this, void 0, void 0, function* () {
         if (!props.onClick || (props.onClick && (yield props.onClick()))) {
             props.history.push(StepManager_1.default.getNextStepUrl(props.currentStep));
         }
     });
-    return (React.createElement("div", { className: "next-step-button" },
-        React.createElement(BEButton_1.default, { size: 'large', icon: props.hideIcon ? null : Icon_1.IconType.ArrowRight, iconPosition: "right", filled: true, primary: true, isLoading: props.isLoading, disabled: props.disabled, wide: props.wideByDefault || context.screenSize <= ScreenSize_1.default.Medium, onClick: buttonClickHandler }, props.text)));
+    return (react_1.default.createElement("div", { className: "next-step-button" },
+        react_1.default.createElement(BEButton_1.default, { size: "large", icon: props.hideIcon ? undefined : Icon_1.IconType.ArrowRight, iconPosition: "right", filled: true, primary: true, isLoading: props.isLoading, disabled: props.disabled, wide: props.wideByDefault || context.screenSize <= ScreenSize_1.default.Medium, onClick: buttonClickHandler }, props.text)));
 }
 exports.default = NextStepButton;
 //# sourceMappingURL=NextStepButton.js.map

package/dist/src/components/generic/buttons/NextStepButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"NextStepButton.js","sourceRoot":"/","sources":["src/components/generic/buttons/NextStepButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,iCAAmC;AACnC,6EAAqD;AACrD,yDAA0D;AAE1D,mEAA2C;AAE3C,qEAA6C;AAC7C,iDAA0D;AAe1D,SAAwB,cAAc,CAAC,KAA0B;IAC7D,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,GAAS,EAAE;QAClC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,MAAM,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;YAC9D,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAW,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;SACrE;IACL,CAAC,CAAA,CAAC;IACF,OAAO,CACH,6BAAK,SAAS,EAAC,kBAAkB;QAC7B,oBAAC,kBAAQ,IACL,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAQ,CAAC,UAAU,EACjD,YAAY,EAAC,OAAO,EACpB,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,aAAa,IAAI,OAAO,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM,EACpE,OAAO,EAAE,kBAAkB,IAE1B,KAAK,CAAC,IAAI,CACJ,CACT,CACT,CAAC;AACN,CAAC;AAxBD,iCAwBC","sourcesContent":["import * as React from 'react';\nimport { useContext } from 'react';\nimport BEButton from '@/components/generic/BEButton';\nimport { IconType } from '@/components/generic/Icon/Icon';\n\nimport ScreenSize from '@/util/ScreenSize';\nimport Step from '@/pages/steps/Step';\nimport StepManager from '@/util/StepManager';\nimport { BookingEngineContext } from '@frontend/contexts';\n\nexport interface NextStepButtonProps {\n    text: string;\n    history: any;\n    currentStep: Step;\n\n    disabled?: boolean;\n    isLoading?: boolean;\n    onClick?: () => Promise<unknown>;\n    wideByDefault?: boolean;\n\n    hideIcon?: boolean;\n}\n\nexport default function NextStepButton(props: NextStepButtonProps) {\n    const context = useContext(BookingEngineContext);\n    const buttonClickHandler = async () => {\n        if (!props.onClick || (props.onClick && (await props.onClick()))) {\n            props.history.push(StepManager.getNextStepUrl(props.currentStep));\n        }\n    };\n    return (\n        <div className=\"next-step-button\">\n            <BEButton\n                size={'large'}\n                icon={props.hideIcon ? null : IconType.ArrowRight}\n                iconPosition=\"right\"\n                filled={true}\n                primary={true}\n                isLoading={props.isLoading}\n                disabled={props.disabled}\n                wide={props.wideByDefault || context.screenSize <= ScreenSize.Medium}\n                onClick={buttonClickHandler}\n            >\n                {props.text}\n            </BEButton>\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"NextStepButton.js","sourceRoot":"/","sources":["src/components/generic/buttons/NextStepButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,iCAAmC;AACnC,6EAAqD;AACrD,yDAA0D;AAE1D,mEAA2C;AAE3C,qEAA6C;AAC7C,iDAA0D;AAe1D,SAAwB,cAAc,CAAC,KAA0B;IAC7D,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,GAAS,EAAE;QAClC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,MAAM,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;YAC9D,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAW,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;SACrE;IACL,CAAC,CAAA,CAAC;IACF,OAAO,CACH,uCAAK,SAAS,EAAC,kBAAkB;QAC7B,8BAAC,kBAAQ,IACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAQ,CAAC,UAAU,EACtD,YAAY,EAAC,OAAO,EACpB,MAAM,QACN,OAAO,QACP,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,aAAa,IAAI,OAAO,CAAC,UAAU,IAAI,oBAAU,CAAC,MAAM,EACpE,OAAO,EAAE,kBAAkB,IAE1B,KAAK,CAAC,IAAI,CACJ,CACT,CACT,CAAC;AACN,CAAC;AAxBD,iCAwBC","sourcesContent":["import React from 'react';\nimport { useContext } from 'react';\nimport BEButton from '@/components/generic/BEButton';\nimport { IconType } from '@/components/generic/Icon/Icon';\n\nimport ScreenSize from '@/util/ScreenSize';\nimport Step from '@/pages/steps/Step';\nimport StepManager from '@/util/StepManager';\nimport { BookingEngineContext } from '@frontend/contexts';\n\nexport interface NextStepButtonProps {\n    text: string;\n    history: any;\n    currentStep: Step;\n\n    disabled?: boolean;\n    isLoading?: boolean;\n    onClick?: () => Promise<unknown>;\n    wideByDefault?: boolean;\n\n    hideIcon?: boolean;\n}\n\nexport default function NextStepButton(props: NextStepButtonProps) {\n    const context = useContext(BookingEngineContext);\n    const buttonClickHandler = async () => {\n        if (!props.onClick || (props.onClick && (await props.onClick()))) {\n            props.history.push(StepManager.getNextStepUrl(props.currentStep));\n        }\n    };\n    return (\n        <div className=\"next-step-button\">\n            <BEButton\n                size=\"large\"\n                icon={props.hideIcon ? undefined : IconType.ArrowRight}\n                iconPosition=\"right\"\n                filled\n                primary\n                isLoading={props.isLoading}\n                disabled={props.disabled}\n                wide={props.wideByDefault || context.screenSize <= ScreenSize.Medium}\n                onClick={buttonClickHandler}\n            >\n                {props.text}\n            </BEButton>\n        </div>\n    );\n}\n"]}

package/dist/src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.d.ts

@@ -1,13 +1,12 @@
-import * as React from 'react';
-import { ChangeEvent, ForwardRefRenderFunction, PropsWithChildren } from 'react';
+import React from 'react';
+import { ChangeEvent, PropsWithChildren } from 'react';
 import './EnhancedPhoneNumberField.global.scss';
-interface EnhancedPhoneNumberField extends PropsWithChildren<any> {
+export interface EnhancedPhoneNumberField extends PropsWithChildren<any> {
     validationStatus?: 'success' | 'error';
     name?: string;
     value?: string;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     disabled?: boolean;
 }
-declare const EnhancedPhoneNumberField: ForwardRefRenderFunction<HTMLInputElement, EnhancedPhoneNumberField>;
 declare const _default: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<EnhancedPhoneNumberField>, keyof EnhancedPhoneNumberField> & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/dist/src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const react_i18next_1 = require("react-i18next");
 const CountryCodesAndNumbers_1 = require("../../../../models/CountryCodesAndNumbers");
 const Translation_1 = require("translations/Translation");
@@ -38,34 +38,25 @@ const AutoFocusOnSelect_1 = require("../../../../hooks/AutoFocusOnSelect");
 const Select_1 = require("../../Select/Select");
 const PHONE_AND_PREFIX_SPLIT = ' ';
 const EnhancedPhoneNumberField = (props, ref) => {
-    const innerRef = (0, react_1.useRef)(null);
-    (0, react_1.useImperativeHandle)(ref, () => innerRef.current);
+    const innerRef = (0, react_2.useRef)(null);
+    (0, react_2.useImperativeHandle)(ref, () => innerRef.current);
     const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen, isFocused } = (0, AutoFocusOnSelect_1.useAutoFocusOnSelect)({
         ref: innerRef.current,
         onlyAutoOpenWhenInputEmpty: true,
     });
     const { t } = (0, react_i18next_1.useTranslation)();
-    const organizedCountries = (0, react_1.useMemo)(() => {
+    const organizedCountries = (0, react_2.useMemo)(() => {
         return CountryCodesAndNumbers_1.ListOfCountriesAndCodes.sort((a, b) => {
             return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);
         });
     }, [CountryCodesAndNumbers_1.ListOfCountriesAndCodes]);
-    const [container, setContainer] = (0, react_1.useState)(null);
+    const [container, setContainer] = (0, react_2.useState)(null);
     const { validationStatus, name, onChange, value } = props;
-    const [selectedCountry, subscriberCode] = (0, react_1.useMemo)(() => {
+    const [selectedCountry, subscriberCode] = (0, react_2.useMemo)(() => {
         var _a;
         const [prefix, number] = (_a = value === null || value === void 0 ? void 0 : value.split(PHONE_AND_PREFIX_SPLIT)) !== null && _a !== void 0 ? _a : [];
-        let selectedCountry;
         if (prefix) {
-            for (const country of organizedCountries) {
-                if (prefix === `${country.phone}`) {
-                    selectedCountry = country;
-                    break;
-                }
-            }
-            if (!selectedCountry) {
-                selectedCountry = organizedCountries[0];
-            }
+            const selectedCountry = organizedCountries.find(({ phone }) => prefix === phone) || organizedCountries[0];
             return [selectedCountry, number];
         }
         return [organizedCountries[0], ''];
@@ -101,25 +92,25 @@ const EnhancedPhoneNumberField = (props, ref) => {
         onPrefixChanged(country);
         return;
     };
-    return (React.createElement("div", { className: fieldClasses },
-        React.createElement("div", { className: "rs-enhanced-phone-field--country", onClick: onTriggerClicked },
-            React.createElement("div", { className: "rs-enhanced-phone-field--country-icon" }, (0, CountryCodesAndNumbers_1.convertCountryCodeToFlag)(selectedCountry.code)),
-            React.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown })),
-        React.createElement("div", { className: "rs-enhanced-phone-field--number" },
-            React.createElement("span", { className: "rs-enhanced-phone-field--number-prefix" },
+    return (react_1.default.createElement("div", { className: fieldClasses },
+        react_1.default.createElement("div", { className: "rs-enhanced-phone-field--country", onClick: onTriggerClicked },
+            react_1.default.createElement("div", { className: "rs-enhanced-phone-field--country-icon" }, (0, CountryCodesAndNumbers_1.convertCountryCodeToFlag)(selectedCountry.code)),
+            react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown })),
+        react_1.default.createElement("div", { className: "rs-enhanced-phone-field--number" },
+            react_1.default.createElement("span", { className: "rs-enhanced-phone-field--number-prefix" },
                 "+",
                 selectedCountry.phone),
-            React.createElement("input", { disabled: props.disabled, ref: innerRef, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Phone) + ' *', type: "number", style: { paddingLeft: selectedCountry.phone.length * 8 + 20 + 'px' }, onChange: onInputChanged, value: subscriberCode }),
-            React.createElement("div", { className: "rs-enhanced-phone-field--number-status" })),
-        React.createElement("div", { className: "rs-enhanced-phone-field--anchor", ref: setContainer }),
-        React.createElement(Select_1.Select, { open: isDropdownOpen, onClose: onDropdownClosed, target: container, options: organizedCountries, value: selectedCountry.code, onChange: (value) => onCountryClick(getOption(value)), labelName: "code", keyName: "code", renderOption: (country) => (React.createElement("div", { className: "rs-enhanced-phone-field--suggest-list-country" },
-                React.createElement("div", { className: "rs-enhanced-phone-field--suggest-list-country-icon" }, (0, CountryCodesAndNumbers_1.convertCountryCodeToFlag)(country.code)),
-                React.createElement("div", { className: "rs-enhanced-phone-field--suggest-list-country-name" },
+            react_1.default.createElement("input", { disabled: props.disabled, ref: innerRef, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Phone) + ' *', type: "number", style: { paddingLeft: selectedCountry.phone.length * 8 + 20 + 'px' }, onChange: onInputChanged, value: subscriberCode }),
+            react_1.default.createElement("div", { className: "rs-enhanced-phone-field--number-status" })),
+        react_1.default.createElement("div", { className: "rs-enhanced-phone-field--anchor", ref: setContainer }),
+        react_1.default.createElement(Select_1.Select, { open: isDropdownOpen, onClose: onDropdownClosed, target: container, options: organizedCountries, value: selectedCountry.code, onChange: (value) => onCountryClick(getOption(value)), labelName: "code", keyName: "code", renderOption: (country) => (react_1.default.createElement("div", { className: "rs-enhanced-phone-field--suggest-list-country" },
+                react_1.default.createElement("div", { className: "rs-enhanced-phone-field--suggest-list-country-icon" }, (0, CountryCodesAndNumbers_1.convertCountryCodeToFlag)(country === null || country === void 0 ? void 0 : country.code)),
+                react_1.default.createElement("div", { className: "rs-enhanced-phone-field--suggest-list-country-name" }, country === null || country === void 0 ? void 0 :
                     country.label,
                     " ",
-                    React.createElement("span", null,
-                        "+",
+                    react_1.default.createElement("span", null,
+                        "+", country === null || country === void 0 ? void 0 :
                         country.phone)))) })));
 };
-exports.default = React.forwardRef(EnhancedPhoneNumberField);
+exports.default = react_1.default.forwardRef(EnhancedPhoneNumberField);
 //# sourceMappingURL=EnhancedPhoneNumberField.js.map

package/dist/src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnhancedPhoneNumberField.js","sourceRoot":"/","sources":["src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames';\nimport * as React from 'react';\nimport { ChangeEvent, ForwardRefRenderFunction, PropsWithChildren, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { convertCountryCodeToFlag, CountryType, ListOfCountriesAndCodes } from '@/models/CountryCodesAndNumbers';\nimport { Translation } from 'translations/Translation';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\n\nimport './EnhancedPhoneNumberField.global.scss';\nimport { useAutoFocusOnSelect } from '@/hooks/AutoFocusOnSelect';\nimport { Select } from '../../Select/Select';\n\ninterface EnhancedPhoneNumberField extends PropsWithChildren<any> {\n    validationStatus?: 'success' | 'error';\n    name?: string;\n    value?: string;\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    disabled?: boolean;\n}\n\nconst PHONE_AND_PREFIX_SPLIT = ' ';\n\nconst EnhancedPhoneNumberField: ForwardRefRenderFunction<HTMLInputElement, EnhancedPhoneNumberField> = (props, ref) => {\n    const innerRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => innerRef.current);\n    const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen, isFocused } = useAutoFocusOnSelect({\n        ref: innerRef.current,\n        onlyAutoOpenWhenInputEmpty: true,\n    });\n\n    const { t } = useTranslation();\n\n    const organizedCountries: CountryType[] = useMemo(() => {\n        return ListOfCountriesAndCodes.sort((a, b) => {\n            return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);\n        });\n    }, [ListOfCountriesAndCodes]);\n\n    const [container, setContainer] = useState<HTMLDivElement>(null);\n\n    const { validationStatus, name, onChange, value } = props;\n\n    const [selectedCountry, subscriberCode] = useMemo(() => {\n        const [prefix, number] = value?.split(PHONE_AND_PREFIX_SPLIT) ?? [];\n        let selectedCountry: CountryType;\n\n        if (prefix) {\n            for (const country of organizedCountries) {\n                if (prefix === `${country.phone}`) {\n                    selectedCountry = country;\n                    break;\n                }\n            }\n\n            if (!selectedCountry) {\n                selectedCountry = organizedCountries[0];\n            }\n\n            return [selectedCountry, number];\n        }\n\n        return [organizedCountries[0], ''];\n    }, [value]);\n\n    const getOption = (key: CountryType['code']): CountryType => {\n        return organizedCountries.find(({ code }) => code === key);\n    };\n\n    const raiseOnChangeEvent = (prefix?: CountryType, suffix?: string) => {\n        let newSuffix = suffix ?? subscriberCode;\n\n        if (newSuffix.startsWith('0')) {\n            newSuffix = newSuffix.substring(1);\n        }\n\n        const newValue = `${prefix?.phone ?? selectedCountry.phone}${PHONE_AND_PREFIX_SPLIT}${newSuffix}`;\n\n        if (value != newValue) {\n            onChange?.({ target: { name, value: newValue } } as any);\n        }\n    };\n\n    const onInputChanged = (e: ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value;\n        raiseOnChangeEvent(undefined, value);\n    };\n\n    const onPrefixChanged = (selectedCountry: CountryType) => {\n        onItemSelected();\n        raiseOnChangeEvent(selectedCountry, undefined);\n    };\n\n    const fieldClasses = classNames('rs-enhanced-phone-field', {\n        [`--${validationStatus}`]: !!validationStatus,\n        '--focused': isFocused,\n        '--disabled': props.disabled,\n    });\n    const onCountryClick = (country: CountryType) => {\n        onPrefixChanged(country);\n        return;\n    };\n\n    return (\n        <div className={fieldClasses}>\n            <div className=\"rs-enhanced-phone-field--country\" onClick={onTriggerClicked}>\n                <div className=\"rs-enhanced-phone-field--country-icon\">{convertCountryCodeToFlag(selectedCountry.code)}</div>\n                <Icon icon={IconType.Dropdown} />\n            </div>\n            <div className=\"rs-enhanced-phone-field--number\">\n                <span className=\"rs-enhanced-phone-field--number-prefix\">+{selectedCountry.phone}</span>\n                <input\n                    disabled={props.disabled}\n                    ref={innerRef}\n                    placeholder={t(Translation.Step.Confirmation.Inputs.Phone) + ' *'}\n                    type=\"number\"\n                    style={{ paddingLeft: selectedCountry.phone.length * 8 + 20 + 'px' }}\n                    onChange={onInputChanged}\n                    value={subscriberCode}\n                />\n\n                <div className=\"rs-enhanced-phone-field--number-status\"></div>\n            </div>\n            <div className=\"rs-enhanced-phone-field--anchor\" ref={setContainer}></div>\n            <Select<CountryType, 'code'>\n                open={isDropdownOpen}\n                onClose={onDropdownClosed}\n                target={container}\n                options={organizedCountries}\n                value={selectedCountry.code}\n                onChange={(value) => onCountryClick(getOption(value))}\n                labelName=\"code\"\n                keyName=\"code\"\n                renderOption={(country) => (\n                    <div className=\"rs-enhanced-phone-field--suggest-list-country\">\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-icon\">{convertCountryCodeToFlag(country.code)}</div>\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-name\">\n                            {country.label} <span>+{country.phone}</span>\n                        </div>\n                    </div>\n                )}\n            />\n        </div>\n    );\n};\n\nexport default React.forwardRef<HTMLInputElement, React.PropsWithChildren<EnhancedPhoneNumberField>>(EnhancedPhoneNumberField);\n"]}
+{"version":3,"file":"EnhancedPhoneNumberField.js","sourceRoot":"/","sources":["src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames';\nimport React from 'react';\nimport { ChangeEvent, ForwardRefRenderFunction, PropsWithChildren, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { convertCountryCodeToFlag, CountryType, ListOfCountriesAndCodes } from '@/models/CountryCodesAndNumbers';\nimport { Translation } from 'translations/Translation';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\n\nimport './EnhancedPhoneNumberField.global.scss';\nimport { useAutoFocusOnSelect } from '@/hooks/AutoFocusOnSelect';\nimport { Select } from '../../Select/Select';\n\nexport interface EnhancedPhoneNumberField extends PropsWithChildren<any> {\n    validationStatus?: 'success' | 'error';\n    name?: string;\n    value?: string;\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    disabled?: boolean;\n}\n\nconst PHONE_AND_PREFIX_SPLIT = ' ';\n\nconst EnhancedPhoneNumberField: ForwardRefRenderFunction<HTMLInputElement, EnhancedPhoneNumberField> = (props, ref) => {\n    const innerRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => innerRef.current);\n    const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen, isFocused } = useAutoFocusOnSelect({\n        ref: innerRef.current,\n        onlyAutoOpenWhenInputEmpty: true,\n    });\n\n    const { t } = useTranslation();\n\n    const organizedCountries: CountryType[] = useMemo(() => {\n        return ListOfCountriesAndCodes.sort((a, b) => {\n            return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);\n        });\n    }, [ListOfCountriesAndCodes]);\n\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n    const { validationStatus, name, onChange, value } = props;\n\n    const [selectedCountry, subscriberCode] = useMemo(() => {\n        const [prefix, number] = value?.split(PHONE_AND_PREFIX_SPLIT) ?? [];\n\n        if (prefix) {\n            const selectedCountry = organizedCountries.find(({ phone }) => prefix === phone) || organizedCountries[0];\n            return [selectedCountry, number];\n        }\n\n        return [organizedCountries[0], ''];\n    }, [value]);\n\n    const getOption = (key: CountryType['code']): CountryType => {\n        return organizedCountries.find(({ code }) => code === key) as CountryType;\n    };\n\n    const raiseOnChangeEvent = (prefix?: CountryType, suffix?: string) => {\n        let newSuffix = suffix ?? subscriberCode;\n\n        if (newSuffix.startsWith('0')) {\n            newSuffix = newSuffix.substring(1);\n        }\n\n        const newValue = `${prefix?.phone ?? selectedCountry.phone}${PHONE_AND_PREFIX_SPLIT}${newSuffix}`;\n\n        if (value != newValue) {\n            onChange?.({ target: { name, value: newValue } } as any);\n        }\n    };\n\n    const onInputChanged = (e: ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value;\n        raiseOnChangeEvent(undefined, value);\n    };\n\n    const onPrefixChanged = (selectedCountry: CountryType) => {\n        onItemSelected();\n        raiseOnChangeEvent(selectedCountry, undefined);\n    };\n\n    const fieldClasses = classNames('rs-enhanced-phone-field', {\n        [`--${validationStatus}`]: !!validationStatus,\n        '--focused': isFocused,\n        '--disabled': props.disabled,\n    });\n    const onCountryClick = (country: CountryType) => {\n        onPrefixChanged(country);\n        return;\n    };\n\n    return (\n        <div className={fieldClasses}>\n            <div className=\"rs-enhanced-phone-field--country\" onClick={onTriggerClicked}>\n                <div className=\"rs-enhanced-phone-field--country-icon\">{convertCountryCodeToFlag(selectedCountry.code)}</div>\n                <Icon icon={IconType.Dropdown} />\n            </div>\n            <div className=\"rs-enhanced-phone-field--number\">\n                <span className=\"rs-enhanced-phone-field--number-prefix\">+{selectedCountry.phone}</span>\n                <input\n                    disabled={props.disabled}\n                    ref={innerRef}\n                    placeholder={t(Translation.Step.Confirmation.Inputs.Phone) + ' *'}\n                    type=\"number\"\n                    style={{ paddingLeft: selectedCountry.phone.length * 8 + 20 + 'px' }}\n                    onChange={onInputChanged}\n                    value={subscriberCode}\n                />\n\n                <div className=\"rs-enhanced-phone-field--number-status\"></div>\n            </div>\n            <div className=\"rs-enhanced-phone-field--anchor\" ref={setContainer}></div>\n            <Select<CountryType, 'code'>\n                open={isDropdownOpen}\n                onClose={onDropdownClosed}\n                target={container}\n                options={organizedCountries}\n                value={selectedCountry.code}\n                onChange={(value) => onCountryClick(getOption(value))}\n                labelName=\"code\"\n                keyName=\"code\"\n                renderOption={(country) => (\n                    <div className=\"rs-enhanced-phone-field--suggest-list-country\">\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-icon\">{convertCountryCodeToFlag(country?.code as string)}</div>\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-name\">\n                            {country?.label} <span>+{country?.phone}</span>\n                        </div>\n                    </div>\n                )}\n            />\n        </div>\n    );\n};\n\nexport default React.forwardRef<HTMLInputElement, React.PropsWithChildren<EnhancedPhoneNumberField>>(EnhancedPhoneNumberField);\n"]}

package/dist/src/components/generic/date/DatePicker.js

@@ -35,23 +35,22 @@ 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 Color_1 = require("../../../util/Color");
+const react_1 = __importDefault(require("react"));
 const Icon_1 = __importStar(require("../Icon/Icon"));
-const react_1 = require("react");
+const Color_1 = require("../../../util/Color");
+const react_2 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
-const dayjs_1 = __importDefault(require("dayjs"));
-const contexts_1 = require("../../../contexts/index.js");
-const DatePickerMonth_1 = __importDefault(require("./DatePickerMonth"));
 const BookingAPI_1 = __importDefault(require("../../../api/BookingAPI"));
-const contexts_2 = require("../../../contexts/index.js");
-const DataLayer_1 = __importStar(require("../../../util/DataLayer"));
-const MinimumNightStayPill_1 = __importDefault(require("../../steps/MinimumNightStayPill"));
+const DatePickerMonth_1 = __importDefault(require("./DatePickerMonth"));
 const DaysSelectedInformer_1 = __importDefault(require("../../steps/DaysSelectedInformer"));
-const hooks_1 = require("../../../hooks/index.js");
+const MinimumNightStayPill_1 = __importDefault(require("../../steps/MinimumNightStayPill"));
 const DatePickerTypeFeature_1 = __importDefault(require("../../../providers/feature/DatePickerTypeFeature"));
+const DataLayer_1 = __importStar(require("../../../util/DataLayer"));
+const contexts_1 = require("../../../contexts/index.js");
+const hooks_1 = require("../../../hooks/index.js");
+const dayjs_1 = __importDefault(require("dayjs"));
 const WeekViewSkeleton_1 = __importDefault(require("./WeekViewSkeleton"));
-const DatePickerWeek = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./DatePickerWeek'))));
+const DatePickerWeek = (0, react_2.lazy)(() => Promise.resolve().then(() => __importStar(require('./DatePickerWeek'))));
 var DateRangePickingState;
 (function (DateRangePickingState) {
     DateRangePickingState[DateRangePickingState["StartDate"] = 1] = "StartDate";
@@ -60,18 +59,18 @@ var DateRangePickingState;
 function DatePicker(props) {
     var _a, _b;
     const { hotel } = (0, hooks_1.useCurrentHotel)();
-    const [currentMonth, setCurrentMonth] = (0, react_1.useState)(props.showMonthOnLoad ? props.showMonthOnLoad : props.selectedStartDate ? props.selectedStartDate : (0, dayjs_1.default)());
-    const [selectedStartDate, setSelectedStartDate] = (0, react_1.useState)((_a = props.selectedStartDate) !== null && _a !== void 0 ? _a : null);
-    const [selectedEndDate, setSelectedEndDate] = (0, react_1.useState)((_b = props.selectedEndDate) !== null && _b !== void 0 ? _b : null);
-    const [hoveringOverDate, setHoveringOverDate] = (0, react_1.useState)(null);
-    const [pickingState, setPickingState] = (0, react_1.useState)(DateRangePickingState.StartDate);
-    const [calendarStyle, setCalendarStyle] = (0, react_1.useState)((hotel === null || hotel === void 0 ? void 0 : hotel.defaultDatepickerType) ? hotel === null || hotel === void 0 ? void 0 : hotel.defaultDatepickerType : 'Month');
-    (0, react_1.useEffect)(() => {
+    const [currentMonth, setCurrentMonth] = (0, react_2.useState)(props.showMonthOnLoad ? props.showMonthOnLoad : props.selectedStartDate ? props.selectedStartDate : (0, dayjs_1.default)());
+    const [selectedStartDate, setSelectedStartDate] = (0, react_2.useState)((_a = props.selectedStartDate) !== null && _a !== void 0 ? _a : null);
+    const [selectedEndDate, setSelectedEndDate] = (0, react_2.useState)((_b = props.selectedEndDate) !== null && _b !== void 0 ? _b : null);
+    const [hoveringOverDate, setHoveringOverDate] = (0, react_2.useState)(null);
+    const [pickingState, setPickingState] = (0, react_2.useState)(DateRangePickingState.StartDate);
+    const [calendarStyle, setCalendarStyle] = (0, react_2.useState)((hotel === null || hotel === void 0 ? void 0 : hotel.defaultDatepickerType) ? hotel === null || hotel === void 0 ? void 0 : hotel.defaultDatepickerType : 'Month');
+    (0, react_2.useEffect)(() => {
         setCalendarStyle((hotel === null || hotel === void 0 ? void 0 : hotel.defaultDatepickerType) ? hotel === null || hotel === void 0 ? void 0 : hotel.defaultDatepickerType : 'Month');
     }, [hotel === null || hotel === void 0 ? void 0 : hotel.defaultDatepickerType]);
-    const [months, setMonths] = (0, react_1.useState)(props.showMultipleMonths ? [currentMonth, currentMonth.add(1, 'month')] : [currentMonth]);
-    const [maxPrice, setMaxPrice] = (0, react_1.useState)(0);
-    const basketContext = (0, react_1.useContext)(contexts_2.BasketContext);
+    const [months, setMonths] = (0, react_2.useState)(props.showMultipleMonths ? [currentMonth, currentMonth.add(1, 'month')] : [currentMonth]);
+    const [maxPrice, setMaxPrice] = (0, react_2.useState)(0);
+    const basketContext = (0, react_2.useContext)(contexts_1.BasketContext);
     const onClickDate = (newDate) => __awaiter(this, void 0, void 0, function* () {
         let newPickingState = null;
         const selectedBasketRow = basketContext.selectedBasketRow;
@@ -138,35 +137,35 @@ function DatePicker(props) {
             });
         }
     };
-    const firstUpdate = (0, react_1.useRef)();
+    const firstUpdate = (0, react_2.useRef)(null);
     // TODO: Perhaps refactor this later to not depend on non-state items
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if ((DatePickerTypeFeature_1.default === null || DatePickerTypeFeature_1.default === void 0 ? void 0 : DatePickerTypeFeature_1.default.isActive()) && props.supportsWeek) {
             setCalendarStyle('Week');
         }
     }, [DatePickerTypeFeature_1.default === null || DatePickerTypeFeature_1.default === void 0 ? void 0 : DatePickerTypeFeature_1.default.isActive()]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (props.showMonthOnLoad) {
             setCurrentMonth(props.showMonthOnLoad);
         }
     }, [props.showMonthOnLoad]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (props.showMultipleMonths) {
             setMonths([currentMonth, currentMonth.add(1, 'month')]);
         }
     }, [currentMonth, props.showMultipleMonths]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (firstUpdate.current) {
-            firstUpdate.current = undefined;
+            firstUpdate.current = null;
             return;
         }
         if (props.onStartDateChanged) {
             props.onStartDateChanged(selectedStartDate);
         }
     }, [selectedStartDate]);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, react_2.useLayoutEffect)(() => {
         if (firstUpdate.current) {
-            firstUpdate.current = undefined;
+            firstUpdate.current = null;
             return;
         }
         if (props.onEndDateChanged) {
@@ -187,11 +186,11 @@ function DatePicker(props) {
         },
         setMaxPrice,
     };
-    const printMonths = (0, react_1.useMemo)(() => (React.createElement(React.Fragment, null, calendarStyle === 'Month' ? (React.createElement(React.Fragment, null,
-        React.createElement(DatePickerMonth_1.default, { small: props.small, showingMonth: currentMonth }),
-        props.showMultipleMonths && React.createElement(DatePickerMonth_1.default, { showingMonth: currentMonth.add(1, 'month') }))) : (React.createElement(React.Fragment, null,
-        React.createElement(React.Suspense, { fallback: React.createElement(WeekViewSkeleton_1.default, null) },
-            React.createElement(DatePickerWeek, null)))))), [currentMonth, props.showMultipleMonths, calendarStyle]);
+    const printMonths = (0, react_2.useMemo)(() => (react_1.default.createElement(react_1.default.Fragment, null, calendarStyle === 'Month' ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(DatePickerMonth_1.default, { small: props.small, showingMonth: currentMonth }),
+        props.showMultipleMonths && react_1.default.createElement(DatePickerMonth_1.default, { showingMonth: currentMonth.add(1, 'month') }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_1.default.Suspense, { fallback: react_1.default.createElement(WeekViewSkeleton_1.default, null) },
+            react_1.default.createElement(DatePickerWeek, null)))))), [currentMonth, props.showMultipleMonths, calendarStyle]);
     const calendarClassNames = (0, classnames_1.default)('diji-calendar', {
         '--single': !props.showMultipleMonths,
         '--small': props.small,
@@ -213,23 +212,23 @@ function DatePicker(props) {
         DataLayer_1.default.instance.sendInteraction('Set Calendar Style - Week', DataLayer_1.InteractionType.CALENDAR, DataLayer_1.InteractionStep.DATES);
         setCalendarStyle('Week');
     };
-    return (React.createElement(contexts_1.DatePickerContext.Provider, { value: context },
-        React.createElement("div", { ref: firstUpdate, className: calendarClassNames },
-            calendarStyle === 'Month' && (React.createElement("div", { className: "diji-calendar-navigation" },
-                React.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowLeft2, onClick: previousMonthOnClick, color: Color_1.Color.White, backgroundColor: Color_1.Color.Navy, borderRadius: "round", size: "24px" }),
-                React.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2, onClick: nextMonthOnClick, color: Color_1.Color.White, backgroundColor: Color_1.Color.Navy, borderRadius: "round", size: "24px" }))),
-            props.supportsWeek && (React.createElement("div", { className: "diji-calendar-picker-type" },
-                React.createElement(Icon_1.default, { icon: Icon_1.IconType.ViewMonth, size: "32px", color: calendarStyle === 'Month' ? Color_1.Color.Navy : Color_1.Color.Grey, onClick: setCalendarStyleAsMonth }),
-                React.createElement(Icon_1.default, { icon: Icon_1.IconType.ViewWeek, size: "32px", color: calendarStyle === 'Week' ? Color_1.Color.Navy : Color_1.Color.Grey, onClick: setCalendarStyleAsWeek }))),
+    return (react_1.default.createElement(contexts_1.DatePickerContext.Provider, { value: context },
+        react_1.default.createElement("div", { ref: firstUpdate, className: calendarClassNames },
+            calendarStyle === 'Month' && (react_1.default.createElement("div", { className: "diji-calendar-navigation" },
+                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowLeft2, onClick: previousMonthOnClick, color: Color_1.Color.White, backgroundColor: Color_1.Color.Navy, borderRadius: "round", size: "24px" }),
+                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2, onClick: nextMonthOnClick, color: Color_1.Color.White, backgroundColor: Color_1.Color.Navy, borderRadius: "round", size: "24px" }))),
+            props.supportsWeek && (react_1.default.createElement("div", { className: "diji-calendar-picker-type" },
+                react_1.default.createElement(Icon_1.default, { name: "Calendar_MothViewButton", icon: Icon_1.IconType.ViewMonth, size: "32px", color: calendarStyle === 'Month' ? Color_1.Color.Navy : Color_1.Color.Grey, onClick: setCalendarStyleAsMonth }),
+                react_1.default.createElement(Icon_1.default, { name: "Calendar_WeekViewButton", icon: Icon_1.IconType.ViewWeek, size: "32px", color: calendarStyle === 'Week' ? Color_1.Color.Navy : Color_1.Color.Grey, onClick: setCalendarStyleAsWeek }))),
             printMonths,
-            props.showMinNightStay && props.showMultipleMonths && (React.createElement("div", { className: "diji-calendar--min-night-stay u-flex u-flex-direction-column u-flex-align-center" },
-                React.createElement(DaysSelectedInformer_1.default, null),
-                React.createElement("div", { className: "u-marg-top--light" },
-                    React.createElement(MinimumNightStayPill_1.default, null))))),
-        props.showMinNightStay && !props.showMultipleMonths && (React.createElement("div", { className: "diji-calendar--min-night-stay --small u-flex u-flex-direction-column u-flex-align-center u-marg-top" },
-            React.createElement(DaysSelectedInformer_1.default, null),
-            React.createElement("div", { className: "u-marg-top--light" },
-                React.createElement(MinimumNightStayPill_1.default, null))))));
+            props.showMinNightStay && props.showMultipleMonths && (react_1.default.createElement("div", { className: "diji-calendar--min-night-stay u-flex u-flex-direction-column u-flex-align-center" },
+                react_1.default.createElement(DaysSelectedInformer_1.default, null),
+                react_1.default.createElement("div", { className: "u-marg-top--light" },
+                    react_1.default.createElement(MinimumNightStayPill_1.default, null))))),
+        props.showMinNightStay && !props.showMultipleMonths && (react_1.default.createElement("div", { className: "diji-calendar--min-night-stay --small u-flex u-flex-direction-column u-flex-align-center u-marg-top" },
+            react_1.default.createElement(DaysSelectedInformer_1.default, null),
+            react_1.default.createElement("div", { className: "u-marg-top--light" },
+                react_1.default.createElement(MinimumNightStayPill_1.default, null))))));
 }
 exports.default = DatePicker;
 //# sourceMappingURL=DatePicker.js.map