@hhgtech/hhg-components 1.29.381 → 1.29.382-beta-1

package/build/lead.js

@@ -2,55 +2,55 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-a6a9f13b.js');
+var tslib_es6 = require('./tslib.es6-71e43ffb.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-23a4761c.js');
+var index = require('./index-bd992117.js');
 var miscCookieHelper = require('./miscCookieHelper.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 index$1 = require('./index-f936e953.js');
+var translationsContext = require('./translationsContext-961ddb52.js');
+var utils$1 = require('./utils-bde2ddf0.js');
+var index$2 = require('./index-c07b6b7c.js');
+var index$3 = require('./index-2d7e520a.js');
+var index$5 = require('./index-0ceda240.js');
+var index$4 = require('./index-c3f44f89.js');
+require('./index.styles-32ed231f.js');
 var hooks = require('@mantine/hooks');
-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');
+require('./useMantineLocale-de1fd5c7.js');
+var index$9 = require('./index-8d709fb1.js');
+require('./index-d6390324.js');
+var index$7 = require('./index-9cc84850.js');
+require('./other-36ab0d9f.js');
+require('./index-da8861a4.js');
+var utils = require('./utils-672a099e.js');
 var dates = require('@mantine/dates');
-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 usePlacesAutocomplete = require('./usePlacesAutocomplete-847f2872.js');
+var index$6 = require('./index-e50add25.js');
+var translationsProvider = require('./translationsProvider-214d415b.js');
+var Locale = require('./Locale-a9c49ae4.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-d479b508.js');
-var index$8 = require('./index-1ffee842.js');
-var useScreenSize = require('./useScreenSize-b9202bdd.js');
-var index$9 = require('./index-f1671261.js');
+var togetherComponentGlobalContext = require('./utils-1969d799.js');
+var index$8 = require('./index-8094bf30.js');
+var index$b = require('./index-3d3bc78c.js');
+var useScreenSize = require('./useScreenSize-1ba1a35d.js');
 var ReactDOM = require('react-dom');
-var index$b = require('./index-7a3a099e.js');
-var InputDate = require('./InputDate-daa96c7f.js');
-var Close = require('./Close-895f69a6.js');
+var index$a = require('./index-75fa27ad.js');
+var InputDate = require('./InputDate-dd74e7d2.js');
+var Close = require('./Close-eb958594.js');
 require('./constantsIsProduction.js');
-require('./normalizeLink-b3396801.js');
+require('./normalizeLink-6d4e06aa.js');
 require('./constantsDomainLocales.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-9efa6c97.js');
+require('./useUniqueId-a1df85ab.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-3a01b341.js');
+require('./index-d15e8dcc.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-ab4ab9cf.js');
+require('./constants-7e21a3d6.js');
 require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -248,23 +248,6 @@ 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': {
@@ -2002,7 +1985,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, restProps = tslib_es6.__rest(props, ["campaign_code", "apiSsoUrl", "apiLeadUrl", "apiSubotUrl", "locale", "forceCampaign", "extraValues", "articleId", "categoryId", "siteDomain", "children"]);
+    const { campaign_code: campaignCodeProps, apiSsoUrl, apiLeadUrl, apiSubotUrl, locale: localeProps, forceCampaign: forceCampaignProps, extraValues, articleId = 1, categoryId = 1, siteDomain: site_domain, children, } = props;
     const [forceCampaign, setForceCampaign] = React.useState(forceCampaignProps);
     const [subscriptionInfo, setSubscriptionInfo] = React.useState({
         subscriptionIcon: '',
@@ -2012,6 +1995,7 @@ 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,
@@ -2058,21 +2042,17 @@ const LeadGenContextProvider = (props) => {
         ga_client_id,
     ]);
     const impression = React.useCallback((value) => {
-        const impression = {
+        return Service.campaignPostImpression({
             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,
@@ -2087,7 +2067,7 @@ const LeadGenContextProvider = (props) => {
     ]);
     React.useEffect(() => {
         if (forceCampaignProps) {
-            setForceCampaign(formatCampaignDetail(forceCampaignProps));
+            setForceCampaign(forceCampaignProps);
             return;
         }
         /** For Subscription Box */
@@ -2112,7 +2092,7 @@ const LeadGenContextProvider = (props) => {
         if (campaignCodeProps) {
             fetchCampaign(campaignCodeProps);
         }
-    }, [forceCampaignProps, campaignCodeProps, categoryId]);
+    }, [campaignCodeProps, categoryId]);
     React.useEffect(() => {
         leadStore.apiSsoUrl = apiSsoUrl;
         leadStore.apiLeadUrl = apiLeadUrl;
@@ -2121,19 +2101,14 @@ 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({}, restProps), subscriptionInfo), { campaign_code: campaignCodeProps, apiSsoUrl,
-            apiLeadUrl,
-            apiSubotUrl, locale: localeProps, extraValues,
-            articleId,
-            categoryId, siteDomain: site_domain, forceCampaign,
-            submit,
+    return (React__default["default"].createElement(LeadGenContext.Provider, { value: Object.assign(Object.assign(Object.assign({}, leadGenContextValue), subscriptionInfo), { submit,
             submitSubscriptionBox,
             impression }) },
         React__default["default"].createElement(LeadGenTranslationProvider, { locale: locale }, children)));
 };
 const useLeadGenContext = () => {
     const context = React.useContext(LeadGenContext);
-    return Object.assign(Object.assign({}, context), { apiSsoUrl: context.apiSsoUrl || leadStore.apiSsoUrl, apiLeadUrl: context.apiLeadUrl || leadStore.apiLeadUrl, apiSubotUrl: context.apiSubotUrl || leadStore.apiSubotUrl });
+    return Object.assign(Object.assign({}, context), { apiLeadUrl: context.apiLeadUrl || leadStore.apiLeadUrl, apiSubotUrl: context.apiSubotUrl || leadStore.apiSubotUrl });
 };
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -2411,17 +2386,10 @@ const StyledLeadGenSubscriptionBoxHeader = styled__default["default"].div `
     flex: 1;
     min-width: 0;
     color: ${miscTheme.theme.colors.gray900};
-    font-size: 16px;
+    font-size: 18px;
     font-weight: 400;
     line-height: 1.4;
-    letter-spacing: -0.4px;
-  }
-
-  ${utils$1.MediaQueries.mbUp} {
-    .leadgen-title {
-      font-size: 18px;
-      letter-spacing: -0.8px;
-    }
+    letter-spacing: -0.8px;
   }
 `;
 const StyledLeadGenSubscriptionBox = styled__default["default"].div `
@@ -2850,6 +2818,13 @@ 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(() => {
@@ -3318,155 +3293,6 @@ 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);
@@ -3962,6 +3788,13 @@ 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(() => {
@@ -3984,7 +3817,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$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); });
+            .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); });
     }, [locale]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, listBlockAdded.map((b, index) => {
         var _a;
@@ -4043,7 +3876,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$b.Button, { type: "button", size: "md", className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
+                        React__default["default"].createElement(index$a.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))));
@@ -4148,9 +3981,8 @@ const StyledFormContainer = styled__default["default"].div `
  *
  */
 const FormContainer = (_a) => {
-    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"]);
+    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"]);
     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) {
@@ -4340,7 +4172,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] = useState<string | number | null>(0.8)
+    const [snap, setSnap] = React.useState(0.8);
     const formRef = React.useRef();
     const onClose = () => {
         if (showOtpPhone) {
@@ -4399,19 +4231,13 @@ 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 target = e.target;
+        target.scrollIntoView({
+            block: 'center',
+            inline: 'nearest',
+            behavior: 'auto',
+        });
     };
     const middlewareOnSubmit = (e) => {
         e.preventDefault();
@@ -4498,13 +4324,8 @@ 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", 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,
-    ]);
+        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]);
     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;
@@ -4559,7 +4380,9 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         'leadgen-inline': isInPage,
         'leadgen-slider': isSlider,
     });
-    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 },
+    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 },
         isFullscreen ? (React__default["default"].createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
                 aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
             } })) : null,
