@hhgtech/hhg-components 1.29.416 → 1.29.417-beta-2

package/build/lead.js

@@ -2,59 +2,59 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-3cacf75c.js');
+var tslib_es6 = require('./tslib.es6-8acabd93.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-b0ceb28a.js');
+var index = require('./index-56ed089d.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$1 = require('./index-8b4b461f.js');
-var translationsContext = require('./translationsContext-cd7d6e45.js');
-var utils$1 = require('./utils-c8be48e1.js');
-var index$2 = require('./index-c1551fe6.js');
-var index$3 = require('./index-d3d9b838.js');
-var index$5 = require('./index-4689ad3f.js');
-var index$4 = require('./index-9e28566d.js');
-require('./index.styles-54dbd34d.js');
+var index$1 = require('./index-769a2c36.js');
+var translationsContext = require('./translationsContext-05b21136.js');
+var utils$1 = require('./utils-8325fa5f.js');
+var index$2 = require('./index-304e531d.js');
+var index$3 = require('./index-b676d6b2.js');
+var index$5 = require('./index-2534a8b8.js');
+var index$4 = require('./index-9df9fa8e.js');
+require('./index.styles-44595350.js');
 var hooks = require('@mantine/hooks');
-require('./index-c2742dbd.js');
-var text = require('./text-b61d7a31.js');
-require('./index-27296b44.js');
-var utils = require('./utils-7aa2f419.js');
+require('./index-bf21e951.js');
+var text = require('./text-c3313ee4.js');
+require('./index-bde334af.js');
+var utils = require('./utils-869de120.js');
 var dates = require('@mantine/dates');
-var index$7 = require('./index-20ad809e.js');
-var index$a = require('./index-06442836.js');
-require('./index-62fb22db.js');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-95df2b33.js');
-var index$6 = require('./index-79716dd6.js');
-var translationsProvider = require('./translationsProvider-f08be05d.js');
-var Locale = require('./Locale-d8323a57.js');
+var index$7 = require('./index-4eb41d78.js');
+var index$a = require('./index-43804567.js');
+require('./index-7b2e7862.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-381d7115.js');
+var index$6 = require('./index-fa89196c.js');
+var translationsProvider = require('./translationsProvider-a097a986.js');
+var Locale = require('./Locale-2416ac56.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-714feb5e.js');
-var index$8 = require('./index-cd34fbf6.js');
-var index$9 = require('./index-a8c109b7.js');
-var index$b = require('./index-078e1321.js');
+var togetherComponentGlobalContext = require('./utils-5b7aa127.js');
+var index$8 = require('./index-40b9cb0e.js');
+var index$9 = require('./index-1686a7bc.js');
+var index$b = require('./index-f84e14ca.js');
 var framerMotion = require('framer-motion');
 var ReactDOM = require('react-dom');
-var InputDate = require('./InputDate-460cc7e7.js');
-var index$c = require('./index-25f35320.js');
-var Close = require('./Close-d4633e2e.js');
+var InputDate = require('./InputDate-10ab3c87.js');
+var index$c = require('./index-c9835ab1.js');
+var Close = require('./Close-47179e40.js');
 require('./constantsIsProduction.js');
-require('./normalizeLink-7689ddb6.js');
+require('./normalizeLink-79ec3b7c.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-325ae7f2.js');
+require('./useUniqueId-d7d4069b.js');
 require('./constantsSite.js');
 require('@hhgtech/icons/core');
-require('./shared-731bc7c1.js');
+require('./shared-effe732e.js');
 require('@mantine/notifications');
 require('date-fns/locale');
 require('./constantsRiskScreener.js');
@@ -70,11 +70,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-9d933bb7.js');
+require('./index-072c01d4.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-f41956a8.js');
+require('./constants-62d7a480.js');
 require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -152,33 +152,6 @@ const LEADGEN_BLOCK_INPUT = [
     LEADGEN_BLOCK.CheckboxBlock,
     LEADGEN_BLOCK.TncBlock,
 ];
-const leadGenFieldNamePhone = (listBlockAdded) => {
-    return listBlockAdded
-        .filter(({ name }) => [
-        LEADGEN_BLOCK.PhoneBlock,
-        LEADGEN_BLOCK.PhoneOtpBlock,
-        LEADGEN_BLOCK.WhatsappOtpBlock,
-        LEADGEN_BLOCK.ZaloOtpBlock,
-    ].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 && required) {
-            return `TNC-${id}`;
-        }
-        if (required) {
-            return value;
-        }
-        return;
-    })
-        .filter(Boolean);
-};
 const SSO_MAP_LEAD = ['name', 'email', 'birthday', 'phone', 'gender'];
 const LEAD_LOCALE_DATA$1 = {
     'vi-VN': {
@@ -261,6 +234,33 @@ const mappingSSOToLead = (userInfoProps) => {
         return;
     }
 };
+const leadGenFieldNamePhone = (listBlockAdded) => {
+    return listBlockAdded
+        .filter(({ name }) => [
+        LEADGEN_BLOCK.PhoneBlock,
+        LEADGEN_BLOCK.PhoneOtpBlock,
+        LEADGEN_BLOCK.WhatsappOtpBlock,
+        LEADGEN_BLOCK.ZaloOtpBlock,
+    ].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 && required) {
+            return `TNC-${id}`;
+        }
+        if (required) {
+            return value;
+        }
+        return;
+    })
+        .filter(Boolean);
+};
 const formatCampaignDetail = (campaign) => {
     if (!campaign) {
         return {};
@@ -407,6 +407,55 @@ const formatLeadGenFormValue = (values = {}, blocks) => {
     return newValues;
 };
 
+const TIMEOUT = 30 * 60 * 1000;
+const WAITING_FIRST_RESP = 'waitingTheFirstResponse';
+const CachedSystem = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    cached: {},
+    clearCached: (prefix) => {
+        console.log(CachedSystem.cached);
+        Object.keys(CachedSystem.cached)
+            .filter((k) => k.startsWith(prefix))
+            .forEach((key) => {
+            console.log(key);
+            CachedSystem.cached[key] = undefined;
+        });
+    },
+    withCached: (key, fnResponse, timeout = TIMEOUT) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        if (CachedSystem.cached[key] === WAITING_FIRST_RESP) {
+            return new Promise((resolve) => {
+                const startDate = new Date().getTime();
+                const intervalId = setInterval(() => {
+                    const currentDate = new Date().getTime();
+                    if (currentDate - startDate > 3000) {
+                        clearInterval(intervalId);
+                    }
+                    if (typeof CachedSystem.cached[key] === 'object') {
+                        resolve(CachedSystem.cached[key]);
+                        clearInterval(intervalId);
+                    }
+                }, 100);
+            });
+        }
+        if (typeof CachedSystem.cached[key] === 'object') {
+            return CachedSystem.cached[key];
+        }
+        CachedSystem.cached[key] = 'waitingTheFirstResponse';
+        try {
+            const result = yield fnResponse();
+            CachedSystem.cached[key] = result;
+            setTimeout(() => {
+                CachedSystem.cached[key] = undefined;
+            }, timeout);
+            return result;
+        }
+        catch (err) {
+            CachedSystem.cached[key] = undefined;
+            return Promise.reject(err);
+        }
+    }),
+};
+
 class Store {
     constructor() {
         this.apiSsoUrl = 'https://staging-id.hellobacsi.com/';
@@ -416,6 +465,8 @@ class Store {
 }
 const leadStore = new Store();
 
+const LEADGEN_CACHE_KEY = 'LeadGen_';
+const LEADGEN_CACHE_TIME = 5 * 60 * 1000; // 5 minutes
 const METHOD = {
     GET: 'get',
     POST: 'POST',
@@ -602,7 +653,19 @@ const trackingSubscription = (data) => {
         data,
     });
 };
+function getCampaigns({ url, siteId, apiLeadUrl, }) {
+    const ga_client_id = miscCookieHelper.getCookie('_ga') || null;
+    const AS_PATH = `${apiLeadUrl || leadStore.apiLeadUrl}api/campaign/${siteId}`;
+    return CachedSystem.withCached(LEADGEN_CACHE_KEY + AS_PATH, () => fetch(AS_PATH, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url, ga_client_id }),
+    })
+        .then((res) => res.json())
+        .then(({ _data }) => (_data === null || _data === void 0 ? void 0 : _data.campaigns) || []), LEADGEN_CACHE_TIME);
+}
 const Service = {
+    getCampaigns,
     campaignGetById,
     getCampaignByCode,
     getSubscriptionBoxInfo,
@@ -1655,12 +1718,6 @@ const getTranslations = (locale) => {
     return translationsMap['en-PH'];
 };
 
-const LeadGenTranslationProvider = (props) => {
-    const { locale, children } = props;
-    const translationContextValue = React.useMemo(() => ({ locale, values: getTranslations(locale) }), [locale]);
-    return (React__default["default"].createElement(translationsContext.TranslationsContext.Provider, { value: translationContextValue }, children));
-};
-
 // import mockLeadData from './mockLeadData'
 const listCampaignScheduled = [];
 const listCampaignScheduledToActivated = [];
@@ -1836,167 +1893,167 @@ function clearPassiveEvent() {
         LEAD_SCROLL_EVENT = null;
     }
 }
