@roomstay/frontend 2.10.0 → 2.10.1-0

package/dist/src/components/generic/BookingWizard/BookingWizardBottomSheet/BookingWizardBottomSheet.js

@@ -20,15 +20,21 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importDefault(require("react"));
 const react_i18next_1 = require("react-i18next");
 const react_spring_bottom_sheet_1 = require("react-spring-bottom-sheet");
+const ShadowDomContext_1 = require("../../../../contexts/ShadowDomContext/ShadowDomContext");
 const Translation_1 = require("../../../../translations/Translation");
 const BEButton_1 = __importDefault(require("../../BEButton"));
 const BookingWizard_1 = require("../BookingWizard");
 const BookingWizard_module_scss_1 = __importDefault(require("../BookingWizard.module.scss"));
 const BookingWizardContext_1 = require("../BookingWizardContext");
+const ShadowDomBottomSheet_1 = __importDefault(require("./ShadowDomBottomSheet"));
 const BookingWizardBottomSheet = (props) => {
     const { children, className } = props, bottomSheetProps = __rest(props, ["children", "className"]);
     const { style, className: bwClassname } = react_1.default.useContext(BookingWizardContext_1.BookingWizardContext);
+    const { isShadowDom } = (0, ShadowDomContext_1.useShadowDom)();
     const classes = (0, classnames_1.default)('roomstay-booking-container', bwClassname, className);
+    if (isShadowDom) {
+        return (react_1.default.createElement(ShadowDomBottomSheet_1.default, { className: classes, style: style, open: bottomSheetProps.open, onDismiss: bottomSheetProps.onDismiss, header: bottomSheetProps.header, footer: bottomSheetProps.footer, snapPoints: bottomSheetProps.snapPoints, defaultSnap: bottomSheetProps.defaultSnap, blocking: bottomSheetProps.blocking }, children));
+    }
     return (react_1.default.createElement(react_spring_bottom_sheet_1.BottomSheet, Object.assign({ className: classes, style: style }, bottomSheetProps), children));
 };
 const BWBottomSheetFooter = ({ onPrev, onNext, hidePrev = false, preLabel, nextLabel, disabledNext = false }) => {

package/dist/src/components/generic/BookingWizard/BookingWizardBottomSheet/BookingWizardBottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"BookingWizardBottomSheet.js","sourceRoot":"/","sources":["src/components/generic/BookingWizard/BookingWizardBottomSheet/BookingWizardBottomSheet.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,qCAA8C;AAC9C,4DAAoC;AACpC,kDAAyC;AACzC,iDAA+C;AAC/C,yEAA0E;AAE1E,4DAAyD;AAEzD,8DAAsC;AACtC,oDAAuD;AACvD,6FAAkD;AAClD,kEAAiF;AACjF,MAAM,wBAAwB,GAA+B,CAAC,KAAK,EAAE,EAAE;IACnE,MAAM,EAAE,QAAQ,EAAE,SAAS,KAA0B,KAAK,EAA1B,gBAAgB,UAAK,KAAK,EAApD,yBAA4C,CAAQ,CAAC;IAE3D,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,eAAK,CAAC,UAAU,CAAC,2CAAoB,CAAC,CAAC;IAEjF,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,4BAA4B,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;IAEjF,OAAO,CACH,8BAAC,uCAAW,kBAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,IAAM,gBAAgB,GAC9D,QAAQ,CACC,CACjB,CAAC;AACN,CAAC,CAAC;AAWK,MAAM,mBAAmB,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,GAAG,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,GAAG,KAAK,EAA4B,EAAE,EAAE;IAC7I,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uCAAgB,GAAE,CAAC;IACrC,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAC/B,IAAI,KAAK,KAAK,mCAAmB,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEtD,OAAO,CACH,uCAAK,SAAS,EAAE,mCAAM,CAAC,MAAM;QACxB,CAAC,QAAQ,CAAC,CAAC,CAAC,CACT,8BAAC,kBAAQ,IAAC,OAAO,QAAC,MAAM,QAAC,OAAO,QAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAA,oBAAU,EAAC,mCAAM,CAAC,GAAG,EAAE,mCAAM,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,IACjH,QAAQ,IAAI,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CACpC,CACd,CAAC,CAAC,CAAC,CACA,0CAAW,CACd;QAED,8BAAC,kBAAQ,IAAC,QAAQ,EAAE,YAAY,EAAE,OAAO,QAAC,OAAO,QAAC,MAAM,QAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAA,oBAAU,EAAC,mCAAM,CAAC,GAAG,EAAE,mCAAM,CAAC,UAAU,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,IACvI,SAAS,IAAI,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CACrC,CACT,CACT,CAAC;AACN,CAAC,CAAC;AApBW,QAAA,mBAAmB,uBAoB9B;AAEK,MAAM,mBAAmB,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAA6C,EAAE,EAAE;IACjG,MAAM,EAAE,aAAa,EAAE,GAAG,IAAA,uCAAgB,GAAE,CAAC;IAC7C,OAAO,CACH,uCAAK,SAAS,EAAE,mCAAM,CAAC,MAAM;QACzB,uCACI,SAAS,EAAE,IAAA,oBAAU,EAAC;gBAClB,CAAC,mCAAM,CAAC,KAAK,CAAC,EAAE,aAAa;aAChC,CAAC,IAED,KAAK,CACJ;QACN,8BAAC,SAAI,IAAC,IAAI,EAAE,aAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,CAC9C,CACT,CAAC;AACN,CAAC,CAAC;AAdW,QAAA,mBAAmB,uBAc9B;AAEF,kBAAe,wBAAwB,CAAC","sourcesContent":["import { Icon, IconType } from '@roomstay/ui';\nimport classNames from 'classnames';\nimport React, { ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { BottomSheet, BottomSheetProps } from 'react-spring-bottom-sheet';\n\nimport { Translation } from '@/translations/Translation';\n\nimport BEButton from '../../BEButton';\nimport { EBookingWizardTheme } from '../BookingWizard';\nimport styles from '../BookingWizard.module.scss';\nimport { BookingWizardContext, useBookingWizard } from '../BookingWizardContext';\nconst BookingWizardBottomSheet: React.FC<BottomSheetProps> = (props) => {\n    const { children, className, ...bottomSheetProps } = props;\n\n    const { style, className: bwClassname } = React.useContext(BookingWizardContext);\n\n    const classes = classNames('roomstay-booking-container', bwClassname, className);\n\n    return (\n        <BottomSheet className={classes} style={style} {...bottomSheetProps}>\n            {children}\n        </BottomSheet>\n    );\n};\n\ninterface BWBottomSheetFooterProps {\n    onPrev?: () => void;\n    onNext?: () => void;\n    hidePrev?: boolean;\n    preLabel?: string; // defaults to \"Back\"\n    nextLabel?: string; // defaults to \"Next\"\n    disabledNext?: boolean;\n}\n\nexport const BWBottomSheetFooter = ({ onPrev, onNext, hidePrev = false, preLabel, nextLabel, disabledNext = false }: BWBottomSheetFooterProps) => {\n    const { theme } = useBookingWizard();\n    const { t } = useTranslation();\n    if (theme !== EBookingWizardTheme.Images) return null;\n\n    return (\n        <div className={styles.footer}>\n            {!hidePrev ? (\n                <BEButton rounded isText primary size=\"small\" className={classNames(styles.btn, styles['btn-cancel'])} onClick={onPrev}>\n                    {preLabel || t(Translation.Navigation.Back)}\n                </BEButton>\n            ) : (\n                <div></div>\n            )}\n\n            <BEButton disabled={disabledNext} rounded primary filled size=\"small\" className={classNames(styles.btn, styles['btn-next'])} onClick={onNext}>\n                {nextLabel || t(Translation.Navigation.Next)}\n            </BEButton>\n        </div>\n    );\n};\n\nexport const BWBottomSheetHeader = ({ title, onClose }: { title: ReactNode; onClose: () => void }) => {\n    const { isImagesTheme } = useBookingWizard();\n    return (\n        <div className={styles.header}>\n            <div\n                className={classNames({\n                    [styles.title]: isImagesTheme,\n                })}\n            >\n                {title}\n            </div>\n            <Icon icon={IconType.Close} onClick={onClose} />\n        </div>\n    );\n};\n\nexport default BookingWizardBottomSheet;\n"]}
+{"version":3,"file":"BookingWizardBottomSheet.js","sourceRoot":"/","sources":["src/components/generic/BookingWizard/BookingWizardBottomSheet/BookingWizardBottomSheet.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Icon, IconType } from '@roomstay/ui';\nimport classNames from 'classnames';\nimport React, { ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { BottomSheet, BottomSheetProps } from 'react-spring-bottom-sheet';\n\nimport { useShadowDom } from '@/contexts/ShadowDomContext/ShadowDomContext';\nimport { Translation } from '@/translations/Translation';\n\nimport BEButton from '../../BEButton';\nimport { EBookingWizardTheme } from '../BookingWizard';\nimport styles from '../BookingWizard.module.scss';\nimport { BookingWizardContext, useBookingWizard } from '../BookingWizardContext';\nimport ShadowDomBottomSheet, { ShadowDomBottomSheetProps } from './ShadowDomBottomSheet';\n\nconst BookingWizardBottomSheet: React.FC<BottomSheetProps> = (props) => {\n    const { children, className, ...bottomSheetProps } = props;\n\n    const { style, className: bwClassname } = React.useContext(BookingWizardContext);\n    const { isShadowDom } = useShadowDom();\n\n    const classes = classNames('roomstay-booking-container', bwClassname, className);\n\n    if (isShadowDom) {\n        return (\n            <ShadowDomBottomSheet\n                className={classes}\n                style={style}\n                open={bottomSheetProps.open}\n                onDismiss={bottomSheetProps.onDismiss}\n                header={bottomSheetProps.header}\n                footer={bottomSheetProps.footer}\n                snapPoints={bottomSheetProps.snapPoints as ShadowDomBottomSheetProps['snapPoints']}\n                defaultSnap={bottomSheetProps.defaultSnap as ShadowDomBottomSheetProps['defaultSnap']}\n                blocking={bottomSheetProps.blocking}\n            >\n                {children}\n            </ShadowDomBottomSheet>\n        );\n    }\n\n    return (\n        <BottomSheet className={classes} style={style} {...bottomSheetProps}>\n            {children}\n        </BottomSheet>\n    );\n};\n\ninterface BWBottomSheetFooterProps {\n    onPrev?: () => void;\n    onNext?: () => void;\n    hidePrev?: boolean;\n    preLabel?: string; // defaults to \"Back\"\n    nextLabel?: string; // defaults to \"Next\"\n    disabledNext?: boolean;\n}\n\nexport const BWBottomSheetFooter = ({ onPrev, onNext, hidePrev = false, preLabel, nextLabel, disabledNext = false }: BWBottomSheetFooterProps) => {\n    const { theme } = useBookingWizard();\n    const { t } = useTranslation();\n    if (theme !== EBookingWizardTheme.Images) return null;\n\n    return (\n        <div className={styles.footer}>\n            {!hidePrev ? (\n                <BEButton rounded isText primary size=\"small\" className={classNames(styles.btn, styles['btn-cancel'])} onClick={onPrev}>\n                    {preLabel || t(Translation.Navigation.Back)}\n                </BEButton>\n            ) : (\n                <div></div>\n            )}\n\n            <BEButton disabled={disabledNext} rounded primary filled size=\"small\" className={classNames(styles.btn, styles['btn-next'])} onClick={onNext}>\n                {nextLabel || t(Translation.Navigation.Next)}\n            </BEButton>\n        </div>\n    );\n};\n\nexport const BWBottomSheetHeader = ({ title, onClose }: { title: ReactNode; onClose: () => void }) => {\n    const { isImagesTheme } = useBookingWizard();\n    return (\n        <div className={styles.header}>\n            <div\n                className={classNames({\n                    [styles.title]: isImagesTheme,\n                })}\n            >\n                {title}\n            </div>\n            <Icon icon={IconType.Close} onClick={onClose} />\n        </div>\n    );\n};\n\nexport default BookingWizardBottomSheet;\n"]}

package/dist/src/components/generic/BookingWizard/BookingWizardBottomSheet/ShadowDomBottomSheet.d.ts

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+export interface ShadowDomBottomSheetProps {
+    open: boolean;
+    children: ReactNode;
+    onDismiss?: () => void;
+    header?: ReactNode | false;
+    footer?: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    snapPoints?: (props: any) => number[] | number;
+    defaultSnap?: number | ((props: any) => number);
+    blocking?: boolean;
+}
+/**
+ * A Shadow DOM-compatible bottom sheet that renders via RoomstayPortal
+ * instead of portaling to document.body (which react-spring-bottom-sheet does).
+ *
+ * Provides slide-up animation, backdrop, dismiss on outside click,
+ * and basic snap point support (min-height vs full-height).
+ */
+declare const ShadowDomBottomSheet: React.FC<ShadowDomBottomSheetProps>;
+export default ShadowDomBottomSheet;

package/dist/src/components/generic/BookingWizard/BookingWizardBottomSheet/ShadowDomBottomSheet.js

@@ -0,0 +1,131 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const Portal_1 = require("../../Portal/Portal");
+/**
+ * A Shadow DOM-compatible bottom sheet that renders via RoomstayPortal
+ * instead of portaling to document.body (which react-spring-bottom-sheet does).
+ *
+ * Provides slide-up animation, backdrop, dismiss on outside click,
+ * and basic snap point support (min-height vs full-height).
+ */
+const ShadowDomBottomSheet = ({ open, children, onDismiss, header, footer, className, style, snapPoints, blocking = true }) => {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [animating, setAnimating] = (0, react_1.useState)(false);
+    const sheetRef = (0, react_1.useRef)(null);
+    const contentRef = (0, react_1.useRef)(null);
+    // Determine target height from snapPoints
+    const getTargetHeight = (0, react_1.useCallback)(() => {
+        if (!snapPoints)
+            return 'auto';
+        const maxHeight = window.innerHeight;
+        const result = snapPoints({ maxHeight, minHeight: 0 });
+        const points = Array.isArray(result) ? result : [result];
+        const maxSnap = Math.max(...points);
+        if (maxSnap >= maxHeight * 0.9)
+            return '100vh';
+        return 'auto';
+    }, [snapPoints]);
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            setVisible(true);
+            // Trigger animation on next frame
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => setAnimating(true));
+            });
+        }
+        else {
+            setAnimating(false);
+            const timer = setTimeout(() => setVisible(false), 300);
+            return () => clearTimeout(timer);
+        }
+    }, [open]);
+    // Close on Escape
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape')
+                onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [open, onDismiss]);
+    const handleBackdropClick = (0, react_1.useCallback)(() => {
+        if (blocking)
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    }, [blocking, onDismiss]);
+    if (!visible)
+        return null;
+    const targetHeight = getTargetHeight();
+    const isFullHeight = targetHeight === '100vh';
+    return (react_1.default.createElement(Portal_1.RoomstayPortal, { target: document.body },
+        react_1.default.createElement("div", { style: {
+                position: 'fixed',
+                inset: 0,
+                zIndex: 999,
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                opacity: animating ? 1 : 0,
+                transition: 'opacity 300ms ease',
+                pointerEvents: blocking ? 'auto' : 'none',
+            }, onClick: handleBackdropClick }),
+        react_1.default.createElement("div", { ref: sheetRef, className: (0, classnames_1.default)(className), style: Object.assign({ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 1000, backgroundColor: 'white', borderRadius: isFullHeight ? '0' : '16px 16px 0 0', boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.15)', transform: animating ? 'translateY(0)' : 'translateY(100%)', transition: 'transform 300ms cubic-bezier(0.32, 0.72, 0, 1)', maxHeight: isFullHeight ? '100vh' : '85vh', display: 'flex', flexDirection: 'column' }, style) },
+            header !== false && (react_1.default.createElement("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    padding: '8px 0 0',
+                    flexShrink: 0,
+                } },
+                react_1.default.createElement("div", { style: {
+                        width: 36,
+                        height: 4,
+                        borderRadius: 2,
+                        backgroundColor: '#dfe1e5',
+                    } }))),
+            header && header !== false && react_1.default.createElement("div", { style: { flexShrink: 0 } }, header),
+            react_1.default.createElement("div", { ref: contentRef, style: {
+                    flex: 1,
+                    overflowY: 'auto',
+                    WebkitOverflowScrolling: 'touch',
+                } }, children),
+            footer && react_1.default.createElement("div", { style: { flexShrink: 0 } }, footer))));
+};
+exports.default = ShadowDomBottomSheet;
+//# sourceMappingURL=ShadowDomBottomSheet.js.map

