@hhgtech/hhg-components 1.29.409-beta-1 → 1.29.409-beta-3

package/build/esm/lead.js

@@ -1,53 +1,52 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-aeefc7a9.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-81e43aac.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-6d9b83b2.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-0ea314bd.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { u as useTranslations } from './index-8668d502.js';
-import { T as TranslationsContext } from './translationsContext-69738875.js';
-import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-f742b64d.js';
-import { T as Text } from './index-841cfe60.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-02298be6.js';
-import { D as DatePicker } from './index-935a3f76.js';
-import { B as Button } from './index-16f26f8f.js';
-import './index.styles-7fa6faad.js';
+import { u as useTranslations } from './index-536505e8.js';
+import { T as TranslationsContext } from './translationsContext-7e32d3eb.js';
+import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-7b1e02d7.js';
+import { T as Text } from './index-83503f1d.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-f10feafa.js';
+import { D as DatePicker } from './index-562b50b7.js';
+import { B as Button } from './index-f5f53ee2.js';
+import './index.styles-1b5ffb3a.js';
 import { useIntersection, useClickOutside } from '@mantine/hooks';
-import './useMantineLocale-420c60bd.js';
-import { C as COMMON_DATE_TRANSLATE_KEY } from './index-48f9702b.js';
-import './index-6e08f163.js';
-import { L as LOCALE_SPECS, Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-6655f664.js';
-import './other-06759c5d.js';
-import './index-84a8150a.js';
-import { M as MAPPED_LOCALE } from './utils-96542ec7.js';
+import './useMantineLocale-ec62dd51.js';
+import { C as COMMON_DATE_TRANSLATE_KEY } from './index-e5f88604.js';
+import './index-4684ca48.js';
+import { L as LOCALE_SPECS, Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-7c793c5d.js';
+import './other-27beca50.js';
+import './index-0ea74ce6.js';
+import { M as MAPPED_LOCALE } from './utils-6565f59d.js';
 import { DateInput } from '@mantine/dates';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-68ff226c.js';
-import { H as Heading$1 } from './index-82a2f147.js';
-import { t as translationsMap$1 } from './translationsProvider-2796cd13.js';
-import { L as LOCALE } from './Locale-3d38f1ed.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-e0f238db.js';
+import { H as Heading$1 } from './index-76f20a37.js';
+import { t as translationsMap$1 } from './translationsProvider-5b54627e.js';
+import { L as LOCALE } from './Locale-875c8ea8.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-ed39e941.js';
-import { i as isVideo } from './index-cac99693.js';
-import { u as useScreenSize } from './useScreenSize-5b4c6113.js';
+import { T as TogetherComponentGlobalContext } from './utils-0cf353f2.js';
+import { i as isVideo } from './index-c8a92ba4.js';
+import { u as useScreenSize } from './useScreenSize-9a23a7e5.js';
 import { motion } from 'framer-motion';
 import { createPortal } from 'react-dom';
-import { B as Button$2 } from './index-988d1440.js';
-import { I as InputDate } from './InputDate-18d8081a.js';
-import { D as DrawerComponent } from './index-4cf23af9.js';
-import { C as Close } from './Close-46146015.js';
+import { I as InputDate } from './InputDate-bbc64524.js';
+import { D as DrawerComponent } from './index-021f0ba7.js';
+import { C as Close } from './Close-3fbf6d3d.js';
 import './constantsIsProduction.js';
-import './normalizeLink-325b4617.js';
+import './normalizeLink-e9401192.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
 import 'classnames';
-import './useUniqueId-dc492e98.js';
+import './useUniqueId-bfe151c1.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import '@mantine/notifications';
@@ -65,11 +64,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-dea492e2.js';
+import './index-08186b4f.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-7b145969.js';
+import './constants-dac979b3.js';
 import 'vaul';
 
 const LeadGenComponentContext = createContext({});
@@ -2261,8 +2260,11 @@ const useLeadGenContext = () => {
 };
 
 const ImpressionTrackingWrapper = ({ children, stayDuration = 3, onImpression, dependency = '', }) => {
+    var _a;
+    const boxRef = useRef(null);
+    const [percent, setPercent] = useState(100);
     const { ref, entry } = useIntersection({
-        threshold: 1,
+        threshold: percent / 100,
     });
     const [tracked, setTracked] = useState(false);
     useEffect(() => {
@@ -2283,14 +2285,20 @@ const ImpressionTrackingWrapper = ({ children, stayDuration = 3, onImpression, d
     }, [entry === null || entry === void 0 ? void 0 : entry.isIntersecting, tracked]);
     useEffect(() => {
         if (tracked) {
-            onImpression();
             console.log('Impression call API');
+            onImpression();
         }
     }, [tracked]);
     useEffect(() => {
         setTracked(false);
     }, [dependency]);
-    return (React__default.createElement(Box, { "data-impression": true, ref: ref }, children));
+    useEffect(() => {
+        if (boxRef.current.clientHeight > window.innerHeight * 0.8) {
+            setPercent(50);
+        }
+    }, [(_a = boxRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight]);
+    return (React__default.createElement(Box, { "data-impression": true, ref: ref },
+        React__default.createElement("div", { ref: boxRef }, children)));
 };
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -3455,9 +3463,12 @@ const CloseButton = ({ onClose, containerClassName, svgClassName, }) => (React__
 // newTab: imageBlocks.imageMobile.data.newtab
 // imageMobile: campaignShow.image
 // imageDestkop: campaignShow.image_desktop
-const CenterTabLayout = ({ popupId, url, newTab, imageDestkop, imageMobile, onClose, onOtherSubmit, }) => {
+const CenterTabLayout = ({ popupId, url, newTab, imageDestkop, imageMobile, onClose, onOtherSubmit, doImpression, }) => {
     const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
     const { width: imageDestkopWidth, height: imageDestkopHeight, loaded: imageDestkopLoaded, } = useImageSize(imageDestkop);
+    useEffect(() => {
+        doImpression();
+    }, []);
     useEffect(() => {
         if (popupId && imageMobileLoaded && imageDestkopLoaded) {
             document.body.classList.add('noscroll');
@@ -4038,8 +4049,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, doImpression, }) => {
     const target = useMemo(() => {
         if (!inlinePosition)
             return null;
@@ -4146,22 +4156,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(React__default.createElement(ImpressionTrackingWrapper, { onImpression: () => __awaiter(void 0, void 0, void 0, function* () { return yield doImpression(); }) }, content), target);
 };
 
 const SideBarLayout = ({ content }) => {
@@ -4615,7 +4610,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
             case 'LinkButtonBlock':
                 return (React__default.createElement("div", { key: index },
                     React__default.createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
-                        React__default.createElement(Button$2, { type: "button", size: "md", className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
+                        React__default.createElement(Button, { type: "button", size: "md", className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
                                 onClose === null || onClose === void 0 ? void 0 : onClose();
                                 onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
                             } }, value))));
@@ -4928,7 +4923,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, doImpression, showThankyou, campaignId, campaignCode, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, action, }) => {
     var _a, _b;
     const { primaryColor } = useContext(LeadGenContext$1);
     const { isMobile } = useScreenSize();
@@ -4991,6 +4986,13 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         userInfo,
         format: (_a = (ISO_FORMAT[locale] || ISO_FORMAT['vi-VN'])) === null || _a === void 0 ? void 0 : _a.dateFormat,
     });
+    const handleDoImpression = useCallback((type = 'impression') => doImpression({
+        formValues: form.values,
+        formActiveTime: formActiveTime.current,
+        formRef: formRef.current,
+        listBlockAdded,
+        type,
+    }), [form]);
     if (window.innerWidth < 769 &&
         LEADGEN_LAYOUT_NOT_SHOW_IN_MOBILE.includes(currentLayout)) {
         console.log('😎 Not show fullscreen, slider on mobile ');
@@ -5005,6 +5007,9 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         }
         clearCacheUsedEmailOrPhone();
     }, []);
+    useEffect(() => {
+        (isLightBox || isSlider) && handleDoImpression();
+    }, []);
     useEffect(() => {
         formRef.current && setLastFormRef(formRef.current);
     }, [formRef.current]);
@@ -5145,13 +5150,19 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         disabledButtonSubmit,
         (_b = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _b === void 0 ? void 0 : _b.isHide,
     ]);
+    const [btnLinkLoading, setbtnLinkLoading] = useState(false);
     const LinkButtonBlock = listBlockAdded.filter(({ name }) => name == LEADGEN_BLOCK.LinkButtonBlock);
     const ButtonLink = !!(LinkButtonBlock === null || LinkButtonBlock === void 0 ? void 0 : LinkButtonBlock.length) && (React__default.createElement(React__default.Fragment, null, LinkButtonBlock.map((item, index) => {
         var _a, _b, _c;
-        return (React__default.createElement(Button$1, { key: `${item.name}-${index}`, component: "a", href: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.url, target: ((_b = item === null || item === void 0 ? void 0 : item.data) === null || _b === void 0 ? void 0 : _b.newtab) ? '_blank' : undefined, size: "lg", variant: "filled", className: "leadgen-btn leadgen-btn_action", color: primaryColor, onClick: () => {
+        return (React__default.createElement(Button$1, { key: `${item.name}-${index}`, component: "a", href: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.url, target: ((_b = item === null || item === void 0 ? void 0 : item.data) === null || _b === void 0 ? void 0 : _b.newtab) ? '_blank' : undefined, size: "lg", variant: "filled", className: "leadgen-btn leadgen-btn_action", color: primaryColor, loading: btnLinkLoading, onClick: (e) => __awaiter(void 0, void 0, void 0, function* () {
+                var _d, _e;
+                e.preventDefault();
                 onClose === null || onClose === void 0 ? void 0 : onClose();
+                setbtnLinkLoading(true);
+                yield handleDoImpression('redirects');
                 onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
-            } }, (_c = item === null || item === void 0 ? void 0 : item.data) === null || _c === void 0 ? void 0 : _c.value));
+                window.open((_d = item === null || item === void 0 ? void 0 : item.data) === null || _d === void 0 ? void 0 : _d.url, ((_e = item === null || item === void 0 ? void 0 : item.data) === null || _e === void 0 ? void 0 : _e.newtab) ? '_blank' : undefined);
+            }) }, (_c = item === null || item === void 0 ? void 0 : item.data) === null || _c === void 0 ? void 0 : _c.value));
     })));
     const PopupHeader = showHeader && (React__default.createElement("header", { className: clsx('leadgen-header', { 'leadgen-header_only': onlyHeader }) }, LEADGEN_SHOW_HEADER.includes(currentLayout) ? (React__default.createElement(HeaderImage, { src: imageMobile, className: "lead-modal__image" })) : (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(HeaderImage, { src: imageDesktop, className: "le-only-desktop lead-modal__image" }),
@@ -5224,7 +5235,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, { action: action, content: PopupContainer, campaignCode: campaignCode, inlinePosition: extraFields.popupInlinePosition, doImpression: () => handleDoImpression() }));
     }
     return null;
 };
@@ -5317,26 +5328,9 @@ function getCategoryLevel(t = 'Xin chao {{category_2}} extra') {
         return null;
     }
 }
-const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, 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);
-    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,
-                }),
-            });
-    }, []);
     const { extra_fields, image, image_desktop, code, image_background, image_overlay_mobile, image_overlay_desktop, } = campaign || {};
     const { currentLayout } = extra_fields;
     const imageBlocks = extra_fields.imageBlocks
