@hhgtech/hhg-components 1.29.396-beta-7 → 1.29.397-beta-1

package/build/esm/lead.js

@@ -1,53 +1,53 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-a91a3ba2.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-11765615.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 dayjs from 'dayjs';
 import debounce from 'lodash/debounce';
 import { createFormContext, useForm } from '@mantine/form';
-import { B as BEARER_TOKEN_COOKIE } from './index-09cdc277.js';
+import dayjs from 'dayjs';
+import { B as BEARER_TOKEN_COOKIE } from './index-5e6a0609.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { u as useTranslations } from './index-0dce6cba.js';
-import { T as TranslationsContext } from './translationsContext-eff46c98.js';
-import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-c3edb47a.js';
-import { T as Text } from './index-8503e186.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-092411be.js';
-import { D as DatePicker } from './index-3d4e7c78.js';
-import { B as Button } from './index-6168eba6.js';
-import './index.styles-236ce1fa.js';
+import { u as useTranslations } from './index-be5ba37e.js';
+import { T as TranslationsContext } from './translationsContext-8bed8935.js';
+import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-860b86e8.js';
+import { T as Text } from './index-9c8a599d.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-5a1b18fe.js';
+import { D as DatePicker } from './index-493cae6d.js';
+import { B as Button } from './index-45a645d6.js';
+import './index.styles-84a7085d.js';
 import { useClickOutside } from '@mantine/hooks';
-import './useMantineLocale-a1772a1f.js';
-import { C as COMMON_DATE_TRANSLATE_KEY } from './index-a1c59b7d.js';
-import './index-e6dd9174.js';
-import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-6b301031.js';
-import './other-083471c4.js';
-import './index-7d2f09ff.js';
-import { M as MAPPED_LOCALE } from './utils-5c524612.js';
+import './useMantineLocale-4f58a092.js';
+import { C as COMMON_DATE_TRANSLATE_KEY } from './index-bd0c1846.js';
+import './index-6c4db0e7.js';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-4e04114c.js';
+import './other-b55c2cac.js';
+import './index-6e0b2ec9.js';
+import { M as MAPPED_LOCALE } from './utils-a009879a.js';
 import { DateInput } from '@mantine/dates';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-bcaf2a8d.js';
-import { H as Heading$1 } from './index-bba60a1a.js';
-import { t as translationsMap$1 } from './translationsProvider-2ae2efb3.js';
-import { L as LOCALE } from './Locale-7013ca58.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-3ac7fb5b.js';
+import { H as Heading$1 } from './index-8afffc50.js';
+import { t as translationsMap$1 } from './translationsProvider-758b393c.js';
+import { L as LOCALE } from './Locale-2f050a8d.js';
 import { v1 } from 'uuid';
 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-d64261d1.js';
-import { i as isVideo } from './index-c8cc02be.js';
-import { u as useScreenSize } from './useScreenSize-eb5e276a.js';
+import { T as TogetherComponentGlobalContext } from './utils-9c7b9df3.js';
+import { i as isVideo } from './index-1888a823.js';
+import { u as useScreenSize } from './useScreenSize-4a774778.js';
 import { motion } from 'framer-motion';
 import { createPortal } from 'react-dom';
-import { B as Button$2 } from './index-96598e9a.js';
-import { I as InputDate } from './InputDate-81a85792.js';
-import { D as DrawerComponent } from './index-96ff844a.js';
-import { C as Close } from './Close-504c9dc6.js';
+import { B as Button$2 } from './index-ab464f29.js';
+import { I as InputDate } from './InputDate-c206ae02.js';
+import { D as DrawerComponent } from './index-9154a4b5.js';
+import { C as Close } from './Close-cdcf7f34.js';
 import './constantsIsProduction.js';
-import './normalizeLink-f2e0563f.js';
+import './normalizeLink-c69706f9.js';
 import './constantsDomainLocales.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
 import 'classnames';
-import './useUniqueId-8b360b56.js';
+import './useUniqueId-4ecc826a.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import '@mantine/notifications';
@@ -64,11 +64,11 @@ import './i18n-values/tl-PH.js';
 import './i18n-values/vi-VN.js';
 import './i18n-values/vi-VN_MB.js';
 import './i18n-values/zh-TW.js';
-import './index-f1ef5c84.js';
+import './index-a4e33581.js';
 import 'slugify';
 import 'string-format';
 import './togetherApiPaths.js';
-import './constants-71fad5dd.js';
+import './constants-dd5c7e21.js';
 import 'vaul';
 
 const LeadGenComponentContext = createContext({});
@@ -163,20 +163,21 @@ const LEADGEN_ACTIONS = {
     SCROLL: 'SCROLL',
     TIME: 'TIME',
 };
