@hhgtech/hhg-components 1.29.406 → 1.29.407-beta-2

package/build/lead.js

@@ -2,56 +2,56 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-4e9cd996.js');
+var tslib_es6 = require('./tslib.es6-ce340795.js');
 var React = require('react');
 var core = require('@mantine/core');
 var debounce = require('lodash/debounce');
 var form = require('@mantine/form');
 var dayjs = require('dayjs');
-var index = require('./index-b0016f00.js');
+var index = require('./index-00e45013.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$1 = require('./index-cdbe94db.js');
-var translationsContext = require('./translationsContext-7bce8baa.js');
-var utils$1 = require('./utils-82e41a76.js');
-var index$2 = require('./index-a25c07c8.js');
-var index$3 = require('./index-adffc56b.js');
-var index$5 = require('./index-f4131cbb.js');
-var index$4 = require('./index-b4fbb00f.js');
-require('./index.styles-5d10f3a2.js');
+var index$1 = require('./index-937c6190.js');
+var translationsContext = require('./translationsContext-204a693b.js');
+var utils$1 = require('./utils-5519e02d.js');
+var index$2 = require('./index-4261bb0d.js');
+var index$3 = require('./index-0418b783.js');
+var index$5 = require('./index-8d7dfa08.js');
+var index$4 = require('./index-8e26493c.js');
+require('./index.styles-b7f230c7.js');
 var hooks = require('@mantine/hooks');
-require('./useMantineLocale-73ad4b92.js');
-var index$9 = require('./index-c51a7d55.js');
-require('./index-7aa88c84.js');
-var index$7 = require('./index-c5382192.js');
-require('./other-272f3575.js');
-require('./index-c2841e4d.js');
-var utils = require('./utils-e24e2403.js');
+require('./useMantineLocale-31c506b0.js');
+var index$9 = require('./index-21adbd80.js');
+require('./index-384c12ea.js');
+var index$7 = require('./index-a400412d.js');
+require('./other-5662c73b.js');
+require('./index-2e87e916.js');
+var utils = require('./utils-6808e437.js');
 var dates = require('@mantine/dates');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-f3af8e47.js');
-var index$6 = require('./index-4b0d549e.js');
-var translationsProvider = require('./translationsProvider-26ea8c26.js');
-var Locale = require('./Locale-74978eb4.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-d90e7f2d.js');
+var index$6 = require('./index-13d41eb0.js');
+var translationsProvider = require('./translationsProvider-85a121ac.js');
+var Locale = require('./Locale-6e6aabd6.js');
 var uuid = require('uuid');
+var constantsDomainLocales = require('./constantsDomainLocales.js');
 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-fa1b78cb.js');
-var index$8 = require('./index-8eb072aa.js');
-var useScreenSize = require('./useScreenSize-48a58621.js');
+var togetherComponentGlobalContext = require('./utils-31c75602.js');
+var index$8 = require('./index-3b1bdfd2.js');
+var useScreenSize = require('./useScreenSize-ab8a61ac.js');
 var framerMotion = require('framer-motion');
 var ReactDOM = require('react-dom');
-var index$a = require('./index-7d03b1cc.js');
-var InputDate = require('./InputDate-1fb694a1.js');
-var index$b = require('./index-679a2e98.js');
-var Close = require('./Close-630b43b9.js');
+var index$a = require('./index-b90c4e03.js');
+var InputDate = require('./InputDate-25cf65d0.js');
+var index$b = require('./index-7ce9d7e9.js');
+var Close = require('./Close-da29a21c.js');
 require('./constantsIsProduction.js');
-require('./normalizeLink-af167230.js');
-require('./constantsDomainLocales.js');
+require('./normalizeLink-196eff9b.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-4fa71ab2.js');
+require('./useUniqueId-2a430bf7.js');
 require('./constantsSite.js');
 require('@hhgtech/icons/core');
 require('@mantine/notifications');
@@ -69,11 +69,11 @@ require('./i18n-values/vi-VN.js');
 require('./i18n-values/vi-VN_MB.js');
 require('./i18n-values/zh-SG.js');
 require('./i18n-values/zh-TW.js');
-require('./index-0b414e68.js');
+require('./index-01d883c4.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-b946c55e.js');
+require('./constants-06b4f39e.js');
 require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -188,11 +188,6 @@ const LEAD_TIMEZONE_DATA = {
     9: 'Asia/Manila', // Philippines / Filipinos Site
 };
 
-const LEADGEN_ACTIONS = {
-    SHOW: 'SHOW',
-    SCROLL: 'SCROLL',
-    TIME: 'TIME',
-};
 var LEADGEN_LAYOUT;
 (function (LEADGEN_LAYOUT) {
     LEADGEN_LAYOUT["LightBoxA"] = "LightBoxA";
@@ -591,6 +586,13 @@ const campaignPostImpression = ({ code, action, title_article, ga_client_id, coo
         },
     });
 };
+const trackingSubscription = (data) => {
+    return leadApi.call({
+        url: `api/collection/tracking-subscription`,
+        method: METHOD.POST,
+        data,
+    });
+};
 const Service = {
     campaignGetById,
     getCampaignByCode,
@@ -598,6 +600,7 @@ const Service = {
     postSubscriptionBoxLead,
     postUserInfoFromLeadGen,
     campaignPostImpression,
+    trackingSubscription,
     validateEmailOrPhoneOnSubot,
     validateEmailOrPhoneOnLeadGen,
     validatePhoneNumberOnLeadGen,
@@ -1021,15 +1024,15 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'TextBlock':
                 return (React__default["default"].createElement(index$3.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
                     // onChangeRaw={(e) => inputOnChange('text', e)}
-                    label: placeholder, "data-control": "text", "data-lead-control": name, name: value }, form.getInputProps(value))));
+                    label: placeholder, "data-control": "text", "data-lead-control": name, "data-is-required": required, name: value }, form.getInputProps(value))));
             case 'NumberBlock':
                 return (React__default["default"].createElement(index$3.NumberInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
                     // onChange={(e) => inputOnChange('number', e)}
-                    label: placeholder, "data-control": "number", "data-lead-control": name, name: value }, form.getInputProps(value))));
+                    label: placeholder, "data-control": "number", "data-lead-control": name, "data-is-required": required, name: value }, form.getInputProps(value))));
             case 'EmailBlock':
                 return (React__default["default"].createElement(index$3.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
                     // type="email"
-                    placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "email", "data-lead-control": name, name: value }, form.getInputProps(value))));
+                    placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "email", "data-lead-control": name, "data-is-required": required, name: value }, form.getInputProps(value))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -1044,14 +1047,14 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                             form.setFieldValue(value, v);
                         }, 
                         // onBlur={(e) => inputOnBlur('tel', e)}