@@ -5424,7 +5418,7 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, showThan
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
     if (currentLayout === 'CenterTab') {
-        return (React__default.createElement(CenterTabLayout, { popupId: popupIdRef.current, url: imageBlocks.imageMobile.data.url, newTab: imageBlocks.imageMobile.data.newtab, imageMobile: image, imageDestkop: image_desktop, onClose: onClose, onOtherSubmit: onOtherSubmit }));
+        return (React__default.createElement(CenterTabLayout, { popupId: popupIdRef.current, url: imageBlocks.imageMobile.data.url, newTab: imageBlocks.imageMobile.data.newtab, imageMobile: image, imageDestkop: image_desktop, onClose: onClose, onOtherSubmit: onOtherSubmit, doImpression: doImpression }));
     }
     else if (currentLayout === 'Tab') {
         return (React__default.createElement(TabLayout, { popupId: popupIdRef.current, url: imageBlocks.imageMobile.data.url, newTab: imageBlocks.imageMobile.data.newtab, image: image, onClose: onClose, onOtherSubmit: onOtherSubmit }));
@@ -5437,7 +5431,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, 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 }));
@@ -5504,13 +5498,13 @@ const formatTrackingData = (params) => {
                 return compareVal == control.key;
             });
             if (findIndex > -1) {
-                const curLeadControl = listBlockAdded[findIndex].name;
-                listFieldHasValue.push(listBlockAdded[findIndex].data.value);
+                const curInfo = listBlockAdded[findIndex];
+                listFieldHasValue.push(curInfo.data.value);
                 return {
                     field_name: control.key,
-                    component_type: curLeadControl,
+                    component_type: curInfo.name,
                     value: control.value,
-                    is_required: control.isRequired,
+                    is_required: curInfo.data.required,
                 };
             }
         })