-const LEADGEN_LAYOUT = {
-    LightBoxA: 'LightBoxA',
-    LightBoxB: 'LightBoxB',
-    SkinA: 'SkinA',
-    SkinB: 'SkinB',
-    Floating: 'Floating',
-    Tab: 'Tab',
-    InlineA: 'InlineA',
-    InlineB: 'InlineB',
-    CenterTab: 'CenterTab',
-    Sidebar: 'Sidebar',
-    Fullscreen: 'Fullscreen',
-    Slider: 'Slider',
-};
+var LEADGEN_LAYOUT;
+(function (LEADGEN_LAYOUT) {
+    LEADGEN_LAYOUT["LightBoxA"] = "LightBoxA";
+    LEADGEN_LAYOUT["LightBoxB"] = "LightBoxB";
+    LEADGEN_LAYOUT["SkinA"] = "SkinA";
+    LEADGEN_LAYOUT["SkinB"] = "SkinB";
+    LEADGEN_LAYOUT["Floating"] = "Floating";
+    LEADGEN_LAYOUT["Tab"] = "Tab";
+    LEADGEN_LAYOUT["InlineA"] = "InlineA";
+    LEADGEN_LAYOUT["InlineB"] = "InlineB";
+    LEADGEN_LAYOUT["CenterTab"] = "CenterTab";
+    LEADGEN_LAYOUT["Sidebar"] = "Sidebar";
+    LEADGEN_LAYOUT["Fullscreen"] = "Fullscreen";
+    LEADGEN_LAYOUT["Slider"] = "Slider";
+})(LEADGEN_LAYOUT || (LEADGEN_LAYOUT = {}));
 const LEADGEN_BLOCK = {
     TextBlock: 'TextBlock',
     NumberBlock: 'NumberBlock',
@@ -360,6 +361,18 @@ const formatCampaignDetail = (campaign) => {
     }
 };
 
+const formatLeadGenFormValue = (values = {}, blocks) => {
+    const newValues = {};
+    for (const block of blocks) {
+        const { data } = block || {};
+        const { value: fieldName } = data || {};
+        if (fieldName in values) {
+            newValues[fieldName] = values[fieldName];
+        }
+    }
+    return newValues;
+};
+
 class Store {
     constructor() {
         this.apiSsoUrl = 'https://staging-id.hellobacsi.com/';
@@ -662,7 +675,7 @@ const clearCacheUsedEmailOrPhone = () => {
 const [LeadFormProvider$1, useLeadFormContext$1, useLeadForm$1] = createFormContext();
 const useLeadFormConfig$1 = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, }) => {
     const { t } = useTranslations();
-    const initialValues = useMemo(() => mappingSSOToLead(userInfo), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
+    const initialValues = useMemo(() => formatLeadGenFormValue(mappingSSOToLead(userInfo), listBlockAdded), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
     useEffect(() => {
         if (!window.intlTelInputUtils) {
             require('intl-tel-input/build/js/utils');
@@ -978,15 +991,15 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'TextBlock':
                 return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
                     // onChangeRaw={(e) => inputOnChange('text', e)}
-                    label: placeholder, "data-control": "text", name: value }, form.getInputProps(value))));
+                    label: placeholder, "data-control": "text", "data-lead-control": name, name: value }, form.getInputProps(value))));
             case 'NumberBlock':
                 return (React__default.createElement(NumberInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
                     // onChange={(e) => inputOnChange('number', e)}
-                    label: placeholder, "data-control": "number", name: value }, form.getInputProps(value))));
+                    label: placeholder, "data-control": "number", "data-lead-control": name, name: value }, form.getInputProps(value))));
             case 'EmailBlock':
                 return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
                     // type="email"
-                    placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "email", name: value }, form.getInputProps(value))));
+                    placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "email", "data-lead-control": name, name: value }, form.getInputProps(value))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -1001,14 +1014,14 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                             form.setFieldValue(value, v);
                         }, 
                         // onBlur={(e) => inputOnBlur('tel', e)}
-                        id: id, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" })));
+                        id: id, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name })));
             }
             case 'LocationBlock': {
                 return (React__default.createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
             }
             case 'DateBlock':
                 return (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date", popoverProps: popoverProps }, form.getInputProps(value))),
+                    React__default.createElement(DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date", "data-lead-control": name, popoverProps: popoverProps }, form.getInputProps(value))),
                     React__default.createElement("input", { type: "hidden", name: value, "data-control": "date" })));
             case 'LinkButtonBlock':
                 return (React__default.createElement("div", { key: index },
@@ -1026,11 +1039,11 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 8,
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name }))))));
             case 'RadioBlock':
                 return (React__default.createElement(React__default.Fragment, null,
                     isSendMailChimp && (React__default.createElement(Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
-                    React__default.createElement(Radio.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+                    React__default.createElement(Radio.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name }))))));
             case 'DropdownBlock':
                 return (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
@@ -1041,7 +1054,7 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'TncBlock':
                 const tncInputProps = form.getInputProps('TNC-' + b.id);
                 return (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, tncInputProps, { error: tncInputProps.error ? tncInputProps.error : undefined }))));
+                    React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name }, tncInputProps, { error: tncInputProps.error ? tncInputProps.error : undefined }))));
         }
         return null;
     })));
@@ -1074,7 +1087,9 @@ const Heading = (_a) => {
 const FormComponent = ({ styles, className, classNames, fillInfo, popoverProps, submitProps, }) => {
     var _a;
     const { primaryColor } = useContext(LeadGenContext$1);
-    const { listBlockAdded, leadFormConfig: { form, validateObj }, validatingEmailRef, validatingPhoneRef, formRef, setFormRef, onClose, onOtherSubmit, actionBlocks, locale, setShowOtpPhone, onSubmit, } = useContext(LeadGenComponentContext);
+    const { listBlockAdded, leadFormConfig: { form, validateObj }, validatingEmailRef, validatingPhoneRef, 
+    // formRef,
+    setFormRef, onClose, onOtherSubmit, actionBlocks, locale, setShowOtpPhone, onSubmit, } = useContext(LeadGenComponentContext);
     const { classes, cx } = useStyles$1(undefined, {
         name: 'LeadGen__FormComponent',
         styles,
@@ -1135,7 +1150,7 @@ const FormComponent = ({ styles, className, classNames, fillInfo, popoverProps,
                         var _a;
                         const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
                         if (respMessage === 'This phone number was verified') {
-                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
                             return;
                         }
                         setShowOtpPhone(newShowOtpPhone);
@@ -1145,7 +1160,7 @@ const FormComponent = ({ styles, className, classNames, fillInfo, popoverProps,
                     });
                     return;
                 }
-                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
             })(e);
         }, 100);
     };
