@roomstay/frontend 2.6.18 → 2.6.20

package/dist/src/components/steps/room/MemberSignInModal/ExternalMemberModal.js

@@ -35,6 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@roomstay/core");
 const react_1 = __importStar(require("react"));
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
@@ -49,24 +50,23 @@ const TextBox_1 = __importDefault(require("../../../generic/TextBox"));
 const contexts_1 = require("../../../../contexts");
 const hooks_1 = require("../../../../hooks");
 const useExternalMember_1 = require("../../../../hooks/useExternalMember");
-const HotelDTO_1 = require("../../../../models/Api/HotelDTO");
 const RoomstayThemeEngine_1 = __importDefault(require("../../../../providers/RoomstayThemeEngine"));
 const Translation_1 = require("../../../../translations/Translation");
 const Color_1 = require("../../../../util/Color");
-const Big4MemberModal_module_scss_1 = __importDefault(require("./Big4MemberModal.module.scss"));
-const ExternalMemberModal = ({ isOpen, onClose }) => {
+const ExternalMemberModal_module_scss_1 = __importDefault(require("./ExternalMemberModal.module.scss"));
+const ExternalMemberModal = (props) => {
     const { hotel } = (0, hooks_1.useCurrentHotel)();
-    const ccx = (0, react_1.useContext)(contexts_1.CompanyContext);
+    const { externalMemberType } = (0, useExternalMember_1.useExternalMember)();
+    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
+    const { signUserIn, closeMemberSignupModal, memberOnlyModalPromotion } = (0, react_1.useContext)(contexts_1.CompanyContext);
+    const { t } = (0, react_i18next_1.useTranslation)();
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
-    const { externalMemberType } = (0, useExternalMember_1.useExternalMember)();
-    const { register, formState: { errors }, handleSubmit, } = (0, react_hook_form_1.useForm)({
-        mode: 'onChange',
-    });
+    const formMethods = (0, react_hook_form_1.useForm)();
     const modalPrimaryColor = (hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyModalUsePrimaryColor) ? Color_1.Color.Accent : Color_1.Color.Success;
     const getValidationClass = (name) => {
-        if (errors) {
-            if (errors[name]) {
+        if (formMethods.formState.errors) {
+            if (formMethods.formState.errors[name]) {
                 return 'error';
             }
             else {
@@ -74,64 +74,61 @@ const ExternalMemberModal = ({ isOpen, onClose }) => {
             }
         }
     };
-    const onSubmit = ({ familyName, memberNumber }) => __awaiter(void 0, void 0, void 0, function* () {
+    const onSubmit = (fields) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
         setIsLoading(true);
         setErrorMessage('');
         try {
-            const number = yield BookingAPI_1.default.Member.signInBig4Member(memberNumber, familyName, hotel === null || hotel === void 0 ? void 0 : hotel.hotelID);
-            localStorage.setItem('hotel' + (hotel === null || hotel === void 0 ? void 0 : hotel.hotelID) + 'isFromBig4', number.memberId);
-            ccx.signUserIn(number.memberId.toString(), true);
+            const hotelId = hotel === null || hotel === void 0 ? void 0 : hotel.hotelID;
+            const member = yield BookingAPI_1.default.Member.verifyMember(hotelId, fields);
+            if (member && member.memberId) {
+                signUserIn({
+                    memberNumber: member.memberId,
+                    firstName: fields.firstName,
+                    lastName: fields.lastName,
+                    email: fields.email,
+                }, true);
+                const promoCode = member.promoCode || (hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyPromoCode);
+                // Apply promo code
+                if (promoCode && !(memberOnlyModalPromotion === null || memberOnlyModalPromotion === void 0 ? void 0 : memberOnlyModalPromotion.memberOnlyDisableDefaultPromo)) {
+                    (_a = basketContext.currentBasketRows) === null || _a === void 0 ? void 0 : _a.forEach((row) => {
+                        row.setPromoCode(promoCode);
+                        basketContext.updateBasketRow(row);
+                    });
+                }
+                // Preset checkout defaults
+                (_b = basketContext.currentBasketRows) === null || _b === void 0 ? void 0 : _b.forEach((row) => (row.checkoutDefaults = {
+                    FirstName: fields.firstName,
+                    LastName: fields.lastName,
+                    Email: fields.email,
+                }));
+            }
+            else {
+                setErrorMessage(t(Translation_1.Translation.ExternalMemberPopup.InvalidMember));
+            }
         }
         catch (e) {
-            if (e.Message) {
+            if (e[(0, core_1.nameof)('Message')]) {
                 setErrorMessage(e.Message);
             }
+            else {
+                throw e;
+            }
         }
         finally {
             setIsLoading(false);
         }
     });
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const { title, image } = (() => {
-        switch (externalMemberType) {
-            default:
-            case HotelDTO_1.EIntegration.Big4:
-                return { title: t(Translation_1.Translation.ExternalMemberPopup.Big4Title), image: 'big4-login.svg' };
-            case HotelDTO_1.EIntegration.Top10:
-                return { title: t(Translation_1.Translation.ExternalMemberPopup.Top10Title), image: 'top10-login.svg' };
-            case HotelDTO_1.EIntegration.Gday:
-                return { title: t(Translation_1.Translation.ExternalMemberPopup.GDayTitle), image: 'gday-login.svg' };
-        }
-    })();
-    return (react_1.default.createElement(SimpleModal_1.default, { open: isOpen, onClose: onClose, size: SimpleModal_1.SimpleModalSize.Normal, alignCenter: true, bodyClassName: Big4MemberModal_module_scss_1.default.root },
-        react_1.default.createElement("div", { className: Big4MemberModal_module_scss_1.default.container },
-            react_1.default.createElement("div", { className: Big4MemberModal_module_scss_1.default.logoSection },
-                react_1.default.createElement("img", { className: Big4MemberModal_module_scss_1.default.img, src: RoomstayThemeEngine_1.default.getImageAssetUrl(image), alt: `${externalMemberType} Logo` })),
+    return (react_1.default.createElement(SimpleModal_1.default, { open: props.isOpen, onClose: closeMemberSignupModal, size: SimpleModal_1.SimpleModalSize.Normal, alignCenter: true, bodyClassName: ExternalMemberModal_module_scss_1.default.root },
+        react_1.default.createElement("div", { className: ExternalMemberModal_module_scss_1.default.container },
+            react_1.default.createElement("div", { className: ExternalMemberModal_module_scss_1.default.logoSection },
+                react_1.default.createElement("img", { className: ExternalMemberModal_module_scss_1.default.img, src: RoomstayThemeEngine_1.default.getImageAssetUrl(props.image), alt: `${externalMemberType} Logo` })),
             react_1.default.createElement("div", null,
-                react_1.default.createElement("form", { onSubmit: handleSubmit(onSubmit) },
-                    react_1.default.createElement(Headline_1.default, { bold: true, color: modalPrimaryColor }, title),
-                    react_1.default.createElement("div", { className: "u-marg-top" },
+                react_1.default.createElement("form", { onSubmit: formMethods.handleSubmit(onSubmit) },
+                    react_1.default.createElement(Headline_1.default, { bold: true, color: modalPrimaryColor }, props.title),
+                    props.fields.map((field) => (react_1.default.createElement("div", { className: "u-marg-top", key: field.name },
                         react_1.default.createElement(InputGroup_1.default, { dimensions: "1" },
-                            react_1.default.createElement(TextBox_1.default, Object.assign({ iconProps: {
-                                    color: Color_1.Color.DarkGrey,
-                                }, icon: Icon_1.IconType.Star, inputProps: {
-                                    disabled: isLoading,
-                                }, wide: true, placeholder: t(Translation_1.Translation.ExternalMemberPopup.Fields.MemberNumber), required: true, validationStatus: getValidationClass('memberNumber') }, register('memberNumber', {
-                                required: true,
-                                pattern: {
-                                    value: /^[0-9]*$/,
-                                    message: 'Please enter a valid member number',
-                                },
-                            })))),
-                        react_1.default.createElement("div", { className: "u-marg-top--light" },
-                            react_1.default.createElement(InputGroup_1.default, { dimensions: "1" },
-                                react_1.default.createElement(TextBox_1.default, Object.assign({ iconProps: {
-                                        color: Color_1.Color.DarkGrey,
-                                    }, icon: Icon_1.IconType.Person, inputProps: {
-                                        disabled: isLoading,
-                                    }, wide: true, placeholder: t(Translation_1.Translation.ExternalMemberPopup.Fields.FamilyName), required: true, validationStatus: getValidationClass('familyName') }, register('familyName', {
-                                    required: true,
-                                })))))),
+                            react_1.default.createElement(TextBox_1.default, Object.assign({ iconProps: { color: Color_1.Color.DarkGrey }, icon: field.icon, inputProps: { disabled: isLoading }, wide: true, placeholder: field.label, required: true, validationStatus: getValidationClass(field.name) }, formMethods.register(field.name, { required: true }))))))),
                     react_1.default.createElement(BEButton_1.default, { isLoading: isLoading, htmlType: "submit", className: "u-marg-top", size: "normal", filled: true, primary: hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyModalUsePrimaryColor, success: !(hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyModalUsePrimaryColor), stopIconAnimation: true, icon: Icon_1.IconType.ArrowRight, iconPosition: "right" }, t(Translation_1.Translation.ExternalMemberPopup.Submit)),
                     react_1.default.createElement("div", { className: "u-marg-top" },
                         react_1.default.createElement(Text_1.default, { bold: true, color: Color_1.Color.Danger }, errorMessage)))))));

package/dist/src/components/steps/room/MemberSignInModal/ExternalMemberModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalMemberModal.js","sourceRoot":"/","sources":["src/components/steps/room/MemberSignInModal/ExternalMemberModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, useContext, useState } from 'react';\nimport { SubmitHandler, useForm } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\n\nimport API from '@/api/BookingAPI';\nimport BEButton from '@/components/generic/BEButton';\nimport Headline from '@/components/generic/Headline';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport InputGroup from '@/components/generic/InputGroup/InputGroup';\nimport SimpleModal, { SimpleModalSize } from '@/components/generic/modal/SimpleModal';\nimport Text from '@/components/generic/Text';\nimport TextBox from '@/components/generic/TextBox';\nimport { CompanyContext } from '@/contexts';\nimport { useCurrentHotel } from '@/hooks';\nimport { useExternalMember } from '@/hooks/useExternalMember';\nimport { EIntegration } from '@/models/Api/HotelDTO';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\n\nimport styles from './Big4MemberModal.module.scss';\n\ninterface Big4MemberModalProps {\n    isOpen: boolean;\n    onClose: () => void;\n}\n\ninterface Big4MemberFormValues {\n    memberNumber: string;\n    familyName: string;\n}\n\nconst ExternalMemberModal: FC<Big4MemberModalProps> = ({ isOpen, onClose }) => {\n    const { hotel } = useCurrentHotel();\n    const ccx = useContext(CompanyContext);\n    const [isLoading, setIsLoading] = useState(false);\n    const [errorMessage, setErrorMessage] = useState('');\n    const { externalMemberType } = useExternalMember();\n\n    const {\n        register,\n        formState: { errors },\n        handleSubmit,\n    } = useForm<Big4MemberFormValues>({\n        mode: 'onChange',\n    });\n\n    const modalPrimaryColor = hotel?.memberOnlyModalUsePrimaryColor ? Color.Accent : Color.Success;\n    const getValidationClass = (name: keyof Big4MemberFormValues) => {\n        if (errors) {\n            if (errors[name]) {\n                return 'error';\n            } else {\n                return 'success';\n            }\n        }\n    };\n    const onSubmit: SubmitHandler<Big4MemberFormValues> = async ({ familyName, memberNumber }) => {\n        setIsLoading(true);\n        setErrorMessage('');\n        try {\n            const number = await API.Member.signInBig4Member(memberNumber, familyName, hotel?.hotelID as string);\n            localStorage.setItem('hotel' + hotel?.hotelID + 'isFromBig4', number.memberId);\n            ccx.signUserIn(number.memberId.toString(), true);\n        } catch (e: any) {\n            if (e.Message) {\n                setErrorMessage(e.Message);\n            }\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    const { t } = useTranslation();\n\n    const { title, image } = (() => {\n        switch (externalMemberType) {\n            default:\n            case EIntegration.Big4:\n                return { title: t(Translation.ExternalMemberPopup.Big4Title), image: 'big4-login.svg' };\n            case EIntegration.Top10:\n                return { title: t(Translation.ExternalMemberPopup.Top10Title), image: 'top10-login.svg' };\n            case EIntegration.Gday:\n                return { title: t(Translation.ExternalMemberPopup.GDayTitle), image: 'gday-login.svg' };\n        }\n    })();\n\n    return (\n        <SimpleModal open={isOpen} onClose={onClose} size={SimpleModalSize.Normal} alignCenter bodyClassName={styles.root}>\n            <div className={styles.container}>\n                <div className={styles.logoSection}>\n                    <img className={styles.img} src={RoomstayThemeEngine.getImageAssetUrl(image)} alt={`${externalMemberType} Logo`} />\n                </div>\n                <div>\n                    <form onSubmit={handleSubmit(onSubmit)}>\n                        <Headline bold color={modalPrimaryColor}>\n                            {title}\n                        </Headline>\n                        <div className=\"u-marg-top\">\n                            <InputGroup dimensions=\"1\">\n                                <TextBox\n                                    iconProps={{\n                                        color: Color.DarkGrey,\n                                    }}\n                                    icon={IconType.Star}\n                                    inputProps={{\n                                        disabled: isLoading,\n                                    }}\n                                    wide\n                                    placeholder={t(Translation.ExternalMemberPopup.Fields.MemberNumber)}\n                                    required\n                                    validationStatus={getValidationClass('memberNumber')}\n                                    {...register('memberNumber', {\n                                        required: true,\n                                        pattern: {\n                                            value: /^[0-9]*$/,\n                                            message: 'Please enter a valid member number',\n                                        },\n                                    })}\n                                />\n                            </InputGroup>\n                            <div className=\"u-marg-top--light\">\n                                <InputGroup dimensions=\"1\">\n                                    <TextBox\n                                        iconProps={{\n                                            color: Color.DarkGrey,\n                                        }}\n                                        icon={IconType.Person}\n                                        inputProps={{\n                                            disabled: isLoading,\n                                        }}\n                                        wide\n                                        placeholder={t(Translation.ExternalMemberPopup.Fields.FamilyName)}\n                                        required\n                                        validationStatus={getValidationClass('familyName')}\n                                        {...register('familyName', {\n                                            required: true,\n                                        })}\n                                    />\n                                </InputGroup>\n                            </div>\n                        </div>\n                        <BEButton\n                            isLoading={isLoading}\n                            htmlType=\"submit\"\n                            className=\"u-marg-top\"\n                            size=\"normal\"\n                            filled\n                            primary={hotel?.memberOnlyModalUsePrimaryColor}\n                            success={!hotel?.memberOnlyModalUsePrimaryColor}\n                            stopIconAnimation\n                            icon={IconType.ArrowRight}\n                            iconPosition=\"right\"\n                        >\n                            {t(Translation.ExternalMemberPopup.Submit)}\n                        </BEButton>\n                        <div className=\"u-marg-top\">\n                            <Text bold color={Color.Danger}>\n                                {errorMessage}\n                            </Text>\n                        </div>\n                    </form>\n                </div>\n            </div>\n        </SimpleModal>\n    );\n};\n\nexport default ExternalMemberModal;\n"]}
+{"version":3,"file":"ExternalMemberModal.js","sourceRoot":"/","sources":["src/components/steps/room/MemberSignInModal/ExternalMemberModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { IMemberVerification, IMessage, nameof } from '@roomstay/core';\nimport React, { useContext, useState } from 'react';\nimport { FieldValues, Path, SubmitHandler, useForm } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\n\nimport API from '@/api/BookingAPI';\nimport BEButton from '@/components/generic/BEButton';\nimport Headline from '@/components/generic/Headline';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport InputGroup from '@/components/generic/InputGroup/InputGroup';\nimport SimpleModal, { SimpleModalSize } from '@/components/generic/modal/SimpleModal';\nimport Text from '@/components/generic/Text';\nimport TextBox from '@/components/generic/TextBox';\nimport { BasketContext, BookingEngineContext, CompanyContext } from '@/contexts';\nimport { useCurrentHotel } from '@/hooks';\nimport { useExternalMember } from '@/hooks/useExternalMember';\nimport UserProfile from '@/models/UserProfile';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\n\nimport styles from './ExternalMemberModal.module.scss';\n\ntype ExternalMemberModalProps<T extends FieldValues> = {\n    title: string;\n    image: string;\n    isOpen: boolean;\n    fields: ExternalMemberModelField<T>[];\n};\n\ntype ExternalMemberModelField<T extends FieldValues> = {\n    name: keyof T & string;\n    icon: IconType;\n    label: string;\n    profileMapping?: keyof UserProfile;\n};\n\nconst ExternalMemberModal = <T extends FieldValues & IMemberVerification>(props: ExternalMemberModalProps<T>) => {\n    const { hotel } = useCurrentHotel();\n    const { externalMemberType } = useExternalMember();\n    const basketContext = useContext(BasketContext);\n    const { signUserIn, closeMemberSignupModal, memberOnlyModalPromotion } = useContext(CompanyContext);\n    const { t } = useTranslation();\n    const [isLoading, setIsLoading] = useState(false);\n    const [errorMessage, setErrorMessage] = useState('');\n    const formMethods = useForm<T>();\n    const modalPrimaryColor = hotel?.memberOnlyModalUsePrimaryColor ? Color.Accent : Color.Success;\n\n    const getValidationClass = (name: keyof T) => {\n        if (formMethods.formState.errors) {\n            if (formMethods.formState.errors[name]) {\n                return 'error';\n            } else {\n                return 'success';\n            }\n        }\n    };\n\n    const onSubmit: SubmitHandler<T> = async (fields) => {\n        setIsLoading(true);\n        setErrorMessage('');\n\n        try {\n            const hotelId = hotel?.hotelID as string;\n            const member = await API.Member.verifyMember(hotelId, fields);\n\n            if (member && member.memberId) {\n                signUserIn(\n                    {\n                        memberNumber: member.memberId,\n                        firstName: fields.firstName,\n                        lastName: fields.lastName,\n                        email: fields.email,\n                    },\n                    true\n                );\n\n                const promoCode = member.promoCode || (hotel?.memberOnlyPromoCode as string);\n\n                // Apply promo code\n                if (promoCode && !memberOnlyModalPromotion?.memberOnlyDisableDefaultPromo) {\n                    basketContext.currentBasketRows?.forEach((row) => {\n                        row.setPromoCode(promoCode);\n                        basketContext.updateBasketRow(row);\n                    });\n                }\n\n                // Preset checkout defaults\n                basketContext.currentBasketRows?.forEach(\n                    (row) =>\n                        (row.checkoutDefaults = {\n                            FirstName: fields.firstName,\n                            LastName: fields.lastName,\n                            Email: fields.email,\n                        })\n                );\n            } else {\n                setErrorMessage(t(Translation.ExternalMemberPopup.InvalidMember));\n            }\n        } catch (e: any) {\n            if (e[nameof<IMessage>('Message')]) {\n                setErrorMessage(e.Message);\n            } else {\n                throw e;\n            }\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    return (\n        <SimpleModal open={props.isOpen} onClose={closeMemberSignupModal} size={SimpleModalSize.Normal} alignCenter bodyClassName={styles.root}>\n            <div className={styles.container}>\n                <div className={styles.logoSection}>\n                    <img className={styles.img} src={RoomstayThemeEngine.getImageAssetUrl(props.image)} alt={`${externalMemberType} Logo`} />\n                </div>\n                <div>\n                    <form onSubmit={formMethods.handleSubmit(onSubmit)}>\n                        <Headline bold color={modalPrimaryColor}>\n                            {props.title}\n                        </Headline>\n\n                        {props.fields.map((field) => (\n                            <div className=\"u-marg-top\" key={field.name}>\n                                <InputGroup dimensions=\"1\">\n                                    <TextBox\n                                        iconProps={{ color: Color.DarkGrey }}\n                                        icon={field.icon}\n                                        inputProps={{ disabled: isLoading }}\n                                        wide\n                                        placeholder={field.label}\n                                        required\n                                        validationStatus={getValidationClass(field.name)}\n                                        {...formMethods.register(field.name as Path<T>, { required: true })}\n                                    />\n                                </InputGroup>\n                            </div>\n                        ))}\n\n                        <BEButton\n                            isLoading={isLoading}\n                            htmlType=\"submit\"\n                            className=\"u-marg-top\"\n                            size=\"normal\"\n                            filled\n                            primary={hotel?.memberOnlyModalUsePrimaryColor}\n                            success={!hotel?.memberOnlyModalUsePrimaryColor}\n                            stopIconAnimation\n                            icon={IconType.ArrowRight}\n                            iconPosition=\"right\"\n                        >\n                            {t(Translation.ExternalMemberPopup.Submit)}\n                        </BEButton>\n                        <div className=\"u-marg-top\">\n                            <Text bold color={Color.Danger}>\n                                {errorMessage}\n                            </Text>\n                        </div>\n                    </form>\n                </div>\n            </div>\n        </SimpleModal>\n    );\n};\n\nexport default ExternalMemberModal;\n"]}

package/dist/src/components/steps/room/MemberSignInModal/FamilyNameMemberModal.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export type FamilyNameMemberModalProps = {
+    title: string;
+    image: string;
+    isOpen: boolean;
+};
+declare const FamilyNameMemberModal: FC<FamilyNameMemberModalProps>;
+export default FamilyNameMemberModal;

package/dist/src/components/steps/room/MemberSignInModal/FamilyNameMemberModal.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_i18next_1 = require("react-i18next");
+const Icon_1 = require("../../../generic/Icon/Icon");
+const Translation_1 = require("../../../../translations/Translation");
+const ExternalMemberModal_1 = __importDefault(require("./ExternalMemberModal"));
+const FamilyNameMemberModal = (props) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return (react_1.default.createElement(ExternalMemberModal_1.default, { title: props.title, image: props.image, isOpen: props.isOpen, fields: [
+            {
+                name: 'memberNumber',
+                icon: Icon_1.IconType.Star,
+                label: t(Translation_1.Translation.ExternalMemberPopup.Fields.MemberNumber),
+            },
+            {
+                name: 'lastName',
+                icon: Icon_1.IconType.Person,
+                label: t(Translation_1.Translation.ExternalMemberPopup.Fields.FamilyName),
+            },
+        ] }));
+};
+exports.default = FamilyNameMemberModal;
+//# sourceMappingURL=FamilyNameMemberModal.js.map

package/dist/src/components/steps/room/MemberSignInModal/FamilyNameMemberModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FamilyNameMemberModal.js","sourceRoot":"/","sources":["src/components/steps/room/MemberSignInModal/FamilyNameMemberModal.tsx"],"names":[],"mappings":";;;;;AACA,kDAAkC;AAClC,iDAA+C;AAE/C,yDAA0D;AAC1D,4DAAyD;AAEzD,gFAAwD;AAQxD,MAAM,qBAAqB,GAAmC,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,OAAO,CACH,8BAAC,6BAAmB,IAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,MAAM,EAAE;YACJ;gBACI,IAAI,EAAE,cAAc;gBACpB,IAAI,EAAE,eAAQ,CAAC,IAAI;gBACnB,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,mBAAmB,CAAC,MAAM,CAAC,YAAY,CAAC;aAChE;YACD;gBACI,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,eAAQ,CAAC,MAAM;gBACrB,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,mBAAmB,CAAC,MAAM,CAAC,UAAU,CAAC;aAC9D;SACJ,GACH,CACL,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,qBAAqB,CAAC","sourcesContent":["import { IMemberVerification } from '@roomstay/core';\nimport React, { FC } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport { Translation } from '@/translations/Translation';\n\nimport ExternalMemberModal from './ExternalMemberModal';\n\nexport type FamilyNameMemberModalProps = {\n    title: string;\n    image: string;\n    isOpen: boolean;\n};\n\nconst FamilyNameMemberModal: FC<FamilyNameMemberModalProps> = (props) => {\n    const { t } = useTranslation();\n\n    return (\n        <ExternalMemberModal<IMemberVerification>\n            title={props.title}\n            image={props.image}\n            isOpen={props.isOpen}\n            fields={[\n                {\n                    name: 'memberNumber',\n                    icon: IconType.Star,\n                    label: t(Translation.ExternalMemberPopup.Fields.MemberNumber),\n                },\n                {\n                    name: 'lastName',\n                    icon: IconType.Person,\n                    label: t(Translation.ExternalMemberPopup.Fields.FamilyName),\n                },\n            ]}\n        />\n    );\n};\n\nexport default FamilyNameMemberModal;\n"]}

package/dist/src/components/steps/room/MemberSignInModal/InternalMemberSignInModal.d.ts

@@ -0,0 +1,6 @@
+interface MemberSignInModalProps {
+    onClose?: () => void;
+    isOpen?: boolean;
+}
+export default function InternalMemberSignInModal(props: MemberSignInModalProps): JSX.Element;
+export {};

package/dist/src/components/steps/room/MemberSignInModal/InternalMemberSignInModal.js

@@ -0,0 +1,318 @@
+"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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const contexts_1 = require("../../../../contexts/index.js");
+const events_1 = require("../../../../events/index.js");
+const hooks_1 = require("../../../../hooks/index.js");
+const Sentry = __importStar(require("@sentry/browser"));
+const ErrorContext_1 = require("contexts/ErrorContext");
+const react_1 = __importStar(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("translations/Translation");
+const BookingAPI_1 = __importDefault(require("../../../../api/BookingAPI"));
+const BEButton_1 = __importDefault(require("../../../generic/BEButton"));
+const Headline_1 = __importDefault(require("../../../generic/Headline"));
+const Icon_1 = __importStar(require("../../../generic/Icon/Icon"));
+const InputGroup_1 = __importDefault(require("../../../generic/InputGroup/InputGroup"));
+const SimpleModal_1 = __importStar(require("../../../generic/modal/SimpleModal"));
+const Text_1 = __importStar(require("../../../generic/Text"));
+const TextBox_1 = __importDefault(require("../../../generic/TextBox"));
+const ImageProvider_1 = __importStar(require("../../../../providers/ImageProvider"));
+const RoomstayThemeEngine_1 = __importDefault(require("../../../../providers/RoomstayThemeEngine"));
+const Color_1 = require("../../../../util/Color");
+const ScreenSize_1 = __importDefault(require("../../../../util/ScreenSize"));
+const Validation_1 = require("../../../../util/Validation");
+function InternalMemberSignInModal(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
+    const ccx = (0, react_1.useContext)(contexts_1.CompanyContext);
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [showErrors, setShowErrors] = (0, react_1.useState)(false);
+    const [captchaScriptLoaded, setCaptchaScriptLoaded] = (0, react_1.useState)(false);
+    const [captchaRendered, setCaptchaRendered] = (0, react_1.useState)(false);
+    const [reCaptchaSecret, setReCaptchaSecret] = (0, react_1.useState)(null);
+    const [captchaError, setCaptchaError] = (0, react_1.useState)(null);
+    const captchaRef = (0, react_1.useRef)(null);
+    const shouldLoadCaptcha = !!((_a = hotel === null || hotel === void 0 ? void 0 : hotel.googleReCaptcha) === null || _a === void 0 ? void 0 : _a.loadForMembers) && !!((_b = hotel === null || hotel === void 0 ? void 0 : hotel.googleReCaptcha) === null || _b === void 0 ? void 0 : _b.siteKey);
+    const MemberOnlyModalDefaultInputs = (0, react_1.useMemo)(() => {
+        return {
+            Lines: [
+                {
+                    Dimension: '2/2',
+                    Inputs: [
+                        {
+                            name: 'FirstName',
+                            type: 'TextBox',
+                            placeholder: t(Translation_1.Translation.MemberOnlyPopup.Fields.FirstName),
+                            isRequired: true,
+                        },
+                        {
+                            name: 'LastName',
+                            type: 'TextBox',
+                            placeholder: t(Translation_1.Translation.MemberOnlyPopup.Fields.LastName),
+                            isRequired: true,
+                        },
+                    ],
+                },
+                {
+                    Dimension: '1',
+                    Inputs: [
+                        {
+                            name: 'Email',
+                            type: 'TextBox',
+                            placeholder: t(Translation_1.Translation.MemberOnlyPopup.Fields.Email.Label),
+                            isRequired: true,
+                            validate: (input) => {
+                                if (!input.match(Validation_1.EMAIL_REGEX)) {
+                                    return t(Translation_1.Translation.MemberOnlyPopup.Fields.Email.Validation.Invalid);
+                                }
+                                return true;
+                            },
+                        },
+                    ],
+                },
+            ],
+        };
+    }, []);
+    const { raise } = (0, hooks_1.useEvent)();
+    (0, react_1.useEffect)(() => {
+        if (props.isOpen) {
+            const event = new events_1.MemberOnlyModalViewEvent();
+            raise(event);
+        }
+    }, [props.isOpen]);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        if (shouldLoadCaptcha) {
+            RoomstayThemeEngine_1.default.loadScript('https://www.google.com/recaptcha/api.js', 'Google ReCaptcha').then(() => {
+                try {
+                    window.grecaptcha.ready(() => {
+                        if (!cancelled) {
+                            setCaptchaScriptLoaded(true);
+                        }
+                    });
+                }
+                catch (ex) {
+                    console.log('Captcha loaded too quickly, will try again');
+                }
+            });
+        }
+        return () => {
+            cancelled = true;
+        };
+    }, [hotel]);
+    (0, react_1.useEffect)(() => {
+        if (shouldLoadCaptcha && captchaScriptLoaded && (captchaRef === null || captchaRef === void 0 ? void 0 : captchaRef.current) && !captchaRendered && props.isOpen) {
+            try {
+                setTimeout(() => {
+                    var _a;
+                    const captchaCallback = (secret) => {
+                        setReCaptchaSecret(secret);
+                        setCaptchaError(undefined);
+                    };
+                    window.grecaptcha.render(captchaRef.current, {
+                        sitekey: (_a = hotel.googleReCaptcha) === null || _a === void 0 ? void 0 : _a.siteKey,
+                        callback: captchaCallback,
+                    });
+                    setCaptchaRendered(true);
+                }, 5);
+            }
+            catch (ex) {
+                console.log(ex);
+                Sentry.captureException(ex);
+            }
+        }
+    }, [props.isOpen, captchaScriptLoaded, captchaRef, captchaRef === null || captchaRef === void 0 ? void 0 : captchaRef.current, captchaRendered]);
+    (0, react_1.useEffect)(() => {
+        if (!props.isOpen) {
+            setReCaptchaSecret(null);
+            setCaptchaError(null);
+            setCaptchaRendered(false);
+        }
+    }, [props.isOpen]);
+    const getValidationClass = (name) => {
+        if (errors && (formState.touchedFields[name] || showErrors)) {
+            if (errors[name]) {
+                return 'error';
+            }
+            else {
+                return 'success';
+            }
+        }
+    };
+    const methods = (0, react_hook_form_1.useForm)({
+        mode: 'onChange',
+    });
+    const { formState, register } = methods;
+    const errors = methods.formState.errors;
+    const onSubmit = () => __awaiter(this, void 0, void 0, function* () {
+        if (shouldLoadCaptcha && (!reCaptchaSecret || reCaptchaSecret === '')) {
+            setCaptchaError(t(Translation_1.Translation.MemberOnlyPopup.Errors.ReCaptcha.PleaseTick));
+            return;
+        }
+        yield signUpMember();
+    });
+    const signUpMember = () => __awaiter(this, void 0, void 0, function* () {
+        var _l, _m;
+        setIsLoading(true);
+        const _o = methods.getValues(), { FirstName, LastName, Email } = _o, extra = __rest(_o, ["FirstName", "LastName", "Email"]);
+        if (!FirstName || !LastName || !Email) {
+            setIsLoading(false);
+            ErrorContext_1.ErrorHandler.add({
+                title: t(Translation_1.Translation.MemberOnlyPopup.Errors.RequiredFields.Title),
+                message: t(Translation_1.Translation.MemberOnlyPopup.Errors.RequiredFields.Message),
+            });
+            return;
+        }
+        try {
+            const extraFields = Object.keys(extra).map((extraFieldKey) => {
+                return { name: extraFieldKey, value: extra[extraFieldKey] };
+            });
+            const response = yield BookingAPI_1.default.Member.addMember(FirstName, LastName, Email, extraFields, hotel === null || hotel === void 0 ? void 0 : hotel.hotelID, reCaptchaSecret);
+            if (response.error) {
+                setCaptchaError(t(Translation_1.Translation.MemberOnlyPopup.Errors.ReCaptcha.ValidationError));
+            }
+            else {
+                ccx.signUserIn({ memberNumber: Email, firstName: FirstName, lastName: LastName, email: Email });
+                if ((hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyPromoCode) && !((_l = ccx.memberOnlyModalPromotion) === null || _l === void 0 ? void 0 : _l.memberOnlyDisableDefaultPromo)) {
+                    (_m = basketContext.currentBasketRows) === null || _m === void 0 ? void 0 : _m.forEach((row) => {
+                        row.setPromoCode(hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyPromoCode);
+                        basketContext.updateBasketRow(row);
+                    });
+                }
+            }
+        }
+        catch (e) {
+            ErrorContext_1.ErrorHandler.add({
+                title: t(Translation_1.Translation.MemberOnlyPopup.Errors.SignupFailed.Title),
+                message: t(Translation_1.Translation.MemberOnlyPopup.Errors.SignupFailed.Message),
+            });
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
+    const modalInputs = (_c = hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlySignupInputs) !== null && _c !== void 0 ? _c : MemberOnlyModalDefaultInputs;
+    const loadingOnClose = () => {
+        setIsLoading(false);
+        if (props.onClose) {
+            props.onClose();
+        }
+    };
+    const buttonOnClickHandler = () => __awaiter(this, void 0, void 0, function* () {
+        yield methods.handleSubmit(onSubmit)();
+        setShowErrors(true);
+        return false;
+    });
+    const modalTitle = (_e = (_d = ccx === null || ccx === void 0 ? void 0 : ccx.memberOnlyModalPromotion) === null || _d === void 0 ? void 0 : _d.memberOnlyModalTitle) !== null && _e !== void 0 ? _e : t(Translation_1.Translation.MemberOnlyPopup.Headline, {
+        companyShort: ccx === null || ccx === void 0 ? void 0 : ccx.companyShort,
+    });
+    const modalSubtitle = (_g = (_f = ccx === null || ccx === void 0 ? void 0 : ccx.memberOnlyModalPromotion) === null || _f === void 0 ? void 0 : _f.memberOnlyModalSubtitle) !== null && _g !== void 0 ? _g : t(Translation_1.Translation.MemberOnlyPopup.Subtitle);
+    const modalButtonText = (_j = (_h = ccx === null || ccx === void 0 ? void 0 : ccx.memberOnlyModalPromotion) === null || _h === void 0 ? void 0 : _h.memberOnlyModalButtonText) !== null && _j !== void 0 ? _j : t(Translation_1.Translation.MemberOnlyPopup.SubmitButtonText);
+    const modalLeadImage = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if ((_a = ccx.memberOnlyModalPromotion) === null || _a === void 0 ? void 0 : _a.memberOnlyModalImage) {
+            return (_b = ccx.memberOnlyModalPromotion) === null || _b === void 0 ? void 0 : _b.memberOnlyModalImage;
+        }
+        if (hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyModalImage) {
+            return hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyModalImage;
+        }
+        if (hotel === null || hotel === void 0 ? void 0 : hotel.heroImage) {
+            return hotel === null || hotel === void 0 ? void 0 : hotel.heroImage;
+        }
+    }, [hotel === null || hotel === void 0 ? void 0 : hotel.heroImage, hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyModalImage, (_k = ccx === null || ccx === void 0 ? void 0 : ccx.memberOnlyModalPromotion) === null || _k === void 0 ? void 0 : _k.memberOnlyModalImage]);
+    const modalPrimaryColor = (hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyModalUsePrimaryColor) ? Color_1.Color.Accent : Color_1.Color.Success;
+    return (react_1.default.createElement(SimpleModal_1.default, { open: props.isOpen, onClose: loadingOnClose, size: SimpleModal_1.SimpleModalSize.Normal, alignCenter: true },
+        react_1.default.createElement("div", { className: "row" },
+            react_1.default.createElement("div", { className: "col-md-6 u-mh-none", style: {
+                    background: 'url("' + (modalLeadImage && ImageProvider_1.default.resizeImage(modalLeadImage, ImageProvider_1.ImageSize.Original)) + '")',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundPosition: 'center',
+                    backgroundSize: 'cover',
+                } }),
+            react_1.default.createElement("div", { className: "col-md-6" },
+                react_1.default.createElement("div", { className: "u-pad u-pad-heavy@m-" },
+                    react_1.default.createElement("div", { className: "u-marg-bottom-half" },
+                        react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.Money, size: "24px", color: modalPrimaryColor, useColorAsBackground: hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyModalUsePrimaryColor, backgroundColor: Color_1.Color.SuccessTint })),
+                    react_1.default.createElement("div", { className: "u-marg-bottom-half" },
+                        react_1.default.createElement(Headline_1.default, { bold: true, color: modalPrimaryColor },
+                            react_1.default.createElement("div", { style: { color: modalPrimaryColor }, dangerouslySetInnerHTML: {
+                                    __html: modalTitle,
+                                } }))),
+                    react_1.default.createElement("div", { className: "u-marg-bottom" },
+                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey },
+                            react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: modalSubtitle } }))),
+                    react_1.default.createElement(react_hook_form_1.FormProvider, Object.assign({}, methods),
+                        react_1.default.createElement("div", null, modalInputs.Lines.map((inputLine, lineIndex) => {
+                            return (react_1.default.createElement(InputGroup_1.default, { dimensions: inputLine.Dimension, key: lineIndex }, inputLine.Inputs.map((input, inputIndex) => {
+                                switch (input.type) {
+                                    case 'TextBox':
+                                        return (react_1.default.createElement(TextBox_1.default, Object.assign({ key: inputIndex, wide: true, placeholder: input.placeholder, required: input.isRequired, validationStatus: getValidationClass(input.name) }, register(input.name, {
+                                            required: input.isRequired,
+                                            validate: input.validate,
+                                        }))));
+                                }
+                            })));
+                        })),
+                        react_1.default.createElement("div", { className: "u-marg-top--light", style: { marginBottom: '45px' } },
+                            captchaScriptLoaded && (react_1.default.createElement(react_1.default.Fragment, null,
+                                captchaError && (react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Alert }, captchaError)),
+                                react_1.default.createElement("div", { ref: captchaRef, className: "u-marg-bottom" }))),
+                            react_1.default.createElement(BEButton_1.default, { size: "normal", filled: true, primary: hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyModalUsePrimaryColor, success: !(hotel === null || hotel === void 0 ? void 0 : hotel.memberOnlyModalUsePrimaryColor), isLoading: isLoading, stopIconAnimation: true, icon: context.screenSize > ScreenSize_1.default.Mobile ? Icon_1.IconType.ArrowRight : undefined, onClick: buttonOnClickHandler }, modalButtonText))),
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey },
+                        react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: t(Translation_1.Translation.MemberOnlyPopup.AgreeToReceiveDeals, { companyShort: ccx === null || ccx === void 0 ? void 0 : ccx.companyShort }) } })),
+                    ' ',
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.DarkGrey },
+                        react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: t(Translation_1.Translation.MemberOnlyPopup.UnsubscribeAnytime) } })))))));
+}
+exports.default = InternalMemberSignInModal;
+//# sourceMappingURL=InternalMemberSignInModal.js.map