@hhgtech/hhg-components 1.29.380 → 1.29.381

package/build/lead.js

@@ -2,55 +2,55 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-92cccef3.js');
+var tslib_es6 = require('./tslib.es6-a6a9f13b.js');
 var React = require('react');
 var core = require('@mantine/core');
 var dayjs = require('dayjs');
 var debounce = require('lodash/debounce');
 var form = require('@mantine/form');
-var index = require('./index-fa7abbff.js');
+var index = require('./index-23a4761c.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$1 = require('./index-c2c283f8.js');
-var translationsContext = require('./translationsContext-d63b6d32.js');
-var utils$1 = require('./utils-7ba0038a.js');
-var index$2 = require('./index-25f2e7a5.js');
-var index$3 = require('./index-ae1a5588.js');
-var index$5 = require('./index-7cc3b1ef.js');
-var index$4 = require('./index-86fd931c.js');
-require('./index.styles-6dd86c20.js');
+var index$1 = require('./index-9115436e.js');
+var translationsContext = require('./translationsContext-7a30a3fa.js');
+var utils$1 = require('./utils-7ee185ca.js');
+var index$2 = require('./index-45b964ed.js');
+var index$3 = require('./index-8707f8e5.js');
+var index$5 = require('./index-8714b332.js');
+var index$4 = require('./index-0a3f13a5.js');
+require('./index.styles-d7ac3518.js');
 var hooks = require('@mantine/hooks');
-require('./useMantineLocale-e946ce4a.js');
-var index$9 = require('./index-ad7155cf.js');
-require('./index-db44e8cb.js');
-var index$7 = require('./index-1ee4ebb8.js');
-require('./other-eb0ff2f6.js');
-require('./index-9012f1d1.js');
-var utils = require('./utils-8a20288d.js');
+require('./useMantineLocale-db8770bf.js');
+var index$a = require('./index-2a07fb0b.js');
+require('./index-4c891d77.js');
+var index$7 = require('./index-d02f5dda.js');
+require('./other-9def5955.js');
+require('./index-1b841142.js');
+var utils = require('./utils-4b9568e0.js');
 var dates = require('@mantine/dates');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-c514fa2d.js');
-var index$6 = require('./index-b0c1d50a.js');
-var translationsProvider = require('./translationsProvider-f3fdeb3e.js');
-var Locale = require('./Locale-59ccf941.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-0adbb147.js');
+var index$6 = require('./index-605ebe63.js');
+var translationsProvider = require('./translationsProvider-ecb7bd4f.js');
+var Locale = require('./Locale-dd0fb27d.js');
 var uuid = require('uuid');
 var PhoneInputBase = require('react-phone-number-input');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
 var react = require('@emotion/react');
-var togetherComponentGlobalContext = require('./utils-aea77f4a.js');
-var index$8 = require('./index-981b4867.js');
-var index$b = require('./index-e16696c3.js');
-var useScreenSize = require('./useScreenSize-30f50b76.js');
+var togetherComponentGlobalContext = require('./utils-d479b508.js');
+var index$8 = require('./index-1ffee842.js');
+var useScreenSize = require('./useScreenSize-b9202bdd.js');
+var index$9 = require('./index-f1671261.js');
 var ReactDOM = require('react-dom');
-var index$a = require('./index-b9594844.js');
-var InputDate = require('./InputDate-89d470b8.js');
-var Close = require('./Close-cc3de432.js');
+var index$b = require('./index-7a3a099e.js');
+var InputDate = require('./InputDate-daa96c7f.js');
+var Close = require('./Close-895f69a6.js');
 require('./constantsIsProduction.js');
-require('./normalizeLink-4fe5440a.js');
+require('./normalizeLink-b3396801.js');
 require('./constantsDomainLocales.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-6e2f8c19.js');
+require('./useUniqueId-9efa6c97.js');
 require('./constantsSite.js');
 require('@hhgtech/icons/core');
 require('@mantine/notifications');
@@ -67,11 +67,11 @@ require('./i18n-values/tl-PH.js');
 require('./i18n-values/vi-VN.js');
 require('./i18n-values/vi-VN_MB.js');
 require('./i18n-values/zh-TW.js');
-require('./index-3020fcb3.js');
+require('./index-3a01b341.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-bb30dda6.js');
+require('./constants-ab4ab9cf.js');
 require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -248,6 +248,23 @@ const leadGenFieldNamePhone = (listBlockAdded) => {
     ].includes(name))
         .map(({ data }) => data.value);
 };