-                        id: id, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name })));
+                        id: id, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name, "data-is-required": required })));
             }
             case 'LocationBlock': {
                 return (React__default["default"].createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
             }
             case 'DateBlock':
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(index$5.DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date", "data-lead-control": name, popoverProps: popoverProps }, form.getInputProps(value))),
+                    React__default["default"].createElement(index$5.DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date", "data-lead-control": name, "data-is-required": required, popoverProps: popoverProps }, form.getInputProps(value))),
                     React__default["default"].createElement("input", { type: "hidden", name: value, "data-control": "date" })));
             case 'LinkButtonBlock':
                 return (React__default["default"].createElement("div", { key: index },
@@ -1069,14 +1072,14 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 8,
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }))))));
             case 'RadioBlock':
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
                     isSendMailChimp && (React__default["default"].createElement(index$3.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
-                    React__default["default"].createElement(index$3.Radio.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name }))))));
+                    React__default["default"].createElement(index$3.Radio.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name, "data-is-required": required }))))));
             case 'DropdownBlock':
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown', "data-lead-control": name }),
+                    React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown', "data-lead-control": name, "data-is-required": required }),
                     React__default["default"].createElement(index$3.Select, Object.assign({ key: index, className: cx('leadgen-control', classes.control), label: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
                             value: l.value,
                             label: l.placeholder,
@@ -1084,7 +1087,7 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'TncBlock':
                 const tncInputProps = form.getInputProps('TNC-' + b.id);
                 return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name }, tncInputProps, { error: tncInputProps.error ? tncInputProps.error : undefined }))));
+                    React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }, tncInputProps, { error: tncInputProps.error ? tncInputProps.error : undefined }))));
         }
         return null;
     })));
@@ -2012,27 +2015,30 @@ const LeadGenContext = React.createContext({
         LeadLog('** LeadGen SubmitSubscriptionBox : ', value);
         return Promise.reject(value);
     },
-    impression(value) {
+    impression(type) {
         /** Init for FAKING function */
-        LeadLog('** LeadGen Impression : ', value);
-        return Promise.reject(value);
+        LeadLog('** LeadGen Impression : ', type);
+        return Promise.reject();
     },
     /** For Subscription Box */
     subscriptionIcon: '',
     subscriptionTitle: '',
+    subscriptionPhoneType: '',
 });
 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, userInfo } = props, restProps = tslib_es6.__rest(props, ["campaign_code", "apiSsoUrl", "apiLeadUrl", "apiSubotUrl", "locale", "forceCampaign", "extraValues", "articleId", "categoryId", "siteDomain", "children", "userInfo"]);
+    const { t } = index$1.useTranslations();
     const [forceCampaign, setForceCampaign] = React.useState(forceCampaignProps);
     const [subscriptionInfo, setSubscriptionInfo] = React.useState({
         subscriptionIcon: '',
         subscriptionTitle: '',
         subscriptionType: 'TypeA',
+        subscriptionPhoneType: '',
     });
     const locale = React.useMemo(() => {
         return localeProps || Locale.LOCALE['PhilippinesEnglish'];
     }, [localeProps]);