-function checkShowPopup({ leadApi, leadSiteId, leadDomain, onShowPopup, DEBUG_URL, }) {
-    // clear previous passive event, check for new condition
-    clearPassiveEvent();
-    const leadCurrentUrl = DEBUG_URL ||
-        ('https://' +
-            location.hostname +
-            location.pathname +
-            location.search).toLowerCase();
-    fetch(leadApi + 'api/campaign/' + leadSiteId, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-            url: leadCurrentUrl,
-            ga_client_id: miscCookieHelper.getCookie('_ga') || null,
-        }),
-    })
-        .then((response) => {
-        return response.json();
-        // return mockLeadData || response.json()
-    })
-        .then((data) => {
-        var _a, _b, _c, _d;
-        LeadLog('List campagin: ', data);
-        LEAD_RESET_VAR();
-        if (data._status == 1) {
-            const campaigns = (((_b = (_a = data._data) === null || _a === void 0 ? void 0 : _a.campaigns) === null || _b === void 0 ? void 0 : _b.filter(filterFnCampaign)) || []).filter(fillterApprearanceTimeCampaign);
-            if (!miscCookieHelper.getCookie('hhg-id')) {
-                miscCookieHelper.setCookie('hhg-id', uuid.v1(), {
-                    domain: '.' + leadDomain,
-                    path: '/',
-                });
-                LeadLog('😍 Set HHG ID cookie');
-            }
-            // getCookie('hhg-id')
-            // TODO: HP-534 Filter desktop
-            let campaignsDevice = [];
-            if (isMobile()) {
-                campaignsDevice = campaigns.filter((c) => c.device_types.some((d) => d.id == LEAD_DEVICE_TYPE.MOBILE));
+function getCurrentCampaign({ campaigns = [], leadDomain, leadCurrentUrl, }) {
+    if (!miscCookieHelper.getCookie('hhg-id')) {
+        miscCookieHelper.setCookie('hhg-id', uuid.v1(), { domain: `.${leadDomain}`, path: '/' });
+        LeadLog('😍 Set HHG ID cookie');
+    }
+    // TODO: HP-534 Filter desktop
+    let campaignsDevice = [];
+    if (isMobile()) {
+        campaignsDevice = campaigns.filter((c) => c.device_types.some((d) => d.id == LEAD_DEVICE_TYPE.MOBILE));
+    }
+    else {
+        campaignsDevice = campaigns.filter((c) => c.device_types.some((d) => d.id == LEAD_DEVICE_TYPE.DESKTOP));
+    }
+    LeadLog(`👓 campaignsDevice`, campaignsDevice);
+    LeadLog('--listCampaignScheduled', listCampaignScheduled);
+    LeadLog('--listCampaignScheduledToActivated', listCampaignScheduledToActivated);
+    LeadLog('--listCampaignActiveButExpired', listCampaignActiveButExpired);
+    LeadLog('--listCampaignExcludeSonsored', listCampaignExcludeSonsored);
+    LeadLog('--listCampaignDifferentSponsor', listCampaignDifferentSponsor);
+    LeadLog('--listCampaignNotDisplayInRangeOfTime', listCampaignNotDisplayInRangeOfTime);
+    // Check links
+    let listLinksObj = campaignsDevice
+        .map((i, index) => i.targets
+        .filter((i) => i.type == CAMPAIGN_TARGET_TYPE.LINKS)
+        .map((i) => (Object.assign(Object.assign({}, i), { campaignIndex: index }))))
+        .flat(1) || [];
+    // Check list link match current href
+    listLinksObj = listLinksObj.filter((i) => {
+        var _a;
+        const target = new URL(String(i.target).toLowerCase());
+        if (i.option == 'exact_match')
+            // FOR TEST LOCAL:
+            // return Boolean(location.pathname === target.pathname)
+            return Boolean(leadCurrentUrl === ((_a = target.href) === null || _a === void 0 ? void 0 : _a.toLowerCase()));
+        if (i.option == 'start_with') {
+            // FOR TEST LOCAL:
+            // if (location.pathname.includes(target.pathname)) {
+            if (leadCurrentUrl.includes(String(i.target).toLowerCase())) {
+                const listExcluding = i.sub_target
+                    .filter((i) => i.option == 'excluding')
+                    .map((i) => { var _a; return (_a = i.value) === null || _a === void 0 ? void 0 : _a.toLowerCase(); });
+                return !listExcluding.includes(leadCurrentUrl.split('?')[0]);
             }
             else {
-                campaignsDevice = campaigns.filter((c) => c.device_types.some((d) => d.id == LEAD_DEVICE_TYPE.DESKTOP));
+                return false;
             }
-            LeadLog(`👓 campaignsDevice`, campaignsDevice);
-            LeadLog('--listCampaignScheduled', listCampaignScheduled);
-            LeadLog('--listCampaignScheduledToActivated', listCampaignScheduledToActivated);
-            LeadLog('--listCampaignActiveButExpired', listCampaignActiveButExpired);
-            LeadLog('--listCampaignExcludeSonsored', listCampaignExcludeSonsored);
-            LeadLog('--listCampaignDifferentSponsor', listCampaignDifferentSponsor);
-            LeadLog('--listCampaignNotDisplayInRangeOfTime', listCampaignNotDisplayInRangeOfTime);
-            // Check links
-            let listLinksObj = campaignsDevice
-                .map((i, index) => i.targets
-                .filter((i) => i.type == CAMPAIGN_TARGET_TYPE.LINKS)
-                .map((i) => (Object.assign(Object.assign({}, i), { campaignIndex: index }))))
-                .flat(1);
-            // Check list link match current href
-            listLinksObj = listLinksObj.filter((i) => {
-                var _a;
-                const target = new URL(String(i.target).toLowerCase());
-                if (i.option == 'exact_match')
-                    // FOR TEST LOCAL:
-                    // return Boolean(location.pathname === target.pathname)
-                    return Boolean(leadCurrentUrl === ((_a = target.href) === null || _a === void 0 ? void 0 : _a.toLowerCase()));
-                if (i.option == 'start_with') {
-                    // FOR TEST LOCAL:
-                    // if (location.pathname.includes(target.pathname)) {
-                    if (leadCurrentUrl.includes(String(i.target).toLowerCase())) {
-                        const listExcluding = i.sub_target
-                            .filter((i) => i.option == 'excluding')
-                            .map((i) => { var _a; return (_a = i.value) === null || _a === void 0 ? void 0 : _a.toLowerCase(); });
-                        return !listExcluding.includes(leadCurrentUrl.split('?')[0]);
-                    }
-                    else {
-                        return false;
-                    }
-                }
-            });
-            // Check tags
-            const listMetaTag = Array.from(document.getElementsByTagName('META')).filter((i) => i.getAttribute('property') == 'article:tag');
-            const listTags = listMetaTag.map((i) => i.content);
-            let listCampaignHasTag = [];
-            let listTagsObj = [];
-            if (listTags && listTags.length) {
-                listCampaignHasTag = campaignsDevice
-                    .map((i, index) => i.targets
-                    .filter((i) => i.type == CAMPAIGN_TARGET_TYPE.TAGS)
-                    .map((i) => (Object.assign(Object.assign({}, i), { campaignIndex: index }))))
-                    .flat(1);
-                listTagsObj = listCampaignHasTag.filter((i) => listTags.includes(i.target));
-            }
-            const listCampaginsMatch = [...listLinksObj, ...listTagsObj];
-            const cookieKeys = document.cookie
-                .split('; ')
-                .map((i) => i.split('=')[0]);
-            const listCampaignCodeSubmited = cookieKeys.filter((i) => i.includes('lead_submited'));
-            LeadLog(`--listCampaignCodeSubmited`, listCampaignCodeSubmited);
-            const listCampaignCodeClosed = cookieKeys.filter((i) => i.includes('lead_closed'));
-            LeadLog(`--listCampaignCodeClosed`, listCampaignCodeClosed);
-            const listCampaignSubmitedClosed = [
-                ...listCampaignCodeSubmited,
-                ...listCampaignCodeClosed,
-            ];
-            const listCampaignNoSubmitedClosed = listCampaginsMatch.filter((i) => {
-                const hasSubmited = listCampaignSubmitedClosed.some((k) => k.includes(campaignsDevice[i.campaignIndex].code));
-                return !hasSubmited;
-            });
-            const listCampaignValid = getShuffleArray(listCampaignNoSubmitedClosed);
-            // .sort(
-            //   (a, b) =>
-            //     (listCampaignValid[a.campaignIndex]?.score || 0) -
-            //     (listCampaignValid[b.campaignIndex]?.score || 0),
-            // )
-            LeadLog('--listCampaignValid : ', listCampaignValid);
-            if (listCampaignValid && listCampaignValid.length) {
-                const CAMPAIGN_SHOW = campaignsDevice[listCampaignValid[0].campaignIndex];
-                LeadLog(`CAMPAIGN_SHOW`, CAMPAIGN_SHOW);
-                const { rules } = CAMPAIGN_SHOW;
-                // CHECK RULE TRIGGER POPUP
-                const timeoutRule = Number((_c = rules.find((i) => i.rule == 'time')) === null || _c === void 0 ? void 0 : _c.value);
-                LeadLog(`timeoutRule`, timeoutRule);
-                const scrollRule = Number((_d = rules.find((i) => i.rule == 'scroll')) === null || _d === void 0 ? void 0 : _d.value);
-                LeadLog(`scrollRule`, scrollRule);
-                let impressionAction = 'TIME';
-                if (Number.isInteger(timeoutRule)) {
-                    impressionAction = 'TIME';
-                    LeadLog('✨ SHOW AWESOME POPUP AFTER: ', timeoutRule, ' seconds');
-                    timeoutRef = setTimeout(() => {
-                        onShowPopup === null || onShowPopup === void 0 ? void 0 : onShowPopup(CAMPAIGN_SHOW, impressionAction);
-                    }, timeoutRule * 1000);
-                }
-                if (Number.isInteger(scrollRule)) {
-                    impressionAction = 'SCROLL';
-                    LeadLog('✨ SHOW AWESOME AFTER: SCROLL', scrollRule, ' %');
-                    const $p = document.querySelector(`[data-url="${location.pathname}"]`) ||
-                        document.querySelector('body');
-                    const pct = $p.getBoundingClientRect().top;
-                    const pb = $p.offsetHeight;
-                    LeadLog(`👓 Element check scroll: `, $p);
-                    LEAD_SCROLL_EVENT = function leadScollCheckHandler() {
-                        const wt = window.pageYOffset || document.documentElement.scrollTop;
-                        let percent = 0;
-                        if (wt >= pct) {
-                            percent = Math.round(((wt - pct) / (pb - innerHeight)) * 100);
-                        }
-                        LeadLog('---Scroll', percent, scrollRule);
-                        // TODO: CHECK FOOTER HEIGHT
-                        if (percent >= scrollRule) {
-                            window.removeEventListener('scroll', LEAD_SCROLL_EVENT);
-                            onShowPopup === null || onShowPopup === void 0 ? void 0 : onShowPopup(CAMPAIGN_SHOW, impressionAction);
-                        }
-                    };
-                    window.addEventListener('scroll', LEAD_SCROLL_EVENT, {
-                        passive: true,
-                    });
-                }
+        }
+    });
+    // Check tags
+    const listMetaTag = Array.from(document.getElementsByTagName('META')).filter((i) => i.getAttribute('property') == 'article:tag');
+    const listTags = listMetaTag.map((i) => i.content);
+    let listCampaignHasTag = [];
+    let listTagsObj = [];
+    if (listTags && listTags.length) {
+        listCampaignHasTag = campaignsDevice
+            .map((i, index) => i.targets
+            .filter((i) => i.type == CAMPAIGN_TARGET_TYPE.TAGS)
+            .map((i) => (Object.assign(Object.assign({}, i), { campaignIndex: index }))))
+            .flat(1);
+        listTagsObj = listCampaignHasTag.filter((i) => listTags.includes(i.target));
+    }
+    const listCampaginsMatch = [...listLinksObj, ...listTagsObj];
+    const cookieKeys = document.cookie.split('; ').map((i) => i.split('=')[0]);
+    const listCampaignCodeSubmited = cookieKeys.filter((i) => i.includes('lead_submited'));
+    LeadLog(`--listCampaignCodeSubmited`, listCampaignCodeSubmited);
+    const listCampaignCodeClosed = cookieKeys.filter((i) => i.includes('lead_closed'));
+    LeadLog(`--listCampaignCodeClosed`, listCampaignCodeClosed);
+    const listCampaignSubmitedClosed = [
+        ...listCampaignCodeSubmited,
+        ...listCampaignCodeClosed,
+    ];
+    const listCampaignNoSubmitedClosed = listCampaginsMatch.filter((i) => {
+        const hasSubmited = listCampaignSubmitedClosed.some((k) => k.includes(campaignsDevice[i.campaignIndex].code));
+        return !hasSubmited;
+    });
+    const listCampaignValid = getShuffleArray(listCampaignNoSubmitedClosed);
+    // .sort(
+    //   (a, b) =>
+    //     (listCampaignValid[a.campaignIndex]?.score || 0) -
+    //     (listCampaignValid[b.campaignIndex]?.score || 0),
+    // )
+    LeadLog('--listCampaignValid : ', listCampaignValid);
+    if (listCampaignValid && listCampaignValid.length) {
+        const CAMPAIGN_SHOW = campaignsDevice[listCampaignValid[0].campaignIndex];
+        return CAMPAIGN_SHOW;
+    }
+    else {
+        LeadLog('🚧 No lead campaigns on current URL, tags');
+        return null;
+    }
+}
+function addEventShowCurrentCampaign({ campaign: CAMPAIGN_SHOW, onShowPopup, }) {
+    var _a, _b;
+    LeadLog(`CAMPAIGN_SHOW`, CAMPAIGN_SHOW);
+    const { rules } = CAMPAIGN_SHOW;
+    // CHECK RULE TRIGGER POPUP
+    const timeoutRule = Number((_a = rules.find((i) => i.rule == 'time')) === null || _a === void 0 ? void 0 : _a.value);
+    LeadLog(`timeoutRule`, timeoutRule);
+    const scrollRule = Number((_b = rules.find((i) => i.rule == 'scroll')) === null || _b === void 0 ? void 0 : _b.value);
+    LeadLog(`scrollRule`, scrollRule);
+    let impressionAction = 'TIME';
+    if (Number.isInteger(timeoutRule)) {
+        impressionAction = 'TIME';
+        LeadLog('✨ SHOW AWESOME POPUP AFTER: ', timeoutRule, ' seconds');
+        timeoutRef = setTimeout(() => {
+            onShowPopup === null || onShowPopup === void 0 ? void 0 : onShowPopup(CAMPAIGN_SHOW, impressionAction);
+        }, timeoutRule * 1000);
+        return { campaign: CAMPAIGN_SHOW, action: impressionAction };
+    }
+    if (Number.isInteger(scrollRule)) {
+        impressionAction = 'SCROLL';
+        LeadLog('✨ SHOW AWESOME AFTER: SCROLL', scrollRule, ' %');
+        const $p = document.querySelector(`[data-url="${location.pathname}"]`) ||
+            document.querySelector('body');
+        const pct = $p.getBoundingClientRect().top;
+        const pb = $p.offsetHeight;
+        LeadLog(`👓 Element check scroll: `, $p);
+        LEAD_SCROLL_EVENT = function leadScollCheckHandler() {
+            const wt = window.pageYOffset || document.documentElement.scrollTop;
+            let percent = 0;
+            if (wt >= pct) {
+                percent = Math.round(((wt - pct) / (pb - innerHeight)) * 100);
             }
-            else {
-                LeadLog('🚧 No lead campaigns on current URL, tags');
+            LeadLog('---Scroll', percent, scrollRule);
+            // TODO: CHECK FOOTER HEIGHT
+            if (percent >= scrollRule) {
+                window.removeEventListener('scroll', LEAD_SCROLL_EVENT);
+                onShowPopup === null || onShowPopup === void 0 ? void 0 : onShowPopup(CAMPAIGN_SHOW, impressionAction);
             }
+        };
+        window.addEventListener('scroll', LEAD_SCROLL_EVENT, {
+            passive: true,
+        });
+    }
+}
+function checkShowPopup({ leadApi, leadSiteId, leadDomain, onShowPopup, DEBUG_URL, }) {
+    // clear previous passive event, check for new condition
+    clearPassiveEvent();
+    let leadCurrentUrl = DEBUG_URL;
+    if (typeof window !== 'undefined') {
+        const { location } = window;
+        leadCurrentUrl = leadCurrentUrl || location.href.toLowerCase();
+    }
+    Service.getCampaigns({
+        url: leadCurrentUrl,
+        siteId: leadSiteId,
+        apiLeadUrl: leadApi,
+    })
+        .then((campRes) => {
+        LeadLog('List campagin: ', campRes);
+        LEAD_RESET_VAR();
+        const campaigns = (campRes || [])
+            .filter(filterFnCampaign)
+            .filter(fillterApprearanceTimeCampaign);
+        const campaign = getCurrentCampaign({
+            campaigns,
+            leadCurrentUrl,
+            leadDomain,
+        });
+        if (campaign && (campaign === null || campaign === void 0 ? void 0 : campaign.id)) {
+            addEventShowCurrentCampaign({ campaign, onShowPopup });
         }
     })
         .catch((err) => {
@@ -2013,147 +2070,149 @@ const LeadLog = (...params) => {
     }
 };
 
+const LeadGenInlineWithoutMemo = (props) => {
+    const [campaign, setCampaign] = React.useState();
+    const { forceCampaign, apiUrl, apiLeadUrl, siteId, siteDomain, DEBUG_URL } = props;
+    React.useEffect(() => {
+        if (forceCampaign) {
+            setCampaign(forceCampaign);
+            return;
+        }
+        (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+            const campaign = yield leadGenInlineGetCampaign({
+                siteId,
+                siteDomain,
+                apiLeadUrl: apiUrl || apiLeadUrl || '',
+                url: DEBUG_URL,
+            });
+            if (campaign) {
+                setCampaign(campaign);
+            }
+        }))();
+    }, [forceCampaign, DEBUG_URL, apiUrl, apiLeadUrl, siteId, siteDomain]);
+    if (!campaign || !(campaign === null || campaign === void 0 ? void 0 : campaign.id)) {
+        return null;
+    }
+    return (React__default["default"].createElement(LeadGen, Object.assign({}, props, { forceCampaign: campaign, apiUrl: apiUrl || apiLeadUrl, flatComponent: true })));
+};
+const LeadGenInline = React.memo(LeadGenInlineWithoutMemo);
+function leadGenInlineGetCampaign(props) {
+    var _a;
+    return tslib_es6.__awaiter(this, void 0, void 0, function* () {
+        const { url, apiLeadUrl, siteId, siteDomain } = props;
+        const campaigns = yield Service.getCampaigns({ url, apiLeadUrl, siteId });
+        const campaignsInline = (_a = (campaigns || [])) === null || _a === void 0 ? void 0 : _a.filter(({ extra_fields }) => {
+            const { currentLayout } = extra_fields || {};
+            return currentLayout === null || currentLayout === void 0 ? void 0 : currentLayout.includes('Inline');
+        });
+        return getCurrentCampaign({
+            campaigns: campaignsInline,
+            leadCurrentUrl: url,
+            leadDomain: siteDomain,
+        });
+    });
+}
+
+const LeadGenTranslationProvider = (props) => {
+    const { locale, children } = props;
+    const translationContextValue = React.useMemo(() => ({ locale, values: getTranslations(locale) }), [locale]);
+    return (React__default["default"].createElement(translationsContext.TranslationsContext.Provider, { value: translationContextValue }, children));
+};
+
 const LeadGenContext = React.createContext({
-    submit(value) {
+    onSubmit(value) {
         /** Init for FAKING function */
         LeadLog('** LeadGen Submit : ', value);
         return Promise.reject(value);
     },
-    submitSubscriptionBox(value) {
+    onImpression(value) {
         /** Init for FAKING function */
-        LeadLog('** LeadGen SubmitSubscriptionBox : ', value);
-        return Promise.reject(value);
-    },
-    impression(type) {
-        /** Init for FAKING function */
-        LeadLog('** LeadGen Impression : ', type);
+        LeadLog('** LeadGen Impression : ', value);
         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, categoryList, siteDomain: site_domain, children, userInfo } = props, restProps = tslib_es6.__rest(props, ["campaign_code", "apiSsoUrl", "apiLeadUrl", "apiSubotUrl", "locale", "forceCampaign", "extraValues", "articleId", "categoryList", "siteDomain", "children", "userInfo"]);
+    const { campaign_code: campaignCodeProps, apiSsoUrl, apiLeadUrl, apiSubotUrl, locale: localeProps, forceCampaign: forceCampaignProps, extraValues, siteId, siteDomain, DEBUG_URL = '', children, articleId, categoryId, userInfo } = props, restProps = tslib_es6.__rest(props, ["campaign_code", "apiSsoUrl", "apiLeadUrl", "apiSubotUrl", "locale", "forceCampaign", "extraValues", "siteId", "siteDomain", "DEBUG_URL", "children", "articleId", "categoryId", "userInfo"]);
     const { t } = index$1.useTranslations();
-    const [forceCampaign, setForceCampaign] = React.useState(forceCampaignProps);
+    const [rawForceCampaign, setRawForceCampaign] = React.useState(forceCampaignProps);
+    const [forceCampaign, setForceCampaign] = React.useState(() => formatCampaignDetail(forceCampaignProps));
     const [subscriptionInfo, setSubscriptionInfo] = React.useState({
         subscriptionIcon: '',
         subscriptionTitle: '',
         subscriptionType: 'TypeA',
         subscriptionPhoneType: '',
-        subcriptionCateId: '',
-        subcriptionCateName: '',
     });
     const locale = React.useMemo(() => {
         return localeProps || Locale.LOCALE['PhilippinesEnglish'];
     }, [localeProps]);
-    const { url, campaign_id, cookie_id, ga_client_id, category_list, article_id, article_title, } = React.useMemo(() => ({
-        url: location.href.toLowerCase() || '',
-        cookie_id: miscCookieHelper.getCookie('hhg-id') || null,
-        ga_client_id: miscCookieHelper.getCookie('_ga'),
-        campaign_id: forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id,
-        campaign_code: campaignCodeProps || (forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.code),
-        category_list: categoryList,
-        article_id: articleId,
-        article_title: (extraValues === null || extraValues === void 0 ? void 0 : extraValues.article_title) || document.title || '',
-    }), [
-        campaignCodeProps,
-        articleId,
-        categoryList,
-        forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id,
-        extraValues === null || extraValues === void 0 ? void 0 : extraValues.article_title,
-        subscriptionInfo === null || subscriptionInfo === void 0 ? void 0 : subscriptionInfo.subcriptionCateName,
-    ]);
-    // 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) => {
+    const onSubmit = React.useCallback((data) => {
         return Service.postSubscriptionBoxLead({ data });
+    }, [forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.blocks]);
+    const onImpression = React.useCallback((value) => {
+        //
+        console.log('** RYAN LeadGenContext.tsx 188 value : ', value);
+        return Promise.resolve('dfdfdf');
     }, []);
     const submitSubscriptionBox = React.useCallback((value) => {
-        const data = Object.assign(Object.assign({}, value), { 
+        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: subscriptionInfo.subcriptionCateId, category_name: subscriptionInfo.subcriptionCateName, article_title });
+            site_domain: siteDomain, url: (value === null || value === void 0 ? void 0 : value.url) || location.href.toLowerCase() || '', cookie_id: miscCookieHelper.getCookie('hhg-id') || null, ga_client_id: miscCookieHelper.getCookie('_ga') }), extraValues), { article_id: articleId, category_id: categoryId, article_title: (extraValues === null || extraValues === void 0 ? void 0 : extraValues.article_title) || document.title || '' });
         return Service.postSubscriptionBoxLead({ data });
     }, [
         extraValues,
-        site_domain,
-        campaign_id,
-        article_id,
-        article_title,
-        subscriptionInfo.subcriptionCateId,
-        subscriptionInfo.subcriptionCateName,
-        url,
-        cookie_id,
-        ga_client_id,
+        extraValues === null || extraValues === void 0 ? void 0 : extraValues.article_title,
+        siteDomain,
+        articleId,
+        categoryId,
     ]);
-    const impression = React.useCallback((type) => {
-        const gaCookie = miscCookieHelper.getCookie('_ga') || null;
+    const impressionSubscriptionBox = React.useCallback((type) => {
         const impression = {
             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],
+            site_domain: siteDomain,
             url: location.href.toLowerCase(),
             cookie_id: miscCookieHelper.getCookie('hhg-id'),
-            ga_client_id: gaCookie,
-            article_title,
-            article_id,
-            category_id: subscriptionInfo.subcriptionCateId,
-            category_name: subscriptionInfo.subcriptionCateName,
+            ga_client_id: miscCookieHelper.getCookie('_ga') || null,
+            article_title: (extraValues === null || extraValues === void 0 ? void 0 : extraValues.article_title) || document.title || '',
+            article_id: articleId,
+            category_id: categoryId,
+            category_name: (extraValues === null || extraValues === void 0 ? void 0 : extraValues.category_name) || '',
             type,
         };
         return Service.trackingSubscription(impression);
     }, [
-        campaign_id,
-        url,
-        article_title,
-        cookie_id,
-        ga_client_id,
-        subscriptionInfo.subcriptionCateId,
-        subscriptionInfo.subcriptionCateName,
+        articleId,
+        categoryId,
         subscriptionInfo.subscriptionTitle,
-        article_id,
+        extraValues === null || extraValues === void 0 ? void 0 : extraValues.category_name,
         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(() => {
+        /** Force Campaign */
         if (forceCampaignProps) {
             setForceCampaign(formatCampaignDetail(forceCampaignProps));
+            setRawForceCampaign(forceCampaignProps);
             return;
         }
         /** For Subscription Box */
-        if (category_list) {
+        if (categoryId) {
             Service.getSubscriptionBoxInfo({
-                category: category_list.map((i) => i.termId).join(','),
-                site: site_domain,
+                category: categoryId,
+                site: siteDomain,
                 slug: location === null || location === void 0 ? void 0 : location.pathname,
             }).then((res) => {
-                var _a;
                 const { _data } = res || {};
-                const { item = [], btn_type = 'zalo' } = _data || {};
-                const { icon, content, cate_id } = ((_a = item.filter((i) => i.cate_id !== 'default')) === null || _a === void 0 ? void 0 : _a[0]) || {};
+                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) => {
-                    var _a, _b;
-                    return (Object.assign(Object.assign({}, prev), { subscriptionIcon: icon, subscriptionTitle: content, subscriptionPhoneType: btn_type, subcriptionCateId: cate_id, subcriptionCateName: (_b = (_a = category_list.filter((i) => i.termId == cate_id)) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name }));
-                });
+                setSubscriptionInfo((prev) => (Object.assign(Object.assign({}, prev), { subscriptionIcon: icon, subscriptionTitle: content, subscriptionPhoneType: btn_type })));
                 setForceCampaign(formatCampaignDetail({
                     id: 6993,
                     name: '',
@@ -2277,10 +2336,39 @@ const LeadGenContextProvider = (props) => {
             });
             return;
         }
-        // if (campaignCodeProps) {
-        //   fetchCampaign(campaignCodeProps)
+        if (campaignCodeProps) {
+            Service.getCampaignByCode(campaignCodeProps).then((res) => {
+                const { _data } = res || {};
+                const { campaigns } = _data || {};
+                LeadLog('** LeadGen Campaign : ', campaigns);
+                setForceCampaign(formatCampaignDetail(campaigns));
+                setRawForceCampaign(campaigns);
+            });
+            return;
+        }
+        // /** For LeadGen */
+        // if (!leadStore.campaigns?.length) {
+        //   checkShowPopup({
+        //     leadApi: apiLeadUrl,
+        //     leadDomain: siteDomain,
+        //     leadSiteId: siteId,
+        //     onShowPopup(campaign: any, action: string) {
+        //       console.log('** RYAN LeadGenContext.tsx 421 action : ', action)
+        //       setForceCampaign(formatCampaignDetail(campaign))
+        //       setRawForceCampaign(campaign)
+        //     },
+        //     DEBUG_URL,
+        //   })
         // }
-    }, [forceCampaignProps, campaignCodeProps, category_list]);
+    }, [
+        forceCampaignProps,
+        campaignCodeProps,
+        categoryId,
+        siteId,
+        siteDomain,
+        apiLeadUrl,
+        DEBUG_URL,
+    ]);
     React.useEffect(() => {
         leadStore.apiSsoUrl = apiSsoUrl;
         leadStore.apiLeadUrl = apiLeadUrl;
@@ -2291,10 +2379,16 @@ const LeadGenContextProvider = (props) => {
     }
     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, articleId, categoryId: subscriptionInfo.subcriptionCateId, siteDomain: site_domain, forceCampaign,
-            submit,
+            apiSubotUrl, locale: localeProps, extraValues,
+            articleId,
+            categoryId,
+            siteDomain,
+            forceCampaign,
+            rawForceCampaign,
+            onSubmit,
+            onImpression,
             submitSubscriptionBox,
-            impression }) },
+            impressionSubscriptionBox }) },
         React__default["default"].createElement(LeadGenTranslationProvider, { locale: locale }, children)));
 };
 const useLeadGenContext = () => {
@@ -2882,7 +2976,7 @@ const cssWrapperInputNotShrink$1 = react.css `
 const cssWrapperInputShrink$1 = react.css `
   height: auto;
   min-height: var(--container-height, 56px);
-  padding-block: var(--space-y-shrink, 7px);
+  padding-block: var(--space-y-shrink, 6px);
   cursor: text;
   pointer-events: auto;
 `;
@@ -2894,7 +2988,7 @@ const cssInputWrapperError$1 = react.css `
 const StyledTextFieldContainer$1 = styled__default["default"].div `
   --space-x: 16px;
   --space-y-not-shrink: 15px;
-  --space-y-shrink: 7px;
+  --space-y-shrink: 6px;
   --container-height: 56px;
   --label-not-shrink: 16px;
   --label-shrink: 12px;
@@ -3307,7 +3401,7 @@ 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, subscriptionPhoneType, submitSubscriptionBox, onFinish, impression, } = useLeadGenContext();
+    const { apiLeadUrl, subscriptionIcon, subscriptionTitle, subscriptionPhoneType, submitSubscriptionBox, onFinish, impressionSubscriptionBox, } = useLeadGenContext();
     const { t } = index$1.useTranslations();
     const { action: { pushNotifications }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
     const [loading, setLoading] = React.useState(false);
@@ -3367,7 +3461,7 @@ const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, ca
             const reqValues = Object.assign(Object.assign({}, newValues), ssoValues);
             const [res] = yield Promise.all([
                 submitSubscriptionBox(reqValues),
-                impression('submit_form'),
+                impressionSubscriptionBox('submit_form'),
             ]);
             const { _data } = res || {};
             const { model } = _data || {};
@@ -3413,7 +3507,7 @@ const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, ca
         userInfo === null || userInfo === void 0 ? void 0 : userInfo.uid,
         userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone,
     ]);
-    return (React__default["default"].createElement(ImpressionTrackingWrapper, { dependency: categoryId, onImpression: () => impression('impression') },
+    return (React__default["default"].createElement(ImpressionTrackingWrapper, { dependency: categoryId, onImpression: () => impressionSubscriptionBox('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 })))));
@@ -3422,8 +3516,11 @@ const LeadGenSubscriptionBox$1 = React.memo(LeadGenSubscriptionBoxWithoutMemo);
 
 const Container = () => {
     const context = React.useContext(LeadGenContext);
-    const { campaign_code, locale, siteId, siteDomain, userInfo, forceCampaign, subscriptionTitle, } = context;
-    return subscriptionTitle ? (React__default["default"].createElement(LeadGenSubscriptionBox$1, { locale: locale, siteId: siteId, siteDomain: siteDomain, userInfo: userInfo, forceCampaign: forceCampaign, campaign_code: campaign_code })) : null;
+    const { campaign_code, locale, siteId, siteDomain, userInfo, forceCampaign } = context;
+    if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
+        return null;
+    }
+    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];
@@ -4145,7 +4242,7 @@ 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, doImpression, }) => {
+const InlineLayout = ({ flatComponent, content, inlinePosition, doImpression, }) => {
     const target = React.useMemo(() => {
         if (!inlinePosition)
             return null;
@@ -4250,6 +4347,9 @@ const InlineLayout = ({ content, inlinePosition, doImpression, }) => {
             }
         }
     }, [inlinePosition]);
+    if (!!flatComponent) {
+        return (React__default["default"].createElement(ImpressionTrackingWrapper, { onImpression: () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () { return yield doImpression(); }) }, content));
+    }
     if (!inlinePosition || !target)
         return null;
     return ReactDOM.createPortal(React__default["default"].createElement(ImpressionTrackingWrapper, { onImpression: () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () { return yield doImpression(); }) }, content), target);
@@ -4290,15 +4390,28 @@ const EmptyComponent = ({ onClose, onContinue, }) => {
             React__default["default"].createElement(core.Button, { onClick: onContinue, size: "lg", variant: "filled", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_again" }, t('lead.empty.submitAgain')))));
 };
 
+var useTextStyles = core.createStyles((theme) => {
+    return text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN];
+});
+
+const ErrorIcon = (_a) => {
+    var { size } = _a, rest = tslib_es6.__rest(_a, ["size"]);
+    const props = Object.assign({ width: size, height: size }, rest);
+    return (React__default["default"].createElement("svg", Object.assign({ width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React__default["default"].createElement("path", { d: "M5.996 6.513q.163 0 .282-.12a.38.38 0 0 0 .118-.28V3.937q0-.15-.118-.268a.4.4 0 0 0-.282-.119.4.4 0 0 0-.281.12.38.38 0 0 0-.119.28v2.175q0 .15.119.269.12.119.281.119m0 1.862a.43.43 0 0 0 .3-.112.4.4 0 0 0 .125-.313.4.4 0 0 0-.125-.3.4.4 0 0 0-.3-.125.4.4 0 0 0-.3.125.4.4 0 0 0-.125.3.4.4 0 0 0 .125.313.43.43 0 0 0 .3.112m0 2.375a4.6 4.6 0 0 1-1.856-.375 4.8 4.8 0 0 1-1.506-1.012A4.8 4.8 0 0 1 1.62 7.857 4.6 4.6 0 0 1 1.246 6q0-.987.375-1.856t1.013-1.506A4.8 4.8 0 0 1 4.14 1.625a4.6 4.6 0 0 1 1.856-.375q.988 0 1.857.375Q8.72 2 9.359 2.638q.637.637 1.012 1.506T10.747 6t-.375 1.857A4.8 4.8 0 0 1 9.36 9.363a4.8 4.8 0 0 1-1.506 1.012q-.87.375-1.857.375", fill: "#F44D2C" })));
+};
+ErrorIcon.defaultProps = {
+    size: 18,
+    color: miscTheme.theme.colors.gray600,
+    activeColor: miscTheme.theme.colors.primaryBase,
+};
+
 const SubtitleBlock = ({ children, align, }) => (React__default["default"].createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
 const cssInputNotShrink = react.css `
   height: 100% !important;
   min-height: calc(var(--container-height, 56px) * 24 / 56);
-  color: ${miscTheme.theme.colors.gray800};
-  font-size: var(--input, 15px);
   line-height: calc(var(--container-height, 56px) * 24 / 56);
-  letter-spacing: -0.3px;
   border: none !important;
   border-radius: 0 !important;
   outline: none !important;
@@ -4321,11 +4434,6 @@ const cssLabelNotShrink = react.css `
   position: absolute;
   top: calc(var(--container-height) / 2);
   left: var(--space-x, 16px);
-  color: ${miscTheme.theme.colors.gray400};
-  font-size: var(--label-not-shrink, 15px);
-  font-weight: 500;
-  line-height: calc(var(--container-height, 56px) * 24 / 56);
-  letter-spacing: -0.3px;
   margin: 0;
   z-index: 1;
   cursor: pointer;
@@ -4333,11 +4441,7 @@ const cssLabelNotShrink = react.css `
   transition: 0.125s ease-in all;
 `;
 const cssLabelShrink = react.css `
-  color: ${miscTheme.theme.colors.gray400};
-  font-size: var(--label-shrink, 12px);
-  line-height: calc(var(--container-height, 56px) * 18 / 56);
-  letter-spacing: -0.2px;
-  top: calc(var(--container-height) * 7 / 56);
+  top: var(--space-y-shrink, 6px);
   transform: none;
   transition: 0.125s ease-out all;
 `;
@@ -4368,7 +4472,7 @@ const cssWrapperInputNotShrink = react.css `
 const cssWrapperInputShrink = react.css `
   height: auto;
   min-height: var(--container-height, 56px);
-  padding-block: var(--space-y-shrink, 7px);
+  padding-block: var(--space-y-shrink, 6px);
   cursor: text;
   pointer-events: auto;
 `;
@@ -4380,7 +4484,7 @@ const cssInputWrapperError = react.css `
 const StyledTextFieldContainer = styled__default["default"].div `
   --space-x: 16px;
   --space-y-not-shrink: 15px;
-  --space-y-shrink: 7px;
+  --space-y-shrink: 6px;
   --container-height: 56px;
   --label-not-shrink: 16px;
   --label-shrink: 12px;
@@ -4607,7 +4711,7 @@ const TextField = (props) => {
         setShrink(shrinkProps);
     }, [shrinkProps]);
     return (React__default["default"].createElement(StyledTextFieldContainer, Object.assign({ shrink: shrink, className: core.clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps),
-        React__default["default"].createElement("div", { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, children)));
+        React__default["default"].createElement("div", { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, typeof children === 'function' ? children(shrink) : children)));
 };
 const ChoiceField = (props) => {
     const { children, className } = props, restProps = tslib_es6.__rest(props, ["children", "className"]);
@@ -4618,6 +4722,7 @@ const TitleBlock = ({ children, align, }) => (React__default["default"].createEl
 
 const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, }) => {
     const { t } = index$1.useTranslations();
+    const { classes } = useTextStyles();
     const form = useLeadFormContext();
     const formValues = form.values;
     const labelTuples = React.useMemo(() => {
@@ -4637,24 +4742,44 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
             case 'SubtitleBlock':
                 return (React__default["default"].createElement(SubtitleBlock, { key: index, align: align }, value));
             case 'TextBlock':
-                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: "text", placeholder: " ", 
-                        // className="lead-modal__form-control leadgen-form_field"
-                        // onChangeRaw={(e) => inputOnChange('text', e)}
-                        label: label, "data-control": "text", "data-lead-control": name, "data-is-required": required, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value), { name: value }))));
+                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" }, (shrink) => (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: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), "data-control": "text", "data-lead-control": name, "data-is-required": required, inputWrapperOrder: [
+                        'label',
+                        'input',
+                        'description',
+                        'error',
+                    ] }, form.getInputProps(value), { name: value, error: form.errors[value] && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
+                        React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                        React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, form.errors[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, "data-is-required": required, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" }, (shrink) => (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: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), "data-control": "number", "data-lead-control": name, "data-is-required": required, name: value, inputWrapperOrder: [
+                        'label',
+                        'input',
+                        'description',
+                        'error',
+                    ] }, form.getInputProps(value), { error: form.errors[value] && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
+                        React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                        React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, form.errors[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, "data-is-required": required, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" }, (shrink) => (React__default["default"].createElement(core.TextInput, Object.assign({ withAsterisk: required, spellCheck: false, 
+                    // type="email"
+                    placeholder: " ", 
+                    // className="lead-modal__form-control leadgen-form_field"
+                    label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), "data-control": "email", "data-lead-control": name, "data-is-required": required, name: value, inputWrapperOrder: [
+                        'label',
+                        'input',
+                        'description',
+                        'error',
+                    ] }, form.getInputProps(value), { error: form.errors[value] && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
+                        React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                        React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, form.errors[value]))), styles: (theme) => ({
+                        input: text.GlobalTextStyleNew(theme)[text.CustomStylesType.LEADGEN].p2,
+                    }) })))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -4663,20 +4788,30 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 const _b = form.getInputProps(value), { error } = _b, formPhoneInputWrapper = tslib_es6.__rest(_b, ["error"]);
                 return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: core.clsx('lead-modal__form-control leadgen-form_field', {
                         'leadgen-form_field_error': !!error,
-                    }) },
-                    React__default["default"].createElement(core.Input.Wrapper, { size: "md", withAsterisk: required, label: label, "data-invalid": !!error, labelProps: { htmlFor: htmlForId }, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error },
-                        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, "data-is-required": required }, formPhoneInputWrapper))))));
+                    }) }, (shrink) => (React__default["default"].createElement(core.Input.Wrapper, { size: "md", withAsterisk: required, label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), "data-invalid": !!error, labelProps: { htmlFor: htmlForId }, inputWrapperOrder: [
+                        'label',
+                        'input',
+                        'description',
+                        'error',
+                    ], error: error },
+                    React__default["default"].createElement("div", { className: "mantine-Input-wrapper" },
+                        React__default["default"].createElement(index$3.Phone, Object.assign({ className: `mantine-Input-input ${classes.p2}`, 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, "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, "data-is-required": required, locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" }, (shrink) => (React__default["default"].createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: " ", label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, 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" },
+                return (React__default["default"].createElement(core.Input.Wrapper, { key: index, size: "md", withAsterisk: required, label: React__default["default"].createElement(index$2.Text, { size: "p2", variant: "primary" }, label), "data-invalid": !!error, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: form.errors[value] && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
+                        React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                        React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, form.errors[value]))), 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, "data-is-required": required, className: "leadgen-form_field_date", labelTuples: labelTuples }, formInputProps))));
             }
             case 'LinkButtonBlock':
