@roomstay/frontend 1.3.0

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const SimpleModal_1 = require("./SimpleModal");
+const BEButton_1 = require("../BEButton");
+const Text_1 = require("../Text");
+function ConfirmationModal(props) {
+    const cancelOnClickHandler = () => {
+        if (props.onClose) {
+            props.onClose();
+        }
+    };
+    const onConfirmationClick = () => {
+        if (props.onConfirm) {
+            props.onConfirm();
+        }
+    };
+    const footer = (React.createElement("div", { className: "u-flex" },
+        React.createElement(BEButton_1.default, { isText: true, onClick: cancelOnClickHandler }, "Cancel"),
+        React.createElement(BEButton_1.default, { filled: true, primary: true, onClick: onConfirmationClick }, "Yes")));
+    return (React.createElement(SimpleModal_1.default, { open: props.open, alignCenter: true, desktopFooter: React.createElement("div", { className: "u-marg-heavy u-marg@m-" }, footer), mobileFooter: footer, size: SimpleModal_1.SimpleModalSize.Small, title: "Confirm" },
+        React.createElement("div", { className: "u-marg-heavy u-marg@m-" },
+            React.createElement("div", { className: "u-marg-bottom" },
+                React.createElement(Text_1.default, null, props.message)))));
+}
+exports.default = ConfirmationModal;
+//# sourceMappingURL=ConfirmationModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationModal.js","sourceRoot":"/","sources":["src/components/generic/modal/ConfirmationModal.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,+CAA6D;AAC7D,0CAAmC;AACnC,kCAA2B;AAU3B,SAAwB,iBAAiB,CAAC,KAA6B;IACnE,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAC9B,IAAI,KAAK,CAAC,OAAO,EAAE;YACf,KAAK,CAAC,OAAO,EAAE,CAAC;SACnB;IACL,CAAC,CAAC;IACF,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC7B,IAAI,KAAK,CAAC,SAAS,EAAE;YACjB,KAAK,CAAC,SAAS,EAAE,CAAC;SACrB;IACL,CAAC,CAAC;IACF,MAAM,MAAM,GAAG,CACX,6BAAK,SAAS,EAAC,QAAQ;QACnB,oBAAC,kBAAQ,IAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,oBAAoB,aAE1C;QACX,oBAAC,kBAAQ,IAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,mBAAmB,UAExD,CACT,CACT,CAAC;IAEF,OAAO,CACH,oBAAC,qBAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,6BAAK,SAAS,EAAC,wBAAwB,IAAE,MAAM,CAAO,EACrE,YAAY,EAAE,MAAM,EACpB,IAAI,EAAE,6BAAe,CAAC,KAAK,EAC3B,KAAK,EAAC,SAAS;QAEf,6BAAK,SAAS,EAAC,wBAAwB;YACnC,6BAAK,SAAS,EAAC,eAAe;gBAC1B,oBAAC,cAAI,QAAE,KAAK,CAAC,OAAO,CAAQ,CAC1B,CACJ,CACI,CACjB,CAAC;AACN,CAAC;AAtCD,oCAsCC","sourcesContent":["import * as React from 'react';\nimport SimpleModal, { SimpleModalSize } from './SimpleModal';\nimport BEButton from '../BEButton';\nimport Text from '../Text';\n\ninterface ConfirmationModalProps {\n    open: boolean;\n    onClose?: () => void;\n    onConfirm: () => void;\n\n    message: string;\n}\n\nexport default function ConfirmationModal(props: ConfirmationModalProps) {\n    const cancelOnClickHandler = () => {\n        if (props.onClose) {\n            props.onClose();\n        }\n    };\n    const onConfirmationClick = () => {\n        if (props.onConfirm) {\n            props.onConfirm();\n        }\n    };\n    const footer = (\n        <div className=\"u-flex\">\n            <BEButton isText={true} onClick={cancelOnClickHandler}>\n                Cancel\n            </BEButton>\n            <BEButton filled={true} primary={true} onClick={onConfirmationClick}>\n                Yes\n            </BEButton>\n        </div>\n    );\n\n    return (\n        <SimpleModal\n            open={props.open}\n            alignCenter={true}\n            desktopFooter={<div className=\"u-marg-heavy u-marg@m-\">{footer}</div>}\n            mobileFooter={footer}\n            size={SimpleModalSize.Small}\n            title=\"Confirm\"\n        >\n            <div className=\"u-marg-heavy u-marg@m-\">\n                <div className=\"u-marg-bottom\">\n                    <Text>{props.message}</Text>\n                </div>\n            </div>\n        </SimpleModal>\n    );\n}\n"]}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface ErrorModalProps {
+    open: boolean;
+    onClose: () => void;
+    children: React.ReactElement;
+    title?: string;
+    closeButtonText?: string;
+}
+export default function ErrorModal(props: ErrorModalProps): JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const SimpleModal_1 = require("./SimpleModal");
+const BEButton_1 = require("../BEButton");
+const Icon_1 = require("../Icon");
+function ErrorModal(props) {
+    var _a;
+    return (React.createElement(SimpleModal_1.default, { open: props.open, onClose: props.onClose, size: SimpleModal_1.SimpleModalSize.Small, title: (_a = props.title) !== null && _a !== void 0 ? _a : 'Unexpected error occured', alignCenter: true },
+        React.createElement("div", { className: "u-marg-heavy u-marg@m-" },
+            React.createElement("div", { className: "u-marg-bottom" }, props.children),
+            React.createElement(BEButton_1.default, { icon: Icon_1.IconType.Close, primary: true, filled: true, stopIconAnimation: true, onClick: props.onClose }, props.closeButtonText || 'Close'))));
+}
+exports.default = ErrorModal;
+//# sourceMappingURL=ErrorModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorModal.js","sourceRoot":"/","sources":["src/components/generic/modal/ErrorModal.tsx"],"names":[],"mappings":";;AAAA,+BAA+B;AAC/B,+CAA6D;AAC7D,0CAAmC;AACnC,kCAAmC;AAUnC,SAAwB,UAAU,CAAC,KAAsB;;IACrD,OAAO,CACH,oBAAC,qBAAW,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,6BAAe,CAAC,KAAK,EAAE,KAAK,QAAE,KAAK,CAAC,KAAK,mCAAI,0BAA0B,EAAE,WAAW,EAAE,IAAI;QACnJ,6BAAK,SAAS,EAAC,wBAAwB;YACnC,6BAAK,SAAS,EAAC,eAAe,IAAE,KAAK,CAAC,QAAQ,CAAO;YACrD,oBAAC,kBAAQ,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IACvG,KAAK,CAAC,eAAe,IAAI,OAAO,CAC1B,CACT,CACI,CACjB,CAAC;AACN,CAAC;AAXD,6BAWC","sourcesContent":["import * as React from 'react';\nimport SimpleModal, { SimpleModalSize } from './SimpleModal';\nimport BEButton from '../BEButton';\nimport { IconType } from '../Icon';\n\ninterface ErrorModalProps {\n    open: boolean;\n    onClose: () => void;\n    children: React.ReactElement;\n    title?: string;\n    closeButtonText?: string;\n}\n\nexport default function ErrorModal(props: ErrorModalProps) {\n    return (\n        <SimpleModal open={props.open} onClose={props.onClose} size={SimpleModalSize.Small} title={props.title ?? 'Unexpected error occured'} alignCenter={true}>\n            <div className=\"u-marg-heavy u-marg@m-\">\n                <div className=\"u-marg-bottom\">{props.children}</div>\n                <BEButton icon={IconType.Close} primary={true} filled={true} stopIconAnimation={true} onClick={props.onClose}>\n                    {props.closeButtonText || 'Close'}\n                </BEButton>\n            </div>\n        </SimpleModal>\n    );\n}\n"]}

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