+const leadGenFieldRequired = (blocks) => {
+    if (!(blocks === null || blocks === void 0 ? void 0 : blocks.length)) {
+        return [];
+    }
+    return blocks
+        .map(({ data, name, id }) => {
+        const { required, value } = data;
+        if (name === LEADGEN_BLOCK.TncBlock && id) {
+            return `TNC-${id}`;
+        }
+        if (required) {
+            return value;
+        }
+        return;
+    })
+        .filter(Boolean);
+};
 const SSO_MAP_LEAD = ['name', 'email', 'birthday', 'phone', 'gender'];
 const LEAD_LOCALE_DATA = {
     'vi-VN': {
@@ -1985,7 +2002,7 @@ const LeadGenContext = React.createContext({
     subscriptionTitle: '',
 });
 const LeadGenContextProvider = (props) => {
-    const { campaign_code: campaignCodeProps, apiSsoUrl, apiLeadUrl, apiSubotUrl, locale: localeProps, forceCampaign: forceCampaignProps, extraValues, articleId = 1, categoryId = 1, siteDomain: site_domain, children, } = props;
+    const { campaign_code: campaignCodeProps, apiSsoUrl, apiLeadUrl, apiSubotUrl, locale: localeProps, forceCampaign: forceCampaignProps, extraValues, articleId = 1, categoryId = 1, siteDomain: site_domain, children } = props, restProps = tslib_es6.__rest(props, ["campaign_code", "apiSsoUrl", "apiLeadUrl", "apiSubotUrl", "locale", "forceCampaign", "extraValues", "articleId", "categoryId", "siteDomain", "children"]);
     const [forceCampaign, setForceCampaign] = React.useState(forceCampaignProps);
     const [subscriptionInfo, setSubscriptionInfo] = React.useState({
         subscriptionIcon: '',
@@ -1995,7 +2012,6 @@ const LeadGenContextProvider = (props) => {
     const locale = React.useMemo(() => {
         return localeProps || Locale.LOCALE['PhilippinesEnglish'];
     }, [localeProps]);
-    const leadGenContextValue = React.useMemo(() => (Object.assign(Object.assign({}, props), { forceCampaign })), [...Object.values(props), forceCampaign]);
     const { url, campaign_id, campaign_code, cookie_id, ga_client_id, category_id, article_id, article_title, } = React.useMemo(() => ({
         url: location.href.toLowerCase() || '',
         cookie_id: miscCookieHelper.getCookie('hhg-id') || null,
@@ -2042,17 +2058,21 @@ const LeadGenContextProvider = (props) => {
         ga_client_id,
     ]);
     const impression = React.useCallback((value) => {
-        return Service.campaignPostImpression({
+        const impression = {
             url: (value === null || value === void 0 ? void 0 : value.url) || url,
             action: (value === null || value === void 0 ? void 0 : value.action) || LEADGEN_ACTIONS.SCROLL,
             code: (value === null || value === void 0 ? void 0 : value.code) || campaign_code,
             title_article: (value === null || value === void 0 ? void 0 : value.title_article) || article_title,
             cookie_id: (value === null || value === void 0 ? void 0 : value.cookie_id) || cookie_id,
             ga_client_id: (value === null || value === void 0 ? void 0 : value.ga_client_id) || ga_client_id,
-            extra: (value === null || value === void 0 ? void 0 : value.extra) || Object.assign({ cookie_id,
-                article_id, subscription_title: subscriptionInfo.subscriptionTitle, subscription_type: subscriptionInfo.subscriptionType }, extraValues),
             referrer: value === null || value === void 0 ? void 0 : value.referrer,
-        });
+            extra: Object.assign(Object.assign(Object.assign({}, value === null || value === void 0 ? void 0 : value.extra), { cookie_id,
+                article_id, subscription_title: subscriptionInfo.subscriptionTitle, subscription_type: subscriptionInfo.subscriptionType }), extraValues),
+        };
+        if (!impression.extra.subscription_title) {
+            delete impression.extra.subscription_title;
+        }
+        return Service.campaignPostImpression(impression);
     }, [
         extraValues,
         campaign_id,
@@ -2067,7 +2087,7 @@ const LeadGenContextProvider = (props) => {
     ]);
     React.useEffect(() => {
         if (forceCampaignProps) {
-            setForceCampaign(forceCampaignProps);
+            setForceCampaign(formatCampaignDetail(forceCampaignProps));
             return;
         }
         /** For Subscription Box */
@@ -2092,7 +2112,7 @@ const LeadGenContextProvider = (props) => {
         if (campaignCodeProps) {
             fetchCampaign(campaignCodeProps);
         }
-    }, [campaignCodeProps, categoryId]);
+    }, [forceCampaignProps, campaignCodeProps, categoryId]);
     React.useEffect(() => {
         leadStore.apiSsoUrl = apiSsoUrl;
         leadStore.apiLeadUrl = apiLeadUrl;
@@ -2101,14 +2121,19 @@ const LeadGenContextProvider = (props) => {
     if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
         return null;
     }
-    return (React__default["default"].createElement(LeadGenContext.Provider, { value: Object.assign(Object.assign(Object.assign({}, leadGenContextValue), subscriptionInfo), { submit,
+    return (React__default["default"].createElement(LeadGenContext.Provider, { value: Object.assign(Object.assign(Object.assign({}, restProps), subscriptionInfo), { campaign_code: campaignCodeProps, apiSsoUrl,
+            apiLeadUrl,
+            apiSubotUrl, locale: localeProps, extraValues,
+            articleId,
+            categoryId, siteDomain: site_domain, forceCampaign,
+            submit,
             submitSubscriptionBox,
             impression }) },
         React__default["default"].createElement(LeadGenTranslationProvider, { locale: locale }, children)));
 };
 const useLeadGenContext = () => {
     const context = React.useContext(LeadGenContext);
-    return Object.assign(Object.assign({}, context), { apiLeadUrl: context.apiLeadUrl || leadStore.apiLeadUrl, apiSubotUrl: context.apiSubotUrl || leadStore.apiSubotUrl });
+    return Object.assign(Object.assign({}, context), { apiSsoUrl: context.apiSsoUrl || leadStore.apiSsoUrl, apiLeadUrl: context.apiLeadUrl || leadStore.apiLeadUrl, apiSubotUrl: context.apiSubotUrl || leadStore.apiSubotUrl });
 };
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -2386,10 +2411,17 @@ const StyledLeadGenSubscriptionBoxHeader = styled__default["default"].div `
     flex: 1;
     min-width: 0;
     color: ${miscTheme.theme.colors.gray900};
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 400;
     line-height: 1.4;
-    letter-spacing: -0.8px;
+    letter-spacing: -0.4px;
+  }
+
+  ${utils$1.MediaQueries.mbUp} {
+    .leadgen-title {
+      font-size: 18px;
+      letter-spacing: -0.8px;
+    }
   }
 `;
 const StyledLeadGenSubscriptionBox = styled__default["default"].div `
@@ -2818,13 +2850,6 @@ const TextField$1 = (props) => {
         const $focusEl = $textEl.item($textEl.length - 1);
         if ($focusEl) {
             $focusEl.focus();
-            setTimeout(() => {
-                $focusEl.scrollIntoView({
-                    behavior: 'auto',
-                    block: 'center',
-                    inline: 'start',
-                });
-            }, 100);
         }
     }, [shrink]);
     React.useEffect(() => {
@@ -3293,6 +3318,155 @@ const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, su
                     React__default["default"].createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
 };
 
+const StyledLeadGenLightBoxBFooter = styled__default["default"].div `
+  padding-top: calc(var(--spacing-y, 20px) * 8 / 20);
+  padding-inline: var(--spacing-x, 20px);
+  padding-bottom: var(--spacing-y, 20px);
+`;
+const StyledLeadGenLightBoxBBody = styled__default["default"].div `
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding-inline: var(--spacing-y, 20px);
+  padding-block: calc(var(--spacing-x, 20px) * 8 / 20);
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+`;
+const StyledLeadGenLightBoxBHeader = styled__default["default"].div `
+  display: flex;
+  padding-top: var(--spacing-y, 20px);
+  padding-inline: var(--spacing-x, 20px);
+  padding-bottom: calc(var(--spacing-y, 20px) * 8 / 20);
+`;
+const StyledLeadGenLightBoxBWrapper = styled__default["default"].div `
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+const StyledLeadGenLightBoxB = styled__default["default"].div `
+  --spacing-x: 20px;
+  --spacing-y: 20px;
+  --close-width: 24px;
+  --close-height: 24px;
+
+  // For old version, Wrap every thing in children
+  &[data-type='LightBoxB_typeA'] {
+    position: fixed;
+    inset: 0;
+    z-index: ${index$7.ZINDEX_SSO + 1};
+    background-color: #fff;
+
+    .leadgen-wrapper,
+    .leadgen-inner,
+    .leadgen-form {
+      height: 100%;
+    }
+    .leadgen-content {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+    .leadgen-header {
+      display: none;
+    }
+    .leadgen-title {
+      padding-right: calc(var(--close-width, 24px) * 50 / 24);
+    }
+    .leadgen-description {
+      display: none;
+    }
+    .leadgen-body {
+      flex: 1;
+      min-height: 0;
+    }
+
+    .leadgen-close_btn {
+      top: var(--spacing-y, 20px);
+      right: var(--spacing-x, 20px);
+      width: var(--close-width, 24px) !important;
+      height: var(--close-height, 24px);
+      box-shadow: none;
+      font-size: 24px;
+    }
+
+    .leadgen-empty_footer {
+      .leadgen-btn {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+
+    .leadgen-form_body {
+      overflow: auto;
+      animation: scrolling forwards;
+      animation-timeline: scroll(self);
+    }
+    @keyframes scrolling {
+      0%,
+      to {
+        border-bottom: 1px solid ${miscTheme.theme.colors.neutral100};
+      }
+    }
+  }
+`;
+
+const PREFIX_CLS = 'LightBoxB_typeA';
+const LeadGenLightBoxBTypeA = (props) => {
+    const { visible, onVisible, icon, title, buttonText, blocks, children } = props, restProps = tslib_es6.__rest(props, ["visible", "onVisible", "icon", "title", "buttonText", "blocks", "children"]);
+    const formRef = React.useRef();
+    const [open, setOpen] = React.useState(visible);
+    const onOpenChange = React.useCallback((open) => {
+        onVisible === null || onVisible === void 0 ? void 0 : onVisible(open);
+    }, [onVisible]);
+    const iconComp = React.useMemo(() => {
+        if (!icon) {
+            return null;
+        }
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    }, [icon]);
+    const titleComp = React.useMemo(() => {
+        if (!title) {
+            return null;
+        }
+        return title;
+    }, [title]);
+    const childrenComp = React.useMemo(() => {
+        if (children) {
+            return children;
+        }
+        return (React__default["default"].createElement(StyledLeadGenLightBoxBWrapper, { className: `${PREFIX_CLS}_wrapper lightboxB_wrapper` },
+            React__default["default"].createElement(StyledLeadGenLightBoxBHeader, { className: `${PREFIX_CLS}_header lightboxB_header` },
+                React__default["default"].createElement("div", { className: "lightBoxB_header_icon" }, iconComp),
+                React__default["default"].createElement("div", { className: "lightBoxB_header_title" }, titleComp),
+                React__default["default"].createElement("div", { className: "lightBoxB_header_close", onClick: () => onOpenChange(false) },
+                    React__default["default"].createElement(CloseButton, null))),
+            React__default["default"].createElement(StyledLeadGenLightBoxBBody, { className: `${PREFIX_CLS}_body lightboxB_body` },
+                React__default["default"].createElement(LeadGenForm, Object.assign({ ref: formRef, blocks: blocks }, restProps))),
+            React__default["default"].createElement(StyledLeadGenLightBoxBFooter, { className: `${PREFIX_CLS}_footer lightboxB_footer` },
+                React__default["default"].createElement(index$4.Button, { onClick: () => { var _a; return (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.submit(); } }, buttonText))));
+    }, [children, onOpenChange]);
+    React.useEffect(() => {
+        setOpen(visible);
+    }, [visible]);
+    return (React__default["default"].createElement(index$9.DrawerComponent, { open: open, onOpenChange: onOpenChange },
+        React__default["default"].createElement(StyledLeadGenLightBoxB, { "data-type": "LightBoxB_typeA" }, childrenComp)));
+};
+
+const LeadGenLightBoxB = (props) => {
+    return React__default["default"].createElement(LeadGenLightBoxBTypeA, Object.assign({}, props));
+};
+
 const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
     const { primaryColor } = React.useContext(LeadGenContext$1);
     const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
@@ -3788,13 +3962,6 @@ const TextField = (props) => {
         const $focusEl = $textEl.item($textEl.length - 1);
         if ($focusEl) {
             $focusEl.focus();
-            setTimeout(() => {
-                $focusEl.scrollIntoView({
-                    behavior: 'auto',
-                    block: 'center',
-                    inline: 'start',
-                });
-            }, 100);
         }
     }, [shrink]);
     React.useEffect(() => {
@@ -3817,7 +3984,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
     const labelTuples = React.useMemo(() => {
         return ((index$7.ISO_FORMAT === null || index$7.ISO_FORMAT === void 0 ? void 0 : index$7.ISO_FORMAT[locale]) || index$7.ISO_FORMAT['vi-VN']).dateFormat
             .split('/')
-            .map((key) => { var _a; return t((_a = index$9.COMMON_DATE_TRANSLATE_KEY === null || index$9.COMMON_DATE_TRANSLATE_KEY === void 0 ? void 0 : index$9.COMMON_DATE_TRANSLATE_KEY[key]) === null || _a === void 0 ? void 0 : _a.id); });
+            .map((key) => { var _a; return t((_a = index$a.COMMON_DATE_TRANSLATE_KEY === null || index$a.COMMON_DATE_TRANSLATE_KEY === void 0 ? void 0 : index$a.COMMON_DATE_TRANSLATE_KEY[key]) === null || _a === void 0 ? void 0 : _a.id); });
     }, [locale]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, listBlockAdded.map((b, index) => {
         var _a;
@@ -3876,7 +4043,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
             case 'LinkButtonBlock':
                 return (React__default["default"].createElement("div", { key: index },
                     React__default["default"].createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
-                        React__default["default"].createElement(index$a.Button, { type: "button", size: "md", className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
+                        React__default["default"].createElement(index$b.Button, { type: "button", size: "md", className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
                                 onClose === null || onClose === void 0 ? void 0 : onClose();
                                 onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
                             } }, value))));
@@ -3981,8 +4148,9 @@ const StyledFormContainer = styled__default["default"].div `
  *
  */
 const FormContainer = (_a) => {
-    var { title, titleAlign, description, descriptionAlign, className, style, children, header, footer } = _a, restProps = tslib_es6.__rest(_a, ["title", "titleAlign", "description", "descriptionAlign", "className", "style", "children", "header", "footer"]);
+    var { iconComponent, title, titleAlign, description, descriptionAlign, className, style, children, header, footer } = _a, restProps = tslib_es6.__rest(_a, ["iconComponent", "title", "titleAlign", "description", "descriptionAlign", "className", "style", "children", "header", "footer"]);
     const HeaderContent = (React__default["default"].createElement("div", { className: "leadgen-form_header" },
+        iconComponent,
         React__default["default"].createElement("h2", { title: title, className: "leadgen-title", "data-align": titleAlign }, title),
         !!description && (React__default["default"].createElement("p", { title: description, className: "leadgen-description", "data-align": descriptionAlign, dangerouslySetInnerHTML: { __html: description } }))));
     if (!title && !description) {
@@ -4172,7 +4340,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const [open, setOpen] = React.useState(!!campaignId);
     const [showOtpPhone, setShowOtpPhone] = React.useState(null);
     const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
-    const [snap, setSnap] = React.useState(0.8);
+    // const [snap, setSnap] = useState<string | number | null>(0.8)
     const formRef = React.useRef();
     const onClose = () => {
         if (showOtpPhone) {
@@ -4231,6 +4399,20 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         userInfo,
         format: (_a = (index$7.ISO_FORMAT[locale] || index$7.ISO_FORMAT['vi-VN'])) === null || _a === void 0 ? void 0 : _a.dateFormat,
     });
+    const listBlockAddedRequired = React.useMemo(() => leadGenFieldRequired(listBlockAdded), listBlockAdded);
+    const disabledButtonSubmit = React.useMemo(() => {
+        if (listBlockAddedRequired.length) {
+            return listBlockAddedRequired.some((k) => !form.values[k]);
+        }
+        return false;
+    }, [...listBlockAddedRequired.map((k) => form.values[k])]);
+    const onFocus = (e) => {
+        e.preventDefault();
+        setTimeout(() => {
+            const target = e.target;
+            target.scrollIntoView({ block: 'center', behavior: 'auto' });
+        }, 300); // Wait a bit to let keyboard open
+    };
     const middlewareOnSubmit = (e) => {
         e.preventDefault();
         // mark all as touched to allow validation
@@ -4316,8 +4498,13 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         (isFullscreen ? imageBackgroundLoaded : true);
     const ButtonSubmit = React.useMemo(() => {
         var _a;
-        return !((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) && (React__default["default"].createElement(core.Button, { size: "lg", id: "lead-submit", type: "submit", variant: "filled", className: "leadgen-btn leadgen-btn_action", loading: isSubmitLoading }, popUpSubmitText));
-    }, [popUpSubmitText, isSubmitLoading, (_b = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _b === void 0 ? void 0 : _b.isHide]);
+        return !((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) && (React__default["default"].createElement(core.Button, { size: "lg", id: "lead-submit", type: "submit", variant: "filled", className: "leadgen-btn leadgen-btn_action", color: primaryColor, loading: isSubmitLoading, disabled: disabledButtonSubmit }, popUpSubmitText));
+    }, [
+        popUpSubmitText,
+        isSubmitLoading,
+        disabledButtonSubmit,
+        (_b = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _b === void 0 ? void 0 : _b.isHide,
+    ]);
     const LinkButtonBlock = listBlockAdded.filter(({ name }) => name == LEADGEN_BLOCK.LinkButtonBlock);
     const ButtonLink = !!(LinkButtonBlock === null || LinkButtonBlock === void 0 ? void 0 : LinkButtonBlock.length) && (React__default["default"].createElement(React__default["default"].Fragment, null, LinkButtonBlock.map((item, index) => {
         var _a, _b, _c;
@@ -4331,7 +4518,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         React__default["default"].createElement(HeaderImage, { src: imageMobile, className: "le-only-mobile lead-modal__image" })))));
     const PopupEmpty = showEmpty && (React__default["default"].createElement(EmptyComponent, { onClose: onClose, onContinue: () => setShowEmpty(false) }));
     const PopupForm = (React__default["default"].createElement(LeadFormProvider, { form: form },
-        React__default["default"].createElement("form", { ref: formRef, className: "leadgen-form", onSubmit: middlewareOnSubmit },
+        React__default["default"].createElement("form", { ref: formRef, className: "leadgen-form", onFocus: onFocus, onSubmit: middlewareOnSubmit },
             React__default["default"].createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, header: headerInsideFormContainer && PopupHeader, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
                 React__default["default"].createElement("div", { className: "leadgen-form_inner" },
                     React__default["default"].createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))))));
@@ -4372,9 +4559,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         'leadgen-inline': isInPage,
         'leadgen-slider': isSlider,
     });
-    const PopupContainer = isDrawer ? (React__default["default"].createElement(index$b.DrawerComponent, { fadeFromIndex: index$7.ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
-        PopupWrapper,
-        React__default["default"].createElement("div", { style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default["default"].createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
+    const PopupContainer = isDrawer ? (React__default["default"].createElement(LeadGenLightBoxB, { form: form, loading: isSubmitLoading, visible: open, onVisible: () => onOpenChange(false) }, PopupWrapper)) : (React__default["default"].createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
         isFullscreen ? (React__default["default"].createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
                 aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
             } })) : null,
@@ -4881,7 +5066,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
     return (React__default["default"].createElement(LeadGenContext$1.Provider, { value: { primaryColor, apiUrl, siteDomain, siteId, locale } },
         React__default["default"].createElement(translationsContext.TranslationsContext.Provider, { value: { locale, values: getTranslations(locale) } }, children ? (React__default["default"].createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, setShowThankyou: setShowThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }, children)) : (React__default["default"].createElement(core.Portal, { target: utils$1.getPopupWrapperDom() },
             React__default["default"].createElement(core.Box, { sx: { position: 'fixed', zIndex: index$7.ZINDEX_SSO - 9e6 } },
-                React__default["default"].createElement(core.Transition, { mounted: Boolean(((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1'), transition: "fade", duration: 600, timingFunction: "ease" }, (styles) => {
+                React__default["default"].createElement(core.Transition, { mounted: Boolean(((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1'), transition: "fade", duration: 600, timingFunction: "ease", exitDuration: 200 }, (styles) => {
                     var _a;
                     return (React__default["default"].createElement(core.Box, { style: styles }, ((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1' && (React__default["default"].createElement(React__default["default"].Fragment, null,
                         !!showCampaign.extra_fields.currentLayout &&

package/build/{logoIcon-40dae106.js → logoIcon-ca0c4d0b.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-db44e8cb.js');
-var useScreenSize = require('./useScreenSize-30f50b76.js');
+var index = require('./index-4c891d77.js');
+var useScreenSize = require('./useScreenSize-b9202bdd.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/mantine.js

@@ -2,43 +2,43 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-ae1a5588.js');
-var index$1 = require('./index-7cc3b1ef.js');
-var index$2 = require('./index-25f2e7a5.js');
-var index$3 = require('./index-86fd931c.js');
-var index$4 = require('./index-41ffd2b1.js');
+var index = require('./index-8707f8e5.js');
+var index$1 = require('./index-8714b332.js');
+var index$2 = require('./index-45b964ed.js');
+var index$3 = require('./index-0a3f13a5.js');
+var index$4 = require('./index-ab9e8142.js');
 var React = require('react');
-var index$5 = require('./index-2b93ac79.js');
-var tslib_es6 = require('./tslib.es6-92cccef3.js');
+var index$5 = require('./index-236f6875.js');
+var tslib_es6 = require('./tslib.es6-a6a9f13b.js');
 var core = require('@mantine/core');
 var miscTheme = require('./miscTheme.js');
-var index$6 = require('./index-28799789.js');
+var index$6 = require('./index-043cf824.js');
 var hooks = require('@mantine/hooks');
-var index$7 = require('./index-14671f4c.js');
-var useMantineLocale = require('./useMantineLocale-e946ce4a.js');
-var other = require('./other-eb0ff2f6.js');
-var index$8 = require('./index-9012f1d1.js');
+var index$7 = require('./index-1ea0b984.js');
+var useMantineLocale = require('./useMantineLocale-db8770bf.js');
+var other = require('./other-9def5955.js');
+var index$8 = require('./index-1b841142.js');
 require('@hhgtech/icons/other');
-require('./index-db44e8cb.js');
+require('./index-4c891d77.js');
 require('./constantsDomainLocales.js');
-require('./Locale-59ccf941.js');
+require('./Locale-dd0fb27d.js');
 require('./constantsIsProduction.js');
-require('./useScreenSize-30f50b76.js');
+require('./useScreenSize-b9202bdd.js');
 require('@emotion/styled');
-require('./utils-7ba0038a.js');
+require('./utils-7ee185ca.js');
 require('@mantine/carousel');
-require('./index-ad7155cf.js');
-require('./index-1ee4ebb8.js');
+require('./index-2a07fb0b.js');
+require('./index-d02f5dda.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
 require('classnames');
-require('./useUniqueId-6e2f8c19.js');
+require('./useUniqueId-9efa6c97.js');
 require('@hhgtech/icons/core');
 require('@mantine/dates');
-require('./index.styles-6dd86c20.js');
-require('./index-c2c283f8.js');
-require('./translationsContext-d63b6d32.js');
+require('./index.styles-d7ac3518.js');
+require('./index-9115436e.js');
+require('./translationsContext-7a30a3fa.js');
 require('@mantine/notifications');
 require('dayjs');
 

package/build/misc.js

@@ -2,38 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var localizeNumberFormat = require('./localizeNumberFormat-f11482fd.js');
-var animation = require('./animation-987c8d76.js');
+var localizeNumberFormat = require('./localizeNumberFormat-112b1f89.js');
+var animation = require('./animation-72de418c.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
 require('react');
 require('@mantine/core');
-require('./useMantineLocale-e946ce4a.js');
-require('./index-ad7155cf.js');
-require('./index-db44e8cb.js');
+require('./useMantineLocale-db8770bf.js');
+require('./index-2a07fb0b.js');
+require('./index-4c891d77.js');
 var miscTheme = require('./miscTheme.js');
-var utils = require('./utils-7ba0038a.js');
-require('./index-1ee4ebb8.js');
-var number = require('./number-238bce4d.js');
-var normalizeLink = require('./normalizeLink-4fe5440a.js');
+var utils = require('./utils-7ee185ca.js');
+require('./index-d02f5dda.js');
+var number = require('./number-89c4a32b.js');
+var normalizeLink = require('./normalizeLink-b3396801.js');
 var miscGetDynamicHealthTool = require('./miscGetDynamicHealthTool.js');
 var miscGetSocialList = require('./miscGetSocialList.js');
 var miscScreenSizeContext = require('./miscScreenSizeContext.js');
-var dataTransform = require('./dataTransform-228ac378.js');
+var dataTransform = require('./dataTransform-554bbdec.js');
 require('dayjs');
 require('@emotion/react');
-require('./tslib.es6-92cccef3.js');
+require('./tslib.es6-a6a9f13b.js');
 require('@mantine/notifications');
-require('./other-eb0ff2f6.js');
-require('./Locale-59ccf941.js');
+require('./other-9def5955.js');
+require('./Locale-dd0fb27d.js');
 require('./constantsDomainLocales.js');
 require('./constantsIsProduction.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
-require('./core-ee93a73c.js');
-require('./WhatsApp-931de57c.js');
-require('./index-224bb98e.js');
-require('./index-3020fcb3.js');
+require('./core-d0d9668c.js');
+require('./WhatsApp-d190e024.js');
+require('./index-b215f70d.js');
+require('./index-3a01b341.js');
 require('js-cookie');
 require('uuid');
 require('lodash/throttle');