@@ -5066,7 +4889,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", exitDuration: 200 }, (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" }, (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-ca0c4d0b.js → logoIcon-fae0ee2a.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-4c891d77.js');
-var useScreenSize = require('./useScreenSize-b9202bdd.js');
+var index = require('./index-d6390324.js');
+var useScreenSize = require('./useScreenSize-1ba1a35d.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-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 index = require('./index-2d7e520a.js');
+var index$1 = require('./index-0ceda240.js');
+var index$2 = require('./index-c07b6b7c.js');
+var index$3 = require('./index-c3f44f89.js');
+var index$4 = require('./index-d3b16278.js');
 var React = require('react');
-var index$5 = require('./index-236f6875.js');
-var tslib_es6 = require('./tslib.es6-a6a9f13b.js');
+var index$5 = require('./index-494cfa5f.js');
+var tslib_es6 = require('./tslib.es6-71e43ffb.js');
 var core = require('@mantine/core');
 var miscTheme = require('./miscTheme.js');
-var index$6 = require('./index-043cf824.js');
+var index$6 = require('./index-495101de.js');
 var hooks = require('@mantine/hooks');
-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');
+var index$7 = require('./index-7b6cd3f7.js');
+var useMantineLocale = require('./useMantineLocale-de1fd5c7.js');
+var other = require('./other-36ab0d9f.js');
+var index$8 = require('./index-da8861a4.js');
 require('@hhgtech/icons/other');
-require('./index-4c891d77.js');
+require('./index-d6390324.js');
 require('./constantsDomainLocales.js');
-require('./Locale-dd0fb27d.js');
+require('./Locale-a9c49ae4.js');
 require('./constantsIsProduction.js');
-require('./useScreenSize-b9202bdd.js');
+require('./useScreenSize-1ba1a35d.js');
 require('@emotion/styled');
-require('./utils-7ee185ca.js');
+require('./utils-bde2ddf0.js');
 require('@mantine/carousel');
-require('./index-2a07fb0b.js');
-require('./index-d02f5dda.js');
+require('./index-8d709fb1.js');
+require('./index-9cc84850.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
 require('classnames');
-require('./useUniqueId-9efa6c97.js');
+require('./useUniqueId-a1df85ab.js');
 require('@hhgtech/icons/core');
 require('@mantine/dates');
-require('./index.styles-d7ac3518.js');
-require('./index-9115436e.js');
-require('./translationsContext-7a30a3fa.js');
+require('./index.styles-32ed231f.js');
+require('./index-f936e953.js');
+require('./translationsContext-961ddb52.js');
 require('@mantine/notifications');
 require('dayjs');
 

package/build/misc.js

@@ -2,38 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var localizeNumberFormat = require('./localizeNumberFormat-112b1f89.js');
-var animation = require('./animation-72de418c.js');
+var localizeNumberFormat = require('./localizeNumberFormat-4c94efe9.js');
+var animation = require('./animation-36b20cbe.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
 require('react');
 require('@mantine/core');
-require('./useMantineLocale-db8770bf.js');
-require('./index-2a07fb0b.js');
-require('./index-4c891d77.js');
+require('./useMantineLocale-de1fd5c7.js');
+require('./index-8d709fb1.js');
+require('./index-d6390324.js');
 var miscTheme = require('./miscTheme.js');
-var utils = require('./utils-7ee185ca.js');
-require('./index-d02f5dda.js');
-var number = require('./number-89c4a32b.js');
-var normalizeLink = require('./normalizeLink-b3396801.js');
+var utils = require('./utils-bde2ddf0.js');
+require('./index-9cc84850.js');
+var number = require('./number-d8f5a847.js');
+var normalizeLink = require('./normalizeLink-6d4e06aa.js');
 var miscGetDynamicHealthTool = require('./miscGetDynamicHealthTool.js');
 var miscGetSocialList = require('./miscGetSocialList.js');
 var miscScreenSizeContext = require('./miscScreenSizeContext.js');
-var dataTransform = require('./dataTransform-554bbdec.js');
+var dataTransform = require('./dataTransform-89c47b1b.js');
 require('dayjs');
 require('@emotion/react');
-require('./tslib.es6-a6a9f13b.js');
+require('./tslib.es6-71e43ffb.js');
 require('@mantine/notifications');
-require('./other-9def5955.js');
-require('./Locale-dd0fb27d.js');
+require('./other-36ab0d9f.js');
+require('./Locale-a9c49ae4.js');
 require('./constantsDomainLocales.js');
 require('./constantsIsProduction.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
-require('./core-d0d9668c.js');
-require('./WhatsApp-d190e024.js');
-require('./index-b215f70d.js');
-require('./index-3a01b341.js');
+require('./core-28d3e135.js');
+require('./WhatsApp-8cd9592f.js');
+require('./index-878058c2.js');
+require('./index-d15e8dcc.js');
 require('js-cookie');
 require('uuid');
 require('lodash/throttle');