@hhgtech/hhg-components 1.29.403-beta-2 → 1.29.404

package/build/esm/lead.js

@@ -1,53 +1,53 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-17e8f260.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-c961e3e7.js';
 import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, useCallback, forwardRef, useImperativeHandle, memo, 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, 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-5a3722b2.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-853ee950.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { u as useTranslations } from './index-e5bcaad3.js';
-import { T as TranslationsContext } from './translationsContext-80296006.js';
-import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-3b7b07ed.js';
-import { T as Text } from './index-ccf0780a.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-81f91377.js';
-import { D as DatePicker } from './index-4288aebc.js';
-import { B as Button } from './index-b3ddf2c6.js';
-import './index.styles-c1d5edcf.js';
-import { useIntersection, useClickOutside } from '@mantine/hooks';
-import './useMantineLocale-29bfac8c.js';
-import { C as COMMON_DATE_TRANSLATE_KEY } from './index-932f5d04.js';
-import './index-81ba4049.js';
-import { L as LOCALE_SPECS, Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-f103fdb9.js';
-import './other-09ed6743.js';
-import './index-7335ca28.js';
-import { M as MAPPED_LOCALE } from './utils-8ddf61ca.js';
+import { u as useTranslations } from './index-8ba9a67a.js';
+import { T as TranslationsContext } from './translationsContext-e281865c.js';
+import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-f78064dc.js';
+import { T as Text } from './index-8a7ecda2.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-e17164e3.js';
+import { D as DatePicker } from './index-4aaad11c.js';
+import { B as Button } from './index-73c1ec2b.js';
+import './index.styles-ee0e74ba.js';
+import { useClickOutside } from '@mantine/hooks';
+import './useMantineLocale-0fbf0cb3.js';
+import { C as COMMON_DATE_TRANSLATE_KEY } from './index-0695cbc7.js';
+import './index-d0161ea2.js';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-4c01aadb.js';
+import './other-dd0169ff.js';
+import './index-803f52e9.js';
+import { M as MAPPED_LOCALE } from './utils-13ae83e6.js';
 import { DateInput } from '@mantine/dates';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-ab7aebb1.js';
-import { H as Heading$1 } from './index-78355ee5.js';
-import { t as translationsMap$1 } from './translationsProvider-bc217705.js';
-import { L as LOCALE } from './Locale-cc92b1a5.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-10f07b9f.js';
+import { H as Heading$1 } from './index-4499a48d.js';
+import { t as translationsMap$1 } from './translationsProvider-a96db08a.js';
+import { L as LOCALE } from './Locale-f74818be.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-a371733e.js';
-import { i as isVideo } from './index-09a8ff2c.js';
-import { u as useScreenSize } from './useScreenSize-a114e74c.js';
+import { T as TogetherComponentGlobalContext } from './utils-c837ea02.js';
+import { i as isVideo } from './index-c7f96269.js';
+import { u as useScreenSize } from './useScreenSize-6c54b26d.js';
 import { motion } from 'framer-motion';
 import { createPortal } from 'react-dom';
-import { B as Button$2 } from './index-2085378a.js';
-import { I as InputDate } from './InputDate-54971665.js';
-import { D as DrawerComponent } from './index-6a4d2aa7.js';
-import { C as Close } from './Close-5c5384f6.js';
+import { B as Button$2 } from './index-afe45517.js';
+import { I as InputDate } from './InputDate-f4ecf61d.js';
+import { D as DrawerComponent } from './index-2f3646a4.js';
+import { C as Close } from './Close-440ab4ed.js';
 import './constantsIsProduction.js';
-import './normalizeLink-9ab73f28.js';
+import './normalizeLink-89d25798.js';
+import './constantsDomainLocales.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
 import 'classnames';
-import './useUniqueId-4e081294.js';
+import './useUniqueId-94ee8afb.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import '@mantine/notifications';
@@ -65,11 +65,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-d09f8f30.js';
+import './index-c1144fd3.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-50aac636.js';
+import './constants-9c197a9f.js';
 import 'vaul';
 
 const LeadGenComponentContext = createContext({});
@@ -159,6 +159,11 @@ const LEAD_TIMEZONE_DATA = {
     9: 'Asia/Manila', // Philippines / Filipinos Site
 };
 
+const LEADGEN_ACTIONS = {
+    SHOW: 'SHOW',
+    SCROLL: 'SCROLL',
+    TIME: 'TIME',
+};
 var LEADGEN_LAYOUT;
 (function (LEADGEN_LAYOUT) {
     LEADGEN_LAYOUT["LightBoxA"] = "LightBoxA";
@@ -557,13 +562,6 @@ const campaignPostImpression = ({ code, action, title_article, ga_client_id, coo
         },
     });
 };
-const trackingSubscription = (data) => {
-    return leadApi.call({
-        url: `api/collection/tracking-subscription`,
-        method: METHOD.POST,
-        data,
-    });
-};
 const Service = {
     campaignGetById,
     getCampaignByCode,
@@ -571,7 +569,6 @@ const Service = {
     postSubscriptionBoxLead,
     postUserInfoFromLeadGen,
     campaignPostImpression,
-    trackingSubscription,
     validateEmailOrPhoneOnSubot,
     validateEmailOrPhoneOnLeadGen,
     validatePhoneNumberOnLeadGen,
@@ -1986,30 +1983,27 @@ const LeadGenContext = createContext({
         LeadLog('** LeadGen SubmitSubscriptionBox : ', value);
         return Promise.reject(value);
     },
-    impression(type) {
+    impression(value) {
         /** Init for FAKING function */
-        LeadLog('** LeadGen Impression : ', type);
-        return Promise.reject();
+        LeadLog('** LeadGen Impression : ', value);
+        return Promise.reject(value);
     },
     /** For Subscription Box */
     subscriptionIcon: '',
     subscriptionTitle: '',
-    subscriptionPhoneType: '',
 });
 const LeadGenContextProvider = (props) => {
-    const { campaign_code: campaignCodeProps, apiSsoUrl, apiLeadUrl, apiSubotUrl, locale: localeProps, forceCampaign: forceCampaignProps, extraValues, articleId = 1, categoryId = 1, siteDomain: site_domain, children, userInfo } = props, restProps = __rest(props, ["campaign_code", "apiSsoUrl", "apiLeadUrl", "apiSubotUrl", "locale", "forceCampaign", "extraValues", "articleId", "categoryId", "siteDomain", "children", "userInfo"]);
-    const { t } = useTranslations();
+    const { campaign_code: campaignCodeProps, apiSsoUrl, apiLeadUrl, apiSubotUrl, locale: localeProps, forceCampaign: forceCampaignProps, extraValues, articleId = 1, categoryId = 1, siteDomain: site_domain, children } = props, restProps = __rest(props, ["campaign_code", "apiSsoUrl", "apiLeadUrl", "apiSubotUrl", "locale", "forceCampaign", "extraValues", "articleId", "categoryId", "siteDomain", "children"]);
     const [forceCampaign, setForceCampaign] = useState(forceCampaignProps);
     const [subscriptionInfo, setSubscriptionInfo] = useState({
         subscriptionIcon: '',
         subscriptionTitle: '',
         subscriptionType: 'TypeA',
-        subscriptionPhoneType: '',
     });
     const locale = useMemo(() => {
         return localeProps || LOCALE['PhilippinesEnglish'];
     }, [localeProps]);
-    const { url, campaign_id, cookie_id, ga_client_id, category_id, article_id, article_title, category_name, } = useMemo(() => ({
+    const { url, campaign_id, campaign_code, cookie_id, ga_client_id, category_id, article_id, article_title, } = useMemo(() => ({
         url: location.href.toLowerCase() || '',
         cookie_id: getCookie('hhg-id') || null,
         ga_client_id: getCookie('_ga'),
@@ -2018,33 +2012,27 @@ const LeadGenContextProvider = (props) => {
         category_id: categoryId,
         article_id: articleId,
         article_title: (extraValues === null || extraValues === void 0 ? void 0 : extraValues.article_title) || document.title || '',
-        category_name: (extraValues === null || extraValues === void 0 ? void 0 : extraValues.category_name) || '',
     }), [
         campaignCodeProps,
         articleId,
         categoryId,
         forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id,
         extraValues === null || extraValues === void 0 ? void 0 : extraValues.article_title,
-        extraValues === null || extraValues === void 0 ? void 0 : extraValues.category_name,
     ]);
-    // const fetchCampaign = useCallback(
-    //   (campaign_code: string) => {
-    //     Service.getCampaignByCode(campaign_code).then((res) => {
-    //       const { _data } = res || {}
-    //       const { campaigns } = _data || {}
-    //       LeadLog('** LeadGen Campaign : ', campaigns)
-    //       setForceCampaign(formatCampaignDetail(campaigns))
-    //     })
-    //   },
-    //   [campaignCodeProps],
-    // )
+    const fetchCampaign = useCallback((campaign_code) => {
+        Service.getCampaignByCode(campaign_code).then((res) => {
+            const { _data } = res || {};
+            const { campaigns } = _data || {};
+            LeadLog('** LeadGen Campaign : ', campaigns);
+            setForceCampaign(formatCampaignDetail(campaigns));
+        });
+    }, [campaignCodeProps]);
     // TODO : Update form for LeadGen
     const submit = useCallback((data) => {
         return Service.postSubscriptionBoxLead({ data });
     }, []);
     const submitSubscriptionBox = useCallback((value) => {
-        const data = Object.assign(Object.assign(Object.assign(Object.assign({}, value), { 
-            // campaign_id,
+        const data = Object.assign(Object.assign(Object.assign(Object.assign({}, value), { campaign_id,
             site_domain, url: (value === null || value === void 0 ? void 0 : value.url) || url, cookie_id, ga_client_id: (value === null || value === void 0 ? void 0 : value.ga_client_id) || ga_client_id }), extraValues), { article_id,
             category_id,
             article_title });
@@ -2060,36 +2048,33 @@ const LeadGenContextProvider = (props) => {
         cookie_id,
         ga_client_id,
     ]);
-    const impression = useCallback((type) => {
-        const gaCookie = getCookie('_ga') || null;
+    const impression = useCallback((value) => {
         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: domainLocales[locale],
-            url: location.href.toLowerCase(),
-            cookie_id: getCookie('hhg-id'),
-            ga_client_id: gaCookie,
-            article_title,
-            article_id,
-            category_id,
-            category_name,
-            type,
+            url: (value === null || value === void 0 ? void 0 : value.url) || url,
+            action: (value === null || value === void 0 ? void 0 : value.action) || LEADGEN_ACTIONS.SCROLL,
+            code: (value === null || value === void 0 ? void 0 : value.code) || campaign_code,
+            title_article: (value === null || value === void 0 ? void 0 : value.title_article) || article_title,
+            cookie_id: (value === null || value === void 0 ? void 0 : value.cookie_id) || cookie_id,
+            ga_client_id: (value === null || value === void 0 ? void 0 : value.ga_client_id) || ga_client_id,
+            referrer: value === null || value === void 0 ? void 0 : value.referrer,
+            extra: Object.assign(Object.assign(Object.assign({}, value === null || value === void 0 ? void 0 : value.extra), { cookie_id,
+                article_id, subscription_title: subscriptionInfo.subscriptionTitle, subscription_type: subscriptionInfo.subscriptionType }), extraValues),
         };
-        return Service.trackingSubscription(impression);
+        if (!impression.extra.subscription_title) {
+            delete impression.extra.subscription_title;
+        }
+        return Service.campaignPostImpression(impression);
     }, [
+        extraValues,
         campaign_id,
         url,
+        campaign_code,
         article_title,
         cookie_id,
         ga_client_id,
-        categoryId,
         article_id,
         subscriptionInfo.subscriptionTitle,
-        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,
+        subscriptionInfo.subscriptionType,
     ]);
     useEffect(() => {
         if (forceCampaignProps) {
@@ -2104,138 +2089,21 @@ const LeadGenContextProvider = (props) => {
                 slug: location === null || location === void 0 ? void 0 : location.pathname,
             }).then((res) => {
                 const { _data } = res || {};
-                const { item, campaign_code, btn_type = 'zalo' } = _data || {};
+                const { item, campaign_code } = _data || {};
                 const { icon, content } = item || {};
                 LeadLog('** LeadGen SubscriptionBox campaign_code : ', campaign_code);
                 LeadLog('** LeadGen SubscriptionBox subscription_icon : ', icon);
                 LeadLog('** LeadGen SubscriptionBox subscription_title : ', content);
-                setSubscriptionInfo((prev) => (Object.assign(Object.assign({}, prev), { subscriptionIcon: icon, subscriptionTitle: content, subscriptionPhoneType: btn_type })));
-                setForceCampaign(formatCampaignDetail({
-                    id: 6993,
-                    name: '',
-                    code: '49qvztwzzlfvmk6',
-                    site: {
-                        id: LOCALE_SPECS[locale].SITE_ID || 1,
-                        name: domainLocales[locale],
-                    },
-                    thank_you_image: 'https://cdn-lead.hellohealthgroup.com/2025/05/1747009374_68213f5e5fa5a9.58533462.png',
-                    extra_fields: {
-                        actionBlocks: `{"submitBlock":{"data":{"value":"${t('subscriptionBox.ctaBtn')}"}},"linkButtonBlock":{"data":{"value":"Join now","url":"","newtab":true}}}`,
-                        currentLayout: 'LightBoxB',
-                        imageBlocks: '{"imageMobile":{"data":{"url":"","newtab":true}},"imageDesktop":{"data":{"url":"","newtab":true}},"imageBackground":{"data":{}},"imageOverlayMobile":{"data":{}},"imageOverlayDesktop":{"data":{}},"imageThankYou":{"data":{}}}',
-                        listBlockAdded: `[{"name":"TextBlock","id":"c9be7202-05af-4d62-94bb-0001f8ad50de","data":{"placeholder":"${t('subscriptionBox.name')}","value":"name","required":true, "requiredMessage": "${t('subscriptionBox.nameRequire')}"}},{"name":"PhoneBlock","id":1744087889773,"data":{"value":"phone","required":true,"requiredMessage": "${t('subscriptionBox.phoneRequire')}","placeholder":"${t('subscriptionBox.phone')}"}}]`,
-                        listBlockThankyou: `[{"name":"TitleBlock","id":"c74d5525-b7ae-4714-b5f1-552f50160ac1","data":{"value":"${t('subscriptionBox.thankyouTitle')}","align":"center"}},{"name":"SubtitleBlock","id":"f9a6ac63-b532-41d4-9c2e-3f3e71124e05","data":{"value":"${t('subscriptionBox.thankyou')}","align":"center"}}]`,
-                        textBlocks: '{"titleBlock":{"data":{"value":"VN - Campaign SUBSCRIPTION BOX "}},"subtitleBlock":{"data":{"value":"Sample description"}}}',
-                    },
-                    total_lead: 0,
-                    total_submit: 0,
-                    total_click: 0,
-                    started_at: null,
-                    ended_at: null,
-                    created_at: '2025-04-08 04:54:32',
-                    updated_at: '2025-05-12 00:22:54',
-                    site_logo: 'https://hhg-common.hellobacsi.com/common/logo/hellobacsi.png',
-                    custom_logo: null,
-                    status: 1,
-                    formatted_status: 1,
-                    creator: 'admin@hellohealthgroup.com',
-                    total_impression: 4237940,
-                    conversion_rate: 0,
-                    total_visitor: 0,
-                    total_habit_exit: 0,
-                    total_intentional_exit: 0,
-                    trigger_type: 'on_landing',
-                    targets: [
-                        {
-                            is_import: 0,
-                            option: 'start_with',
-                            sub_target: [],
-                            target: 'https://hellobacsi.com/sample',
-                            type: 1,
-                        },
-                    ],
-                    forms: [
-                        {
-                            control: 'TextBlock',
-                            default: null,
-                            name: 'TextBlock',
-                            options: [],
-                            required: 1,
-                        },
-                        {
-                            control: 'PhoneBlock',
-                            default: null,
-                            name: 'PhoneBlock',
-                            options: [],
-                            required: 1,
-                            requiredMessage: t('subscriptionBox.phoneRequire'),
-                        },
-                    ],
-                    rules: [
-                        {
-                            rule: 'campaign_popup_exit',
-                            value: '7',
-                        },
-                        {
-                            rule: 'site_popup_exit',
-                            value: '7',
-                        },
-                        {
-                            rule: 'show_again_after_submit',
-                            value: '0',
-                        },
-                        {
-                            rule: 'show_again_after_exit',
-                            value: '0',
-                        },
-                        {
-                            rule: 'appearance_time',
-                            value: {
-                                endTime: null,
-                                startTime: null,
-                            },
-                        },
-                        {
-                            rule: 'exclude_sponsored',
-                            value: '1',
-                        },
-                        {
-                            rule: 'exclude_sponsored_list',
-                            value: [],
-                        },
-                        {
-                            rule: 'days_to_show_again',
-                            value: '7',
-                        },
-                        {
-                            rule: 'time',
-                            value: '3',
-                        },
-                    ],
-                    is_scheduled: true,
-                    last_step: null,
-                    kpis: {
-                        lead: 500,
-                    },
-                    forever: 1,
-                    is_target_import: 0,
-                    is_expired: 0,
-                    score: 6,
-                    price: 2.5,
-                    type: 0,
-                    is_testing_running: 0,
-                    campaign_group_id: 0,
-                    bot_id: [],
-                }));
-                // if (campaign_code) {
-                //   fetchCampaign(campaign_code)
-                // }
+                setSubscriptionInfo((prev) => (Object.assign(Object.assign({}, prev), { subscriptionIcon: icon, subscriptionTitle: content })));
+                if (campaign_code) {
+                    fetchCampaign(campaign_code);
+                }
             });
             return;
         }
-        // if (campaignCodeProps) {
-        //   fetchCampaign(campaignCodeProps)
-        // }
+        if (campaignCodeProps) {
+            fetchCampaign(campaignCodeProps);
+        }
     }, [forceCampaignProps, campaignCodeProps, categoryId]);
     useEffect(() => {
         leadStore.apiSsoUrl = apiSsoUrl;
@@ -2245,7 +2113,7 @@ const LeadGenContextProvider = (props) => {
     if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
         return null;
     }
-    return (React__default.createElement(LeadGenContext.Provider, { value: Object.assign(Object.assign(Object.assign({}, restProps), subscriptionInfo), { userInfo, campaign_code: campaignCodeProps, apiSsoUrl,
+    return (React__default.createElement(LeadGenContext.Provider, { value: Object.assign(Object.assign(Object.assign({}, restProps), subscriptionInfo), { campaign_code: campaignCodeProps, apiSsoUrl,
             apiLeadUrl,
             apiSubotUrl, locale: localeProps, extraValues,
             articleId,
@@ -2260,39 +2128,6 @@ const useLeadGenContext = () => {
     return Object.assign(Object.assign({}, context), { apiSsoUrl: context.apiSsoUrl || leadStore.apiSsoUrl, apiLeadUrl: context.apiLeadUrl || leadStore.apiLeadUrl, apiSubotUrl: context.apiSubotUrl || leadStore.apiSubotUrl });
 };
 
-const ImpressionTrackingWrapper = ({ children, stayDuration = 1, onImpression, dependency = '', }) => {
-    const { ref, entry } = useIntersection({
-        threshold: 1,
-    });
-    const [tracked, setTracked] = useState(false);
-    useEffect(() => {
-        let timer = null;
-        let count = 1;
-        if ((entry === null || entry === void 0 ? void 0 : entry.isIntersecting) && !tracked) {
-            timer = setInterval(() => {
-                console.log('TESTING SUBSCRIPTION TRACKING COUNT =', count);
-                if (count >= stayDuration) {
-                    setTracked(true);
-                }
-                else {
-                    count += 1;
-                }
-            }, stayDuration * 1000);
-        }
-        return () => clearInterval(timer);
-    }, [entry === null || entry === void 0 ? void 0 : entry.isIntersecting, tracked]);
-    useEffect(() => {
-        if (tracked) {
-            onImpression();
-            console.log('TESTING SUBSCRIPTION CALL API');
-        }
-    }, [tracked]);
-    useEffect(() => {
-        setTracked(false);
-    }, [dependency]);
-    return (React__default.createElement(Box, { "data-impression": true, ref: ref }, children));
-};
-
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const customParseFormat = require('dayjs/plugin/customParseFormat');
 dayjs.extend(customParseFormat);
@@ -2329,7 +2164,7 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         block) => {
             return (value) => {
-                var _a, _b;
+                var _a;
                 const isBLockRequired = (_a = block === null || block === void 0 ? void 0 : block.data) === null || _a === void 0 ? void 0 : _a.required;
                 if (!formRef.current.isTouched(name))
                     return;
@@ -2337,7 +2172,7 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
                     typeof value === 'undefined' ||
                     (Array.isArray(value) && value.length === 0)) {
                     return isBLockRequired
-                        ? ((_b = block === null || block === void 0 ? void 0 : block.data) === null || _b === void 0 ? void 0 : _b.requiredMessage) || t('validator.required')
+                        ? t('validator.required')
                         : cb === null || cb === void 0 ? void 0 : cb(value);
                 }
                 return cb === null || cb === void 0 ? void 0 : cb(value);
@@ -2586,25 +2421,12 @@ const StyledLeadGenSubscriptionBox = styled.div `
   border: 1px solid ${theme.colors.neutral100};
   background: linear-gradient(
     180.71deg,
-    rgba(44, 183, 66, 0.8) -18.54%,
-    rgba(44, 183, 66, 0.1) 17.12%,
-    rgba(44, 183, 66, 0) 99.25%
+    #7bc2ff -18.54%,
+    #e3f2ff 17.12%,
+    #ffffff 99.25%
   );
   border-radius: 12px;
   margin-inline: auto;
-  &[data-phone-type='zalo'] {
-    background: linear-gradient(
-      180.71deg,
-      #7bc2ff -18.54%,
-      #e3f2ff 17.12%,
-      #ffffff 99.25%
-    );
-  }
-  &[data-phone-type]:not([data-phone-type='zalo']) {
-    .leadgen-btn {
-      background-color: #2cb742 !important;
-    }
-  }
   .leadgen-form_inputs {
     .leadgen-form_input {
       width: 100%;
@@ -3280,9 +3102,10 @@ const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, ca
     const { image, extra_fields, id: campaign_id, bot_id: campaign_subot_id = [], ThankYouBlock, } = forceCampaign || {};
     const { textBlocks, listBlockAdded, actionBlocks } = extra_fields || {};
     const { submitBlock } = actionBlocks || {};
-    const { apiLeadUrl, subscriptionIcon, subscriptionTitle, subscriptionPhoneType, submitSubscriptionBox, onFinish, impression, } = useLeadGenContext();
+    const { apiLeadUrl, subscriptionIcon, subscriptionTitle, submitSubscriptionBox, impression, onFinish, } = useLeadGenContext();
     const { t } = useTranslations();
     const { action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
+    const refContainer = useRef(null);
     const [loading, setLoading] = useState(false);
     const [showThankyou, setShowThankyou] = useState(false);
     const validatingEmailRef = useRef(false);
@@ -3302,6 +3125,17 @@ const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, ca
             t('leadgen.message.title.default');
     }, [subscriptionTitle, (_b = (_a = textBlocks === null || textBlocks === void 0 ? void 0 : textBlocks.titleBlock) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value]);
     const { image: thankyouImage, title: thankyouTitle, description: thankyouDescription, button: thankyouButton, } = ThankYouBlock || {};
+    const intersectionObserverCallback = useCallback((entries) => {
+        entries.forEach((entry) => {
+            const { isIntersecting, target } = entry;
+            if (!showThankyou &&
+                isIntersecting &&
+                target === refContainer.current) {
+                impression();
+            }
+        });
+    }, [impression, showThankyou]);
+    const IObserver = new IntersectionObserver(intersectionObserverCallback);
     const middlewareOnSubmit = useCallback((values) => __awaiter(void 0, void 0, void 0, function* () {
         const newValues = {
             subscription_title,
@@ -3338,11 +3172,7 @@ const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, ca
         setLoading(true);
         try {
             const reqValues = Object.assign(Object.assign({}, newValues), ssoValues);
-            const [res] = yield Promise.all([
-                submitSubscriptionBox(reqValues),
-                impression('submit_form'),
-            ]);
-            const { _data } = res || {};
+            const { _data } = (yield submitSubscriptionBox(reqValues)) || {};
             const { model } = _data || {};
             if (model && (model === null || model === void 0 ? void 0 : model.id)) {
                 setShowThankyou(true);
@@ -3386,8 +3216,16 @@ 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: () => impression('impression') },
-        React__default.createElement(StyledLeadGenSubscriptionBox, { "data-phone-type": subscriptionPhoneType, "data-type": "subscription_box_A" },
+    useEffect(() => {
+        if (refContainer.current) {
+            IObserver.observe(refContainer.current);
+        }
+        return () => {
+            IObserver.disconnect();
+        };
+    }, [categoryId]);
+    return (React__default.createElement("div", { ref: refContainer },
+        React__default.createElement(StyledLeadGenSubscriptionBox, { "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 })))));
 };
@@ -3402,12 +3240,8 @@ const Container = () => {
     return (React__default.createElement(LeadGenSubscriptionBox$1, { locale: locale, siteId: siteId, siteDomain: siteDomain, userInfo: userInfo, forceCampaign: forceCampaign, campaign_code: campaign_code }));
 };
 Container.displayName = 'LeadGenSubscriptionBox';
-const ALLOW_LOCALE = [LOCALE.Vietnam, LOCALE.Malaysia, LOCALE.Indonesia];
 const LeadGenSubscriptionBoxContainer = (props) => {
-    const { apiUrl, apiSubotUrl, locale } = props;
-    if (!ALLOW_LOCALE.includes(locale)) {
-        return null;
-    }
+    const { apiUrl, apiSubotUrl } = props;
     return (React__default.createElement(LeadGenContextProvider, Object.assign({}, props, { apiLeadUrl: apiUrl, apiSubotUrl: apiSubotUrl }),
         React__default.createElement(Container, null)));
 };
@@ -4038,8 +3872,7 @@ const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkN
                     React__default.createElement(Button, { className: `lead-modal__btn ${LEAD_CLASS}`, color: primaryColor }, linkText)))))));
 };
 
-const InlineLayout = ({ action, content, inlinePosition, campaignCode, }) => {
-    const { apiUrl } = useContext(LeadGenContext$1);
+const InlineLayout = ({ content, inlinePosition, }) => {
     const target = useMemo(() => {
         if (!inlinePosition)
             return null;
@@ -4146,22 +3979,7 @@ const InlineLayout = ({ action, content, inlinePosition, campaignCode, }) => {
     }, [inlinePosition]);
     if (!inlinePosition || !target)
         return null;
-    return createPortal(React__default.createElement(ImpressionTrackingWrapper, { onImpression: () => __awaiter(void 0, void 0, void 0, function* () {
-            const gaCookie = getCookie('_ga') || null;
-            fetch(`${apiUrl}api/campaign/${campaignCode}/impression`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    action,
-                    url: location.href.toLowerCase(),
-                    title_article: document.title,
-                    cookie_id: getCookie('hhg-id'),
-                    ga_client_id: gaCookie,
-                }),
-            });
-        }) }, content), target);
+    return createPortal(content, target);
 };
 
 const SideBarLayout = ({ content }) => {
@@ -4928,7 +4746,7 @@ const LEADGEN_SHOW_HEADER = [
 ];
 // const CAMPAGE_CODE_LIST_APPLY_NEW_UI = ['ri3lkoxcetjoj39', 'u0adw7hw8kw7t89']
 const CAMPAGE_CODE_LIST_APPLY_NEW_UI = ['ri3lkoxcetjoj39'];
-const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, onUnmount, showThankyou, campaignId, campaignCode, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, action, }) => {
+const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, onUnmount, showThankyou, campaignId, campaignCode, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, }) => {
     var _a, _b;
     const { primaryColor } = useContext(LeadGenContext$1);
     const { isMobile } = useScreenSize();
@@ -5263,7 +5081,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         return React__default.createElement(SideBarLayout, { content: PopupContainer });
     }
     else if (isInline) {
-        return (React__default.createElement(InlineLayout, { action: action, content: PopupContainer, campaignCode: campaignCode, inlinePosition: extraFields.popupInlinePosition }));
+        return (React__default.createElement(InlineLayout, { content: PopupContainer, inlinePosition: extraFields.popupInlinePosition }));
     }
     return null;
 };
@@ -5361,20 +5179,19 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, showThan
     const { apiUrl, siteDomain } = useContext(LeadGenContext$1);
     useEffect(() => {
         const gaCookie = getCookie('_ga') || null;
-        !currentLayout.includes('Inline') &&
-            fetch(`${apiUrl}api/campaign/${code}/impression`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    action,
-                    url: location.href.toLowerCase(),
-                    title_article: document.title,
-                    cookie_id: getCookie('hhg-id'),
-                    ga_client_id: gaCookie,
-                }),
-            });
+        fetch(`${apiUrl}api/campaign/${code}/impression`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                action,
+                url: location.href.toLowerCase(),
+                title_article: document.title,
+                cookie_id: getCookie('hhg-id'),
+                ga_client_id: gaCookie,
+            }),
+        });
     }, []);
     const { extra_fields, image, image_desktop, code, image_background, image_overlay_mobile, image_overlay_desktop, } = campaign || {};
     const { currentLayout } = extra_fields;
@@ -5476,7 +5293,7 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, showThan
         currentLayout == 'Fullscreen' ||
         currentLayout == 'Sidebar' ||
         currentLayout == 'Slider') {
-        return (React__default.createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, onUnmount: onUnmount, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, title: titleText, onSubmit: (params) => onSubmit(params, categoryLevel, categoryData), key: currentLayout, imageOverlayDesktop: image_overlay_desktop, imageOverlayMobile: image_overlay_mobile, showThankyou: showThankyou, campaignId: campaign.id, campaignCode: campaign.code, campaign_subot_id: campaign.bot_id || [], locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo, action: action }));
+        return (React__default.createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, onUnmount: onUnmount, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, title: titleText, onSubmit: (params) => onSubmit(params, categoryLevel, categoryData), key: currentLayout, imageOverlayDesktop: image_overlay_desktop, imageOverlayMobile: image_overlay_mobile, showThankyou: showThankyou, campaignId: campaign.id, campaignCode: campaign.code, campaign_subot_id: campaign.bot_id || [], locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }));
     }
     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 }));