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

package/build/lead/layouts/lightbox/index.d.ts

@@ -2,7 +2,7 @@ import React, { Dispatch, SetStateAction } from 'react';
 import { LOCALE, UserInfo } from "../../../interfaces/types";
 import { LEADGEN_LAYOUT } from "../../LeadGen.helpers";
 import { TrackingFormProps } from "../../LeadGen.type";
-export declare 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, }: {
+export declare 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, }: {
     popupId: string;
     currentLayout: LEADGEN_LAYOUT;
     extraFields: any;
@@ -16,6 +16,7 @@ export declare const LightboxLayout: ({ popupId, extraFields, onClose: onClosePr
     onOtherSubmit?: () => void;
     onSubmit?: (v: TrackingFormProps) => void;
     onUnmount?: (v: TrackingFormProps) => void;
+    doImpression?: (v: TrackingFormProps) => void;
     showThankyou?: {
         title: string;
         titleAlign?: string;

package/build/lead/newLeadPopup.d.ts

@@ -1,7 +1,7 @@
 import React, { Dispatch, SetStateAction } from 'react';
 import { LOCALE, UserInfo } from "../interfaces/types";
 import { TrackingFormProps } from "./LeadGen.type";
-export declare const NewLeadPopup: ({ campaign, action, onSubmit, onClose, onUnmount, showThankyou, locale, showEmpty, setShowEmpty, userInfo, }: {
+export declare const NewLeadPopup: ({ campaign, action, onSubmit, onClose, onUnmount, doImpression, showThankyou, locale, showEmpty, setShowEmpty, userInfo, }: {
     campaign: any;
     action?: string;
     onSubmit?: (params: TrackingFormProps, categoryLevel?: number, categoryData?: {
@@ -12,6 +12,7 @@ export declare const NewLeadPopup: ({ campaign, action, onSubmit, onClose, onUnm
     }) => void;
     onClose?: (params?: TrackingFormProps) => void;
     onUnmount?: (params?: TrackingFormProps) => void;
+    doImpression?: (params?: TrackingFormProps) => void;
     showThankyou?: {
         title: string;
         titleAlign?: string;

package/build/lead/utils/formatTrackingData.d.ts

@@ -9,6 +9,7 @@ export declare const formatTrackingData: (params: TrackingFormParams) => {
     total_fields: number;
     status: "complete" | "in_progress";
     country_code: string;
+    type: "impression" | "close" | "redirects" | "submit_form";
     template_type: LEADGEN_LAYOUT;
     time_on_form: number;
 };

package/build/lead.js

@@ -2,56 +2,55 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-165ebcff.js');
+var tslib_es6 = require('./tslib.es6-63f1f40c.js');
 var React = require('react');
 var core = require('@mantine/core');
 var debounce = require('lodash/debounce');
 var form = require('@mantine/form');
 var dayjs = require('dayjs');
-var index = require('./index-b4b87e94.js');
+var index = require('./index-96cbcec9.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$1 = require('./index-9f027559.js');
-var translationsContext = require('./translationsContext-88048ff8.js');
-var utils$1 = require('./utils-cf2bddb7.js');
-var index$2 = require('./index-d379c3df.js');
-var index$3 = require('./index-124ab833.js');
-var index$5 = require('./index-e6a8ef94.js');
-var index$4 = require('./index-8957507a.js');
-require('./index.styles-00890d3d.js');
+var index$1 = require('./index-f9c88cee.js');
+var translationsContext = require('./translationsContext-5abbd50c.js');
+var utils$1 = require('./utils-0bb97727.js');
+var index$2 = require('./index-5587d0b0.js');
+var index$3 = require('./index-26450fcc.js');
+var index$5 = require('./index-0afe1984.js');
+var index$4 = require('./index-cc82f293.js');
+require('./index.styles-3f264c9a.js');
 var hooks = require('@mantine/hooks');
-require('./useMantineLocale-7e1240db.js');
-var index$9 = require('./index-77a434f2.js');
-require('./index-a4b3ce47.js');
-var index$7 = require('./index-e0c30948.js');
-require('./other-3212de62.js');
-require('./index-fe4eb90c.js');
-var utils = require('./utils-a1d2533b.js');
+require('./useMantineLocale-22ce5dec.js');
+var index$9 = require('./index-5c371a35.js');
+require('./index-ff0716b1.js');
+var index$7 = require('./index-b84b68dc.js');
+require('./other-eab549fa.js');
+require('./index-bc3e3957.js');
+var utils = require('./utils-cbe60ec0.js');
 var dates = require('@mantine/dates');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-4cee8d93.js');
-var index$6 = require('./index-1bc56aaa.js');
-var translationsProvider = require('./translationsProvider-4708dced.js');
-var Locale = require('./Locale-e1131cbf.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-21e041ed.js');
+var index$6 = require('./index-38fd87eb.js');
+var translationsProvider = require('./translationsProvider-409ecdba.js');
+var Locale = require('./Locale-47fd7df7.js');
 var uuid = require('uuid');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var PhoneInputBase = require('react-phone-number-input');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
 var react = require('@emotion/react');
-var togetherComponentGlobalContext = require('./utils-942c70d1.js');
-var index$8 = require('./index-3c788cf0.js');
-var useScreenSize = require('./useScreenSize-47323369.js');
+var togetherComponentGlobalContext = require('./utils-03fd7ee2.js');
+var index$8 = require('./index-294907d9.js');
+var useScreenSize = require('./useScreenSize-09b2a530.js');
 var framerMotion = require('framer-motion');
 var ReactDOM = require('react-dom');
-var index$a = require('./index-260b0436.js');
-var InputDate = require('./InputDate-8b125326.js');
-var index$b = require('./index-fb9cac3d.js');
-var Close = require('./Close-950bebd5.js');
+var InputDate = require('./InputDate-8d2ad773.js');
+var index$a = require('./index-13d98fad.js');
+var Close = require('./Close-e9069637.js');
 require('./constantsIsProduction.js');
-require('./normalizeLink-e2be4604.js');
+require('./normalizeLink-b231134d.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-5ece0fae.js');
+require('./useUniqueId-ee3f34ab.js');
 require('./constantsSite.js');
 require('@hhgtech/icons/core');
 require('@mantine/notifications');
@@ -69,11 +68,11 @@ require('./i18n-values/vi-VN.js');
 require('./i18n-values/vi-VN_MB.js');
 require('./i18n-values/zh-SG.js');
 require('./i18n-values/zh-TW.js');
-require('./index-59b92dd8.js');
+require('./index-ca7d7ae4.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-e444bcdc.js');
+require('./constants-2e82a708.js');
 require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -2290,8 +2289,11 @@ const useLeadGenContext = () => {
 };
 
 const ImpressionTrackingWrapper = ({ children, stayDuration = 3, onImpression, dependency = '', }) => {
+    var _a;
+    const boxRef = React.useRef(null);
+    const [percent, setPercent] = React.useState(100);
     const { ref, entry } = hooks.useIntersection({
-        threshold: 1,
+        threshold: percent / 100,
     });
     const [tracked, setTracked] = React.useState(false);
     React.useEffect(() => {
@@ -2312,14 +2314,20 @@ const ImpressionTrackingWrapper = ({ children, stayDuration = 3, onImpression, d
     }, [entry === null || entry === void 0 ? void 0 : entry.isIntersecting, tracked]);
     React.useEffect(() => {
         if (tracked) {
-            onImpression();
             console.log('Impression call API');
+            onImpression();
         }
     }, [tracked]);
     React.useEffect(() => {
         setTracked(false);
     }, [dependency]);
-    return (React__default["default"].createElement(core.Box, { "data-impression": true, ref: ref }, children));
+    React.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["default"].createElement(core.Box, { "data-impression": true, ref: ref },
+        React__default["default"].createElement("div", { ref: boxRef }, children)));
 };
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -3484,9 +3492,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);
+    React.useEffect(() => {
+        doImpression();
+    }, []);
     React.useEffect(() => {
         if (popupId && imageMobileLoaded && imageDestkopLoaded) {
             document.body.classList.add('noscroll');
@@ -4067,8 +4078,7 @@ const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkN
                     React__default["default"].createElement(index$4.Button, { className: `lead-modal__btn ${LEAD_CLASS}`, color: primaryColor }, linkText)))))));
 };
 
-const InlineLayout = ({ action, content, inlinePosition, campaignCode, }) => {
-    const { apiUrl } = React.useContext(LeadGenContext$1);
+const InlineLayout = ({ content, inlinePosition, doImpression, }) => {
     const target = React.useMemo(() => {
         if (!inlinePosition)
             return null;
@@ -4175,22 +4185,7 @@ const InlineLayout = ({ action, content, inlinePosition, campaignCode, }) => {
     }, [inlinePosition]);
     if (!inlinePosition || !target)
         return null;
-    return ReactDOM.createPortal(React__default["default"].createElement(ImpressionTrackingWrapper, { onImpression: () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-            const gaCookie = miscCookieHelper.getCookie('_ga') || null;
-            fetch(`${apiUrl}api/campaign/${campaignCode}/impression`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    action,
-                    url: location.href.toLowerCase(),
-                    title_article: document.title,
-                    cookie_id: miscCookieHelper.getCookie('hhg-id'),
-                    ga_client_id: gaCookie,
-                }),
-            });
-        }) }, content), target);
+    return ReactDOM.createPortal(React__default["default"].createElement(ImpressionTrackingWrapper, { onImpression: () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () { return yield doImpression(); }) }, content), target);
 };
 
 const SideBarLayout = ({ content }) => {
@@ -4644,7 +4639,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
             case 'LinkButtonBlock':
                 return (React__default["default"].createElement("div", { key: index },
                     React__default["default"].createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
-                        React__default["default"].createElement(index$a.Button, { type: "button", size: "md", className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
+                        React__default["default"].createElement(index$4.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))));
@@ -4957,7 +4952,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 } = React.useContext(LeadGenContext$1);
     const { isMobile } = useScreenSize.useScreenSize();
@@ -5020,6 +5015,13 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         userInfo,
         format: (_a = (index$7.ISO_FORMAT[locale] || index$7.ISO_FORMAT['vi-VN'])) === null || _a === void 0 ? void 0 : _a.dateFormat,
     });
+    const handleDoImpression = React.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 ');
@@ -5034,6 +5036,9 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         }
         clearCacheUsedEmailOrPhone();
     }, []);