@@ -4693,7 +4828,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         }, "data-name": value + '-mailchimp' })),
                     React__default["default"].createElement(index$3.Checkbox.Group, Object.assign({ withAsterisk: required, 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: label, size: "md", sx: {
+                        label: React__default["default"].createElement(index$2.Text, { size: "p2", variant: "primary" }, label), size: "md", sx: {
                             display: 'flex',
                             flexDirection: 'column',
                             flexWrap: 'wrap',
@@ -4706,20 +4841,22 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     isSendMailChimp && (React__default["default"].createElement(core.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
                     React__default["default"].createElement(index$3.Radio.Group, Object.assign({ withAsterisk: required, 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: label, size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
+                        label: React__default["default"].createElement(index$2.Text, { size: "p2", variant: "primary" }, 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, "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 },
+                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field DropdownBlock", key: index }, (shrink) => (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, "data-is-required": required }),
                     React__default["default"].createElement(index$3.Select
                     // className="lead-modal__form-control leadgen-form_field"
                     , Object.assign({ 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: label, placeholder: " ", searchable: true, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
+                        label: React__default["default"].createElement(index$2.Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), placeholder: " ", searchable: true, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
                             value: l.value,
                             label: l.placeholder,
-                        })), nothingFound: React__default["default"].createElement(NoData, null), styles: {
+                        })), nothingFound: React__default["default"].createElement(NoData, null), error: form.errors[value] && (React__default["default"].createElement(core.Flex, { align: 'center', gap: 4 },
+                            React__default["default"].createElement(ErrorIcon, { size: 12 }),
+                            React__default["default"].createElement(index$2.Text, { size: "c1", variant: "error" }, form.errors[value]))), styles: {
                             item: {
                                 paddingBlock: 12,
                                 paddingInline: 10,
@@ -4740,20 +4877,19 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                                     paddingInline: 0,
                                 },
                             },
-                        }, maxDropdownHeight: 192 }, form.getInputProps(value)))));
+                        }, maxDropdownHeight: 192 }, form.getInputProps(value)))))));
             case 'TncBlock':
                 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(index$2.Text, { as: "span", size: "c1", variant: "secondary", dangerouslySetInnerHTML: { __html: data.valueHTML }, styles: (theme) => ({
+                        React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default["default"].createElement(index$2.Text, { as: "span", size: "c1", variant: "secondary", dangerouslySetInnerHTML: { __html: data.valueHTML }, styles: {
                                     root: {
                                         a: {
-                                            textDecoration: 'underline !important',
+                                            textDecoration: 'underline',
                                             textUnderlineOffset: '3px',
-                                            color: `${theme.colors.gray[7]} !important`,
                                         },
                                     },
-                                }) }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }, tncInputProps)))));
+                                } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }, tncInputProps)))));
         }
         return null;
     })));