-    const { url, campaign_id, campaign_code, cookie_id, ga_client_id, category_id, article_id, article_title, } = React.useMemo(() => ({
+    const { url, campaign_id, cookie_id, ga_client_id, category_id, article_id, article_title, category_name, } = React.useMemo(() => ({
         url: location.href.toLowerCase() || '',
         cookie_id: miscCookieHelper.getCookie('hhg-id') || null,
         ga_client_id: miscCookieHelper.getCookie('_ga'),
@@ -2041,27 +2047,33 @@ const LeadGenContextProvider = (props) => {
         category_id: categoryId,
         article_id: articleId,
         article_title: (extraValues === null || extraValues === void 0 ? void 0 : extraValues.article_title) || document.title || '',
+        category_name: (extraValues === null || extraValues === void 0 ? void 0 : extraValues.category_name) || '',
     }), [
         campaignCodeProps,
         articleId,
         categoryId,
         forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id,
         extraValues === null || extraValues === void 0 ? void 0 : extraValues.article_title,
+        extraValues === null || extraValues === void 0 ? void 0 : extraValues.category_name,
     ]);
-    const fetchCampaign = React.useCallback((campaign_code) => {
-        Service.getCampaignByCode(campaign_code).then((res) => {
-            const { _data } = res || {};
-            const { campaigns } = _data || {};
-            LeadLog('** LeadGen Campaign : ', campaigns);
-            setForceCampaign(formatCampaignDetail(campaigns));
-        });
-    }, [campaignCodeProps]);
+    // const fetchCampaign = useCallback(
+    //   (campaign_code: string) => {
+    //     Service.getCampaignByCode(campaign_code).then((res) => {
+    //       const { _data } = res || {}
+    //       const { campaigns } = _data || {}
+    //       LeadLog('** LeadGen Campaign : ', campaigns)
+    //       setForceCampaign(formatCampaignDetail(campaigns))
+    //     })
+    //   },
+    //   [campaignCodeProps],
+    // )
     // TODO : Update form for LeadGen
     const submit = React.useCallback((data) => {
         return Service.postSubscriptionBoxLead({ data });
     }, []);
     const submitSubscriptionBox = React.useCallback((value) => {
-        const data = Object.assign(Object.assign(Object.assign(Object.assign({}, value), { campaign_id,
+        const data = Object.assign(Object.assign(Object.assign(Object.assign({}, value), { 
+            // campaign_id,
             site_domain, url: (value === null || value === void 0 ? void 0 : value.url) || url, cookie_id, ga_client_id: (value === null || value === void 0 ? void 0 : value.ga_client_id) || ga_client_id }), extraValues), { article_id,
             category_id,
             article_title });
@@ -2077,33 +2089,36 @@ const LeadGenContextProvider = (props) => {
         cookie_id,
         ga_client_id,
     ]);
-    const impression = React.useCallback((value) => {
+    const impression = React.useCallback((type) => {
+        const gaCookie = miscCookieHelper.getCookie('_ga') || null;
         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,
-            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),
+            subscription_title: subscriptionInfo.subscriptionTitle,
+            name: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || '',
+            area_code: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.area_code) || '',
+            phone_number: (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone) || '',
+            site_domain: constantsDomainLocales.domainLocales[locale],
+            url: location.href.toLowerCase(),
+            cookie_id: miscCookieHelper.getCookie('hhg-id'),
+            ga_client_id: gaCookie,
+            article_title,
+            article_id,
+            category_id,
+            category_name,
+            type,
         };
-        if (!impression.extra.subscription_title) {
-            delete impression.extra.subscription_title;
-        }
-        return Service.campaignPostImpression(impression);
+        return Service.trackingSubscription(impression);
     }, [
-        extraValues,
         campaign_id,
         url,
-        campaign_code,
         article_title,
         cookie_id,
         ga_client_id,
+        categoryId,
         article_id,
         subscriptionInfo.subscriptionTitle,
-        subscriptionInfo.subscriptionType,
+        userInfo === null || userInfo === void 0 ? void 0 : userInfo.name,
+        userInfo === null || userInfo === void 0 ? void 0 : userInfo.area_code,
+        userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone,
     ]);
     React.useEffect(() => {
         if (forceCampaignProps) {
@@ -2118,21 +2133,138 @@ const LeadGenContextProvider = (props) => {
                 slug: location === null || location === void 0 ? void 0 : location.pathname,
             }).then((res) => {
                 const { _data } = res || {};
-                const { item, campaign_code } = _data || {};
+                const { item, campaign_code, btn_type = 'zalo' } = _data || {};
                 const { icon, content } = item || {};
                 LeadLog('** LeadGen SubscriptionBox campaign_code : ', campaign_code);
                 LeadLog('** LeadGen SubscriptionBox subscription_icon : ', icon);
                 LeadLog('** LeadGen SubscriptionBox subscription_title : ', content);
-                setSubscriptionInfo((prev) => (Object.assign(Object.assign({}, prev), { subscriptionIcon: icon, subscriptionTitle: content })));
-                if (campaign_code) {
-                    fetchCampaign(campaign_code);
-                }
+                setSubscriptionInfo((prev) => (Object.assign(Object.assign({}, prev), { subscriptionIcon: icon, subscriptionTitle: content, subscriptionPhoneType: btn_type })));
+                setForceCampaign(formatCampaignDetail({
+                    id: 6993,
+                    name: '',
+                    code: '49qvztwzzlfvmk6',
+                    site: {
+                        id: index$7.LOCALE_SPECS[locale].SITE_ID || 1,
+                        name: constantsDomainLocales.domainLocales[locale],
+                    },
+                    thank_you_image: 'https://cdn-lead.hellohealthgroup.com/2025/05/1747009374_68213f5e5fa5a9.58533462.png',
+                    extra_fields: {
+                        actionBlocks: `{"submitBlock":{"data":{"value":"${t('subscriptionBox.ctaBtn')}"}},"linkButtonBlock":{"data":{"value":"Join now","url":"","newtab":true}}}`,
+                        currentLayout: 'LightBoxB',
+                        imageBlocks: '{"imageMobile":{"data":{"url":"","newtab":true}},"imageDesktop":{"data":{"url":"","newtab":true}},"imageBackground":{"data":{}},"imageOverlayMobile":{"data":{}},"imageOverlayDesktop":{"data":{}},"imageThankYou":{"data":{}}}',
+                        listBlockAdded: `[{"name":"TextBlock","id":"c9be7202-05af-4d62-94bb-0001f8ad50de","data":{"placeholder":"${t('subscriptionBox.name')}","value":"name","required":true, "requiredMessage": "${t('subscriptionBox.nameRequire')}"}},{"name":"PhoneBlock","id":1744087889773,"data":{"value":"phone","required":true,"requiredMessage": "${t('subscriptionBox.phoneRequire')}","placeholder":"${t('subscriptionBox.phone')}"}}]`,
+                        listBlockThankyou: `[{"name":"TitleBlock","id":"c74d5525-b7ae-4714-b5f1-552f50160ac1","data":{"value":"${t('subscriptionBox.thankyouTitle')}","align":"center"}},{"name":"SubtitleBlock","id":"f9a6ac63-b532-41d4-9c2e-3f3e71124e05","data":{"value":"${t('subscriptionBox.thankyou')}","align":"center"}}]`,
+                        textBlocks: '{"titleBlock":{"data":{"value":"VN - Campaign SUBSCRIPTION BOX "}},"subtitleBlock":{"data":{"value":"Sample description"}}}',
+                    },
+                    total_lead: 0,
+                    total_submit: 0,
+                    total_click: 0,
+                    started_at: null,
+                    ended_at: null,
+                    created_at: '2025-04-08 04:54:32',
+                    updated_at: '2025-05-12 00:22:54',
+                    site_logo: 'https://hhg-common.hellobacsi.com/common/logo/hellobacsi.png',
+                    custom_logo: null,
+                    status: 1,
+                    formatted_status: 1,
+                    creator: 'admin@hellohealthgroup.com',
+                    total_impression: 4237940,
+                    conversion_rate: 0,
+                    total_visitor: 0,
+                    total_habit_exit: 0,
+                    total_intentional_exit: 0,
+                    trigger_type: 'on_landing',
+                    targets: [
+                        {
+                            is_import: 0,
+                            option: 'start_with',
+                            sub_target: [],
+                            target: 'https://hellobacsi.com/sample',
+                            type: 1,
+                        },
+                    ],
+                    forms: [
+                        {
+                            control: 'TextBlock',
+                            default: null,
+                            name: 'TextBlock',
+                            options: [],
+                            required: 1,
+                        },
+                        {
+                            control: 'PhoneBlock',
+                            default: null,
+                            name: 'PhoneBlock',
+                            options: [],
+                            required: 1,
+                            requiredMessage: t('subscriptionBox.phoneRequire'),
+                        },
+                    ],
+                    rules: [
+                        {
+                            rule: 'campaign_popup_exit',
+                            value: '7',
+                        },
+                        {
+                            rule: 'site_popup_exit',
+                            value: '7',
+                        },
+                        {
+                            rule: 'show_again_after_submit',
+                            value: '0',
+                        },
+                        {
+                            rule: 'show_again_after_exit',
+                            value: '0',
+                        },
+                        {
+                            rule: 'appearance_time',
+                            value: {
+                                endTime: null,
+                                startTime: null,
+                            },
+                        },
+                        {
+                            rule: 'exclude_sponsored',
+                            value: '1',
+                        },
+                        {
+                            rule: 'exclude_sponsored_list',
+                            value: [],
+                        },
+                        {
+                            rule: 'days_to_show_again',
+                            value: '7',
+                        },
+                        {
+                            rule: 'time',
+                            value: '3',
+                        },
+                    ],
+                    is_scheduled: true,
+                    last_step: null,
+                    kpis: {
+                        lead: 500,
+                    },
+                    forever: 1,
+                    is_target_import: 0,
+                    is_expired: 0,
+                    score: 6,
+                    price: 2.5,
+                    type: 0,
+                    is_testing_running: 0,
+                    campaign_group_id: 0,
+                    bot_id: [],
+                }));
+                // if (campaign_code) {
+                //   fetchCampaign(campaign_code)
+                // }
             });
             return;
         }
-        if (campaignCodeProps) {
-            fetchCampaign(campaignCodeProps);
-        }
+        // if (campaignCodeProps) {
+        //   fetchCampaign(campaignCodeProps)
+        // }
     }, [forceCampaignProps, campaignCodeProps, categoryId]);
     React.useEffect(() => {
         leadStore.apiSsoUrl = apiSsoUrl;
@@ -2142,7 +2274,7 @@ 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,
+    return (React__default["default"].createElement(LeadGenContext.Provider, { value: Object.assign(Object.assign(Object.assign({}, restProps), subscriptionInfo), { userInfo, campaign_code: campaignCodeProps, apiSsoUrl,
             apiLeadUrl,
             apiSubotUrl, locale: localeProps, extraValues,
             articleId,
@@ -2157,6 +2289,39 @@ const useLeadGenContext = () => {
     return Object.assign(Object.assign({}, context), { apiSsoUrl: context.apiSsoUrl || leadStore.apiSsoUrl, apiLeadUrl: context.apiLeadUrl || leadStore.apiLeadUrl, apiSubotUrl: context.apiSubotUrl || leadStore.apiSubotUrl });
 };
 
+const ImpressionTrackingWrapper = ({ children, stayDuration = 3, onImpression, dependency = '', }) => {
+    const { ref, entry } = hooks.useIntersection({
+        threshold: 1,
+    });
+    const [tracked, setTracked] = React.useState(false);
+    React.useEffect(() => {
+        let timer = null;
+        let count = 1;
+        if ((entry === null || entry === void 0 ? void 0 : entry.isIntersecting) && !tracked) {
+            timer = setInterval(() => {
+                console.log('Impression count: ', count);
+                if (count >= stayDuration) {
+                    setTracked(true);
+                }
+                else {
+                    count += 1;
+                }
+            }, 1000);
+        }
+        return () => clearInterval(timer);
+    }, [entry === null || entry === void 0 ? void 0 : entry.isIntersecting, tracked]);
+    React.useEffect(() => {
+        if (tracked) {
+            onImpression();
+            console.log('Impression call API');
+        }
+    }, [tracked]);
+    React.useEffect(() => {
+        setTracked(false);
+    }, [dependency]);
+    return (React__default["default"].createElement(core.Box, { "data-impression": true, ref: ref }, children));
+};
+
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const customParseFormat = require('dayjs/plugin/customParseFormat');
 dayjs__default["default"].extend(customParseFormat);
@@ -2193,7 +2358,7 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         block) => {
             return (value) => {
-                var _a;
+                var _a, _b;
                 const isBLockRequired = (_a = block === null || block === void 0 ? void 0 : block.data) === null || _a === void 0 ? void 0 : _a.required;
                 if (!formRef.current.isTouched(name))
                     return;
@@ -2201,7 +2366,7 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
                     typeof value === 'undefined' ||
                     (Array.isArray(value) && value.length === 0)) {
                     return isBLockRequired
-                        ? t('validator.required')
+                        ? ((_b = block === null || block === void 0 ? void 0 : block.data) === null || _b === void 0 ? void 0 : _b.requiredMessage) || t('validator.required')
                         : cb === null || cb === void 0 ? void 0 : cb(value);
                 }
                 return cb === null || cb === void 0 ? void 0 : cb(value);
@@ -2450,12 +2615,25 @@ const StyledLeadGenSubscriptionBox = styled__default["default"].div `
   border: 1px solid ${miscTheme.theme.colors.neutral100};
   background: linear-gradient(
     180.71deg,
-    #7bc2ff -18.54%,
-    #e3f2ff 17.12%,
-    #ffffff 99.25%
+    rgba(44, 183, 66, 0.8) -18.54%,
+    rgba(44, 183, 66, 0.1) 17.12%,
+    rgba(44, 183, 66, 0) 99.25%
   );
   border-radius: 12px;
   margin-inline: auto;
+  &[data-phone-type='zalo'] {
+    background: linear-gradient(
+      180.71deg,
+      #7bc2ff -18.54%,
+      #e3f2ff 17.12%,
+      #ffffff 99.25%
+    );
+  }
+  &[data-phone-type]:not([data-phone-type='zalo']) {
+    .leadgen-btn {
+      background-color: #2cb742 !important;
+    }
+  }
   .leadgen-form_inputs {
     .leadgen-form_input {
       width: 100%;
@@ -3131,10 +3309,9 @@ const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, ca
     const { image, extra_fields, id: campaign_id, bot_id: campaign_subot_id = [], ThankYouBlock, } = forceCampaign || {};
     const { textBlocks, listBlockAdded, actionBlocks } = extra_fields || {};
     const { submitBlock } = actionBlocks || {};
-    const { apiLeadUrl, subscriptionIcon, subscriptionTitle, submitSubscriptionBox, impression, onFinish, } = useLeadGenContext();
+    const { apiLeadUrl, subscriptionIcon, subscriptionTitle, subscriptionPhoneType, submitSubscriptionBox, onFinish, impression, } = useLeadGenContext();
     const { t } = index$1.useTranslations();
     const { action: { pushNotifications }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
-    const refContainer = React.useRef(null);
     const [loading, setLoading] = React.useState(false);
     const [showThankyou, setShowThankyou] = React.useState(false);
     const validatingEmailRef = React.useRef(false);
@@ -3154,17 +3331,6 @@ const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, ca
             t('leadgen.message.title.default');
     }, [subscriptionTitle, (_b = (_a = textBlocks === null || textBlocks === void 0 ? void 0 : textBlocks.titleBlock) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value]);
     const { image: thankyouImage, title: thankyouTitle, description: thankyouDescription, button: thankyouButton, } = ThankYouBlock || {};
-    const intersectionObserverCallback = React.useCallback((entries) => {
-        entries.forEach((entry) => {
-            const { isIntersecting, target } = entry;
-            if (!showThankyou &&
-                isIntersecting &&
-                target === refContainer.current) {
-                impression();
-            }
-        });
-    }, [impression, showThankyou]);
-    const IObserver = new IntersectionObserver(intersectionObserverCallback);
     const middlewareOnSubmit = React.useCallback((values) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
         const newValues = {
             subscription_title,
@@ -3201,7 +3367,11 @@ const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, ca
         setLoading(true);
         try {
             const reqValues = Object.assign(Object.assign({}, newValues), ssoValues);
-            const { _data } = (yield submitSubscriptionBox(reqValues)) || {};
+            const [res] = yield Promise.all([
+                submitSubscriptionBox(reqValues),
+                impression('submit_form'),
+            ]);
+            const { _data } = res || {};
             const { model } = _data || {};
             if (model && (model === null || model === void 0 ? void 0 : model.id)) {
                 setShowThankyou(true);
@@ -3245,16 +3415,8 @@ const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, ca
         userInfo === null || userInfo === void 0 ? void 0 : userInfo.uid,
         userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone,
     ]);
-    React.useEffect(() => {
-        if (refContainer.current) {
-            IObserver.observe(refContainer.current);
-        }
-        return () => {
-            IObserver.disconnect();
-        };
-    }, [categoryId]);
-    return (React__default["default"].createElement("div", { ref: refContainer },
-        React__default["default"].createElement(StyledLeadGenSubscriptionBox, { "data-type": "subscription_box_A" },
+    return (React__default["default"].createElement(ImpressionTrackingWrapper, { dependency: categoryId, onImpression: () => impression('impression') },
+        React__default["default"].createElement(StyledLeadGenSubscriptionBox, { "data-phone-type": subscriptionPhoneType, "data-type": "subscription_box_A" },
             showThankyou && (React__default["default"].createElement(LeadGenThankYou, { image: Object.assign(Object.assign({}, thankyouImage), { src: thankyouImage.src || `${apiLeadUrl}admin/img/thanksyou.png` }), title: thankyouTitle, description: thankyouDescription, button: thankyouButton })),
             !showThankyou && (React__default["default"].createElement(LeadGenSubscriptionBoxA, { loading: loading, image: subscriptionIcon || image, title: subscription_title, submitText: (_c = submitBlock === null || submitBlock === void 0 ? void 0 : submitBlock.data) === null || _c === void 0 ? void 0 : _c.value, blocks: listBlockAdded, locale: locale, form: form, rules: validateObj, onFinish: middlewareOnSubmit })))));
 };
@@ -3269,8 +3431,12 @@ const Container = () => {
     return (React__default["default"].createElement(LeadGenSubscriptionBox$1, { locale: locale, siteId: siteId, siteDomain: siteDomain, userInfo: userInfo, forceCampaign: forceCampaign, campaign_code: campaign_code }));
 };
 Container.displayName = 'LeadGenSubscriptionBox';
+const ALLOW_LOCALE = [Locale.LOCALE.Vietnam, Locale.LOCALE.Malaysia, Locale.LOCALE.Indonesia];
 const LeadGenSubscriptionBoxContainer = (props) => {
-    const { apiUrl, apiSubotUrl } = props;
+    const { apiUrl, apiSubotUrl, locale } = props;
+    if (!ALLOW_LOCALE.includes(locale)) {
+        return null;
+    }
     return (React__default["default"].createElement(LeadGenContextProvider, Object.assign({}, props, { apiLeadUrl: apiUrl, apiSubotUrl: apiSubotUrl }),
         React__default["default"].createElement(Container, null)));
 };
@@ -3397,6 +3563,35 @@ const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, su
                     React__default["default"].createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
 };
 
+const useViewportDimensions = () => {
+    const dimensionsRef = React.useRef({ width: 0, height: 0 });
+    const [dimensions, setDimensions] = React.useState(() => ({
+        width: window.screen.availWidth,
+        height: window.screen.availHeight,
+    }));
+    React.useEffect(() => {
+        var _a;
+        function visualViewport(e) {
+            if (dimensionsRef.current.width === e.target.width &&
+                dimensionsRef.current.height === e.target.height) {
+                return;
+            }
+            const newDimensions = {
+                width: e.target.width,
+                height: e.target.height,
+            };
+            dimensionsRef.current = newDimensions;
+            setDimensions(newDimensions);
+        }
+        (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', visualViewport);
+        return () => {
+            var _a;
+            (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', visualViewport);
+        };
+    }, []);
+    return React.useMemo(() => (Object.assign({}, dimensions)), [dimensions.height, dimensions.width]);
+};
+
 function isMac() {
     return testPlatform(/^Mac/);
 }
@@ -3672,35 +3867,6 @@ function isInput(target) {
         (target instanceof HTMLElement && target.isContentEditable));
 }
 
-const useViewportDimensions = () => {
-    const dimensionsRef = React.useRef({ width: 0, height: 0 });
-    const [dimensions, setDimensions] = React.useState(() => ({
-        width: window.screen.availWidth,
-        height: window.screen.availHeight,
-    }));
-    React.useEffect(() => {
-        var _a;
-        function visualViewport(e) {
-            if (dimensionsRef.current.width === e.target.width &&
-                dimensionsRef.current.height === e.target.height) {
-                return;
-            }
-            const newDimensions = {
-                width: e.target.width,
-                height: e.target.height,
-            };
-            dimensionsRef.current = newDimensions;
-            setDimensions(newDimensions);
-        }
-        (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', visualViewport);
-        return () => {
-            var _a;
-            (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', visualViewport);
-        };
-    }, []);
-    return React.useMemo(() => (Object.assign({}, dimensions)), [dimensions.height, dimensions.width]);
-};
-
 const StyledLeadGenLightBoxBFooter = styled__default["default"].div `
   padding-top: calc(var(--spacing-y, 20px) * 8 / 20);
   padding-inline: var(--spacing-x, 20px);
@@ -3901,7 +4067,8 @@ const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkN
                     React__default["default"].createElement(index$4.Button, { className: `lead-modal__btn ${LEAD_CLASS}`, color: primaryColor }, linkText)))))));
 };
 
-const InlineLayout = ({ content, inlinePosition, }) => {
+const InlineLayout = ({ action, content, inlinePosition, campaignCode, }) => {
+    const { apiUrl } = React.useContext(LeadGenContext$1);
     const target = React.useMemo(() => {
         if (!inlinePosition)
             return null;
@@ -4008,7 +4175,22 @@ const InlineLayout = ({ content, inlinePosition, }) => {
     }, [inlinePosition]);
     if (!inlinePosition || !target)
         return null;
-    return ReactDOM.createPortal(content, target);
+    return ReactDOM.createPortal(React__default["default"].createElement(ImpressionTrackingWrapper, { onImpression: () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+            const gaCookie = miscCookieHelper.getCookie('_ga') || null;
+            fetch(`${apiUrl}api/campaign/${campaignCode}/impression`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    action,
+                    url: location.href.toLowerCase(),
+                    title_article: document.title,
+                    cookie_id: miscCookieHelper.getCookie('hhg-id'),
+                    ga_client_id: gaCookie,
+                }),
+            });
+        }) }, content), target);
 };
 
 const SideBarLayout = ({ content }) => {
@@ -4421,20 +4603,20 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     React__default["default"].createElement(core.TextInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "text", placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChangeRaw={(e) => inputOnChange('text', e)}
-                        label: label, "data-control": "text", "data-lead-control": 'TextBlock', inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value), { name: value }))));
+                        label: label, "data-control": "text", "data-lead-control": name, "data-is-required": required, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value), { name: value }))));
             case 'NumberBlock':
                 return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
                     React__default["default"].createElement(core.NumberInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "number", placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChange={(e) => inputOnChange('number', e)}
-                        label: label, "data-control": "number", "data-lead-control": name, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "number", "data-lead-control": name, "data-is-required": required, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'EmailBlock':
                 return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
                     React__default["default"].createElement(core.TextInput, Object.assign({ withAsterisk: required, spellCheck: false, 
                         // type="email"
                         placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: label, "data-control": "email", "data-lead-control": name, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "email", "data-lead-control": name, "data-is-required": required, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -4448,16 +4630,16 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         React__default["default"].createElement("div", { className: "mantine-Input-wrapper" },
                             React__default["default"].createElement(index$3.Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: " ", 
                                 // onBlur={(e) => inputOnBlur('tel', e)}
-                                id: htmlForId, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name }, formPhoneInputWrapper))))));
+                                id: htmlForId, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name, "data-is-required": required }, formPhoneInputWrapper))))));
             }
             case 'LocationBlock': {
                 return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: " ", label: label, "data-control": "text", "data-lead-control": name, locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                    React__default["default"].createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: " ", label: label, "data-control": "text", "data-lead-control": name, "data-is-required": required, locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             }
             case 'DateBlock': {
                 const _c = form.getInputProps(value), { error } = _c, formInputProps = tslib_es6.__rest(_c, ["error"]);
                 return (React__default["default"].createElement(core.Input.Wrapper, { key: index, size: "md", withAsterisk: required, label: label, "data-invalid": !!error, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(InputDate.InputDate, Object.assign({ name: value, error: Boolean(error), locale: locale, "data-extra": true, "data-name": value, "data-control": "date", "data-lead-control": name, className: "leadgen-form_field_date", labelTuples: labelTuples }, formInputProps))));
+                    React__default["default"].createElement(InputDate.InputDate, Object.assign({ name: value, error: Boolean(error), locale: locale, "data-extra": true, "data-name": value, "data-control": "date", "data-lead-control": name, "data-is-required": required, className: "leadgen-form_field_date", labelTuples: labelTuples }, formInputProps))));
             }
             case 'LinkButtonBlock':
                 return (React__default["default"].createElement("div", { key: index },
@@ -4480,7 +4662,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                             gap: 8,
                         }, inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }))))));
             case 'RadioBlock':
                 return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_radio", key: index },
                     isSendMailChimp && (React__default["default"].createElement(core.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
@@ -4488,10 +4670,10 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         // className="lead-modal__form-control leadgen-form_field"
                         label: label, size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name, "data-is-required": required }))))));
             case 'DropdownBlock':
                 return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field DropdownBlock", key: index },
