@roomstay/frontend 2.1.6 → 2.1.8

package/dist/src/components/iconComponents/BookNowPayLaterIcon.js

@@ -1,43 +1,23 @@
 "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 BookNowPayLaterIcon = (props) => {
-    return (React.createElement("svg", { width: `${props.width}`, height: `${props.height}`, viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("g", { clipPath: "url(#clip0)" },
-            React.createElement("path", { d: "M14.375 28.75C6.44841 28.75 0 22.3016 0 14.375C0 6.44841 6.44841 0 14.375 0C22.3016 0 28.75 6.44841 28.75 14.375C28.75 22.3016 22.3016 28.75 14.375 28.75Z", fill: "white" }),
-            React.createElement("path", { d: "M14.375 28.75C6.44841 28.75 0 22.3016 0 14.375C0 6.44841 6.44841 0 14.375 0C22.3016 0 28.75 6.44841 28.75 14.375C28.75 22.3016 22.3016 28.75 14.375 28.75ZM14.375 2.33108C7.73385 2.33108 2.33108 7.73385 2.33108 14.375C2.33108 21.0162 7.73385 26.4189 14.375 26.4189C21.0162 26.4189 26.4189 21.0162 26.4189 14.375C26.4189 7.73385 21.0162 2.33108 14.375 2.33108Z", fill: "#249ABA" }),
-            React.createElement("path", { d: "M15.6598 14.9156C15.0008 15.5747 13.9322 15.5747 13.2732 14.9156L8.13227 9.77473C7.67467 9.31713 7.67467 8.57521 8.13227 8.1176C8.58987 7.66001 9.33177 7.66 9.78938 8.11758L14.4665 12.7944L16.8645 10.3966C17.3222 9.93904 18.0641 9.93906 18.5216 10.3966C18.9793 10.8543 18.9793 11.5962 18.5216 12.0538L15.6598 14.9156Z", fill: "#1D1D1D" }),
-            React.createElement("path", { d: "M33.75 40H19.25C17.5931 40 16.25 38.6569 16.25 37V26.25H40V33.75C40 37.5 37.5 40 33.75 40Z", fill: "white" }),
-            React.createElement("path", { d: "M39.9999 26.25H16.2499V22.0625C16.2499 20.4056 17.593 19.0625 19.2499 19.0625H36.9999C38.6567 19.0625 39.9999 20.4056 39.9999 22.0625V26.25Z", fill: "#1D1D1D" }),
-            React.createElement("path", { d: "M33.75 40V35.75C33.75 34.6454 34.6454 33.75 35.75 33.75H40C40 37.5 37.5 40 33.75 40Z", fill: "#249ABA" }),
-            React.createElement("path", { d: "M20.8594 17.7344C20.8594 17.0872 21.384 16.5625 22.0312 16.5625C22.6785 16.5625 23.2031 17.0872 23.2031 17.7344V18.9062C23.2031 19.5535 22.6785 20.0781 22.0312 20.0781C21.384 20.0781 20.8594 19.5535 20.8594 18.9062V17.7344Z", fill: "#249ABA" }),
-            React.createElement("path", { d: "M33.3594 17.7344C33.3594 17.0872 33.884 16.5625 34.5312 16.5625C35.1785 16.5625 35.7031 17.0872 35.7031 17.7344V18.9062C35.7031 19.5535 35.1785 20.0781 34.5312 20.0781C33.884 20.0781 33.3594 19.5535 33.3594 18.9062V17.7344Z", fill: "#249ABA" })),
-        React.createElement("defs", null,
-            React.createElement("clipPath", { id: "clip0" },
-                React.createElement("rect", { width: "40", height: "40", fill: "white" })))));
+    return (react_1.default.createElement("svg", { width: `${props.width}`, height: `${props.height}`, viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("g", { clipPath: "url(#clip0)" },
+            react_1.default.createElement("path", { d: "M14.375 28.75C6.44841 28.75 0 22.3016 0 14.375C0 6.44841 6.44841 0 14.375 0C22.3016 0 28.75 6.44841 28.75 14.375C28.75 22.3016 22.3016 28.75 14.375 28.75Z", fill: "white" }),
+            react_1.default.createElement("path", { d: "M14.375 28.75C6.44841 28.75 0 22.3016 0 14.375C0 6.44841 6.44841 0 14.375 0C22.3016 0 28.75 6.44841 28.75 14.375C28.75 22.3016 22.3016 28.75 14.375 28.75ZM14.375 2.33108C7.73385 2.33108 2.33108 7.73385 2.33108 14.375C2.33108 21.0162 7.73385 26.4189 14.375 26.4189C21.0162 26.4189 26.4189 21.0162 26.4189 14.375C26.4189 7.73385 21.0162 2.33108 14.375 2.33108Z", fill: "#249ABA" }),
+            react_1.default.createElement("path", { d: "M15.6598 14.9156C15.0008 15.5747 13.9322 15.5747 13.2732 14.9156L8.13227 9.77473C7.67467 9.31713 7.67467 8.57521 8.13227 8.1176C8.58987 7.66001 9.33177 7.66 9.78938 8.11758L14.4665 12.7944L16.8645 10.3966C17.3222 9.93904 18.0641 9.93906 18.5216 10.3966C18.9793 10.8543 18.9793 11.5962 18.5216 12.0538L15.6598 14.9156Z", fill: "#1D1D1D" }),
+            react_1.default.createElement("path", { d: "M33.75 40H19.25C17.5931 40 16.25 38.6569 16.25 37V26.25H40V33.75C40 37.5 37.5 40 33.75 40Z", fill: "white" }),
+            react_1.default.createElement("path", { d: "M39.9999 26.25H16.2499V22.0625C16.2499 20.4056 17.593 19.0625 19.2499 19.0625H36.9999C38.6567 19.0625 39.9999 20.4056 39.9999 22.0625V26.25Z", fill: "#1D1D1D" }),
+            react_1.default.createElement("path", { d: "M33.75 40V35.75C33.75 34.6454 34.6454 33.75 35.75 33.75H40C40 37.5 37.5 40 33.75 40Z", fill: "#249ABA" }),
+            react_1.default.createElement("path", { d: "M20.8594 17.7344C20.8594 17.0872 21.384 16.5625 22.0312 16.5625C22.6785 16.5625 23.2031 17.0872 23.2031 17.7344V18.9062C23.2031 19.5535 22.6785 20.0781 22.0312 20.0781C21.384 20.0781 20.8594 19.5535 20.8594 18.9062V17.7344Z", fill: "#249ABA" }),
+            react_1.default.createElement("path", { d: "M33.3594 17.7344C33.3594 17.0872 33.884 16.5625 34.5312 16.5625C35.1785 16.5625 35.7031 17.0872 35.7031 17.7344V18.9062C35.7031 19.5535 35.1785 20.0781 34.5312 20.0781C33.884 20.0781 33.3594 19.5535 33.3594 18.9062V17.7344Z", fill: "#249ABA" })),
+        react_1.default.createElement("defs", null,
+            react_1.default.createElement("clipPath", { id: "clip0" },
+                react_1.default.createElement("rect", { width: "40", height: "40", fill: "white" })))));
 };
 exports.default = BookNowPayLaterIcon;
 //# sourceMappingURL=BookNowPayLaterIcon.js.map

package/dist/src/components/iconComponents/BookNowPayLaterIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BookNowPayLaterIcon.js","sourceRoot":"/","sources":["src/components/iconComponents/BookNowPayLaterIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAO/B,MAAM,mBAAmB,GAAG,CAAC,KAAY,EAAE,EAAE;IACzC,OAAO,CACH,6BAAK,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;QACvH,2BAAG,QAAQ,EAAC,aAAa;YACrB,8BACI,CAAC,EAAC,4JAA4J,EAC9J,IAAI,EAAC,OAAO,GACd;YACF,8BACI,CAAC,EAAC,wWAAwW,EAC1W,IAAI,EAAC,SAAS,GAChB;YACF,8BACI,CAAC,EAAC,+TAA+T,EACjU,IAAI,EAAC,SAAS,GAChB;YACF,8BAAM,CAAC,EAAC,4FAA4F,EAAC,IAAI,EAAC,OAAO,GAAG;YACpH,8BACI,CAAC,EAAC,8IAA8I,EAChJ,IAAI,EAAC,SAAS,GAChB;YACF,8BAAM,CAAC,EAAC,sFAAsF,EAAC,IAAI,EAAC,SAAS,GAAG;YAChH,8BACI,CAAC,EAAC,iOAAiO,EACnO,IAAI,EAAC,SAAS,GAChB;YACF,8BACI,CAAC,EAAC,iOAAiO,EACnO,IAAI,EAAC,SAAS,GAChB,CACF;QACJ;YACI,kCAAU,EAAE,EAAC,OAAO;gBAChB,8BAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,GAAG,CACrC,CACR,CACL,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,mBAAmB,CAAC","sourcesContent":["import * as React from 'react';\n\ninterface Props {\n    width?: number;\n    height?: number;\n}\n\nconst BookNowPayLaterIcon = (props: Props) => {\n    return (\n        <svg width={`${props.width}`} height={`${props.height}`} viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g clipPath=\"url(#clip0)\">\n                <path\n                    d=\"M14.375 28.75C6.44841 28.75 0 22.3016 0 14.375C0 6.44841 6.44841 0 14.375 0C22.3016 0 28.75 6.44841 28.75 14.375C28.75 22.3016 22.3016 28.75 14.375 28.75Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M14.375 28.75C6.44841 28.75 0 22.3016 0 14.375C0 6.44841 6.44841 0 14.375 0C22.3016 0 28.75 6.44841 28.75 14.375C28.75 22.3016 22.3016 28.75 14.375 28.75ZM14.375 2.33108C7.73385 2.33108 2.33108 7.73385 2.33108 14.375C2.33108 21.0162 7.73385 26.4189 14.375 26.4189C21.0162 26.4189 26.4189 21.0162 26.4189 14.375C26.4189 7.73385 21.0162 2.33108 14.375 2.33108Z\"\n                    fill=\"#249ABA\"\n                />\n                <path\n                    d=\"M15.6598 14.9156C15.0008 15.5747 13.9322 15.5747 13.2732 14.9156L8.13227 9.77473C7.67467 9.31713 7.67467 8.57521 8.13227 8.1176C8.58987 7.66001 9.33177 7.66 9.78938 8.11758L14.4665 12.7944L16.8645 10.3966C17.3222 9.93904 18.0641 9.93906 18.5216 10.3966C18.9793 10.8543 18.9793 11.5962 18.5216 12.0538L15.6598 14.9156Z\"\n                    fill=\"#1D1D1D\"\n                />\n                <path d=\"M33.75 40H19.25C17.5931 40 16.25 38.6569 16.25 37V26.25H40V33.75C40 37.5 37.5 40 33.75 40Z\" fill=\"white\" />\n                <path\n                    d=\"M39.9999 26.25H16.2499V22.0625C16.2499 20.4056 17.593 19.0625 19.2499 19.0625H36.9999C38.6567 19.0625 39.9999 20.4056 39.9999 22.0625V26.25Z\"\n                    fill=\"#1D1D1D\"\n                />\n                <path d=\"M33.75 40V35.75C33.75 34.6454 34.6454 33.75 35.75 33.75H40C40 37.5 37.5 40 33.75 40Z\" fill=\"#249ABA\" />\n                <path\n                    d=\"M20.8594 17.7344C20.8594 17.0872 21.384 16.5625 22.0312 16.5625C22.6785 16.5625 23.2031 17.0872 23.2031 17.7344V18.9062C23.2031 19.5535 22.6785 20.0781 22.0312 20.0781C21.384 20.0781 20.8594 19.5535 20.8594 18.9062V17.7344Z\"\n                    fill=\"#249ABA\"\n                />\n                <path\n                    d=\"M33.3594 17.7344C33.3594 17.0872 33.884 16.5625 34.5312 16.5625C35.1785 16.5625 35.7031 17.0872 35.7031 17.7344V18.9062C35.7031 19.5535 35.1785 20.0781 34.5312 20.0781C33.884 20.0781 33.3594 19.5535 33.3594 18.9062V17.7344Z\"\n                    fill=\"#249ABA\"\n                />\n            </g>\n            <defs>\n                <clipPath id=\"clip0\">\n                    <rect width=\"40\" height=\"40\" fill=\"white\" />\n                </clipPath>\n            </defs>\n        </svg>\n    );\n};\n\nexport default BookNowPayLaterIcon;\n"]}
+{"version":3,"file":"BookNowPayLaterIcon.js","sourceRoot":"/","sources":["src/components/iconComponents/BookNowPayLaterIcon.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAO1B,MAAM,mBAAmB,GAAG,CAAC,KAAY,EAAE,EAAE;IACzC,OAAO,CACH,uCAAK,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;QACvH,qCAAG,QAAQ,EAAC,aAAa;YACrB,wCACI,CAAC,EAAC,4JAA4J,EAC9J,IAAI,EAAC,OAAO,GACd;YACF,wCACI,CAAC,EAAC,wWAAwW,EAC1W,IAAI,EAAC,SAAS,GAChB;YACF,wCACI,CAAC,EAAC,+TAA+T,EACjU,IAAI,EAAC,SAAS,GAChB;YACF,wCAAM,CAAC,EAAC,4FAA4F,EAAC,IAAI,EAAC,OAAO,GAAG;YACpH,wCACI,CAAC,EAAC,8IAA8I,EAChJ,IAAI,EAAC,SAAS,GAChB;YACF,wCAAM,CAAC,EAAC,sFAAsF,EAAC,IAAI,EAAC,SAAS,GAAG;YAChH,wCACI,CAAC,EAAC,iOAAiO,EACnO,IAAI,EAAC,SAAS,GAChB;YACF,wCACI,CAAC,EAAC,iOAAiO,EACnO,IAAI,EAAC,SAAS,GAChB,CACF;QACJ;YACI,4CAAU,EAAE,EAAC,OAAO;gBAChB,wCAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,GAAG,CACrC,CACR,CACL,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,mBAAmB,CAAC","sourcesContent":["import React from 'react';\n\ninterface Props {\n    width?: number;\n    height?: number;\n}\n\nconst BookNowPayLaterIcon = (props: Props) => {\n    return (\n        <svg width={`${props.width}`} height={`${props.height}`} viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g clipPath=\"url(#clip0)\">\n                <path\n                    d=\"M14.375 28.75C6.44841 28.75 0 22.3016 0 14.375C0 6.44841 6.44841 0 14.375 0C22.3016 0 28.75 6.44841 28.75 14.375C28.75 22.3016 22.3016 28.75 14.375 28.75Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M14.375 28.75C6.44841 28.75 0 22.3016 0 14.375C0 6.44841 6.44841 0 14.375 0C22.3016 0 28.75 6.44841 28.75 14.375C28.75 22.3016 22.3016 28.75 14.375 28.75ZM14.375 2.33108C7.73385 2.33108 2.33108 7.73385 2.33108 14.375C2.33108 21.0162 7.73385 26.4189 14.375 26.4189C21.0162 26.4189 26.4189 21.0162 26.4189 14.375C26.4189 7.73385 21.0162 2.33108 14.375 2.33108Z\"\n                    fill=\"#249ABA\"\n                />\n                <path\n                    d=\"M15.6598 14.9156C15.0008 15.5747 13.9322 15.5747 13.2732 14.9156L8.13227 9.77473C7.67467 9.31713 7.67467 8.57521 8.13227 8.1176C8.58987 7.66001 9.33177 7.66 9.78938 8.11758L14.4665 12.7944L16.8645 10.3966C17.3222 9.93904 18.0641 9.93906 18.5216 10.3966C18.9793 10.8543 18.9793 11.5962 18.5216 12.0538L15.6598 14.9156Z\"\n                    fill=\"#1D1D1D\"\n                />\n                <path d=\"M33.75 40H19.25C17.5931 40 16.25 38.6569 16.25 37V26.25H40V33.75C40 37.5 37.5 40 33.75 40Z\" fill=\"white\" />\n                <path\n                    d=\"M39.9999 26.25H16.2499V22.0625C16.2499 20.4056 17.593 19.0625 19.2499 19.0625H36.9999C38.6567 19.0625 39.9999 20.4056 39.9999 22.0625V26.25Z\"\n                    fill=\"#1D1D1D\"\n                />\n                <path d=\"M33.75 40V35.75C33.75 34.6454 34.6454 33.75 35.75 33.75H40C40 37.5 37.5 40 33.75 40Z\" fill=\"#249ABA\" />\n                <path\n                    d=\"M20.8594 17.7344C20.8594 17.0872 21.384 16.5625 22.0312 16.5625C22.6785 16.5625 23.2031 17.0872 23.2031 17.7344V18.9062C23.2031 19.5535 22.6785 20.0781 22.0312 20.0781C21.384 20.0781 20.8594 19.5535 20.8594 18.9062V17.7344Z\"\n                    fill=\"#249ABA\"\n                />\n                <path\n                    d=\"M33.3594 17.7344C33.3594 17.0872 33.884 16.5625 34.5312 16.5625C35.1785 16.5625 35.7031 17.0872 35.7031 17.7344V18.9062C35.7031 19.5535 35.1785 20.0781 34.5312 20.0781C33.884 20.0781 33.3594 19.5535 33.3594 18.9062V17.7344Z\"\n                    fill=\"#249ABA\"\n                />\n            </g>\n            <defs>\n                <clipPath id=\"clip0\">\n                    <rect width=\"40\" height=\"40\" fill=\"white\" />\n                </clipPath>\n            </defs>\n        </svg>\n    );\n};\n\nexport default BookNowPayLaterIcon;\n"]}

package/dist/src/components/members/EditMyProfile.d.ts

@@ -1,3 +1,3 @@
-import * as React from 'react';
+import React from 'react';
 declare const EditMyProfile: React.FC;
 export default EditMyProfile;

package/dist/src/components/members/EditMyProfile.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,8 +12,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 react_hook_form_1 = require("react-hook-form");
 const CountryCodesAndNumbers_1 = require("../../models/CountryCodesAndNumbers");
 const EnhancedPhoneNumberField_1 = __importDefault(require("../generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField"));
@@ -47,13 +24,12 @@ const contexts_1 = require("../../contexts/index.js");
 const InputGroup_1 = __importDefault(require("../generic/InputGroup/InputGroup"));
 const PasswordBox_1 = require("../generic/PasswordBox/PasswordBox");
 const EditMyProfile = () => {
-    var _a, _b;
-    const { roomstayMember, loading, updateMemberDetails } = (0, react_1.useContext)(contexts_1.RoomstayMemberContext);
-    const { error: cognitoError } = (0, react_1.useContext)(contexts_1.AuthenticationContext);
+    const { roomstayMember, loading, updateMemberDetails } = (0, react_2.useContext)(contexts_1.RoomstayMemberContext);
+    const { error: cognitoError } = (0, react_2.useContext)(contexts_1.AuthenticationContext);
     const { handleSubmit, register, reset, control, formState, setError } = (0, react_hook_form_1.useForm)({
-        defaultValues: (0, react_1.useMemo)(() => roomstayMember, [roomstayMember]),
+        defaultValues: (0, react_2.useMemo)(() => roomstayMember, [roomstayMember]),
     });
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         reset(roomstayMember);
     }, [roomstayMember, reset]);
     const onSubmit = (data) => __awaiter(void 0, void 0, void 0, function* () {
@@ -63,10 +39,10 @@ const EditMyProfile = () => {
                 return;
             }
         }
-        yield updateMemberDetails(data);
+        yield (updateMemberDetails === null || updateMemberDetails === void 0 ? void 0 : updateMemberDetails(data));
         reset(Object.assign(Object.assign({}, roomstayMember), { currentPassword: '', newPassword: '', confirmPassword: '' }));
     });