@@ -5006,7 +5142,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, doImpression, showThankyou, campaignId, campaignCode, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, action, }) => {
+const LightboxLayout = ({ flatComponent, popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, onUnmount, doImpression, showThankyou, campaignId, campaignCode, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, action, }) => {
     var _a, _b;
     const { primaryColor } = React.useContext(LeadGenContext$1);
     const { isMobile } = index$b.useScreenSize();
@@ -5406,7 +5542,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, { action: action, content: PopupContainer, campaignCode: campaignCode, inlinePosition: extraFields.popupInlinePosition, doImpression: handleDoImpression }));
+        return (React__default["default"].createElement(InlineLayout, { flatComponent: flatComponent, action: action, content: PopupContainer, campaignCode: campaignCode, inlinePosition: extraFields.popupInlinePosition, doImpression: handleDoImpression }));
     }
     return null;
 };
@@ -5499,7 +5635,7 @@ function getCategoryLevel(t = 'Xin chao {{category_2}} extra') {
         return null;
     }
 }
-const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, doImpression, showThankyou, locale, showEmpty, setShowEmpty, userInfo, }) => {
+const NewLeadPopup = ({ flatComponent, campaign, action, onSubmit, onClose, onUnmount, doImpression, showThankyou, locale, showEmpty, setShowEmpty, userInfo, }) => {
     var _a, _b;
     const { apiUrl, siteDomain } = React.useContext(LeadGenContext$1);
     const { extra_fields, image, image_desktop, code, image_background, image_overlay_mobile, image_overlay_desktop, } = campaign || {};
@@ -5602,7 +5738,7 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, doImpres
         currentLayout == 'Fullscreen' ||
         currentLayout == 'Sidebar' ||
         currentLayout == 'Slider') {
-        return (React__default["default"].createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, onUnmount: onUnmount, doImpression: doImpression, 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 }));
+        return (React__default["default"].createElement(LightboxLayout, { flatComponent: flatComponent, popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, onUnmount: onUnmount, doImpression: doImpression, 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 }));
@@ -5694,7 +5830,7 @@ const formatTrackingData = (params) => {
 };
 
 // mount css