@@ -5520,7 +5514,7 @@ const formatTrackingData = (params) => {
                 return {
                     field_name: item.data.value,
                     component_type: item.name,
-                    is_required: item.isRequired,
+                    is_required: item.data.required,
                 };
             }
         })
@@ -5571,7 +5565,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
     };
     const onClose = (params) => __awaiter(void 0, void 0, void 0, function* () {
         var _c, _d;
-        const { formRef, listBlockAdded: listBlockAddedProp = [], formValues: formDataObj, } = params || {};
+        const { formRef, listBlockAdded = [], formValues: formDataObj, } = params || {};
         if (!showCampaign)
             return;
         LeadLog(`👋👋👋 CLOSE POPUP ${showCampaign.code} 👋👋👋`);
@@ -5587,7 +5581,6 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
                 }
             }
         }
-        const listBlockAdded = listBlockAddedProp.filter((i) => i.name !== 'LinkButtonBlock');
         yield Promise.all([
             fetch(`${apiUrl}api/campaign/${showCampaign.code}/popup_exit`, {
                 method: 'POST',
@@ -5612,6 +5605,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
                         status: 'in_progress',
                         campaign_id: showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.id,
                         total_fields: listBlockAdded.length,
+                        type: 'close',
                     },
                     currentLayout,
                     formParams: Object.assign(Object.assign({}, params), { listBlockAdded, formValues: formatFormData(formRef, formDataObj) }),
@@ -5620,13 +5614,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
         onCloseBase();
     });
     const onUnmount = (params) => __awaiter(void 0, void 0, void 0, function* () {
-        const { formRef, listBlockAdded: listBlockAddedProp = [], formValues: formDataObj, } = params || {};
-        const listBlockAdded = listBlockAddedProp.filter((i) => i.name !== 'LinkButtonBlock');
-        if (listBlockAdded.length === 0)
-            return;
-        if ([LEADGEN_LAYOUT.InlineA, LEADGEN_LAYOUT.InlineB].includes(currentLayout) &&
-            Object.keys(formDataObj).length === 0)
-            return;
+        const { formRef, listBlockAdded, formValues: formDataObj } = params || {};
         const data = formatTrackingData({
             commonData: {
                 cookie_id: getCookie('hhg-id'),
@@ -5635,6 +5623,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
                 status: 'in_progress',
                 campaign_id: showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.id,
                 total_fields: listBlockAdded.length,
+                type: 'close',
             },
             currentLayout,
             formParams: Object.assign(Object.assign({}, params), { listBlockAdded, formValues: formatFormData(formRef, formDataObj) }),
@@ -5642,6 +5631,29 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
         const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
         navigator.sendBeacon(`${apiUrl}api/collection/tracking-completion`, blob);
     });
+    const doImpression = (params) => {
+        const { listBlockAdded = [] } = params || {};
+        const data = formatTrackingData({
+            commonData: {
+                cookie_id: getCookie('hhg-id'),
+                ga_client_id: getCookie('_ga') || null,
+                country_code: locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN',
+                status: 'in_progress',
+                campaign_id: showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.id,
+                total_fields: listBlockAdded.length,
+                type: params.type,
+            },
+            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),
+        });
+    };
     useEffect(() => {
         if (forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.code)
             return;
@@ -5697,8 +5709,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
     }), [(_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.currentLayout]);
     const onSubmit = (params, categoryLevel, categoryData) => __awaiter(void 0, void 0, void 0, function* () {
         var _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        const { formRef, listBlockAdded: listBlockAddedProp = [], formValues: formDataObj, } = params || {};
-        const listBlockAdded = listBlockAddedProp.filter((i) => i.name !== 'LinkButtonBlock');
+        const { formRef, listBlockAdded = [], formValues: formDataObj, } = params || {};
         if (!formDataObj || Object.values(formDataObj).every((v) => !Boolean(v))) {
             setShowEmpty(true);
             return;
@@ -5748,7 +5759,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             }),
             listBlockAdded.length > 0 &&
                 trackingCompletionForm({
-                    commonData: Object.assign(Object.assign({}, commonData), { country_code: locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN', status: 'complete', campaign_id: showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.id, total_fields: listBlockAdded.length }),
+                    commonData: Object.assign(Object.assign({}, commonData), { country_code: locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN', status: 'complete', campaign_id: showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.id, total_fields: listBlockAdded.length, type: 'submit_form' }),
                     currentLayout,
                     formParams: Object.assign(Object.assign({}, params), { listBlockAdded, formValues: formatedFormData }),
                 }),
@@ -5851,7 +5862,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, { campaign: showCampaign, action: action, onSubmit: onSubmit, onClose: onClose, onUnmount: onUnmount, 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;

package/build/esm/{logoIcon-9c7ac465.js → logoIcon-a78bec71.js}

@@ -1,6 +1,6 @@
 import React__default, { memo, useMemo } from 'react';
-import { C as CommonGAssets } from './index-6e08f163.js';
-import { I as ImageWrap } from './useScreenSize-5b4c6113.js';
+import { C as CommonGAssets } from './index-4684ca48.js';
+import { I as ImageWrap } from './useScreenSize-9a23a7e5.js';
 
 const _LogoIcon = ({ type, width, height }) => {
     const data = useMemo(() => {

package/build/esm/mantine.js

@@ -1,43 +1,43 @@
-import { g as getMantineThemeOverride, h as StyledTextArea, D as DEBOUNCED_TIME, i as StyledSliderWrapper, j as StyledSlider } from './index-02298be6.js';
-export { k as Accordion, A as Anchor, b as AspectRatio, a as Avatar, B as Breadcrumbs, l as Carousel, c as CentralCarousel, d as Checkbox, e as ChipButton, I as Input, O as OTP, P as Phone, n as Popover, R as Radio, S as Select, m as emotionCache, g as getMantineThemeOverride, t as themeColors } from './index-02298be6.js';
-export { D as DatePicker } from './index-935a3f76.js';
-export { T as Text } from './index-841cfe60.js';
-import { B as Button } from './index-16f26f8f.js';
-export { B as Button } from './index-16f26f8f.js';
-export { I as Indicator } from './index-43ac680d.js';
+import { g as getMantineThemeOverride, h as StyledTextArea, D as DEBOUNCED_TIME, i as StyledSliderWrapper, j as StyledSlider } from './index-f10feafa.js';
+export { k as Accordion, A as Anchor, b as AspectRatio, a as Avatar, B as Breadcrumbs, l as Carousel, c as CentralCarousel, d as Checkbox, e as ChipButton, I as Input, O as OTP, P as Phone, n as Popover, R as Radio, S as Select, m as emotionCache, g as getMantineThemeOverride, t as themeColors } from './index-f10feafa.js';
+export { D as DatePicker } from './index-562b50b7.js';
+export { T as Text } from './index-83503f1d.js';
+import { B as Button } from './index-f5f53ee2.js';
+export { B as Button } from './index-f5f53ee2.js';
+export { I as Indicator } from './index-c8576828.js';
 import React__default, { useState, useEffect } from 'react';
-export { M as Modal } from './index-3eed0d0e.js';
-import { _ as __rest } from './tslib.es6-aeefc7a9.js';
+export { M as Modal } from './index-2f57fe2e.js';
+import { _ as __rest } from './tslib.es6-81e43aac.js';
 import { MantineProvider as MantineProvider$1, Badge as Badge$1, LoadingOverlay as LoadingOverlay$1, clsx, Title, Text, Button as Button$1 } from '@mantine/core';
 import { theme } from './miscTheme.js';
-export { S as Spoiler } from './index-9e69a46c.js';
+export { S as Spoiler } from './index-30754058.js';
 import { useDebouncedValue } from '@mantine/hooks';
-export { S as Switch } from './index-54f6b6ab.js';
-import { u as useMantineLocale, N as NotificationsHandler } from './useMantineLocale-420c60bd.js';
-export { M as MAPPED_LOCALE, g as getHeadingStyles, s as showNotification, u as useMantineLocale } from './useMantineLocale-420c60bd.js';
-export { O as OTHER_THEME_CONFIG } from './other-06759c5d.js';
-export { T as Tabs } from './index-84a8150a.js';
+export { S as Switch } from './index-4b5a471a.js';
+import { u as useMantineLocale, N as NotificationsHandler } from './useMantineLocale-ec62dd51.js';
+export { M as MAPPED_LOCALE, g as getHeadingStyles, s as showNotification, u as useMantineLocale } from './useMantineLocale-ec62dd51.js';
+export { O as OTHER_THEME_CONFIG } from './other-27beca50.js';
+export { T as Tabs } from './index-0ea74ce6.js';
 import '@hhgtech/icons/other';
-import './index-6e08f163.js';
+import './index-4684ca48.js';
 import './constantsDomainLocales.js';
-import './Locale-3d38f1ed.js';
+import './Locale-875c8ea8.js';
 import './constantsIsProduction.js';
-import './useScreenSize-5b4c6113.js';
+import './useScreenSize-9a23a7e5.js';
 import '@emotion/styled';
-import './utils-f742b64d.js';
+import './utils-7b1e02d7.js';
 import '@mantine/carousel';
-import './index-48f9702b.js';
-import './index-6655f664.js';
+import './index-e5f88604.js';
+import './index-7c793c5d.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
 import 'classnames';
-import './useUniqueId-dc492e98.js';
+import './useUniqueId-bfe151c1.js';
 import '@hhgtech/icons/core';
 import '@mantine/dates';
-import './index.styles-7fa6faad.js';
-import './index-8668d502.js';
-import './translationsContext-69738875.js';
+import './index.styles-1b5ffb3a.js';
+import './index-536505e8.js';
+import './translationsContext-7e32d3eb.js';
 import '@mantine/notifications';
 import 'dayjs';
 

package/build/esm/misc.js

@@ -1,35 +1,35 @@
-export { a as ageGenerate, c as convertLocalizedStringToNumber, l as localizeNumberFormat } from './localizeNumberFormat-280aab38.js';
-export { h as fadeIn, a as slideInDown, b as slideInLeft, c as slideInRight, s as slideInUp, e as slideOutDown, f as slideOutLeft, g as slideOutRight, d as slideOutUp } from './animation-635bb5c7.js';
+export { a as ageGenerate, c as convertLocalizedStringToNumber, l as localizeNumberFormat } from './localizeNumberFormat-8c31ac47.js';
+export { h as fadeIn, a as slideInDown, b as slideInLeft, c as slideInRight, s as slideInUp, e as slideOutDown, f as slideOutLeft, g as slideOutRight, d as slideOutUp } from './animation-d88fcda8.js';
 export { deleteCookie, getCookie, setCookie } from './miscCookieHelper.js';
 import 'react';
 import '@mantine/core';
-import './useMantineLocale-420c60bd.js';
-import './index-48f9702b.js';
-import './index-6e08f163.js';
+import './useMantineLocale-ec62dd51.js';
+import './index-e5f88604.js';
+import './index-4684ca48.js';
 export { MBTheme, theme } from './miscTheme.js';
-export { B as Breakpoints, M as MediaQueries, S as Screens, f as formatUrlWithPageParam, g as getBoundariesFromMediaQueryKey, a as getPopupWrapperDom, b as getWrapperDomWithSelector, m as makeParams, c as safeEncodeURI, s as startCase, t as toggleNoScroll } from './utils-f742b64d.js';
-import './index-6655f664.js';
-export { a as abbreviateNumber } from './number-80981a2a.js';
-export { d as getCareApiDomain, g as getCurrentBaseUrl, a as getCurrentSsoUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain } from './normalizeLink-325b4617.js';
+export { B as Breakpoints, M as MediaQueries, S as Screens, f as formatUrlWithPageParam, g as getBoundariesFromMediaQueryKey, a as getPopupWrapperDom, b as getWrapperDomWithSelector, m as makeParams, c as safeEncodeURI, s as startCase, t as toggleNoScroll } from './utils-7b1e02d7.js';
+import './index-7c793c5d.js';
+export { a as abbreviateNumber } from './number-e14f1680.js';
+export { d as getCareApiDomain, g as getCurrentBaseUrl, a as getCurrentSsoUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain } from './normalizeLink-e9401192.js';
 export { formatHealthTool, getDynamicHealthTool, getDynamicHealthToolWithCache } from './miscGetDynamicHealthTool.js';
 export { getSocialList } from './miscGetSocialList.js';
 export { ScreenSizeContext, ScreenSizeContextProvider, getWindowSizeGroups } from './miscScreenSizeContext.js';
-export { f as formatPill } from './dataTransform-b0f02194.js';
+export { f as formatPill } from './dataTransform-50d2c8ef.js';
 import 'dayjs';
 import '@emotion/react';
-import './tslib.es6-aeefc7a9.js';
+import './tslib.es6-81e43aac.js';
 import '@mantine/notifications';
-import './other-06759c5d.js';
-import './Locale-3d38f1ed.js';
+import './other-27beca50.js';
+import './Locale-875c8ea8.js';
 import './constantsDomainLocales.js';
 import './constantsIsProduction.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsRiskScreener.js';
-import './core-49ae412a.js';
-import './WhatsApp-1ee8e9cb.js';
-import './index-2fbd8dc3.js';
-import './index-dea492e2.js';
+import './core-4a06d76a.js';
+import './WhatsApp-ea59f31f.js';
+import './index-45c7dcb0.js';
+import './index-08186b4f.js';
 import 'js-cookie';
 import 'uuid';
 import 'lodash/throttle';

package/build/esm/miscGetDynamicHealthTool.js

@@ -1,8 +1,8 @@
-import { a as __awaiter } from './tslib.es6-aeefc7a9.js';
-import { e as normalizeLinkSlash, c as getDiscoverApiDomain } from './normalizeLink-325b4617.js';
-import { g as getDataWithCache } from './core-49ae412a.js';
+import { a as __awaiter } from './tslib.es6-81e43aac.js';
+import { e as normalizeLinkSlash, c as getDiscoverApiDomain } from './normalizeLink-e9401192.js';
+import { g as getDataWithCache } from './core-4a06d76a.js';
 import './constantsDomainLocales.js';
-import './Locale-3d38f1ed.js';
+import './Locale-875c8ea8.js';
 import './constantsIsProduction.js';
 
 const formatHealthTool = (healthTool, locale) => {

package/build/esm/miscGetSocialList.js

@@ -1,12 +1,12 @@
 import React__default from 'react';
-import { _ as __rest } from './tslib.es6-aeefc7a9.js';
-import { W as WhatsApp, I as Instagram } from './WhatsApp-1ee8e9cb.js';
-import { S as SocialType } from './index-48f9702b.js';
-import { g as getHelloSitesUrl } from './index-2fbd8dc3.js';
-import { C as CommonGAssets } from './index-6e08f163.js';
-import { L as LOCALE } from './Locale-3d38f1ed.js';
-import './index-dea492e2.js';
-import './index-6655f664.js';
+import { _ as __rest } from './tslib.es6-81e43aac.js';
+import { W as WhatsApp, I as Instagram } from './WhatsApp-ea59f31f.js';
+import { S as SocialType } from './index-e5f88604.js';
+import { g as getHelloSitesUrl } from './index-45c7dcb0.js';
+import { C as CommonGAssets } from './index-4684ca48.js';
+import { L as LOCALE } from './Locale-875c8ea8.js';
+import './index-08186b4f.js';
+import './index-7c793c5d.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsDomainLocales.js';

package/build/esm/miscScreenSizeContext.js

@@ -1,6 +1,6 @@
 import React__default, { createContext, useState, useEffect, useMemo } from 'react';
 import throttle from 'lodash/throttle';
-import { B as Breakpoints } from './utils-f742b64d.js';
+import { B as Breakpoints } from './utils-7b1e02d7.js';
 
 const ScreenSizeContext = createContext({
     isInit: true,

package/build/esm/mobileBottomNavigation.js

@@ -1,13 +1,13 @@
-import { _ as __rest } from './tslib.es6-aeefc7a9.js';
+import { _ as __rest } from './tslib.es6-81e43aac.js';
 import React__default from 'react';
-import { M as MobileBottomNavigationIcon, S as StyledMobileBottomNavigation } from './MobileBottomNavigationIcon-f9d3c1e9.js';
-import './index-841cfe60.js';
+import { M as MobileBottomNavigationIcon, S as StyledMobileBottomNavigation } from './MobileBottomNavigationIcon-d8540986.js';
+import './index-83503f1d.js';
 import '@mantine/core';
-import './other-06759c5d.js';
+import './other-27beca50.js';
 import './miscTheme.js';
 import '@emotion/react';
 import '@emotion/styled';
-import './utils-f742b64d.js';
+import './utils-7b1e02d7.js';
 
 const MobileBottomNavigationWrapper = (_a) => {
     var { children, isCollapsed = false, template = 'homepage', refObject, height = 56 } = _a, rest = __rest(_a, ["children", "isCollapsed", "template", "refObject", "height"]);