-    const countriesOptions = (0, react_1.useMemo)(() => {
+    const countriesOptions = (0, react_2.useMemo)(() => {
         const countries = CountryCodesAndNumbers_1.ListOfCountriesAndCodes.map(({ label }) => ({ label, value: label }));
         countries.unshift({ label: '', value: '' });
         return countries;
@@ -84,46 +60,46 @@ const EditMyProfile = () => {
             return null;
         }
     };
-    return (React.createElement(React.Fragment, null, roomstayMember ? (React.createElement("div", null,
-        React.createElement("form", { onSubmit: handleSubmit(onSubmit) },
-            React.createElement(InputGroup_1.default, null,
-                React.createElement(React.Fragment, null,
-                    React.createElement("input", { className: "c-input textbox", disabled: true, value: roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.email })),
-                React.createElement(TextBox_1.default, Object.assign({}, register('forename'), { label: "Forename" })),
-                React.createElement(TextBox_1.default, Object.assign({}, register('surname'), { label: "Surname" })),
-                React.createElement(React.Fragment, null,
-                    React.createElement(react_hook_form_1.Controller, { control: control, name: "phoneNumber", rules: {
+    return (react_1.default.createElement(react_1.default.Fragment, null, roomstayMember ? (react_1.default.createElement("div", null,
+        react_1.default.createElement("form", { onSubmit: handleSubmit(onSubmit) },
+            react_1.default.createElement(InputGroup_1.default, null,
+                react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("input", { className: "c-input textbox", disabled: true, value: roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.email })),
+                react_1.default.createElement(TextBox_1.default, Object.assign({}, register('forename'), { label: "Forename" })),
+                react_1.default.createElement(TextBox_1.default, Object.assign({}, register('surname'), { label: "Surname" })),
+                react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: "phoneNumber", rules: {
                             maxLength: {
                                 value: 17,
                                 message: 'Phone number is too long',
                             },
                             pattern: {
-                                value: /^\+[1-9](\ |\d){1,15}$/g,
+                                value: /^\+[1-9]( |\d){1,15}$/g,
                                 message: 'Incorrect phone number entered',
                             },
-                        }, render: ({ field }) => React.createElement(EnhancedPhoneNumberField_1.default, Object.assign({}, field, { onChange: field.onChange, validationStatus: getValidationClass('phoneNumber') })) }))),
-            React.createElement(InputGroup_1.default, null,
-                React.createElement(TextBox_1.default, Object.assign({}, register('address.address'), { label: "Address" })),
-                React.createElement(TextBox_1.default, Object.assign({}, register('address.city'), { label: "City" })),
-                React.createElement(InputGroup_1.default, { dimensions: "2/2" },
-                    React.createElement(TextBox_1.default, Object.assign({ inputProps: { className: '' } }, register('address.zip'), { label: "Zip" })),
-                    React.createElement(ForwardedSelect_1.default, Object.assign({}, register('address.country'), { options: countriesOptions, label: "Country" })))),
-            React.createElement(InputGroup_1.default, null,
-                React.createElement(PasswordBox_1.PasswordBox, Object.assign({}, register('currentPassword'), { label: "Current Password" })),
-                React.createElement(PasswordBox_1.PasswordBox, Object.assign({}, register('newPassword', {
+                        }, render: ({ field }) => react_1.default.createElement(EnhancedPhoneNumberField_1.default, Object.assign({}, field, { onChange: field.onChange, validationStatus: getValidationClass('phoneNumber') })) }))),
+            react_1.default.createElement(InputGroup_1.default, null,
+                react_1.default.createElement(TextBox_1.default, Object.assign({}, register('address.address'), { label: "Address" })),
+                react_1.default.createElement(TextBox_1.default, Object.assign({}, register('address.city'), { label: "City" })),
+                react_1.default.createElement(InputGroup_1.default, { dimensions: "2/2" },
+                    react_1.default.createElement(TextBox_1.default, Object.assign({ inputProps: { className: '' } }, register('address.zip'), { label: "Zip" })),
+                    react_1.default.createElement(ForwardedSelect_1.default, Object.assign({}, register('address.country'), { options: countriesOptions, label: "Country" })))),
+            react_1.default.createElement(InputGroup_1.default, null,
+                react_1.default.createElement(PasswordBox_1.PasswordBox, Object.assign({}, register('currentPassword'), { label: "Current Password" })),
+                react_1.default.createElement(PasswordBox_1.PasswordBox, Object.assign({}, register('newPassword', {
                     pattern: {
-                        value: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\^$*.\[\]{}\(\)?\-\"!@#%&\/,><\':;|_~`]).{8,99}/,
+                        value: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\^$*.[\]{}()?\-"!@#%&/,><':;|_~`]).{8,99}/,
                         message: 'Your password requires at least 8 characters with: 1 uppercase letter, lowercase letter, number, and special character',
                     },
-                }), { label: "New Password", error: (_a = formState.errors) === null || _a === void 0 ? void 0 : _a['newPassword'] })),
-                React.createElement(PasswordBox_1.PasswordBox, Object.assign({}, register('confirmPassword', {
+                }), { label: "New Password" })),
+                react_1.default.createElement(PasswordBox_1.PasswordBox, Object.assign({}, register('confirmPassword', {
                     pattern: {
-                        value: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\^$*.\[\]{}\(\)?\-\"!@#%&\/,><\':;|_~`]).{8,99}/,
+                        value: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\^$*.[\]{}()?\-"!@#%&/,><':;|_~`]).{8,99}/,
                         message: 'Your password requires at least 8 characters with: 1 uppercase letter, 1 lowercase letter, 1 number, 1 special character',
                     },
-                }), { label: "Confirm Password", error: (_b = formState.errors) === null || _b === void 0 ? void 0 : _b['confirmPassword'] })),
-                cognitoError && (React.createElement("p", { className: "text-small", style: { color: '#ED4362' } }, cognitoError === null || cognitoError === void 0 ? void 0 : cognitoError.message))),
-            React.createElement("button", { type: "submit", disabled: loading, color: "primary" }, "Save all changes")))) : (React.createElement(LargeLoader_1.default, null))));
+                }), { label: "Confirm Password" })),
+                cognitoError && (react_1.default.createElement("p", { className: "text-small", style: { color: '#ED4362' } }, cognitoError === null || cognitoError === void 0 ? void 0 : cognitoError.message))),
+            react_1.default.createElement("button", { type: "submit", disabled: loading, color: "primary" }, "Save all changes")))) : (react_1.default.createElement(LargeLoader_1.default, null))));
 };
 exports.default = EditMyProfile;
 //# sourceMappingURL=EditMyProfile.js.map