package/dist/src/components/generic/BookingWizard/BookingWizardBottomSheet/ShadowDomBottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShadowDomBottomSheet.js","sourceRoot":"/","sources":["src/components/generic/BookingWizard/BookingWizardBottomSheet/ShadowDomBottomSheet.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames';\nimport React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { RoomstayPortal } from '../../Portal/Portal';\n\nexport interface ShadowDomBottomSheetProps {\n    open: boolean;\n    children: ReactNode;\n    onDismiss?: () => void;\n    header?: ReactNode | false;\n    footer?: ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    snapPoints?: (props: any) => number[] | number;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    defaultSnap?: number | ((props: any) => number);\n    blocking?: boolean;\n}\n\n/**\n * A Shadow DOM-compatible bottom sheet that renders via RoomstayPortal\n * instead of portaling to document.body (which react-spring-bottom-sheet does).\n *\n * Provides slide-up animation, backdrop, dismiss on outside click,\n * and basic snap point support (min-height vs full-height).\n */\nconst ShadowDomBottomSheet: React.FC<ShadowDomBottomSheetProps> = ({ open, children, onDismiss, header, footer, className, style, snapPoints, blocking = true }) => {\n    const [visible, setVisible] = useState(false);\n    const [animating, setAnimating] = useState(false);\n    const sheetRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    // Determine target height from snapPoints\n    const getTargetHeight = useCallback((): string => {\n        if (!snapPoints) return 'auto';\n\n        const maxHeight = window.innerHeight;\n        const result = snapPoints({ maxHeight, minHeight: 0 });\n        const points = Array.isArray(result) ? result : [result];\n        const maxSnap = Math.max(...points);\n\n        if (maxSnap >= maxHeight * 0.9) return '100vh';\n        return 'auto';\n    }, [snapPoints]);\n\n    useEffect(() => {\n        if (open) {\n            setVisible(true);\n            // Trigger animation on next frame\n            requestAnimationFrame(() => {\n                requestAnimationFrame(() => setAnimating(true));\n            });\n        } else {\n            setAnimating(false);\n            const timer = setTimeout(() => setVisible(false), 300);\n            return () => clearTimeout(timer);\n        }\n    }, [open]);\n\n    // Close on Escape\n    useEffect(() => {\n        if (!open) return;\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (e.key === 'Escape') onDismiss?.();\n        };\n        document.addEventListener('keydown', handleKeyDown);\n        return () => document.removeEventListener('keydown', handleKeyDown);\n    }, [open, onDismiss]);\n\n    const handleBackdropClick = useCallback(() => {\n        if (blocking) onDismiss?.();\n    }, [blocking, onDismiss]);\n\n    if (!visible) return null;\n\n    const targetHeight = getTargetHeight();\n    const isFullHeight = targetHeight === '100vh';\n\n    return (\n        <RoomstayPortal target={document.body}>\n            {/* Backdrop */}\n            <div\n                style={{\n                    position: 'fixed',\n                    inset: 0,\n                    zIndex: 999,\n                    backgroundColor: 'rgba(0, 0, 0, 0.5)',\n                    opacity: animating ? 1 : 0,\n                    transition: 'opacity 300ms ease',\n                    pointerEvents: blocking ? 'auto' : 'none',\n                }}\n                onClick={handleBackdropClick}\n            />\n\n            {/* Sheet */}\n            <div\n                ref={sheetRef}\n                className={classNames(className)}\n                style={{\n                    position: 'fixed',\n                    bottom: 0,\n                    left: 0,\n                    right: 0,\n                    zIndex: 1000,\n                    backgroundColor: 'white',\n                    borderRadius: isFullHeight ? '0' : '16px 16px 0 0',\n                    boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.15)',\n                    transform: animating ? 'translateY(0)' : 'translateY(100%)',\n                    transition: 'transform 300ms cubic-bezier(0.32, 0.72, 0, 1)',\n                    maxHeight: isFullHeight ? '100vh' : '85vh',\n                    display: 'flex',\n                    flexDirection: 'column',\n                    ...style,\n                }}\n            >\n                {/* Drag handle */}\n                {header !== false && (\n                    <div\n                        style={{\n                            display: 'flex',\n                            justifyContent: 'center',\n                            padding: '8px 0 0',\n                            flexShrink: 0,\n                        }}\n                    >\n                        <div\n                            style={{\n                                width: 36,\n                                height: 4,\n                                borderRadius: 2,\n                                backgroundColor: '#dfe1e5',\n                            }}\n                        />\n                    </div>\n                )}\n\n                {/* Header */}\n                {header && header !== false && <div style={{ flexShrink: 0 }}>{header}</div>}\n\n                {/* Scrollable content */}\n                <div\n                    ref={contentRef}\n                    style={{\n                        flex: 1,\n                        overflowY: 'auto',\n                        WebkitOverflowScrolling: 'touch',\n                    }}\n                >\n                    {children}\n                </div>\n\n                {/* Footer */}\n                {footer && <div style={{ flexShrink: 0 }}>{footer}</div>}\n            </div>\n        </RoomstayPortal>\n    );\n};\n\nexport default ShadowDomBottomSheet;\n"]}