@@ -0,0 +1,21 @@
+import { ModalProps } from '@material-ui/core';
+import * as React from 'react';
+export declare enum SimpleModalSize {
+    ExtraSmall = "--extra-small",
+    Small = "--small",
+    Normal = "--normal",
+    Large = "--large"
+}
+export interface SimpleModalProps {
+    children: React.ReactElement;
+    mobileFooter?: React.ReactElement;
+    desktopFooter?: React.ReactElement;
+    title?: string;
+    size?: SimpleModalSize;
+    open?: boolean;
+    alignCenter?: boolean;
+    onClose?: () => void;
+    overrideContainer?: React.ReactInstance;
+    style?: ModalProps['style'];
+}
+export default function SimpleModal(props: SimpleModalProps): JSX.Element;

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

@@ -0,0 +1,82 @@
+"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 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 contexts_1 = require("@frontend/contexts");
+var SimpleModalSize;
+(function (SimpleModalSize) {
+    SimpleModalSize["ExtraSmall"] = "--extra-small";
+    SimpleModalSize["Small"] = "--small";
+    SimpleModalSize["Normal"] = "--normal";
+    SimpleModalSize["Large"] = "--large";
+})(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(() => {
+        setModalId(Math.random());
+    }, []);
+    const close = () => {
+        if (props.onClose) {
+            props.onClose();
+        }
+    };
+    const classes = classNames('simple-modal c-modal', {
+        [props.size]: !!props.size,
+        '--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
+                ))))));
+}
+exports.default = SimpleModal;
+//# sourceMappingURL=SimpleModal.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface TabbedModalTab {
+    title: string;
+    content: React.ReactElement | any;
+    footer: React.ReactElement | any;
+}
+interface TabModalProps {
+    isOpen: boolean;
+    tabs: {
+        [name: string]: TabbedModalTab;
+    };
+    onClose: () => void;
+    openTab?: string;
+}
+export default function TabbedModal(props: TabModalProps): JSX.Element;
+export {};

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