@@ -1315,10 +1330,13 @@ const OtpBlockComponent = ({ otpData, onSuccess, autoSendWhenOpen, className, st
 };
 const OtpBlock$1 = (_a) => {
     var rest = __rest(_a, []);
-    const { showOtpPhone, setShowOtpPhone, onSubmit, formRef, leadFormConfig: { form }, } = useContext(LeadGenComponentContext);
+    const { showOtpPhone, setShowOtpPhone, onSubmit,
+    // formRef,
+    // leadFormConfig: { form },
+     } = useContext(LeadGenComponentContext);
     return showOtpPhone ? (React__default.createElement(OtpBlockComponent, Object.assign({ otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
             setShowOtpPhone(null);
-            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, form.values);
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
         } }, rest))) : null;
 };
 
@@ -2121,7 +2139,7 @@ const [LeadFormProvider, useLeadFormContext, useLeadForm] = createFormContext();
 const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, format, }) => {
     var _a;
     const { t } = useTranslations();
-    const initialValues = useMemo(() => mappingSSOToLead(userInfo), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
+    const initialValues = useMemo(() => formatLeadGenFormValue(mappingSSOToLead(userInfo), listBlockAdded), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
     const LEAD_LOCALE = LEAD_LOCALE_DATA[(_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.lang] ||
         LEAD_LOCALE_DATA['vi-VN'];
     const validateObj = useMemo(() => {
@@ -2356,15 +2374,14 @@ const StyledLeadGenSubscriptionBoxBody = styled.div `
   }
 `;
 const StyledLeadGenSubscriptionBoxHeaderImage = styled.div `
-  margin-top: 3px;
-  margin-right: 20px;
-  width: 44px;
-  height: 44px;
+  margin-left: 24px;
+  width: 68px;
+  height: 68px;
 
   img {
     width: 100%;
     height: 100%;
-    object-fix: contain;
+    object-fit: contain;
     onject-position: center;
   }
 
@@ -2381,7 +2398,7 @@ const StyledLeadGenSubscriptionBoxHeader = styled.div `
     flex: 1;
     min-width: 0;
     color: ${theme.colors.gray900};
-    font-size: 16px;
+    font-size: 17px;
     font-weight: 400;
     line-height: 1.4;
     letter-spacing: -0.4px;
@@ -2397,6 +2414,12 @@ const StyledLeadGenSubscriptionBoxHeader = styled.div `
 const StyledLeadGenSubscriptionBox = styled.div `
   padding: 16px;
   border: 1px solid ${theme.colors.neutral100};
+  background: linear-gradient(
+    180.71deg,
+    #7bc2ff -18.54%,
+    #e3f2ff 17.12%,
+    #ffffff 99.25%
+  );
   border-radius: 12px;
   margin-inline: auto;
   .leadgen-form_inputs {
@@ -2430,6 +2453,7 @@ const StyledLeadGenSubscriptionBox = styled.div `
         margin-left: 8px;
         width: auto;
         min-height: 56px;
+        font-size: 16px;
       }
     }
   }
@@ -2529,18 +2553,6 @@ const GoogleLocationBlock = (props) => {
         } }, restProps)));
 };
 
-const formatLeadGenFormValue = (values, blocks) => {
-    const newValues = {};
-    for (const block of blocks) {
-        const { data } = block || {};
-        const { value: fieldName } = data || {};
-        if (fieldName in values) {
-            newValues[fieldName] = values[fieldName];
-        }
-    }
-    return newValues;
-};
-
 const StyledLeadGenFormInner = styled.div `
   display: flex;
   flex-wrap: wrap;
@@ -3071,8 +3083,8 @@ const LeadGenSubscriptionBoxA = (props) => {
     }, [title]);
     return (React__default.createElement(StyledLeadGenSubscriptionBoxA, { className: "subcription_box_A" },
         React__default.createElement(StyledLeadGenSubscriptionBoxHeader, { className: "leadgen-subscription_box_header" },
-            imageComp,
-            titleComp),
+            titleComp,
+            imageComp),
         React__default.createElement(StyledLeadGenSubscriptionBoxBody, { className: "leadgen-subscription_box_body" },
             React__default.createElement(LeadGenForm, { ref: formRef, form: form, rules: rules, blocks: blocks, locale: locale, onFinish: onFinish, className: "leadgen-subscription_box_form" }),
             React__default.createElement(Button$1, { disabled: loading, loading: loading, variant: "filled", size: "lg", onClick: () => {
@@ -4375,20 +4387,20 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     React__default.createElement(TextInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "text", placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChangeRaw={(e) => inputOnChange('text', e)}
-                        label: label, "data-control": "text", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "text", "data-lead-control": 'TextBlock', inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value), { name: value }))));
             case 'NumberBlock':
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
                     React__default.createElement(NumberInput$1, Object.assign({ withAsterisk: required, spellCheck: false, type: "number", placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChange={(e) => inputOnChange('number', e)}
-                        label: label, "data-control": "number", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "number", "data-lead-control": name, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'EmailBlock':
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
                     React__default.createElement(TextInput, Object.assign({ withAsterisk: required, spellCheck: false, 
                         // type="email"
                         placeholder: " ", 
                         // className="lead-modal__form-control leadgen-form_field"
-                        label: label, "data-control": "email", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                        label: label, "data-control": "email", "data-lead-control": name, name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'ZaloOtpBlock':
@@ -4402,7 +4414,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         React__default.createElement("div", { className: "mantine-Input-wrapper" },
                             React__default.createElement(Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: " ", 
                                 // onBlur={(e) => inputOnBlur('tel', e)}
-                                id: htmlForId, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" }, formPhoneInputWrapper))))));
+                                id: htmlForId, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name }, formPhoneInputWrapper))))));
             }
             case 'LocationBlock': {
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
@@ -4411,7 +4423,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
             case 'DateBlock': {
                 const _c = form.getInputProps(value), { error } = _c, formInputProps = __rest(_c, ["error"]);
                 return (React__default.createElement(Input$1.Wrapper, { key: index, size: "md", withAsterisk: required, label: label, "data-invalid": !!error, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default.createElement(InputDate, Object.assign({ name: value, error: Boolean(error), locale: locale, "data-extra": true, "data-name": value, "data-control": "date", className: "leadgen-form_field_date", labelTuples: labelTuples }, formInputProps))));
+                    React__default.createElement(InputDate, Object.assign({ name: value, error: Boolean(error), locale: locale, "data-extra": true, "data-name": value, "data-control": "date", "data-lead-control": name, className: "leadgen-form_field_date", labelTuples: labelTuples }, formInputProps))));
             }
             case 'LinkButtonBlock':
                 return (React__default.createElement("div", { key: index },
@@ -4434,7 +4446,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                             gap: 8,
                         }, inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name }))))));
             case 'RadioBlock':
                 return (React__default.createElement(ChoiceField, { className: "leadgen-form_radio", key: index },
                     isSendMailChimp && (React__default.createElement(Input$1, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
@@ -4442,7 +4454,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         // className="lead-modal__form-control leadgen-form_field"
                         label: label, size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name }))))));
             case 'DropdownBlock':
                 return (React__default.createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field DropdownBlock", key: index },
                     React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
@@ -4479,7 +4491,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 const _d = form.getInputProps(`TNC-${id}`), { error } = _d, tncInputProps = __rest(_d, ["error"]);
                 return (React__default.createElement(ChoiceField, { className: "leadgen-form_checkbox", key: id },
                     React__default.createElement(Input$1.Wrapper, { error: error },
-                        React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, tncInputProps)))));
+                        React__default.createElement(Checkbox, Object.assign({ name: 'TNC-' + id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name }, tncInputProps)))));
         }
         return null;
     })));
