@roomstay/frontend 2.1.6 → 2.1.7

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,iCAAuD;AAEvD,qDAAsD;AAEtD,4EAA0E;AAE1E,6IAAqH;AACrH,2FAAqF;AACrF,0FAAkE;AAClE,2EAAmD;AACnD,iDAAmG;AACnG,4FAAoE;AACpE,oEAAiE;AAEjE,MAAM,aAAa,GAAa,GAAG,EAAE;;IACjC,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,mBAAmB,EAAE,GAAG,IAAA,kBAAU,EAAC,gCAAqB,CAAC,CAAC;IAC3F,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,IAAA,kBAAU,EAAC,gCAAqB,CAAC,CAAC;IAElE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAA,yBAAO,EAAoC;QAC/G,aAAa,EAAE,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,cAAc,EAAE,CAAC,cAAc,CAAC,CAAC;KACjE,CAAC,CAAC;IAEH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,KAAK,CAAC,cAAc,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC;IAE5B,MAAM,QAAQ,GAAG,CAAO,IAAuC,EAAE,EAAE;QAC/D,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,eAAe,MAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,CAAA,KAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,eAAe,CAAA,EAAE;YACrE,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,eAAe,EAAE;gBAC3C,QAAQ,CAAC,iBAAiB,EAAE,EAAE,OAAO,EAAE,uBAAuB,EAAE,CAAC,CAAC;gBAClE,OAAO;aACV;SACJ;QACD,MAAM,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAChC,KAAK,iCAAM,cAAc,KAAE,eAAe,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,eAAe,EAAE,EAAE,IAAG,CAAC;IAC5F,CAAC,CAAA,CAAC;IAEF,MAAM,gBAAgB,GAAmB,IAAA,eAAO,EAAC,GAAG,EAAE;QAClD,MAAM,SAAS,GAAG,gDAAuB,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACxF,SAAS,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;QAC5C,OAAO,SAAS,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,kBAAkB,GAAG,CAAC,KAAgD,EAAE,EAAE;QAC5E,IAAI,SAAS,CAAC,MAAM,IAAI,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE;YACpD,IAAI,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE;gBACzB,OAAO,OAAO,CAAC;aAClB;iBAAM;gBACH,OAAO,SAAS,CAAC;aACpB;SACJ;aAAM;YACH,OAAO,IAAI,CAAC;SACf;IACL,CAAC,CAAC;IAEF,OAAO,CACH,0CACK,cAAc,CAAC,CAAC,CAAC,CACd;QACI,8BAAM,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC;YAClC,oBAAC,oBAAU;gBACP;oBACI,+BAAO,SAAS,EAAC,iBAAiB,EAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,GAAI,CACpF;gBACH,oBAAC,iBAAO,oBAAK,QAAQ,CAAC,UAAU,CAAC,IAAE,KAAK,EAAC,UAAU,IAAG;gBACtD,oBAAC,iBAAO,oBAAK,QAAQ,CAAC,SAAS,CAAC,IAAE,KAAK,EAAC,SAAS,IAAG;gBACpD;oBACI,oBAAC,4BAAU,IACP,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE;4BACH,SAAS,EAAE;gCACP,KAAK,EAAE,EAAE;gCACT,OAAO,EAAE,0BAA0B;6BACtC;4BACD,OAAO,EAAE;gCACL,KAAK,EAAE,yBAAyB;gCAChC,OAAO,EAAE,gCAAgC;6BAC5C;yBACJ,EACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,oBAAC,kCAAwB,oBAAK,KAAK,IAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,gBAAgB,EAAE,kBAAkB,CAAC,aAAa,CAAC,IAAI,GAC/I,CACH,CACM;YAEb,oBAAC,oBAAU;gBACP,oBAAC,iBAAO,oBAAK,QAAQ,CAAC,iBAAiB,CAAC,IAAE,KAAK,EAAC,SAAS,IAAG;gBAC5D,oBAAC,iBAAO,oBAAK,QAAQ,CAAC,cAAc,CAAC,IAAE,KAAK,EAAC,MAAM,IAAG;gBACtD,oBAAC,oBAAU,IAAC,UAAU,EAAC,KAAK;oBACxB,oBAAC,iBAAO,kBAAC,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,IAAM,QAAQ,CAAC,aAAa,CAAC,IAAE,KAAK,EAAC,KAAK,IAAG;oBACnF,oBAAC,yBAAe,oBAAK,QAAQ,CAAC,iBAAiB,CAAC,IAAE,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAC,SAAS,IAAG,CACtF,CACJ;YAEb,oBAAC,oBAAU;gBACP,oBAAC,yBAAW,oBAAK,QAAQ,CAAC,iBAAiB,CAAC,IAAE,KAAK,EAAC,kBAAkB,IAAG;gBACzE,oBAAC,yBAAW,oBACJ,QAAQ,CAAC,aAAa,EAAE;oBACxB,OAAO,EAAE;wBACL,KAAK,EAAE,qFAAqF;wBAC5F,OAAO,EAAE,wHAAwH;qBACpI;iBACJ,CAAC,IACF,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE,MAAA,SAAS,CAAC,MAAM,0CAAG,aAAa,CAAC,IAC1C;gBACF,oBAAC,yBAAW,oBACJ,QAAQ,CAAC,iBAAiB,EAAE;oBAC5B,OAAO,EAAE;wBACL,KAAK,EAAE,qFAAqF;wBAC5F,OAAO,EAAE,0HAA0H;qBACtI;iBACJ,CAAC,IACF,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE,MAAA,SAAS,CAAC,MAAM,0CAAG,iBAAiB,CAAC,IAC9C;gBACD,YAAY,IAAI,CACb,2BAAG,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAChD,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CACtB,CACP,CACQ;YAEb,gCAAQ,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAC,SAAS,uBAE/C,CACN,CAIL,CACT,CAAC,CAAC,CAAC,CACA,oBAAC,qBAAW,OAAG,CAClB,CACF,CACN,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,aAAa,CAAC","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