@@ -0,0 +1,33 @@
+"use strict";
+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");
+function TabbedModal(props) {
+    var _a;
+    const [openTab, setOpenTab] = react_1.useState((_a = props.openTab) !== null && _a !== void 0 ? _a : '');
+    react_1.useEffect(() => {
+        if (openTab) {
+            setOpenTab(props.openTab);
+        }
+    }, [props.openTab]);
+    const currentTab = props.tabs[openTab];
+    const onModalClose = () => {
+        return props.onClose();
+    };
+    return (React.createElement(SimpleModal_1.default, { title: currentTab.title, open: props.isOpen, size: SimpleModal_1.SimpleModalSize.Small, desktopFooter: React.createElement("div", { className: "u-marg-heavy u-marg@m-" }, currentTab.footer), mobileFooter: currentTab.footer, onClose: onModalClose },
+        React.createElement("div", { className: "u-marg-heavy u-marg@m-" },
+            React.createElement("div", { className: "roomstay-tabbed-modal" },
+                React.createElement("div", { className: "roomstay-tabbed-modal--tabs" }, Object.keys(props.tabs).map((key) => {
+                    const thisTab = props.tabs[key];
+                    const openTabOnClick = () => {
+                        setOpenTab(key);
+                    };
+                    return (React.createElement("div", { key: key, className: "roomstay-tabbed-modal--tab" },
+                        React.createElement(BEButton_1.default, { filled: currentTab.title === thisTab.title, primary: true, onClick: openTabOnClick }, thisTab.title)));
+                })),
+                React.createElement("div", { className: "roomstay-tab-content" }, currentTab.content)))));
+}
+exports.default = TabbedModal;
+//# sourceMappingURL=TabbedModal.js.map

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

@@ -0,0 +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"]}