package/dist/src/components/members/EditMyProfile.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditMyProfile.js","sourceRoot":"/","sources":["src/components/members/EditMyProfile.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useContext, useEffect, useMemo } from 'react';\n\nimport { Controller, useForm } from 'react-hook-form';\n\nimport { ListOfCountriesAndCodes } from '@/models/CountryCodesAndNumbers';\nimport { IRoomstayMember } from '@roomstay/core';\nimport EnhancedPhoneNumberField from '@/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField';\nimport ForwardedSelect, { SelectOption } from '@/components/generic/ForwardedSelect';\nimport LargeLoader from '@/components/generic/loader/LargeLoader';\nimport TextBox from '@/components/generic/TextBox';\nimport { AuthenticationContext, IChangePassword, RoomstayMemberContext } from '@frontend/contexts';\nimport InputGroup from '@/components/generic/InputGroup/InputGroup';\nimport { PasswordBox } from '../generic/PasswordBox/PasswordBox';\n\nconst EditMyProfile: React.FC = () => {\n    const { roomstayMember, loading, updateMemberDetails } = useContext(RoomstayMemberContext);\n    const { error: cognitoError } = useContext(AuthenticationContext);\n\n    const { handleSubmit, register, reset, control, formState, setError } = useForm<IRoomstayMember & IChangePassword>({\n        defaultValues: useMemo(() => roomstayMember, [roomstayMember]),\n    });\n\n    useEffect(() => {\n        reset(roomstayMember);\n    }, [roomstayMember, reset]);\n\n    const onSubmit = async (data: IRoomstayMember & IChangePassword) => {\n        if (data?.currentPassword || data?.newPassword || data?.confirmPassword) {\n            if (data.newPassword !== data.confirmPassword) {\n                setError('confirmPassword', { message: \"Passwords don't match\" });\n                return;\n            }\n        }\n        await updateMemberDetails(data);\n        reset({ ...roomstayMember, currentPassword: '', newPassword: '', confirmPassword: '' });\n    };\n\n    const countriesOptions: SelectOption[] = useMemo(() => {\n        const countries = ListOfCountriesAndCodes.map(({ label }) => ({ label, value: label }));\n        countries.unshift({ label: '', value: '' });\n        return countries;\n    }, []);\n\n    const getValidationClass = (field: keyof (IRoomstayMember & IChangePassword)) => {\n        if (formState.errors && formState.touchedFields[field]) {\n            if (formState.errors[field]) {\n                return 'error';\n            } else {\n                return 'success';\n            }\n        } else {\n            return null;\n        }\n    };\n\n    return (\n        <>\n            {roomstayMember ? (\n                <div>\n                    <form onSubmit={handleSubmit(onSubmit)}>\n                        <InputGroup>\n                            <>\n                                <input className=\"c-input textbox\" disabled={true} value={roomstayMember?.email} />\n                            </>\n                            <TextBox {...register('forename')} label=\"Forename\" />\n                            <TextBox {...register('surname')} label=\"Surname\" />\n                            <>\n                                <Controller\n                                    control={control}\n                                    name=\"phoneNumber\"\n                                    rules={{\n                                        maxLength: {\n                                            value: 17,\n                                            message: 'Phone number is too long',\n                                        },\n                                        pattern: {\n                                            value: /^\\+[1-9](\\ |\\d){1,15}$/g,\n                                            message: 'Incorrect phone number entered',\n                                        },\n                                    }}\n                                    render={({ field }) => <EnhancedPhoneNumberField {...field} onChange={field.onChange} validationStatus={getValidationClass('phoneNumber')} />}\n                                />\n                            </>\n                        </InputGroup>\n\n                        <InputGroup>\n                            <TextBox {...register('address.address')} label=\"Address\" />\n                            <TextBox {...register('address.city')} label=\"City\" />\n                            <InputGroup dimensions=\"2/2\">\n                                <TextBox inputProps={{ className: '' }} {...register('address.zip')} label=\"Zip\" />\n                                <ForwardedSelect {...register('address.country')} options={countriesOptions} label=\"Country\" />\n                            </InputGroup>\n                        </InputGroup>\n\n                        <InputGroup>\n                            <PasswordBox {...register('currentPassword')} label=\"Current Password\" />\n                            <PasswordBox\n                                {...register('newPassword', {\n                                    pattern: {\n                                        value: /(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\\^$*.\\[\\]{}\\(\\)?\\-\\\"!@#%&\\/,><\\':;|_~`]).{8,99}/,\n                                        message: 'Your password requires at least 8 characters with: 1 uppercase letter, lowercase letter, number, and special character',\n                                    },\n                                })}\n                                label=\"New Password\"\n                                error={formState.errors?.['newPassword']}\n                            />\n                            <PasswordBox\n                                {...register('confirmPassword', {\n                                    pattern: {\n                                        value: /(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\\^$*.\\[\\]{}\\(\\)?\\-\\\"!@#%&\\/,><\\':;|_~`]).{8,99}/,\n                                        message: 'Your password requires at least 8 characters with: 1 uppercase letter, 1 lowercase letter, 1 number, 1 special character',\n                                    },\n                                })}\n                                label=\"Confirm Password\"\n                                error={formState.errors?.['confirmPassword']}\n                            />\n                            {cognitoError && (\n                                <p className=\"text-small\" style={{ color: '#ED4362' }}>\n                                    {cognitoError?.message}\n                                </p>\n                            )}\n                        </InputGroup>\n\n                        <button type=\"submit\" disabled={loading} color=\"primary\">\n                            Save all changes\n                        </button>\n                    </form>\n                    {/* <Backdrop open={loading} style={{ zIndex: 1234 }}>\n                        <LargeLoader />\n                    </Backdrop> */}\n                </div>\n            ) : (\n                <LargeLoader />\n            )}\n        </>\n    );\n};\n\nexport default EditMyProfile;\n"]}
+{"version":3,"file":"EditMyProfile.js","sourceRoot":"/","sources":["src/components/members/EditMyProfile.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { useContext, useEffect, useMemo } from 'react';\n\nimport { Controller, useForm } from 'react-hook-form';\n\nimport { ListOfCountriesAndCodes } from '@/models/CountryCodesAndNumbers';\nimport { IRoomstayMember } from '@roomstay/core';\nimport EnhancedPhoneNumberField from '@/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField';\nimport ForwardedSelect, { SelectOption } from '@/components/generic/ForwardedSelect';\nimport LargeLoader from '@/components/generic/loader/LargeLoader';\nimport TextBox from '@/components/generic/TextBox';\nimport { AuthenticationContext, IChangePassword, RoomstayMemberContext } from '@frontend/contexts';\nimport InputGroup from '@/components/generic/InputGroup/InputGroup';\nimport { PasswordBox } from '../generic/PasswordBox/PasswordBox';\n\nconst EditMyProfile: React.FC = () => {\n    const { roomstayMember, loading, updateMemberDetails } = useContext(RoomstayMemberContext);\n    const { error: cognitoError } = useContext(AuthenticationContext);\n\n    const { handleSubmit, register, reset, control, formState, setError } = useForm<IRoomstayMember & IChangePassword>({\n        defaultValues: useMemo(() => roomstayMember, [roomstayMember]),\n    });\n\n    useEffect(() => {\n        reset(roomstayMember);\n    }, [roomstayMember, reset]);\n\n    const onSubmit = async (data: IRoomstayMember & IChangePassword) => {\n        if (data?.currentPassword || data?.newPassword || data?.confirmPassword) {\n            if (data.newPassword !== data.confirmPassword) {\n                setError('confirmPassword', { message: \"Passwords don't match\" });\n                return;\n            }\n        }\n        await updateMemberDetails?.(data);\n        reset({ ...roomstayMember, currentPassword: '', newPassword: '', confirmPassword: '' });\n    };\n\n    const countriesOptions: SelectOption[] = useMemo(() => {\n        const countries = ListOfCountriesAndCodes.map(({ label }) => ({ label, value: label }));\n        countries.unshift({ label: '', value: '' });\n        return countries;\n    }, []);\n\n    const getValidationClass = (field: keyof (IRoomstayMember & IChangePassword)) => {\n        if (formState.errors && formState.touchedFields[field]) {\n            if (formState.errors[field]) {\n                return 'error';\n            } else {\n                return 'success';\n            }\n        } else {\n            return null;\n        }\n    };\n\n    return (\n        <>\n            {roomstayMember ? (\n                <div>\n                    <form onSubmit={handleSubmit(onSubmit)}>\n                        <InputGroup>\n                            <>\n                                <input className=\"c-input textbox\" disabled value={roomstayMember?.email} />\n                            </>\n                            <TextBox {...register('forename')} label=\"Forename\" />\n                            <TextBox {...register('surname')} label=\"Surname\" />\n                            <>\n                                <Controller\n                                    control={control}\n                                    name=\"phoneNumber\"\n                                    rules={{\n                                        maxLength: {\n                                            value: 17,\n                                            message: 'Phone number is too long',\n                                        },\n                                        pattern: {\n                                            value: /^\\+[1-9]( |\\d){1,15}$/g,\n                                            message: 'Incorrect phone number entered',\n                                        },\n                                    }}\n                                    render={({ field }) => <EnhancedPhoneNumberField {...field} onChange={field.onChange} validationStatus={getValidationClass('phoneNumber')} />}\n                                />\n                            </>\n                        </InputGroup>\n\n                        <InputGroup>\n                            <TextBox {...register('address.address')} label=\"Address\" />\n                            <TextBox {...register('address.city')} label=\"City\" />\n                            <InputGroup dimensions=\"2/2\">\n                                <TextBox inputProps={{ className: '' }} {...register('address.zip')} label=\"Zip\" />\n                                <ForwardedSelect {...register('address.country')} options={countriesOptions} label=\"Country\" />\n                            </InputGroup>\n                        </InputGroup>\n\n                        <InputGroup>\n                            <PasswordBox {...register('currentPassword')} label=\"Current Password\" />\n                            <PasswordBox\n                                {...register('newPassword', {\n                                    pattern: {\n                                        value: /(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\\^$*.[\\]{}()?\\-\"!@#%&/,><':;|_~`]).{8,99}/,\n                                        message: 'Your password requires at least 8 characters with: 1 uppercase letter, lowercase letter, number, and special character',\n                                    },\n                                })}\n                                label=\"New Password\"\n                            />\n                            <PasswordBox\n                                {...register('confirmPassword', {\n                                    pattern: {\n                                        value: /(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\\^$*.[\\]{}()?\\-\"!@#%&/,><':;|_~`]).{8,99}/,\n                                        message: 'Your password requires at least 8 characters with: 1 uppercase letter, 1 lowercase letter, 1 number, 1 special character',\n                                    },\n                                })}\n                                label=\"Confirm Password\"\n                            />\n                            {cognitoError && (\n                                <p className=\"text-small\" style={{ color: '#ED4362' }}>\n                                    {cognitoError?.message}\n                                </p>\n                            )}\n                        </InputGroup>\n\n                        <button type=\"submit\" disabled={loading} color=\"primary\">\n                            Save all changes\n                        </button>\n                    </form>\n                    {/* <Backdrop open={loading} style={{ zIndex: 1234 }}>\n                        <LargeLoader />\n                    </Backdrop> */}\n                </div>\n            ) : (\n                <LargeLoader />\n            )}\n        </>\n    );\n};\n\nexport default EditMyProfile;\n"]}

package/dist/src/components/navigation/Header.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 Icon_1 = __importStar(require("../generic/Icon/Icon"));
 const Color_1 = require("../../util/Color");
 const react_router_dom_1 = require("react-router-dom");
@@ -44,21 +44,26 @@ const hooks_1 = require("../../hooks/index.js");
 const contexts_1 = require("../../contexts/index.js");
 const StepHotel_1 = __importDefault(require("../../pages/steps/StepHotel/StepHotel"));
 const Portal_1 = require("../generic/Portal/Portal");
-const UnauthenticatedUserModal_1 = require("../generic/modal/SigninModal/UnauthenticatedUserModal");
-const AuthenticatedUserModal_1 = require("../generic/modal/SigninModal/AuthenticatedUserModal");
 const MemberPortalFeature_1 = __importDefault(require("../../providers/feature/MemberPortalFeature"));
 const Select_1 = require("../generic/Select/Select");
+const SmallSpinner_1 = __importDefault(require("../generic/loader/SmallSpinner"));
+const UnauthenticatedUserModal = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require('../generic/modal/SigninModal/UnauthenticatedUserModal'))).then(({ UnauthenticatedUserModal }) => ({
+    default: UnauthenticatedUserModal,
+})));
+const AuthenticatedUserModal = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require('../generic/modal/SigninModal/AuthenticatedUserModal'))).then(({ AuthenticatedUserModal }) => ({
+    default: AuthenticatedUserModal,
+})));
 function Header() {
     const { hotel } = (0, hooks_1.useCurrentHotel)();
-    const ccx = (0, react_1.useContext)(contexts_1.CompanyContext);
-    const { currentStep } = (0, react_1.useContext)(contexts_1.FullPageEngineContext);
-    const { roomstayMember } = (0, react_1.useContext)(contexts_1.RoomstayMemberContext);
-    const loginAnchorEl = React.useRef(null);
-    const [hotelLogo, setHotelLogo] = (0, react_1.useState)('');
-    const [showHotelLinks, setShowHotelLinks] = (0, react_1.useState)(true);
-    const [mobileMenuOpen, setMobileMenuOpen] = (0, react_1.useState)(false);
-    const [mobileMenuFaderStatus, setMobileMenuFaderStatus] = (0, react_1.useState)(false);
-    const [loginModalOpen, setLoginModalOpen] = (0, react_1.useState)(false);
+    const ccx = (0, react_2.useContext)(contexts_1.CompanyContext);
+    const { currentStep } = (0, react_2.useContext)(contexts_1.FullPageEngineContext);
+    const { roomstayMember } = (0, react_2.useContext)(contexts_1.RoomstayMemberContext);
+    const loginAnchorEl = react_1.default.useRef(null);
+    const [hotelLogo, setHotelLogo] = (0, react_2.useState)('');
+    const [showHotelLinks, setShowHotelLinks] = (0, react_2.useState)(true);
+    const [mobileMenuOpen, setMobileMenuOpen] = (0, react_2.useState)(false);
+    const [mobileMenuFaderStatus, setMobileMenuFaderStatus] = (0, react_2.useState)(false);
+    const [loginModalOpen, setLoginModalOpen] = (0, react_2.useState)(false);
     const { t } = (0, react_i18next_1.useTranslation)();
     const availableLanguages = LanguageProvider_1.LanguageProvider.getLanguages();
     const langKeys = Object.keys(availableLanguages);
@@ -83,8 +88,8 @@ function Header() {
         setLoginModalOpen(true);
         closeMobileMenuClickHandler();
     };
-    (0, react_1.useEffect)(() => {
-        let timeout = null;
+    (0, react_2.useEffect)(() => {
+        let timeout;
         if (mobileMenuFaderStatus) {
             setMobileMenuOpen(true);
         }
@@ -97,7 +102,7 @@ function Header() {
             clearTimeout(timeout);
         };
     }, [mobileMenuFaderStatus]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         let cancelled = false;
         const loadImage = (src) => {
             const image = new Image();
@@ -123,69 +128,69 @@ function Header() {
             cancelled = true;
         };
     }, [hotel, hotel === null || hotel === void 0 ? void 0 : hotel.logo, ccx.logo, currentStep]);
-    let hotelImageElement = hotelLogo ? React.createElement("img", { src: hotelLogo, alt: "Hotel Logo", className: "u-block" }) : hotel === null || hotel === void 0 ? void 0 : hotel.logo;
+    let hotelImageElement = hotelLogo ? react_1.default.createElement("img", { src: hotelLogo, alt: "Hotel Logo", className: "u-block" }) : hotel === null || hotel === void 0 ? void 0 : hotel.logo;
     if (typeof hotelImageElement === 'string' && !hotelImageElement.startsWith('<')) {
-        hotelImageElement = React.createElement("img", { src: hotelImageElement, alt: "Hotel Logo" });
+        hotelImageElement = react_1.default.createElement("img", { src: hotelImageElement, alt: "Hotel Logo" });
     }
-    const links = (React.createElement("ul", { className: "c-header__list" },
-        React.createElement("li", null,
-            React.createElement(react_router_dom_1.NavLink, { to: "/hotel-info/", activeClassName: "is-active", onClick: closeMobileMenuClickHandler },
-                React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.White },
-                    React.createElement("strong", null, t(Translation_1.Translation.Navigation.HotelInfo))))),
-        React.createElement("li", null, (hotel === null || hotel === void 0 ? void 0 : hotel.forwardFindReservationToSynxis) ? (React.createElement("a", { href: `https://be.synxis.com/signin?hotel=${hotel === null || hotel === void 0 ? void 0 : hotel.hotelID}`, target: "_blank", rel: "noreferrer" },
-            React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.White, bold: true }, t(Translation_1.Translation.Navigation.FindReservation)))) : (React.createElement(react_router_dom_1.NavLink, { to: "/find-reservation", activeClassName: "is-active", onClick: closeMobileMenuClickHandler },
-            React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.White, bold: true }, t(Translation_1.Translation.Navigation.FindReservation))))),
-        React.createElement("li", { className: "phone" },
-            React.createElement("a", { href: `tel:${hotel === null || hotel === void 0 ? void 0 : hotel.phone}`, onClick: closeMobileMenuClickHandler },
-                React.createElement(Text_1.default, { type: Text_1.TextType.Small, transforms: [Text_1.TextTransform.Uppercase], color: Color_1.Color.White },
-                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.Phone, size: "16px", color: Color_1.Color.White }),
-                    React.createElement("strong", { className: "u-marg-left--light" }, hotel === null || hotel === void 0 ? void 0 : hotel.phone))))));
-    const configs = (React.createElement(React.Fragment, null,
-        React.createElement("ul", { className: "c-header__list" },
-            langKeys.length > 1 && (React.createElement("li", null,
-                React.createElement(Select_1.Select, { nativeOnMobile: true, options: langKeys.map((lang) => {
+    const links = (react_1.default.createElement("ul", { className: "c-header__list" },
+        react_1.default.createElement("li", null,
+            react_1.default.createElement(react_router_dom_1.NavLink, { to: "/hotel-info/", activeClassName: "is-active", onClick: closeMobileMenuClickHandler },
+                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.White },
+                    react_1.default.createElement("strong", null, t(Translation_1.Translation.Navigation.HotelInfo))))),
+        react_1.default.createElement("li", null, (hotel === null || hotel === void 0 ? void 0 : hotel.forwardFindReservationToSynxis) ? (react_1.default.createElement("a", { href: `https://be.synxis.com/signin?hotel=${hotel === null || hotel === void 0 ? void 0 : hotel.hotelID}`, target: "_blank", rel: "noreferrer" },
+            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.White, bold: true }, t(Translation_1.Translation.Navigation.FindReservation)))) : (react_1.default.createElement(react_router_dom_1.NavLink, { to: "/find-reservation", activeClassName: "is-active", onClick: closeMobileMenuClickHandler },
+            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.White, bold: true }, t(Translation_1.Translation.Navigation.FindReservation))))),
+        react_1.default.createElement("li", { className: "phone" },
+            react_1.default.createElement("a", { href: `tel:${hotel === null || hotel === void 0 ? void 0 : hotel.phone}`, onClick: closeMobileMenuClickHandler },
+                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, transforms: [Text_1.TextTransform.Uppercase], color: Color_1.Color.White },
+                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Phone, size: "16px", color: Color_1.Color.White }),
+                    react_1.default.createElement("strong", { className: "u-marg-left--light" }, hotel === null || hotel === void 0 ? void 0 : hotel.phone))))));
+    const configs = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("ul", { className: "c-header__list" },
+            langKeys.length > 1 && (react_1.default.createElement("li", null,
+                react_1.default.createElement(Select_1.Select, { nativeOnMobile: true, options: langKeys.map((lang) => {
                         return {
                             value: lang,
                             text: LanguageProvider_1.LanguageProvider.getPrettyLanguageName(lang),
                         };
                     }), value: ccx.currentLanguage, onChange: onLanguageChangeHandler, keyName: "value", labelName: "text" }))),
-            React.createElement("li", null,
-                React.createElement(Select_1.Select, { nativeOnMobile: true, options: CurrencyProvider_1.default.getCurrencyItems(), value: ccx.currentCurrency, onChange: onCurrencyChangeHandler, keyName: "value", labelName: "text" })),
-            MemberPortalFeature_1.default.isActive() && (React.createElement("li", { ref: loginAnchorEl }, roomstayMember ? (React.createElement(BEButton_1.default, { size: "small", isText: true, onClick: onLoginClickHandler, stopIconAnimation: true },
+            react_1.default.createElement("li", null,
+                react_1.default.createElement(Select_1.Select, { nativeOnMobile: true, options: CurrencyProvider_1.default.getCurrencyItems(), value: ccx.currentCurrency, onChange: onCurrencyChangeHandler, keyName: "value", labelName: "text" })),
+            MemberPortalFeature_1.default.isActive() && (react_1.default.createElement("li", { ref: loginAnchorEl }, roomstayMember ? (react_1.default.createElement(BEButton_1.default, { size: "small", isText: true, onClick: onLoginClickHandler, stopIconAnimation: true },
                 roomstayMember.forename,
                 " ",
                 roomstayMember.surname,
-                React.createElement("span", { className: "u-white u-pad-left--light", style: { marginRight: -13 } },
-                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowDown2, size: "1.3em", color: Color_1.Color.DarkGrey })))) : (React.createElement(BEButton_1.default, { size: "small", isText: true, onClick: onLoginClickHandler, stopIconAnimation: true },
+                react_1.default.createElement("span", { className: "u-white u-pad-left--light", style: { marginRight: -13 } },
+                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowDown2, size: "1.3em", color: Color_1.Color.DarkGrey })))) : (react_1.default.createElement(BEButton_1.default, { size: "small", isText: true, onClick: onLoginClickHandler, stopIconAnimation: true },
                 t(Translation_1.Translation.Navigation.SignIn.SignIn),
-                React.createElement("span", { className: "u-white u-pad-left--light", style: { marginRight: -13 } },
-                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowDown2, size: "1.3em", color: Color_1.Color.DarkGrey })))))))));
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "c-header u-print-none" },
-            React.createElement("div", { className: "container" },
-                React.createElement("div", { className: "u-flex" },
-                    React.createElement("div", { className: "u-flex u-flex-flex-start u-flex__item" },
-                        React.createElement("div", { className: "c-header__logo" },
-                            React.createElement("a", { href: showHotelLinks ? hotel === null || hotel === void 0 ? void 0 : hotel.hotelUrl : ccx === null || ccx === void 0 ? void 0 : ccx.logoLink, onClick: closeMobileMenuClickHandler }, hotelImageElement)),
+                react_1.default.createElement("span", { className: "u-white u-pad-left--light", style: { marginRight: -13 } },
+                    react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowDown2, size: "1.3em", color: Color_1.Color.DarkGrey })))))))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "c-header u-print-none" },
+            react_1.default.createElement("div", { className: "container" },
+                react_1.default.createElement("div", { className: "u-flex" },
+                    react_1.default.createElement("div", { className: "u-flex u-flex-flex-start u-flex__item" },
+                        react_1.default.createElement("div", { className: "c-header__logo" },
+                            react_1.default.createElement("a", { href: showHotelLinks ? hotel === null || hotel === void 0 ? void 0 : hotel.hotelUrl : ccx === null || ccx === void 0 ? void 0 : ccx.logoLink, onClick: closeMobileMenuClickHandler }, hotelImageElement)),
                         !!showHotelLinks && links),
-                    React.createElement("div", { className: "u-flex mx-100" },
+                    react_1.default.createElement("div", { className: "u-flex mx-100" },
                         configs,
-                        React.createElement("div", { className: "c-header__mobile-menu" },
-                            React.createElement("span", { className: "u-white u-pad-left" },
-                                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Menu, size: "26px", color: Color_1.Color.White, onClick: openMobileMenuClickHandler }))))))),
-        mobileMenuOpen && (React.createElement(Portal_1.RoomstayPortal, { target: RoomstayThemeEngine_1.default.EngineContainer },
-            React.createElement(Fade_1.default, { open: mobileMenuFaderStatus },
-                React.createElement("div", { className: `mobile-header-menu ${mobileMenuFaderStatus ? '' : '--closing'}` },
-                    React.createElement("div", { className: "mobile-header-menu--replica u-flex" },
-                        React.createElement("div", { className: "c-header__logo" },
-                            React.createElement(react_router_dom_1.Link, { to: "/", onClick: closeMobileMenuClickHandler }, hotelImageElement)),
-                        React.createElement("div", { className: "c-header__mobile-menu" },
-                            React.createElement("span", { className: "u-white u-pad-left" },
-                                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Close, size: "26px", color: Color_1.Color.White, onClick: closeMobileMenuClickHandler })))),
-                    React.createElement("div", { className: "mobile-header-menu--content" },
+                        react_1.default.createElement("div", { className: "c-header__mobile-menu" },
+                            react_1.default.createElement("span", { className: "u-white u-pad-left" },
+                                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Menu, size: "26px", color: Color_1.Color.White, onClick: openMobileMenuClickHandler }))))))),
+        mobileMenuOpen && (react_1.default.createElement(Portal_1.RoomstayPortal, { target: RoomstayThemeEngine_1.default.EngineContainer },
+            react_1.default.createElement(Fade_1.default, { open: mobileMenuFaderStatus },
+                react_1.default.createElement("div", { className: `mobile-header-menu ${mobileMenuFaderStatus ? '' : '--closing'}` },
+                    react_1.default.createElement("div", { className: "mobile-header-menu--replica u-flex" },
+                        react_1.default.createElement("div", { className: "c-header__logo" },
+                            react_1.default.createElement(react_router_dom_1.Link, { to: "/", onClick: closeMobileMenuClickHandler }, hotelImageElement)),
+                        react_1.default.createElement("div", { className: "c-header__mobile-menu" },
+                            react_1.default.createElement("span", { className: "u-white u-pad-left" },
+                                react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Close, size: "26px", color: Color_1.Color.White, onClick: closeMobileMenuClickHandler })))),
+                    react_1.default.createElement("div", { className: "mobile-header-menu--content" },
                         !!hotel && links,
                         configs))))),
-        MemberPortalFeature_1.default.isActive() && (React.createElement(React.Fragment, null, roomstayMember ? (React.createElement(AuthenticatedUserModal_1.AuthenticatedUserModal, { open: loginModalOpen, onClose: closeLoginClickHandler, anchorEl: loginAnchorEl.current })) : (React.createElement(UnauthenticatedUserModal_1.UnauthenticatedUserModal, { open: loginModalOpen, onClose: closeLoginClickHandler, anchorEl: loginAnchorEl.current }))))));
+        MemberPortalFeature_1.default.isActive() && (react_1.default.createElement(react_2.Suspense, { fallback: SmallSpinner_1.default }, roomstayMember ? (react_1.default.createElement(AuthenticatedUserModal, { open: loginModalOpen, onClose: closeLoginClickHandler, anchorEl: loginAnchorEl.current })) : (react_1.default.createElement(UnauthenticatedUserModal, { open: loginModalOpen, onClose: closeLoginClickHandler, anchorEl: loginAnchorEl.current }))))));
 }
 exports.default = Header;
 //# sourceMappingURL=Header.js.map