@hhgtech/hhg-components 1.29.417-beta-4 → 1.29.418-beta-1

package/build/esm/lead.js

@@ -1,56 +1,57 @@
-import { a as __awaiter, _ as __rest } from './tslib.es6-7dde3624.js';
-import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, memo, useCallback, forwardRef, useImperativeHandle, useLayoutEffect } from 'react';
-import { createStyles, Box, Button as Button$1, Input as Input$1, Autocomplete, clsx, Checkbox as Checkbox$1, Radio as Radio$1, Select as Select$1, TextInput, NumberInput as NumberInput$1, Flex, Portal, Transition, Overlay } from '@mantine/core';
+import { _ as __rest, a as __awaiter } from './tslib.es6-973fb363.js';
+import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, useCallback, forwardRef, useImperativeHandle, memo, useLayoutEffect } from 'react';
+import { createStyles, Box, useMantineTheme, Button as Button$1, Autocomplete, clsx, Input as Input$1, Checkbox as Checkbox$1, Radio as Radio$1, Select as Select$1, Flex, TextInput, NumberInput as NumberInput$1, Portal, Transition, Overlay } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { createFormContext, useForm } from '@mantine/form';
 import dayjs from 'dayjs';
-import { B as BEARER_TOKEN_COOKIE } from './index-7ffd5ffc.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-f5050d07.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { u as useTranslations } from './index-e22e1b14.js';
-import { T as TranslationsContext } from './translationsContext-59aedc1c.js';
-import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-f1e2c068.js';
-import { T as Text } from './index-5dc4c44b.js';
-import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput, O as OTP } from './index-85a63733.js';
-import { D as DatePicker } from './index-5be58196.js';
-import { B as Button } from './index-9cbd52ac.js';
-import './index.styles-38de5370.js';
+import { u as useTranslations } from './index-f82ced74.js';
+import { T as TranslationsContext } from './translationsContext-c729899a.js';
+import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-06a90493.js';
+import { T as Text } from './index-96606b7b.js';
+import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput, O as OTP } from './index-6032d7e1.js';
+import { D as DatePicker } from './index-9d7cc01e.js';
+import { B as Button } from './index-8c6e583f.js';
+import './index.styles-957894a9.js';
 import { useIntersection, useClickOutside } from '@mantine/hooks';
-import './index-54a59f66.js';
-import { C as CustomStylesType, G as GlobalTextStyleNew } from './text-d060a52a.js';
-import './index-c6e6bba1.js';
-import { M as MAPPED_LOCALE } from './utils-7d4f7961.js';
+import './index-ba18ee42.js';
+import { G as GlobalTextStyleNew, C as CustomStylesType } from './text-a592e4ae.js';
+import './index-c9890de4.js';
+import { M as MAPPED_LOCALE } from './utils-ad7e8afc.js';
 import { DateInput } from '@mantine/dates';
-import { L as LOCALE_SPECS, Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-93b44235.js';
-import { C as COMMON_DATE_TRANSLATE_KEY } from './index-56cee63a.js';
-import './index-cd56d613.js';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-99ed4f62.js';
-import { H as Heading$1 } from './index-5c6473c8.js';
-import { t as translationsMap$1 } from './translationsProvider-91c67da3.js';
-import { L as LOCALE } from './Locale-d618b5e7.js';
+import { L as LOCALE_SPECS, Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-8a5a2683.js';
+import { C as COMMON_DATE_TRANSLATE_KEY } from './index-e120177a.js';
+import './index-98afb88a.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-5502d0fc.js';
+import { H as Heading$1 } from './index-46e08088.js';
+import { t as translationsMap$1 } from './translationsProvider-c677cefb.js';
+import { L as LOCALE } from './Locale-11dbaf70.js';
 import { v1 } from 'uuid';
 import { domainLocales } from './constantsDomainLocales.js';
 import { parsePhoneNumber } from 'react-phone-number-input';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
 import { css } from '@emotion/react';
-import { T as TogetherComponentGlobalContext } from './utils-c3d2069b.js';
-import { M as MantineProvider } from './index-379024d9.js';
-import { i as isVideo } from './index-d8280f7c.js';
-import { u as useScreenSize } from './index-ff7a0568.js';
+import { T as TogetherComponentGlobalContext } from './utils-a3564cac.js';
+import { M as MantineProvider } from './index-5277e388.js';
+import { i as isVideo } from './index-44c89feb.js';
+import { u as useScreenSize } from './index-4a0b263e.js';
 import { motion } from 'framer-motion';
 import { createPortal } from 'react-dom';
-import { I as InputDate } from './InputDate-21166aaf.js';
-import { D as DrawerComponent } from './index-8492fc0f.js';
-import { C as Close } from './Close-a0476ac6.js';
+import { ChevronDown } from '@hhgtech/icons/arrow';
+import { MapPin } from '@hhgtech/icons/core';
+import { I as InputDate } from './InputDate-47595d8d.js';
+import { D as DrawerComponent } from './index-10f57124.js';
+import { C as Close } from './Close-25e39b2e.js';
 import './constantsIsProduction.js';
-import './normalizeLink-9f742197.js';
+import './normalizeLink-ea55309e.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
 import 'classnames';
-import './useUniqueId-b8f65ae3.js';
+import './useUniqueId-ad30e709.js';
 import './constantsSite.js';
-import '@hhgtech/icons/core';
-import './shared-8573abd2.js';
+import './shared-d57c70b8.js';
 import '@mantine/notifications';
 import 'date-fns/locale';
 import './constantsRiskScreener.js';
@@ -66,11 +67,11 @@ import './i18n-values/vi-VN.js';
 import './i18n-values/vi-VN_MB.js';
 import './i18n-values/zh-SG.js';
 import './i18n-values/zh-TW.js';
-import './index-7e0a7c9d.js';
+import './index-78413c0c.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-302c0ca6.js';
+import './constants-95131dca.js';
 import 'vaul';
 
 const LeadGenComponentContext = createContext({});
@@ -123,6 +124,33 @@ 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': {
@@ -205,33 +233,6 @@ 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 {};
@@ -378,55 +379,6 @@ 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) => __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/';
@@ -436,8 +388,6 @@ 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',
@@ -624,19 +574,7 @@ const trackingSubscription = (data) => {
         data,
     });
 };
-function getCampaigns({ url, siteId, apiLeadUrl, }) {
-    const ga_client_id = 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,
@@ -1689,6 +1627,12 @@ const getTranslations = (locale) => {
     return translationsMap['en-PH'];
 };
 
+const LeadGenTranslationProvider = (props) => {
+    const { locale, children } = props;
+    const translationContextValue = useMemo(() => ({ locale, values: getTranslations(locale) }), [locale]);
+    return (React__default.createElement(TranslationsContext.Provider, { value: translationContextValue }, children));
+};
+
 // import mockLeadData from './mockLeadData'
 const listCampaignScheduled = [];
 const listCampaignScheduledToActivated = [];
@@ -1864,167 +1808,167 @@ function clearPassiveEvent() {
         LEAD_SCROLL_EVENT = null;
     }
 }
-function getCurrentCampaign({ campaigns = [], leadDomain, leadCurrentUrl, }) {
-    if (!getCookie('hhg-id')) {
-        setCookie('hhg-id', 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 {
-                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];
-        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);
-            }
-            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,
+    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: getCookie('_ga') || null,
+        }),
     })