package/dist/src/components/generic/radio/RadioFields.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+interface RadioFieldOption {
+    label: string;
+    value: string;
+    selected?: boolean;
+}
+interface RadioFieldsProps {
+    label: string;
+    name: string;
+    options: RadioFieldOption[];
+    onChange: (selectedOption: RadioFieldOption) => void;
+}
+export default function RadioFields(props: RadioFieldsProps): JSX.Element;
+export {};

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const Icon_1 = require("../Icon");
+const Text_1 = require("../Text");
+const bind_1 = require("classnames/bind");
+const styles = require("./RadioFields.module.scss");
+const cx = bind_1.default.bind(styles);
+function RadioFields(props) {
+    const classes = cx({
+        'radio-group': true,
+    });
+    const rowClasses = cx({
+        'radio-item': true,
+        'u-marg-bottom--light': true,
+    });
+    return (React.createElement("div", { className: classes },
+        props.label && (React.createElement("div", { className: "u-marg-bottom u-marg-top" },
+            React.createElement(Text_1.default, { type: Text_1.TextType.Small, bold: true }, props.label))),
+        props.options.map((option, index) => {
+            const onChangeCallback = () => {
+                if (props.onChange) {
+                    props.onChange(option);
+                }
+            };
+            return (React.createElement("label", { className: rowClasses, key: index },
+                React.createElement("input", { name: props.name, type: "radio", value: option.value, onChange: onChangeCallback }),
+                React.createElement("span", { className: "fake-radio" },
+                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.Check })),
+                React.createElement(Text_1.default, { inline: true, type: Text_1.TextType.Small }, option.label)));
+        })));
+}
+exports.default = RadioFields;
+//# sourceMappingURL=RadioFields.js.map

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

@@ -0,0 +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"]}

package/dist/src/components/iconComponents/BookNowPayLaterIcon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface Props {
+    width?: number;
+    height?: number;
+}
+declare const BookNowPayLaterIcon: (props: Props) => JSX.Element;
+export default BookNowPayLaterIcon;

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

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

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

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

