@roomstay/frontend 1.6.1 → 2.0.0-2

package/dist/src/components/generic/modal/SigninModal/UnauthenticatedUserModal.d.ts

@@ -0,0 +1,15 @@
+interface UnauthenticatedUserModalProps {
+    open: boolean;
+    anchorEl?: HTMLElement;
+    containerEl?: HTMLElement;
+    onClose?: () => void;
+    onConfirm?: () => void;
+}
+export declare enum EViewingScreen {
+    Default = "Default",
+    SignIn = "SignIn",
+    SignUp = "SignUp",
+    ForgotPassword = "ForgotPassword"
+}
+export declare const UnauthenticatedUserModal: (props: UnauthenticatedUserModalProps) => JSX.Element;
+export {};

package/dist/src/components/generic/modal/SigninModal/UnauthenticatedUserModal.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnauthenticatedUserModal = exports.EViewingScreen = void 0;
+const React = require("react");
+const react_1 = require("react");
+const Overlay_1 = require("components/generic/Overlay/Overlay");
+const Fade_1 = require("animations/Fade");
+const SignInForm_1 = require("components/User/Forms/SignInForm");
+const contexts_1 = require("@frontend/contexts");
+const ScreenSize_1 = require("util/ScreenSize");
+const AutoAutoHeight_1 = require("animations/AutoAutoHeight");
+const SignUpForm_1 = require("components/User/Forms/SignUpForm");
+const ForgotPasswordForm_1 = require("components/User/Forms/ForgotPasswordForm");
+const LineBreak_1 = require("components/generic/LineBreak");
+const BEButton_1 = require("components/generic/BEButton");
+const Color_1 = require("util/Color");
+const Text_1 = require("components/generic/Text");
+var EViewingScreen;
+(function (EViewingScreen) {
+    EViewingScreen["Default"] = "Default";
+    EViewingScreen["SignIn"] = "SignIn";
+    EViewingScreen["SignUp"] = "SignUp";
+    EViewingScreen["ForgotPassword"] = "ForgotPassword";
+})(EViewingScreen = exports.EViewingScreen || (exports.EViewingScreen = {}));
+const UnauthenticatedUserModal = (props) => {
+    const { open, anchorEl, containerEl, onClose } = props;
+    const { reset: cognitoReset } = (0, react_1.useContext)(contexts_1.AuthenticationContext);
+    const [viewingScreen, setViewingScreen] = (0, react_1.useState)(EViewingScreen.SignIn);
+    const nextViewingScreen = (0, react_1.useRef)();
+    const { screenSize } = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const shouldBreakpoint = screenSize <= ScreenSize_1.default.Large;
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            setViewingScreen(EViewingScreen.SignIn);
+        }
+    }, [open]);
+    const reset = () => {
+        cognitoReset();
+        setViewingScreen(null);
+    };
+    const showForgotPassword = () => {
+        reset();
+        nextViewingScreen.current = EViewingScreen.ForgotPassword;
+    };
+    const showSignInFormContent = () => {
+        reset();
+        nextViewingScreen.current = EViewingScreen.SignIn;
+    };
+    const showSignUpFormContent = () => {
+        reset();
+        nextViewingScreen.current = EViewingScreen.SignUp;
+    };
+    const onAnimationExit = () => {
+        setViewingScreen(nextViewingScreen.current);
+    };
+    const signInFormContent = (React.createElement(React.Fragment, null,
+        React.createElement(SignInForm_1.SignInForm, { onForgotPassword: showForgotPassword }),
+        React.createElement(LineBreak_1.default, null),
+        React.createElement("div", { className: "u-marg-bottom--light" },
+            React.createElement(BEButton_1.default, { isText: true, wide: true, size: 'small', textColor: Color_1.Color.Navy, onClick: showSignUpFormContent }, "Don't have an account?")),
+        React.createElement(BEButton_1.default, { onClick: showSignUpFormContent, wide: true, primary: true }, "Sign Up, It's Free")));
+    const signUpFormContent = (React.createElement(React.Fragment, null,
+        React.createElement(SignUpForm_1.SignUpForm, { onSignedIn: showSignInFormContent }),
+        React.createElement(LineBreak_1.default, null),
+        React.createElement("div", { className: "u-marg-bottom--light" },
+            React.createElement(Text_1.default, { type: Text_1.TextType.Label, bold: true }, "Already have an account?")),
+        React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+            React.createElement(BEButton_1.default, { isText: true, size: 'small', primary: true, onClick: showSignInFormContent }, "Sign in"),
+            ' ',
+            "to log in with your account.")));
+    const forgotPasswordContent = (React.createElement(React.Fragment, null,
+        React.createElement(ForgotPasswordForm_1.ForgotPasswordForm, { onCancelled: showSignInFormContent })));
+    return (React.createElement(Overlay_1.Overlay, { usePortal: true, followElement: shouldBreakpoint ? null : anchorEl, placement: "auto-end", container: containerEl, open: open, onClose: onClose, strategy: "fixed", className: "c-login-overlay" },
+        React.createElement("div", { className: 'u-w-100 u-pad--heavy@m u-pad@m-' },
+            React.createElement(AutoAutoHeight_1.default, { open: true, startOpen: true }, [
+                [EViewingScreen.SignIn, signInFormContent],
+                [EViewingScreen.SignUp, signUpFormContent],
+                [EViewingScreen.ForgotPassword, forgotPasswordContent],
+            ].map(([forScreen, content], index) => (React.createElement(Fade_1.default, { open: viewingScreen === forScreen, onExitCompletely: onAnimationExit, key: index }, content)))))));
+};
+exports.UnauthenticatedUserModal = UnauthenticatedUserModal;
+//# sourceMappingURL=UnauthenticatedUserModal.js.map