-                    React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown', "data-lead-control": name }),
+                    React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown', "data-lead-control": name, "data-is-required": required }),
                     React__default["default"].createElement(index$3.Select
                     // className="lead-modal__form-control leadgen-form_field"
                     , Object.assign({ 
@@ -4525,7 +4707,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 const _d = form.getInputProps(`TNC-${id}`), { error } = _d, tncInputProps = tslib_es6.__rest(_d, ["error"]);
                 return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_checkbox", key: id },
                     React__default["default"].createElement(core.Input.Wrapper, { error: error },
-                        React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name }, tncInputProps)))));
+                        React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }, tncInputProps)))));
         }
         return null;
     })));
@@ -4775,7 +4957,7 @@ const LEADGEN_SHOW_HEADER = [
 ];
 // const CAMPAGE_CODE_LIST_APPLY_NEW_UI = ['ri3lkoxcetjoj39', 'u0adw7hw8kw7t89']
 const CAMPAGE_CODE_LIST_APPLY_NEW_UI = ['ri3lkoxcetjoj39'];
-const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, onUnmount, showThankyou, campaignId, campaignCode, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, }) => {
+const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, onUnmount, showThankyou, campaignId, campaignCode, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, action, }) => {
     var _a, _b;
     const { primaryColor } = React.useContext(LeadGenContext$1);
     const { isMobile } = useScreenSize.useScreenSize();
@@ -4800,7 +4982,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         }
     };
     const { height } = useViewportDimensions();