package/dist/src/components/navigation/Header.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Header(): JSX.Element;

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

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const Icon_1 = require("../generic/Icon");
+const Color_1 = require("../../util/Color");
+const react_router_dom_1 = require("react-router-dom");
+const Text_1 = require("../generic/Text");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../translations/Translation");
+const BESelect_1 = require("../generic/BESelect");
+const LanguageProvider_1 = require("../../providers/LanguageProvider");
+const CurrencyProvider_1 = require("../../providers/CurrencyProvider");
+const react_1 = require("react");
+const core_1 = require("@material-ui/core");
+const Fade_1 = require("../../animations/Fade");
+const RoomstayThemeEngine_1 = require("../../providers/RoomstayThemeEngine");
+const DataLayer_1 = require("../../util/DataLayer");
+const hooks_1 = require("@frontend/hooks");
+const contexts_1 = require("@frontend/contexts");
+const contexts_2 = require("@frontend/contexts");
+const StepHotel_1 = require("../../pages/steps/StepHotel/StepHotel");
+function Header() {
+    const { hotel } = hooks_1.useCurrentHotel();
+    const ccx = react_1.useContext(contexts_1.CompanyContext);
+    const { currentStep } = react_1.useContext(contexts_2.FullPageEngineContext);
+    const [hotelLogo, setHotelLogo] = react_1.useState('');
+    const [showHotelLinks, setShowHotelLinks] = react_1.useState(true);
+    const [mobileMenuOpen, setMobileMenuOpen] = react_1.useState(false);
+    const { t } = react_i18next_1.useTranslation();
+    const availableLanguages = LanguageProvider_1.LanguageProvider.getLanguages();
+    const langKeys = Object.keys(availableLanguages);
+    const onLanguageChangeHandler = (selected) => {
+        ccx.setCurrentLanguage(selected);
+        LanguageProvider_1.LanguageProvider.changeLanguage(selected);
+    };
+    const onCurrencyChangeHandler = (selected) => {
+        ccx.setCurrentCurrency(selected);
+        DataLayer_1.default.instance.setCurrencyCodes(selected);
+    };
+    const closeMobileMenuClickHandler = () => {
+        setMobileMenuOpen(false);
+    };
+    const openMobileMenuClickHandler = () => {
+        setMobileMenuOpen(true);
+    };
+    react_1.useEffect(() => {
+        let cancelled = false;
+        const loadImage = (src) => {
+            const image = new Image();
+            image.onload = () => {
+                if (!cancelled) {
+                    setHotelLogo(src);
+                }
+            };
+            image.src = src;
+        };
+        // Check the Logo per step
+        if (hotel && !(currentStep === StepHotel_1.default)) {
+            if (typeof (hotel === null || hotel === void 0 ? void 0 : hotel.logo) === 'string') {
+                loadImage(hotel === null || hotel === void 0 ? void 0 : hotel.logo);
+            }
+        }
+        else {
+            loadImage(ccx.logo);
+        }
+        // Check wether we should display the hotel related links or not
+        setShowHotelLinks(currentStep !== StepHotel_1.default && !!hotel);
+        return () => {
+            cancelled = true;
+        };
+    }, [hotel, hotel === null || hotel === void 0 ? void 0 : hotel.logo, ccx.logo, currentStep]);
+    const hotelImageElement = hotelLogo ? React.createElement("img", { src: hotelLogo, alt: "Hotel Logo", className: "u-block" }) : hotel === null || hotel === void 0 ? void 0 : hotel.logo;
+    const links = (React.createElement("ul", { className: "c-header__list" },
+        React.createElement("li", null,
+            React.createElement(react_router_dom_1.NavLink, { to: "/hotel-info/", activeClassName: "is-active", onClick: closeMobileMenuClickHandler },
+                React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.White },
+                    React.createElement("strong", null, t(Translation_1.Translation.Navigation.HotelInfo))))),
+        React.createElement("li", null, (hotel === null || hotel === void 0 ? void 0 : hotel.forwardFindReservationToSynxis) ? (React.createElement("a", { href: `https://be.synxis.com/signin?hotel=${hotel === null || hotel === void 0 ? void 0 : hotel.hotelID}`, target: "_blank" },
+            React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.White, bold: true }, t(Translation_1.Translation.Navigation.FindReservation)))) : (React.createElement(react_router_dom_1.NavLink, { to: "/find-reservation", activeClassName: "is-active", onClick: closeMobileMenuClickHandler },
+            React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.White, bold: true }, t(Translation_1.Translation.Navigation.FindReservation))))),
+        React.createElement("li", { className: "phone" },
+            React.createElement("a", { href: `tel:${hotel === null || hotel === void 0 ? void 0 : hotel.phone}`, onClick: closeMobileMenuClickHandler },
+                React.createElement(Text_1.default, { type: Text_1.TextType.Small, transforms: [Text_1.TextTransform.Uppercase], color: Color_1.Color.White },
+                    React.createElement(Icon_1.default, { icon: Icon_1.IconType.Phone, size: "16px", color: Color_1.Color.White }),
+                    React.createElement("strong", { className: "u-marg-left--light" }, hotel === null || hotel === void 0 ? void 0 : hotel.phone))))));
+    const configs = (React.createElement(React.Fragment, null,
+        React.createElement("ul", { className: "c-header__list" },
+            langKeys.length > 1 && (React.createElement("li", null,
+                React.createElement(BESelect_1.default, { onChange: onLanguageChangeHandler, selectedValue: ccx.currentLanguage, items: langKeys.map((lang) => {
+                        return {
+                            value: lang,
+                            text: LanguageProvider_1.LanguageProvider.getPrettyLanguageName(lang),
+                        };
+                    }) }))),
+            React.createElement("li", null,
+                React.createElement(BESelect_1.default, { onChange: onCurrencyChangeHandler, selectedValue: ccx.currentCurrency, items: CurrencyProvider_1.default.getCurrencyItems() })))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "c-header" },
+            React.createElement("div", { className: "container" },
+                React.createElement("div", { className: "u-flex" },
+                    React.createElement("div", { className: "u-flex u-flex-flex-start u-flex__item" },
+                        React.createElement("div", { className: "c-header__logo" },
+                            React.createElement("a", { href: showHotelLinks ? hotel === null || hotel === void 0 ? void 0 : hotel.hotelUrl : ccx === null || ccx === void 0 ? void 0 : ccx.logoLink, onClick: closeMobileMenuClickHandler }, hotelImageElement)),
+                        !!showHotelLinks && links),
+                    React.createElement("div", { className: "u-flex mx-100" },
+                        configs,
+                        React.createElement("div", { className: "c-header__mobile-menu" },
+                            React.createElement("span", { className: "u-white u-pad-left" },
+                                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Menu, size: "26px", color: Color_1.Color.White, onClick: openMobileMenuClickHandler }))))))),
+        React.createElement(core_1.Modal, { open: mobileMenuOpen, container: RoomstayThemeEngine_1.default.EngineContainer },
+            React.createElement(Fade_1.default, { in: mobileMenuOpen },
+                React.createElement("div", { className: "mobile-header-menu" },
+                    React.createElement("div", { className: "mobile-header-menu--replica u-flex" },
+                        React.createElement("div", { className: "c-header__logo" },
+                            React.createElement(react_router_dom_1.Link, { to: "/", onClick: closeMobileMenuClickHandler }, hotelImageElement)),
+                        React.createElement("div", { className: "c-header__mobile-menu" },
+                            React.createElement("span", { className: "u-white u-pad-left" },
+                                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Close, size: "26px", color: Color_1.Color.White, onClick: closeMobileMenuClickHandler })))),
+                    React.createElement("div", { className: "mobile-header-menu--content" },
+                        !!hotel && links,
+                        configs))))));
+}
+exports.default = Header;
+//# sourceMappingURL=Header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"/","sources":["src/components/navigation/Header.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Icon, { IconType } from '../generic/Icon';\nimport { Color } from '../../util/Color';\nimport { Link, NavLink } from 'react-router-dom';\nimport Text, { TextType, TextTransform } from '../generic/Text';\n\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from '../../translations/Translation';\nimport BESelect from '../generic/BESelect';\nimport { LanguageProvider, Language } from '../../providers/LanguageProvider';\nimport CurrencyProvider from '../../providers/CurrencyProvider';\nimport { useState, useContext, useEffect } from 'react';\nimport { Modal } from '@material-ui/core';\nimport FadeAnimation from '../../animations/Fade';\nimport RoomstayThemeEngine from '../../providers/RoomstayThemeEngine';\nimport DataLayer from '../../util/DataLayer';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { CompanyContext } from '@frontend/contexts';\nimport { FullPageEngineContext } from '@frontend/contexts';\nimport StepHotel from '../../pages/steps/StepHotel/StepHotel';\n\nexport default function Header() {\n    const { hotel } = useCurrentHotel();\n    const ccx = useContext(CompanyContext);\n    const { currentStep } = useContext(FullPageEngineContext);\n\n    const [hotelLogo, setHotelLogo] = useState('');\n    const [showHotelLinks, setShowHotelLinks] = useState(true);\n\n    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n\n    const { t } = useTranslation();\n\n    const availableLanguages = LanguageProvider.getLanguages();\n\n    const langKeys = Object.keys(availableLanguages);\n\n    const onLanguageChangeHandler = (selected: any) => {\n        ccx.setCurrentLanguage(selected);\n        LanguageProvider.changeLanguage(selected);\n    };\n\n    const onCurrencyChangeHandler = (selected: any) => {\n        ccx.setCurrentCurrency(selected);\n        DataLayer.instance.setCurrencyCodes(selected);\n    };\n\n    const closeMobileMenuClickHandler = () => {\n        setMobileMenuOpen(false);\n    };\n    const openMobileMenuClickHandler = () => {\n        setMobileMenuOpen(true);\n    };\n\n    useEffect(() => {\n        let cancelled = false;\n\n        const loadImage = (src: string) => {\n            const image = new Image();\n            image.onload = () => {\n                if (!cancelled) {\n                    setHotelLogo(src);\n                }\n            };\n\n            image.src = src;\n        };\n\n        // Check the Logo per step\n        if (hotel && !(currentStep === StepHotel)) {\n            if (typeof hotel?.logo === 'string') {\n                loadImage(hotel?.logo);\n            }\n        } else {\n            loadImage(ccx.logo);\n        }\n\n        // Check wether we should display the hotel related links or not\n        setShowHotelLinks(currentStep !== StepHotel && !!hotel);\n\n        return () => {\n            cancelled = true;\n        };\n    }, [hotel, hotel?.logo, ccx.logo, currentStep]);\n\n    const hotelImageElement = hotelLogo ? <img src={hotelLogo} alt=\"Hotel Logo\" className=\"u-block\" /> : hotel?.logo;\n\n    const links = (\n        <ul className=\"c-header__list\">\n            <li>\n                <NavLink to=\"/hotel-info/\" activeClassName=\"is-active\" onClick={closeMobileMenuClickHandler}>\n                    <Text type={TextType.Small} color={Color.White}>\n                        <strong>{t(Translation.Navigation.HotelInfo)}</strong>\n                    </Text>\n                </NavLink>\n            </li>\n            <li>\n                {hotel?.forwardFindReservationToSynxis ? (\n                    <a href={`https://be.synxis.com/signin?hotel=${hotel?.hotelID}`} target=\"_blank\">\n                        <Text type={TextType.Small} color={Color.White} bold={true}>\n                            {t(Translation.Navigation.FindReservation)}\n                        </Text>\n                    </a>\n                ) : (\n                    <NavLink to=\"/find-reservation\" activeClassName=\"is-active\" onClick={closeMobileMenuClickHandler}>\n                        <Text type={TextType.Small} color={Color.White} bold={true}>\n                            {t(Translation.Navigation.FindReservation)}\n                        </Text>\n                    </NavLink>\n                )}\n            </li>\n            <li className=\"phone\">\n                <a href={`tel:${hotel?.phone}`} onClick={closeMobileMenuClickHandler}>\n                    <Text type={TextType.Small} transforms={[TextTransform.Uppercase]} color={Color.White}>\n                        <Icon icon={IconType.Phone} size=\"16px\" color={Color.White} />\n                        <strong className=\"u-marg-left--light\">{hotel?.phone}</strong>\n                    </Text>\n                </a>\n            </li>\n        </ul>\n    );\n\n    const configs = (\n        <>\n            <ul className=\"c-header__list\">\n                {langKeys.length > 1 && (\n                    <li>\n                        <BESelect\n                            onChange={onLanguageChangeHandler}\n                            selectedValue={ccx.currentLanguage}\n                            items={langKeys.map((lang: Language) => {\n                                return {\n                                    value: lang,\n                                    text: LanguageProvider.getPrettyLanguageName(lang),\n                                };\n                            })}\n                        />\n                    </li>\n                )}\n                <li>\n                    <BESelect onChange={onCurrencyChangeHandler} selectedValue={ccx.currentCurrency} items={CurrencyProvider.getCurrencyItems()} />\n                </li>\n            </ul>\n        </>\n    );\n\n    return (\n        <>\n            <div className=\"c-header\">\n                <div className=\"container\">\n                    <div className=\"u-flex\">\n                        <div className=\"u-flex u-flex-flex-start u-flex__item\">\n                            <div className=\"c-header__logo\">\n                                <a href={showHotelLinks ? hotel?.hotelUrl : ccx?.logoLink} onClick={closeMobileMenuClickHandler}>\n                                    {hotelImageElement}\n                                </a>\n                            </div>\n                            {!!showHotelLinks && links}\n                        </div>\n                        <div className=\"u-flex mx-100\">\n                            {configs}\n                            <div className=\"c-header__mobile-menu\">\n                                <span className=\"u-white u-pad-left\">\n                                    <Icon icon={IconType.Menu} size=\"26px\" color={Color.White} onClick={openMobileMenuClickHandler} />\n                                </span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <Modal open={mobileMenuOpen} container={RoomstayThemeEngine.EngineContainer}>\n                <FadeAnimation in={mobileMenuOpen}>\n                    <div className=\"mobile-header-menu\">\n                        <div className=\"mobile-header-menu--replica u-flex\">\n                            <div className=\"c-header__logo\">\n                                <Link to=\"/\" onClick={closeMobileMenuClickHandler}>\n                                    {hotelImageElement}\n                                </Link>\n                            </div>\n                            <div className=\"c-header__mobile-menu\">\n                                <span className=\"u-white u-pad-left\">\n                                    <Icon icon={IconType.Close} size=\"26px\" color={Color.White} onClick={closeMobileMenuClickHandler} />\n                                </span>\n                            </div>\n                        </div>\n                        <div className=\"mobile-header-menu--content\">\n                            {!!hotel && links}\n\n                            {configs}\n                        </div>\n                    </div>\n                </FadeAnimation>\n            </Modal>\n        </>\n    );\n}\n"]}