package/dist/src/components/generic/modal/SigninModal/UnauthenticatedUserModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnauthenticatedUserModal.js","sourceRoot":"/","sources":["src/components/generic/modal/SigninModal/UnauthenticatedUserModal.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAgE;AAEhE,gEAA6D;AAC7D,0CAA4C;AAC5C,iEAA8D;AAC9D,iDAAiF;AACjF,gDAAyC;AACzC,8DAAuD;AACvD,iEAA8D;AAC9D,iFAA8E;AAC9E,4DAAqD;AACrD,0DAAmD;AACnD,sCAAmC;AACnC,kDAAyD;AAYzD,IAAY,cAKX;AALD,WAAY,cAAc;IACtB,qCAAmB,CAAA;IACnB,mCAAiB,CAAA;IACjB,mCAAiB,CAAA;IACjB,mDAAiC,CAAA;AACrC,CAAC,EALW,cAAc,GAAd,sBAAc,KAAd,sBAAc,QAKzB;AAEM,MAAM,wBAAwB,GAAG,CAAC,KAAoC,EAAE,EAAE;IAC7E,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACvD,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,IAAA,kBAAU,EAAC,gCAAqB,CAAC,CAAC;IAElE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAiB,cAAc,CAAC,MAAM,CAAC,CAAC;IAE1F,MAAM,iBAAiB,GAAG,IAAA,cAAM,GAAkB,CAAC;IAEnD,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACxD,MAAM,gBAAgB,GAAG,UAAU,IAAI,oBAAU,CAAC,KAAK,CAAC;IAExD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,IAAI,EAAE;YACN,gBAAgB,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;SAC3C;IACL,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,KAAK,GAAG,GAAG,EAAE;QACf,YAAY,EAAE,CAAC;QACf,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,KAAK,EAAE,CAAC;QACR,iBAAiB,CAAC,OAAO,GAAG,cAAc,CAAC,cAAc,CAAC;IAC9D,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;QAC/B,KAAK,EAAE,CAAC;QACR,iBAAiB,CAAC,OAAO,GAAG,cAAc,CAAC,MAAM,CAAC;IACtD,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;QAC/B,KAAK,EAAE,CAAC;QACR,iBAAiB,CAAC,OAAO,GAAG,cAAc,CAAC,MAAM,CAAC;IACtD,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,GAAG,EAAE;QACzB,gBAAgB,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAChD,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CACtB;QACI,oBAAC,uBAAU,IAAC,gBAAgB,EAAE,kBAAkB,GAAI;QACpD,oBAAC,mBAAS,OAAG;QACb,6BAAK,SAAS,EAAC,sBAAsB;YACjC,oBAAC,kBAAQ,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAK,CAAC,IAAI,EAAE,OAAO,EAAE,qBAAqB,6BAE7F,CACT;QACN,oBAAC,kBAAQ,IAAC,OAAO,EAAE,qBAAqB,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,yBAExD,CACZ,CACN,CAAC;IAEF,MAAM,iBAAiB,GAAG,CACtB;QACI,oBAAC,uBAAU,IAAC,UAAU,EAAE,qBAAqB,GAAI;QACjD,oBAAC,mBAAS,OAAG;QACb,6BAAK,SAAS,EAAC,sBAAsB;YACjC,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,+BAE/B,CACL;QACN,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK;YACtB,oBAAC,kBAAQ,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,qBAAqB,cAEzE;YAAC,GAAG;2CAEZ,CACR,CACN,CAAC;IAEF,MAAM,qBAAqB,GAAG,CAC1B;QACI,oBAAC,uCAAkB,IAAC,WAAW,EAAE,qBAAqB,GAAI,CAC3D,CACN,CAAC;IAEF,OAAO,CACH,oBAAC,iBAAO,IACJ,SAAS,EAAE,IAAI,EACf,aAAa,EAAE,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,EACjD,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,EACtB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAC,iBAAiB;QAE3B,6BAAK,SAAS,EAAE,iCAAiC;YAC7C,oBAAC,wBAAc,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,IACtC;gBACG,CAAC,cAAc,CAAC,MAAM,EAAE,iBAAiB,CAAC;gBAC1C,CAAC,cAAc,CAAC,MAAM,EAAE,iBAAiB,CAAC;gBAC1C,CAAC,cAAc,CAAC,cAAc,EAAE,qBAAqB,CAAC;aACzD,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,oBAAC,cAAa,IAAC,IAAI,EAAE,aAAa,KAAK,SAAS,EAAE,gBAAgB,EAAE,eAAe,EAAE,GAAG,EAAE,KAAK,IAC1F,OAA6B,CAClB,CACnB,CAAC,CACW,CACf,CACA,CACb,CAAC;AACN,CAAC,CAAC;AA1GW,QAAA,wBAAwB,4BA0GnC","sourcesContent":["import * as React from 'react';\nimport { useEffect, useContext, useState, useRef } from 'react';\n\nimport { Overlay } from 'components/generic/Overlay/Overlay';\nimport FadeAnimation from 'animations/Fade';\nimport { SignInForm } from 'components/User/Forms/SignInForm';\nimport { AuthenticationContext, BookingEngineContext } from '@frontend/contexts';\nimport ScreenSize from 'util/ScreenSize';\nimport AutoAutoHeight from 'animations/AutoAutoHeight';\nimport { SignUpForm } from 'components/User/Forms/SignUpForm';\nimport { ForgotPasswordForm } from 'components/User/Forms/ForgotPasswordForm';\nimport LineBreak from 'components/generic/LineBreak';\nimport BEButton from 'components/generic/BEButton';\nimport { Color } from 'util/Color';\nimport Text, { TextType } from 'components/generic/Text';\n\n// TODO: Move file to not be in a generic location\n\ninterface UnauthenticatedUserModalProps {\n    open: boolean;\n    anchorEl?: HTMLElement;\n    containerEl?: HTMLElement;\n    onClose?: () => void;\n    onConfirm?: () => void;\n}\n\nexport enum EViewingScreen {\n    Default = 'Default',\n    SignIn = 'SignIn',\n    SignUp = 'SignUp',\n    ForgotPassword = 'ForgotPassword',\n}\n\nexport const UnauthenticatedUserModal = (props: UnauthenticatedUserModalProps) => {\n    const { open, anchorEl, containerEl, onClose } = props;\n    const { reset: cognitoReset } = useContext(AuthenticationContext);\n\n    const [viewingScreen, setViewingScreen] = useState<EViewingScreen>(EViewingScreen.SignIn);\n\n    const nextViewingScreen = useRef<EViewingScreen>();\n\n    const { screenSize } = useContext(BookingEngineContext);\n    const shouldBreakpoint = screenSize <= ScreenSize.Large;\n\n    useEffect(() => {\n        if (open) {\n            setViewingScreen(EViewingScreen.SignIn);\n        }\n    }, [open]);\n\n    const reset = () => {\n        cognitoReset();\n        setViewingScreen(null);\n    };\n\n    const showForgotPassword = () => {\n        reset();\n        nextViewingScreen.current = EViewingScreen.ForgotPassword;\n    };\n\n    const showSignInFormContent = () => {\n        reset();\n        nextViewingScreen.current = EViewingScreen.SignIn;\n    };\n\n    const showSignUpFormContent = () => {\n        reset();\n        nextViewingScreen.current = EViewingScreen.SignUp;\n    };\n\n    const onAnimationExit = () => {\n        setViewingScreen(nextViewingScreen.current);\n    };\n\n    const signInFormContent = (\n        <>\n            <SignInForm onForgotPassword={showForgotPassword} />\n            <LineBreak />\n            <div className=\"u-marg-bottom--light\">\n                <BEButton isText={true} wide={true} size={'small'} textColor={Color.Navy} onClick={showSignUpFormContent}>\n                    Don't have an account?\n                </BEButton>\n            </div>\n            <BEButton onClick={showSignUpFormContent} wide={true} primary={true}>\n                Sign Up, It's Free\n            </BEButton>\n        </>\n    );\n\n    const signUpFormContent = (\n        <>\n            <SignUpForm onSignedIn={showSignInFormContent} />\n            <LineBreak />\n            <div className=\"u-marg-bottom--light\">\n                <Text type={TextType.Label} bold={true}>\n                    Already have an account?\n                </Text>\n            </div>\n            <Text type={TextType.Small}>\n                <BEButton isText={true} size={'small'} primary={true} onClick={showSignInFormContent}>\n                    Sign in\n                </BEButton>{' '}\n                to log in with your account.\n            </Text>\n        </>\n    );\n\n    const forgotPasswordContent = (\n        <>\n            <ForgotPasswordForm onCancelled={showSignInFormContent} />\n        </>\n    );\n\n    return (\n        <Overlay\n            usePortal={true}\n            followElement={shouldBreakpoint ? null : anchorEl}\n            placement=\"auto-end\"\n            container={containerEl}\n            open={open}\n            onClose={onClose}\n            strategy=\"fixed\"\n            className=\"c-login-overlay\"\n        >\n            <div className={'u-w-100 u-pad--heavy@m u-pad@m-'}>\n                <AutoAutoHeight open={true} startOpen={true}>\n                    {[\n                        [EViewingScreen.SignIn, signInFormContent],\n                        [EViewingScreen.SignUp, signUpFormContent],\n                        [EViewingScreen.ForgotPassword, forgotPasswordContent],\n                    ].map(([forScreen, content], index) => (\n                        <FadeAnimation open={viewingScreen === forScreen} onExitCompletely={onAnimationExit} key={index}>\n                            {content as React.ReactElement}\n                        </FadeAnimation>\n                    ))}\n                </AutoAutoHeight>\n            </div>\n        </Overlay>\n    );\n};\n"]}