-        .then((campRes) => {
-        LeadLog('List campagin: ', campRes);
+        .then((response) => {
+        return response.json();
+        // return mockLeadData || response.json()
+    })
+        .then((data) => {
+        var _a, _b, _c, _d;
+        LeadLog('List campagin: ', data);
         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 });
+        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 (!getCookie('hhg-id')) {
+                setCookie('hhg-id', 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));
+            }
+            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 {
+                        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,
+                    });
+                }
+            }
+            else {
+                LeadLog('🚧 No lead campaigns on current URL, tags');
+            }
         }
     })
         .catch((err) => {
@@ -2041,149 +1985,147 @@ const LeadLog = (...params) => {
     }
 };
 
-const LeadGenInlineWithoutMemo = (props) => {
-    const [campaign, setCampaign] = useState();
-    const { forceCampaign, apiUrl, apiLeadUrl, siteId, siteDomain, DEBUG_URL } = props;
-    useEffect(() => {
-        if (forceCampaign) {
-            setCampaign(forceCampaign);
-            return;
-        }
-        (() => __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.createElement(LeadGen, Object.assign({}, props, { forceCampaign: campaign, apiUrl: apiUrl || apiLeadUrl, flatComponent: true })));
-};
-const LeadGenInline = memo(LeadGenInlineWithoutMemo);
-function leadGenInlineGetCampaign(props) {
-    var _a;
-    return __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 = useMemo(() => ({ locale, values: getTranslations(locale) }), [locale]);
-    return (React__default.createElement(TranslationsContext.Provider, { value: translationContextValue }, children));
-};
-
 const LeadGenContext = createContext({
-    onSubmit(value) {
+    submit(value) {
         /** Init for FAKING function */
         LeadLog('** LeadGen Submit : ', value);
         return Promise.reject(value);
     },
-    onImpression(value) {
+    submitSubscriptionBox(value) {
+        /** Init for FAKING function */
+        LeadLog('** LeadGen SubmitSubscriptionBox : ', value);
+        return Promise.reject(value);
+    },
+    impression(type) {
         /** Init for FAKING function */
-        LeadLog('** LeadGen Impression : ', 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, siteId, siteDomain, DEBUG_URL = '', children, articleId, categoryId, userInfo } = props, restProps = __rest(props, ["campaign_code", "apiSsoUrl", "apiLeadUrl", "apiSubotUrl", "locale", "forceCampaign", "extraValues", "siteId", "siteDomain", "DEBUG_URL", "children", "articleId", "categoryId", "userInfo"]);
+    const { campaign_code: campaignCodeProps, apiSsoUrl, apiLeadUrl, apiSubotUrl, locale: localeProps, forceCampaign: forceCampaignProps, extraValues, articleId = 1, categoryList, siteDomain: site_domain, children, userInfo } = props, restProps = __rest(props, ["campaign_code", "apiSsoUrl", "apiLeadUrl", "apiSubotUrl", "locale", "forceCampaign", "extraValues", "articleId", "categoryList", "siteDomain", "children", "userInfo"]);
     const { t } = useTranslations();
-    const [rawForceCampaign, setRawForceCampaign] = useState(forceCampaignProps);
-    const [forceCampaign, setForceCampaign] = useState(() => formatCampaignDetail(forceCampaignProps));
+    const [forceCampaign, setForceCampaign] = useState(forceCampaignProps);
     const [subscriptionInfo, setSubscriptionInfo] = useState({
         subscriptionIcon: '',
         subscriptionTitle: '',
         subscriptionType: 'TypeA',
         subscriptionPhoneType: '',
+        subcriptionCateId: '',
+        subcriptionCateName: '',
     });
     const locale = useMemo(() => {
         return localeProps || LOCALE['PhilippinesEnglish'];
     }, [localeProps]);
+    const { url, campaign_id, cookie_id, ga_client_id, category_list, article_id, article_title, } = useMemo(() => ({
+        url: location.href.toLowerCase() || '',
+        cookie_id: getCookie('hhg-id') || null,
+        ga_client_id: 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 onSubmit = useCallback((data) => {
+    const submit = useCallback((data) => {
         return Service.postSubscriptionBoxLead({ data });
-    }, [forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.blocks]);
-    const onImpression = useCallback((value) => {
-        //
-        console.log('** RYAN LeadGenContext.tsx 188 value : ', value);
-        return Promise.resolve('dfdfdf');
     }, []);
     const submitSubscriptionBox = useCallback((value) => {
-        const data = Object.assign(Object.assign(Object.assign(Object.assign({}, value), { 
+        const data = Object.assign(Object.assign({}, value), { 
             // campaign_id,
-            site_domain: siteDomain, url: (value === null || value === void 0 ? void 0 : value.url) || location.href.toLowerCase() || '', cookie_id: getCookie('hhg-id') || null, ga_client_id: getCookie('_ga') }), extraValues), { article_id: articleId, category_id: categoryId, article_title: (extraValues === null || extraValues === void 0 ? void 0 : extraValues.article_title) || document.title || '' });
+            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 });
         return Service.postSubscriptionBoxLead({ data });
     }, [
         extraValues,
-        extraValues === null || extraValues === void 0 ? void 0 : extraValues.article_title,
-        siteDomain,
-        articleId,
-        categoryId,
+        site_domain,
+        campaign_id,
+        article_id,
+        article_title,
+        subscriptionInfo.subcriptionCateId,
+        subscriptionInfo.subcriptionCateName,
+        url,
+        cookie_id,
+        ga_client_id,
     ]);
-    const impressionSubscriptionBox = useCallback((type) => {
+    const impression = useCallback((type) => {
+        const gaCookie = getCookie('_ga') || null;
         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: siteDomain,
+            site_domain: domainLocales[locale],
             url: location.href.toLowerCase(),
             cookie_id: getCookie('hhg-id'),
-            ga_client_id: 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) || '',
+            ga_client_id: gaCookie,
+            article_title,
+            article_id,
+            category_id: subscriptionInfo.subcriptionCateId,
+            category_name: subscriptionInfo.subcriptionCateName,
             type,
         };
         return Service.trackingSubscription(impression);
     }, [
-        articleId,
-        categoryId,
+        campaign_id,
+        url,
+        article_title,
+        cookie_id,
+        ga_client_id,
+        subscriptionInfo.subcriptionCateId,
+        subscriptionInfo.subcriptionCateName,
         subscriptionInfo.subscriptionTitle,
-        extraValues === null || extraValues === void 0 ? void 0 : extraValues.category_name,
+        article_id,
         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,
     ]);
     useEffect(() => {
-        /** Force Campaign */
         if (forceCampaignProps) {
             setForceCampaign(formatCampaignDetail(forceCampaignProps));
-            setRawForceCampaign(forceCampaignProps);
             return;
         }
         /** For Subscription Box */
-        if (categoryId) {
+        if (category_list) {
             Service.getSubscriptionBoxInfo({
-                category: categoryId,
-                site: siteDomain,
+                category: category_list.map((i) => i.termId).join(','),
+                site: site_domain,
                 slug: location === null || location === void 0 ? void 0 : location.pathname,
             }).then((res) => {
+                var _a;
                 const { _data } = res || {};
-                const { item, campaign_code, btn_type = 'zalo' } = _data || {};
-                const { icon, content } = item || {};
-                LeadLog('** LeadGen SubscriptionBox campaign_code : ', campaign_code);
+                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]) || {};
                 LeadLog('** LeadGen SubscriptionBox subscription_icon : ', icon);
                 LeadLog('** LeadGen SubscriptionBox subscription_title : ', content);
-                setSubscriptionInfo((prev) => (Object.assign(Object.assign({}, prev), { subscriptionIcon: icon, subscriptionTitle: content, subscriptionPhoneType: btn_type })));
+                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 }));
+                });
                 setForceCampaign(formatCampaignDetail({
                     id: 6993,
                     name: '',
@@ -2307,39 +2249,10 @@ const LeadGenContextProvider = (props) => {
             });
             return;
         }
-        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,
-        //   })
+        // if (campaignCodeProps) {
+        //   fetchCampaign(campaignCodeProps)
         // }
-    }, [
-        forceCampaignProps,
-        campaignCodeProps,
-        categoryId,
-        siteId,
-        siteDomain,
-        apiLeadUrl,
-        DEBUG_URL,
-    ]);
+    }, [forceCampaignProps, campaignCodeProps, category_list]);
     useEffect(() => {
         leadStore.apiSsoUrl = apiSsoUrl;
         leadStore.apiLeadUrl = apiLeadUrl;
@@ -2350,16 +2263,10 @@ const LeadGenContextProvider = (props) => {
     }
     return (React__default.createElement(LeadGenContext.Provider, { value: Object.assign(Object.assign(Object.assign({}, restProps), subscriptionInfo), { userInfo, campaign_code: campaignCodeProps, apiSsoUrl,
             apiLeadUrl,
-            apiSubotUrl, locale: localeProps, extraValues,
-            articleId,
-            categoryId,
-            siteDomain,
-            forceCampaign,
-            rawForceCampaign,
-            onSubmit,
-            onImpression,
+            apiSubotUrl, locale: localeProps, articleId, categoryId: subscriptionInfo.subcriptionCateId, siteDomain: site_domain, forceCampaign,
+            submit,
             submitSubscriptionBox,
-            impressionSubscriptionBox }) },
+            impression }) },
         React__default.createElement(LeadGenTranslationProvider, { locale: locale }, children)));
 };
 const useLeadGenContext = () => {
@@ -2642,10 +2549,11 @@ const LeadGenThankYou = ({ image, title, description, showButton = false, button
     const { htmlText: titleText, align: titleAlign } = title;
     const { htmlText: descriptionText, align: descriptionAlign } = description;
     const { htmlText: buttonText, newtab, url, onClick } = button;
+    const theme = useMantineTheme();
     return (React__default.createElement(StyledLeadGenThankYou, { className: className, style: style },
         React__default.createElement("img", { src: src, alt: "", className: "leadgen-thankyou_image leadgen-image" }),
-        React__default.createElement("p", { className: "leadgen-thankyou_title leadgen-title", "data-align": titleAlign }, titleText),
-        React__default.createElement("p", { className: "leadgen-thankyou_description leadgen-description", "data-align": descriptionAlign }, descriptionText),
+        React__default.createElement(Text, { size: "h4", weight: "bold", "data-align": titleAlign, variant: "primary" }, titleText),
+        React__default.createElement(Text, { size: "p2", "data-align": descriptionAlign, color: theme.colors.gray[6] }, descriptionText),
         !!buttonText && showButton && (React__default.createElement(Button$1, { component: url ? 'a' : 'button', target: newtab ? '_blank' : undefined, href: url, size: "lg", variant: "filled", className: "leadgen-thankyoue_btn leadgen-btn", onClick: onClick }, buttonText))));
 };
 
@@ -2680,17 +2588,11 @@ const StyledLeadGenSubscriptionBoxHeader = styled.div `
     flex: 1;
     min-width: 0;
     color: ${theme.colors.gray600};
-    font-size: 17px;
-    font-weight: 400;
-    line-height: 24px;
-    letter-spacing: -0.4px;
     b {
       color: #111111;
       font-weight: 700;
     }
     ${MediaQueries.mbUp} {
-      font-size: 20px;
-      line-height: 28px;
       b {
         font-weight: 500;
       }
@@ -2769,13 +2671,12 @@ const StyledLeadGenSubscriptionBox = styled.div `
 `;
 const StyledLeadGenSubscriptionBoxA = styled.div `
   .leadgen-form_input {
-    --phone-select: 45px;
+    --phone-select: 65px;
     .PhoneInput {
-      --phone-select: 45px;
+      --phone-select: 65px;
       .PhoneInputCountry {
         margin-top: 1px;
         pointer-events: none;
-        .PhoneInputCountryIconImg,
         .PhoneInputArrowContainer {
           display: none;
         }
@@ -2784,14 +2685,22 @@ const StyledLeadGenSubscriptionBoxA = styled.div `
   }
 `;
 
-const PhoneInput = forwardRef((props, ref) => {
-    const { defaultCountry, id: idProps, name, placeholder, label, labelElement, labelProps, description, descriptionProps, withAsterisk, inputMode, inputContainer, inputWrapperOrder, error, className, classNames, style, styles } = props, restProps = __rest(props, ["defaultCountry", "id", "name", "placeholder", "label", "labelElement", "labelProps", "description", "descriptionProps", "withAsterisk", "inputMode", "inputContainer", "inputWrapperOrder", "error", "className", "classNames", "style", "styles"]);
-    const id = idProps || v1() + name;
-    return (React__default.createElement(Input$1.Wrapper, { size: "md", label: label, labelElement: labelElement, labelProps: Object.assign({ htmlFor: id }, labelProps), description: description, descriptionProps: descriptionProps, withAsterisk: withAsterisk, inputMode: inputMode, inputContainer: inputContainer, inputWrapperOrder: inputWrapperOrder, error: error, "data-invalid": !!error, className: className, classNames: classNames, style: style, styles: styles },
-        React__default.createElement("div", { className: "mantine-Input-wrapper" },
-            React__default.createElement(Phone, Object.assign({}, restProps, { id: id, ref: ref, name: name, spellCheck: false, placeholder: placeholder, defaultCountry: defaultCountry, className: "mantine-Input-input", type: "tel", "data-control": "tel" })))));
+var useTextStyles = createStyles((theme) => {
+    return GlobalTextStyleNew(theme)[CustomStylesType.LEADGEN];
 });
 
+const ErrorIcon = (_a) => {
+    var { size } = _a, rest = __rest(_a, ["size"]);
+    const props = Object.assign({ width: size, height: size }, rest);
+    return (React__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.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: theme.colors.gray600,
+    activeColor: theme.colors.primaryBase,
+};
+
 const NoData = ({ className, style }) => {
     return (React__default.createElement("svg", { width: "64", height: "55", viewBox: "0 0 64 55", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
         React__default.createElement("path", { d: "M32.6226 54.0001C46.2852 54.0001 57.3652 43.0033 57.3652 29.4239C57.3652 15.8446 46.2852 4.84778 32.6226 4.84778C18.9599 4.84778 7.87988 15.8446 7.87988 29.4239C7.87988 43.0033 18.9599 54.0001 32.6226 54.0001Z", fill: "#E6EAF5" }),
@@ -2874,13 +2783,12 @@ const StyledLeadGenFormInner = styled.div `
   }
 `;
 
-const cssInputNotShrink$1 = css `
+const TextFieldContext = createContext({});
+
+const cssInputNotShrink = css `
   height: 100% !important;
   min-height: calc(var(--container-height, 56px) * 24 / 56);
-  color: ${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;
@@ -2893,34 +2801,28 @@ const cssInputNotShrink$1 = css `
     color: ${theme.colors.gray400};
   }
 `;
-const cssInputShrink$1 = css `
+const cssInputShrink = css `
   height: auto !important;
   cursor: text;
   opacity: 1;
   transition: 0.1s ease-in-out all;
 `;
-const cssLabelNotShrink$1 = css `
+const cssLabelNotShrink = css `
   position: absolute;
   top: calc(var(--container-height) / 2);
   left: var(--space-x, 16px);
-  color: ${theme.colors.gray400};
-  font-size: var(--label-not-shrink, 15px);
-  font-weight: 400;
-  line-height: calc(var(--container-height, 56px) * 18 / 56);
   margin: 0;
   z-index: 1;
   cursor: pointer;
   transform: translateY(-50%);
   transition: 0.125s ease-in all;
 `;
-const cssLabelShrink$1 = css `
-  color: ${theme.colors.gray600};
-  font-size: var(--label-shrink, 12px);
-  top: calc(var(--container-height) * 7 / 56);
+const cssLabelShrink = css `
+  top: var(--space-y-shrink, 6px);
   transform: none;
   transition: 0.125s ease-out all;
 `;
-const cssWrapperInputNotShrink$1 = css `
+const cssWrapperInputNotShrink = css `
   min-height: var(--container-height, 56px);
   display: flex;
   align-items: flex-end;
@@ -2944,19 +2846,19 @@ const cssWrapperInputNotShrink$1 = css `
     border-color: ${theme.colors.gray200};
   }
 `;
-const cssWrapperInputShrink$1 = css `
+const cssWrapperInputShrink = css `
   height: auto;
   min-height: var(--container-height, 56px);
   padding-block: var(--space-y-shrink, 6px);
   cursor: text;
   pointer-events: auto;
 `;
-const cssInputWrapperError$1 = css `
+const cssInputWrapperError = css `
   color: ${theme.colors.red800};
   font-size: 12px;
   line-height: 1.5;
 `;
-const StyledTextFieldContainer$1 = styled.div `
+const StyledTextFieldContainer = styled.div `
   --space-x: 16px;
   --space-y-not-shrink: 15px;
   --space-y-shrink: 6px;
@@ -2991,11 +2893,11 @@ const StyledTextFieldContainer$1 = styled.div `
   }
 
   .mantine-InputWrapper-label {
-    ${cssLabelNotShrink$1}
+    ${cssLabelNotShrink}
   }
 
   .mantine-Input-wrapper {
-    ${cssWrapperInputNotShrink$1}
+    ${cssWrapperInputNotShrink}
 
     + .mantine-Popover-dropdown[data-position="bottom-start"] {
       left: 0 !important;
@@ -3008,17 +2910,16 @@ const StyledTextFieldContainer$1 = styled.div `
   }
 
   .mantine-Input-input {
-    ${cssInputNotShrink$1}
+    ${cssInputNotShrink}
   }
 
-  &.textField_shrink,
-  &:focus-within {
+  &.textField_shrink {
     .mantine-InputWrapper-label {
-      ${cssLabelShrink$1}
+      ${cssLabelShrink}
     }
 
     .mantine-Input-wrapper {
-      ${cssWrapperInputShrink$1}
+      ${cssWrapperInputShrink}
       &.mantine-Select-wrapper {
         .mantine-Select-rightSection {
           pointer-events: auto !important;
@@ -3027,7 +2928,7 @@ const StyledTextFieldContainer$1 = styled.div `
     }
 
     .mantine-Input-input {
-      ${cssInputShrink$1}
+      ${cssInputShrink}
     }
 
     &:has(.PhoneInput) {
@@ -3069,6 +2970,7 @@ const StyledTextFieldContainer$1 = styled.div `
       outline: none !important;
       border: none;
       box-shadow: none;
+      font-size: var(--input, 15px);
       padding: 0 var(--phone-input-space-x, 8px);
       opacity: 0;
       color: ${theme.colors.gray800} !important;
@@ -3086,8 +2988,20 @@ const StyledTextFieldContainer$1 = styled.div `
       );
     }
   }
+
+  .icon {
+    position: absolute;
+    top: calc(var(--container-height) / 2);
+    right: var(--space-x, 16px);
+    transform: translateY(-50%);
+    transition: 0.125s ease-in all;
+    &.shrink {
+      top: calc(var(--container-height) / 2 - 4px);
+      transform: translateY(0);
+    }
+  }
 `;
-const StyledChoiceFieldContainer$1 = styled.div `
+const StyledChoiceFieldContainer = styled.div `
   &.leadgen-form_checkbox,
   &.leadgen-form_radio {
     width: 100%;
@@ -3150,12 +3064,32 @@ const StyledChoiceFieldContainer$1 = styled.div `
   }
 
   .mantine-InputWrapper-error {
-    ${cssInputWrapperError$1}
+    ${cssInputWrapperError}
   }
+`;
+styled.div `
+  position: absolute;
+  top: calc(var(--container-height) / 2);
+  right: var(--space-x, 16px);
 `;
 
-const TextField$1 = (props) => {
-    const { shrink: shrinkProps, onChangeShrink, className, children } = props, restProps = __rest(props, ["shrink", "onChangeShrink", "className", "children"]);
+const TextField = (props) => {
+    const { shrink: shrinkProps, onChangeShrink, children, className } = props, restProps = __rest(props, ["shrink", "onChangeShrink", "children", "className"]);
+    const [shrink, setShrink] = useState(shrinkProps);
+    useEffect(() => {
+        setShrink(shrinkProps);
+    }, [shrinkProps]);
+    return (React__default.createElement(TextFieldContext.Provider, Object.assign({ value: {
+            shrinkProps,
+            shrink,
+            setShrink,
+            onChangeShrink,
+        } }, restProps),
+        React__default.createElement(StyledTextFieldContainer, Object.assign({ shrink: shrink, className: clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps), children)));
+};
+const TextFieldControl = (props) => {
+    const { shrink, shrinkProps, onChangeShrink, setShrink } = useContext(TextFieldContext);
+    const { children } = props;
     const containerRef = useClickOutside(() => {
         if (shrinkProps) {
             return;
@@ -3163,7 +3097,12 @@ const TextField$1 = (props) => {
         setShrink(false);
         onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
     });
-    const [shrink, setShrink] = useState(shrinkProps);
+    // const inputInside = useMemo(() => {
+    //   containerRef.current.querySelectorAll(
+    //     'input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])',
+    //   )
+    // }, [containerRef.current])
+    // console.log({ containerRef })
     const focusInput = (target) => {
         const $textEl = target.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
         const $focusEl = $textEl.item($textEl.length - 1);
@@ -3184,18 +3123,25 @@ const TextField$1 = (props) => {
     useEffect(() => {
         setShrink(shrinkProps);
     }, [shrinkProps]);
-    return (React__default.createElement(StyledTextFieldContainer$1, Object.assign({ shrink: shrink, className: clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps),
-        React__default.createElement("div", { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, children)));
+    return (React__default.createElement("div", { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, typeof children === 'function' ? children(!!shrink) : children));
 };
-const ChoiceField$1 = (props) => {
+const TextFieldIcon = ({ Icon }) => {
+    const { shrink } = useContext(TextFieldContext);
+    const theme = useMantineTheme();
+    return Icon ? (React__default.createElement(Icon, { className: `icon ${!!shrink ? 'shrink' : ''}`, shrink: shrink, size: 24, color: theme.colors.gray[9] })) : null;
+};
+TextField.Control = TextFieldControl;
+TextField.Icon = TextFieldIcon;
+const ChoiceField = (props) => {
     const { children, className } = props, restProps = __rest(props, ["children", "className"]);
-    return (React__default.createElement(StyledChoiceFieldContainer$1, Object.assign({ className: clsx(className, 'choiceField') }, restProps), children));
+    return (React__default.createElement(StyledChoiceFieldContainer, Object.assign({ className: clsx(className, 'choiceField') }, restProps), children));
 };
 
 const LeadGenForm = forwardRef((props, ref) => {
     const { locale, blocks, scrollToErrorField = true, form: formProps, rules: validate, initialValues, onFinish, onFinishFailed, className, style, } = props;
     const formRef = useRef(null);
     const form = formProps || useForm({ initialValues, validate });
+    const { classes } = useTextStyles();
     const middlewareFinish = useCallback((values, event) => {
         /** Set `touched` all values for validation when submiting */
         form.setTouched(blocks.reduce((touched, { data }) => {
@@ -3251,34 +3197,55 @@ const LeadGenForm = forwardRef((props, ref) => {
             const reactKey = `${id}-${idx}`;
             switch (blockName) {
                 case LEADGEN_BLOCK.TextBlock: {
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "text", "data-control": "text" }, formInputProps))));
+                    return (React__default.createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: React__default.createElement(Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "text", "data-control": "text" }, formInputProps, { error: error && (React__default.createElement(Flex, { align: 'center', gap: 4 },
+                                React__default.createElement(ErrorIcon, { size: 12 }),
+                                React__default.createElement(Text, { size: "c1", variant: "error" }, error))) }))))));
                 }
                 case LEADGEN_BLOCK.NumberBlock: {
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(NumberInput$1, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "number", "data-control": "number" }, formInputProps))));
+                    return (React__default.createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(NumberInput$1, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: React__default.createElement(Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "number", "data-control": "number" }, formInputProps, { error: error && (React__default.createElement(Flex, { align: 'center', gap: 4 },
+                                React__default.createElement(ErrorIcon, { size: 12 }),
+                                React__default.createElement(Text, { size: "c1", variant: "error" }, error))) }))))));
                 }
                 case LEADGEN_BLOCK.EmailBlock: {
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps))));
+                    return (React__default.createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: React__default.createElement(Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps, { error: error && (React__default.createElement(Flex, { align: 'center', gap: 4 },
+                                React__default.createElement(ErrorIcon, { size: 12 }),
+                                React__default.createElement(Text, { size: "c1", variant: "error" }, error))) }))))));
                 }
                 case LEADGEN_BLOCK.PhoneOtpBlock:
                 case LEADGEN_BLOCK.WhatsappOtpBlock:
                 case LEADGEN_BLOCK.ZaloOtpBlock:
                 case LEADGEN_BLOCK.PhoneBlock: {
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(PhoneInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", "data-control": "tel" }, formInputProps))));
+                    return (React__default.createElement(TextField, { key: reactKey, shrink: !!value, className: clsx('leadgen-form_input', {
+                            'leadgen-form_field_error': !!error,
+                        }) },
+                        React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(Input$1.Wrapper, { withAsterisk: required, "data-invalid": !!error, label: React__default.createElement(Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), inputWrapperOrder: [
+                                'label',
+                                'input',
+                                'description',
+                                'error',
+                            ], error: error && (React__default.createElement(Flex, { align: 'center', gap: 4 },
+                                React__default.createElement(ErrorIcon, { size: 12 }),
+                                React__default.createElement(Text, { size: "c1", variant: "error" }, error))) },
+                            React__default.createElement("div", { className: "mantine-Input-wrapper" },
+                                React__default.createElement(Phone, Object.assign({ className: `mantine-Input-input ${classes.p2}`, name: name, spellCheck: false, placeholder: " ", defaultCountry: (locale
+                                        ? MAPPED_LOCALE[locale] || 'VN'
+                                        : 'VN'), type: "text", "data-control": "tel" }, formInputProps))))))));
                 }
                 case LEADGEN_BLOCK.LocationBlock: {
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
-                        React__default.createElement(GoogleLocationBlock, Object.assign({ name: name, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, locale: locale, "data-control": "text" }, formInputProps))));
+                    return (React__default.createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(GoogleLocationBlock, Object.assign({ name: name, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, locale: locale, "data-control": "text" }, formInputProps, { error: error && (React__default.createElement(Flex, { align: 'center', gap: 4 },
+                                React__default.createElement(ErrorIcon, { size: 12 }),
+                                React__default.createElement(Text, { size: "c1", variant: "error" }, error))) }))));
                 }
                 case LEADGEN_BLOCK.DateBlock: {
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                    return (React__default.createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
                         React__default.createElement(DateInput, Object.assign({ locale: (MAPPED_LOCALE === null || MAPPED_LOCALE === void 0 ? void 0 : MAPPED_LOCALE[locale]) || MAPPED_LOCALE['vi-VN'], valueFormat: "DD/MM/YYYY", name: name, withAsterisk: required, label: label, placeholder: " ", inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "default", "data-control": "date" }, formInputProps))));
                 }
                 case LEADGEN_BLOCK.DropdownBlock:
-                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                    return (React__default.createElement(TextField, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
                         React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
                         React__default.createElement(Select$1, Object.assign({ name: name, withAsterisk: required, label: label, placeholder: " ", searchable: true, data: listQuestion.map((l) => ({
                                 value: l.value,
@@ -3309,7 +3276,7 @@ const LeadGenForm = forwardRef((props, ref) => {
                     const formInputCheckboxProps = form.getInputProps(name, {
                         type: 'checkbox',
                     });
-                    return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
+                    return (React__default.createElement(ChoiceField, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         isSendMailChimp && (React__default.createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
                         React__default.createElement(Checkbox$1.Group, Object.assign({ size: "md", withAsterisk: required, label: label, value: value, sx: {
                                 display: 'flex',
@@ -3321,14 +3288,14 @@ const LeadGenForm = forwardRef((props, ref) => {
                             } }, formInputCheckboxProps), listQuestion.map((l, _idx) => (React__default.createElement(Checkbox$1, { name: name, key: _idx, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
                 }
                 case LEADGEN_BLOCK.RadioBlock: {
-                    return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
+                    return (React__default.createElement(ChoiceField, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         isSendMailChimp && (React__default.createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
                         React__default.createElement(Radio$1.Group, Object.assign({ size: "md", withAsterisk: required, label: label, value: value, spellCheck: true, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
                                 return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
                             } }, formInputProps), listQuestion.map((l, _index) => (React__default.createElement(Radio$1, { name: name, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
                 }
                 case LEADGEN_BLOCK.TncBlock:
-                    return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
+                    return (React__default.createElement(ChoiceField, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
                         React__default.createElement(Input$1.Wrapper, { error: error },
                             React__default.createElement(Checkbox$1, Object.assign({ value: value, name: 'TNC-' + id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, formInputProps)))));
                 default: {
@@ -3351,10 +3318,7 @@ const LeadGenSubscriptionBoxA = (props) => {
             React__default.createElement("img", { src: image, alt: "" })));
     }, [image]);
     const titleComp = useMemo(() => {
-        if (typeof title === 'string') {
-            return (React__default.createElement("p", { className: "leadgen-title", dangerouslySetInnerHTML: { __html: title } }));
-        }
-        return React__default.createElement("p", { className: "leadgen-title" }, title);
+        return (React__default.createElement(Text, { size: "h4", weight: "regular", className: "leadgen-title", dangerouslySetInnerHTML: { __html: title } }));
     }, [title]);
     return (React__default.createElement(StyledLeadGenSubscriptionBoxA, { className: "subcription_box_A" },
         React__default.createElement(StyledLeadGenSubscriptionBoxHeader, { className: "leadgen-subscription_box_header" },
@@ -3372,7 +3336,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, impressionSubscriptionBox, } = useLeadGenContext();
+    const { apiLeadUrl, subscriptionIcon, subscriptionTitle, subscriptionPhoneType, submitSubscriptionBox, onFinish, impression, } = useLeadGenContext();
     const { t } = useTranslations();
     const { action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
     const [loading, setLoading] = useState(false);
@@ -3432,7 +3396,7 @@ const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, ca
             const reqValues = Object.assign(Object.assign({}, newValues), ssoValues);
             const [res] = yield Promise.all([
                 submitSubscriptionBox(reqValues),
-                impressionSubscriptionBox('submit_form'),
+                impression('submit_form'),
             ]);
             const { _data } = res || {};
             const { model } = _data || {};
@@ -3478,7 +3442,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.createElement(ImpressionTrackingWrapper, { dependency: categoryId, onImpression: () => impressionSubscriptionBox('impression') },
+    return (React__default.createElement(ImpressionTrackingWrapper, { dependency: categoryId, onImpression: () => impression('impression') },
         React__default.createElement(StyledLeadGenSubscriptionBox, { "data-phone-type": subscriptionPhoneType, "data-type": "subscription_box_A" },
             showThankyou && (React__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.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 })))));
@@ -3487,11 +3451,8 @@ const LeadGenSubscriptionBox$1 = memo(LeadGenSubscriptionBoxWithoutMemo);
 
 const Container = () => {
     const context = useContext(LeadGenContext);
-    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.createElement(LeadGenSubscriptionBox$1, { locale: locale, siteId: siteId, siteDomain: siteDomain, userInfo: userInfo, forceCampaign: forceCampaign, campaign_code: campaign_code }));
+    const { campaign_code, locale, siteId, siteDomain, userInfo, forceCampaign, subscriptionTitle, } = context;
+    return subscriptionTitle ? (React__default.createElement(LeadGenSubscriptionBox$1, { locale: locale, siteId: siteId, siteDomain: siteDomain, userInfo: userInfo, forceCampaign: forceCampaign, campaign_code: campaign_code })) : null;
 };
 Container.displayName = 'LeadGenSubscriptionBox';
 const ALLOW_LOCALE = [LOCALE.Vietnam, LOCALE.Malaysia, LOCALE.Indonesia];
@@ -4213,7 +4174,7 @@ const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkN
                     React__default.createElement(Button, { className: `lead-modal__btn ${LEAD_CLASS}`, color: primaryColor }, linkText)))))));
 };
 
-const InlineLayout = ({ flatComponent, content, inlinePosition, doImpression, }) => {
+const InlineLayout = ({ content, inlinePosition, doImpression, }) => {
     const target = useMemo(() => {
         if (!inlinePosition)
             return null;
@@ -4318,9 +4279,6 @@ const InlineLayout = ({ flatComponent, content, inlinePosition, doImpression, })
             }
         }
     }, [inlinePosition]);
-    if (!!flatComponent) {
-        return (React__default.createElement(ImpressionTrackingWrapper, { onImpression: () => __awaiter(void 0, void 0, void 0, function* () { return yield doImpression(); }) }, content));
-    }
     if (!inlinePosition || !target)
         return null;
     return createPortal(React__default.createElement(ImpressionTrackingWrapper, { onImpression: () => __awaiter(void 0, void 0, void 0, function* () { return yield doImpression(); }) }, content), target);
@@ -4361,333 +4319,7 @@ const EmptyComponent = ({ onClose, onContinue, }) => {
             React__default.createElement(Button$1, { onClick: onContinue, size: "lg", variant: "filled", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_again" }, t('lead.empty.submitAgain')))));
 };
 
-var useTextStyles = createStyles((theme) => {
-    return GlobalTextStyleNew(theme)[CustomStylesType.LEADGEN];
-});
-
-const ErrorIcon = (_a) => {
-    var { size } = _a, rest = __rest(_a, ["size"]);
-    const props = Object.assign({ width: size, height: size }, rest);
-    return (React__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.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: theme.colors.gray600,
-    activeColor: theme.colors.primaryBase,
-};
-
-const SubtitleBlock = ({ children, align, }) => (React__default.createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
-
-const cssInputNotShrink = css `
-  height: 100% !important;
-  min-height: calc(var(--container-height, 56px) * 24 / 56);
-  line-height: calc(var(--container-height, 56px) * 24 / 56);
-  border: none !important;
-  border-radius: 0 !important;
-  outline: none !important;
-  box-shadow: none !important;
-  padding: 0;
-  cursor: pointer;
-  opacity: 0;
-
-  ::placeholder {
-    color: ${theme.colors.gray400};
-  }
-`;
-const cssInputShrink = css `
-  height: auto !important;
-  cursor: text;
-  opacity: 1;
-  transition: 0.1s ease-in-out all;
-`;
-const cssLabelNotShrink = css `
-  position: absolute;
-  top: calc(var(--container-height) / 2);
-  left: var(--space-x, 16px);
-  margin: 0;
-  z-index: 1;
-  cursor: pointer;
-  transform: translateY(-50%);
-  transition: 0.125s ease-in all;
-`;
-const cssLabelShrink = css `
-  top: var(--space-y-shrink, 6px);
-  transform: none;
-  transition: 0.125s ease-out all;
-`;
-const cssWrapperInputNotShrink = css `
-  min-height: var(--container-height, 56px);
-  display: flex;
-  align-items: flex-end;
-  border: 1px solid ${theme.colors.gray200};
-  border-radius: 8px;
-  background-color: #fff;
-  padding-inline: var(--space-x, 16px);
-  padding-block: var(--space-y-not-shrink, 16px);
-  cursor: pointer;
-  pointer-events: none;
-
-  &:has(.mantine-Input-rightSection) {
-    padding-right: var(--container-height, 56px);
-  }
-
-  .mantine-Input-icon {
-    display: none;
-  }
-
-  .mantine-NumberInput-control {
-    border-color: ${theme.colors.gray200};
-  }
-`;
-const cssWrapperInputShrink = css `
-  height: auto;
-  min-height: var(--container-height, 56px);
-  padding-block: var(--space-y-shrink, 6px);
-  cursor: text;
-  pointer-events: auto;
-`;
-const cssInputWrapperError = css `
-  color: ${theme.colors.red800};
-  font-size: 12px;
-  line-height: 1.5;
-`;
-const StyledTextFieldContainer = styled.div `
-  --space-x: 16px;
-  --space-y-not-shrink: 15px;
-  --space-y-shrink: 6px;
-  --container-height: 56px;
-  --label-not-shrink: 16px;
-  --label-shrink: 12px;
-  --input: 15px;
-
-  position: relative;
-  min-width: 100px;
-  max-width: 100%;
-  display: inline-block;
-
-  .textField_wrapper {
-    display: inline-block;
-    width: 100%;
-    cursor: pointer;
-  }
-
-  .mantine-InputWrapper-root {
-    &[data-invalid='true'] {
-      .mantine-Input-wrapper {
-        border-color: ${theme.colors.red400};
-      }
-    }
-
-    .mantine-Input-wrapper {
-      &:has([data-invalid]) {
-        border-color: ${theme.colors.red400};
-      }
-    }
-  }
-
-  .mantine-InputWrapper-label {
-    ${cssLabelNotShrink}
-  }
-
-  .mantine-Input-wrapper {
-    ${cssWrapperInputNotShrink}
-
-    + .mantine-Popover-dropdown[data-position="bottom-start"] {
-      left: 0 !important;
-    }
-    + .mantine-Popover-dropdown[data-position='top-start'] {
-      top: unset !important;
-      left: 0 !important;
-      bottom: 100% !important;
-    }
-  }
-
-  .mantine-Input-input {
-    ${cssInputNotShrink}
-  }
-
-  &.textField_shrink,
-  &:focus-within {
-    .mantine-InputWrapper-label {
-      ${cssLabelShrink}
-    }
-
-    .mantine-Input-wrapper {
-      ${cssWrapperInputShrink}
-      &.mantine-Select-wrapper {
-        .mantine-Select-rightSection {
-          pointer-events: auto !important;
-        }
-      }
-    }
-
-    .mantine-Input-input {
-      ${cssInputShrink}
-    }
-
-    &:has(.PhoneInput) {
-      .mantine-InputWrapper-label {
-        left: var(--space-x, 16px);
-      }
-      .PhoneInput {
-        .PhoneInputInput {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  &:focus-within {
-    .mantine-Input-wrapper {
-      transition: 0.25s linear border;
-      border-color: ${theme.colors.primary600};
-      box-shadow: 0 0 4px ${theme.colors.primary200};
-    }
-  }
-
-  .PhoneInput {
-    --phone-select: 75px;
-    --phone-input-space-x: 8px;
-    width: 100%;
-    opacity: 1;
-    border: none;
-    .PhoneInputCountry {
-      background-color: transparent;
-      border: none;
-      padding: 0;
-      width: var(--phone-select, 75px);
-    }
-    .PhoneInputInput {
-      flex: 1;
-      min-width: 0;
-      line-height: 1.5;
-      outline: none !important;
-      border: none;
-      box-shadow: none;
-      font-size: var(--input, 15px);
-      padding: 0 var(--phone-input-space-x, 8px);
-      opacity: 0;
-      color: ${theme.colors.gray800} !important;
-      :focus {
-        color: ${theme.colors.gray800} !important;
-      }
-    }
-  }
-
-  &:has(.PhoneInput) {
-    .mantine-InputWrapper-label {
-      left: calc(
-        var(--space-x, 16px) + var(--phone-select, 75px) +
-          var(--phone-input-space-x, 8px)
-      );
-    }
-  }
-`;
-const StyledChoiceFieldContainer = styled.div `
-  &.leadgen-form_checkbox,
-  &.leadgen-form_radio {
-    width: 100%;
-  }
-
-  &.leadgen-form_dropdown {
-    width: calc(50% - 12px);
-  }
-
-  .mantine-InputWrapper-root {
-    display: block;
-  }
-
-  .mantine-InputWrapper-label {
-    margin-bottom: 0.5rem;
-    color: ${theme.colors.gray800};
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 1.5;
-  }
-
-  .mantine-Radio-root,
-  .mantine-Checkbox-root {
-    gap: 8px;
-    min-width: calc(50% - 4px);
-
-    // input[type='radio'],
-    // input[type='checkbox'] {
-    //   border-color: ${theme.colors.gray600};
-    //   width: 18px;
-    //   height: 18px;
-    // }
-    // input[type='checkbox'] {
-    //   border-radius: 4px;
-    // }
-
-    // &[data-checked='true'] {
-    //   input[type='radio'],
-    //   input[type='checkbox'] {
-    //     border-color: ${theme.colors.primary600};
-    //   }
-
-    //   input[type='radio'] {
-    //     background-color: white;
-    //   }
-    // }
-
-    .mantine-Checkbox-input {
-      &:checked {
-        border-color: ${theme.colors.primary600};
-      }
-    }
-  }
-
-  .leadgen-choiceContainer {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    gap: 8px;
-  }
-
-  .mantine-InputWrapper-error {
-    ${cssInputWrapperError}
-  }
-`;
-
-const TextField = (props) => {
-    const { shrink: shrinkProps, onChangeShrink, className, children } = props, restProps = __rest(props, ["shrink", "onChangeShrink", "className", "children"]);
-    const containerRef = useClickOutside(() => {
-        if (shrinkProps) {
-            return;
-        }
-        setShrink(false);
-        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
-    });
-    const [shrink, setShrink] = useState(shrinkProps);
-    const focusInput = (target) => {
-        const $textEl = target.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
-        const $focusEl = $textEl.item($textEl.length - 1);
-        if ($focusEl) {
-            $focusEl.focus({ preventScroll: true });
-        }
-    };
-    const onClick = useCallback((e) => {
-        if (shrink) {
-            e.preventDefault();
-            focusInput(e.currentTarget);
-            return;
-        }
-        setShrink(true);
-        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
-        focusInput(e.currentTarget);
-    }, [shrink]);
-    useEffect(() => {
-        setShrink(shrinkProps);
-    }, [shrinkProps]);
-    return (React__default.createElement(StyledTextFieldContainer, Object.assign({ shrink: shrink, className: clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps),
-        React__default.createElement("div", { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, typeof children === 'function' ? children(shrink) : children)));
-};
-const ChoiceField = (props) => {
-    const { children, className } = props, restProps = __rest(props, ["children", "className"]);
-    return (React__default.createElement(StyledChoiceFieldContainer, Object.assign({ className: clsx(className, 'choiceField') }, restProps), children));
-};
+const SubtitleBlock = ({ children, align, }) => (React__default.createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
 const TitleBlock = ({ children, align, }) => (React__default.createElement("h2", { className: `lead-modal__title ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
@@ -4713,44 +4345,48 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
             case 'SubtitleBlock':
                 return (React__default.createElement(SubtitleBlock, { key: index, align: align }, value));
             case 'TextBlock':
-                return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" }, (shrink) => (React__default.createElement(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.createElement(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.createElement(Flex, { align: 'center', gap: 4 },
-                        React__default.createElement(ErrorIcon, { size: 12 }),
-                        React__default.createElement(Text, { size: "c1", variant: "error" }, form.errors[value]))) })))));
+                return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(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.createElement(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.createElement(Flex, { align: 'center', gap: 4 },
+                            React__default.createElement(ErrorIcon, { size: 12 }),
+                            React__default.createElement(Text, { size: "c1", variant: "error" }, form.errors[value]))) }))))));
             case 'NumberBlock':
-                return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" }, (shrink) => (React__default.createElement(NumberInput$1, 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.createElement(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.createElement(Flex, { align: 'center', gap: 4 },
-                        React__default.createElement(ErrorIcon, { size: 12 }),
-                        React__default.createElement(Text, { size: "c1", variant: "error" }, form.errors[value]))) })))));
+                return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(NumberInput$1, 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.createElement(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.createElement(Flex, { align: 'center', gap: 4 },
+                            React__default.createElement(ErrorIcon, { size: 12 }),
+                            React__default.createElement(Text, { size: "c1", variant: "error" }, form.errors[value]))) }))))));
             case 'EmailBlock':