+    React.useEffect(() => {
+        (isLightBox || isSlider) && handleDoImpression();
+    }, []);
     React.useEffect(() => {
         formRef.current && setLastFormRef(formRef.current);
     }, [formRef.current]);
@@ -5174,13 +5179,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] = React.useState(false);
     const LinkButtonBlock = listBlockAdded.filter(({ name }) => name == LEADGEN_BLOCK.LinkButtonBlock);
     const ButtonLink = !!(LinkButtonBlock === null || LinkButtonBlock === void 0 ? void 0 : LinkButtonBlock.length) && (React__default["default"].createElement(React__default["default"].Fragment, null, LinkButtonBlock.map((item, index) => {
         var _a, _b, _c;
-        return (React__default["default"].createElement(core.Button, { 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["default"].createElement(core.Button, { 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) => tslib_es6.__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["default"].createElement("header", { className: core.clsx('leadgen-header', { 'leadgen-header_only': onlyHeader }) }, LEADGEN_SHOW_HEADER.includes(currentLayout) ? (React__default["default"].createElement(HeaderImage, { src: imageMobile, className: "lead-modal__image" })) : (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(HeaderImage, { src: imageDesktop, className: "le-only-desktop lead-modal__image" }),
@@ -5233,7 +5244,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         'leadgen-inline': isInPage,
         'leadgen-slider': isSlider,
     });
-    const PopupContainer = isDrawer ? (isNewUI ? (React__default["default"].createElement(LeadGenLightBoxB, { form: form, loading: isSubmitLoading, visible: open, onVisible: () => onOpenChange(false) }, PopupWrapper)) : (React__default["default"].createElement(index$b.DrawerComponent, { fadeFromIndex: index$7.ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
+    const PopupContainer = isDrawer ? (isNewUI ? (React__default["default"].createElement(LeadGenLightBoxB, { form: form, loading: isSubmitLoading, visible: open, onVisible: () => onOpenChange(false) }, PopupWrapper)) : (React__default["default"].createElement(index$a.DrawerComponent, { fadeFromIndex: index$7.ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
         PopupWrapper,
         React__default["default"].createElement("div", { style: {
                 position: 'absolute',
@@ -5253,7 +5264,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         return React__default["default"].createElement(SideBarLayout, { content: PopupContainer });
     }
     else if (isInline) {
-        return (React__default["default"].createElement(InlineLayout, { action: action, content: PopupContainer, campaignCode: campaignCode, inlinePosition: extraFields.popupInlinePosition }));
+        return (React__default["default"].createElement(InlineLayout, { action: action, content: PopupContainer, campaignCode: campaignCode, inlinePosition: extraFields.popupInlinePosition, doImpression: () => handleDoImpression() }));
     }
     return null;
 };
@@ -5346,26 +5357,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 } = React.useContext(LeadGenContext$1);
-    React.useEffect(() => {
-        const gaCookie = miscCookieHelper.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: miscCookieHelper.getCookie('hhg-id'),
-                    ga_client_id: gaCookie,
-                }),
-            });
-    }, []);
     const { extra_fields, image, image_desktop, code, image_background, image_overlay_mobile, image_overlay_desktop, } = campaign || {};
     const { currentLayout } = extra_fields;
     const imageBlocks = extra_fields.imageBlocks
@@ -5453,7 +5447,7 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, showThan
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
     if (currentLayout === 'CenterTab') {
-        return (React__default["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["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["default"].createElement(TabLayout, { popupId: popupIdRef.current, url: imageBlocks.imageMobile.data.url, newTab: imageBlocks.imageMobile.data.newtab, image: image, onClose: onClose, onOtherSubmit: onOtherSubmit }));
@@ -5466,7 +5460,7 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, showThan
         currentLayout == 'Fullscreen' ||
         currentLayout == 'Sidebar' ||
         currentLayout == 'Slider') {
-        return (React__default["default"].createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, onUnmount: onUnmount, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, title: titleText, onSubmit: (params) => onSubmit(params, categoryLevel, categoryData), key: currentLayout, imageOverlayDesktop: image_overlay_desktop, imageOverlayMobile: image_overlay_mobile, showThankyou: showThankyou, campaignId: campaign.id, campaignCode: campaign.code, campaign_subot_id: campaign.bot_id || [], locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo, action: action }));
+        return (React__default["default"].createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, onUnmount: onUnmount, doImpression: doImpression, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, title: titleText, onSubmit: (params) => onSubmit(params, categoryLevel, categoryData), key: currentLayout, imageOverlayDesktop: image_overlay_desktop, imageOverlayMobile: image_overlay_mobile, showThankyou: showThankyou, campaignId: campaign.id, campaignCode: campaign.code, campaign_subot_id: campaign.bot_id || [], locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo, action: action }));
     }
     else if (currentLayout.includes('Skin')) {
         return (React__default["default"].createElement(SkinLayout, { popupId: popupIdRef.current, link: actionBlocks.linkButtonBlock.data.url, linkNewTab: !!actionBlocks.linkButtonBlock.data.newtab, linkText: actionBlocks.linkButtonBlock.data.value, onClose: onClose, onOtherSubmit: onOtherSubmit, imageMobile: image, imageDesktop: image_desktop, currentLayout: currentLayout }));
@@ -5533,13 +5527,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,
                 };
             }
         })
@@ -5549,7 +5543,7 @@ const formatTrackingData = (params) => {
                 return {
                     field_name: item.data.value,
                     component_type: item.name,
-                    is_required: item.isRequired,
+                    is_required: item.data.required,
                 };
             }
         })
@@ -5600,7 +5594,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
     };
     const onClose = (params) => tslib_es6.__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} 👋👋👋`);
@@ -5616,7 +5610,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',
@@ -5641,6 +5634,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) }),
@@ -5649,13 +5643,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
         onCloseBase();
     });
     const onUnmount = (params) => tslib_es6.__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: miscCookieHelper.getCookie('hhg-id'),
@@ -5664,6 +5652,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) }),
@@ -5671,6 +5660,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: miscCookieHelper.getCookie('hhg-id'),
+                ga_client_id: miscCookieHelper.getCookie('_ga') || null,
+                country_code: locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN',
+                status: 'in_progress',
+                campaign_id: showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.id,
+                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),
+        });
+    };
     React.useEffect(() => {
         if (forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.code)
             return;
@@ -5726,8 +5738,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) => tslib_es6.__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;
@@ -5777,7 +5788,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             }),
             listBlockAdded.length > 0 &&
                 trackingCompletionForm({
-                    commonData: Object.assign(Object.assign({}, commonData), { country_code: locale ? utils.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 ? utils.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 }),
                 }),
@@ -5880,7 +5891,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
                         !!currentLayout &&
                             !currentLayout.includes('Inline') &&
                             !currentLayout.includes('Sidebar') && (React__default["default"].createElement(core.Overlay, { color: "#000", opacity: 0.6, center: true, zIndex: 400, pos: 'fixed', onClick: () => onClose() })),
-                        React__default["default"].createElement(NewLeadPopup, { campaign: showCampaign, action: action, onSubmit: onSubmit, onClose: onClose, onUnmount: onUnmount, showThankyou: showThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo })))));
+                        React__default["default"].createElement(NewLeadPopup, { campaign: showCampaign, action: action, onSubmit: onSubmit, onClose: onClose, onUnmount: onUnmount, doImpression: doImpression, showThankyou: showThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo })))));
                 })))))));
 };
 const LeadGen = _LeadGen;

package/build/{logoIcon-c659be92.js → logoIcon-b08d7e00.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-a4b3ce47.js');
-var useScreenSize = require('./useScreenSize-47323369.js');
+var index = require('./index-ff0716b1.js');
+var useScreenSize = require('./useScreenSize-09b2a530.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/mantine.js

@@ -2,43 +2,43 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-124ab833.js');
-var index$1 = require('./index-e6a8ef94.js');
-var index$2 = require('./index-d379c3df.js');
-var index$3 = require('./index-8957507a.js');
-var index$4 = require('./index-d3de7cb2.js');
+var index = require('./index-26450fcc.js');
+var index$1 = require('./index-0afe1984.js');
+var index$2 = require('./index-5587d0b0.js');
+var index$3 = require('./index-cc82f293.js');
+var index$4 = require('./index-8bbf68a9.js');
 var React = require('react');
-var index$5 = require('./index-bbe50153.js');
-var tslib_es6 = require('./tslib.es6-165ebcff.js');
+var index$5 = require('./index-7a3e80fb.js');
+var tslib_es6 = require('./tslib.es6-63f1f40c.js');
 var core = require('@mantine/core');
 var miscTheme = require('./miscTheme.js');
-var index$6 = require('./index-4cef7eef.js');
+var index$6 = require('./index-dd2fe0ef.js');
 var hooks = require('@mantine/hooks');
-var index$7 = require('./index-209bdded.js');
-var useMantineLocale = require('./useMantineLocale-7e1240db.js');
-var other = require('./other-3212de62.js');
-var index$8 = require('./index-fe4eb90c.js');
+var index$7 = require('./index-d9c16f2c.js');
+var useMantineLocale = require('./useMantineLocale-22ce5dec.js');
+var other = require('./other-eab549fa.js');
+var index$8 = require('./index-bc3e3957.js');
 require('@hhgtech/icons/other');
-require('./index-a4b3ce47.js');
+require('./index-ff0716b1.js');
 require('./constantsDomainLocales.js');
-require('./Locale-e1131cbf.js');
+require('./Locale-47fd7df7.js');
 require('./constantsIsProduction.js');
-require('./useScreenSize-47323369.js');
+require('./useScreenSize-09b2a530.js');
 require('@emotion/styled');
-require('./utils-cf2bddb7.js');
+require('./utils-0bb97727.js');
 require('@mantine/carousel');
-require('./index-77a434f2.js');
-require('./index-e0c30948.js');
+require('./index-5c371a35.js');
+require('./index-b84b68dc.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
 require('classnames');
-require('./useUniqueId-5ece0fae.js');
+require('./useUniqueId-ee3f34ab.js');
 require('@hhgtech/icons/core');
 require('@mantine/dates');
-require('./index.styles-00890d3d.js');
-require('./index-9f027559.js');
-require('./translationsContext-88048ff8.js');
+require('./index.styles-3f264c9a.js');
+require('./index-f9c88cee.js');
+require('./translationsContext-5abbd50c.js');
 require('@mantine/notifications');
 require('dayjs');
 

package/build/misc.js

@@ -2,38 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var localizeNumberFormat = require('./localizeNumberFormat-4b53b11b.js');
-var animation = require('./animation-90274782.js');
+var localizeNumberFormat = require('./localizeNumberFormat-83adc051.js');
+var animation = require('./animation-1cf0c8ae.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
 require('react');
 require('@mantine/core');
-require('./useMantineLocale-7e1240db.js');
-require('./index-77a434f2.js');
-require('./index-a4b3ce47.js');
+require('./useMantineLocale-22ce5dec.js');
+require('./index-5c371a35.js');
+require('./index-ff0716b1.js');
 var miscTheme = require('./miscTheme.js');
-var utils = require('./utils-cf2bddb7.js');
-require('./index-e0c30948.js');
-var number = require('./number-6b0ab5f1.js');
-var normalizeLink = require('./normalizeLink-e2be4604.js');
+var utils = require('./utils-0bb97727.js');
+require('./index-b84b68dc.js');
+var number = require('./number-af47baf7.js');
+var normalizeLink = require('./normalizeLink-b231134d.js');
 var miscGetDynamicHealthTool = require('./miscGetDynamicHealthTool.js');
 var miscGetSocialList = require('./miscGetSocialList.js');
 var miscScreenSizeContext = require('./miscScreenSizeContext.js');
-var dataTransform = require('./dataTransform-bdcdb76c.js');
+var dataTransform = require('./dataTransform-ca6b3e19.js');
 require('dayjs');
 require('@emotion/react');
-require('./tslib.es6-165ebcff.js');
+require('./tslib.es6-63f1f40c.js');
 require('@mantine/notifications');
-require('./other-3212de62.js');
-require('./Locale-e1131cbf.js');
+require('./other-eab549fa.js');
+require('./Locale-47fd7df7.js');
 require('./constantsDomainLocales.js');
 require('./constantsIsProduction.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
-require('./core-46d14736.js');
-require('./WhatsApp-4c914158.js');
-require('./index-a405b1d5.js');
-require('./index-59b92dd8.js');
+require('./core-ff335166.js');
+require('./WhatsApp-f723bf55.js');
+require('./index-1c1e67b2.js');
+require('./index-ca7d7ae4.js');
 require('js-cookie');
 require('uuid');
 require('lodash/throttle');