@@ -4727,8 +4739,9 @@ const LEADGEN_SHOW_HEADER = [
     LEADGEN_LAYOUT.Sidebar,
     LEADGEN_LAYOUT.Slider,
 ];
-const CAMPAGE_CODE_LIST_APPLY_NEW_UI = ['ri3lkoxcetjoj39', 'u0adw7hw8kw7t89'];
-const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaignCode, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, }) => {
+// 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, }) => {
     var _a, _b;
     const { primaryColor } = useContext(LeadGenContext$1);
     const { isMobile } = useScreenSize();
@@ -4736,17 +4749,25 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const [showOtpPhone, setShowOtpPhone] = useState(null);
     const [isSubmitLoading, setIsSubmitLoading] = useState(false);
     const [snap, setSnap] = useState(0.8);
+    const isTrackedForm = useRef(false);
     const formRef = useRef();
+    const [lastFormRef, setLastFormRef] = useState();
     const onClose = () => {
         if (showOtpPhone) {
             setShowOtpPhone(null);
         }
         else {
-            onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
+            onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp({
+                formValues: form.values,
+                formActiveTime: formActiveTime.current,
+                formRef: formRef.current,
+                listBlockAdded,
+            });
         }
     };
     const { height } = useViewportDimensions();
     usePreventScroll();
+    const formActiveTime = useRef(0);
     const textBlocks = JSON.parse(extraFields.textBlocks);
     const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
     const actionBlocks = JSON.parse(extraFields.actionBlocks);
@@ -4772,6 +4793,17 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const showHeader = !!imageMobile || !!imageDesktop;
     const onlyHeader = !title && !description;
     const showButtonClose = !isInline;
+    const validatingPhoneRef = useRef(false);
+    const validatingEmailRef = useRef(false);
+    const { form, validateObj } = useLeadFormConfig({
+        listBlockAdded,
+        validatingPhoneRef,
+        validatingEmailRef,
+        campaignId,
+        campaign_subot_id,
+        userInfo,
+        format: (_a = (ISO_FORMAT[locale] || ISO_FORMAT['vi-VN'])) === null || _a === void 0 ? void 0 : _a.dateFormat,
+    });
     if (window.innerWidth < 769 &&
         LEADGEN_LAYOUT_NOT_SHOW_IN_MOBILE.includes(currentLayout)) {
         console.log('😎 Not show fullscreen, slider on mobile ');
@@ -4786,17 +4818,33 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         }
         clearCacheUsedEmailOrPhone();
     }, []);