package/dist/src/components/generic/HotelPerkVisual.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { HotelPerk } from '../../models/Client/Hotel/HotelPerk';
+import { Color } from '../../util/Color';
+export declare const HotelPerkVisual: ({ perk, iconBackgroundColor }: {
+    perk: HotelPerk;
+    iconBackgroundColor?: Color;
+}) => ReactElement | null;

package/dist/src/components/generic/HotelPerkVisual.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HotelPerkVisual = void 0;
+const react_1 = __importDefault(require("react"));
+const Icon_1 = __importDefault(require("./Icon/Icon"));
+const HotelPerkVisual = ({ perk, iconBackgroundColor }) => {
+    if (perk.iconElement) {
+        return perk.iconElement;
+    }
+    if (perk.icon) {
+        return react_1.default.createElement(Icon_1.default, { icon: perk.icon, backgroundColor: iconBackgroundColor });
+    }
+    if (perk.image) {
+        // The image is a hosted, cross-origin SVG asset (content-type: image/svg+xml), e.g.
+        //    https://scdn.app.roomstay.io/05385c74-f380-4b33-a677-8f7f417ee267
+        // The asset hardcodes its own fill, and <img>/<object> render it in an isolated
+        // cross-origin document that this page's CSS/JS can't touch (and fetch-to-inline is
+        // CORS-blocked). Using it as a CSS mask is the only way to recolour it: the asset
+        // supplies the shape and `background-color` paints it. Masks need no CORS.
+        const maskUrl = `url("${perk.image}")`;
+        return react_1.default.createElement("span", { className: "perk-icon-mask", role: "img", "aria-label": perk.name, style: { maskImage: maskUrl, WebkitMaskImage: maskUrl } });
+    }
+    return null;
+};
+exports.HotelPerkVisual = HotelPerkVisual;
+//# sourceMappingURL=HotelPerkVisual.js.map