-    usePreventScroll();
+    // usePreventScroll()
     const formActiveTime = React.useRef(0);
     const textBlocks = JSON.parse(extraFields.textBlocks);
     const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
@@ -4887,47 +5069,8 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         return false;
     }, [...listBlockAddedRequired.map((k) => form.values[k])]);
     const onFocus = (e) => {
-        e.preventDefault();
-        function scrollIntoView() {
-            const $Input = e.target;
-            const $TextField = $Input.closest('.leadgen-form_field');
-            const scrollIntoView = {
-                block: 'center',
-                behavior: 'auto',
-            };
-            if ($TextField.classList.contains('DropdownBlock')) {
-                scrollIntoView.block = 'start';
-                const tfOffsetTop = ($TextField === null || $TextField === void 0 ? void 0 : $TextField.offsetTop) || 0;
-                const tfHeight = $TextField.clientHeight;
-                const $ScrollableElement = getParentScroll($TextField);
-                if ($ScrollableElement) {
-                    // https://hhgdev.atlassian.net/browse/EL-682
-                    const scrollHeight = $ScrollableElement.scrollHeight;
-                    if (scrollHeight - (tfOffsetTop + tfHeight) < 192) {
-                        scrollIntoView.block = 'end';
-                    }
-                }
-            }
-            if (isMobile) {
-                window.scrollTo(0, 0);
-            }
-            $TextField.scrollIntoView(scrollIntoView);
-        }
-        let time = 0;
-        function requestFrame(timestamp) {
-            if (time === 0) {
-                time = timestamp;
-            }
-            if (timestamp - time <= 250) {
-                requestAnimationFrame(requestFrame);
-            }
-            else {
-                scrollIntoView();
-            }
-        }
-        if (isMobile) {
-            requestAnimationFrame(requestFrame);
-        }
+        // EL-926 Temporary turn off handling focus form on mobile to fix scrolling bug on lightbox A
+        return false;
     };
     const middlewareOnSubmit = (e) => {
         e.preventDefault();
@@ -5110,7 +5253,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         return React__default["default"].createElement(SideBarLayout, { content: PopupContainer });
     }
     else if (isInline) {
-        return (React__default["default"].createElement(InlineLayout, { content: PopupContainer, inlinePosition: extraFields.popupInlinePosition }));
+        return (React__default["default"].createElement(InlineLayout, { action: action, content: PopupContainer, campaignCode: campaignCode, inlinePosition: extraFields.popupInlinePosition }));
     }
     return null;
 };