-const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor, apiSubotUrl, DEBUG_URL, forceCampaign, children, extraPayloadValues = [], excludeExitRulesHandler, userInfo, onClose: onCloseProps, onSubmit: onSubmitProps, }) => {
+const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor, apiSubotUrl, DEBUG_URL, forceCampaign, children, extraPayloadValues = [], excludeExitRulesHandler, userInfo, onClose: onCloseProps, onSubmit: onSubmitProps, flatComponent, }) => {
     var _a, _b;
     const scrollEventHandlerRef = React.useRef();
     const leadStartTimeRef = React.useRef(Date.now());
@@ -5806,12 +5942,10 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
         const { listBlockAdded = [] } = params || {};
         if (!TEMPLATE_ALLOW_NEWTRACKING.includes(currentLayout))
             return;
-        const gaCookie = miscCookieHelper.getCookie('_ga') || null;
-        const cookieId = miscCookieHelper.getCookie('hhg-id') || '';
         const data = formatTrackingData({
             commonData: {
-                cookie_id: cookieId,
-                ga_client_id: gaCookie,
+                cookie_id: miscCookieHelper.getCookie('hhg-id') || '',
+                ga_client_id: miscCookieHelper.getCookie('_ga') || null,
                 country_code: locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN',
                 status: 'in_progress',
                 campaign_id: showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.id,
@@ -5821,28 +5955,13 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             currentLayout,
             formParams: Object.assign(Object.assign({}, params), { listBlockAdded, formValues: [] }),
         });
-        return Promise.all([
-            fetch(`${apiUrl}api/collection/tracking-completion`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(data),
-            }),
-            fetch(`${apiUrl}api/campaign/${showCampaign.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,
-                }),
-            }),
-        ]);
+        return fetch(`${apiUrl}api/collection/tracking-completion`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(data),
+        });
     };
     React.useEffect(() => {
         if (forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.code)
@@ -6051,7 +6170,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
                             !!currentLayout &&
                                 !currentLayout.includes('Inline') &&
                                 !currentLayout.includes('Sidebar') && (React__default["default"].createElement(core.Overlay, { color: "#000", opacity: 0.6, center: true, zIndex: 400, pos: 'fixed', onClick: () => onClose() })),
-                            React__default["default"].createElement(NewLeadPopup, { campaign: showCampaign, action: action, onSubmit: onSubmit, onClose: onClose, onUnmount: onUnmount, doImpression: doImpression, showThankyou: showThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo })))));
+                            React__default["default"].createElement(NewLeadPopup, { flatComponent: flatComponent, campaign: showCampaign, action: action, onSubmit: onSubmit, onClose: onClose, onUnmount: onUnmount, doImpression: doImpression, showThankyou: showThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo })))));
                     }))))))));
 };
 const LeadGen = _LeadGen;
@@ -6063,4 +6182,6 @@ LeadGen.OtpForm = OtpBlock$1;
 LeadGen.Close = Close.Close;
 
 exports.LeadGen = LeadGen;
+exports.LeadGenInline = LeadGenInline;
 exports.LeadGenSubscriptionBox = LeadGenSubscriptionBox;
+exports.leadGenInlineGetCampaign = leadGenInlineGetCampaign;