package/dist/src/components/navigation/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"/","sources":["src/components/navigation/Header.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useContext, useEffect, useState } from 'react';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Color } from '@/util/Color';\nimport { Link, NavLink } from 'react-router-dom';\nimport Text, { TextTransform, TextType } from '@/components/generic/Text';\n\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport BEButton from '@/components/generic/BEButton';\nimport { Language, LanguageProvider } from '@/providers/LanguageProvider';\nimport CurrencyProvider from '@/providers/CurrencyProvider';\nimport FadeAnimation from '@/animations/Fade';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport DataLayer from '@/util/DataLayer';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { CompanyContext, FullPageEngineContext, RoomstayMemberContext } from '@frontend/contexts';\nimport StepHotel from '@/pages/steps/StepHotel/StepHotel';\nimport { RoomstayPortal } from '@/components/generic/Portal/Portal';\nimport { UnauthenticatedUserModal } from '@/components/generic/modal/SigninModal/UnauthenticatedUserModal';\nimport { AuthenticatedUserModal } from '@/components/generic/modal/SigninModal/AuthenticatedUserModal';\nimport MemberPortalFeature from '@/providers/feature/MemberPortalFeature';\nimport { IDefaultSelectOption, Select } from '@/components/generic/Select/Select';\n\ninterface ILanguageSelectOption {\n    value: Language;\n    text: string;\n}\n\nexport default function Header() {\n    const { hotel } = useCurrentHotel();\n    const ccx = useContext(CompanyContext);\n    const { currentStep } = useContext(FullPageEngineContext);\n\n    const { roomstayMember } = useContext(RoomstayMemberContext);\n\n    const loginAnchorEl = React.useRef(null);\n\n    const [hotelLogo, setHotelLogo] = useState('');\n    const [showHotelLinks, setShowHotelLinks] = useState(true);\n\n    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n    const [mobileMenuFaderStatus, setMobileMenuFaderStatus] = useState(false);\n    const [loginModalOpen, setLoginModalOpen] = useState(false);\n\n    const { t } = useTranslation();\n\n    const availableLanguages = LanguageProvider.getLanguages();\n\n    const langKeys = Object.keys(availableLanguages);\n\n    const onLanguageChangeHandler = (selected: Language) => {\n        ccx.setCurrentLanguage(selected);\n        LanguageProvider.changeLanguage(selected);\n    };\n\n    const onCurrencyChangeHandler = (selected: string) => {\n        ccx.setCurrentCurrency(selected);\n        DataLayer.instance.setCurrencyCodes(selected);\n    };\n\n    const closeMobileMenuClickHandler = () => {\n        setMobileMenuFaderStatus(false);\n    };\n    const openMobileMenuClickHandler = () => {\n        setMobileMenuFaderStatus(true);\n    };\n    const closeLoginClickHandler = () => {\n        setLoginModalOpen(false);\n    };\n    const onLoginClickHandler = () => {\n        setLoginModalOpen(true);\n        closeMobileMenuClickHandler();\n    };\n\n    useEffect(() => {\n        let timeout: NodeJS.Timeout = null;\n\n        if (mobileMenuFaderStatus) {\n            setMobileMenuOpen(true);\n        } else {\n            timeout = setTimeout(() => {\n                setMobileMenuOpen(false);\n            }, 500);\n        }\n\n        return () => {\n            clearTimeout(timeout);\n        };\n    }, [mobileMenuFaderStatus]);\n\n    useEffect(() => {\n        let cancelled = false;\n\n        const loadImage = (src: string) => {\n            const image = new Image();\n            image.onload = () => {\n                if (!cancelled) {\n                    setHotelLogo(src);\n                }\n            };\n\n            image.src = src;\n        };\n\n        // Check the Logo per step\n        if (hotel && !(currentStep === StepHotel)) {\n            if (typeof hotel?.logo === 'string') {\n                loadImage(hotel?.logo);\n            }\n        } else {\n            loadImage(ccx.logo);\n        }\n\n        // Check wether we should display the hotel related links or not\n        setShowHotelLinks(currentStep !== StepHotel && !!hotel);\n\n        return () => {\n            cancelled = true;\n        };\n    }, [hotel, hotel?.logo, ccx.logo, currentStep]);\n\n    let hotelImageElement = hotelLogo ? <img src={hotelLogo} alt=\"Hotel Logo\" className=\"u-block\" /> : hotel?.logo;\n\n    if (typeof hotelImageElement === 'string' && !hotelImageElement.startsWith('<')) {\n        hotelImageElement = <img src={hotelImageElement} alt=\"Hotel Logo\" />;\n    }\n\n    const links = (\n        <ul className=\"c-header__list\">\n            <li>\n                <NavLink to=\"/hotel-info/\" activeClassName=\"is-active\" onClick={closeMobileMenuClickHandler}>\n                    <Text type={TextType.Small} color={Color.White}>\n                        <strong>{t(Translation.Navigation.HotelInfo)}</strong>\n                    </Text>\n                </NavLink>\n            </li>\n            <li>\n                {hotel?.forwardFindReservationToSynxis ? (\n                    <a href={`https://be.synxis.com/signin?hotel=${hotel?.hotelID}`} target=\"_blank\" rel=\"noreferrer\">\n                        <Text type={TextType.Small} color={Color.White} bold={true}>\n                            {t(Translation.Navigation.FindReservation)}\n                        </Text>\n                    </a>\n                ) : (\n                    <NavLink to=\"/find-reservation\" activeClassName=\"is-active\" onClick={closeMobileMenuClickHandler}>\n                        <Text type={TextType.Small} color={Color.White} bold={true}>\n                            {t(Translation.Navigation.FindReservation)}\n                        </Text>\n                    </NavLink>\n                )}\n            </li>\n            <li className=\"phone\">\n                <a href={`tel:${hotel?.phone}`} onClick={closeMobileMenuClickHandler}>\n                    <Text type={TextType.Small} transforms={[TextTransform.Uppercase]} color={Color.White}>\n                        <Icon icon={IconType.Phone} size=\"16px\" color={Color.White} />\n                        <strong className=\"u-marg-left--light\">{hotel?.phone}</strong>\n                    </Text>\n                </a>\n            </li>\n        </ul>\n    );\n\n    const configs = (\n        <>\n            <ul className=\"c-header__list\">\n                {langKeys.length > 1 && (\n                    <li>\n                        <Select<ILanguageSelectOption, 'value'>\n                            nativeOnMobile\n                            options={langKeys.map((lang: Language) => {\n                                return {\n                                    value: lang,\n                                    text: LanguageProvider.getPrettyLanguageName(lang),\n                                };\n                            })}\n                            value={ccx.currentLanguage}\n                            onChange={onLanguageChangeHandler}\n                            keyName=\"value\"\n                            labelName=\"text\"\n                        />\n                    </li>\n                )}\n                <li>\n                    <Select<IDefaultSelectOption, 'value'>\n                        nativeOnMobile\n                        options={CurrencyProvider.getCurrencyItems()}\n                        value={ccx.currentCurrency}\n                        onChange={onCurrencyChangeHandler}\n                        keyName=\"value\"\n                        labelName=\"text\"\n                    />\n                </li>\n\n                {MemberPortalFeature.isActive() && (\n                    <li ref={loginAnchorEl}>\n                        {roomstayMember ? (\n                            <BEButton size=\"small\" isText onClick={onLoginClickHandler} stopIconAnimation>\n                                {roomstayMember.forename} {roomstayMember.surname}\n                                <span className=\"u-white u-pad-left--light\" style={{ marginRight: -13 }}>\n                                    <Icon icon={IconType.ArrowDown2} size=\"1.3em\" color={Color.DarkGrey} />\n                                </span>\n                            </BEButton>\n                        ) : (\n                            <BEButton size=\"small\" isText onClick={onLoginClickHandler} stopIconAnimation>\n                                {t(Translation.Navigation.SignIn.SignIn)}\n                                <span className=\"u-white u-pad-left--light\" style={{ marginRight: -13 }}>\n                                    <Icon icon={IconType.ArrowDown2} size=\"1.3em\" color={Color.DarkGrey} />\n                                </span>\n                            </BEButton>\n                        )}\n                    </li>\n                )}\n            </ul>\n        </>\n    );\n\n    return (\n        <>\n            <div className=\"c-header u-print-none\">\n                <div className=\"container\">\n                    <div className=\"u-flex\">\n                        <div className=\"u-flex u-flex-flex-start u-flex__item\">\n                            <div className=\"c-header__logo\">\n                                <a href={showHotelLinks ? hotel?.hotelUrl : ccx?.logoLink} onClick={closeMobileMenuClickHandler}>\n                                    {hotelImageElement}\n                                </a>\n                            </div>\n                            {!!showHotelLinks && links}\n                        </div>\n                        <div className=\"u-flex mx-100\">\n                            {configs}\n                            <div className=\"c-header__mobile-menu\">\n                                <span className=\"u-white u-pad-left\">\n                                    <Icon icon={IconType.Menu} size=\"26px\" color={Color.White} onClick={openMobileMenuClickHandler} />\n                                </span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            {mobileMenuOpen && (\n                <RoomstayPortal target={RoomstayThemeEngine.EngineContainer}>\n                    <FadeAnimation open={mobileMenuFaderStatus}>\n                        <div className={`mobile-header-menu ${mobileMenuFaderStatus ? '' : '--closing'}`}>\n                            <div className=\"mobile-header-menu--replica u-flex\">\n                                <div className=\"c-header__logo\">\n                                    <Link to=\"/\" onClick={closeMobileMenuClickHandler}>\n                                        {hotelImageElement}\n                                    </Link>\n                                </div>\n                                <div className=\"c-header__mobile-menu\">\n                                    <span className=\"u-white u-pad-left\">\n                                        <Icon icon={IconType.Close} size=\"26px\" color={Color.White} onClick={closeMobileMenuClickHandler} />\n                                    </span>\n                                </div>\n                            </div>\n                            <div className=\"mobile-header-menu--content\">\n                                {!!hotel && links}\n\n                                {configs}\n                            </div>\n                        </div>\n                    </FadeAnimation>\n                </RoomstayPortal>\n            )}\n            {MemberPortalFeature.isActive() && (\n                <>\n                    {roomstayMember ? (\n                        <AuthenticatedUserModal open={loginModalOpen} onClose={closeLoginClickHandler} anchorEl={loginAnchorEl.current} />\n                    ) : (\n                        <UnauthenticatedUserModal open={loginModalOpen} onClose={closeLoginClickHandler} anchorEl={loginAnchorEl.current} />\n                    )}\n                </>\n            )}\n        </>\n    );\n}\n"]}
+{"version":3,"file":"Header.js","sourceRoot":"/","sources":["src/components/navigation/Header.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { useContext, useEffect, useState, Suspense } from 'react';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Color } from '@/util/Color';\nimport { Link, NavLink } from 'react-router-dom';\nimport Text, { TextTransform, TextType } from '@/components/generic/Text';\n\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport BEButton from '@/components/generic/BEButton';\nimport { Language, LanguageProvider } from '@/providers/LanguageProvider';\nimport CurrencyProvider from '@/providers/CurrencyProvider';\nimport FadeAnimation from '@/animations/Fade';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport DataLayer from '@/util/DataLayer';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { CompanyContext, FullPageEngineContext, RoomstayMemberContext } from '@frontend/contexts';\nimport StepHotel from '@/pages/steps/StepHotel/StepHotel';\nimport { RoomstayPortal } from '@/components/generic/Portal/Portal';\nimport MemberPortalFeature from '@/providers/feature/MemberPortalFeature';\nimport { IDefaultSelectOption, Select } from '@/components/generic/Select/Select';\nimport SmallSpinner from '@/components/generic/loader/SmallSpinner';\n\nconst UnauthenticatedUserModal = React.lazy(() =>\n    import('@/components/generic/modal/SigninModal/UnauthenticatedUserModal').then(({ UnauthenticatedUserModal }) => ({\n        default: UnauthenticatedUserModal,\n    }))\n);\nconst AuthenticatedUserModal = React.lazy(() =>\n    import('@/components/generic/modal/SigninModal/AuthenticatedUserModal').then(({ AuthenticatedUserModal }) => ({\n        default: AuthenticatedUserModal,\n    }))\n);\n\ninterface ILanguageSelectOption {\n    value: Language;\n    text: string;\n}\n\nexport default function Header() {\n    const { hotel } = useCurrentHotel();\n    const ccx = useContext(CompanyContext);\n    const { currentStep } = useContext(FullPageEngineContext);\n\n    const { roomstayMember } = useContext(RoomstayMemberContext);\n\n    const loginAnchorEl = React.useRef<HTMLLIElement | null>(null);\n\n    const [hotelLogo, setHotelLogo] = useState('');\n    const [showHotelLinks, setShowHotelLinks] = useState(true);\n\n    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n    const [mobileMenuFaderStatus, setMobileMenuFaderStatus] = useState(false);\n    const [loginModalOpen, setLoginModalOpen] = useState(false);\n\n    const { t } = useTranslation();\n\n    const availableLanguages = LanguageProvider.getLanguages();\n\n    const langKeys: Language[] = Object.keys(availableLanguages) as Language[];\n\n    const onLanguageChangeHandler = (selected: Language) => {\n        ccx.setCurrentLanguage(selected);\n        LanguageProvider.changeLanguage(selected);\n    };\n\n    const onCurrencyChangeHandler = (selected: string) => {\n        ccx.setCurrentCurrency(selected);\n        DataLayer.instance.setCurrencyCodes(selected);\n    };\n\n    const closeMobileMenuClickHandler = () => {\n        setMobileMenuFaderStatus(false);\n    };\n    const openMobileMenuClickHandler = () => {\n        setMobileMenuFaderStatus(true);\n    };\n    const closeLoginClickHandler = () => {\n        setLoginModalOpen(false);\n    };\n    const onLoginClickHandler = () => {\n        setLoginModalOpen(true);\n        closeMobileMenuClickHandler();\n    };\n\n    useEffect(() => {\n        let timeout: NodeJS.Timeout;\n\n        if (mobileMenuFaderStatus) {\n            setMobileMenuOpen(true);\n        } else {\n            timeout = setTimeout(() => {\n                setMobileMenuOpen(false);\n            }, 500);\n        }\n\n        return () => {\n            clearTimeout(timeout);\n        };\n    }, [mobileMenuFaderStatus]);\n\n    useEffect(() => {\n        let cancelled = false;\n\n        const loadImage = (src: string) => {\n            const image = new Image();\n            image.onload = () => {\n                if (!cancelled) {\n                    setHotelLogo(src);\n                }\n            };\n\n            image.src = src;\n        };\n\n        // Check the Logo per step\n        if (hotel && !(currentStep === StepHotel)) {\n            if (typeof hotel?.logo === 'string') {\n                loadImage(hotel?.logo);\n            }\n        } else {\n            loadImage(ccx.logo);\n        }\n\n        // Check wether we should display the hotel related links or not\n        setShowHotelLinks(currentStep !== StepHotel && !!hotel);\n\n        return () => {\n            cancelled = true;\n        };\n    }, [hotel, hotel?.logo, ccx.logo, currentStep]);\n\n    let hotelImageElement = hotelLogo ? <img src={hotelLogo} alt=\"Hotel Logo\" className=\"u-block\" /> : hotel?.logo;\n\n    if (typeof hotelImageElement === 'string' && !hotelImageElement.startsWith('<')) {\n        hotelImageElement = <img src={hotelImageElement} alt=\"Hotel Logo\" />;\n    }\n\n    const links = (\n        <ul className=\"c-header__list\">\n            <li>\n                <NavLink to=\"/hotel-info/\" activeClassName=\"is-active\" onClick={closeMobileMenuClickHandler}>\n                    <Text type={TextType.Small} color={Color.White}>\n                        <strong>{t(Translation.Navigation.HotelInfo)}</strong>\n                    </Text>\n                </NavLink>\n            </li>\n            <li>\n                {hotel?.forwardFindReservationToSynxis ? (\n                    <a href={`https://be.synxis.com/signin?hotel=${hotel?.hotelID}`} target=\"_blank\" rel=\"noreferrer\">\n                        <Text type={TextType.Small} color={Color.White} bold>\n                            {t(Translation.Navigation.FindReservation)}\n                        </Text>\n                    </a>\n                ) : (\n                    <NavLink to=\"/find-reservation\" activeClassName=\"is-active\" onClick={closeMobileMenuClickHandler}>\n                        <Text type={TextType.Small} color={Color.White} bold>\n                            {t(Translation.Navigation.FindReservation)}\n                        </Text>\n                    </NavLink>\n                )}\n            </li>\n            <li className=\"phone\">\n                <a href={`tel:${hotel?.phone}`} onClick={closeMobileMenuClickHandler}>\n                    <Text type={TextType.Small} transforms={[TextTransform.Uppercase]} color={Color.White}>\n                        <Icon icon={IconType.Phone} size=\"16px\" color={Color.White} />\n                        <strong className=\"u-marg-left--light\">{hotel?.phone}</strong>\n                    </Text>\n                </a>\n            </li>\n        </ul>\n    );\n\n    const configs = (\n        <>\n            <ul className=\"c-header__list\">\n                {langKeys.length > 1 && (\n                    <li>\n                        <Select<ILanguageSelectOption, 'value'>\n                            nativeOnMobile\n                            options={langKeys.map((lang: Language) => {\n                                return {\n                                    value: lang,\n                                    text: LanguageProvider.getPrettyLanguageName(lang),\n                                };\n                            })}\n                            value={ccx.currentLanguage}\n                            onChange={onLanguageChangeHandler}\n                            keyName=\"value\"\n                            labelName=\"text\"\n                        />\n                    </li>\n                )}\n                <li>\n                    <Select<IDefaultSelectOption, 'value'>\n                        nativeOnMobile\n                        options={CurrencyProvider.getCurrencyItems()}\n                        value={ccx.currentCurrency}\n                        onChange={onCurrencyChangeHandler}\n                        keyName=\"value\"\n                        labelName=\"text\"\n                    />\n                </li>\n\n                {MemberPortalFeature.isActive() && (\n                    <li ref={loginAnchorEl}>\n                        {roomstayMember ? (\n                            <BEButton size=\"small\" isText onClick={onLoginClickHandler} stopIconAnimation>\n                                {roomstayMember.forename} {roomstayMember.surname}\n                                <span className=\"u-white u-pad-left--light\" style={{ marginRight: -13 }}>\n                                    <Icon icon={IconType.ArrowDown2} size=\"1.3em\" color={Color.DarkGrey} />\n                                </span>\n                            </BEButton>\n                        ) : (\n                            <BEButton size=\"small\" isText onClick={onLoginClickHandler} stopIconAnimation>\n                                {t(Translation.Navigation.SignIn.SignIn)}\n                                <span className=\"u-white u-pad-left--light\" style={{ marginRight: -13 }}>\n                                    <Icon icon={IconType.ArrowDown2} size=\"1.3em\" color={Color.DarkGrey} />\n                                </span>\n                            </BEButton>\n                        )}\n                    </li>\n                )}\n            </ul>\n        </>\n    );\n\n    return (\n        <>\n            <div className=\"c-header u-print-none\">\n                <div className=\"container\">\n                    <div className=\"u-flex\">\n                        <div className=\"u-flex u-flex-flex-start u-flex__item\">\n                            <div className=\"c-header__logo\">\n                                <a href={showHotelLinks ? hotel?.hotelUrl : ccx?.logoLink} onClick={closeMobileMenuClickHandler}>\n                                    {hotelImageElement}\n                                </a>\n                            </div>\n                            {!!showHotelLinks && links}\n                        </div>\n                        <div className=\"u-flex mx-100\">\n                            {configs}\n                            <div className=\"c-header__mobile-menu\">\n                                <span className=\"u-white u-pad-left\">\n                                    <Icon icon={IconType.Menu} size=\"26px\" color={Color.White} onClick={openMobileMenuClickHandler} />\n                                </span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            {mobileMenuOpen && (\n                <RoomstayPortal target={RoomstayThemeEngine.EngineContainer}>\n                    <FadeAnimation open={mobileMenuFaderStatus}>\n                        <div className={`mobile-header-menu ${mobileMenuFaderStatus ? '' : '--closing'}`}>\n                            <div className=\"mobile-header-menu--replica u-flex\">\n                                <div className=\"c-header__logo\">\n                                    <Link to=\"/\" onClick={closeMobileMenuClickHandler}>\n                                        {hotelImageElement}\n                                    </Link>\n                                </div>\n                                <div className=\"c-header__mobile-menu\">\n                                    <span className=\"u-white u-pad-left\">\n                                        <Icon icon={IconType.Close} size=\"26px\" color={Color.White} onClick={closeMobileMenuClickHandler} />\n                                    </span>\n                                </div>\n                            </div>\n                            <div className=\"mobile-header-menu--content\">\n                                {!!hotel && links}\n\n                                {configs}\n                            </div>\n                        </div>\n                    </FadeAnimation>\n                </RoomstayPortal>\n            )}\n            {MemberPortalFeature.isActive() && (\n                <Suspense fallback={SmallSpinner}>\n                    {roomstayMember ? (\n                        <AuthenticatedUserModal open={loginModalOpen} onClose={closeLoginClickHandler} anchorEl={loginAnchorEl.current} />\n                    ) : (\n                        <UnauthenticatedUserModal open={loginModalOpen} onClose={closeLoginClickHandler} anchorEl={loginAnchorEl.current} />\n                    )}\n                </Suspense>\n            )}\n        </>\n    );\n}\n"]}