package/dist/src/components/generic/modal/SimpleModal.d.ts

@@ -1,4 +1,3 @@
-import { ModalProps } from '@material-ui/core';
 import * as React from 'react';
 export declare enum SimpleModalSize {
     ExtraSmall = "--extra-small",
@@ -15,7 +14,7 @@ export interface SimpleModalProps {
     open?: boolean;
     alignCenter?: boolean;
     onClose?: () => void;
-    overrideContainer?: React.ReactInstance;
-    style?: ModalProps['style'];
+    modalTarget?: HTMLElement;
+    style?: any;
 }
 export default function SimpleModal(props: SimpleModalProps): JSX.Element;

package/dist/src/components/generic/modal/SimpleModal.js

@@ -1,19 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SimpleModalSize = void 0;
-const core_1 = require("@material-ui/core");
 const React = require("react");
-const Text_1 = require("../Text");
-const Color_1 = require("../../../util/Color");
-const Icon_1 = require("../Icon");
+const Text_1 = require("components/generic/Text");
+const Color_1 = require("util/Color");
+const Icon_1 = require("components/generic/Icon/Icon");
 const react_1 = require("react");
 const classNames = require("classnames");
-const ScreenSize_1 = require("../../../util/ScreenSize");
-const Fade_1 = require("../../../animations/Fade");
-const RoomstayThemeEngine_1 = require("../../../providers/RoomstayThemeEngine");
-const ScrollLock_1 = require("../../../hooks/ScrollLock");
-const ModalContext_1 = require("../../../contexts/ModalContext");
+const ScreenSize_1 = require("util/ScreenSize");
+const Fade_1 = require("animations/Fade");
 const contexts_1 = require("@frontend/contexts");
+const SimpleModal_module_scss_1 = require("./SimpleModal.module.scss");
+const Portal_1 = require("components/generic/Portal/Portal");
+const hooks_1 = require("@frontend/hooks");
 var SimpleModalSize;
 (function (SimpleModalSize) {
     SimpleModalSize["ExtraSmall"] = "--extra-small";
@@ -23,10 +22,23 @@ var SimpleModalSize;
 })(SimpleModalSize = exports.SimpleModalSize || (exports.SimpleModalSize = {}));
 function SimpleModal(props) {
     var _a;
-    const context = react_1.useContext(contexts_1.BookingEngineContext);
-    const modalContext = react_1.useContext(ModalContext_1.default);
-    const [modalId, setModalId] = React.useState(null);
-    react_1.useEffect(() => {
+    const context = (0, react_1.useContext)(contexts_1.BookingEngineContext);
+    const [modalId, setModalId] = (0, react_1.useState)(null);
+    const modalBody = (0, react_1.useRef)(null);
+    const overlayRef = (0, react_1.useRef)(null);
+    const { onBodyClickExcept } = (0, hooks_1.useBodyClick)();
+    (0, react_1.useEffect)(() => {
+        if (!(modalBody === null || modalBody === void 0 ? void 0 : modalBody.current)) {
+            return;
+        }
+        const { remove } = onBodyClickExcept(() => {
+            close();
+        }, modalBody.current, overlayRef.current);
+        return () => {
+            remove();
+        };
+    }, [props.open, modalBody, props.onClose]);
+    (0, react_1.useEffect)(() => {
         setModalId(Math.random());
     }, []);
     const close = () => {
@@ -34,49 +46,49 @@ function SimpleModal(props) {
             props.onClose();
         }
     };
-    const classes = classNames('simple-modal c-modal', {
-        [props.size]: !!props.size,
-        '--centered': props.alignCenter,
+    const classes = classNames(SimpleModal_module_scss_1.default['roomstay-modal'], {
+        [SimpleModal_module_scss_1.default[props.size]]: !!props.size,
+        [SimpleModal_module_scss_1.default['--centered']]: props.alignCenter,
     });
-    ScrollLock_1.default(props.open);
-    react_1.useLayoutEffect(() => {
-        modalContext === null || modalContext === void 0 ? void 0 : modalContext.addModalStatus(props.open, modalId);
-    }, [props.open]);
-    react_1.useLayoutEffect(() => {
-        const triptease = document.querySelector('iframe.tt-guestpa');
-        const hiWidget = document.querySelector('.hi-widget-container .hi-launcher-container');
-        if (modalContext === null || modalContext === void 0 ? void 0 : modalContext.isAnyModalOpen()) {
-            if (triptease) {
-                triptease.style.display = 'none';
-            }
-            if (hiWidget) {
-                hiWidget.classList.add('--moved');
-            }
-        }
-        else {
-            if (triptease) {
-                triptease.style.display = 'block';
-            }
-            if (hiWidget) {
-                hiWidget.classList.remove('--moved');
-            }
-        }
-    }, [modalContext === null || modalContext === void 0 ? void 0 : modalContext.modalStatus]);
-    return (React.createElement(core_1.Modal, { open: props.open, container: (_a = props.overrideContainer) !== null && _a !== void 0 ? _a : RoomstayThemeEngine_1.default.EngineContainer, onClose: close, style: props.style, disableScrollLock: true, "data-scroll-lock-scrollable": true },
-        React.createElement(Fade_1.default, { in: props.open },
-            React.createElement("div", { className: classes, style: props.title ? {} : { paddingTop: 0 } },
-                props.title ? (React.createElement("div", { className: "simple-modal--title" },
-                    React.createElement(Text_1.default, { color: Color_1.Color.White },
-                        React.createElement("strong", null, props.title)),
-                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.Close, color: Color_1.Color.White, size: "24px", onClick: close }))) : (React.createElement("div", { className: `room-gallery-slider__icon-lightbox${props.size === SimpleModalSize.ExtraSmall ? '' : '-map'}` },
-                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.Close, size: "24px", onClick: close }))),
-                React.createElement("div", { className: "simple-modal--content" },
-                    props.children,
-                    props.desktopFooter &&
-                        context.screenSize > ScreenSize_1.default.Medium && // TODO refactor this to be variable
-                        props.desktopFooter),
-                props.mobileFooter && context.screenSize <= ScreenSize_1.default.Medium && (React.createElement("div", { className: "simple-modal--footer" }, props.mobileFooter // TODO refactor this to be variable
-                ))))));
+    // useLayoutEffect(() => {
+    //     modalContext?.addModalStatus(props.open, modalId);
+    // }, [props.open]);
+    // useLayoutEffect(() => {
+    //     const triptease: HTMLElement = document.querySelector('iframe.tt-guestpa');
+    //     const hiWidget: HTMLElement = document.querySelector('.hi-widget-container .hi-launcher-container');
+    //     if (modalContext?.isAnyModalOpen()) {
+    //         if (triptease) {
+    //             triptease.style.display = 'none';
+    //         }
+    //         if (hiWidget) {
+    //             hiWidget.classList.add('--moved');
+    //         }
+    //     } else {
+    //         if (triptease) {
+    //             triptease.style.display = 'block';
+    //         }
+    //         if (hiWidget) {
+    //             hiWidget.classList.remove('--moved');
+    //         }
+    //     }
+    // }, [modalContext?.modalStatus]);
+    return props.open ? ( // TODO: Need an actual isVisible state value instead of relying on the prop since we can't animate out.
+    React.createElement(Portal_1.RoomstayPortal, { target: (_a = props.modalTarget) !== null && _a !== void 0 ? _a : document.body },
+        React.createElement("div", { className: SimpleModal_module_scss_1.default['roomstay-overlay'], ref: overlayRef },
+            React.createElement(Fade_1.default, { open: props.open },
+                React.createElement("div", { ref: modalBody, className: classes, style: props.title ? {} : { paddingTop: 0 } },
+                    props.title ? (React.createElement("div", { className: SimpleModal_module_scss_1.default['roomstay-modal--title'] },
+                        React.createElement(Text_1.default, { color: Color_1.Color.White },
+                            React.createElement("strong", null, props.title)),
+                        React.createElement(Icon_1.default, { icon: Icon_1.IconType.Close, color: Color_1.Color.White, size: "24px", onClick: close }))) : (React.createElement("div", { className: `room-gallery-slider__icon-lightbox${props.size === SimpleModalSize.ExtraSmall ? '' : '-map'}` },
+                        React.createElement(Icon_1.default, { icon: Icon_1.IconType.Close, size: "24px", onClick: close }))),
+                    React.createElement("div", { className: "simple-modal--content" },
+                        props.children,
+                        props.desktopFooter &&
+                            context.screenSize > ScreenSize_1.default.Medium && // TODO: refactor this to be variable
+                            props.desktopFooter),
+                    props.mobileFooter && context.screenSize <= ScreenSize_1.default.Medium && (React.createElement("div", { className: SimpleModal_module_scss_1.default['roomstay-modal--footer'] }, props.mobileFooter // TODO: refactor this to be variable
+                    ))))))) : (React.createElement(React.Fragment, null));
 }
 exports.default = SimpleModal;
 //# sourceMappingURL=SimpleModal.js.map

package/dist/src/components/generic/modal/SimpleModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleModal.js","sourceRoot":"/","sources":["src/components/generic/modal/SimpleModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Modal, ModalProps } from '@material-ui/core';\nimport * as React from 'react';\nimport Text from '../Text';\nimport { Color } from '../../../util/Color';\nimport Icon, { IconType } from '../Icon';\nimport { useContext, useEffect, useLayoutEffect } from 'react';\nimport * as classNames from 'classnames';\n\nimport ScreenSize from '../../../util/ScreenSize';\nimport FadeAnimation from '../../../animations/Fade';\nimport RoomstayThemeEngine from '../../../providers/RoomstayThemeEngine';\nimport useScrollLock from '../../../hooks/ScrollLock';\nimport ModalContext from '../../../contexts/ModalContext';\nimport { BookingEngineContext } from '@frontend/contexts';\n\nexport enum SimpleModalSize {\n    ExtraSmall = '--extra-small',\n    Small = '--small',\n    Normal = '--normal',\n    Large = '--large',\n}\n\nexport interface SimpleModalProps {\n    children: React.ReactElement;\n\n    mobileFooter?: React.ReactElement;\n    desktopFooter?: React.ReactElement;\n\n    title?: string;\n    size?: SimpleModalSize;\n\n    open?: boolean;\n    alignCenter?: boolean;\n\n    onClose?: () => void;\n\n    overrideContainer?: React.ReactInstance;\n    style?: ModalProps['style'];\n}\n\nexport default function SimpleModal(props: SimpleModalProps) {\n    const context = useContext(BookingEngineContext);\n    const modalContext = useContext(ModalContext);\n    const [modalId, setModalId] = React.useState<number | null>(null);\n\n    useEffect(() => {\n        setModalId(Math.random());\n    }, []);\n\n    const close = () => {\n        if (props.onClose) {\n            props.onClose();\n        }\n    };\n\n    const classes = classNames('simple-modal c-modal', {\n        [props.size]: !!props.size,\n        '--centered': props.alignCenter,\n    });\n\n    useScrollLock(props.open);\n\n    useLayoutEffect(() => {\n        modalContext?.addModalStatus(props.open, modalId);\n    }, [props.open]);\n\n    useLayoutEffect(() => {\n        const triptease: HTMLElement = document.querySelector('iframe.tt-guestpa');\n        const hiWidget: HTMLElement = document.querySelector('.hi-widget-container .hi-launcher-container');\n\n        if (modalContext?.isAnyModalOpen()) {\n            if (triptease) {\n                triptease.style.display = 'none';\n            }\n\n            if (hiWidget) {\n                hiWidget.classList.add('--moved');\n            }\n        } else {\n            if (triptease) {\n                triptease.style.display = 'block';\n            }\n\n            if (hiWidget) {\n                hiWidget.classList.remove('--moved');\n            }\n        }\n    }, [modalContext?.modalStatus]);\n\n    return (\n        <Modal\n            open={props.open}\n            container={props.overrideContainer ?? RoomstayThemeEngine.EngineContainer}\n            onClose={close}\n            style={props.style}\n            disableScrollLock={true}\n            data-scroll-lock-scrollable={true}\n        >\n            <FadeAnimation in={props.open}>\n                <div className={classes} style={props.title ? {} : { paddingTop: 0 }}>\n                    {props.title ? (\n                        <div className=\"simple-modal--title\">\n                            <Text color={Color.White}>\n                                <strong>{props.title}</strong>\n                            </Text>\n                            <Icon icon={IconType.Close} color={Color.White} size=\"24px\" onClick={close} />\n                        </div>\n                    ) : (\n                        <div className={`room-gallery-slider__icon-lightbox${props.size === SimpleModalSize.ExtraSmall ? '' : '-map'}`}>\n                            <Icon icon={IconType.Close} size=\"24px\" onClick={close} />\n                        </div>\n                    )}\n\n                    <div className=\"simple-modal--content\">\n                        {props.children}\n\n                        {props.desktopFooter &&\n                            context.screenSize > ScreenSize.Medium && // TODO refactor this to be variable\n                            props.desktopFooter}\n                    </div>\n\n                    {props.mobileFooter && context.screenSize <= ScreenSize.Medium && (\n                        <div className=\"simple-modal--footer\">\n                            {\n                                props.mobileFooter // TODO refactor this to be variable\n                            }\n                        </div>\n                    )}\n                </div>\n            </FadeAnimation>\n        </Modal>\n    );\n}\n"]}
+{"version":3,"file":"SimpleModal.js","sourceRoot":"/","sources":["src/components/generic/modal/SimpleModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Text from 'components/generic/Text';\nimport { Color } from 'util/Color';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\nimport { useContext, useEffect, useState, useRef } from 'react';\nimport * as classNames from 'classnames';\n\nimport ScreenSize from 'util/ScreenSize';\nimport FadeAnimation from 'animations/Fade';\n\nimport { BookingEngineContext } from '@frontend/contexts';\n\nimport styles from './SimpleModal.module.scss';\nimport { RoomstayPortal } from 'components/generic/Portal/Portal';\nimport { useBodyClick } from '@frontend/hooks';\n\nexport enum SimpleModalSize {\n    ExtraSmall = '--extra-small',\n    Small = '--small',\n    Normal = '--normal',\n    Large = '--large',\n}\n\nexport interface SimpleModalProps {\n    children: React.ReactElement;\n\n    mobileFooter?: React.ReactElement;\n    desktopFooter?: React.ReactElement;\n\n    title?: string;\n    size?: SimpleModalSize;\n\n    open?: boolean;\n    alignCenter?: boolean;\n\n    onClose?: () => void;\n\n    modalTarget?: HTMLElement;\n    style?: any;\n}\n\nexport default function SimpleModal(props: SimpleModalProps) {\n    const context = useContext(BookingEngineContext);\n\n    const [modalId, setModalId] = useState<number | null>(null);\n    const modalBody = useRef(null);\n    const overlayRef = useRef(null);\n\n    const { onBodyClickExcept } = useBodyClick();\n\n    useEffect(() => {\n        if (!modalBody?.current) {\n            return;\n        }\n\n        const { remove } = onBodyClickExcept(\n            () => {\n                close();\n            },\n            modalBody.current,\n            overlayRef.current\n        );\n\n        return () => {\n            remove();\n        };\n    }, [props.open, modalBody, props.onClose]);\n\n    useEffect(() => {\n        setModalId(Math.random());\n    }, []);\n\n    const close = () => {\n        if (props.onClose) {\n            props.onClose();\n        }\n    };\n\n    const classes = classNames(styles['roomstay-modal'], {\n        [(styles as any)[props.size]]: !!props.size,\n        [styles['--centered']]: props.alignCenter,\n    });\n\n    // useLayoutEffect(() => {\n    //     modalContext?.addModalStatus(props.open, modalId);\n    // }, [props.open]);\n\n    // useLayoutEffect(() => {\n    //     const triptease: HTMLElement = document.querySelector('iframe.tt-guestpa');\n    //     const hiWidget: HTMLElement = document.querySelector('.hi-widget-container .hi-launcher-container');\n\n    //     if (modalContext?.isAnyModalOpen()) {\n    //         if (triptease) {\n    //             triptease.style.display = 'none';\n    //         }\n\n    //         if (hiWidget) {\n    //             hiWidget.classList.add('--moved');\n    //         }\n    //     } else {\n    //         if (triptease) {\n    //             triptease.style.display = 'block';\n    //         }\n\n    //         if (hiWidget) {\n    //             hiWidget.classList.remove('--moved');\n    //         }\n    //     }\n    // }, [modalContext?.modalStatus]);\n\n    return props.open ? ( // TODO: Need an actual isVisible state value instead of relying on the prop since we can't animate out.\n        <RoomstayPortal target={props.modalTarget ?? document.body}>\n            <div className={styles['roomstay-overlay']} ref={overlayRef}>\n                <FadeAnimation open={props.open}>\n                    <div ref={modalBody} className={classes} style={props.title ? {} : { paddingTop: 0 }}>\n                        {props.title ? (\n                            <div className={styles['roomstay-modal--title']}>\n                                <Text color={Color.White}>\n                                    <strong>{props.title}</strong>\n                                </Text>\n                                <Icon icon={IconType.Close} color={Color.White} size=\"24px\" onClick={close} />\n                            </div>\n                        ) : (\n                            <div className={`room-gallery-slider__icon-lightbox${props.size === SimpleModalSize.ExtraSmall ? '' : '-map'}`}>\n                                <Icon icon={IconType.Close} size=\"24px\" onClick={close} />\n                            </div>\n                        )}\n\n                        <div className=\"simple-modal--content\">\n                            {props.children}\n\n                            {props.desktopFooter &&\n                                context.screenSize > ScreenSize.Medium && // TODO: refactor this to be variable\n                                props.desktopFooter}\n                        </div>\n\n                        {props.mobileFooter && context.screenSize <= ScreenSize.Medium && (\n                            <div className={styles['roomstay-modal--footer']}>\n                                {\n                                    props.mobileFooter // TODO: refactor this to be variable\n                                }\n                            </div>\n                        )}\n                    </div>\n                </FadeAnimation>\n            </div>\n        </RoomstayPortal>\n    ) : (\n        <></>\n    );\n}\n"]}

package/dist/src/components/generic/modal/TabbedModal.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const SimpleModal_1 = require("./SimpleModal");
 const React = require("react");
 const react_1 = require("react");
-const BEButton_1 = require("../BEButton");
+const BEButton_1 = require("components/generic/BEButton");
 function TabbedModal(props) {
     var _a;
-    const [openTab, setOpenTab] = react_1.useState((_a = props.openTab) !== null && _a !== void 0 ? _a : '');
-    react_1.useEffect(() => {
+    const [openTab, setOpenTab] = (0, react_1.useState)((_a = props.openTab) !== null && _a !== void 0 ? _a : '');
+    (0, react_1.useEffect)(() => {
         if (openTab) {
             setOpenTab(props.openTab);
         }

package/dist/src/components/generic/modal/TabbedModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabbedModal.js","sourceRoot":"/","sources":["src/components/generic/modal/TabbedModal.tsx"],"names":[],"mappings":";;AAAA,+CAA6D;AAC7D,+BAA+B;AAC/B,iCAA4C;AAC5C,0CAAmC;AAiBnC,SAAwB,WAAW,CAAC,KAAoB;;IACpD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,gBAAQ,OAAC,KAAK,CAAC,OAAO,mCAAI,EAAE,CAAC,CAAC;IAE5D,iBAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,EAAE;YACT,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAC7B;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAEpB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,OAAO,KAAK,CAAC,OAAO,EAAE,CAAC;IAC3B,CAAC,CAAC;IACF,OAAO,CACH,oBAAC,qBAAW,IACR,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,IAAI,EAAE,KAAK,CAAC,MAAM,EAClB,IAAI,EAAE,6BAAe,CAAC,KAAK,EAC3B,aAAa,EAAE,6BAAK,SAAS,EAAC,wBAAwB,IAAE,UAAU,CAAC,MAAM,CAAO,EAChF,YAAY,EAAE,UAAU,CAAC,MAAM,EAC/B,OAAO,EAAE,YAAY;QAErB,6BAAK,SAAS,EAAC,wBAAwB;YACnC,6BAAK,SAAS,EAAC,uBAAuB;gBAClC,6BAAK,SAAS,EAAC,6BAA6B,IACvC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;oBACjC,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;oBAChC,MAAM,cAAc,GAAG,GAAG,EAAE;wBACxB,UAAU,CAAC,GAAG,CAAC,CAAC;oBACpB,CAAC,CAAC;oBACF,OAAO,CACH,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,4BAA4B;wBACjD,oBAAC,kBAAQ,IAAC,MAAM,EAAE,UAAU,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,IACvF,OAAO,CAAC,KAAK,CACP,CACT,CACT,CAAC;gBACN,CAAC,CAAC,CACA;gBACN,6BAAK,SAAS,EAAC,sBAAsB,IAAE,UAAU,CAAC,OAAO,CAAO,CAC9D,CACJ,CACI,CACjB,CAAC;AACN,CAAC;AA5CD,8BA4CC","sourcesContent":["import SimpleModal, { SimpleModalSize } from './SimpleModal';\nimport * as React from 'react';\nimport { useState, useEffect } from 'react';\nimport BEButton from '../BEButton';\n\nexport interface TabbedModalTab {\n    title: string;\n    content: React.ReactElement | any;\n    footer: React.ReactElement | any;\n}\n\ninterface TabModalProps {\n    isOpen: boolean;\n\n    tabs: { [name: string]: TabbedModalTab };\n    onClose: () => void;\n\n    openTab?: string;\n}\n\nexport default function TabbedModal(props: TabModalProps) {\n    const [openTab, setOpenTab] = useState(props.openTab ?? '');\n\n    useEffect(() => {\n        if (openTab) {\n            setOpenTab(props.openTab);\n        }\n    }, [props.openTab]);\n\n    const currentTab = props.tabs[openTab];\n    const onModalClose = () => {\n        return props.onClose();\n    };\n    return (\n        <SimpleModal\n            title={currentTab.title}\n            open={props.isOpen}\n            size={SimpleModalSize.Small}\n            desktopFooter={<div className=\"u-marg-heavy u-marg@m-\">{currentTab.footer}</div>}\n            mobileFooter={currentTab.footer}\n            onClose={onModalClose}\n        >\n            <div className=\"u-marg-heavy u-marg@m-\">\n                <div className=\"roomstay-tabbed-modal\">\n                    <div className=\"roomstay-tabbed-modal--tabs\">\n                        {Object.keys(props.tabs).map((key) => {\n                            const thisTab = props.tabs[key];\n                            const openTabOnClick = () => {\n                                setOpenTab(key);\n                            };\n                            return (\n                                <div key={key} className=\"roomstay-tabbed-modal--tab\">\n                                    <BEButton filled={currentTab.title === thisTab.title} primary={true} onClick={openTabOnClick}>\n                                        {thisTab.title}\n                                    </BEButton>\n                                </div>\n                            );\n                        })}\n                    </div>\n                    <div className=\"roomstay-tab-content\">{currentTab.content}</div>\n                </div>\n            </div>\n        </SimpleModal>\n    );\n}\n"]}
+{"version":3,"file":"TabbedModal.js","sourceRoot":"/","sources":["src/components/generic/modal/TabbedModal.tsx"],"names":[],"mappings":";;AAAA,+CAA6D;AAC7D,+BAA+B;AAC/B,iCAA4C;AAC5C,0DAAmD;AAiBnD,SAAwB,WAAW,CAAC,KAAoB;;IACpD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,MAAA,KAAK,CAAC,OAAO,mCAAI,EAAE,CAAC,CAAC;IAE5D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,OAAO,EAAE;YACT,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;SAC7B;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAEpB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,OAAO,KAAK,CAAC,OAAO,EAAE,CAAC;IAC3B,CAAC,CAAC;IACF,OAAO,CACH,oBAAC,qBAAW,IACR,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,IAAI,EAAE,KAAK,CAAC,MAAM,EAClB,IAAI,EAAE,6BAAe,CAAC,KAAK,EAC3B,aAAa,EAAE,6BAAK,SAAS,EAAC,wBAAwB,IAAE,UAAU,CAAC,MAAM,CAAO,EAChF,YAAY,EAAE,UAAU,CAAC,MAAM,EAC/B,OAAO,EAAE,YAAY;QAErB,6BAAK,SAAS,EAAC,wBAAwB;YACnC,6BAAK,SAAS,EAAC,uBAAuB;gBAClC,6BAAK,SAAS,EAAC,6BAA6B,IACvC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;oBACjC,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;oBAChC,MAAM,cAAc,GAAG,GAAG,EAAE;wBACxB,UAAU,CAAC,GAAG,CAAC,CAAC;oBACpB,CAAC,CAAC;oBACF,OAAO,CACH,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,4BAA4B;wBACjD,oBAAC,kBAAQ,IAAC,MAAM,EAAE,UAAU,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,IACvF,OAAO,CAAC,KAAK,CACP,CACT,CACT,CAAC;gBACN,CAAC,CAAC,CACA;gBACN,6BAAK,SAAS,EAAC,sBAAsB,IAAE,UAAU,CAAC,OAAO,CAAO,CAC9D,CACJ,CACI,CACjB,CAAC;AACN,CAAC;AA5CD,8BA4CC","sourcesContent":["import SimpleModal, { SimpleModalSize } from './SimpleModal';\nimport * as React from 'react';\nimport { useState, useEffect } from 'react';\nimport BEButton from 'components/generic/BEButton';\n\nexport interface TabbedModalTab {\n    title: string;\n    content: React.ReactElement | any;\n    footer: React.ReactElement | any;\n}\n\ninterface TabModalProps {\n    isOpen: boolean;\n\n    tabs: { [name: string]: TabbedModalTab };\n    onClose: () => void;\n\n    openTab?: string;\n}\n\nexport default function TabbedModal(props: TabModalProps) {\n    const [openTab, setOpenTab] = useState(props.openTab ?? '');\n\n    useEffect(() => {\n        if (openTab) {\n            setOpenTab(props.openTab);\n        }\n    }, [props.openTab]);\n\n    const currentTab = props.tabs[openTab];\n    const onModalClose = () => {\n        return props.onClose();\n    };\n    return (\n        <SimpleModal\n            title={currentTab.title}\n            open={props.isOpen}\n            size={SimpleModalSize.Small}\n            desktopFooter={<div className=\"u-marg-heavy u-marg@m-\">{currentTab.footer}</div>}\n            mobileFooter={currentTab.footer}\n            onClose={onModalClose}\n        >\n            <div className=\"u-marg-heavy u-marg@m-\">\n                <div className=\"roomstay-tabbed-modal\">\n                    <div className=\"roomstay-tabbed-modal--tabs\">\n                        {Object.keys(props.tabs).map((key) => {\n                            const thisTab = props.tabs[key];\n                            const openTabOnClick = () => {\n                                setOpenTab(key);\n                            };\n                            return (\n                                <div key={key} className=\"roomstay-tabbed-modal--tab\">\n                                    <BEButton filled={currentTab.title === thisTab.title} primary={true} onClick={openTabOnClick}>\n                                        {thisTab.title}\n                                    </BEButton>\n                                </div>\n                            );\n                        })}\n                    </div>\n                    <div className=\"roomstay-tab-content\">{currentTab.content}</div>\n                </div>\n            </div>\n        </SimpleModal>\n    );\n}\n"]}

package/dist/src/components/generic/radio/RadioFields.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
-const Icon_1 = require("../Icon");
-const Text_1 = require("../Text");
+const Icon_1 = require("components/generic/Icon/Icon");
+const Text_1 = require("components/generic/Text");
 const bind_1 = require("classnames/bind");
 const styles = require("./RadioFields.module.scss");
 const cx = bind_1.default.bind(styles);

package/dist/src/components/generic/radio/RadioFields.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioFields.js","sourceRoot":"/","sources":["src/components/generic/radio/RadioFields.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,kCAAyC;AACzC,kCAAyC;AAEzC,0CAAyC;AAEzC,oDAAoD;AACpD,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,MAAa,CAAC,CAAC;AAkB1C,SAAwB,WAAW,CAAC,KAAuB;IACvD,MAAM,OAAO,GAAG,EAAE,CAAC;QACf,aAAa,EAAE,IAAI;KACtB,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,EAAE,CAAC;QAClB,YAAY,EAAE,IAAI;QAClB,sBAAsB,EAAE,IAAI;KAC/B,CAAC,CAAC;IAEH,OAAO,CACH,6BAAK,SAAS,EAAE,OAAO;QAClB,KAAK,CAAC,KAAK,IAAI,CACZ,6BAAK,SAAS,EAAC,0BAA0B;YACrC,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,IACjC,KAAK,CAAC,KAAK,CACT,CACL,CACT;QACA,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACjC,MAAM,gBAAgB,GAAG,GAAG,EAAE;gBAC1B,IAAI,KAAK,CAAC,QAAQ,EAAE;oBAChB,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;iBAC1B;YACL,CAAC,CAAC;YAEF,OAAO,CACH,+BAAO,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK;gBACpC,+BAAO,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,gBAAgB,GAAI;gBACzF,8BAAM,SAAS,EAAC,YAAY;oBACxB,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,GAAI,CAC3B;gBACP,oBAAC,cAAI,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,IACnC,MAAM,CAAC,KAAK,CACV,CACH,CACX,CAAC;QACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC;AAxCD,8BAwCC","sourcesContent":["import * as React from 'react';\nimport Icon, { IconType } from '../Icon';\nimport Text, { TextType } from '../Text';\n\nimport classNames from 'classnames/bind';\n\nimport * as styles from './RadioFields.module.scss';\nconst cx = classNames.bind(styles as any);\n\ninterface RadioFieldOption {\n    label: string;\n    value: string;\n    selected?: boolean;\n}\n\ninterface RadioFieldsProps {\n    label: string;\n\n    name: string;\n\n    options: RadioFieldOption[];\n\n    onChange: (selectedOption: RadioFieldOption) => void;\n}\n\nexport default function RadioFields(props: RadioFieldsProps) {\n    const classes = cx({\n        'radio-group': true,\n    });\n\n    const rowClasses = cx({\n        'radio-item': true,\n        'u-marg-bottom--light': true,\n    });\n\n    return (\n        <div className={classes}>\n            {props.label && (\n                <div className=\"u-marg-bottom u-marg-top\">\n                    <Text type={TextType.Small} bold={true}>\n                        {props.label}\n                    </Text>\n                </div>\n            )}\n            {props.options.map((option, index) => {\n                const onChangeCallback = () => {\n                    if (props.onChange) {\n                        props.onChange(option);\n                    }\n                };\n\n                return (\n                    <label className={rowClasses} key={index}>\n                        <input name={props.name} type=\"radio\" value={option.value} onChange={onChangeCallback} />\n                        <span className=\"fake-radio\">\n                            <Icon icon={IconType.Check} />\n                        </span>\n                        <Text inline={true} type={TextType.Small}>\n                            {option.label}\n                        </Text>\n                    </label>\n                );\n            })}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"RadioFields.js","sourceRoot":"/","sources":["src/components/generic/radio/RadioFields.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,uDAA8D;AAC9D,kDAAyD;AAEzD,0CAAyC;AAEzC,oDAAoD;AACpD,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,MAAa,CAAC,CAAC;AAkB1C,SAAwB,WAAW,CAAC,KAAuB;IACvD,MAAM,OAAO,GAAG,EAAE,CAAC;QACf,aAAa,EAAE,IAAI;KACtB,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,EAAE,CAAC;QAClB,YAAY,EAAE,IAAI;QAClB,sBAAsB,EAAE,IAAI;KAC/B,CAAC,CAAC;IAEH,OAAO,CACH,6BAAK,SAAS,EAAE,OAAO;QAClB,KAAK,CAAC,KAAK,IAAI,CACZ,6BAAK,SAAS,EAAC,0BAA0B;YACrC,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,IACjC,KAAK,CAAC,KAAK,CACT,CACL,CACT;QACA,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACjC,MAAM,gBAAgB,GAAG,GAAG,EAAE;gBAC1B,IAAI,KAAK,CAAC,QAAQ,EAAE;oBAChB,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;iBAC1B;YACL,CAAC,CAAC;YAEF,OAAO,CACH,+BAAO,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK;gBACpC,+BAAO,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,gBAAgB,GAAI;gBACzF,8BAAM,SAAS,EAAC,YAAY;oBACxB,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,GAAI,CAC3B;gBACP,oBAAC,cAAI,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK,IACnC,MAAM,CAAC,KAAK,CACV,CACH,CACX,CAAC;QACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC;AAxCD,8BAwCC","sourcesContent":["import * as React from 'react';\nimport Icon, { IconType } from 'components/generic/Icon/Icon';\nimport Text, { TextType } from 'components/generic/Text';\n\nimport classNames from 'classnames/bind';\n\nimport * as styles from './RadioFields.module.scss';\nconst cx = classNames.bind(styles as any);\n\ninterface RadioFieldOption {\n    label: string;\n    value: string;\n    selected?: boolean;\n}\n\ninterface RadioFieldsProps {\n    label: string;\n\n    name: string;\n\n    options: RadioFieldOption[];\n\n    onChange: (selectedOption: RadioFieldOption) => void;\n}\n\nexport default function RadioFields(props: RadioFieldsProps) {\n    const classes = cx({\n        'radio-group': true,\n    });\n\n    const rowClasses = cx({\n        'radio-item': true,\n        'u-marg-bottom--light': true,\n    });\n\n    return (\n        <div className={classes}>\n            {props.label && (\n                <div className=\"u-marg-bottom u-marg-top\">\n                    <Text type={TextType.Small} bold={true}>\n                        {props.label}\n                    </Text>\n                </div>\n            )}\n            {props.options.map((option, index) => {\n                const onChangeCallback = () => {\n                    if (props.onChange) {\n                        props.onChange(option);\n                    }\n                };\n\n                return (\n                    <label className={rowClasses} key={index}>\n                        <input name={props.name} type=\"radio\" value={option.value} onChange={onChangeCallback} />\n                        <span className=\"fake-radio\">\n                            <Icon icon={IconType.Check} />\n                        </span>\n                        <Text inline={true} type={TextType.Small}>\n                            {option.label}\n                        </Text>\n                    </label>\n                );\n            })}\n        </div>\n    );\n}\n"]}

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

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

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

@@ -0,0 +1,103 @@
+"use strict";
+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());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const CountryCodesAndNumbers_1 = require("models/CountryCodesAndNumbers");
+const EnhancedPhoneNumberField_1 = require("components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField");
+const ForwardedSelect_1 = require("components/generic/ForwardedSelect");
+const LargeLoader_1 = require("components/generic/loader/LargeLoader");
+const TextBox_1 = require("components/generic/TextBox");
+const contexts_1 = require("@frontend/contexts");
+const InputGroup_1 = require("components/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 { handleSubmit, register, reset, control, formState, setError } = (0, react_hook_form_1.useForm)({
+        defaultValues: (0, react_1.useMemo)(() => roomstayMember, [roomstayMember]),
+    });
+    (0, react_1.useEffect)(() => {
+        reset(roomstayMember);
+    }, [roomstayMember, reset]);
+    const onSubmit = (data) => __awaiter(void 0, void 0, void 0, function* () {
+        if ((data === null || data === void 0 ? void 0 : data.currentPassword) || (data === null || data === void 0 ? void 0 : data.newPassword) || (data === null || data === void 0 ? void 0 : data.confirmPassword)) {
+            if (data.newPassword !== data.confirmPassword) {
+                setError('confirmPassword', { message: "Passwords don't match" });
+                return;
+            }
+        }
+        yield updateMemberDetails(data);
+        reset(Object.assign(Object.assign({}, roomstayMember), { currentPassword: '', newPassword: '', confirmPassword: '' }));
+    });
+    const countriesOptions = (0, react_1.useMemo)(() => {
+        const countries = CountryCodesAndNumbers_1.ListOfCountriesAndCodes.map(({ label }) => ({ label, value: label }));
+        countries.unshift({ label: '', value: '' });
+        return countries;
+    }, []);
+    const getValidationClass = (field) => {
+        if (formState.errors && formState.touchedFields[field]) {
+            if (formState.errors[field]) {
+                return 'error';
+            }
+            else {
+                return 'success';
+            }
+        }
+        else {
+            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: {
+                            maxLength: {
+                                value: 17,
+                                message: 'Phone number is too long',
+                            },
+                            pattern: {
+                                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', {
+                    pattern: {
+                        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', {
+                    pattern: {
+                        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))));
+};
+exports.default = EditMyProfile;
+//# sourceMappingURL=EditMyProfile.js.map

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

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