-    const validatingPhoneRef = useRef(false);
-    const validatingEmailRef = useRef(false);
-    const { form, validateObj } = useLeadFormConfig({
-        listBlockAdded,
-        validatingPhoneRef,
-        validatingEmailRef,
-        campaignId,
-        campaign_subot_id,
-        userInfo,
-        format: (_a = (ISO_FORMAT[locale] || ISO_FORMAT['vi-VN'])) === null || _a === void 0 ? void 0 : _a.dateFormat,
-    });
+    useEffect(() => {
+        formRef.current && setLastFormRef(formRef.current);
+    }, [formRef.current]);
+    useEffect(() => {
+        const handleBeforeUnload = () => {
+            !isTrackedForm.current &&
+                !showThankyou &&
+                (onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount({
+                    formValues: form.values,
+                    formActiveTime: formActiveTime.current,
+                    formRef: lastFormRef,
+                    listBlockAdded,
+                }));
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+    }, [lastFormRef, form.values, showThankyou]);
+    useEffect(() => {
+        let intervalId = null;
+        if (isLightBox && !showThankyou) {
+            intervalId = setInterval(() => {
+                formActiveTime.current += 1;
+                // console.log({ formActiveTime: formActiveTime.current })
+            }, 1000);
+        }
+        return () => clearInterval(intervalId);
+    }, [showThankyou]);
     const listBlockAddedRequired = useMemo(() => leadGenFieldRequired(listBlockAdded), listBlockAdded);
     const disabledButtonSubmit = useMemo(() => {
         if (listBlockAddedRequired.length) {
@@ -4902,7 +4950,12 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
                         var _a;
                         const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
                         if (respMessage === 'This phone number was verified') {
-                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
+                                formValues: v,
+                                formActiveTime: formActiveTime.current,
+                                formRef: formRef.current,
+                                listBlockAdded,
+                            });
                             return;
                         }
                         setShowOtpPhone(newShowOtpPhone);
@@ -4912,7 +4965,12 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
                     });
                     return;
                 }
-                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
+                    formValues: v,
+                    formActiveTime: formActiveTime.current,
+                    formRef: formRef.current,
+                    listBlockAdded,
+                });
             })(e);
         }, 100);
     };