-                return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" }, (shrink) => (React__default.createElement(TextInput, Object.assign({ withAsterisk: required, spellCheck: false, 
-                    // type="email"
-                    placeholder: " ", 
-                    // className="lead-modal__form-control leadgen-form_field"
-                    label: React__default.createElement(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.createElement(Flex, { align: 'center', gap: 4 },
-                        React__default.createElement(ErrorIcon, { size: 12 }),
-                        React__default.createElement(Text, { size: "c1", variant: "error" }, form.errors[value]))), styles: (theme) => ({
-                        input: GlobalTextStyleNew(theme)[CustomStylesType.LEADGEN].p2,
-                    }) })))));
+                return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(TextInput, Object.assign({ withAsterisk: required, spellCheck: false, 
+                        // type="email"
+                        placeholder: " ", 
+                        // className="lead-modal__form-control leadgen-form_field"
+                        label: React__default.createElement(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.createElement(Flex, { align: 'center', gap: 4 },
+                            React__default.createElement(ErrorIcon, { size: 12 }),
+                            React__default.createElement(Text, { size: "c1", variant: "error" }, form.errors[value]))), styles: (theme) => ({
+                            input: GlobalTextStyleNew(theme)[CustomStylesType.LEADGEN]
+                                .p2,
+                        }) }))))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -4759,24 +4395,33 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 const _b = form.getInputProps(value), { error } = _b, formPhoneInputWrapper = __rest(_b, ["error"]);
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: clsx('lead-modal__form-control leadgen-form_field', {
                         'leadgen-form_field_error': !!error,
-                    }) }, (shrink) => (React__default.createElement(Input$1.Wrapper, { size: "md", withAsterisk: required, label: React__default.createElement(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.createElement("div", { className: "mantine-Input-wrapper" },
-                        React__default.createElement(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 ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name, "data-is-required": required }, formPhoneInputWrapper)))))));
+                    }) },
+                    React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(Input$1.Wrapper, { size: "md", withAsterisk: required, label: React__default.createElement(Text, { size: shrink ? 'p3' : 'p2', variant: "secondary", weight: "halfBold" }, label), "data-invalid": !!error, labelProps: { htmlFor: htmlForId }, inputWrapperOrder: [
+                            'label',
+                            'input',
+                            'description',
+                            'error',
+                        ], error: form.errors[value] && (React__default.createElement(Flex, { align: 'center', gap: 4 },
+                            React__default.createElement(ErrorIcon, { size: 12 }),
+                            React__default.createElement(Text, { size: "c1", variant: "error" }, form.errors[value]))) },
+                        React__default.createElement("div", { className: "mantine-Input-wrapper" },
+                            React__default.createElement(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
+                                    ? MAPPED_LOCALE[locale] || 'VN'
+                                    : 'VN'), "data-control": "tel", "data-lead-control": name, "data-is-required": required }, formPhoneInputWrapper))))))));
             }
             case 'LocationBlock': {
-                return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" }, (shrink) => (React__default.createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: " ", label: React__default.createElement(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))))));
+                return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: " ", label: React__default.createElement(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), { error: form.errors[value] && (React__default.createElement(Flex, { align: 'center', gap: 4 },
+                            React__default.createElement(ErrorIcon, { size: 12 }),
+                            React__default.createElement(Text, { size: "c1", variant: "error" }, form.errors[value]))) })))),
+                    React__default.createElement(TextField.Icon, { Icon: MapPin })));
             }
             case 'DateBlock': {
                 const _c = form.getInputProps(value), { error } = _c, formInputProps = __rest(_c, ["error"]);
@@ -4816,51 +4461,53 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                             return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
                         } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(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.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field DropdownBlock", key: index }, (shrink) => (React__default.createElement(React__default.Fragment, null,
-                    React__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.createElement(Select
-                    // className="lead-modal__form-control leadgen-form_field"
-                    , Object.assign({ 
+                return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field DropdownBlock", key: index },
+                    React__default.createElement(TextField.Control, null, (shrink) => (React__default.createElement(React__default.Fragment, null,
+                        React__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.createElement(Select
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: React__default.createElement(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.createElement(NoData, null), error: form.errors[value] && (React__default.createElement(Flex, { align: 'center', gap: 4 },
-                            React__default.createElement(ErrorIcon, { size: 12 }),
-                            React__default.createElement(Text, { size: "c1", variant: "error" }, form.errors[value]))), styles: {
-                            item: {
-                                paddingBlock: 12,
-                                paddingInline: 10,
-                                fontSize: 16,
-                                lineHeight: 1.5,
-                            },
-                            nothingFound: {
-                                fontSize: 54,
-                                paddingBlock: 30,
-                            },
-                            itemsWrapper: {
-                                padding: 6,
-                            },
-                            dropdown: {
-                                '.mantine-ScrollArea-scrollbar[data-orientation="vertical"]': {
-                                    '--radix-scroll-area-thumb-width': '6px',
-                                    width: 'var(--radix-scroll-area-thumb-width)',
-                                    paddingInline: 0,
+                        , Object.assign({ 
+                            // className="lead-modal__form-control leadgen-form_field"
+                            label: React__default.createElement(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.createElement(NoData, null), rightSection: React__default.createElement(TextField.Icon, { Icon: ChevronDown }), styles: {
+                                item: {
+                                    paddingBlock: 12,
+                                    paddingInline: 10,
+                                    fontSize: 16,
+                                    lineHeight: 1.5,
                                 },
-                            },
-                        }, maxDropdownHeight: 192 }, form.getInputProps(value)))))));
+                                nothingFound: {
+                                    fontSize: 54,
+                                    paddingBlock: 30,
+                                },
+                                itemsWrapper: {
+                                    padding: 6,
+                                },
+                                dropdown: {
+                                    '.mantine-ScrollArea-scrollbar[data-orientation="vertical"]': {
+                                        '--radix-scroll-area-thumb-width': '6px',
+                                        width: 'var(--radix-scroll-area-thumb-width)',
+                                        paddingInline: 0,
+                                    },
+                                },
+                            }, maxDropdownHeight: 192 }, form.getInputProps(value), { error: form.errors[value] && (React__default.createElement(Flex, { align: 'center', gap: 4 },
+                                React__default.createElement(ErrorIcon, { size: 12 }),
+                                React__default.createElement(Text, { size: "c1", variant: "error" }, form.errors[value]))) })))))));
             case 'TncBlock':
                 const _d = form.getInputProps(`TNC-${id}`), { error } = _d, tncInputProps = __rest(_d, ["error"]);
                 return (React__default.createElement(ChoiceField, { className: "leadgen-form_checkbox", key: id },
                     React__default.createElement(Input$1.Wrapper, { error: error },
-                        React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default.createElement(Text, { as: "span", size: "c1", variant: "secondary", dangerouslySetInnerHTML: { __html: data.valueHTML }, styles: {
+                        React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default.createElement(Text, { as: "span", size: "c1", variant: "secondary", dangerouslySetInnerHTML: { __html: data.valueHTML }, styles: (theme) => ({
                                     root: {
                                         a: {
-                                            textDecoration: 'underline',
+                                            textDecoration: 'underline !important',
                                             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;
     })));
@@ -5113,7 +4760,7 @@ const LEADGEN_SHOW_HEADER = [
 ];
 // const CAMPAGE_CODE_LIST_APPLY_NEW_UI = ['ri3lkoxcetjoj39', 'u0adw7hw8kw7t89']
 const CAMPAGE_CODE_LIST_APPLY_NEW_UI = ['ri3lkoxcetjoj39'];
-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, }) => {
+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, }) => {
     var _a, _b;
     const { primaryColor } = useContext(LeadGenContext$1);
     const { isMobile } = useScreenSize();
@@ -5513,7 +5160,7 @@ const LightboxLayout = ({ flatComponent, popupId, extraFields, onClose: onCloseP
         return React__default.createElement(SideBarLayout, { content: PopupContainer });
     }
     else if (isInline) {
-        return (React__default.createElement(InlineLayout, { flatComponent: flatComponent, action: action, content: PopupContainer, campaignCode: campaignCode, inlinePosition: extraFields.popupInlinePosition, doImpression: handleDoImpression }));
+        return (React__default.createElement(InlineLayout, { action: action, content: PopupContainer, campaignCode: campaignCode, inlinePosition: extraFields.popupInlinePosition, doImpression: handleDoImpression }));
     }
     return null;
 };
@@ -5606,7 +5253,7 @@ function getCategoryLevel(t = 'Xin chao {{category_2}} extra') {
         return null;
     }
 }
-const NewLeadPopup = ({ flatComponent, campaign, action, onSubmit, onClose, onUnmount, doImpression, showThankyou, locale, showEmpty, setShowEmpty, userInfo, }) => {
+const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, doImpression, showThankyou, locale, showEmpty, setShowEmpty, userInfo, }) => {
     var _a, _b;
     const { apiUrl, siteDomain } = useContext(LeadGenContext$1);
     const { extra_fields, image, image_desktop, code, image_background, image_overlay_mobile, image_overlay_desktop, } = campaign || {};
@@ -5709,7 +5356,7 @@ const NewLeadPopup = ({ flatComponent, campaign, action, onSubmit, onClose, onUn
         currentLayout == 'Fullscreen' ||
         currentLayout == 'Sidebar' ||
         currentLayout == 'Slider') {
-        return (React__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 }));
+        return (React__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 }));
     }
     else if (currentLayout.includes('Skin')) {
         return (React__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 }));
@@ -5801,7 +5448,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, flatComponent, }) => {
+const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor, apiSubotUrl, DEBUG_URL, forceCampaign, children, extraPayloadValues = [], excludeExitRulesHandler, userInfo, onClose: onCloseProps, onSubmit: onSubmitProps, }) => {
     var _a, _b;
     const scrollEventHandlerRef = useRef();
     const leadStartTimeRef = useRef(Date.now());
@@ -5913,10 +5560,12 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
         const { listBlockAdded = [] } = params || {};
         if (!TEMPLATE_ALLOW_NEWTRACKING.includes(currentLayout))
             return;
+        const gaCookie = getCookie('_ga') || null;
+        const cookieId = getCookie('hhg-id') || '';
         const data = formatTrackingData({
             commonData: {
-                cookie_id: getCookie('hhg-id') || '',
-                ga_client_id: getCookie('_ga') || null,
+                cookie_id: cookieId,
+                ga_client_id: gaCookie,
                 country_code: locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN',
                 status: 'in_progress',
                 campaign_id: showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.id,
@@ -5926,13 +5575,28 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             currentLayout,
             formParams: Object.assign(Object.assign({}, params), { listBlockAdded, formValues: [] }),
         });
-        return fetch(`${apiUrl}api/collection/tracking-completion`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(data),
-        });
+        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: getCookie('hhg-id'),
+                    ga_client_id: gaCookie,
+                }),
+            }),
+        ]);
     };
     useEffect(() => {
         if (forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.code)
@@ -6141,7 +5805,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
                             !!currentLayout &&
                                 !currentLayout.includes('Inline') &&
                                 !currentLayout.includes('Sidebar') && (React__default.createElement(Overlay, { color: "#000", opacity: 0.6, center: true, zIndex: 400, pos: 'fixed', onClick: () => onClose() })),
-                            React__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 })))));
+                            React__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 })))));
                     }))))))));
 };
 const LeadGen = _LeadGen;
@@ -6152,4 +5816,4 @@ LeadGen.Thankyou = Thankyou;
 LeadGen.OtpForm = OtpBlock$1;
 LeadGen.Close = Close;
 
-export { LeadGen, LeadGenInline, LeadGenSubscriptionBox, leadGenInlineGetCampaign };
+export { LeadGen, LeadGenSubscriptionBox };