package/dist/src/components/navigation/StepSelector.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function StepSelector(): JSX.Element;

package/dist/src/components/navigation/StepSelector.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const Text_1 = require("../generic/Text");
+const Icon_1 = require("../generic/Icon");
+const react_router_dom_1 = require("react-router-dom");
+const react_1 = require("react");
+const StepManager_1 = require("../../util/StepManager");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("../../translations/Translation");
+const classNames = require("classnames");
+const Color_1 = require("../../util/Color");
+const StepSelectorModal_1 = require("./StepSelectorModal");
+const ScreenSize_1 = require("../../util/ScreenSize");
+const contexts_1 = require("@frontend/contexts");
+const contexts_2 = require("@frontend/contexts");
+function StepSelector() {
+    const { screenSize } = react_1.useContext(contexts_1.BookingEngineContext);
+    const { currentStep } = react_1.useContext(contexts_2.FullPageEngineContext);
+    const basketContext = react_1.useContext(contexts_1.BasketContext);
+    const { t } = react_i18next_1.useTranslation();
+    const [modalOpen, setModalOpen] = react_1.useState(false);
+    const steps = StepManager_1.default.getSteps().filter((step) => (step.shouldShowOnNavigation() ? step : null));
+    const onDropdownClick = () => {
+        screenSize <= ScreenSize_1.default.Medium ? setModalOpen(true) : null;
+    };
+    const closeModal = () => {
+        setModalOpen(false);
+    };
+    const currentStepIndex = StepManager_1.default.getStepIndex(currentStep.getName());
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "step-dropdown", onClick: onDropdownClick },
+            React.createElement("div", { className: "step-container" },
+                React.createElement(Icon_1.default, { icon: Icon_1.IconType.Dropdown }),
+                React.createElement("div", { className: "step-awards" },
+                    React.createElement("img", { alt: "", style: { width: '80px' } })),
+                React.createElement("ul", { className: "step-selector" }, steps.map((step, stepIndex) => {
+                    const stepName = t(step.getStepTranslation());
+                    const prettyStep = stepIndex + 1;
+                    const isPrevStep = currentStepIndex > prettyStep;
+                    let stepNumber;
+                    if (isPrevStep) {
+                        stepNumber = React.createElement(Icon_1.default, { icon: Icon_1.IconType.Check, color: Color_1.Color.White, size: "24px" });
+                    }
+                    else {
+                        stepNumber = (React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                            React.createElement("strong", null, '0' + prettyStep)));
+                    }
+                    let isClickable = false;
+                    if (step) {
+                        const stepValidator = step.getValidator();
+                        if (stepValidator && stepValidator.isValid(basketContext)) {
+                            isClickable = true;
+                        }
+                    }
+                    const stepClassNames = classNames('step-selector__item', {
+                        'is-current': currentStepIndex === prettyStep,
+                        'is-valid': isClickable,
+                        'is-complete': isPrevStep,
+                        'is-disabled': !isPrevStep && currentStepIndex !== prettyStep && !isClickable,
+                    });
+                    return (React.createElement("li", { className: stepClassNames, key: prettyStep },
+                        React.createElement("span", { className: "step-selector__count" }, stepNumber),
+                        React.createElement("div", null,
+                            React.createElement("span", { className: "step-selector__step-count-mobile" },
+                                React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Navy },
+                                    React.createElement("strong", null, t(Translation_1.Translation.Navigation.Steps.StepProgress, { step: prettyStep })))),
+                            React.createElement(Text_1.default, null,
+                                React.createElement("strong", null, stepName))),
+                        React.createElement(react_router_dom_1.Link, { to: step.getStepUrl() })));
+                })))),
+        screenSize <= ScreenSize_1.default.Medium && React.createElement(StepSelectorModal_1.default, { isOpen: modalOpen, onClose: closeModal })));
+}
+exports.default = StepSelector;
+//# sourceMappingURL=StepSelector.js.map