@@ -4958,7 +5016,12 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
                     React__default.createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))))));
     const PopupOtp = showOtpPhone && (React__default.createElement(OtpBlock, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
             setShowOtpPhone(null);
-            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, form.values);
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
+                formValues: form.values,
+                formActiveTime: formActiveTime.current,
+                formRef: formRef.current,
+                listBlockAdded,
+            });
         } }));
     const PopupThankYou = showThankyou && (React__default.createElement(ThankyouPopup, { title: showThankyou.title, titleAlign: showThankyou.titleAlign, subtitle: showThankyou.subtitle, subtitleAlign: showThankyou.subtitleAlign, link: showThankyou.link, linkNewTab: showThankyou.linkNewTab, linkText: showThankyou.linkText, image: showThankyou.image }));
     const PopupContent = (React__default.createElement("div", { className: clsx('leadgen-content', {
@@ -5106,7 +5169,7 @@ function getCategoryLevel(t = 'Xin chao {{category_2}} extra') {
         return null;
     }
 }
-const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, locale, showEmpty, setShowEmpty, userInfo, }) => {
+const NewLeadPopup = ({ campaign, action, onSubmit, onClose, onUnmount, showThankyou, locale, showEmpty, setShowEmpty, userInfo, }) => {
     var _a, _b;
     const { apiUrl, siteDomain } = useContext(LeadGenContext$1);
     useEffect(() => {
@@ -5225,7 +5288,7 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, local
         currentLayout == 'Fullscreen' ||
         currentLayout == 'Sidebar' ||
         currentLayout == 'Slider') {
-        return (React__default.createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, title: titleText, onSubmit: (form, values) => onSubmit(form, values, 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 }));
+        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 }));
@@ -5233,9 +5296,69 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, local
     return null;
 };
 
+const numberFormatType = 2; // i18n.phonenumbers.PhoneNumberFormat.NATIONAL
+const formatFormData = (currentForm, formData) => formData.map((i) => {
+    var _a, _b, _c, _d;
+    const control = ((_a = currentForm
+        .querySelector(`*[name="${i.name}"][data-control]`)) === null || _a === void 0 ? void 0 : _a.getAttribute('data-control')) ||
+        ((_b = currentForm
+            .querySelector(`*[data-extra][data-name="${i.name}"]`)) === null || _b === void 0 ? void 0 : _b.getAttribute('data-control')) ||
+        'text';
+    const leadControl = ((_c = currentForm
+        .querySelector(`*[name="${i.name}"][data-lead-control]`)) === null || _c === void 0 ? void 0 : _c.getAttribute('data-lead-control')) ||
+        ((_d = currentForm
+            .querySelector(`*[data-extra][data-name="${i.name}"]`)) === null || _d === void 0 ? void 0 : _d.getAttribute('data-lead-control')) ||
+        'text';
+    const value = control === 'tel'
+        ? window.intlTelInputUtils
+            .formatNumber(String(i.value), LEAD_LOCALE === null || LEAD_LOCALE === void 0 ? void 0 : LEAD_LOCALE.countryCodeNumber, numberFormatType)
+            .replace(/\s+/g, '')
+        : control === 'date'
+            ? dayjs(i.value).format('YYYY-MM-DD')
+            : i.value;
+    return {
+        key: i.name,
+        value,
+        control,
+        leadControl,
+        // is_sent_mailchimp: currentForm.querySelector(
+        //   `div[data-name="${i.name}-mailchimp"]`,
+        // )
+        //   ? 'true'
+        //   : 'false',
+    };
+});
+
+const formatTrackingData = (params) => {
+    const { formParams = {}, currentLayout, commonData } = params;
+    const { formValues, formActiveTime, listBlockAdded } = formParams;
+    const listFieldHasValue = [];
+    const data = Object.assign(Object.assign({ template_type: currentLayout, time_on_form: [LEADGEN_LAYOUT.LightBoxA, LEADGEN_LAYOUT.LightBoxB].includes(currentLayout)
+            ? formActiveTime
+            : 0 }, commonData), { data_input: formValues.map((control) => {
+            listFieldHasValue.push(control.leadControl);
+            return {
+                field_name: control.key,
+                component_type: control.leadControl,
+                value: control.value,
+            };
+        }), data_not_input: listBlockAdded
+            .map((item) => {
+            const leadControlName = item.name;
+            if (!listFieldHasValue.includes(leadControlName)) {
+                return {
+                    field_name: item.data.value,
+                    component_type: leadControlName,
+                };
+            }
+        })
+            .filter(Boolean) });
+    return data;
+};
+
 // mount css
 const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor, apiSubotUrl, DEBUG_URL, forceCampaign, children, extraPayloadValues = [], excludeExitRulesHandler, userInfo, onClose: onCloseProps, onSubmit: onSubmitProps, }) => {
-    var _a;
+    var _a, _b;
     const scrollEventHandlerRef = useRef();
     const leadStartTimeRef = useRef(Date.now());
     const { apiUrl } = useMemo(() => {
@@ -5251,6 +5374,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
     const [action, setAction] = useState('');
     const [showThankyou, setShowThankyou] = useState(null);
     const [showEmpty, setShowEmpty] = useState(false);
+    const currentLayout = useMemo(() => showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.currentLayout, [showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.currentLayout]);
     useEffect(() => {
         if (forceCampaign) {
             setShowCampaign(forceCampaign);
@@ -5273,14 +5397,15 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
         setAction('HIDE');
         onCloseProps === null || onCloseProps === void 0 ? void 0 : onCloseProps();
     };
-    const onClose = () => {
-        var _a, _b;
+    const onClose = (params) => __awaiter(void 0, void 0, void 0, function* () {
+        var _c, _d;
+        const { formRef, listBlockAdded, formValues: formDataObj } = params;
         if (!showCampaign)
             return;
         LeadLog(`👋👋👋 CLOSE POPUP ${showCampaign.code} 👋👋👋`);
         if (!excludeExitRulesHandler) {
-            const showAfterExit = Number((_a = showCampaign.rules.find((rule) => rule.rule == 'show_again_after_exit')) === null || _a === void 0 ? void 0 : _a.value);
-            const expiresDay = Number((_b = showCampaign.rules.find((rule) => rule.rule == 'days_to_show_again')) === null || _b === void 0 ? void 0 : _b.value);
+            const showAfterExit = Number((_c = showCampaign.rules.find((rule) => rule.rule == 'show_again_after_exit')) === null || _c === void 0 ? void 0 : _c.value);
+            const expiresDay = Number((_d = showCampaign.rules.find((rule) => rule.rule == 'days_to_show_again')) === null || _d === void 0 ? void 0 : _d.value);
             if (showAfterExit == 0) {
                 if (!expiresDay) {
                     setCookie(`lead_closed_${showCampaign.code}`, `target_${showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.popupVersion}`, { domain: '.' + siteDomain, path: '/' });
@@ -5290,21 +5415,73 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
                 }
             }
         }
-        fetch(`${apiUrl}api/campaign/${showCampaign.code}/popup_exit`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                action: 'CLICK',
-                url: location.href.toLowerCase(),
-                title_article: document.title,
-                cookie_id: getCookie('hhg-id'),
-                duration: Math.ceil((Date.now() - leadStartTimeRef.current) / 1000),
+        const formData = Object.keys(formDataObj)
+            .filter((key) => !!formDataObj[key])
+            .map((key) => ({
+            name: key,
+            value: String(formDataObj[key]),
+        }));
+        let formatedFormData = null;
+        if (!showThankyou) {
+            formatedFormData = formatFormData(formRef, formData);
+        }
+        yield Promise.all([
+            fetch(`${apiUrl}api/campaign/${showCampaign.code}/popup_exit`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    action: 'CLICK',
+                    url: location.href.toLowerCase(),
+                    title_article: document.title,
+                    cookie_id: getCookie('hhg-id'),
+                    duration: Math.ceil((Date.now() - leadStartTimeRef.current) / 1000),
+                }),
             }),
-        });
+            !showThankyou &&
+                trackingCompletionForm({
+                    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,
+                    },
+                    currentLayout,
+                    formParams: Object.assign(Object.assign({}, params), { formValues: formatedFormData }),
+                }),
+        ]);
         onCloseBase();
-    }; //
+    });
+    const onUnmount = (params) => __awaiter(void 0, void 0, void 0, function* () {
+        const { formRef, listBlockAdded, formValues: formDataObj } = params;
+        if ([LEADGEN_LAYOUT.InlineA, LEADGEN_LAYOUT.InlineB].includes(currentLayout) &&
+            Object.keys(formDataObj).length === 0)
+            return;
+        const formData = Object.keys(formDataObj)
+            .filter((key) => !!formDataObj[key])
+            .map((key) => ({
+            name: key,
+            value: String(formDataObj[key]),
+        }));
+        const formatedFormData = formatFormData(formRef, formData);
+        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,
+            },
+            currentLayout,
+            formParams: Object.assign(Object.assign({}, params), { formValues: formatedFormData }),
+        });
+        const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
+        navigator.sendBeacon(`${apiUrl}api/collection/tracking-completion`, blob);
+    });
     useEffect(() => {
         if (forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.code)
             return;
@@ -5343,8 +5520,24 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             DEBUG_URL,
         });
     }, []);