package/dist/src/components/generic/HotelPerkVisual.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HotelPerkVisual.js","sourceRoot":"/","sources":["src/components/generic/HotelPerkVisual.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA4C;AAE5C,0EAAgE;AAIzD,MAAM,eAAe,GAAG,CAAC,EAAE,IAAI,EAAE,mBAAmB,EAAoD,EAAuB,EAAE;IACpI,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC5B,CAAC;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;QACZ,OAAO,8BAAC,cAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAgB,EAAE,eAAe,EAAE,mBAAmB,GAAI,CAAC;IACvF,CAAC;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,oFAAoF;QACpF,uEAAuE;QACvE,gFAAgF;QAChF,oFAAoF;QACpF,kFAAkF;QAClF,2EAA2E;QAC3E,MAAM,OAAO,GAAG,QAAQ,IAAI,CAAC,KAAK,IAAI,CAAC;QACvC,OAAO,wCAAM,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,KAAK,gBAAa,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,GAAI,CAAC;IAC1I,CAAC;IAED,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AArBW,QAAA,eAAe,mBAqB1B","sourcesContent":["import React, { ReactElement } from 'react';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { HotelPerk } from '@/models/Client/Hotel/HotelPerk';\nimport { Color } from '@/util/Color';\n\nexport const HotelPerkVisual = ({ perk, iconBackgroundColor }: { perk: HotelPerk; iconBackgroundColor?: Color }): ReactElement | null => {\n    if (perk.iconElement) {\n        return perk.iconElement;\n    }\n\n    if (perk.icon) {\n        return <Icon icon={perk.icon as IconType} backgroundColor={iconBackgroundColor} />;\n    }\n\n    if (perk.image) {\n        // The image is a hosted, cross-origin SVG asset (content-type: image/svg+xml), e.g.\n        //    https://scdn.app.roomstay.io/05385c74-f380-4b33-a677-8f7f417ee267\n        // The asset hardcodes its own fill, and <img>/<object> render it in an isolated\n        // cross-origin document that this page's CSS/JS can't touch (and fetch-to-inline is\n        // CORS-blocked). Using it as a CSS mask is the only way to recolour it: the asset\n        // supplies the shape and `background-color` paints it. Masks need no CORS.\n        const maskUrl = `url(\"${perk.image}\")`;\n        return <span className=\"perk-icon-mask\" role=\"img\" aria-label={perk.name} style={{ maskImage: maskUrl, WebkitMaskImage: maskUrl }} />;\n    }\n\n    return null;\n};\n"]}

package/dist/src/components/generic/Portal/Portal.js

@@ -6,8 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RoomstayPortal = void 0;
 const react_1 = __importDefault(require("react"));
 const react_dom_1 = require("react-dom");
+const ShadowDomContext_1 = require("../../../contexts/ShadowDomContext/ShadowDomContext");
 const RoomstayPortal = (props) => {
-    return (0, react_dom_1.createPortal)(react_1.default.createElement("div", { className: 'roomstay-booking-container' + (props.preventZIndex ? ' --no-z' : '') }, props.children), props.target);
+    const { isShadowDom, portalTarget } = (0, ShadowDomContext_1.useShadowDom)();
+    // If target is document.body and we're in Shadow DOM, redirect to shadow root container
+    const effectiveTarget = props.target === document.body && isShadowDom ? portalTarget : props.target;
+    return (0, react_dom_1.createPortal)(react_1.default.createElement("div", { className: 'roomstay-booking-container' + (props.preventZIndex ? ' --no-z' : '') }, props.children), effectiveTarget);
 };
 exports.RoomstayPortal = RoomstayPortal;
 //# sourceMappingURL=Portal.js.map

package/dist/src/components/generic/Portal/Portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.js","sourceRoot":"/","sources":["src/components/generic/Portal/Portal.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyC;AACzC,yCAAyC;AASlC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAE,EAAE;IACzD,OAAO,IAAA,wBAAY,EAAC,uCAAK,SAAS,EAAE,4BAA4B,GAAG,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,IAAG,KAAK,CAAC,QAAQ,CAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;AACrJ,CAAC,CAAC;AAFW,QAAA,cAAc,kBAEzB","sourcesContent":["import React, { ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\n\ntype RoomstayPortalProps = {\n    target: HTMLElement;\n    children: ReactNode | ReactNode[];\n\n    preventZIndex?: boolean;\n};\n\nexport const RoomstayPortal = (props: RoomstayPortalProps) => {\n    return createPortal(<div className={'roomstay-booking-container' + (props.preventZIndex ? ' --no-z' : '')}>{props.children}</div>, props.target);\n};\n"]}
+{"version":3,"file":"Portal.js","sourceRoot":"/","sources":["src/components/generic/Portal/Portal.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyC;AACzC,yCAAyC;AAEzC,mFAA4E;AASrE,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAE,EAAE;IACzD,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,IAAA,+BAAY,GAAE,CAAC;IAErD,wFAAwF;IACxF,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,IAAI,IAAI,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC;IAEpG,OAAO,IAAA,wBAAY,EAAC,uCAAK,SAAS,EAAE,4BAA4B,GAAG,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,IAAG,KAAK,CAAC,QAAQ,CAAO,EAAE,eAAe,CAAC,CAAC;AACxJ,CAAC,CAAC;AAPW,QAAA,cAAc,kBAOzB","sourcesContent":["import React, { ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useShadowDom } from '@/contexts/ShadowDomContext/ShadowDomContext';\n\ntype RoomstayPortalProps = {\n    target: HTMLElement;\n    children: ReactNode | ReactNode[];\n\n    preventZIndex?: boolean;\n};\n\nexport const RoomstayPortal = (props: RoomstayPortalProps) => {\n    const { isShadowDom, portalTarget } = useShadowDom();\n\n    // If target is document.body and we're in Shadow DOM, redirect to shadow root container\n    const effectiveTarget = props.target === document.body && isShadowDom ? portalTarget : props.target;\n\n    return createPortal(<div className={'roomstay-booking-container' + (props.preventZIndex ? ' --no-z' : '')}>{props.children}</div>, effectiveTarget);\n};\n"]}

package/dist/src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.d.ts

@@ -1,11 +1,11 @@
 import './EnhancedPhoneNumberField.global.scss';
 import React, { ChangeEvent, PropsWithChildren } from 'react';
-export interface EnhancedPhoneNumberField extends PropsWithChildren<any> {
+export interface EnhancedPhoneNumberFieldProps extends PropsWithChildren<any> {
     validationStatus?: 'success' | 'error';
     name?: string;
     value?: string;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     disabled?: boolean;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<EnhancedPhoneNumberField>, keyof EnhancedPhoneNumberField> & React.RefAttributes<HTMLInputElement>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<EnhancedPhoneNumberFieldProps>, keyof EnhancedPhoneNumberFieldProps> & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/dist/src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnhancedPhoneNumberField.js","sourceRoot":"/","sources":["src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.tsx"],"names":[],"mappings":"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","sourcesContent":["import './EnhancedPhoneNumberField.global.scss';\n\nimport { useCurrentHotel } from '@frontend/hooks';\nimport classNames from 'classnames';\nimport React, { ChangeEvent, ForwardRefRenderFunction, PropsWithChildren, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { useAutoFocusOnSelect } from '@/hooks/AutoFocusOnSelect';\nimport { convertCountryCodeToFlag, CountryType, ListOfCountriesAndCodes } from '@/models/CountryCodesAndNumbers';\n\nimport { Select } from '../../Select/Select';\n\nexport interface EnhancedPhoneNumberField extends PropsWithChildren<any> {\n    validationStatus?: 'success' | 'error';\n    name?: string;\n    value?: string;\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    disabled?: boolean;\n}\n\nconst PHONE_AND_PREFIX_SPLIT = ' ';\n\nconst EnhancedPhoneNumberField: ForwardRefRenderFunction<HTMLInputElement, EnhancedPhoneNumberField> = (props, ref) => {\n    const { hotel } = useCurrentHotel();\n    const innerRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => innerRef.current);\n    const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen, isFocused } = useAutoFocusOnSelect({\n        ref: innerRef.current,\n        onlyAutoOpenWhenInputEmpty: true,\n        disableOpenOnFocus: true,\n    });\n\n    const { t } = useTranslation();\n\n    const organizedCountries: CountryType[] = useMemo(() => {\n        return ListOfCountriesAndCodes.sort((a, b) => {\n            return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);\n        });\n    }, [ListOfCountriesAndCodes]);\n\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n    const { validationStatus, name, onChange, value } = props;\n\n    const [selectedCountry, subscriberCode] = useMemo(() => {\n        const defaultCountryCode = hotel?.countryCode || organizedCountries[0].phone;\n        const [prefix, number] = value?.split(PHONE_AND_PREFIX_SPLIT) ?? [];\n        const codeToFind = prefix || defaultCountryCode;\n\n        const selectedCountry = organizedCountries.find(({ phone }) => phone === codeToFind) ?? organizedCountries[0];\n\n        return [selectedCountry, number ?? ''];\n    }, [value, organizedCountries, hotel?.countryCode]);\n\n    const getOption = (key: CountryType['code']): CountryType => {\n        return organizedCountries.find(({ code }) => code === key) as CountryType;\n    };\n\n    const raiseOnChangeEvent = (prefix?: CountryType, suffix?: string) => {\n        let newSuffix = suffix ?? subscriberCode;\n\n        if (newSuffix.startsWith('0')) {\n            newSuffix = newSuffix.substring(1);\n        }\n\n        const newValue = `${prefix?.phone ?? selectedCountry.phone}${PHONE_AND_PREFIX_SPLIT}${newSuffix}`;\n\n        if (value != newValue) {\n            onChange?.({ target: { name, value: newValue } } as any);\n        }\n    };\n\n    const onInputChanged = (e: ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value;\n        raiseOnChangeEvent(undefined, value);\n    };\n\n    const onPrefixChanged = (selectedCountry: CountryType) => {\n        onItemSelected();\n        raiseOnChangeEvent(selectedCountry, undefined);\n    };\n\n    const fieldClasses = classNames('rs-enhanced-phone-field', {\n        [`--${validationStatus}`]: !!validationStatus,\n        '--focused': isFocused,\n        '--disabled': props.disabled,\n    });\n    const onCountryClick = (country: CountryType) => {\n        onPrefixChanged(country);\n        return;\n    };\n\n    return (\n        <div className={fieldClasses}>\n            <div className=\"rs-enhanced-phone-field--country\" onClick={onTriggerClicked}>\n                <div className=\"rs-enhanced-phone-field--country-icon\">{convertCountryCodeToFlag(selectedCountry.code)}</div>\n                <Icon icon={IconType.Dropdown} />\n            </div>\n            <div className=\"rs-enhanced-phone-field--number\">\n                <span className=\"rs-enhanced-phone-field--number-prefix\">+{selectedCountry.phone}</span>\n                <input\n                    disabled={props.disabled}\n                    ref={innerRef}\n                    placeholder={t(Translation.Step.Confirmation.Inputs.Phone) + ' *'}\n                    type=\"number\"\n                    style={{ paddingLeft: selectedCountry.phone.length * 8 + 20 + 'px' }}\n                    onChange={onInputChanged}\n                    value={subscriberCode}\n                />\n\n                <div className=\"rs-enhanced-phone-field--number-status\"></div>\n            </div>\n            <div className=\"rs-enhanced-phone-field--anchor\" ref={setContainer}></div>\n            <Select<CountryType, 'code'>\n                open={isDropdownOpen}\n                onClose={onDropdownClosed}\n                target={container}\n                options={organizedCountries}\n                value={selectedCountry.code}\n                onChange={(value) => onCountryClick(getOption(value))}\n                labelName=\"code\"\n                keyName=\"code\"\n                renderOption={(country) => (\n                    <div className=\"rs-enhanced-phone-field--suggest-list-country\">\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-icon\">{convertCountryCodeToFlag(country?.code as string)}</div>\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-name\">\n                            {country?.label} <span>+{country?.phone}</span>\n                        </div>\n                    </div>\n                )}\n            />\n        </div>\n    );\n};\n\nexport default React.forwardRef<HTMLInputElement, React.PropsWithChildren<EnhancedPhoneNumberField>>(EnhancedPhoneNumberField);\n"]}
+{"version":3,"file":"EnhancedPhoneNumberField.js","sourceRoot":"/","sources":["src/components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAgD;AAEhD,2CAAkD;AAClD,4DAAoC;AACpC,+CAAwI;AACxI,iDAA+C;AAC/C,0DAAuD;AAEvD,uEAAgE;AAChE,iEAAiE;AACjE,4EAAiH;AAEjH,gDAA6C;AAU7C,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAEnC,MAAM,wBAAwB,GAA8E,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACvH,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IACpC,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAChD,IAAA,2BAAmB,EAAmD,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACnG,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,IAAA,wCAAoB,EAAC;QAC3G,GAAG,EAAE,QAAQ,CAAC,OAAO;QACrB,0BAA0B,EAAE,IAAI;QAChC,kBAAkB,EAAE,IAAI;KAC3B,CAAC,CAAC;IAEH,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,kBAAkB,GAAkB,IAAA,eAAO,EAAC,GAAG,EAAE;QACnD,OAAO,gDAAuB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACzC,OAAO,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;QAC9G,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,gDAAuB,CAAC,CAAC,CAAC;IAE9B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAwB,IAAI,CAAC,CAAC;IAExE,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAE1D,MAAM,CAAC,eAAe,EAAE,cAAc,CAAC,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;;QACnD,MAAM,kBAAkB,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,KAAI,kBAAkB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAC7E,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,sBAAsB,CAAC,mCAAI,EAAE,CAAC;QACpE,MAAM,UAAU,GAAG,MAAM,IAAI,kBAAkB,CAAC;QAEhD,MAAM,eAAe,GAAG,MAAA,kBAAkB,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,KAAK,UAAU,CAAC,mCAAI,kBAAkB,CAAC,CAAC,CAAC,CAAC;QAE9G,OAAO,CAAC,eAAe,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAC,CAAC,CAAC;IAEpD,MAAM,SAAS,GAAG,CAAC,GAAwB,EAAe,EAAE;QACxD,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,KAAK,GAAG,CAAgB,CAAC;IAC9E,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,MAAoB,EAAE,MAAe,EAAE,EAAE;;QACjE,IAAI,SAAS,GAAG,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,cAAc,CAAC;QAEzC,IAAI,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC5B,SAAS,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QACvC,CAAC;QAED,MAAM,QAAQ,GAAG,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,mCAAI,eAAe,CAAC,KAAK,GAAG,sBAAsB,GAAG,SAAS,EAAE,CAAC;QAElG,IAAI,KAAK,IAAI,QAAQ,EAAE,CAAC;YACpB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAS,CAAC,CAAC;QAC7D,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAAgC,EAAE,EAAE;QACxD,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAC7B,kBAAkB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,eAA4B,EAAE,EAAE;QACrD,cAAc,EAAE,CAAC;QACjB,kBAAkB,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;IACnD,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,IAAA,oBAAU,EAAC,yBAAyB,EAAE;QACvD,CAAC,KAAK,gBAAgB,EAAE,CAAC,EAAE,CAAC,CAAC,gBAAgB;QAC7C,WAAW,EAAE,SAAS;QACtB,YAAY,EAAE,KAAK,CAAC,QAAQ;KAC/B,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,CAAC,OAAoB,EAAE,EAAE;QAC5C,eAAe,CAAC,OAAO,CAAC,CAAC;QACzB,OAAO;IACX,CAAC,CAAC;IAEF,OAAO,CACH,uCAAK,SAAS,EAAE,YAAY;QACxB,uCAAK,SAAS,EAAC,kCAAkC,EAAC,OAAO,EAAE,gBAAgB;YACvE,uCAAK,SAAS,EAAC,uCAAuC,IAAE,IAAA,iDAAwB,EAAC,eAAe,CAAC,IAAI,CAAC,CAAO;YAC7G,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,QAAQ,GAAI,CAC/B;QACN,uCAAK,SAAS,EAAC,iCAAiC;YAC5C,wCAAM,SAAS,EAAC,wCAAwC;;gBAAG,eAAe,CAAC,KAAK,CAAQ;YACxF,yCACI,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,GAAG,EAAE,QAAQ,EACb,WAAW,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,EACjE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,WAAW,EAAE,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI,EAAE,EACpE,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,cAAc,GACvB;YAEF,uCAAK,SAAS,EAAC,wCAAwC,GAAO,CAC5D;QACN,uCAAK,SAAS,EAAC,iCAAiC,EAAC,GAAG,EAAE,YAAY,GAAQ;QAC1E,8BAAC,eAAM,IACH,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,gBAAgB,EACzB,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,kBAAkB,EAC3B,KAAK,EAAE,eAAe,CAAC,IAAI,EAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EACrD,SAAS,EAAC,MAAM,EAChB,OAAO,EAAC,MAAM,EACd,YAAY,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CACvB,uCAAK,SAAS,EAAC,+CAA+C;gBAC1D,uCAAK,SAAS,EAAC,oDAAoD,IAAE,IAAA,iDAAwB,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAc,CAAC,CAAO;gBAC7H,uCAAK,SAAS,EAAC,oDAAoD,IAC9D,OAAO,aAAP,OAAO;oBAAP,OAAO,CAAE,KAAK;;oBAAE;6BAAQ,OAAO,aAAP,OAAO;wBAAP,OAAO,CAAE,KAAK,CAAQ,CAC7C,CACJ,CACT,GACH,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAK,CAAC,UAAU,CAA2E,wBAAwB,CAAC,CAAC","sourcesContent":["import './EnhancedPhoneNumberField.global.scss';\n\nimport { useCurrentHotel } from '@frontend/hooks';\nimport classNames from 'classnames';\nimport React, { ChangeEvent, ForwardRefRenderFunction, PropsWithChildren, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { useAutoFocusOnSelect } from '@/hooks/AutoFocusOnSelect';\nimport { convertCountryCodeToFlag, CountryType, ListOfCountriesAndCodes } from '@/models/CountryCodesAndNumbers';\n\nimport { Select } from '../../Select/Select';\n\nexport interface EnhancedPhoneNumberFieldProps extends PropsWithChildren<any> {\n    validationStatus?: 'success' | 'error';\n    name?: string;\n    value?: string;\n    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n    disabled?: boolean;\n}\n\nconst PHONE_AND_PREFIX_SPLIT = ' ';\n\nconst EnhancedPhoneNumberField: ForwardRefRenderFunction<HTMLInputElement, EnhancedPhoneNumberFieldProps> = (props, ref) => {\n    const { hotel } = useCurrentHotel();\n    const innerRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => innerRef.current);\n    const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen, isFocused } = useAutoFocusOnSelect({\n        ref: innerRef.current,\n        onlyAutoOpenWhenInputEmpty: true,\n        disableOpenOnFocus: true,\n    });\n\n    const { t } = useTranslation();\n\n    const organizedCountries: CountryType[] = useMemo(() => {\n        return ListOfCountriesAndCodes.sort((a, b) => {\n            return `${(a.suggested ? '000' : '') + a.label}`.localeCompare(`${(b.suggested ? '000' : '') + b.label}`);\n        });\n    }, [ListOfCountriesAndCodes]);\n\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n    const { validationStatus, name, onChange, value } = props;\n\n    const [selectedCountry, subscriberCode] = useMemo(() => {\n        const defaultCountryCode = hotel?.countryCode || organizedCountries[0].phone;\n        const [prefix, number] = value?.split(PHONE_AND_PREFIX_SPLIT) ?? [];\n        const codeToFind = prefix || defaultCountryCode;\n\n        const selectedCountry = organizedCountries.find(({ phone }) => phone === codeToFind) ?? organizedCountries[0];\n\n        return [selectedCountry, number ?? ''];\n    }, [value, organizedCountries, hotel?.countryCode]);\n\n    const getOption = (key: CountryType['code']): CountryType => {\n        return organizedCountries.find(({ code }) => code === key) as CountryType;\n    };\n\n    const raiseOnChangeEvent = (prefix?: CountryType, suffix?: string) => {\n        let newSuffix = suffix ?? subscriberCode;\n\n        if (newSuffix.startsWith('0')) {\n            newSuffix = newSuffix.substring(1);\n        }\n\n        const newValue = `${prefix?.phone ?? selectedCountry.phone}${PHONE_AND_PREFIX_SPLIT}${newSuffix}`;\n\n        if (value != newValue) {\n            onChange?.({ target: { name, value: newValue } } as any);\n        }\n    };\n\n    const onInputChanged = (e: ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value;\n        raiseOnChangeEvent(undefined, value);\n    };\n\n    const onPrefixChanged = (selectedCountry: CountryType) => {\n        onItemSelected();\n        raiseOnChangeEvent(selectedCountry, undefined);\n    };\n\n    const fieldClasses = classNames('rs-enhanced-phone-field', {\n        [`--${validationStatus}`]: !!validationStatus,\n        '--focused': isFocused,\n        '--disabled': props.disabled,\n    });\n    const onCountryClick = (country: CountryType) => {\n        onPrefixChanged(country);\n        return;\n    };\n\n    return (\n        <div className={fieldClasses}>\n            <div className=\"rs-enhanced-phone-field--country\" onClick={onTriggerClicked}>\n                <div className=\"rs-enhanced-phone-field--country-icon\">{convertCountryCodeToFlag(selectedCountry.code)}</div>\n                <Icon icon={IconType.Dropdown} />\n            </div>\n            <div className=\"rs-enhanced-phone-field--number\">\n                <span className=\"rs-enhanced-phone-field--number-prefix\">+{selectedCountry.phone}</span>\n                <input\n                    disabled={props.disabled}\n                    ref={innerRef}\n                    placeholder={t(Translation.Step.Confirmation.Inputs.Phone) + ' *'}\n                    type=\"number\"\n                    style={{ paddingLeft: selectedCountry.phone.length * 8 + 20 + 'px' }}\n                    onChange={onInputChanged}\n                    value={subscriberCode}\n                />\n\n                <div className=\"rs-enhanced-phone-field--number-status\"></div>\n            </div>\n            <div className=\"rs-enhanced-phone-field--anchor\" ref={setContainer}></div>\n            <Select<CountryType, 'code'>\n                open={isDropdownOpen}\n                onClose={onDropdownClosed}\n                target={container}\n                options={organizedCountries}\n                value={selectedCountry.code}\n                onChange={(value) => onCountryClick(getOption(value))}\n                labelName=\"code\"\n                keyName=\"code\"\n                renderOption={(country) => (\n                    <div className=\"rs-enhanced-phone-field--suggest-list-country\">\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-icon\">{convertCountryCodeToFlag(country?.code as string)}</div>\n                        <div className=\"rs-enhanced-phone-field--suggest-list-country-name\">\n                            {country?.label} <span>+{country?.phone}</span>\n                        </div>\n                    </div>\n                )}\n            />\n        </div>\n    );\n};\n\nexport default React.forwardRef<HTMLInputElement, React.PropsWithChildren<EnhancedPhoneNumberFieldProps>>(EnhancedPhoneNumberField);\n"]}

package/dist/src/components/members/SignInModal/EmailAndFullnameMemberModal.d.ts

@@ -2,6 +2,10 @@ import { FC } from 'react';
 import { CommonMemberModalProps } from './ExternalMemberModal';
 type EmailAndFullnameMemberModalProps = CommonMemberModalProps & {
     isMemberNumberRequired?: boolean;
+    enableMemberNumber?: boolean;
+    enablePostcode?: boolean;
+    enableMobilePhone?: boolean;
+    enableMarketingOptIn?: boolean;
 };
 declare const EmailAndFullnameMemberModal: FC<EmailAndFullnameMemberModalProps>;
 export default EmailAndFullnameMemberModal;

package/dist/src/components/members/SignInModal/EmailAndFullnameMemberModal.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -15,41 +48,83 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const Icon_1 = require("../../generic/Icon/Icon");
 const Translation_1 = require("../../../translations/Translation");
-const ExternalMemberModal_1 = __importDefault(require("./ExternalMemberModal"));
+const ExternalMemberModal_1 = __importStar(require("./ExternalMemberModal"));
 const EmailAndFullnameMemberModal = (_a) => {
-    var { isMemberNumberRequired = true } = _a, props = __rest(_a, ["isMemberNumberRequired"]);
+    var { isMemberNumberRequired = true, enableMemberNumber = true, enablePostcode = false, enableMobilePhone = false, enableMarketingOptIn = false } = _a, props = __rest(_a, ["isMemberNumberRequired", "enableMemberNumber", "enablePostcode", "enableMobilePhone", "enableMarketingOptIn"]);
+    const methods = (0, react_hook_form_1.useForm)({
+        mode: 'onSubmit',
+    });
     const { t } = (0, react_i18next_1.useTranslation)();
-    return (react_1.default.createElement(ExternalMemberModal_1.default, Object.assign({}, props, { fields: [
-            {
-                name: 'memberNumber',
-                icon: Icon_1.IconType.Star,
-                label: t(Translation_1.Translation.ExternalMemberPopup.Fields.MemberNumber),
-                isMasked: false,
-                required: isMemberNumberRequired,
-                helperText: !isMemberNumberRequired ? t(Translation_1.Translation.ExternalMemberPopup.Fields.MemberNumberOptionalBenefits) : undefined,
-            },
-            {
-                name: 'firstName',
-                icon: Icon_1.IconType.Person,
-                label: t(Translation_1.Translation.Navigation.SignUp.Inputs.FirstName),
-                isMasked: false,
-            },
-            {
-                name: 'lastName',
-                icon: Icon_1.IconType.Person,
-                label: t(Translation_1.Translation.Navigation.SignUp.Inputs.LastName),
-                isMasked: false,
-            },
-            {
-                name: 'email',
-                icon: Icon_1.IconType.Email,
-                label: t(Translation_1.Translation.Navigation.SignIn.EmailAddress),
-                isMasked: false,
-            },
-        ] })));
+    const fields = buildFields(t, {
+        enableMemberNumber,
+        isMemberNumberRequired,
+        enablePostcode,
+        enableMobilePhone,
+        enableMarketingOptIn,
+    });
+    return (react_1.default.createElement(react_hook_form_1.FormProvider, Object.assign({}, methods),
+        react_1.default.createElement(ExternalMemberModal_1.default, Object.assign({}, props, { fields: fields }))));
+};
+const buildFields = (t, { enableMemberNumber, isMemberNumberRequired, enablePostcode, enableMobilePhone, enableMarketingOptIn, }) => {
+    const fields = [];
+    if (enableMemberNumber) {
+        fields.push({
+            name: 'memberNumber',
+            icon: Icon_1.IconType.Star,
+            label: t(Translation_1.Translation.ExternalMemberPopup.Fields.MemberNumber),
+            isMasked: false,
+            required: isMemberNumberRequired,
+            helperText: !isMemberNumberRequired ? t(Translation_1.Translation.ExternalMemberPopup.Fields.MemberNumberOptionalBenefits) : undefined,
+        });
+    }
+    fields.push({
+        name: 'firstName',
+        icon: Icon_1.IconType.Person,
+        label: t(Translation_1.Translation.Navigation.SignUp.Inputs.FirstName),
+        isMasked: false,
+    }, {
+        name: 'lastName',
+        icon: Icon_1.IconType.Person,
+        label: t(Translation_1.Translation.Navigation.SignUp.Inputs.LastName),
+        isMasked: false,
+    }, {
+        name: 'email',
+        icon: Icon_1.IconType.Email,
+        label: t(Translation_1.Translation.Navigation.SignIn.EmailAddress),
+        isMasked: false,
+    });
+    if (enablePostcode) {
+        fields.push({
+            name: 'postalCode',
+            icon: Icon_1.IconType.Map,
+            label: t(Translation_1.Translation.ExternalMemberPopup.Fields.PostalCode),
+            isMasked: false,
+        });
+    }
+    if (enableMobilePhone) {
+        fields.push({
+            name: 'mobilePhone',
+            icon: Icon_1.IconType.Phone,
+            label: t(Translation_1.Translation.ExternalMemberPopup.Fields.MobilePhone),
+            isMasked: false,
+            type: ExternalMemberModal_1.ExternalMemberModelFieldType.Phone,
+        });
+    }
+    if (enableMarketingOptIn) {
+        fields.push({
+            name: 'marketingOptIn',
+            icon: Icon_1.IconType.Info,
+            label: t(Translation_1.Translation.ExternalMemberPopup.Fields.MarketingOptIn),
+            isMasked: false,
+            type: ExternalMemberModal_1.ExternalMemberModelFieldType.CheckBox,
+            required: false,
+        });
+    }
+    return fields;
 };
 exports.default = EmailAndFullnameMemberModal;
 //# sourceMappingURL=EmailAndFullnameMemberModal.js.map

package/dist/src/components/members/SignInModal/EmailAndFullnameMemberModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmailAndFullnameMemberModal.js","sourceRoot":"/","sources":["src/components/members/SignInModal/EmailAndFullnameMemberModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AACA,kDAAkC;AAClC,iDAA+C;AAE/C,yDAA0D;AAC1D,4DAAyD;AAEzD,gFAAoF;AAMpF,MAAM,2BAA2B,GAAyC,CAAC,EAA2C,EAAE,EAAE;QAA/C,EAAE,sBAAsB,GAAG,IAAI,OAAY,EAAP,KAAK,cAAzC,0BAA2C,CAAF;IAChH,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,OAAO,CACH,8BAAC,6BAAmB,oBACZ,KAAK,IACT,MAAM,EAAE;YACJ;gBACI,IAAI,EAAE,cAAc;gBACpB,IAAI,EAAE,eAAQ,CAAC,IAAI;gBACnB,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,mBAAmB,CAAC,MAAM,CAAC,YAAY,CAAC;gBAC7D,QAAQ,EAAE,KAAK;gBACf,QAAQ,EAAE,sBAAsB;gBAChC,UAAU,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAW,CAAC,mBAAmB,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC,SAAS;aAC3H;YACD;gBACI,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,eAAQ,CAAC,MAAM;gBACrB,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC;gBACxD,QAAQ,EAAE,KAAK;aAClB;YACD;gBACI,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,eAAQ,CAAC,MAAM;gBACrB,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;gBACvD,QAAQ,EAAE,KAAK;aAClB;YACD;gBACI,IAAI,EAAE,OAAO;gBACb,IAAI,EAAE,eAAQ,CAAC,KAAK;gBACpB,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC;gBACpD,QAAQ,EAAE,KAAK;aAClB;SACJ,IACH,CACL,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,2BAA2B,CAAC","sourcesContent":["import { IMemberVerification } from '@roomstay/core';\nimport React, { FC } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport { Translation } from '@/translations/Translation';\n\nimport ExternalMemberModal, { CommonMemberModalProps } from './ExternalMemberModal';\n\ntype EmailAndFullnameMemberModalProps = CommonMemberModalProps & {\n    isMemberNumberRequired?: boolean;\n};\n\nconst EmailAndFullnameMemberModal: FC<EmailAndFullnameMemberModalProps> = ({ isMemberNumberRequired = true, ...props }) => {\n    const { t } = useTranslation();\n\n    return (\n        <ExternalMemberModal<IMemberVerification>\n            {...props}\n            fields={[\n                {\n                    name: 'memberNumber',\n                    icon: IconType.Star,\n                    label: t(Translation.ExternalMemberPopup.Fields.MemberNumber),\n                    isMasked: false,\n                    required: isMemberNumberRequired,\n                    helperText: !isMemberNumberRequired ? t(Translation.ExternalMemberPopup.Fields.MemberNumberOptionalBenefits) : undefined,\n                },\n                {\n                    name: 'firstName',\n                    icon: IconType.Person,\n                    label: t(Translation.Navigation.SignUp.Inputs.FirstName),\n                    isMasked: false,\n                },\n                {\n                    name: 'lastName',\n                    icon: IconType.Person,\n                    label: t(Translation.Navigation.SignUp.Inputs.LastName),\n                    isMasked: false,\n                },\n                {\n                    name: 'email',\n                    icon: IconType.Email,\n                    label: t(Translation.Navigation.SignIn.EmailAddress),\n                    isMasked: false,\n                },\n            ]}\n        />\n    );\n};\n\nexport default EmailAndFullnameMemberModal;\n"]}
+{"version":3,"file":"EmailAndFullnameMemberModal.js","sourceRoot":"/","sources":["src/components/members/SignInModal/EmailAndFullnameMemberModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { IMemberVerification } from '@roomstay/core';\nimport React, { FC } from 'react';\nimport { FormProvider, useForm } from 'react-hook-form';\nimport { TFunction, useTranslation } from 'react-i18next';\n\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport { Translation } from '@/translations/Translation';\n\nimport ExternalMemberModal, { CommonMemberModalProps, ExternalMemberModelField, ExternalMemberModelFieldType } from './ExternalMemberModal';\n\ntype EmailAndFullnameFields = IMemberVerification & {\n    postalCode?: string;\n    mobilePhone?: string;\n    marketingOptIn?: string;\n};\n\ntype EmailAndFullnameMemberModalProps = CommonMemberModalProps & {\n    isMemberNumberRequired?: boolean;\n    enableMemberNumber?: boolean;\n    enablePostcode?: boolean;\n    enableMobilePhone?: boolean;\n    enableMarketingOptIn?: boolean;\n};\n\nconst EmailAndFullnameMemberModal: FC<EmailAndFullnameMemberModalProps> = ({\n    isMemberNumberRequired = true,\n    enableMemberNumber = true,\n    enablePostcode = false,\n    enableMobilePhone = false,\n    enableMarketingOptIn = false,\n    ...props\n}) => {\n    const methods = useForm<Record<string, string>>({\n        mode: 'onSubmit',\n    });\n    const { t } = useTranslation();\n    const fields = buildFields(t, {\n        enableMemberNumber,\n        isMemberNumberRequired,\n        enablePostcode,\n        enableMobilePhone,\n        enableMarketingOptIn,\n    });\n    return (\n        <FormProvider {...methods}>\n            <ExternalMemberModal<EmailAndFullnameFields> {...props} fields={fields} />\n        </FormProvider>\n    );\n};\n\nconst buildFields = (\n    t: TFunction<'translation', undefined>,\n    {\n        enableMemberNumber,\n        isMemberNumberRequired,\n        enablePostcode,\n        enableMobilePhone,\n        enableMarketingOptIn,\n    }: {\n        enableMemberNumber: boolean;\n        isMemberNumberRequired: boolean;\n        enablePostcode: boolean;\n        enableMobilePhone: boolean;\n        enableMarketingOptIn: boolean;\n    }\n): ExternalMemberModelField<EmailAndFullnameFields>[] => {\n    const fields: ExternalMemberModelField<EmailAndFullnameFields>[] = [];\n\n    if (enableMemberNumber) {\n        fields.push({\n            name: 'memberNumber',\n            icon: IconType.Star,\n            label: t(Translation.ExternalMemberPopup.Fields.MemberNumber),\n            isMasked: false,\n            required: isMemberNumberRequired,\n            helperText: !isMemberNumberRequired ? t(Translation.ExternalMemberPopup.Fields.MemberNumberOptionalBenefits) : undefined,\n        });\n    }\n\n    fields.push(\n        {\n            name: 'firstName',\n            icon: IconType.Person,\n            label: t(Translation.Navigation.SignUp.Inputs.FirstName),\n            isMasked: false,\n        },\n        {\n            name: 'lastName',\n            icon: IconType.Person,\n            label: t(Translation.Navigation.SignUp.Inputs.LastName),\n            isMasked: false,\n        },\n        {\n            name: 'email',\n            icon: IconType.Email,\n            label: t(Translation.Navigation.SignIn.EmailAddress),\n            isMasked: false,\n        }\n    );\n\n    if (enablePostcode) {\n        fields.push({\n            name: 'postalCode',\n            icon: IconType.Map,\n            label: t(Translation.ExternalMemberPopup.Fields.PostalCode),\n            isMasked: false,\n        });\n    }\n\n    if (enableMobilePhone) {\n        fields.push({\n            name: 'mobilePhone',\n            icon: IconType.Phone,\n            label: t(Translation.ExternalMemberPopup.Fields.MobilePhone),\n            isMasked: false,\n            type: ExternalMemberModelFieldType.Phone,\n        });\n    }\n\n    if (enableMarketingOptIn) {\n        fields.push({\n            name: 'marketingOptIn',\n            icon: IconType.Info,\n            label: t(Translation.ExternalMemberPopup.Fields.MarketingOptIn),\n            isMasked: false,\n            type: ExternalMemberModelFieldType.CheckBox,\n            required: false,\n        });\n    }\n\n    return fields;\n};\n\nexport default EmailAndFullnameMemberModal;\n"]}

package/dist/src/components/members/SignInModal/ExternalMemberModal.d.ts

@@ -12,17 +12,23 @@ export type CommonMemberModalProps = {
     imageSize: Property.ObjectFit;
     provider: EMembershipProvider;
 };
-type ExternalMemberModalProps<T extends FieldValues> = CommonMemberModalProps & {
+export type ExternalMemberModalProps<T extends FieldValues> = CommonMemberModalProps & {
     fields: ExternalMemberModelField<T>[];
 };
-type ExternalMemberModelField<T extends FieldValues> = {
+export declare enum ExternalMemberModelFieldType {
+    TextBox = "TextBox",
+    CheckBox = "CheckBox",
+    Phone = "Phone"
+}
+export type ExternalMemberModelField<T extends FieldValues> = {
     name: keyof T & string;
     icon: IconType;
     label: string;
     profileMapping?: keyof UserProfile;
-    isMasked: boolean;
+    isMasked?: boolean;
     required?: boolean;
     helperText?: string;
+    type?: ExternalMemberModelFieldType;
 };
 declare const ExternalMemberModal: <T extends FieldValues & IMemberVerification>(props: ExternalMemberModalProps<T>) => React.JSX.Element;
 export default ExternalMemberModal;