@@ -5208,19 +5351,20 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, showThan
     const { apiUrl, siteDomain } = React.useContext(LeadGenContext$1);
     React.useEffect(() => {
         const gaCookie = miscCookieHelper.getCookie('_ga') || null;
-        fetch(`${apiUrl}api/campaign/${code}/impression`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                action,
-                url: location.href.toLowerCase(),
-                title_article: document.title,
-                cookie_id: miscCookieHelper.getCookie('hhg-id'),
-                ga_client_id: gaCookie,
-            }),
-        });
+        !currentLayout.includes('Inline') &&
+            fetch(`${apiUrl}api/campaign/${code}/impression`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    action,
+                    url: location.href.toLowerCase(),
+                    title_article: document.title,
+                    cookie_id: miscCookieHelper.getCookie('hhg-id'),
+                    ga_client_id: gaCookie,
+                }),
+            });
     }, []);
     const { extra_fields, image, image_desktop, code, image_background, image_overlay_mobile, image_overlay_desktop, } = campaign || {};
     const { currentLayout } = extra_fields;
@@ -5322,7 +5466,7 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, showThan
         currentLayout == 'Fullscreen' ||
         currentLayout == 'Sidebar' ||
         currentLayout == 'Slider') {
-        return (React__default["default"].createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, onUnmount: onUnmount, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, title: titleText, onSubmit: (params) => onSubmit(params, categoryLevel, categoryData), key: currentLayout, imageOverlayDesktop: image_overlay_desktop, imageOverlayMobile: image_overlay_mobile, showThankyou: showThankyou, campaignId: campaign.id, campaignCode: campaign.code, campaign_subot_id: campaign.bot_id || [], locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }));
+        return (React__default["default"].createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, onUnmount: onUnmount, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, title: titleText, onSubmit: (params) => onSubmit(params, categoryLevel, categoryData), key: currentLayout, imageOverlayDesktop: image_overlay_desktop, imageOverlayMobile: image_overlay_mobile, showThankyou: showThankyou, campaignId: campaign.id, campaignCode: campaign.code, campaign_subot_id: campaign.bot_id || [], locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo, action: action }));
     }
     else if (currentLayout.includes('Skin')) {
         return (React__default["default"].createElement(SkinLayout, { popupId: popupIdRef.current, link: actionBlocks.linkButtonBlock.data.url, linkNewTab: !!actionBlocks.linkButtonBlock.data.newtab, linkText: actionBlocks.linkButtonBlock.data.value, onClose: onClose, onOtherSubmit: onOtherSubmit, imageMobile: image, imageDesktop: image_desktop, currentLayout: currentLayout }));
@@ -5335,7 +5479,7 @@ const formatFormData = (currentForm, formData) => {
     return Object.keys(formData)
         .filter((key) => !!formData[key])
         .map((name) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         const value = String(formData[name]);
         const control = ((_a = currentForm
             .querySelector(`*[name="${name}"][data-control]`)) === null || _a === void 0 ? void 0 : _a.getAttribute('data-control')) ||
@@ -5347,6 +5491,11 @@ const formatFormData = (currentForm, formData) => {
             ((_d = currentForm
                 .querySelector(`*[data-extra][data-name="${name}"]`)) === null || _d === void 0 ? void 0 : _d.getAttribute('data-lead-control')) ||
             'text';
+        const isRequired = Boolean(((_e = currentForm
+            .querySelector(`*[name="${name}"][data-is-required]`)) === null || _e === void 0 ? void 0 : _e.getAttribute('data-is-required')) ||
+            ((_f = currentForm
+                .querySelector(`*[data-extra][data-name="${name}"]`)) === null || _f === void 0 ? void 0 : _f.getAttribute('data-is-required')) ||
+            'text');
         const formatedValue = control === 'tel'
             ? window.intlTelInputUtils
                 .formatNumber(String(value), LEAD_LOCALE === null || LEAD_LOCALE === void 0 ? void 0 : LEAD_LOCALE.countryCodeNumber, numberFormatType)
@@ -5359,6 +5508,7 @@ const formatFormData = (currentForm, formData) => {
             value: formatedValue,
             control,
             leadControl,
+            isRequired,
             // is_sent_mailchimp: currentForm.querySelector(
             //   `div[data-name="${i.name}-mailchimp"]`,
             // )
@@ -5389,6 +5539,7 @@ const formatTrackingData = (params) => {
                     field_name: control.key,
                     component_type: curLeadControl,
                     value: control.value,
+                    is_required: control.isRequired,
                 };
             }
         })
@@ -5398,6 +5549,7 @@ const formatTrackingData = (params) => {
                 return {
                     field_name: item.data.value,
                     component_type: item.name,
+                    is_required: item.isRequired,
                 };
             }
         })