-    const onSubmit = (currentForm, formDataObj, categoryLevel, categoryData) => __awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const trackingCompletionForm = useCallback((params) => __awaiter(void 0, void 0, void 0, function* () {
+        const { currentLayout, formParams } = params;
+        const { formValues } = formParams;
+        if ([LEADGEN_LAYOUT.InlineA, LEADGEN_LAYOUT.InlineB].includes(currentLayout) &&
+            Object.keys(formValues).length === 0)
+            return;
+        const data = formatTrackingData(params);
+        return fetch(`${apiUrl}api/collection/tracking-completion`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(data),
+        });
+    }), [(_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, formValues: formDataObj } = params;
         if (!formDataObj || Object.values(formDataObj).every((v) => !Boolean(v))) {
             setShowEmpty(true);
             return;
@@ -5357,55 +5550,26 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             value: String(formDataObj[key]),
         }));
         console.log('** RYAN index.tsx 218 formData : ', formData);
-        const numberFormatType = 2; // i18n.phonenumbers.PhoneNumberFormat.NATIONAL
         // Get ga_client_id from cookies
         const gaCookie = getCookie('_ga') || null;
         if (!window.intlTelInputUtils) {
             yield require('intl-tel-input/build/js/utils');
         }
-        const data = {
-            url: location.href.toLowerCase(),
-            title_article: document.title,
-            meta: [
-                ...formData.map((i) => {
-                    var _a, _b;
-                    const control = ((_a = currentForm
-                        .querySelector(`*[name="${i.name}"][data-control]`)) === null || _a === void 0 ? void 0 : _a.getAttribute('data-control')) ||
-                        ((_b = currentForm
-                            .querySelector(`*[data-extra][data-name="${i.name}"]`)) === null || _b === void 0 ? void 0 : _b.getAttribute('data-control')) ||
-                        'text';
-                    const value = control === 'tel'
-                        ? window.intlTelInputUtils
-                            .formatNumber(String(i.value), LEAD_LOCALE === null || LEAD_LOCALE === void 0 ? void 0 : LEAD_LOCALE.countryCodeNumber, numberFormatType)
-                            .replace(/\s+/g, '')
-                        : control === 'date'
-                            ? dayjs(i.value).format('YYYY-MM-DD')
-                            : i.value;
-                    return {
-                        key: i.name,
-                        value,
-                        control,
-                        // is_sent_mailchimp: currentForm.querySelector(
-                        //   `div[data-name="${i.name}-mailchimp"]`,
-                        // )
-                        //   ? 'true'
-                        //   : 'false',
-                    };
-                }),
-                ...extraPayloadValues,
-            ],
+        const formatedFormData = formatFormData(formRef, formData);
+        const commonData = {
             cookie_id: getCookie('hhg-id'),
             ga_client_id: gaCookie,
         };
+        const data = Object.assign({ url: location.href.toLowerCase(), title_article: document.title, meta: [...formatedFormData, ...extraPayloadValues] }, commonData);
         // categoryLevel
         if (categoryLevel) {
             if (categoryData[categoryLevel].value_en) {
                 data['category'] = categoryData[categoryLevel].value_en;
             }
         }
-        const expiresDay = Number(((_c = (_b = showCampaign.rules) === null || _b === void 0 ? void 0 : _b.find((r) => r.rule === 'days_to_show_again')) === null || _c === void 0 ? void 0 : _c.value) ||
+        const expiresDay = Number(((_f = (_e = showCampaign.rules) === null || _e === void 0 ? void 0 : _e.find((r) => r.rule === 'days_to_show_again')) === null || _f === void 0 ? void 0 : _f.value) ||
             7);
-        const showAgain = Number(((_e = (_d = showCampaign.rules) === null || _d === void 0 ? void 0 : _d.find((r) => r.rule === 'show_again_after_submit')) === null || _e === void 0 ? void 0 : _e.value) || 0);
+        const showAgain = Number(((_h = (_g = showCampaign.rules) === null || _g === void 0 ? void 0 : _g.find((r) => r.rule === 'show_again_after_submit')) === null || _h === void 0 ? void 0 : _h.value) || 0);
         if (showAgain == 0) {
             LeadLog('⛔ Popup never show again!');
             setCookie(`lead_submited_${showCampaign.code}`, `target_${showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.targetType}`, { domain: '.' + siteDomain, path: '/' });
@@ -5414,13 +5578,20 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             LeadLog(`⌛ Popup will show again after ${expiresDay} days!`);
             setCookie(`lead_submited_${showCampaign.code}`, `target_${showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.targetType}`, { domain: '.' + siteDomain, days: expiresDay, path: '/' });
         }
-        fetch(`${apiUrl}api/campaign/${showCampaign.code}/lead`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(data),
-        });
+        yield Promise.all([
+            fetch(`${apiUrl}api/campaign/${showCampaign.code}/lead`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            }),
+            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 }),
+                currentLayout,
+                formParams: Object.assign(Object.assign({}, params), { formValues: formatedFormData }),
+            }),
+        ]);
         onSubmitProps === null || onSubmitProps === void 0 ? void 0 : onSubmitProps(formDataObj);
         if ((showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.popupShowThankYou) == 'notshow') {
             onClose();
@@ -5439,15 +5610,15 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             const titleBlock = listBlockThankyou.find((i) => i.name == 'TitleBlock');
             const subtitleBlock = listBlockThankyou.find((i) => i.name == 'SubtitleBlock');
             const linkButtonBlock = listBlockThankyou.find((i) => i.name == 'LinkButtonBlock');
-            thankTitle = ((_f = titleBlock === null || titleBlock === void 0 ? void 0 : titleBlock.data) === null || _f === void 0 ? void 0 : _f.value) || '';
-            titleAlign = ((_g = titleBlock === null || titleBlock === void 0 ? void 0 : titleBlock.data) === null || _g === void 0 ? void 0 : _g.align) || '';
-            thankDesc = ((_h = subtitleBlock === null || subtitleBlock === void 0 ? void 0 : subtitleBlock.data) === null || _h === void 0 ? void 0 : _h.value) || '';
-            descAlign = ((_j = subtitleBlock === null || subtitleBlock === void 0 ? void 0 : subtitleBlock.data) === null || _j === void 0 ? void 0 : _j.align) || '';
-            linkText = ((_k = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _k === void 0 ? void 0 : _k.value) || '';
-            linkNewTab = ((_l = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _l === void 0 ? void 0 : _l.newtab) || false;
-            linkUrl = ((_m = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _m === void 0 ? void 0 : _m.url) || '';
+            thankTitle = ((_j = titleBlock === null || titleBlock === void 0 ? void 0 : titleBlock.data) === null || _j === void 0 ? void 0 : _j.value) || '';
+            titleAlign = ((_k = titleBlock === null || titleBlock === void 0 ? void 0 : titleBlock.data) === null || _k === void 0 ? void 0 : _k.align) || '';
+            thankDesc = ((_l = subtitleBlock === null || subtitleBlock === void 0 ? void 0 : subtitleBlock.data) === null || _l === void 0 ? void 0 : _l.value) || '';
+            descAlign = ((_m = subtitleBlock === null || subtitleBlock === void 0 ? void 0 : subtitleBlock.data) === null || _m === void 0 ? void 0 : _m.align) || '';
+            linkText = ((_o = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _o === void 0 ? void 0 : _o.value) || '';
+            linkNewTab = ((_p = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _p === void 0 ? void 0 : _p.newtab) || false;
+            linkUrl = ((_q = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _q === void 0 ? void 0 : _q.url) || '';
             // ALWAYS SHOW THANK YOU ON COMPOUND COMP
-            // const curLayout = showCampaign.extra_fields.currentLayout
+            // const curLayout = currentLayout
             // TODO: newbuilder thank you
             // List layout not show thanks you
             // if (
@@ -5504,16 +5675,22 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             leadStartTimeRef.current = Date.now();
         }
     }, [showCampaign]);
-    return (React__default.createElement(LeadGenContext$1.Provider, { value: { primaryColor, apiUrl, siteDomain, siteId, locale } },
+    return (React__default.createElement(LeadGenContext$1.Provider, { value: {
+            primaryColor,
+            apiUrl,
+            siteDomain,
+            siteId,
+            locale,
+        } },
         React__default.createElement(TranslationsContext.Provider, { value: { locale, values: getTranslations(locale) } }, children ? (React__default.createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, setShowThankyou: setShowThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }, children)) : (React__default.createElement(Portal, { target: getPopupWrapperDom() },
             React__default.createElement(Box, { sx: { position: 'fixed', zIndex: ZINDEX_SSO - 9e6 } },
-                React__default.createElement(Transition, { mounted: Boolean(((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1'), transition: "fade", duration: 600, timingFunction: "ease", exitDuration: 200 }, (styles) => {
+                React__default.createElement(Transition, { mounted: Boolean(((_b = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _b === void 0 ? void 0 : _b.popupVersion) === '2.1'), transition: "fade", duration: 600, timingFunction: "ease", exitDuration: 200 }, (styles) => {
                     var _a;
                     return (React__default.createElement(Box, { style: styles }, ((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1' && (React__default.createElement(React__default.Fragment, null,
-                        !!showCampaign.extra_fields.currentLayout &&
-                            !showCampaign.extra_fields.currentLayout.includes('Inline') &&
-                            !showCampaign.extra_fields.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, showThankyou: showThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo })))));
+                        !!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 })))));
                 })))))));
 };
 const LeadGen = _LeadGen;