@hhgtech/hhg-components 1.29.372 → 1.29.374-beta-1

package/build/esm/lead.js

@@ -1,44 +1,48 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-def645e9.js';
-import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, useCallback } from 'react';
-import { createStyles, Box, Button as Button$1, Autocomplete, clsx, Input as Input$1, TextInput, NumberInput as NumberInput$1, Portal, Transition, Overlay } from '@mantine/core';
+import { _ as __rest, a as __awaiter } from './tslib.es6-1073e423.js';
+import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, useCallback, forwardRef, useImperativeHandle, memo } from 'react';
+import { createStyles, Box, Button as Button$1, Input as Input$1, clsx, Autocomplete, 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 } from '@mantine/form';
-import { u as useTranslations } from './index-e3522239.js';
-import { T as TranslationsContext } from './translationsContext-db44a804.js';
+import { createFormContext, useForm } from '@mantine/form';
+import { u as useTranslations } from './index-94c7ee4b.js';
+import { T as TranslationsContext } from './translationsContext-4ea92c46.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-ad366429.js';
-import { T as Text } from './index-d46d72e5.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-3fe07695.js';
-import { D as DatePicker } from './index-773c6e02.js';
-import { B as Button } from './index-02c659dd.js';
-import './index.styles-e7a84f91.js';
+import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-f530e069.js';
+import { T as Text } from './index-53e72c1e.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-a1ae0a50.js';
+import { D as DatePicker } from './index-16fae63d.js';
+import { B as Button } from './index-0d9a1b8c.js';
+import './index.styles-f8978237.js';
 import { useClickOutside } from '@mantine/hooks';
-import './useMantineLocale-75d3a92b.js';
-import './index-6e796974.js';
-import './index-f6ae34df.js';
-import { Z as ZINDEX_SSO } from './index-b1702546.js';
-import './other-39c7ba92.js';
-import './index-f18301b6.js';
-import { M as MAPPED_LOCALE } from './utils-654cc220.js';
-import '@mantine/dates';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-be5196d7.js';
-import { H as Heading$1 } from './index-c85f2927.js';
+import './useMantineLocale-2ddd0d66.js';
+import { C as COMMON_DATE_TRANSLATE_KEY } from './index-bedd68c7.js';
+import './index-f3b6ab45.js';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-54de0535.js';
+import './other-a974982d.js';
+import './index-67bb06d6.js';
+import { M as MAPPED_LOCALE } from './utils-3ff75edd.js';
+import { DateInput } from '@mantine/dates';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-1451c491.js';
+import { H as Heading$1 } from './index-eea13537.js';
+import { t as translationsMap$1 } from './translationsProvider-75b93b92.js';
+import { L as LOCALE } from './Locale-2def755e.js';
 import { v1 } from 'uuid';
-import { i as isVideo } from './index-72875897.js';
-import { D as DrawerComponent } from './index-3c7bade1.js';
-import { u as useScreenSize } from './useScreenSize-9091e971.js';
-import { createPortal } from 'react-dom';
-import { css } from '@emotion/react';
+import { parsePhoneNumber } from 'react-phone-number-input';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { B as Button$2 } from './index-0823f05f.js';
-import { C as Close } from './Close-c3a49880.js';
+import { css } from '@emotion/react';
+import { T as TogetherComponentGlobalContext } from './utils-a6705915.js';
+import { i as isVideo } from './index-4afb0581.js';
+import { D as DrawerComponent } from './index-d5dfbc30.js';
+import { u as useScreenSize } from './useScreenSize-b097bc99.js';
+import { createPortal } from 'react-dom';
+import { B as Button$2 } from './index-202a8ced.js';
+import { I as InputDate } from './InputDate-53408741.js';
+import { C as Close } from './Close-bed66153.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
-import './Locale-3e2786ee.js';
 import 'classnames';
-import './useUniqueId-5ba39dd0.js';
+import './useUniqueId-fa696ba6.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import '@mantine/notifications';
@@ -46,6 +50,22 @@ import './constantsDomainLocales.js';
 import './constantsIsProduction.js';
 import 'date-fns/locale';
 import './constantsRiskScreener.js';
+import './i18n-values/en-PH.js';
+import './i18n-values/hi-IN.js';
+import './i18n-values/id-ID.js';
+import './i18n-values/km-KH.js';
+import './i18n-values/ms-MY.js';
+import './i18n-values/my-MM.js';
+import './i18n-values/th-TH.js';
+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-cd80d854.js';
+import 'slugify';
+import 'string-format';
+import './togetherApiPaths.js';
+import './constants-341374a3.js';
 import 'vaul';
 
 const LeadGenComponentContext = createContext({});
@@ -72,7 +92,7 @@ if (sessionStorage.getItem('insider_object')) {
 }
 const docLang = document.documentElement.lang;
 // TODO: country code
-const LEAD_LOCALE_DATA = {
+const LEAD_LOCALE_DATA$1 = {
     'vi-VN': {
         popupLang: 'vi',
         countryCode: 'vn',
@@ -114,7 +134,7 @@ const LEAD_LOCALE_DATA = {
         countryCodeNumber: 91,
     },
 };
-const LEAD_LOCALE = LEAD_LOCALE_DATA[docLang] || LEAD_LOCALE_DATA['vi-VN'];
+const LEAD_LOCALE = LEAD_LOCALE_DATA$1[docLang] || LEAD_LOCALE_DATA$1['vi-VN'];
 function LEAD_RESET_VAR() {
     // LEAD_CURRENT_URL = location.href.toLowerCase();
     LEAD_CURRENT_URL =
@@ -135,6 +155,11 @@ const LEAD_TIMEZONE_DATA = {
     9: 'Asia/Manila', // Philippines / Filipinos Site
 };
 
+const LEADGEN_ACTIONS = {
+    SHOW: 'SHOW',
+    SCROLL: 'SCROLL',
+    TIME: 'TIME',
+};
 const LEADGEN_LAYOUT = {
     LightBoxA: 'LightBoxA',
     LightBoxB: 'LightBoxB',
@@ -164,8 +189,10 @@ const LEADGEN_BLOCK = {
     DropdownBlock: 'DropdownBlock',
     CheckboxBlock: 'CheckboxBlock',
     TncBlock: 'TncBlock',
+    TitleBlock: 'TitleBlock',
+    SubtitleBlock: 'SubtitleBlock',
 };
-const LEADGEN_BLOCK_IN_FORM = [
+const LEADGEN_BLOCK_INPUT = [
     LEADGEN_BLOCK.TextBlock,
     LEADGEN_BLOCK.NumberBlock,
     LEADGEN_BLOCK.DateBlock,
@@ -180,7 +207,59 @@ const LEADGEN_BLOCK_IN_FORM = [
     LEADGEN_BLOCK.CheckboxBlock,
     LEADGEN_BLOCK.TncBlock,
 ];
+const leadGenFieldNamePhone = (listBlockAdded) => {
+    return listBlockAdded
+        .filter(({ name }) => [
+        LEADGEN_BLOCK.PhoneBlock,
+        LEADGEN_BLOCK.PhoneOtpBlock,
+        LEADGEN_BLOCK.WhatsappOtpBlock,
+        LEADGEN_BLOCK.ZaloOtpBlock,
+    ].includes(name))
+        .map(({ data }) => data.value);
+};
 const SSO_MAP_LEAD = ['name', 'email', 'birthday', 'phone', 'gender'];
+const LEAD_LOCALE_DATA = {
+    'vi-VN': {
+        popupLang: 'vi',
+        countryCode: 'vn',
+        countryCodeNumber: 84,
+    },
+    'id-ID': {
+        popupLang: 'id',
+        countryCode: 'id',
+        countryCodeNumber: 62,
+    },
+    'th-TH': {
+        popupLang: 'th',
+        countryCode: 'th',
+        countryCodeNumber: 66,
+    },
+    'ms-MY': {
+        popupLang: 'ms',
+        countryCode: 'my',
+        countryCodeNumber: 60,
+    },
+    'zh-TW': {
+        popupLang: 'zh',
+        countryCode: 'tw',
+        countryCodeNumber: 886,
+    },
+    'km-KH': {
+        popupLang: 'km',
+        countryCode: 'kh',
+        countryCodeNumber: 855,
+    },
+    'my-MM': {
+        popupLang: 'my',
+        countryCode: 'mm',
+        countryCodeNumber: 95,
+    },
+    'hi-IN': {
+        popupLang: 'hi',
+        countryCode: 'in',
+        countryCodeNumber: 91,
+    },
+};
 const mappingSSOToLead = (userInfoProps) => {
     var _a, _b;
     try {
@@ -196,7 +275,7 @@ const mappingSSOToLead = (userInfoProps) => {
                 if (ssoKey === 'birthday') {
                     const dob = dayjs(initValue, 'YYYY-MM-DD', true);
                     if (dob.isValid()) {
-                        user.birthday = dob;
+                        user.birthday = dob.toDate();
                     }
                 }
                 else if (ssoKey === 'gender') {
@@ -219,16 +298,66 @@ const mappingSSOToLead = (userInfoProps) => {
     catch (error) {
         return;
     }
+};
+const formatCampaignDetail = (campaign) => {
+    if (!campaign) {
+        return {};
+    }
+    try {
+        const { extra_fields, thank_you_image } = campaign || {};
+        const { textBlocks: exTextBlocks, imageBlocks: exImageBlocks, listBlockAdded: exListBlockAdded, listBlockThankyou: exListBlockThankyou, actionBlocks: exActionBlocks, } = extra_fields;
+        const textBlocks = JSON.parse(exTextBlocks);
+        const imageBlocks = JSON.parse(exImageBlocks);
+        const listBlockAdded = JSON.parse(exListBlockAdded);
+        const listBlockThankyou = JSON.parse(exListBlockThankyou);
+        const actionBlocks = JSON.parse(exActionBlocks);
+        const ThankYouBlock = {
+            image: { src: thank_you_image },
+        };
+        listBlockThankyou.forEach((block) => {
+            const { name, data } = block || {};
+            const { value: htmlText, align, newtab, url } = data || {};
+            switch (name) {
+                case LEADGEN_BLOCK.TitleBlock: {
+                    ThankYouBlock.title = { htmlText, align };
+                }
+                case LEADGEN_BLOCK.SubtitleBlock: {
+                    ThankYouBlock.description = { htmlText, align };
+                }
+                case LEADGEN_BLOCK.LinkButtonBlock: {
+                    ThankYouBlock.button = { htmlText, newtab, url };
+                }
+            }
+        });
+        return Object.assign(Object.assign({}, campaign), { extra_fields: Object.assign(Object.assign({}, extra_fields), { textBlocks,
+                imageBlocks,
+                listBlockAdded,
+                listBlockThankyou,
+                actionBlocks }), ThankYouBlock });
+    }
+    catch (error) {
+        return {};
+    }
 };
 
 class Store {
     constructor() {
+        this.apiSsoUrl = 'https://staging-id.hellobacsi.com/';
         this.apiLeadUrl = 'https://dev.leadgen.hellobacsi.com/';
         this.apiSubotUrl = 'https://staging-service-subot.hellohealthgroup.com/';
     }
 }
 const leadStore = new Store();
 
+const LEADGEN_API_METHOD = {
+    GET: 'get',
+    POST: 'POST',
+};
+const LEADGEN_API_PATH = {
+    V2_CAMPAIGN: 'api/v2/campaign',
+    V2_SUBSCRIPTION_LEAD: 'api/v2/subscription-box',
+    V2_SUBSCRIPTION_INFO: 'api/campaign/get-title',
+};
 const leadApi = {
     call(_a) {
         var { url, data = undefined } = _a, config = __rest(_a, ["url", "data"]);
@@ -332,8 +461,50 @@ const verifyOtpLead = ({ phone, otp, type, }) => {
         },
     });
 };
+const getCampaignByCode = (campaign_code) => {
+    return leadApi.call({
+        url: `${LEADGEN_API_PATH.V2_CAMPAIGN}/${campaign_code}`,
+        method: LEADGEN_API_METHOD.GET,
+    });
+};
+const getSubscriptionBoxInfo = ({ category, site, }) => {
+    return leadApi.call({
+        url: `${LEADGEN_API_PATH.V2_SUBSCRIPTION_INFO}?category=${category}&site=${site}`,
+        method: LEADGEN_API_METHOD.GET,
+    });
+};
+const postSubscriptionBoxLead = ({ data }) => {
+    return leadApi.call({
+        url: LEADGEN_API_PATH.V2_SUBSCRIPTION_LEAD,
+        method: LEADGEN_API_METHOD.POST,
+        data,
+    });
+};
+const postUserInfoFromLeadGen = ({}) => {
+    return;
+};
+const campaignPostImpression = ({ code, action, title_article, ga_client_id, cookie_id, extra, url, referrer, }) => {
+    return leadApi.call({
+        url: `api/campaign/${code}/impression`,
+        method: LEADGEN_API_METHOD.POST,
+        data: {
+            action,
+            title_article,
+            cookie_id,
+            ga_client_id,
+            url,
+            extra,
+            referrer,
+        },
+    });
+};
 const Service = {
     campaignGetById,
+    getCampaignByCode,
+    getSubscriptionBoxInfo,
+    postSubscriptionBoxLead,
+    postUserInfoFromLeadGen,
+    campaignPostImpression,
     validateEmailOrPhoneOnSubot,
     validateEmailOrPhoneOnLeadGen,
     validatePhoneNumberOnLeadGen,
@@ -673,7 +844,7 @@ const Description = (_a) => {
     return description ? (React__default.createElement(Text, Object.assign({ size: "p3" }, rest), description)) : null;
 };
 
-const LeadGenContext = createContext({});
+const LeadGenContext$1 = createContext({});
 
 var useStyles$2 = createStyles(() => {
     return {
@@ -737,7 +908,7 @@ const SubtitleBlock$1 = ({ children, align, }) => (React__default.createElement(
 const TitleBlock$1 = ({ children, align, }) => (React__default.createElement("h2", { className: `lead-modal__title ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
 const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, styles, classNames, popoverProps, }) => {
-    const { primaryColor } = useContext(LeadGenContext);
+    const { primaryColor } = useContext(LeadGenContext$1);
     const { classes, cx } = useStyles$2(undefined, {
         name: 'LeadGen__Field',
         styles,
@@ -852,7 +1023,7 @@ const Heading = (_a) => {
 
 const FormComponent = ({ styles, className, classNames, fillInfo, popoverProps, submitProps, }) => {
     var _a;
-    const { primaryColor } = useContext(LeadGenContext);
+    const { primaryColor } = useContext(LeadGenContext$1);
     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',
@@ -1129,6 +1300,7 @@ var enPH = {
 	"validator.min": "jQuery.validator.format('Please enter a value greater than or equal to {0}.",
 	"validator.emailUsed": "Email already in use for this campaign.",
 	"validator.phoneUsed": "Your phone number already in use for this campaign.",
+	"validator.dateInvalid": "This date is not valid, please update.",
 	"lead.otp.title": "Enter OTP",
 	"lead.otp.desc": "We have sent an OTP to your mobile number {phone}",
 	"lead.otp.verify": "Verify",
@@ -1137,7 +1309,10 @@ var enPH = {
 	"lead.otp.phonePlaceholder": "Enter OTP",
 	"lead.empty.title": "Oops, seem your information is empty, do you want to submit the information again?",
 	"lead.empty.cancel": "Cancel",
-	"lead.empty.submitAgain": "Submit again"
+	"lead.empty.submitAgain": "Submit again",
+	"common.day": "Day",
+	"common.month": "Month",
+	"common.year": "Year"
 };
 
 var hiIN = {
@@ -1148,6 +1323,7 @@ var hiIN = {
 	"validator.maxlength": "कृपया {0} अक्षर से अधिक दर्ज न करें",
 	"validator.minlength": "कृपया कम से कम {0} अक्षर दर्ज करें",
 	"validator.phone": "कृपया एक वैध संख्या दर्ज करें",
+	"validator.dateInvalid": "यह तिथि मान्य नहीं है, कृपया अपडेट करें।",
 	"validator.emailUsed": "Email already in use for this campaign.",
 	"validator.phoneUsed": "Your phone number already in use for this campaign.",
 	"lead.otp.title": "Enter OTP",
@@ -1156,7 +1332,10 @@ var hiIN = {
 	"lead.otp.resend": "Resend OTP{timer}",
 	"lead.empty.title": "ऊप्स! लगता है आपकी जानकारी खाली है। क्या आप जानकारी फिर से सबमिट करना चाहते हैं?",
 	"lead.empty.cancel": "रद्द करें",
-	"lead.empty.submitAgain": "फिर से सबमिट करें"
+	"lead.empty.submitAgain": "फिर से सबमिट करें",
+	"common.day": "साल",
+	"common.month": "महीना",
+	"common.year": ""
 };
 
 var idID = {
@@ -1169,6 +1348,7 @@ var idID = {
 	"validator.phone": "Tolong daftarkan nomor telepon yang valid",
 	"validator.emailUsed": "Email sudah digunakan untuk kampanye ini.",
 	"validator.phoneUsed": "Nomor telepon Anda sudah digunakan untuk kampanye ini.",
+	"validator.dateInvalid": "Tanggal ini tidak valid, silakan perbarui",
 	"lead.otp.title": "Masukkan OTP",
 	"lead.otp.desc": "Kami telah mengirimkan OTP ke nomor ponsel Anda {phone}",
 	"lead.otp.verify": "Verifikasi",
@@ -1177,7 +1357,10 @@ var idID = {
 	"lead.otp.phonePlaceholder": "Masukkan OTP",
 	"lead.empty.title": "Oops, sepertinya informasi Anda kosong. Apakah Anda ingin mengirimkan informasi lagi?",
 	"lead.empty.cancel": "Batal",
-	"lead.empty.submitAgain": "Kirim lagi"
+	"lead.empty.submitAgain": "Kirim lagi",
+	"common.day": "Hari",
+	"common.month": "Bulan",
+	"common.year": "Tahun"
 };
 
 var kmKH = {
@@ -1190,6 +1373,7 @@ var kmKH = {
 	"validator.phone": "សូម​វាយបញ្ចូល​លេខ​ឲ្យ​បាន​ត្រឹមត្រូវ",
 	"validator.emailUsed": "អ៊ីមែលត្រូវបានប្រើប្រាស់សម្រាប់យុទ្ធនាការនេះរួចហើយ។",
 	"validator.phoneUsed": "លេខទូរស័ព្ទរបស់អ្នកត្រូវបានប្រើប្រាស់សម្រាប់យុទ្ធនាការនេះរួចហើយ។",
+	"validator.dateInvalid": "កាលបរិច្ឆេទនេះមិនត្រឹមត្រូវទេ សូមធ្វើបច្ចុប្បន្នភាព។",
 	"lead.otp.title": "បញ្ចូល OTP",
 	"lead.otp.desc": "យើងបានផ្ញើ OTP ទៅកាន់លេខទូរសព្ទរបស់អ្នក {phone}",
 	"lead.otp.verify": "ផ្ទៀងផ្ទាត់",
@@ -1198,7 +1382,10 @@ var kmKH = {
 	"lead.otp.phonePlaceholder": "បញ្ចូល OTP",
 	"lead.empty.title": "អូុបស! ហាក់ដូចជាព័ត៌មានរបស់អ្នកទទេ។ តើអ្នកចង់ដាក់ស្នើព័ត៌មានម្តងទៀតទេ?",
 	"lead.empty.cancel": "លុប​ចោល",
-	"lead.empty.submitAgain": "ដាក់ស្នើម្ដងទៀត"
+	"lead.empty.submitAgain": "ដាក់ស្នើម្ដងទៀត",
+	"common.day": "ឆ្នាំ",
+	"common.month": "ខែ",
+	"common.year": "ថ្ងៃ"
 };
 
 var msMY = {
@@ -1211,6 +1398,7 @@ var msMY = {
 	"validator.phone": "Sila masukkan no telefon yang sah.",
 	"validator.emailUsed": "Emel sudah digunakan untuk kempen ini.",
 	"validator.phoneUsed": "Nombor telefon anda sudah digunakan untuk kempen ini.",
+	"validator.dateInvalid": "Tarikh ini tidak sah, sila kemas kini",
 	"lead.otp.title": "Masukkan OTP",
 	"lead.otp.desc": "Kami telah menghantar OTP ke nombor telefon bimbit anda {phone}",
 	"lead.otp.verify": "Sahkan",
@@ -1219,7 +1407,10 @@ var msMY = {
 	"lead.otp.phonePlaceholder": "Masukkan OTP",
 	"lead.empty.title": "Oops, nampaknya maklumat anda kosong. Adakah anda ingin menghantar maklumat semula?",
 	"lead.empty.cancel": "Batal",
-	"lead.empty.submitAgain": "Hantar semula"
+	"lead.empty.submitAgain": "Hantar semula",
+	"common.day": "Hari",
+	"common.month": "Bulan",
+	"common.year": "Tahun"
 };
 
 var myMM = {
@@ -1232,6 +1423,7 @@ var myMM = {
 	"validator.phone": "မှန်ကန်သော ဖုန်းနံပါတ်ထည့်သွင်းပါ",
 	"validator.emailUsed": "ဤအေကာင့်အတွက် အီးမေးလ်ကို အသုံးပြုပြီးဖြစ်ပါသည်။",
 	"validator.phoneUsed": "ဤအေကာင့်အတွက် သင့်ဖုန်းနံပါတ်ကို အသုံးပြုပြီးဖြစ်ပါသည်။",
+	"validator.dateInvalid": "ယနေ့စွဲမှားနေသည်၊ ကျေးဇူးပြု၍ ပြင်ဆင်ပါ။",
 	"lead.otp.title": "OTP ကိုထည့်ပါ",
 	"lead.otp.desc": "ကျွန်ုပ်တို့သည် OTP ကိုသင့်ဖုန်းနံပါတ် {phone} သို့ပို့ခဲ့သည်",
 	"lead.otp.verify": "အတည်ပြုပါ",
@@ -1240,7 +1432,10 @@ var myMM = {
 	"lead.otp.phonePlaceholder": "OTP ကိုထည့်ပါ",
 	"lead.empty.title": "အုပ်စ်! သင့်အချက်အလက်သည် ဗလာဖြစ်နေသလိုဖြစ်သည်။ ထပ်မံတင်သွင်းလိုပါသလား?",
 	"lead.empty.cancel": "မလုပ်ဆောင်ပါ",
-	"lead.empty.submitAgain": "ထပ်မံတင်သွင်းပါ"
+	"lead.empty.submitAgain": "ထပ်မံတင်သွင်းပါ",
+	"common.day": "ရက်",
+	"common.month": "လ",
+	"common.year": "နှစ်"
 };
 
 var thTH = {
@@ -1253,6 +1448,7 @@ var thTH = {
 	"validator.phone": "กรุณาใส่ตัวเลขที่ถูกต้อง",
 	"validator.emailUsed": "อีเมลนี้ถูกใช้สำหรับแคมเปญนี้แล้ว",
 	"validator.phoneUsed": "หมายเลขโทรศัพท์ของคุณถูกใช้สำหรับแคมเปญนี้แล้ว",
+	"validator.dateInvalid": "วันที่นี้ไม่ถูกต้อง โปรดอัปเดต",
 	"lead.otp.title": "ป้อน OTP",
 	"lead.otp.desc": "เราได้ส่ง OTP ไปยังหมายเลขโทรศัพท์มือถือของคุณ {phone}",
 	"lead.otp.verify": "ยืนยัน",
@@ -1261,7 +1457,10 @@ var thTH = {
 	"lead.otp.phonePlaceholder": "ป้อน OTP",
 	"lead.empty.title": "อุ๊ปส์! ดูเหมือนว่าข้อมูลของคุณว่างเปล่า คุณต้องการส่งข้อมูลอีกครั้งหรือไม่?",
 	"lead.empty.cancel": "ยกเลิก",
-	"lead.empty.submitAgain": "ส่งอีกครั้ง"
+	"lead.empty.submitAgain": "ส่งอีกครั้ง",
+	"common.day": "วัน",
+	"common.month": "เดือน",
+	"common.year": "ปี"
 };
 
 var viVN = {
@@ -1285,6 +1484,7 @@ var viVN = {
 	"validator.phone": "Nhập đúng định dạng số điện thoại",
 	"validator.emailUsed": "Email này đã được sử dụng.",
 	"validator.phoneUsed": "Số điện thoại này đã được sử dụng.",
+	"validator.dateInvalid": "Ngày này không hợp lệ, vui lòng cập nhật.",
 	"lead.otp.title": "Nhập OTP",
 	"lead.otp.desc": "Chúng tôi đã gửi OTP đến số điện thoại của bạn {phone}",
 	"lead.otp.verify": "Xác minh",
@@ -1293,7 +1493,10 @@ var viVN = {
 	"lead.otp.phonePlaceholder": "Nhập OTP",
 	"lead.empty.title": "Oops, có vẻ như thông tin của bạn đang trống. Bạn có muốn gửi lại thông tin không?",
 	"lead.empty.cancel": "Hủy",
-	"lead.empty.submitAgain": "Gửi lại"
+	"lead.empty.submitAgain": "Gửi lại",
+	"common.day": "Ngày",
+	"common.month": "Tháng",
+	"common.year": "Năm"
 };
 
 var zhTW = {
@@ -1306,6 +1509,7 @@ var zhTW = {
 	"validator.phone": "請填入有效的電話號碼",
 	"validator.emailUsed": "此電子郵件已被使用於此活動。",
 	"validator.phoneUsed": "您的手機號碼已被使用於此活動。",
+	"validator.dateInvalid": "此日期無效，請更新.",
 	"lead.otp.title": "輸入 OTP",
 	"lead.otp.desc": "我們已將 OTP 發送到您的手機號碼 {phone}",
 	"lead.otp.verify": "驗證",
@@ -1314,7 +1518,10 @@ var zhTW = {
 	"lead.otp.phonePlaceholder": "輸入 OTP",
 	"lead.empty.title": "哎呀，您的資訊似乎是空的，您想要重新提交資訊嗎？",
 	"lead.empty.cancel": "取消",
-	"lead.empty.submitAgain": "重新提交"
+	"lead.empty.submitAgain": "重新提交",
+	"common.day": "日",
+	"common.month": "月",
+	"common.year": "年"
 };
 
 const translationsMap = {
@@ -1326,165 +1533,1689 @@ const translationsMap = {
     'my-MM': myMM,
     'km-KH': kmKH,
     'zh-TW': zhTW,
+    'zh-CN': zhTW,
     'th-TH': thTH,
     'tl-PH': enPH,
 };
 const getTranslations = (locale) => {
-    const translations = translationsMap[locale];
+    const translations = Object.assign(Object.assign({}, translationsMap$1[locale]), translationsMap[locale]);
     if (translations) {
         return translations;
     }
     return translationsMap['en-PH'];
 };
 
-const useImageSize = (src) => {
-    const [width, setWidth] = useState(16);
-    const [height, setHeight] = useState(9);
-    const [loaded, setLoaded] = useState(false);
-    // load src image to get its width and height
-    useEffect(() => {
-        setLoaded(false);
-        if (src) {
-            const img = new Image();
-            img.addEventListener('load', () => {
-                setWidth(img.naturalWidth);
-                setHeight(img.naturalHeight);
-                setLoaded(true);
-            });
-            img.addEventListener('error', () => {
-                setWidth(16);
-                setHeight(9);
-                setLoaded(true);
-            });
-            img.src = src;
-        }
-        else {
-            setWidth(16);
-            setHeight(9);
-            setLoaded(true);
-        }
-    }, [src]);
-    return {
-        loaded,
-        width,
-        height,
-    };
-};
-
-const CloseButton = ({ onClose, containerClassName, svgClassName, }) => (React__default.createElement("button", { onClick: onClose, className: `le-newbuilder-close-button js-modal__close ${containerClassName || ''}` },
-    React__default.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", className: svgClassName },
-        React__default.createElement("path", { d: "M9.99981 10.8432L14.0583 14.9017C14.1691 15.0125 14.3083 15.0691 14.476 15.0717C14.6437 15.0743 14.7854 15.0176 14.9013 14.9017C15.0172 14.7858 15.0752 14.6453 15.0752 14.4802C15.0752 14.3151 15.0172 14.1746 14.9013 14.0587L10.8429 10.0002L14.9013 5.9417C15.0121 5.83094 15.0688 5.69172 15.0713 5.52402C15.0739 5.35634 15.0172 5.21456 14.9013 5.09866C14.7854 4.98276 14.6449 4.9248 14.4798 4.9248C14.3147 4.9248 14.1742 4.98276 14.0583 5.09866L9.99981 9.15712L5.94133 5.09866C5.83057 4.98789 5.69135 4.93122 5.52365 4.92866C5.35598 4.92609 5.21419 4.98276 5.09829 5.09866C4.98239 5.21456 4.92444 5.35506 4.92444 5.52018C4.92444 5.6853 4.98239 5.82581 5.09829 5.9417L9.15675 10.0002L5.09829 14.0587C4.98752 14.1694 4.93085 14.3087 4.9283 14.4763C4.92572 14.644 4.98239 14.7858 5.09829 14.9017C5.21419 15.0176 5.3547 15.0756 5.51982 15.0756C5.68493 15.0756 5.82544 15.0176 5.94133 14.9017L9.99981 10.8432Z" }))));
-
-// url: imageBlocks.imageMobile.data.url
-// newTab: imageBlocks.imageMobile.data.newtab
-// imageMobile: campaignShow.image
-// imageDestkop: campaignShow.image_desktop
-const CenterTabLayout = ({ popupId, url, newTab, imageDestkop, imageMobile, onClose, onOtherSubmit, }) => {
-    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
-    const { width: imageDestkopWidth, height: imageDestkopHeight, loaded: imageDestkopLoaded, } = useImageSize(imageDestkop);
-    if (!imageMobileLoaded || !imageDestkopLoaded)
-        return null;
-    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "center_tab" },
-        React__default.createElement("div", { className: "le-center-tab-popup" },
-            React__default.createElement("div", { style: { position: 'relative' } },
-                React__default.createElement("a", { className: "js-popup-other-submit", href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
-                    isVideo(imageMobile) ? (React__default.createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-mobile" },
-                        React__default.createElement("source", { src: imageMobile }))) : (React__default.createElement("img", { className: "le-only-mobile", src: imageMobile, style: {
-                            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
-                        } })),
-                    isVideo(imageDestkop) ? (React__default.createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-desktop" },
-                        React__default.createElement("source", { src: imageDestkop }))) : (React__default.createElement("img", { className: "le-only-desktop", src: imageDestkop, style: {
-                            aspectRatio: `${imageDestkopWidth}/${imageDestkopHeight}`,
-                        } }))),
-                React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))));
-};
-
-// title: titleText
-// titleAlign: textBlocks.titleBlock.data.align
-// subtitle: textBlocks.subtitleBlock.data.value
-// subtitleAlign: textBlocks.subtitleBlock.data.align
-// url: actionBlocks.linkButtonBlock.data.url
-// urlText: actionBlocks.linkButtonBlock.data.value
-// newTab: actionBlocks.linkButtonBlock.data.newtab
-// imageMobile: campaignShow.image
-// imageDesktop: campaignShow.image_desktop
-const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, subtitleAlign, newTab, imageDesktop, imageMobile, onClose, onOtherSubmit, }) => {
-    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
-    const { width: imageDesktopWidth, height: imageDesktopHeight, loaded: imageDesktopLoaded, } = useImageSize(imageDesktop);
-    if (!imageMobileLoaded || !imageDesktopLoaded)
-        return null;
-    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper lead-floating-wrapper", "data-popup-url": location.pathname, "data-popup-type": "floating" },
-        React__default.createElement("aside", { className: "le-only-desktop" },
-            React__default.createElement("div", { className: "le-floating-desktop" },
-                React__default.createElement("div", { className: "le-floating-desktop-wrap", style: { position: 'relative', background: '#fff' } },
-                    imageDesktop ? (React__default.createElement("div", null,
-                        React__default.createElement("img", { style: {
-                                maxWidth: 120,
-                                borderTopLeftRadius: 5,
-                                borderBottomLeftRadius: 5,
-                                aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
-                            }, src: imageDesktop }))) : null,
-                    React__default.createElement("div", { style: { padding: 20 } },
-                        React__default.createElement("div", { className: `le-floating-desktop-title le-text-align-${titleAlign}` }, title),
-                        React__default.createElement("div", { className: `le-floating-desktop-desc le-text-align-${subtitleAlign}` }, subtitle)),
-                    React__default.createElement("a", { target: newTab ? 'blank' : '_parent', style: { marginLeft: 35, textDecoration: 'none' }, href: url },
-                        React__default.createElement("button", { className: "le-joinbow-floating-btn js-popup-other-submit", onClick: onOtherSubmit }, urlText)),
-                    React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))),
-        React__default.createElement("aside", { className: "le-only-mobile" },
-            React__default.createElement("div", { className: "le-floating-mobile" },
-                React__default.createElement("div", { className: "le-floating-mobile-wrap", style: { position: 'relative', background: '#fff' } },
-                    React__default.createElement("aside", { style: { display: 'flex', justifyContent: 'space-between' } },
-                        React__default.createElement("div", null,
-                            React__default.createElement("div", { className: `le-floating-mobile-title le-text-align-${titleAlign}` }, title),
-                            React__default.createElement("div", { className: `le-floating-mobile-desc le-text-align-${subtitleAlign}` }, subtitle)),
-                        imageMobile ? (React__default.createElement("div", null,
-                            React__default.createElement("img", { style: {
-                                    marginLeft: 15,
-                                    marginTop: 4,
-                                    maxWidth: 100,
-                                    aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
-                                }, src: imageMobile }))) : null),
-                    React__default.createElement("div", { style: { textAlign: 'center', marginTop: 10 } },
-                        React__default.createElement("a", { target: newTab ? 'blank' : '_parent', href: url, style: { textDecoration: 'none' } },
-                            React__default.createElement("button", { className: "le-joinbow-floating-btn js-popup-other-submit", onClick: onOtherSubmit }, urlText))),
-                    React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
+const LeadGenTranslationProvider = (props) => {
+    const { locale, children } = props;
+    const translationContextValue = useMemo(() => ({ locale, values: getTranslations(locale) }), [locale]);
+    return (React__default.createElement(TranslationsContext.Provider, { value: translationContextValue }, children));
 };
 
-const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
-    const { primaryColor } = useContext(LeadGenContext);
-    const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
-    if (!imageLoaded)
+// import mockLeadData from './mockLeadData'
+const listCampaignScheduled = [];
+const listCampaignScheduledToActivated = [];
+const listCampaignActiveButExpired = [];
+const listCampaignExcludeSonsored = [];
+const listCampaignDifferentSponsor = [];
+const listCampaignNotDisplayInRangeOfTime = [];
+function isMobile() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent);
+}
+const getShuffleArray = (array) => {
+    const newArray = [...array];
+    for (let i = newArray.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        const temp = newArray[i];
+        newArray[i] = newArray[j];
+        newArray[j] = temp;
+    }
+    return newArray;
+};
+const getTimeByTimezone = (timeZone = 'UTC') => {
+    const date = new Date();
+    return new Date(date.toLocaleString('en-US', { timeZone }));
+};
+const parseDateByCampaignTime = (dateStr) => {
+    // Format like this: 2023-04-04 00:00:00
+    try {
+        const [datePart, timePart] = dateStr.split(' ');
+        const [year, month, day] = datePart.split('-').map(Number);
+        const [hours, minutes, seconds] = timePart.split(':').map(Number);
+        /** JavaScript counts months from 0 to 11 */
+        return new Date(year, month - 1, day, hours, minutes, seconds);
+    }
+    catch (err) {
         return null;
-    return (React__default.createElement("div", { className: "lead-modal__thank-you leadgen-inner_thankyou" },
-        React__default.createElement("div", { style: { width: '100%' } },
-            React__default.createElement("img", { src: image, style: {
-                    maxHeight: 162,
-                    objectFit: 'cover',
-                    aspectRatio: `${imageWidth}/${imageHeight}`,
-                }, loading: "lazy" }),
-            title && (React__default.createElement("h1", { className: `le-thankyou-title le-text-align-${titleAlign}` }, title)),
-            subtitle && (React__default.createElement("p", { className: `le-thankyou-subtitle le-text-align-${subtitleAlign}` }, subtitle.split('\n').map((text, idx, list) => {
-                const isShowBr = idx < list.length - 1;
-                return (React__default.createElement(React__default.Fragment, null,
-                    text,
-                    isShowBr && React__default.createElement("br", null)));
-            }))),
-            linkText && (React__default.createElement("div", null,
-                React__default.createElement("a", { href: link, target: linkNewTab ? '_blank' : 'parrent', rel: "noreferrer" },
-                    React__default.createElement(Button, { className: `lead-modal__btn ${LEAD_CLASS}`, color: primaryColor }, linkText)))))));
-};
-
-const InlineLayout = ({ content, inlinePosition, }) => {
-    const target = useMemo(() => {
-        if (!inlinePosition)
-            return null;
-        const parents = document.querySelectorAll(`[data-url="${location.pathname}"] .body-content`);
-        const allChildren = Array.from(parents).reduce((r, p) => {
-            return [...r, ...Array.from(p.children)];
-        }, []);
-        if (allChildren === null || allChildren === void 0 ? void 0 : allChildren.length) {
-            // find the third p tag in the body content, some other tags might mix in between
-            const allPTags = allChildren.filter((c) => c.nodeName === 'P');
+    }
+};
+const checkCampaignNowInTimeframe = (c) => {
+    var _a;
+    const siteId = ((_a = c.site) === null || _a === void 0 ? void 0 : _a.id) || 1;
+    const startedAtStr = c.started_at;
+    const endedAtStr = c.ended_at;
+    const startedDate = parseDateByCampaignTime(startedAtStr);
+    const endedDate = parseDateByCampaignTime(endedAtStr);
+    if (!startedDate || !endedDate) {
+        return false;
+    }
+    const timeZone = LEAD_TIMEZONE_DATA[siteId];
+    const nowWithTimezoneMs = getTimeByTimezone(timeZone).getTime();
+    if (nowWithTimezoneMs <= endedDate.getTime() &&
+        nowWithTimezoneMs >= startedDate.getTime()) {
+        listCampaignScheduledToActivated.push(c);
+        return true;
+    }
+    return false;
+};
+function checkCampaignActiveButExpireAlready(c) {
+    var _a;
+    /** Do not setup timeframe for this campaign. No need to check */
+    if (c.forever === 1) {
+        return true;
+    }
+    const startedAtStr = c.started_at;
+    const endedAtStr = c.ended_at;
+    const startedDate = parseDateByCampaignTime(startedAtStr);
+    const endedDate = parseDateByCampaignTime(endedAtStr);
+    /** Do not setup timeframe for this campaign. No need to check */
+    if (!startedDate || !endedDate) {
+        return true;
+    }
+    const siteId = ((_a = c.site) === null || _a === void 0 ? void 0 : _a.id) || 1;
+    const timeZone = LEAD_TIMEZONE_DATA[siteId];
+    const nowWithTimezoneMs = getTimeByTimezone(timeZone).getTime();
+    /** Check if this expire already, do not show */
+    if (nowWithTimezoneMs > endedDate.getTime()) {
+        listCampaignActiveButExpired.push(c);
+        return false;
+    }
+    return true;
+}
+function shouldNotDisplayIfExcludeAllSponsors(c) {
+    var _a;
+    const excludeSponsored = Number((_a = c.rules.find((i) => i.rule == 'exclude_sponsored')) === null || _a === void 0 ? void 0 : _a.value);
+    const isSponsored = Boolean(document.querySelector('.hhg-disclaimer-text'));
+    if (isSponsored && excludeSponsored) {
+        listCampaignExcludeSonsored.push(c);
+        return true;
+    }
+    return false;
+}
+function shouldDisplayWithCurrentSponsor(c) {
+    var _a, _b;
+    try {
+        // TODO: BE will rename `exclude_sponsored_list` later
+        const stringOrArray = (_a = c.rules.find((i) => i.rule == 'exclude_sponsored_list')) === null || _a === void 0 ? void 0 : _a.value;
+        const whiteListSponsors = stringOrArray instanceof Array ? stringOrArray : JSON.parse(stringOrArray);
+        const dataSponsoredId = Number((_b = document
+            .querySelector('[data-sponsored-id]')) === null || _b === void 0 ? void 0 : _b.getAttribute('data-sponsored-id'));
+        // There is no config for sponsor id and white list, should show as default
+        if (!dataSponsoredId ||
+            dataSponsoredId <= 0 ||
+            whiteListSponsors.length === 0) {
+            return true;
+        }
+        // Check the dataSponsoredId exists in the white list or not.
+        const isExist = whiteListSponsors.find((s) => s.id == dataSponsoredId);
+        if (isExist) {
+            return true;
+        }
+        listCampaignDifferentSponsor.push({ id: c.id, rules: c.rules });
+        return false;
+    }
+    catch (err) {
+        // Default is show
+        return true;
+    }
+}
+const filterFnCampaign = (c) => {
+    if (shouldNotDisplayIfExcludeAllSponsors(c)) {
+        return false;
+    }
+    else if (!shouldDisplayWithCurrentSponsor(c)) {
+        return false;
+    }
+    /** Active */
+    if (c.formatted_status === 1) {
+        return checkCampaignActiveButExpireAlready(c);
+    }
+    /** Schedule */
+    if (c.formatted_status === 0) {
+        listCampaignScheduled.push(c);
+        return checkCampaignNowInTimeframe(c);
+    }
+    return false;
+};
+const fillterApprearanceTimeCampaign = (c) => {
+    var _a;
+    try {
+        const isTimeInRange = (currentTime, startTime, endTime) => {
+            const startParts = startTime.split(':');
+            const endParts = endTime.split(':');
+            const startDate = new Date();
+            startDate.setHours(Number(startParts[0]), Number(startParts[1]), 0, 0);
+            const endDate = new Date();
+            endDate.setHours(Number(endParts[0]), Number(endParts[1]), 0, 0);
+            return currentTime >= startDate && currentTime <= endDate;
+        };
+        const rulesApprValue = (_a = c.rules.find((i) => i.rule == 'appearance_time')) === null || _a === void 0 ? void 0 : _a.value;
+        const startTime = rulesApprValue.startTime;
+        const endTime = rulesApprValue.endTime || '23:59';
+        if (!startTime) {
+            return true;
+        }
+        if (isTimeInRange(new Date(), startTime, endTime)) {
+            return true;
+        }
+        listCampaignNotDisplayInRangeOfTime.push(c);
+        return false;
+    }
+    catch (err) {
+        return true;
+    }
+};
+let timeoutRef = null;
+let LEAD_SCROLL_EVENT = null;
+function clearPassiveEvent() {
+    if (timeoutRef) {
+        clearTimeout(timeoutRef);
+        timeoutRef = null;
+    }
+    if (LEAD_SCROLL_EVENT) {
+        window.removeEventListener('scroll', LEAD_SCROLL_EVENT);
+        LEAD_SCROLL_EVENT = null;
+    }
+}
+function checkShowPopup({ leadApi, leadSiteId, leadDomain, onShowPopup, DEBUG_URL, }) {
+    // clear previous passive event, check for new condition
+    clearPassiveEvent();
+    const leadCurrentUrl = DEBUG_URL ||
+        ('https://' +
+            location.hostname +
+            location.pathname +
+            location.search).toLowerCase();
+    fetch(leadApi + 'api/campaign/' + leadSiteId, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            url: leadCurrentUrl,
+            ga_client_id: getCookie('_ga') || null,
+        }),
+    })
+        .then((response) => {
+        return response.json();
+        // return mockLeadData || response.json()
+    })
+        .then((data) => {
+        var _a, _b, _c, _d;
+        LeadLog('List campagin: ', data);
+        LEAD_RESET_VAR();
+        if (data._status == 1) {
+            const campaigns = (((_b = (_a = data._data) === null || _a === void 0 ? void 0 : _a.campaigns) === null || _b === void 0 ? void 0 : _b.filter(filterFnCampaign)) || []).filter(fillterApprearanceTimeCampaign);
+            if (!getCookie('hhg-id')) {
+                setCookie('hhg-id', v1(), {
+                    domain: '.' + leadDomain,
+                    path: '/',
+                });
+                LeadLog('😍 Set HHG ID cookie');
+            }
+            // getCookie('hhg-id')
+            // TODO: HP-534 Filter desktop
+            let campaignsDevice = [];
+            if (isMobile()) {
+                campaignsDevice = campaigns.filter((c) => c.device_types.some((d) => d.id == LEAD_DEVICE_TYPE.MOBILE));
+            }
+            else {
+                campaignsDevice = campaigns.filter((c) => c.device_types.some((d) => d.id == LEAD_DEVICE_TYPE.DESKTOP));
+            }
+            LeadLog(`👓 campaignsDevice`, campaignsDevice);
+            LeadLog('--listCampaignScheduled', listCampaignScheduled);
+            LeadLog('--listCampaignScheduledToActivated', listCampaignScheduledToActivated);
+            LeadLog('--listCampaignActiveButExpired', listCampaignActiveButExpired);
+            LeadLog('--listCampaignExcludeSonsored', listCampaignExcludeSonsored);
+            LeadLog('--listCampaignDifferentSponsor', listCampaignDifferentSponsor);
+            LeadLog('--listCampaignNotDisplayInRangeOfTime', listCampaignNotDisplayInRangeOfTime);
+            // Check links
+            let listLinksObj = campaignsDevice
+                .map((i, index) => i.targets
+                .filter((i) => i.type == CAMPAIGN_TARGET_TYPE.LINKS)
+                .map((i) => (Object.assign(Object.assign({}, i), { campaignIndex: index }))))
+                .flat(1);
+            // Check list link match current href
+            listLinksObj = listLinksObj.filter((i) => {
+                var _a;
+                const target = new URL(String(i.target).toLowerCase());
+                if (i.option == 'exact_match')
+                    // FOR TEST LOCAL:
+                    // return Boolean(location.pathname === target.pathname)
+                    return Boolean(leadCurrentUrl === ((_a = target.href) === null || _a === void 0 ? void 0 : _a.toLowerCase()));
+                if (i.option == 'start_with') {
+                    // FOR TEST LOCAL:
+                    // if (location.pathname.includes(target.pathname)) {
+                    if (leadCurrentUrl.includes(String(i.target).toLowerCase())) {
+                        const listExcluding = i.sub_target
+                            .filter((i) => i.option == 'excluding')
+                            .map((i) => { var _a; return (_a = i.value) === null || _a === void 0 ? void 0 : _a.toLowerCase(); });
+                        return !listExcluding.includes(leadCurrentUrl.split('?')[0]);
+                    }
+                    else {
+                        return false;
+                    }
+                }
+            });
+            // Check tags
+            const listMetaTag = Array.from(document.getElementsByTagName('META')).filter((i) => i.getAttribute('property') == 'article:tag');
+            const listTags = listMetaTag.map((i) => i.content);
+            let listCampaignHasTag = [];
+            let listTagsObj = [];
+            if (listTags && listTags.length) {
+                listCampaignHasTag = campaignsDevice
+                    .map((i, index) => i.targets
+                    .filter((i) => i.type == CAMPAIGN_TARGET_TYPE.TAGS)
+                    .map((i) => (Object.assign(Object.assign({}, i), { campaignIndex: index }))))
+                    .flat(1);
+                listTagsObj = listCampaignHasTag.filter((i) => listTags.includes(i.target));
+            }
+            const listCampaginsMatch = [...listLinksObj, ...listTagsObj];
+            const cookieKeys = document.cookie
+                .split('; ')
+                .map((i) => i.split('=')[0]);
+            const listCampaignCodeSubmited = cookieKeys.filter((i) => i.includes('lead_submited'));
+            LeadLog(`--listCampaignCodeSubmited`, listCampaignCodeSubmited);
+            const listCampaignCodeClosed = cookieKeys.filter((i) => i.includes('lead_closed'));
+            LeadLog(`--listCampaignCodeClosed`, listCampaignCodeClosed);
+            const listCampaignSubmitedClosed = [
+                ...listCampaignCodeSubmited,
+                ...listCampaignCodeClosed,
+            ];
+            const listCampaignNoSubmitedClosed = listCampaginsMatch.filter((i) => {
+                const hasSubmited = listCampaignSubmitedClosed.some((k) => k.includes(campaignsDevice[i.campaignIndex].code));
+                return !hasSubmited;
+            });
+            const listCampaignValid = getShuffleArray(listCampaignNoSubmitedClosed);
+            // .sort(
+            //   (a, b) =>
+            //     (listCampaignValid[a.campaignIndex]?.score || 0) -
+            //     (listCampaignValid[b.campaignIndex]?.score || 0),
+            // )
+            LeadLog('--listCampaignValid : ', listCampaignValid);
+            if (listCampaignValid && listCampaignValid.length) {
+                const CAMPAIGN_SHOW = campaignsDevice[listCampaignValid[0].campaignIndex];
+                LeadLog(`CAMPAIGN_SHOW`, CAMPAIGN_SHOW);
+                const { rules } = CAMPAIGN_SHOW;
+                // CHECK RULE TRIGGER POPUP
+                const timeoutRule = Number((_c = rules.find((i) => i.rule == 'time')) === null || _c === void 0 ? void 0 : _c.value);
+                LeadLog(`timeoutRule`, timeoutRule);
+                const scrollRule = Number((_d = rules.find((i) => i.rule == 'scroll')) === null || _d === void 0 ? void 0 : _d.value);
+                LeadLog(`scrollRule`, scrollRule);
+                let impressionAction = 'TIME';
+                if (Number.isInteger(timeoutRule)) {
+                    impressionAction = 'TIME';
+                    LeadLog('✨ SHOW AWESOME POPUP AFTER: ', timeoutRule, ' seconds');
+                    timeoutRef = setTimeout(() => {
+                        onShowPopup === null || onShowPopup === void 0 ? void 0 : onShowPopup(CAMPAIGN_SHOW, impressionAction);
+                    }, timeoutRule * 1000);
+                }
+                if (Number.isInteger(scrollRule)) {
+                    impressionAction = 'SCROLL';
+                    LeadLog('✨ SHOW AWESOME AFTER: SCROLL', scrollRule, ' %');
+                    const $p = document.querySelector(`[data-url="${location.pathname}"]`) ||
+                        document.querySelector('body');
+                    const pct = $p.getBoundingClientRect().top;
+                    const pb = $p.offsetHeight;
+                    LeadLog(`👓 Element check scroll: `, $p);
+                    LEAD_SCROLL_EVENT = function leadScollCheckHandler() {
+                        const wt = window.pageYOffset || document.documentElement.scrollTop;
+                        let percent = 0;
+                        if (wt >= pct) {
+                            percent = Math.round(((wt - pct) / (pb - innerHeight)) * 100);
+                        }
+                        LeadLog('---Scroll', percent, scrollRule);
+                        // TODO: CHECK FOOTER HEIGHT
+                        if (percent >= scrollRule) {
+                            window.removeEventListener('scroll', LEAD_SCROLL_EVENT);
+                            onShowPopup === null || onShowPopup === void 0 ? void 0 : onShowPopup(CAMPAIGN_SHOW, impressionAction);
+                        }
+                    };
+                    window.addEventListener('scroll', LEAD_SCROLL_EVENT, {
+                        passive: true,
+                    });
+                }
+            }
+            else {
+                LeadLog('🚧 No lead campaigns on current URL, tags');
+            }
+        }
+    })
+        .catch((err) => {
+        LeadLog(`Lead error: `, err);
+    });
+}
+const LeadLog = (...params) => {
+    if (process.env.NODE_ENV !== 'production' ||
+        (process.env.NEXT_PUBLIC_DEPLOY_ENV &&
+            process.env.NEXT_PUBLIC_DEPLOY_ENV !== 'production') ||
+        (typeof localStorage !== 'undefined' &&
+            localStorage.getItem('hhg_debug') === 'true')) {
+        console.log(...params);
+    }
+};
+
+const LeadGenContext = createContext({
+    submit(value) {
+        /** Init for FAKING function */
+        LeadLog('** LeadGen Submit : ', value);
+        return Promise.reject(value);
+    },
+    submitSubscriptionBox(value) {
+        /** Init for FAKING function */
+        LeadLog('** LeadGen SubmitSubscriptionBox : ', value);
+        return Promise.reject(value);
+    },
+    impression(value) {
+        /** Init for FAKING function */
+        LeadLog('** LeadGen Impression : ', value);
+        return Promise.reject(value);
+    },
+    /** For Subscription Box */
+    subscriptionIcon: '',
+    subscriptionTitle: '',
+});
+const LeadGenContextProvider = (props) => {
+    const { campaign_code: campaignCodeProps, apiSsoUrl, apiLeadUrl, apiSubotUrl, locale: localeProps, forceCampaign: forceCampaignProps, extraValues, articleId = 1, categoryId = 1, siteDomain: site_domain, children, } = props;
+    const [forceCampaign, setForceCampaign] = useState(forceCampaignProps);
+    const [subscriptionInfo, setSubscriptionInfo] = useState({
+        subscriptionIcon: '',
+        subscriptionTitle: '',
+    });
+    const locale = useMemo(() => {
+        return localeProps || LOCALE['PhilippinesEnglish'];
+    }, [localeProps]);
+    const leadGenContextValue = useMemo(() => (Object.assign(Object.assign({}, props), { forceCampaign })), [...Object.values(props), forceCampaign]);
+    const { url, campaign_id, campaign_code, cookie_id, ga_client_id, category_id, article_id, article_title, } = useMemo(() => ({
+        url: location.href.toLowerCase() || '',
+        cookie_id: getCookie('hhg-id') || null,
+        ga_client_id: getCookie('_ga'),
+        campaign_id: forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id,
+        campaign_code: campaignCodeProps || (forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.code),
+        category_id: categoryId,
+        article_id: articleId,
+        article_title: document.title || '',
+    }), [campaignCodeProps, articleId, categoryId, forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id]);
+    const fetchCampaign = useCallback((campaign_code) => {
+        Service.getCampaignByCode(campaign_code).then((res) => {
+            const { _data } = res || {};
+            const { campaigns } = _data || {};
+            LeadLog('** LeadGen Campaign : ', campaigns);
+            setForceCampaign(formatCampaignDetail(campaigns));
+        });
+    }, [campaignCodeProps]);
+    // TODO : Update form for LeadGen
+    const submit = useCallback((data) => {
+        return Service.postSubscriptionBoxLead({ data });
+    }, []);
+    const submitSubscriptionBox = useCallback((value) => {
+        const data = Object.assign(Object.assign(Object.assign(Object.assign({}, value), { campaign_id,
+            site_domain, url: (value === null || value === void 0 ? void 0 : value.url) || url, ga_client_id: (value === null || value === void 0 ? void 0 : value.ga_client_id) || ga_client_id }), extraValues), { article_id,
+            category_id, article_title: (extraValues === null || extraValues === void 0 ? void 0 : extraValues.article_title) || article_title });
+        return Service.postSubscriptionBoxLead({ data });
+    }, [
+        extraValues,
+        site_domain,
+        campaign_id,
+        article_id,
+        article_title,
+        category_id,
+        url,
+        ga_client_id,
+    ]);
+    const impression = useCallback((value) => {
+        return Service.campaignPostImpression({
+            url: (value === null || value === void 0 ? void 0 : value.url) || url,
+            action: (value === null || value === void 0 ? void 0 : value.action) || LEADGEN_ACTIONS.SCROLL,
+            code: (value === null || value === void 0 ? void 0 : value.code) || campaign_code,
+            title_article: (value === null || value === void 0 ? void 0 : value.title_article) || article_title,
+            cookie_id: (value === null || value === void 0 ? void 0 : value.cookie_id) || cookie_id,
+            ga_client_id: (value === null || value === void 0 ? void 0 : value.ga_client_id) || ga_client_id,
+            extra: (value === null || value === void 0 ? void 0 : value.extra) || Object.assign({ cookie_id,
+                article_id, subscription_title: subscriptionInfo.subscriptionTitle }, extraValues),
+            referrer: value === null || value === void 0 ? void 0 : value.referrer,
+        });
+    }, [
+        extraValues,
+        campaign_id,
+        url,
+        campaign_code,
+        article_title,
+        cookie_id,
+        ga_client_id,
+        article_id,
+        subscriptionInfo.subscriptionTitle,
+    ]);
+    useEffect(() => {
+        if (forceCampaignProps) {
+            setForceCampaign(forceCampaignProps);
+            return;
+        }
+        /** For Subscription Box */
+        if (categoryId) {
+            Service.getSubscriptionBoxInfo({
+                category: categoryId,
+                site: site_domain,
+            }).then((res) => {
+                const { _data } = res || {};
+                const { item, campaign_code } = _data || {};
+                const { icon, content } = item || {};
+                LeadLog('** LeadGen SubscriptionBox campaign_code : ', campaign_code);
+                LeadLog('** LeadGen SubscriptionBox subscription_icon : ', icon);
+                LeadLog('** LeadGen SubscriptionBox subscription_title : ', content);
+                setSubscriptionInfo({
+                    subscriptionIcon: icon,
+                    subscriptionTitle: content,
+                });
+                if (campaign_code) {
+                    fetchCampaign(campaign_code);
+                }
+            });
+            return;
+        }
+        if (campaignCodeProps) {
+            fetchCampaign(campaignCodeProps);
+        }
+    }, [campaignCodeProps, categoryId]);
+    useEffect(() => {
+        leadStore.apiSsoUrl = apiSsoUrl;
+        leadStore.apiLeadUrl = apiLeadUrl;
+        leadStore.apiSubotUrl = apiSubotUrl;
+    }, [apiLeadUrl, apiSubotUrl, apiSsoUrl]);
+    if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
+        return null;
+    }
+    return (React__default.createElement(LeadGenContext.Provider, { value: Object.assign(Object.assign(Object.assign({}, leadGenContextValue), subscriptionInfo), { submit,
+            submitSubscriptionBox,
+            impression }) },
+        React__default.createElement(LeadGenTranslationProvider, { locale: locale }, children)));
+};
+const useLeadGenContext = () => {
+    const context = useContext(LeadGenContext);
+    return Object.assign(Object.assign({}, context), { apiLeadUrl: context.apiLeadUrl || leadStore.apiLeadUrl, apiSubotUrl: context.apiSubotUrl || leadStore.apiSubotUrl });
+};
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const customParseFormat = require('dayjs/plugin/customParseFormat');
+dayjs.extend(customParseFormat);
+// You can give context variables any name
+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 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(() => {
+        const InputBlocks = [
+            'TextBlock',
+            'NumberBlock',
+            'EmailBlock',
+            'PhoneBlock',
+            'DateBlock',
+            'CheckboxBlock',
+            'RadioBlock',
+            'DropdownBlock',
+            'PhoneOtpBlock',
+            'WhatsappOtpBlock',
+            'ZaloOtpBlock',
+            'LocationBlock',
+            'TncBlock',
+        ];
+        // ALL are required and can skip if not touched yet
+        const withSharedCheck = (name, cb, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        block) => {
+            return (value) => {
+                var _a;
+                const isBLockRequired = (_a = block === null || block === void 0 ? void 0 : block.data) === null || _a === void 0 ? void 0 : _a.required;
+                if (!formRef.current.isTouched(name))
+                    return;
+                if ((typeof value === 'string' && value.trim() === '') ||
+                    typeof value === 'undefined' ||
+                    (Array.isArray(value) && value.length === 0)) {
+                    return isBLockRequired
+                        ? t('validator.required')
+                        : cb === null || cb === void 0 ? void 0 : cb(value);
+                }
+                return cb === null || cb === void 0 ? void 0 : cb(value);
+            };
+        };
+        return listBlockAdded
+            .filter((b) => InputBlocks.includes(b.name))
+            .reduce((r, b) => {
+            const { name: fieldType, data } = b || {};
+            const { value: fieldName, required } = data || {};
+            const isRequired = required !== null && required !== void 0 ? required : true;
+            if (fieldType === 'NumberBlock') {
+                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
+                        if (value && isNaN(Number(value))) {
+                            return t('validator.number');
+                        }
+                    }, b) });
+            }
+            else if (fieldType === 'EmailBlock') {
+                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
+                        if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                            return t('validator.email');
+                        }
+                        if (!value)
+                            return;
+                        validatingEmailRef.current = true;
+                        setTimeout(() => {
+                            formRef.current.setFieldError(fieldName, 'Validating...');
+                            checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
+                                email: value,
+                            })
+                                .then((tKey) => {
+                                if (tKey) {
+                                    formRef.current.setFieldError(fieldName, t(tKey));
+                                }
+                                else {
+                                    formRef.current.clearFieldError(fieldName);
+                                }
+                                validatingEmailRef.current = false;
+                            })
+                                .catch((e) => {
+                                console.error(e);
+                                formRef.current.setFieldError(fieldName, e.message || 'Something went wrong');
+                                validatingEmailRef.current = false;
+                            });
+                        }, 200);
+                    }, b) });
+            }
+            else if (fieldType === 'PhoneBlock' ||
+                fieldType === 'PhoneOtpBlock' ||
+                fieldType === 'ZaloOtpBlock' ||
+                fieldType === 'WhatsappOtpBlock') {
+                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
+                        if (value &&
+                            window.intlTelInputUtils &&
+                            !window.intlTelInputUtils.isValidNumber(String(value), LEAD_LOCALE.countryCode)) {
+                            return t('validator.phone');
+                        }
+                        if (!value)
+                            return;
+                        validatingPhoneRef.current = true;
+                        setTimeout(() => {
+                            formRef.current.setFieldError(fieldName, 'Validating...');
+                            if (b.data.singleSubmission) {
+                                checkUsedPhoneOnlyWithCache(campaignId, value)
+                                    .then((tKey) => {
+                                    if (tKey) {
+                                        formRef.current.setFieldError(fieldName, t(tKey));
+                                    }
+                                    else {
+                                        formRef.current.clearFieldError(fieldName);
+                                    }
+                                    validatingPhoneRef.current = false;
+                                })
+                                    .catch((err) => {
+                                    console.error(err);
+                                    formRef.current.setFieldError(fieldName, err.message || 'Something went wrong');
+                                    validatingPhoneRef.current = false;
+                                });
+                            }
+                            else {
+                                checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
+                                    phone: value,
+                                })
+                                    .then((tKey) => {
+                                    if (tKey) {
+                                        formRef.current.setFieldError(fieldName, t(tKey));
+                                    }
+                                    else {
+                                        formRef.current.clearFieldError(fieldName);
+                                    }
+                                    validatingPhoneRef.current = false;
+                                })
+                                    .catch((e) => {
+                                    console.error(e);
+                                    formRef.current.setFieldError(fieldName, e.message || 'Something went wrong');
+                                    validatingPhoneRef.current = false;
+                                });
+                            }
+                        }, 200);
+                    }, b) });
+            }
+            else if (fieldType === 'DateBlock') {
+                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, (value) => {
+                        if (!isRequired && !value) {
+                            return;
+                        }
+                        const errMsg = t('validator.dateInvalid');
+                        const dayInJS = typeof value === 'string'
+                            ? dayjs(value, format, true)
+                            : dayjs(value);
+                        if (!dayInJS.isValid()) {
+                            return errMsg;
+                        }
+                    }, b) });
+            }
+            else if (fieldType === 'TncBlock') {
+                return Object.assign(Object.assign({}, r), { [`TNC-` + b.id]: withSharedCheck('TNC-' + b.id, (value) => {
+                        if (isRequired && !value) {
+                            return t('validator.required');
+                        }
+                    }, b) });
+            }
+            else {
+                return Object.assign(Object.assign({}, r), { [fieldName]: withSharedCheck(fieldName, undefined, b) });
+            }
+        }, {});
+    }, [listBlockAdded.map((b) => b.name).join(','), format]);
+    const form = useLeadForm({
+        validateInputOnChange: true,
+        validateInputOnBlur: true,
+        clearInputErrorOnChange: true,
+        validate: validateObj,
+        initialValues,
+    });
+    const formRef = useRef(form);
+    formRef.current = form;
+    return { form, validateObj };
+};
+
+const StyledLeadGenThankYou = styled.div `
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+  padding-block: 24px;
+
+  .leadgen-image {
+    width: 120px;
+    height: 120px;
+    margin-inline: auto;
+    object-fit: contain;
+    object-position: center;
+    text-align: center;
+  }
+
+  .leadgen-title {
+    margin-block: 0;
+    color: ${theme.colors.gray900};
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 28px;
+    letter-spacing: -0.2px;
+  }
+
+  .leadgen-description {
+    margin-block: 0;
+    color: ${theme.colors.gray600};
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    letter-spacing: -0.2px;
+    text-align: center;
+  }
+
+  > [data-align] {
+    &[data-align='right'] {
+      text-align: right;
+    }
+    &[data-align='center'] {
+      text-align: center;
+    }
+  }
+`;
+const LeadGenThankYou = ({ image, title, description, showButton = false, button, className, style, }) => {
+    const { src } = image;
+    const { htmlText: titleText, align: titleAlign } = title;
+    const { htmlText: descriptionText, align: descriptionAlign } = description;
+    const { htmlText: buttonText, newtab, url, onClick } = button;
+    return (React__default.createElement(StyledLeadGenThankYou, { className: className, style: style },
+        React__default.createElement("img", { src: src, alt: "", className: "leadgen-thankyou_image leadgen-image" }),
+        React__default.createElement("p", { className: "leadgen-thankyou_title leadgen-title", "data-align": titleAlign }, titleText),
+        React__default.createElement("p", { className: "leadgen-thankyou_description leadgen-description", "data-align": descriptionAlign }, descriptionText),
+        !!buttonText && showButton && (React__default.createElement(Button$1, { component: url ? 'a' : 'button', target: newtab ? '_blank' : undefined, href: url, size: "lg", variant: "filled", className: "leadgen-thankyoue_btn leadgen-btn", onClick: onClick }, buttonText))));
+};
+
+const StyledLeadGenSubscriptionBoxBody = styled.div `
+  margin-top: 16px;
+  .leadgen-btn {
+    margin-top: 16px;
+  }
+`;
+const StyledLeadGenSubscriptionBoxHeaderImage = styled.div `
+  margin-top: 3px;
+  margin-right: 20px;
+  width: 44px;
+  height: 44px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fix: contain;
+    onject-position: center;
+  }
+
+  :has(img[src='']) {
+    display: none;
+  }
+`;
+const StyledLeadGenSubscriptionBoxHeader = styled.div `
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  .leadgen-title {
+    margin-bottom: 0;
+    flex: 1;
+    min-width: 0;
+    color: ${theme.colors.gray900};
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.4;
+    letter-spacing: -0.8px;
+  }
+`;
+const StyledLeadGenSubscriptionBox = styled.div `
+  padding: 16px;
+  border: 1px solid ${theme.colors.neutral100};
+  border-radius: 12px;
+  margin-inline: auto;
+  .leadgen-form_inputs {
+    .leadgen-form_input {
+      width: 100%;
+    }
+  }
+
+  .leadgen-form_input {
+    .mantine-Input-wrapper {
+      max-height: 56px;
+    }
+  }
+
+  @media screen and (min-width: 768px) {
+    .leadgen-subscription_box_body {
+      display: flex;
+      > form {
+        flex: 1;
+        min-width: 0;
+
+        .leadgen-form_inputs {
+          .leadgen-form_input {
+            width: calc(50% - 4px);
+          }
+        }
+      }
+
+      .leadgen-btn {
+        margin-top: 0;
+        margin-left: 8px;
+        width: auto;
+        min-height: 56px;
+      }
+    }
+  }
+`;
+const StyledLeadGenSubscriptionBoxA = styled.div `
+  .leadgen-form_input {
+    --phone-select: 45px;
+    .PhoneInput {
+      --phone-select: 45px;
+      .PhoneInputCountry {
+        margin-top: 1px;
+        pointer-events: none;
+        .PhoneInputCountryIconImg,
+        .PhoneInputArrowContainer {
+          display: none;
+        }
+      }
+    }
+  }
+`;
+
+const PhoneInput = forwardRef((props, ref) => {
+    const { defaultCountry, id: idProps, name, placeholder, label, labelElement, labelProps, description, descriptionProps, withAsterisk, inputMode, inputContainer, inputWrapperOrder, error, className, classNames, style, styles } = props, restProps = __rest(props, ["defaultCountry", "id", "name", "placeholder", "label", "labelElement", "labelProps", "description", "descriptionProps", "withAsterisk", "inputMode", "inputContainer", "inputWrapperOrder", "error", "className", "classNames", "style", "styles"]);
+    const id = idProps || v1() + name;
+    return (React__default.createElement(Input$1.Wrapper, { size: "md", label: label, labelElement: labelElement, labelProps: Object.assign({ htmlFor: id }, labelProps), description: description, descriptionProps: descriptionProps, withAsterisk: withAsterisk, inputMode: inputMode, inputContainer: inputContainer, inputWrapperOrder: inputWrapperOrder, error: error, "data-invalid": !!error, className: className, classNames: classNames, style: style, styles: styles },
+        React__default.createElement("div", { className: "mantine-Input-wrapper" },
+            React__default.createElement(Phone, Object.assign({}, restProps, { id: id, ref: ref, name: name, spellCheck: false, placeholder: placeholder, defaultCountry: defaultCountry, className: "mantine-Input-input", type: "tel", "data-control": "tel" })))));
+});
+
+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;
+  gap: 8px;
+  .leadgen-form_input {
+    width: calc(50% - 4px);
+  }
+
+  .leadgen-form_input_checkbox {
+    width: 100%;
+  }
+`;
+
+const cssInputNotShrink$1 = css `
+  height: 100% !important;
+  min-height: calc(var(--container-height, 56px) * 22 / 56);
+  color: ${theme.colors.gray800};
+  font-size: var(--input, 16px);
+  line-height: calc(var(--container-height, 56px) * 22 / 56);
+  border: none !important;
+  border-radius: 0 !important;
+  outline: none !important;
+  box-shadow: none !important;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0;
+
+  ::placeholder {
+    color: ${theme.colors.gray400};
+  }
+`;
+const cssInputShrink$1 = css `
+  height: auto !important;
+  cursor: text;
+  opacity: 1;
+  transition: 0.1s ease-in-out all;
+`;
+const cssLabelNotShrink$1 = css `
+  position: absolute;
+  top: calc(var(--container-height) / 2);
+  left: var(--space-x, 16px);
+  color: ${theme.colors.gray400};
+  font-size: var(--label-not-shrink, 16px);
+  font-weight: 400;
+  line-height: calc(var(--container-height, 56px) * 18 / 56);
+  margin: 0;
+  z-index: 1;
+  cursor: pointer;
+  transform: translateY(-50%);
+  transition: 0.125s ease-in all;
+`;
+const cssLabelShrink$1 = css `
+  color: ${theme.colors.gray600};
+  font-weight: 600;
+  font-size: var(--label-shrink, 12px);
+  top: calc(var(--container-height) * 7 / 56);
+  transform: none;
+  transition: 0.125s ease-out all;
+`;
+const cssWrapperInputNotShrink$1 = css `
+  min-height: var(--container-height, 56px);
+  display: flex;
+  align-items: flex-end;
+  border: 1px solid ${theme.colors.gray200};
+  border-radius: 8px;
+  background-color: #fff;
+  padding-inline: var(--space-x, 16px);
+  padding-block: var(--space-y-not-shrink, 16px);
+  cursor: pointer;
+  pointer-events: none;
+
+  &:has(.mantine-Input-rightSection) {
+    padding-right: var(--container-height, 56px);
+  }
+
+  .mantine-Input-icon {
+    display: none;
+  }
+
+  .mantine-NumberInput-control {
+    border-color: ${theme.colors.gray200};
+  }
+`;
+const cssWrapperInputShrink$1 = css `
+  height: auto;
+  min-height: var(--container-height, 56px);
+  padding-block: var(--space-y-shrink, 7px);
+  cursor: text;
+  pointer-events: auto;
+`;
+const cssInputWrapperError$1 = css `
+  color: ${theme.colors.red800};
+  font-size: 12px;
+  line-height: 1.5;
+`;
+const StyledTextFieldContainer$1 = styled.div `
+  --space-x: 16px;
+  --space-y-not-shrink: 16px;
+  --space-y-shrink: 7px;
+  --container-height: 56px;
+  --label-not-shrink: 16px;
+  --label-shrink: 12px;
+  --input: 16px;
+
+  position: relative;
+  min-width: 100px;
+  max-width: 100%;
+  display: inline-block;
+
+  .textField_wrapper {
+    display: inline-block;
+    width: 100%;
+    cursor: pointer;
+  }
+
+  .mantine-InputWrapper-root {
+    &[data-invalid='true'] {
+      .mantine-Input-wrapper {
+        border-color: ${theme.colors.red400};
+      }
+    }
+
+    .mantine-Input-wrapper {
+      &:has([data-invalid]) {
+        border-color: ${theme.colors.red400};
+      }
+    }
+
+    .mantine-InputWrapper-error {
+      font-size: 12px !important;
+    }
+  }
+
+  .mantine-InputWrapper-label {
+    ${cssLabelNotShrink$1}
+  }
+
+  .mantine-Input-wrapper {
+    ${cssWrapperInputNotShrink$1}
+
+    + .mantine-Popover-dropdown[data-position="bottom-start"] {
+      left: 0 !important;
+    }
+    + .mantine-Popover-dropdown[data-position='top-start'] {
+      top: unset !important;
+      left: 0 !important;
+      bottom: 100% !important;
+    }
+  }
+
+  .mantine-Input-input {
+    ${cssInputNotShrink$1}
+  }
+
+  &.textField_shrink,
+  &:focus-within {
+    .mantine-InputWrapper-label {
+      ${cssLabelShrink$1}
+    }
+
+    .mantine-Input-wrapper {
+      ${cssWrapperInputShrink$1}
+      &.mantine-Select-wrapper {
+        .mantine-Select-rightSection {
+          pointer-events: auto !important;
+        }
+      }
+    }
+
+    .mantine-Input-input {
+      ${cssInputShrink$1}
+    }
+
+    &:has(.PhoneInput) {
+      .mantine-InputWrapper-label {
+        left: var(--space-x, 16px);
+      }
+      .PhoneInput {
+        .PhoneInputInput {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .PhoneInput {
+    --phone-select: 75px;
+    --phone-input-space-x: 8px;
+    width: 100%;
+    opacity: 1;
+    border: none;
+    .PhoneInputCountry {
+      background-color: transparent;
+      border: none;
+      padding: 0;
+      width: var(--phone-select, 75px);
+    }
+    .PhoneInputInput {
+      flex: 1;
+      min-width: 0;
+      line-height: 1.5;
+      outline: none !important;
+      border: none;
+      box-shadow: none;
+      padding: 0 var(--phone-input-space-x, 8px);
+      opacity: 0;
+      color: ${theme.colors.gray800} !important;
+      :focus {
+        color: ${theme.colors.gray800} !important;
+      }
+    }
+  }
+
+  &:has(.PhoneInput) {
+    .mantine-InputWrapper-label {
+      left: calc(
+        var(--space-x, 16px) + var(--phone-select, 75px) +
+          var(--phone-input-space-x, 8px)
+      );
+    }
+  }
+`;
+const StyledChoiceFieldContainer$1 = styled.div `
+  &.leadgen-form_checkbox,
+  &.leadgen-form_radio {
+    width: 100%;
+  }
+
+  &.leadgen-form_dropdown {
+    width: calc(50% - 12px);
+  }
+
+  .mantine-InputWrapper-root {
+    display: block;
+    .mantine-InputWrapper-error {
+      font-size: 12px !important;
+    }
+  }
+
+  .mantine-InputWrapper-label {
+    margin-bottom: 0.5rem;
+    color: ${theme.colors.gray800};
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5;
+  }
+
+  .mantine-Radio-root,
+  .mantine-Checkbox-root {
+    gap: 8px;
+    min-width: calc(50% - 4px);
+
+    input[type='radio'],
+    input[type='checkbox'] {
+      border-color: ${theme.colors.gray600};
+      width: 18px;
+      height: 18px;
+    }
+    input[type='checkbox'] {
+      border-radius: 4px;
+    }
+
+    &[data-checked='true'] {
+      input[type='radio'],
+      input[type='checkbox'] {
+        border-color: ${theme.colors.primary600};
+        + svg {
+          color: ${theme.colors.primary600};
+        }
+      }
+
+      input[type='radio'] {
+        background-color: white;
+      }
+    }
+
+    .mantine-Checkbox-input {
+      &:checked {
+        border-color: ${theme.colors.primary600};
+      }
+    }
+  }
+
+  .mantine-Radio-inner,
+  .mantine-Checkbox-inner {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mantine-Radio-body,
+  .mantine-Checkbox-body {
+    display: flex;
+    align-items: center;
+  }
+
+  .mantine-Radio-label,
+  .mantine-Checkbox-label {
+    padding-left: 8px;
+    color: ${theme.colors.gray800};
+    font-size: 14px;
+    line-height: 1.4;
+    letter-spacing: -0.2px;
+  }
+
+  .leadgen-choiceContainer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .mantine-InputWrapper-error {
+    ${cssInputWrapperError$1}
+  }
+`;
+
+const TextField$1 = (props) => {
+    const { shrink: shrinkProps, onChangeShrink, className, children } = props, restProps = __rest(props, ["shrink", "onChangeShrink", "className", "children"]);
+    const containerRef = useClickOutside(() => {
+        if (shrinkProps) {
+            return;
+        }
+        setShrink(false);
+        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(false);
+    });
+    const [shrink, setShrink] = useState(shrinkProps);
+    const onClick = useCallback((e) => {
+        setShrink(true);
+        onChangeShrink === null || onChangeShrink === void 0 ? void 0 : onChangeShrink(true);
+        if (shrink) {
+            return;
+        }
+        const $textEl = e.currentTarget.querySelectorAll('input:not([disabled]):not([type="submit"]),select:not([disabled]),textarea:not([disabled])');
+        const $focusEl = $textEl.item($textEl.length - 1);
+        if ($focusEl) {
+            $focusEl.focus();
+            setTimeout(() => {
+                $focusEl.scrollIntoView({
+                    behavior: 'auto',
+                    block: 'center',
+                    inline: 'start',
+                });
+            }, 100);
+        }
+    }, [shrink]);
+    useEffect(() => {
+        setShrink(shrinkProps);
+    }, [shrinkProps]);
+    return (React__default.createElement(StyledTextFieldContainer$1, Object.assign({ shrink: shrink, className: clsx(className, 'textField', { textField_shrink: !!shrink }) }, restProps),
+        React__default.createElement("div", { ref: containerRef, onClick: onClick, className: "textField_wrapper" }, children)));
+};
+const ChoiceField$1 = (props) => {
+    const { children, className } = props, restProps = __rest(props, ["children", "className"]);
+    return (React__default.createElement(StyledChoiceFieldContainer$1, Object.assign({ className: clsx(className, 'choiceField') }, restProps), children));
+};
+
+const libraries = ['places'];
+const GoogleLocationBlock = (props) => {
+    var _a;
+    const { inputWrapperOrder = ['label', 'input', 'description', 'error'], defaultValue, value: valueProps, onChange: onChangeProps, locale } = props, restProps = __rest(props, ["inputWrapperOrder", "defaultValue", "value", "onChange", "locale"]);
+    const [LoadScript, setLoadScript] = useState(null);
+    const [value, setValue] = useState(defaultValue || valueProps);
+    const { predictions } = usePlacesAutocomplete(value, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
+    const onChangeAutocomplete = useCallback((s) => {
+        setValue(s);
+        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(s);
+    }, []);
+    const onClickItem = useCallback((item) => {
+        /** For sure get value */
+        setValue(item.value);
+        const predCur = predictions === null || predictions === void 0 ? void 0 : predictions.find(({ description }) => description === item.value);
+        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(item.value, predCur === null || predCur === void 0 ? void 0 : predCur.rawData);
+    }, [onChangeProps, predictions]);
+    useEffect(() => {
+        setValue(valueProps);
+    }, [valueProps]);
+    useEffect(() => {
+        var _a, _b, _c;
+        // only load extra google script when not yet loaded
+        if (!((_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.places) === null || _c === void 0 ? void 0 : _c.AutocompleteService) && !LoadScript) {
+            import('@react-google-maps/api').then((m) => {
+                setLoadScript(() => m.LoadScript);
+            });
+        }
+    }, []);
+    return (React__default.createElement(Autocomplete, Object.assign({ defaultValue: defaultValue, value: value, onChange: onChangeAutocomplete, data: predictions.map((pred) => {
+            return { value: pred.description, label: pred.description };
+        }), filter: () => true, onItemSubmit: onClickItem, inputWrapperOrder: inputWrapperOrder, zIndex: ZINDEX_SSO - 9e6 + 2, withinPortal: true, styles: { dropdown: { pointerEvents: 'auto' } }, inputContainer: (children) => {
+            return (React__default.createElement(React__default.Fragment, null,
+                LoadScript && (React__default.createElement(LoadScript, { googleMapsApiKey: GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default.createElement(React__default.Fragment, null), style: { width: '100%' } })),
+                children));
+        } }, restProps)));
+};
+
+const LeadGenForm = forwardRef((props, ref) => {
+    const { locale, blocks, scrollToErrorField = true, form: formProps, rules: validate, initialValues, onFinish, onFinishFailed, className, style, } = props;
+    const formRef = useRef(null);
+    const form = formProps || useForm({ initialValues, validate });
+    const middlewareFinish = useCallback((values, event) => {
+        /** Set `touched` all values for validation when submiting */
+        form.setTouched(blocks.reduce((touched, { data }) => {
+            touched[data.value] = true;
+            return touched;
+        }, {}));
+        /** Wait for `touched` state and then submit */
+        setTimeout(() => {
+            const { hasErrors } = form.validate();
+            if (hasErrors) {
+                return;
+            }
+            onFinish === null || onFinish === void 0 ? void 0 : onFinish(formatLeadGenFormValue(values, blocks), event);
+        }, 100);
+    }, [form, blocks]);
+    const middlewareFinishFailed = useCallback((errors, values, events) => {
+        if (scrollToErrorField && errors) {
+            const firstErrorKey = Object.keys(errors)[0];
+            const firstErrorElement = document.querySelector(`[name="${firstErrorKey}"]`);
+            if (firstErrorElement && (firstErrorElement === null || firstErrorElement === void 0 ? void 0 : firstErrorElement.focus)) {
+                setTimeout(() => {
+                    firstErrorElement === null || firstErrorElement === void 0 ? void 0 : firstErrorElement.focus();
+                    firstErrorElement.scrollIntoView({
+                        behavior: 'auto',
+                        block: 'center',
+                        inline: 'center',
+                    });
+                }, 100);
+            }
+        }
+        onFinishFailed === null || onFinishFailed === void 0 ? void 0 : onFinishFailed(errors, values, events);
+    }, [scrollToErrorField]);
+    useEffect(() => {
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            if (!window.intlTelInputUtils) {
+                yield require('intl-tel-input/build/js/utils');
+            }
+        }))();
+    }, []);
+    useImperativeHandle(ref, () => (Object.assign(Object.assign({}, form), { submit: () => {
+            formRef.current.requestSubmit();
+        } })), [form, formRef]);
+    if (!blocks || !blocks.length) {
+        return null;
+    }
+    return (React__default.createElement("form", { ref: formRef, onSubmit: form.onSubmit(middlewareFinish, middlewareFinishFailed), className: className, style: style },
+        React__default.createElement(StyledLeadGenFormInner, { className: "leadgen-form_inputs" }, blocks.map((block, idx) => {
+            const { id, name: blockName, data } = block;
+            const { placeholder, value: name, required, listQuestion, valueHTML, isSendMailChimp = false, } = data;
+            const formInputProps = form.getInputProps(name);
+            const { value, error } = formInputProps;
+            const reactKey = `${id}-${idx}`;
+            switch (blockName) {
+                case LEADGEN_BLOCK.TextBlock: {
+                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "text", "data-control": "text" }, formInputProps))));
+                }
+                case LEADGEN_BLOCK.NumberBlock: {
+                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(NumberInput$1, Object.assign({ name: value, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "number", "data-control": "number" }, formInputProps))));
+                }
+                case LEADGEN_BLOCK.EmailBlock: {
+                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(TextInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, "data-control": "email" }, formInputProps))));
+                }
+                case LEADGEN_BLOCK.PhoneOtpBlock:
+                case LEADGEN_BLOCK.WhatsappOtpBlock:
+                case LEADGEN_BLOCK.ZaloOtpBlock:
+                case LEADGEN_BLOCK.PhoneBlock: {
+                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(PhoneInput, Object.assign({ name: name, spellCheck: false, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), type: "text", "data-control": "text" }, formInputProps))));
+                }
+                case LEADGEN_BLOCK.LocationBlock: {
+                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(GoogleLocationBlock, Object.assign({ name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, locale: locale, "data-control": "text" }, formInputProps))));
+                }
+                case LEADGEN_BLOCK.DateBlock: {
+                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement(DateInput, Object.assign({ locale: (MAPPED_LOCALE === null || MAPPED_LOCALE === void 0 ? void 0 : MAPPED_LOCALE[locale]) || MAPPED_LOCALE['vi-VN'], valueFormat: "DD/MM/YYYY", name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, type: "default", "data-control": "date" }, formInputProps))));
+                }
+                case LEADGEN_BLOCK.DropdownBlock:
+                    return (React__default.createElement(TextField$1, { key: reactKey, shrink: !!value, className: "leadgen-form_input" },
+                        React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
+                        React__default.createElement(Select$1, Object.assign({ name: name, withAsterisk: required, label: placeholder, placeholder: placeholder, data: listQuestion.map((l) => ({
+                                value: l.value,
+                                label: l.placeholder,
+                            })) }, formInputProps))));
+                case LEADGEN_BLOCK.CheckboxBlock: {
+                    const formInputCheckboxProps = form.getInputProps(name, {
+                        type: 'checkbox',
+                    });
+                    return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
+                        isSendMailChimp && (React__default.createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
+                        React__default.createElement(Checkbox$1.Group, Object.assign({ size: "md", withAsterisk: required, label: placeholder, value: value, sx: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                flexWrap: 'wrap',
+                                gap: 8,
+                            }, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
+                                return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
+                            } }, formInputCheckboxProps), listQuestion.map((l, _idx) => (React__default.createElement(Checkbox$1, { name: name, key: _idx, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
+                }
+                case LEADGEN_BLOCK.RadioBlock: {
+                    return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
+                        isSendMailChimp && (React__default.createElement("div", { style: { display: 'none' }, "data-name": name + '-mailchimp' })),
+                        React__default.createElement(Radio$1.Group, Object.assign({ size: "md", withAsterisk: required, label: placeholder, value: value, spellCheck: true, inputWrapperOrder: LEADGEN_ORDER_INPUT_WRAPPER, inputContainer: (children) => {
+                                return (React__default.createElement("div", { className: "leadgen-choiceContainer" }, children));
+                            } }, formInputProps), listQuestion.map((l, _index) => (React__default.createElement(Radio$1, { name: name, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+                }
+                case LEADGEN_BLOCK.TncBlock:
+                    return (React__default.createElement(ChoiceField$1, { className: "leadgen-form_input leadgen-form_input_checkbox", key: reactKey },
+                        React__default.createElement(Input$1.Wrapper, { error: error },
+                            React__default.createElement(Checkbox$1, Object.assign({ value: value, name: 'TNC-' + id, label: React__default.createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, formInputProps)))));
+                default: {
+                    return null;
+                }
+            }
+        }))));
+});
+
+const LEADGEN_ORDER_INPUT_WRAPPER = ['label', 'input', 'description', 'error'];
+
+const LeadGenSubscriptionBoxA = (props) => {
+    const { loading, image, title, submitText, locale, blocks, form, rules, onFinish, } = props;
+    const formRef = useRef();
+    const imageComp = useMemo(() => {
+        if (!image) {
+            return null;
+        }
+        return (React__default.createElement(StyledLeadGenSubscriptionBoxHeaderImage, null,
+            React__default.createElement("img", { src: image, alt: "" })));
+    }, [image]);
+    const titleComp = useMemo(() => {
+        if (typeof title === 'string') {
+            return (React__default.createElement("p", { className: "leadgen-title", dangerouslySetInnerHTML: { __html: title } }));
+        }
+        return React__default.createElement("p", { className: "leadgen-title" }, title);
+    }, [title]);
+    return (React__default.createElement(StyledLeadGenSubscriptionBoxA, { className: "subcription_box_A" },
+        React__default.createElement(StyledLeadGenSubscriptionBoxHeader, { className: "leadgen-subscription_box_header" },
+            imageComp,
+            titleComp),
+        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: () => {
+                    formRef.current.submit();
+                }, className: "leadgen-btn leadgen-btn_action", fullWidth: true }, submitText))));
+};
+
+const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, categoryId, }) => {
+    var _a, _b, _c;
+    const { image, extra_fields, id: campaign_id, bot_id: campaign_subot_id = [], ThankYouBlock, } = forceCampaign || {};
+    const { textBlocks, listBlockAdded, actionBlocks } = extra_fields || {};
+    const { submitBlock } = actionBlocks || {};
+    const { apiLeadUrl, subscriptionIcon, subscriptionTitle, submitSubscriptionBox, impression, onFinish, } = useLeadGenContext();
+    const { t } = useTranslations();
+    const { action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
+    const refContainer = useRef(null);
+    const [loading, setLoading] = useState(false);
+    const [showThankyou, setShowThankyou] = useState(false);
+    const validatingEmailRef = useRef(false);
+    const validatingPhoneRef = useRef(false);
+    const { form, validateObj } = useLeadFormConfig({
+        listBlockAdded,
+        campaignId: campaign_id,
+        campaign_subot_id,
+        validatingEmailRef,
+        validatingPhoneRef,
+        userInfo,
+    });
+    const subscription_title = useMemo(() => {
+        var _a, _b;
+        return subscriptionTitle ||
+            ((_b = (_a = textBlocks === null || textBlocks === void 0 ? void 0 : textBlocks.titleBlock) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value) ||
+            t('leadgen.message.title.default');
+    }, [subscriptionTitle, (_b = (_a = textBlocks === null || textBlocks === void 0 ? void 0 : textBlocks.titleBlock) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value]);
+    const { image: thankyouImage, title: thankyouTitle, description: thankyouDescription, button: thankyouButton, } = ThankYouBlock || {};
+    const intersectionObserverCallback = useCallback((entries) => {
+        entries.forEach((entry) => {
+            const { isIntersecting, target } = entry;
+            if (!showThankyou &&
+                isIntersecting &&
+                target === refContainer.current) {
+                impression();
+            }
+        });
+    }, [impression, showThankyou]);
+    const IObserver = new IntersectionObserver(intersectionObserverCallback);
+    const middlewareOnSubmit = useCallback((values) => __awaiter(void 0, void 0, void 0, function* () {
+        const newValues = {
+            subscription_title,
+        };
+        const ssoValues = {
+            sso_user_id: undefined,
+            sso_uuid: undefined,
+            sso_verified_profile: undefined,
+        };
+        const valueKeys = Object.keys(values);
+        for (const key of valueKeys) {
+            const isPhoneField = leadGenFieldNamePhone(listBlockAdded).some((k) => k === key);
+            if (isPhoneField) {
+                const phone = parsePhoneNumber(values[key]);
+                if (phone.isValid()) {
+                    /** Seperate `area_code` and `phone_number` for BE */
+                    newValues['area_code'] = `+${phone.countryCallingCode}`;
+                    newValues['phone_number'] = phone.nationalNumber;
+                    /** Only case login has this update */
+                    if ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.id) && (userInfo === null || userInfo === void 0 ? void 0 : userInfo.uid)) {
+                        ssoValues['sso_verified_profile'] =
+                            phone.number === (userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone) ? 1 : 0;
+                        ssoValues['sso_user_id'] = userInfo === null || userInfo === void 0 ? void 0 : userInfo.id;
+                        ssoValues['sso_uuid'] = userInfo === null || userInfo === void 0 ? void 0 : userInfo.uid;
+                    }
+                }
+                continue;
+            }
+            newValues[key] = values[key];
+        }
+        setLoading(true);
+        try {
+            const { _data } = (yield submitSubscriptionBox(Object.assign(Object.assign({}, newValues), ssoValues))) || {};
+            const { model } = _data || {};
+            if (model && (model === null || model === void 0 ? void 0 : model.id)) {
+                setShowThankyou(true);
+                onFinish === null || onFinish === void 0 ? void 0 : onFinish(Object.assign(Object.assign({}, newValues), ssoValues), listBlockAdded || []);
+            }
+        }
+        catch (error) {
+            LeadLog('** LeadGen SubscriptionBox error : ', error);
+            pushNotifications({
+                message: t('leadgen.message.error.default'),
+                type: 'danger',
+            });
+        }
+        setLoading(false);
+    }), [
+        subscription_title,
+        listBlockAdded,
+        userInfo === null || userInfo === void 0 ? void 0 : userInfo.id,
+        userInfo === null || userInfo === void 0 ? void 0 : userInfo.uid,
+        userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone,
+    ]);
+    useEffect(() => {
+        if (refContainer.current) {
+            IObserver.observe(refContainer.current);
+        }
+        return () => {
+            IObserver.disconnect();
+        };
+    }, [categoryId]);
+    return (React__default.createElement("div", { ref: refContainer },
+        React__default.createElement(StyledLeadGenSubscriptionBox, null,
+            showThankyou && (React__default.createElement(LeadGenThankYou, { image: Object.assign(Object.assign({}, thankyouImage), { src: thankyouImage.src || `${apiLeadUrl}admin/img/thanksyou.png` }), title: thankyouTitle, description: thankyouDescription, button: thankyouButton })),
+            !showThankyou && (React__default.createElement(LeadGenSubscriptionBoxA, { loading: loading, image: subscriptionIcon || image, title: subscription_title, submitText: (_c = submitBlock === null || submitBlock === void 0 ? void 0 : submitBlock.data) === null || _c === void 0 ? void 0 : _c.value, blocks: listBlockAdded, locale: locale, form: form, rules: validateObj, onFinish: middlewareOnSubmit })))));
+};
+const LeadGenSubscriptionBox$1 = memo(LeadGenSubscriptionBoxWithoutMemo);
+
+const Container = () => {
+    const context = useContext(LeadGenContext);
+    const { campaign_code, locale, siteId, siteDomain, userInfo, forceCampaign } = context;
+    if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
+        return null;
+    }
+    return (React__default.createElement(LeadGenSubscriptionBox$1, { locale: locale, siteId: siteId, siteDomain: siteDomain, userInfo: userInfo, forceCampaign: forceCampaign, campaign_code: campaign_code }));
+};
+Container.displayName = 'LeadGenSubscriptionBox';
+const LeadGenSubscriptionBoxContainer = (props) => {
+    const { apiUrl, apiSubotUrl } = props;
+    return (React__default.createElement(LeadGenContextProvider, Object.assign({}, props, { apiLeadUrl: apiUrl, apiSubotUrl: apiSubotUrl }),
+        React__default.createElement(Container, null)));
+};
+const LeadGenSubscriptionBox = LeadGenSubscriptionBoxContainer;
+
+const useImageSize = (src) => {
+    const [width, setWidth] = useState(16);
+    const [height, setHeight] = useState(9);
+    const [loaded, setLoaded] = useState(false);
+    // load src image to get its width and height
+    useEffect(() => {
+        setLoaded(false);
+        if (src) {
+            const img = new Image();
+            img.addEventListener('load', () => {
+                setWidth(img.naturalWidth);
+                setHeight(img.naturalHeight);
+                setLoaded(true);
+            });
+            img.addEventListener('error', () => {
+                setWidth(16);
+                setHeight(9);
+                setLoaded(true);
+            });
+            img.src = src;
+        }
+        else {
+            setWidth(16);
+            setHeight(9);
+            setLoaded(true);
+        }
+    }, [src]);
+    return {
+        loaded,
+        width,
+        height,
+    };
+};
+
+const CloseButton = ({ onClose, containerClassName, svgClassName, }) => (React__default.createElement("button", { onClick: onClose, className: `le-newbuilder-close-button js-modal__close ${containerClassName || ''}` },
+    React__default.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", className: svgClassName },
+        React__default.createElement("path", { d: "M9.99981 10.8432L14.0583 14.9017C14.1691 15.0125 14.3083 15.0691 14.476 15.0717C14.6437 15.0743 14.7854 15.0176 14.9013 14.9017C15.0172 14.7858 15.0752 14.6453 15.0752 14.4802C15.0752 14.3151 15.0172 14.1746 14.9013 14.0587L10.8429 10.0002L14.9013 5.9417C15.0121 5.83094 15.0688 5.69172 15.0713 5.52402C15.0739 5.35634 15.0172 5.21456 14.9013 5.09866C14.7854 4.98276 14.6449 4.9248 14.4798 4.9248C14.3147 4.9248 14.1742 4.98276 14.0583 5.09866L9.99981 9.15712L5.94133 5.09866C5.83057 4.98789 5.69135 4.93122 5.52365 4.92866C5.35598 4.92609 5.21419 4.98276 5.09829 5.09866C4.98239 5.21456 4.92444 5.35506 4.92444 5.52018C4.92444 5.6853 4.98239 5.82581 5.09829 5.9417L9.15675 10.0002L5.09829 14.0587C4.98752 14.1694 4.93085 14.3087 4.9283 14.4763C4.92572 14.644 4.98239 14.7858 5.09829 14.9017C5.21419 15.0176 5.3547 15.0756 5.51982 15.0756C5.68493 15.0756 5.82544 15.0176 5.94133 14.9017L9.99981 10.8432Z" }))));
+
+// url: imageBlocks.imageMobile.data.url
+// newTab: imageBlocks.imageMobile.data.newtab
+// imageMobile: campaignShow.image
+// imageDestkop: campaignShow.image_desktop
+const CenterTabLayout = ({ popupId, url, newTab, imageDestkop, imageMobile, onClose, onOtherSubmit, }) => {
+    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
+    const { width: imageDestkopWidth, height: imageDestkopHeight, loaded: imageDestkopLoaded, } = useImageSize(imageDestkop);
+    if (!imageMobileLoaded || !imageDestkopLoaded)
+        return null;
+    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "center_tab" },
+        React__default.createElement("div", { className: "le-center-tab-popup" },
+            React__default.createElement("div", { style: { position: 'relative' } },
+                React__default.createElement("a", { className: "js-popup-other-submit", href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
+                    isVideo(imageMobile) ? (React__default.createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-mobile" },
+                        React__default.createElement("source", { src: imageMobile }))) : (React__default.createElement("img", { className: "le-only-mobile", src: imageMobile, style: {
+                            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
+                        } })),
+                    isVideo(imageDestkop) ? (React__default.createElement("video", { loop: true, muted: true, autoPlay: true, className: "le-only-desktop" },
+                        React__default.createElement("source", { src: imageDestkop }))) : (React__default.createElement("img", { className: "le-only-desktop", src: imageDestkop, style: {
+                            aspectRatio: `${imageDestkopWidth}/${imageDestkopHeight}`,
+                        } }))),
+                React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))));
+};
+
+// title: titleText
+// titleAlign: textBlocks.titleBlock.data.align
+// subtitle: textBlocks.subtitleBlock.data.value
+// subtitleAlign: textBlocks.subtitleBlock.data.align
+// url: actionBlocks.linkButtonBlock.data.url
+// urlText: actionBlocks.linkButtonBlock.data.value
+// newTab: actionBlocks.linkButtonBlock.data.newtab
+// imageMobile: campaignShow.image
+// imageDesktop: campaignShow.image_desktop
+const FloatingLayout = ({ popupId, url, title, urlText, titleAlign, subtitle, subtitleAlign, newTab, imageDesktop, imageMobile, onClose, onOtherSubmit, }) => {
+    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
+    const { width: imageDesktopWidth, height: imageDesktopHeight, loaded: imageDesktopLoaded, } = useImageSize(imageDesktop);
+    if (!imageMobileLoaded || !imageDesktopLoaded)
+        return null;
+    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper lead-floating-wrapper", "data-popup-url": location.pathname, "data-popup-type": "floating" },
+        React__default.createElement("aside", { className: "le-only-desktop" },
+            React__default.createElement("div", { className: "le-floating-desktop" },
+                React__default.createElement("div", { className: "le-floating-desktop-wrap", style: { position: 'relative', background: '#fff' } },
+                    imageDesktop ? (React__default.createElement("div", null,
+                        React__default.createElement("img", { style: {
+                                maxWidth: 120,
+                                borderTopLeftRadius: 5,
+                                borderBottomLeftRadius: 5,
+                                aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
+                            }, src: imageDesktop }))) : null,
+                    React__default.createElement("div", { style: { padding: 20 } },
+                        React__default.createElement("div", { className: `le-floating-desktop-title le-text-align-${titleAlign}` }, title),
+                        React__default.createElement("div", { className: `le-floating-desktop-desc le-text-align-${subtitleAlign}` }, subtitle)),
+                    React__default.createElement("a", { target: newTab ? 'blank' : '_parent', style: { marginLeft: 35, textDecoration: 'none' }, href: url },
+                        React__default.createElement("button", { className: "le-joinbow-floating-btn js-popup-other-submit", onClick: onOtherSubmit }, urlText)),
+                    React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))),
+        React__default.createElement("aside", { className: "le-only-mobile" },
+            React__default.createElement("div", { className: "le-floating-mobile" },
+                React__default.createElement("div", { className: "le-floating-mobile-wrap", style: { position: 'relative', background: '#fff' } },
+                    React__default.createElement("aside", { style: { display: 'flex', justifyContent: 'space-between' } },
+                        React__default.createElement("div", null,
+                            React__default.createElement("div", { className: `le-floating-mobile-title le-text-align-${titleAlign}` }, title),
+                            React__default.createElement("div", { className: `le-floating-mobile-desc le-text-align-${subtitleAlign}` }, subtitle)),
+                        imageMobile ? (React__default.createElement("div", null,
+                            React__default.createElement("img", { style: {
+                                    marginLeft: 15,
+                                    marginTop: 4,
+                                    maxWidth: 100,
+                                    aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
+                                }, src: imageMobile }))) : null),
+                    React__default.createElement("div", { style: { textAlign: 'center', marginTop: 10 } },
+                        React__default.createElement("a", { target: newTab ? 'blank' : '_parent', href: url, style: { textDecoration: 'none' } },
+                            React__default.createElement("button", { className: "le-joinbow-floating-btn js-popup-other-submit", onClick: onOtherSubmit }, urlText))),
+                    React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))));
+};
+
+const ThankyouPopup = ({ title, titleAlign, subtitle, subtitleAlign, link, linkNewTab, linkText, image, }) => {
+    const { primaryColor } = useContext(LeadGenContext$1);
+    const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
+    if (!imageLoaded)
+        return null;
+    return (React__default.createElement("div", { className: "lead-modal__thank-you leadgen-inner_thankyou" },
+        React__default.createElement("div", { style: { width: '100%' } },
+            React__default.createElement("img", { src: image, style: {
+                    maxHeight: 162,
+                    objectFit: 'cover',
+                    aspectRatio: `${imageWidth}/${imageHeight}`,
+                }, loading: "lazy" }),
+            title && (React__default.createElement("h1", { className: `le-thankyou-title le-text-align-${titleAlign}` }, title)),
+            subtitle && (React__default.createElement("p", { className: `le-thankyou-subtitle le-text-align-${subtitleAlign}` }, subtitle.split('\n').map((text, idx, list) => {
+                const isShowBr = idx < list.length - 1;
+                return (React__default.createElement(React__default.Fragment, null,
+                    text,
+                    isShowBr && React__default.createElement("br", null)));
+            }))),
+            linkText && (React__default.createElement("div", null,
+                React__default.createElement("a", { href: link, target: linkNewTab ? '_blank' : 'parrent', rel: "noreferrer" },
+                    React__default.createElement(Button, { className: `lead-modal__btn ${LEAD_CLASS}`, color: primaryColor }, linkText)))))));
+};
+
+const InlineLayout = ({ content, inlinePosition, }) => {
+    const target = useMemo(() => {
+        if (!inlinePosition)
+            return null;
+        const parents = document.querySelectorAll(`[data-url="${location.pathname}"] .body-content`);
+        const allChildren = Array.from(parents).reduce((r, p) => {
+            return [...r, ...Array.from(p.children)];
+        }, []);
+        if (allChildren === null || allChildren === void 0 ? void 0 : allChildren.length) {
+            // find the third p tag in the body content, some other tags might mix in between
+            const allPTags = allChildren.filter((c) => c.nodeName === 'P');
             const allH2Tags = allChildren.filter((c) => c.nodeName === 'H2');
             let target = null;
             switch (inlinePosition) {
@@ -1602,226 +3333,21 @@ const SideBarLayout = ({ content }) => {
 const EmptyIcon = (props) => {
     const { className, style } = props;
     return (React__default.createElement("svg", { width: "160", height: "160", viewBox: "0 0 160 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
-        React__default.createElement("path", { d: "M79.9974 113.333C98.4069 113.333 113.331 98.4096 113.331 80.0001C113.331 61.5906 98.4069 46.6667 79.9974 46.6667C61.5879 46.6667 46.6641 61.5906 46.6641 80.0001C46.6641 98.4096 61.5879 113.333 79.9974 113.333Z", fill: "#F44D2C" }),
-        React__default.createElement("path", { d: "M92.434 95.0004C91.7771 95.0004 91.1213 94.7499 90.6194 94.249L65.7521 69.3807C64.7493 68.3779 64.7493 66.7542 65.7521 65.7524C66.7549 64.7507 68.3786 64.7497 69.3804 65.7524L94.2487 90.6208C95.2515 91.6235 95.2515 93.2473 94.2487 94.249C93.7468 94.7499 93.0909 95.0004 92.434 95.0004Z", fill: "white" }),
-        React__default.createElement("path", { d: "M67.5648 95C66.9079 95 66.252 94.7496 65.7501 94.2487C64.7474 93.2459 64.7474 91.6222 65.7501 90.6204L90.6185 65.7521C91.6212 64.7493 93.245 64.7493 94.2467 65.7521C95.2485 66.7549 95.2495 68.3786 94.2467 69.3804L69.3794 94.2487C68.8786 94.7496 68.2217 95 67.5648 95Z", fill: "white" })));
-};
-
-const EmptyComponent = ({ onClose, onContinue, }) => {
-    const { t } = useTranslations();
-    return (React__default.createElement("div", { className: "leadgen-empty" },
-        React__default.createElement("div", { className: "leadgen-empty_body" },
-            React__default.createElement("div", { className: "leadgen-empty_wrapper" },
-                React__default.createElement(EmptyIcon, { className: "leadgen-empty_image" }),
-                React__default.createElement("h5", { className: "leadgen-empty_title" }, t('lead.empty.title')))),
-        React__default.createElement("div", { className: "leadgen-empty_footer" },
-            React__default.createElement(Button$1, { onClick: onClose, size: "lg", variant: "default", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_cancel" }, t('lead.empty.cancel')),
-            React__default.createElement(Button$1, { onClick: onContinue, size: "lg", variant: "filled", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_again" }, t('lead.empty.submitAgain')))));
-};
-
-const libraries = ['places'];
-const GoogleLocationBlock = (props) => {
-    var _a;
-    const { inputWrapperOrder = ['label', 'input', 'description', 'error'], defaultValue, value: valueProps, onChange: onChangeProps, locale } = props, restProps = __rest(props, ["inputWrapperOrder", "defaultValue", "value", "onChange", "locale"]);
-    const [LoadScript, setLoadScript] = useState(null);
-    const [value, setValue] = useState(defaultValue || valueProps);
-    const { predictions } = usePlacesAutocomplete(value, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
-    const onChangeAutocomplete = useCallback((s) => {
-        setValue(s);
-        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(s);
-    }, []);
-    const onClickItem = useCallback((item) => {
-        /** For sure get value */
-        setValue(item.value);
-        const predCur = predictions === null || predictions === void 0 ? void 0 : predictions.find(({ description }) => description === item.value);
-        onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(item.value, predCur === null || predCur === void 0 ? void 0 : predCur.rawData);
-    }, [onChangeProps, predictions]);
-    useEffect(() => {
-        setValue(valueProps);
-    }, [valueProps]);
-    useEffect(() => {
-        var _a, _b, _c;
-        // only load extra google script when not yet loaded
-        if (!((_c = (_b = (_a = window === null || window === void 0 ? void 0 : window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.places) === null || _c === void 0 ? void 0 : _c.AutocompleteService) && !LoadScript) {
-            import('@react-google-maps/api').then((m) => {
-                setLoadScript(() => m.LoadScript);
-            });
-        }
-    }, []);
-    return (React__default.createElement(Autocomplete, Object.assign({ defaultValue: defaultValue, value: value, onChange: onChangeAutocomplete, data: predictions.map((pred) => {
-            return { value: pred.description, label: pred.description };
-        }), filter: () => true, onItemSubmit: onClickItem, inputWrapperOrder: inputWrapperOrder, zIndex: ZINDEX_SSO - 9e6 + 2, withinPortal: true, styles: { dropdown: { pointerEvents: 'auto' } }, inputContainer: (children) => {
-            return (React__default.createElement(React__default.Fragment, null,
-                LoadScript && (React__default.createElement(LoadScript, { googleMapsApiKey: GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default.createElement(React__default.Fragment, null), style: { width: '100%' } })),
-                children));
-        } }, restProps)));
-};
-
-// You can give context variables any name
-const [LeadFormProvider, useLeadFormContext, useLeadForm] = createFormContext();
-const useLeadFormConfig = ({ 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 validateObj = useMemo(() => {
-        const InputBlocks = [
-            'TextBlock',
-            'NumberBlock',
-            'EmailBlock',
-            'PhoneBlock',
-            'DateBlock',
-            'CheckboxBlock',
-            'RadioBlock',
-            'DropdownBlock',
-            'PhoneOtpBlock',
-            'WhatsappOtpBlock',
-            'ZaloOtpBlock',
-            'LocationBlock',
-            'TncBlock',
-        ];
-        // ALL are required and can skip if not touched yet
-        const withSharedCheck = (name, cb, 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        block) => {
-            return (value) => {
-                var _a;
-                const isBLockRequired = (_a = block === null || block === void 0 ? void 0 : block.data) === null || _a === void 0 ? void 0 : _a.required;
-                if (!formRef.current.isTouched(name))
-                    return;
-                if ((typeof value === 'string' && value.replace(' ', '') === '') ||
-                    typeof value === 'undefined' ||
-                    value === '' ||
-                    (Array.isArray(value) && value.length === 0)) {
-                    return isBLockRequired
-                        ? t('validator.required')
-                        : cb === null || cb === void 0 ? void 0 : cb(value);
-                }
-                return cb === null || cb === void 0 ? void 0 : cb(value);
-            };
-        };
-        return listBlockAdded
-            .filter((b) => InputBlocks.includes(b.name))
-            .reduce((r, b) => {
-            var _a;
-            const isRequired = (_a = b.data.required) !== null && _a !== void 0 ? _a : true;
-            if (b.name === 'NumberBlock') {
-                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
-                        if (value && isNaN(Number(value))) {
-                            return t('validator.number');
-                        }
-                    }, b) });
-            }
-            else if (b.name === 'EmailBlock') {
-                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
-                        if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
-                            return t('validator.email');
-                        }
-                        if (!value)
-                            return;
-                        validatingEmailRef.current = true;
-                        setTimeout(() => {
-                            formRef.current.setFieldError(b.data.value, 'Validating...');
-                            checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
-                                email: value,
-                            })
-                                .then((tKey) => {
-                                if (tKey) {
-                                    formRef.current.setFieldError(b.data.value, t(tKey));
-                                }
-                                else {
-                                    formRef.current.clearFieldError(b.data.value);
-                                }
-                                validatingEmailRef.current = false;
-                            })
-                                .catch((e) => {
-                                console.error(e);
-                                formRef.current.setFieldError(b.data.value, e.message || 'Something went wrong');
-                                validatingEmailRef.current = false;
-                            });
-                        }, 200);
-                    }, b) });
-            }
-            else if (b.name === 'PhoneBlock' ||
-                b.name === 'PhoneOtpBlock' ||
-                b.name === 'ZaloOtpBlock' ||
-                b.name === 'WhatsappOtpBlock') {
-                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
-                        if (value &&
-                            window.intlTelInputUtils &&
-                            !window.intlTelInputUtils.isValidNumber(String(value), LEAD_LOCALE.countryCode)) {
-                            return t('validator.phone');
-                        }
-                        if (!value)
-                            return;
-                        validatingPhoneRef.current = true;
-                        setTimeout(() => {
-                            formRef.current.setFieldError(b.data.value, 'Validating...');
-                            if (b.data.singleSubmission) {
-                                checkUsedPhoneOnlyWithCache(campaignId, value)
-                                    .then((tKey) => {
-                                    if (tKey) {
-                                        formRef.current.setFieldError(b.data.value, t(tKey));
-                                    }
-                                    else {
-                                        formRef.current.clearFieldError(b.data.value);
-                                    }
-                                    validatingPhoneRef.current = false;
-                                })
-                                    .catch((err) => {
-                                    console.error(err);
-                                    formRef.current.setFieldError(b.data.value, err.message || 'Something went wrong');
-                                    validatingPhoneRef.current = false;
-                                });
-                            }
-                            else {
-                                checkUsedEmailOrPhoneWithCache(campaignId, campaign_subot_id, {
-                                    phone: value,
-                                })
-                                    .then((tKey) => {
-                                    if (tKey) {
-                                        formRef.current.setFieldError(b.data.value, t(tKey));
-                                    }
-                                    else {
-                                        formRef.current.clearFieldError(b.data.value);
-                                    }
-                                    validatingPhoneRef.current = false;
-                                })
-                                    .catch((e) => {
-                                    console.error(e);
-                                    formRef.current.setFieldError(b.data.value, e.message || 'Something went wrong');
-                                    validatingPhoneRef.current = false;
-                                });
-                            }
-                        }, 200);
-                    }, b) });
-            }
-            else if (b.name === 'DateBlock') {
-                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
-                        if (value && isNaN(Date.parse(value))) {
-                            return t('validator.date');
-                        }
-                    }, b) });
-            }
-            else if (b.name === 'TncBlock') {
-                return Object.assign(Object.assign({}, r), { [`TNC-` + b.id]: withSharedCheck('TNC-' + b.id, (value) => {
-                        if (isRequired && !value) {
-                            return t('validator.required');
-                        }
-                    }, b) });
-            }
-            else {
-                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, undefined, b) });
-            }
-        }, {});
-    }, [listBlockAdded.map((b) => b.name).join(',')]);
-    const form = useLeadForm({
-        validateInputOnChange: true,
-        clearInputErrorOnChange: true,
-        validate: validateObj,
-        initialValues,
-    });
-    const formRef = useRef(form);
-    formRef.current = form;
-    return { form, validateObj };
+        React__default.createElement("path", { d: "M79.9974 113.333C98.4069 113.333 113.331 98.4096 113.331 80.0001C113.331 61.5906 98.4069 46.6667 79.9974 46.6667C61.5879 46.6667 46.6641 61.5906 46.6641 80.0001C46.6641 98.4096 61.5879 113.333 79.9974 113.333Z", fill: "#F44D2C" }),
+        React__default.createElement("path", { d: "M92.434 95.0004C91.7771 95.0004 91.1213 94.7499 90.6194 94.249L65.7521 69.3807C64.7493 68.3779 64.7493 66.7542 65.7521 65.7524C66.7549 64.7507 68.3786 64.7497 69.3804 65.7524L94.2487 90.6208C95.2515 91.6235 95.2515 93.2473 94.2487 94.249C93.7468 94.7499 93.0909 95.0004 92.434 95.0004Z", fill: "white" }),
+        React__default.createElement("path", { d: "M67.5648 95C66.9079 95 66.252 94.7496 65.7501 94.2487C64.7474 93.2459 64.7474 91.6222 65.7501 90.6204L90.6185 65.7521C91.6212 64.7493 93.245 64.7493 94.2467 65.7521C95.2485 66.7549 95.2495 68.3786 94.2467 69.3804L69.3794 94.2487C68.8786 94.7496 68.2217 95 67.5648 95Z", fill: "white" })));
+};
+
+const EmptyComponent = ({ onClose, onContinue, }) => {
+    const { t } = useTranslations();
+    return (React__default.createElement("div", { className: "leadgen-empty" },
+        React__default.createElement("div", { className: "leadgen-empty_body" },
+            React__default.createElement("div", { className: "leadgen-empty_wrapper" },
+                React__default.createElement(EmptyIcon, { className: "leadgen-empty_image" }),
+                React__default.createElement("h5", { className: "leadgen-empty_title" }, t('lead.empty.title')))),
+        React__default.createElement("div", { className: "leadgen-empty_footer" },
+            React__default.createElement(Button$1, { onClick: onClose, size: "lg", variant: "default", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_cancel" }, t('lead.empty.cancel')),
+            React__default.createElement(Button$1, { onClick: onContinue, size: "lg", variant: "filled", fullWidth: false, className: "leadgen-btn leadgen-btn_empty_again" }, t('lead.empty.submitAgain')))));
 };
 
 const SubtitleBlock = ({ children, align, }) => (React__default.createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
@@ -1994,6 +3520,14 @@ const StyledTextFieldContainer = styled.div `
     }
   }
 
+  &:focus-within {
+    .mantine-Input-wrapper {
+      transition: 0.25s linear border;
+      border-color: ${theme.colors.primary600};
+      box-shadow: 0 0 4px ${theme.colors.primary200};
+    }
+  }
+
   .PhoneInput {
     --phone-select: 75px;
     --phone-input-space-x: 8px;
@@ -2142,11 +3676,13 @@ const TextField = (props) => {
         const $focusEl = $textEl.item($textEl.length - 1);
         if ($focusEl) {
             $focusEl.focus();
-            $focusEl.scrollIntoView({
-                behavior: 'auto',
-                block: 'center',
-                inline: 'start',
-            });
+            setTimeout(() => {
+                $focusEl.scrollIntoView({
+                    behavior: 'auto',
+                    block: 'center',
+                    inline: 'start',
+                });
+            }, 100);
         }
     }, [shrink]);
     useEffect(() => {
@@ -2163,8 +3699,14 @@ const ChoiceField = (props) => {
 const TitleBlock = ({ children, align, }) => (React__default.createElement("h2", { className: `lead-modal__title ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
 const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, }) => {
+    const { t } = useTranslations();
     const form = useLeadFormContext();
     const formValues = form.values;
+    const labelTuples = useMemo(() => {
+        return ((ISO_FORMAT === null || ISO_FORMAT === void 0 ? void 0 : ISO_FORMAT[locale]) || ISO_FORMAT['vi-VN']).dateFormat
+            .split('/')
+            .map((key) => { var _a; return t((_a = COMMON_DATE_TRANSLATE_KEY === null || COMMON_DATE_TRANSLATE_KEY === void 0 ? void 0 : COMMON_DATE_TRANSLATE_KEY[key]) === null || _a === void 0 ? void 0 : _a.id); });
+    }, [locale]);
     return (React__default.createElement(React__default.Fragment, null, listBlockAdded.map((b, index) => {
         var _a;
         const { name = '', data = {}, id } = b || {};
@@ -2214,13 +3756,11 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                 return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
                     React__default.createElement(GoogleLocationBlock, Object.assign({ withAsterisk: required, name: value, placeholder: placeholder, label: placeholder, "data-control": "text", locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             }
-            case 'DateBlock':
-                return (React__default.createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default.createElement(DatePicker, Object.assign({ clearable: true, withAsterisk: required, type: "default", name: value, placeholder: placeholder, label: placeholder, inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
-                            return (React__default.createElement(React__default.Fragment, null,
-                                children,
-                                React__default.createElement("input", { type: "hidden", "data-control": "date", name: value, value: formValue })));
-                        } }, form.getInputProps(value)))));
+            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: placeholder, "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))));
+            }
             case 'LinkButtonBlock':
                 return (React__default.createElement("div", { key: index },
                     React__default.createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
@@ -2263,7 +3803,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                             label: l.placeholder,
                         })) }, form.getInputProps(value)))));
             case 'TncBlock':
-                const _c = form.getInputProps(`TNC-${id}`), { error } = _c, tncInputProps = __rest(_c, ["error"]);
+                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)))));
@@ -2326,842 +3866,504 @@ const StyledFormContainer = styled.div `
 /**
  *
  *  Use this component inside <form></form> tag
- *
- */
-const FormContainer = (_a) => {
-    var { title, titleAlign, description, descriptionAlign, className, style, children, header, footer } = _a, restProps = __rest(_a, ["title", "titleAlign", "description", "descriptionAlign", "className", "style", "children", "header", "footer"]);
-    const HeaderContent = (React__default.createElement("div", { className: "leadgen-form_header" },
-        React__default.createElement("h2", { title: title, className: "leadgen-title", "data-align": titleAlign }, title),
-        !!description && (React__default.createElement("p", { title: description, className: "leadgen-description", "data-align": descriptionAlign, dangerouslySetInnerHTML: { __html: description } }))));
-    if (!title && !description) {
-        return null;
-    }
-    return (React__default.createElement(StyledFormContainer, Object.assign({ className: clsx(className, 'leadgen-form_container'), style: style }, restProps),
-        React__default.createElement("div", { className: "leadgen-form_wrapper" },
-            !!header && (React__default.createElement("div", { className: "leadgen-form_scrollable" },
-                header,
-                HeaderContent,
-                React__default.createElement("div", { className: "leadgen-form_body" }, children))),
-            !header && (React__default.createElement(React__default.Fragment, null,
-                HeaderContent,
-                React__default.createElement("div", { className: "leadgen-form_body" }, children))),
-            React__default.createElement("div", { className: "leadgen-form_footer" }, footer))));
-};
-
-const StyleHeaderImage = styled.div `
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  padding-top: ${({ paddingTop }) => paddingTop}%;
-  .leadgen-header_image_feature {
-    position: absolute;
-    inset: 0;
-    min-width: 100%;
-    min-height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: cover;
-    object-position: center;
-  }
-`;
-const HeaderImage = ({ src, ratio = 3 / 2, className, style, }) => {
-    if (!src) {
-        return null;
-    }
-    return (React__default.createElement(StyleHeaderImage, { paddingTop: (1 / ratio) * 100, className: clsx(className, 'leadgen-header_image'), style: style }, isVideo(src) ? (React__default.createElement("video", { muted: true, autoPlay: true, loop: true, className: "leadgen-header_image_feature leadgen-header_image_video", src: src })) : (React__default.createElement("img", { src: src, draggable: "false", alt: "", className: "leadgen-header_image_feature leadgen-header_image_image" }))));
-};
-
-const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
-    const { primaryColor } = useContext(LeadGenContext);
-    const { t } = useTranslations();
-    const phone = otpData.phone;
-    const otpType = otpData.type;
-    const [otp, setOtp] = useState('');
-    const [isDirty, setIsDirty] = useState(false);
-    const [resendTimer, setResendTimer] = useState(autoSendWhenOpen ? 0 : 60);
-    const inputRef = useRef(null);
-    const [errorMsg, setErrorMsg] = useState();
-    const [displayPhone, setDisplayPhone] = useState('');
-    const formatPhoneNumberIntlRef = useRef();
-    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-    useEffect(() => {
-        (() => __awaiter(void 0, void 0, void 0, function* () {
-            var _a;
-            if (!formatPhoneNumberIntlRef.current) {
-                const res = yield import('react-phone-number-input');
-                formatPhoneNumberIntlRef.current = res.formatPhoneNumberIntl;
-            }
-            setDisplayPhone(((_a = formatPhoneNumberIntlRef.current) === null || _a === void 0 ? void 0 : _a.call(formatPhoneNumberIntlRef, phone)) || phone);
-        }))();
-    }, [phone]);
-    const sendOtp = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        if (!phone) {
-            return;
-        }
-        const res = yield Service.sendSMSOtpLead({
-            phone,
-            type: otpType,
-        });
-        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
-        if (respMessage === 'Send sms successfully' ||
-            respMessage === 'Send WhatsApp successfully' ||
-            respMessage === 'Send Zalo successfully') {
-            setResendTimer(60);
-            setTimeout(() => {
-                if (inputRef.current) {
-                    inputRef.current.focus();
-                    inputRef.current.scrollIntoView({ block: 'center' });
-                }
-            }, 100);
-        }
-        else if (respMessage === 'This phone number was verified') {
-            onSuccess();
-        }
-        else {
-            setErrorMsg(respMessage || 'Something went wrong!');
-            // const defaultError = f({ id: 'notification.comment.somethingWrong' })
-            // setStatusVerifyOTP('idle')
-            // pushNotifications({
-            //   title: respMessage || defaultError,
-            //   message: '',
-            //   type: 'danger',
-            // })
-        }
-    });
-    const submitOtp = () => __awaiter(void 0, void 0, void 0, function* () {
-        if (!phone || !otp) {
-            return;
-        }
-        setIsSubmitLoading(true);
-        const res = yield Service.verifyOtpLead({
-            phone,
-            otp,
-            type: otpType,
-        });
-        const respMessage = res === null || res === void 0 ? void 0 : res._messages[0];
-        if (respMessage === 'Verify successfully' ||
-            respMessage === 'Verify WhatsApp OTP sucess' ||
-            respMessage === 'Verify Zalo OTP sucess') {
-            onSuccess();
-        }
-        else if (respMessage === 'This phone number was verified') {
-            onSuccess();
-        }
-        else {
-            setErrorMsg(respMessage || 'something Wrong');
-            // setIsShowError(true)
-            // setStatusVerifyOTP('sent')
-            // pushNotifications({
-            //   title: res?._messages[0] || defaultError,
-            //   message: '',
-            //   type: 'danger',
-            // })
-        }
-        setIsSubmitLoading(false);
-    });
-    useEffect(() => {
-        setTimeout(() => {
-            if (resendTimer > 0) {
-                setResendTimer((r) => r - 1);
-            }
-        }, 1000);
-    }, [resendTimer]);
-    useEffect(() => {
-        if (autoSendWhenOpen && !resendTimer) {
-            sendOtp();
-        }
-    }, []);
-    return (React__default.createElement("form", { onSubmit: (e) => {
-            e.preventDefault();
-            submitOtp();
-        }, className: "lead-phone-otp-form leadgen-form leadgen-form_otp" },
-        React__default.createElement(FormContainer, { title: t('lead.otp.title'), description: t('lead.otp.desc', {
-                phone: `<strong>${displayPhone}</strong>`,
-            }), footer: React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Button$1, { type: "submit", size: "lg", variant: "filled", className: `lead-modal__btn leadgen-btn_action ${LEAD_CLASS}`, color: primaryColor, disabled: !otp, loading: isSubmitLoading }, t('lead.otp.verify')),
-                React__default.createElement(Button$1, { type: "button", size: "lg", variant: "light", className: `lead-modal__btn lead-phone-otp-button leadgen-btn_action ${LEAD_CLASS}`, color: primaryColor, onClick: () => {
-                        sendOtp();
-                    }, disabled: !!resendTimer }, t('lead.otp.resend', {
-                    timer: resendTimer ? ` (${resendTimer}s)` : '',
-                }))) },
-            React__default.createElement("div", { className: "leadgen-form_inner" },
-                React__default.createElement(Input.Wrapper, { error: isDirty ? errorMsg : undefined, className: "leadgen-form_field" },
-                    React__default.createElement(OTP, { ref: inputRef, name: '_' + name + '-otp', value: otp, onChange: (v) => {
-                            setIsDirty(true);
-                            setOtp(v.toString());
-                            if (isDirty && !v)
-                                setErrorMsg('OTP is required');
-                            else
-                                setErrorMsg(undefined);
-                        } }))))));
-};
-
-// url: imageBlocks.imageMobile.data.url
-// newTab: imageBlocks.imageMobile.data.newtab
-// image: campaignShow.image
-// imageDestkop: campaignShow.image_desktop
-const LEADGEN_LAYOUT_NOT_SHOW_IN_MOBILE = [
-    LEADGEN_LAYOUT.Fullscreen,
-    LEADGEN_LAYOUT.Slider,
-];
-const LEADGEN_LIMIT_LIGHTBOXB = 6;
-const LEADGEN_SHOW_HEADER = [
-    'LightBoxA',
-    'InlineA',
-    LEADGEN_LAYOUT.Sidebar,
-    LEADGEN_LAYOUT.Slider,
-];
-const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, }) => {
-    var _a;
-    const { primaryColor } = useContext(LeadGenContext);
-    const { isMobile } = useScreenSize();
-    const [open, setOpen] = useState(!!campaignId);
-    const [showOtpPhone, setShowOtpPhone] = useState(null);
-    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-    const [snap, setSnap] = useState(0.8);
-    const formRef = useRef();
-    const onClose = () => {
-        if (showOtpPhone) {
-            setShowOtpPhone(null);
-        }
-        else {
-            onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
-        }
-    };
-    const textBlocks = JSON.parse(extraFields.textBlocks);
-    const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
-    const actionBlocks = JSON.parse(extraFields.actionBlocks);
-    const popUpSubmitText = actionBlocks.submitBlock.data.value;
-    const currentPath = location.pathname;
-    const { align: descriptionAlign, value: description } = textBlocks.subtitleBlock.data || {};
-    const { align: titleAlign } = textBlocks.titleBlock.data || {};
-    const isSlider = currentLayout === LEADGEN_LAYOUT.Slider;
-    const isSidebar = currentLayout === LEADGEN_LAYOUT.Sidebar;
-    const isLightBox = currentLayout.includes('LightBox');
-    const isLightBoxA = currentLayout === LEADGEN_LAYOUT.LightBoxA;
-    const isLightBoxB = currentLayout === LEADGEN_LAYOUT.LightBoxB;
-    const isInline = currentLayout.includes('Inline');
-    const isFullscreen = currentLayout === LEADGEN_LAYOUT.Fullscreen;
-    const isInPage = isInline || isSidebar;
-    const isDrawer = isLightBoxB && isMobile;
-    const limitFieldsLightBoxB = isLightBoxB && listBlockAdded.length <= LEADGEN_LIMIT_LIGHTBOXB;
-    const hasForm = isLightBoxA
-        ? listBlockAdded.some((item) => LEADGEN_BLOCK_IN_FORM.some((k) => k === (item === null || item === void 0 ? void 0 : item.name)))
-        : true;
-    const headerInsideFormContainer = isSlider || isLightBoxA || isFullscreen;
-    const showHeader = !!imageMobile || !!imageDesktop;
-    const onlyHeader = !title && !description;
-    const showButtonClose = !isInline;
-    if (window.innerWidth < 769 &&
-        LEADGEN_LAYOUT_NOT_SHOW_IN_MOBILE.includes(currentLayout)) {
-        console.log('😎 Not show fullscreen, slider on mobile ');
+ *
+ */
+const FormContainer = (_a) => {
+    var { title, titleAlign, description, descriptionAlign, className, style, children, header, footer } = _a, restProps = __rest(_a, ["title", "titleAlign", "description", "descriptionAlign", "className", "style", "children", "header", "footer"]);
+    const HeaderContent = (React__default.createElement("div", { className: "leadgen-form_header" },
+        React__default.createElement("h2", { title: title, className: "leadgen-title", "data-align": titleAlign }, title),
+        !!description && (React__default.createElement("p", { title: description, className: "leadgen-description", "data-align": descriptionAlign, dangerouslySetInnerHTML: { __html: description } }))));
+    if (!title && !description) {
+        return null;
+    }
+    return (React__default.createElement(StyledFormContainer, Object.assign({ className: clsx(className, 'leadgen-form_container'), style: style }, restProps),
+        React__default.createElement("div", { className: "leadgen-form_wrapper" },
+            !!header && (React__default.createElement("div", { className: "leadgen-form_scrollable" },
+                header,
+                HeaderContent,
+                React__default.createElement("div", { className: "leadgen-form_body" }, children))),
+            !header && (React__default.createElement(React__default.Fragment, null,
+                HeaderContent,
+                React__default.createElement("div", { className: "leadgen-form_body" }, children))),
+            React__default.createElement("div", { className: "leadgen-form_footer" }, footer))));
+};
+
+const StyleHeaderImage = styled.div `
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  padding-top: ${({ paddingTop }) => paddingTop}%;
+  .leadgen-header_image_feature {
+    position: absolute;
+    inset: 0;
+    min-width: 100%;
+    min-height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
+`;
+const HeaderImage = ({ src, ratio = 3 / 2, className, style, }) => {
+    if (!src) {
         return null;
     }
+    return (React__default.createElement(StyleHeaderImage, { paddingTop: (1 / ratio) * 100, className: clsx(className, 'leadgen-header_image'), style: style }, isVideo(src) ? (React__default.createElement("video", { muted: true, autoPlay: true, loop: true, className: "leadgen-header_image_feature leadgen-header_image_video", src: src })) : (React__default.createElement("img", { src: src, draggable: "false", alt: "", className: "leadgen-header_image_feature leadgen-header_image_image" }))));
+};
+
+const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
+    const { primaryColor } = useContext(LeadGenContext$1);
+    const { t } = useTranslations();
+    const phone = otpData.phone;
+    const otpType = otpData.type;
+    const [otp, setOtp] = useState('');
+    const [isDirty, setIsDirty] = useState(false);
+    const [resendTimer, setResendTimer] = useState(autoSendWhenOpen ? 0 : 60);
+    const inputRef = useRef(null);
+    const [errorMsg, setErrorMsg] = useState();
+    const [displayPhone, setDisplayPhone] = useState('');
+    const formatPhoneNumberIntlRef = useRef();
+    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
     useEffect(() => {
-        if (isLightBox || isFullscreen) {
-            document.body.classList.add('noscroll');
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            if (!formatPhoneNumberIntlRef.current) {
+                const res = yield import('react-phone-number-input');
+                formatPhoneNumberIntlRef.current = res.formatPhoneNumberIntl;
+            }
+            setDisplayPhone(((_a = formatPhoneNumberIntlRef.current) === null || _a === void 0 ? void 0 : _a.call(formatPhoneNumberIntlRef, phone)) || phone);
+        }))();
+    }, [phone]);
+    const sendOtp = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        if (!phone) {
+            return;
         }
-        if (!window.intlTelInputUtils) {
-            require('intl-tel-input/build/js/utils');
+        const res = yield Service.sendSMSOtpLead({
+            phone,
+            type: otpType,
+        });
+        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
+        if (respMessage === 'Send sms successfully' ||
+            respMessage === 'Send WhatsApp successfully' ||
+            respMessage === 'Send Zalo successfully') {
+            setResendTimer(60);
+            setTimeout(() => {
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                    inputRef.current.scrollIntoView({ block: 'center' });
+                }
+            }, 100);
+        }
+        else if (respMessage === 'This phone number was verified') {
+            onSuccess();
+        }
+        else {
+            setErrorMsg(respMessage || 'Something went wrong!');
+            // const defaultError = f({ id: 'notification.comment.somethingWrong' })
+            // setStatusVerifyOTP('idle')
+            // pushNotifications({
+            //   title: respMessage || defaultError,
+            //   message: '',
+            //   type: 'danger',
+            // })
         }
-        clearCacheUsedEmailOrPhone();
-    }, []);
-    const validatingPhoneRef = useRef(false);
-    const validatingEmailRef = useRef(false);
-    const { form, validateObj } = useLeadFormConfig({
-        listBlockAdded,
-        validatingPhoneRef,
-        validatingEmailRef,
-        campaignId,
-        campaign_subot_id,
-        userInfo,
     });
-    const middlewareOnSubmit = (e) => {
-        e.preventDefault();
-        // mark all as touched to allow validation
-        form.setTouched(Object.keys(validateObj).reduce((acc, cur) => {
-            acc[cur] = true;
-            return acc;
-        }, {}));
-        if (validatingEmailRef.current || validatingPhoneRef.current) {
+    const submitOtp = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!phone || !otp) {
             return;
         }
-        setTimeout(() => {
-            form.onSubmit((v) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-                if (Object.keys(form.errors).length)
-                    return;
-                let newShowOtpPhone = null;
-                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.PhoneOtpBlock) > -1) {
-                    // not submit yet, open otp
-                    const fieldName = (_b = (_a = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.PhoneOtpBlock)) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value;
-                    if ((_c = v[fieldName]) === null || _c === void 0 ? void 0 : _c.startsWith('+')) {
-                        newShowOtpPhone = {
-                            phone: v[fieldName],
-                            type: 'phone',
-                        };
-                    }
-                }
-                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.WhatsappOtpBlock) > -1) {
-                    // not submit yet, open otp
-                    const fieldName = (_e = (_d = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.WhatsappOtpBlock)) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.value;
-                    if ((_f = v[fieldName]) === null || _f === void 0 ? void 0 : _f.startsWith('+')) {
-                        newShowOtpPhone = {
-                            phone: v[fieldName],
-                            type: 'whatsapp',
-                        };
-                    }
-                }
-                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock) > -1) {
-                    // not submit yet, open otp
-                    const fieldName = (_h = (_g = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock)) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.value;
-                    if ((_j = v[fieldName]) === null || _j === void 0 ? void 0 : _j.startsWith('+')) {
-                        newShowOtpPhone = {
-                            phone: v[fieldName],
-                            type: 'zalo',
-                        };
-                    }
-                }
-                if (newShowOtpPhone) {
-                    setIsSubmitLoading(true);
-                    Service.sendSMSOtpLead(newShowOtpPhone)
-                        .then((res) => {
-                        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);
-                            return;
-                        }
-                        setShowOtpPhone(newShowOtpPhone);
-                    })
-                        .finally(() => {
-                        setIsSubmitLoading(false);
-                    });
-                    return;
-                }
-                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
-            })(e);
-        }, 100);
-    };
-    const onOpenChange = (_open) => {
-        setOpen(_open);
-        if (!_open) {
-            setTimeout(() => {
-                onClose();
-            }, 250);
-        }
-    };
-    const { width: imageBackgroundWidth, height: imageBackgroundHeight, loaded: imageBackgroundLoaded, } = useImageSize(imageBackground);
-    const { loaded: imageMobileLoaded } = useImageSize(imageMobile);
-    const { loaded: imageDesktopLoaded } = useImageSize(imageDesktop);
-    const renderAfterImageSizes = imageMobileLoaded &&
-        imageDesktopLoaded &&
-        (isFullscreen ? imageBackgroundLoaded : true);
-    const ButtonSubmit = !((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) && (React__default.createElement(Button$1, { size: "lg", id: "lead-submit", type: "submit", variant: "filled", className: "leadgen-btn leadgen-btn_action", color: primaryColor, loading: isSubmitLoading }, popUpSubmitText));
-    const LinkButtonBlock = listBlockAdded.filter(({ name }) => name == LEADGEN_BLOCK.LinkButtonBlock);
-    const ButtonLink = !!(LinkButtonBlock === null || LinkButtonBlock === void 0 ? void 0 : LinkButtonBlock.length) && (React__default.createElement(React__default.Fragment, null, LinkButtonBlock.map((item, index) => {
-        var _a, _b, _c;
-        return (React__default.createElement(Button$1, { key: `${item.name}-${index}`, component: "a", href: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.url, target: ((_b = item === null || item === void 0 ? void 0 : item.data) === null || _b === void 0 ? void 0 : _b.newtab) ? '_blank' : undefined, size: "lg", variant: "filled", className: "leadgen-btn leadgen-btn_action", color: primaryColor, onClick: () => {
-                onClose === null || onClose === void 0 ? void 0 : onClose();
-                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));
-    })));
-    const PopupHeader = showHeader && (React__default.createElement("header", { className: clsx('leadgen-header', { 'leadgen-header_only': onlyHeader }) }, LEADGEN_SHOW_HEADER.includes(currentLayout) ? (React__default.createElement(HeaderImage, { src: imageMobile, className: "lead-modal__image" })) : (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(HeaderImage, { src: imageDesktop, className: "le-only-desktop lead-modal__image" }),
-        React__default.createElement(HeaderImage, { src: imageMobile, className: "le-only-mobile lead-modal__image" })))));
-    const PopupEmpty = showEmpty && (React__default.createElement(EmptyComponent, { onClose: onClose, onContinue: () => setShowEmpty(false) }));
-    const PopupForm = (React__default.createElement(LeadFormProvider, { form: form },
-        React__default.createElement("form", { ref: formRef, className: "leadgen-form", onSubmit: middlewareOnSubmit },
-            React__default.createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, header: headerInsideFormContainer && PopupHeader, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
-                React__default.createElement("div", { className: "leadgen-form_inner" },
-                    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);
-        } }));
-    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', {
-            'leadgen-content_small': limitFieldsLightBoxB,
-        }) },
-        !headerInsideFormContainer && PopupHeader,
-        !onlyHeader && (React__default.createElement("div", { className: "leadgen-inner" },
-            PopupThankYou,
-            !showThankyou && (React__default.createElement(React__default.Fragment, null,
-                PopupOtp,
-                PopupEmpty,
-                !(showOtpPhone || showEmpty) && PopupForm))))));
-    const styleOverlay = useMemo(() => {
-        let styleContent = `.leadgen-inner {background-repeat: no-repeat;background-size: cover;background-position:center;}`;
-        if (isMobile && imageOverlayMobile) {
-            styleContent += `.leadgen-inner {background-image: url(${imageOverlayMobile});}`;
+        setIsSubmitLoading(true);
+        const res = yield Service.verifyOtpLead({
+            phone,
+            otp,
+            type: otpType,
+        });
+        const respMessage = res === null || res === void 0 ? void 0 : res._messages[0];
+        if (respMessage === 'Verify successfully' ||
+            respMessage === 'Verify WhatsApp OTP sucess' ||
+            respMessage === 'Verify Zalo OTP sucess') {
+            onSuccess();
         }
-        if (!isMobile && imageOverlayDesktop) {
-            styleContent += `@media screen and (min-width:768px) {.leadgen-inner {background-image: url(${imageOverlayDesktop});}}`;
+        else if (respMessage === 'This phone number was verified') {
+            onSuccess();
         }
-        return styleContent;
-    }, [isMobile, imageOverlayDesktop, imageOverlayMobile]);
-    const PopupWrapper = (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("style", { dangerouslySetInnerHTML: { __html: styleOverlay } }),
-        React__default.createElement("div", { className: clsx('leadgen-wrapper', {
-                'leadgen-wrapper_small': limitFieldsLightBoxB,
-            }) },
-            showButtonClose && (React__default.createElement(CloseButton, { onClose: () => onOpenChange(false), containerClassName: "leadgen-close_btn" })),
-            PopupContent)));
-    const popupContainerClassName = clsx('leadgen', `leadgen-${currentLayout}`, {
-        'leadgen-lightbox': isLightBox,
-        'leadgen-inline': isInPage,
-        'leadgen-slider': isSlider,
+        else {
+            setErrorMsg(respMessage || 'something Wrong');
+            // setIsShowError(true)
+            // setStatusVerifyOTP('sent')
+            // pushNotifications({
+            //   title: res?._messages[0] || defaultError,
+            //   message: '',
+            //   type: 'danger',
+            // })
+        }
+        setIsSubmitLoading(false);
     });
-    const PopupContainer = isDrawer ? (React__default.createElement(DrawerComponent, { fadeFromIndex: ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
-        PopupWrapper,
-        React__default.createElement("div", { style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
-        isFullscreen ? (React__default.createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
-                aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
-            } })) : null,
-        PopupWrapper));
-    if (!renderAfterImageSizes)
-        return null;
-    if (isLightBox || isFullscreen || isSlider) {
-        return PopupContainer;
-    }
-    else if (isSidebar) {
-        return React__default.createElement(SideBarLayout, { content: PopupContainer });
-    }
-    else if (isInline) {
-        return (React__default.createElement(InlineLayout, { content: PopupContainer, inlinePosition: extraFields.popupInlinePosition }));
-    }
-    return null;
-};
-
-const SkinLayout = ({ popupId, link, linkText, linkNewTab, onClose, imageMobile, imageDesktop, currentLayout, onOtherSubmit, }) => {
-    const currentPath = location.pathname;
-    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
-    const { width: imageDesktopWidth, height: imageDesktopHeight, loaded: imageDesktopLoaded, } = useImageSize(imageDesktop);
-    if (!imageMobileLoaded || !imageDesktopLoaded)
-        return null;
-    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": currentPath, "data-popup-type": "skin_ab" },
-        currentLayout == 'SkinA' ? (React__default.createElement("aside", { className: "le-only-desktop" },
-            React__default.createElement("div", { className: "le-skin-a-desktop" },
-                React__default.createElement("div", { style: { position: 'relative' } },
-                    React__default.createElement("img", { src: imageDesktop, style: {
-                            aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
-                        } }),
-                    React__default.createElement("a", { style: {
-                            position: 'absolute',
-                            top: '75%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            textAlign: 'center',
-                            width: 'calc(100% - 15px)',
-                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
-                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn js-popup-other-submit" }, linkText)),
-                    React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))) : currentLayout == 'SkinB' ? (React__default.createElement("aside", { className: "le-only-desktop" },
-            React__default.createElement("div", { className: "" },
-                React__default.createElement("div", { style: { position: 'relative', zIndex: 10000 } },
-                    React__default.createElement("img", { src: imageDesktop, style: {
-                            width: '100%',
-                            aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
-                        } }),
-                    React__default.createElement("a", { style: {
-                            position: 'absolute',
-                            top: '75%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            textAlign: 'center',
-                            width: '100%',
-                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
-                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn-mobile js-popup-other-submit" }, linkText)),
-                    React__default.createElement(CloseButton, { containerClassName: "close-button-top-right", onClose: onClose }))))) : null,
-        React__default.createElement("aside", { className: "le-only-mobile" },
-            React__default.createElement("div", { className: "le-skin-mobile" },
-                React__default.createElement("div", { style: { position: 'relative' } },
-                    isVideo(imageMobile) ? (React__default.createElement("video", { muted: true, autoPlay: true, loop: true },
-                        React__default.createElement("source", { src: imageMobile, type: "video/mp4" }))) : (React__default.createElement("img", { src: imageMobile, style: {
-                            width: '100%',
-                            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
-                        } })),
-                    React__default.createElement("a", { style: {
-                            position: 'absolute',
-                            top: '82%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            textAlign: 'center',
-                            maxWidth: 'calc(100% - 15px)',
-                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
-                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn-mobile js-popup-other-submit" }, linkText)),
-                    React__default.createElement(CloseButton, { containerClassName: "close-button-top-right", svgClassName: "le-mobile-btn", onClose: onClose }))))));
+    useEffect(() => {
+        setTimeout(() => {
+            if (resendTimer > 0) {
+                setResendTimer((r) => r - 1);
+            }
+        }, 1000);
+    }, [resendTimer]);
+    useEffect(() => {
+        if (autoSendWhenOpen && !resendTimer) {
+            sendOtp();
+        }
+    }, []);
+    return (React__default.createElement("form", { onSubmit: (e) => {
+            e.preventDefault();
+            submitOtp();
+        }, className: "lead-phone-otp-form leadgen-form leadgen-form_otp" },
+        React__default.createElement(FormContainer, { title: t('lead.otp.title'), description: t('lead.otp.desc', {
+                phone: `<strong>${displayPhone}</strong>`,
+            }), footer: React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Button$1, { type: "submit", size: "lg", variant: "filled", className: `lead-modal__btn leadgen-btn_action ${LEAD_CLASS}`, color: primaryColor, disabled: !otp, loading: isSubmitLoading }, t('lead.otp.verify')),
+                React__default.createElement(Button$1, { type: "button", size: "lg", variant: "light", className: `lead-modal__btn lead-phone-otp-button leadgen-btn_action ${LEAD_CLASS}`, color: primaryColor, onClick: () => {
+                        sendOtp();
+                    }, disabled: !!resendTimer }, t('lead.otp.resend', {
+                    timer: resendTimer ? ` (${resendTimer}s)` : '',
+                }))) },
+            React__default.createElement("div", { className: "leadgen-form_inner" },
+                React__default.createElement(Input.Wrapper, { error: isDirty ? errorMsg : undefined, className: "leadgen-form_field" },
+                    React__default.createElement(OTP, { ref: inputRef, name: '_' + name + '-otp', value: otp, onChange: (v) => {
+                            setIsDirty(true);
+                            setOtp(v.toString());
+                            if (isDirty && !v)
+                                setErrorMsg('OTP is required');
+                            else
+                                setErrorMsg(undefined);
+                        } }))))));
 };
 
 // url: imageBlocks.imageMobile.data.url
 // newTab: imageBlocks.imageMobile.data.newtab
 // image: campaignShow.image
 // imageDestkop: campaignShow.image_desktop
-const TabLayout = ({ popupId, url, newTab, image, onClose, onOtherSubmit, }) => {
-    const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
-    if (!imageLoaded)
-        return null;
-    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "tab" },
-        React__default.createElement("div", { className: "le-tab-popup" },
-            React__default.createElement("div", { style: { position: 'relative' } },
-                React__default.createElement("a", { href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
-                    React__default.createElement("img", { className: "js-popup-other-submit", src: image, style: {
-                            aspectRatio: `${imageWidth}/${imageHeight}`,
-                        } })),
-                React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))));
-};
-
-// import mockLeadData from './mockLeadData'
-const listCampaignScheduled = [];
-const listCampaignScheduledToActivated = [];
-const listCampaignActiveButExpired = [];
-const listCampaignExcludeSonsored = [];
-const listCampaignDifferentSponsor = [];
-const listCampaignNotDisplayInRangeOfTime = [];
-function isMobile() {
-    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent);
-}
-const getShuffleArray = (array) => {
-    const newArray = [...array];
-    for (let i = newArray.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        const temp = newArray[i];
-        newArray[i] = newArray[j];
-        newArray[j] = temp;
-    }
-    return newArray;
-};
-const getTimeByTimezone = (timeZone = 'UTC') => {
-    const date = new Date();
-    return new Date(date.toLocaleString('en-US', { timeZone }));
-};
-const parseDateByCampaignTime = (dateStr) => {
-    // Format like this: 2023-04-04 00:00:00
-    try {
-        const [datePart, timePart] = dateStr.split(' ');
-        const [year, month, day] = datePart.split('-').map(Number);
-        const [hours, minutes, seconds] = timePart.split(':').map(Number);
-        /** JavaScript counts months from 0 to 11 */
-        return new Date(year, month - 1, day, hours, minutes, seconds);
-    }
-    catch (err) {
-        return null;
-    }
-};
-const checkCampaignNowInTimeframe = (c) => {
-    var _a;
-    const siteId = ((_a = c.site) === null || _a === void 0 ? void 0 : _a.id) || 1;
-    const startedAtStr = c.started_at;
-    const endedAtStr = c.ended_at;
-    const startedDate = parseDateByCampaignTime(startedAtStr);
-    const endedDate = parseDateByCampaignTime(endedAtStr);
-    if (!startedDate || !endedDate) {
-        return false;
-    }
-    const timeZone = LEAD_TIMEZONE_DATA[siteId];
-    const nowWithTimezoneMs = getTimeByTimezone(timeZone).getTime();
-    if (nowWithTimezoneMs <= endedDate.getTime() &&
-        nowWithTimezoneMs >= startedDate.getTime()) {
-        listCampaignScheduledToActivated.push(c);
-        return true;
-    }
-    return false;
-};
-function checkCampaignActiveButExpireAlready(c) {
-    var _a;
-    /** Do not setup timeframe for this campaign. No need to check */
-    if (c.forever === 1) {
-        return true;
-    }
-    const startedAtStr = c.started_at;
-    const endedAtStr = c.ended_at;
-    const startedDate = parseDateByCampaignTime(startedAtStr);
-    const endedDate = parseDateByCampaignTime(endedAtStr);
-    /** Do not setup timeframe for this campaign. No need to check */
-    if (!startedDate || !endedDate) {
-        return true;
-    }
-    const siteId = ((_a = c.site) === null || _a === void 0 ? void 0 : _a.id) || 1;
-    const timeZone = LEAD_TIMEZONE_DATA[siteId];
-    const nowWithTimezoneMs = getTimeByTimezone(timeZone).getTime();
-    /** Check if this expire already, do not show */
-    if (nowWithTimezoneMs > endedDate.getTime()) {
-        listCampaignActiveButExpired.push(c);
-        return false;
-    }
-    return true;
-}
-function shouldNotDisplayIfExcludeAllSponsors(c) {
-    var _a;
-    const excludeSponsored = Number((_a = c.rules.find((i) => i.rule == 'exclude_sponsored')) === null || _a === void 0 ? void 0 : _a.value);
-    const isSponsored = Boolean(document.querySelector('.hhg-disclaimer-text'));
-    if (isSponsored && excludeSponsored) {
-        listCampaignExcludeSonsored.push(c);
-        return true;
-    }
-    return false;
-}
-function shouldDisplayWithCurrentSponsor(c) {
+const LEADGEN_LAYOUT_NOT_SHOW_IN_MOBILE = [
+    LEADGEN_LAYOUT.Fullscreen,
+    LEADGEN_LAYOUT.Slider,
+];
+const LEADGEN_LIMIT_LIGHTBOXB = 6;
+const LEADGEN_SHOW_HEADER = [
+    'LightBoxA',
+    'InlineA',
+    LEADGEN_LAYOUT.Sidebar,
+    LEADGEN_LAYOUT.Slider,
+];
+const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, }) => {
     var _a, _b;
-    try {
-        // TODO: BE will rename `exclude_sponsored_list` later
-        const stringOrArray = (_a = c.rules.find((i) => i.rule == 'exclude_sponsored_list')) === null || _a === void 0 ? void 0 : _a.value;
-        const whiteListSponsors = stringOrArray instanceof Array ? stringOrArray : JSON.parse(stringOrArray);
-        const dataSponsoredId = Number((_b = document
-            .querySelector('[data-sponsored-id]')) === null || _b === void 0 ? void 0 : _b.getAttribute('data-sponsored-id'));
-        // There is no config for sponsor id and white list, should show as default
-        if (!dataSponsoredId ||
-            dataSponsoredId <= 0 ||
-            whiteListSponsors.length === 0) {
-            return true;
+    const { primaryColor } = useContext(LeadGenContext$1);
+    const { isMobile } = useScreenSize();
+    const [open, setOpen] = useState(!!campaignId);
+    const [showOtpPhone, setShowOtpPhone] = useState(null);
+    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+    const [snap, setSnap] = useState(0.8);
+    const formRef = useRef();
+    const onClose = () => {
+        if (showOtpPhone) {
+            setShowOtpPhone(null);
         }
-        // Check the dataSponsoredId exists in the white list or not.
-        const isExist = whiteListSponsors.find((s) => s.id == dataSponsoredId);
-        if (isExist) {
-            return true;
+        else {
+            onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
         }
-        listCampaignDifferentSponsor.push({ id: c.id, rules: c.rules });
-        return false;
-    }
-    catch (err) {
-        // Default is show
-        return true;
-    }
-}
-const filterFnCampaign = (c) => {
-    if (shouldNotDisplayIfExcludeAllSponsors(c)) {
-        return false;
-    }
-    else if (!shouldDisplayWithCurrentSponsor(c)) {
-        return false;
-    }
-    /** Active */
-    if (c.formatted_status === 1) {
-        return checkCampaignActiveButExpireAlready(c);
-    }
-    /** Schedule */
-    if (c.formatted_status === 0) {
-        listCampaignScheduled.push(c);
-        return checkCampaignNowInTimeframe(c);
+    };
+    const textBlocks = JSON.parse(extraFields.textBlocks);
+    const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
+    const actionBlocks = JSON.parse(extraFields.actionBlocks);
+    const popUpSubmitText = actionBlocks.submitBlock.data.value;
+    const currentPath = location.pathname;
+    const { align: descriptionAlign, value: description } = textBlocks.subtitleBlock.data || {};
+    const { align: titleAlign } = textBlocks.titleBlock.data || {};
+    const isSlider = currentLayout === LEADGEN_LAYOUT.Slider;
+    const isSidebar = currentLayout === LEADGEN_LAYOUT.Sidebar;
+    const isLightBox = currentLayout.includes('LightBox');
+    const isLightBoxA = currentLayout === LEADGEN_LAYOUT.LightBoxA;
+    const isLightBoxB = currentLayout === LEADGEN_LAYOUT.LightBoxB;
+    const isInline = currentLayout.includes('Inline');
+    const isFullscreen = currentLayout === LEADGEN_LAYOUT.Fullscreen;
+    const isInPage = isInline || isSidebar;
+    const isDrawer = isLightBoxB && isMobile;
+    const limitFieldsLightBoxB = isLightBoxB && listBlockAdded.length <= LEADGEN_LIMIT_LIGHTBOXB;
+    const hasForm = isLightBoxA
+        ? listBlockAdded.some((item) => LEADGEN_BLOCK_INPUT.some((k) => k === (item === null || item === void 0 ? void 0 : item.name)))
+        : true;
+    const headerInsideFormContainer = isSlider || isLightBoxA || isFullscreen;
+    const showHeader = !!imageMobile || !!imageDesktop;
+    const onlyHeader = !title && !description;
+    const showButtonClose = !isInline;
+    if (window.innerWidth < 769 &&
+        LEADGEN_LAYOUT_NOT_SHOW_IN_MOBILE.includes(currentLayout)) {
+        console.log('😎 Not show fullscreen, slider on mobile ');
+        return null;
     }
-    return false;
-};
-const fillterApprearanceTimeCampaign = (c) => {
-    var _a;
-    try {
-        const isTimeInRange = (currentTime, startTime, endTime) => {
-            const startParts = startTime.split(':');
-            const endParts = endTime.split(':');
-            const startDate = new Date();
-            startDate.setHours(Number(startParts[0]), Number(startParts[1]), 0, 0);
-            const endDate = new Date();
-            endDate.setHours(Number(endParts[0]), Number(endParts[1]), 0, 0);
-            return currentTime >= startDate && currentTime <= endDate;
-        };
-        const rulesApprValue = (_a = c.rules.find((i) => i.rule == 'appearance_time')) === null || _a === void 0 ? void 0 : _a.value;
-        const startTime = rulesApprValue.startTime;
-        const endTime = rulesApprValue.endTime || '23:59';
-        if (!startTime) {
-            return true;
+    useEffect(() => {
+        if (isLightBox || isFullscreen) {
+            document.body.classList.add('noscroll');
         }
-        if (isTimeInRange(new Date(), startTime, endTime)) {
-            return true;
+        if (!window.intlTelInputUtils) {
+            require('intl-tel-input/build/js/utils');
         }
-        listCampaignNotDisplayInRangeOfTime.push(c);
-        return false;
-    }
-    catch (err) {
-        return true;
-    }
-};
-let timeoutRef = null;
-let LEAD_SCROLL_EVENT = null;
-function clearPassiveEvent() {
-    if (timeoutRef) {
-        clearTimeout(timeoutRef);
-        timeoutRef = null;
-    }
-    if (LEAD_SCROLL_EVENT) {
-        window.removeEventListener('scroll', LEAD_SCROLL_EVENT);
-        LEAD_SCROLL_EVENT = null;
-    }
-}
-function checkShowPopup({ leadApi, leadSiteId, leadDomain, onShowPopup, DEBUG_URL, }) {
-    // clear previous passive event, check for new condition
-    clearPassiveEvent();
-    const leadCurrentUrl = DEBUG_URL ||
-        ('https://' +
-            location.hostname +
-            location.pathname +
-            location.search).toLowerCase();
-    fetch(leadApi + 'api/campaign/' + leadSiteId, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-            url: leadCurrentUrl,
-            ga_client_id: getCookie('_ga') || null,
-        }),
-    })
-        .then((response) => {
-        return response.json();
-        // return mockLeadData || response.json()
-    })
-        .then((data) => {
-        var _a, _b, _c, _d;
-        LeadLog('List campagin: ', data);
-        LEAD_RESET_VAR();
-        if (data._status == 1) {
-            const campaigns = (((_b = (_a = data._data) === null || _a === void 0 ? void 0 : _a.campaigns) === null || _b === void 0 ? void 0 : _b.filter(filterFnCampaign)) || []).filter(fillterApprearanceTimeCampaign);
-            if (!getCookie('hhg-id')) {
-                setCookie('hhg-id', v1(), {
-                    domain: '.' + leadDomain,
-                    path: '/',
-                });
-                LeadLog('😍 Set HHG ID cookie');
-            }
-            // getCookie('hhg-id')
-            // TODO: HP-534 Filter desktop
-            let campaignsDevice = [];
-            if (isMobile()) {
-                campaignsDevice = campaigns.filter((c) => c.device_types.some((d) => d.id == LEAD_DEVICE_TYPE.MOBILE));
-            }
-            else {
-                campaignsDevice = campaigns.filter((c) => c.device_types.some((d) => d.id == LEAD_DEVICE_TYPE.DESKTOP));
-            }
-            LeadLog(`👓 campaignsDevice`, campaignsDevice);
-            LeadLog('--listCampaignScheduled', listCampaignScheduled);
-            LeadLog('--listCampaignScheduledToActivated', listCampaignScheduledToActivated);
-            LeadLog('--listCampaignActiveButExpired', listCampaignActiveButExpired);
-            LeadLog('--listCampaignExcludeSonsored', listCampaignExcludeSonsored);
-            LeadLog('--listCampaignDifferentSponsor', listCampaignDifferentSponsor);
-            LeadLog('--listCampaignNotDisplayInRangeOfTime', listCampaignNotDisplayInRangeOfTime);
-            // Check links
-            let listLinksObj = campaignsDevice
-                .map((i, index) => i.targets
-                .filter((i) => i.type == CAMPAIGN_TARGET_TYPE.LINKS)
-                .map((i) => (Object.assign(Object.assign({}, i), { campaignIndex: index }))))
-                .flat(1);
-            // Check list link match current href
-            listLinksObj = listLinksObj.filter((i) => {
-                var _a;
-                const target = new URL(String(i.target).toLowerCase());
-                if (i.option == 'exact_match')
-                    // FOR TEST LOCAL:
-                    // return Boolean(location.pathname === target.pathname)
-                    return Boolean(leadCurrentUrl === ((_a = target.href) === null || _a === void 0 ? void 0 : _a.toLowerCase()));
-                if (i.option == 'start_with') {
-                    // FOR TEST LOCAL:
-                    // if (location.pathname.includes(target.pathname)) {
-                    if (leadCurrentUrl.includes(String(i.target).toLowerCase())) {
-                        const listExcluding = i.sub_target
-                            .filter((i) => i.option == 'excluding')
-                            .map((i) => { var _a; return (_a = i.value) === null || _a === void 0 ? void 0 : _a.toLowerCase(); });
-                        return !listExcluding.includes(leadCurrentUrl.split('?')[0]);
-                    }
-                    else {
-                        return false;
-                    }
-                }
-            });
-            // Check tags
-            const listMetaTag = Array.from(document.getElementsByTagName('META')).filter((i) => i.getAttribute('property') == 'article:tag');
-            const listTags = listMetaTag.map((i) => i.content);
-            let listCampaignHasTag = [];
-            let listTagsObj = [];
-            if (listTags && listTags.length) {
-                listCampaignHasTag = campaignsDevice
-                    .map((i, index) => i.targets
-                    .filter((i) => i.type == CAMPAIGN_TARGET_TYPE.TAGS)
-                    .map((i) => (Object.assign(Object.assign({}, i), { campaignIndex: index }))))
-                    .flat(1);
-                listTagsObj = listCampaignHasTag.filter((i) => listTags.includes(i.target));
-            }
-            const listCampaginsMatch = [...listLinksObj, ...listTagsObj];
-            const cookieKeys = document.cookie
-                .split('; ')
-                .map((i) => i.split('=')[0]);
-            const listCampaignCodeSubmited = cookieKeys.filter((i) => i.includes('lead_submited'));
-            LeadLog(`--listCampaignCodeSubmited`, listCampaignCodeSubmited);
-            const listCampaignCodeClosed = cookieKeys.filter((i) => i.includes('lead_closed'));
-            LeadLog(`--listCampaignCodeClosed`, listCampaignCodeClosed);
-            const listCampaignSubmitedClosed = [
-                ...listCampaignCodeSubmited,
-                ...listCampaignCodeClosed,
-            ];
-            const listCampaignNoSubmitedClosed = listCampaginsMatch.filter((i) => {
-                const hasSubmited = listCampaignSubmitedClosed.some((k) => k.includes(campaignsDevice[i.campaignIndex].code));
-                return !hasSubmited;
-            });
-            const listCampaignValid = getShuffleArray(listCampaignNoSubmitedClosed);
-            // .sort(
-            //   (a, b) =>
-            //     (listCampaignValid[a.campaignIndex]?.score || 0) -
-            //     (listCampaignValid[b.campaignIndex]?.score || 0),
-            // )
-            LeadLog('--listCampaignValid : ', listCampaignValid);
-            if (listCampaignValid && listCampaignValid.length) {
-                const CAMPAIGN_SHOW = campaignsDevice[listCampaignValid[0].campaignIndex];
-                LeadLog(`CAMPAIGN_SHOW`, CAMPAIGN_SHOW);
-                const { rules } = CAMPAIGN_SHOW;
-                // CHECK RULE TRIGGER POPUP
-                const timeoutRule = Number((_c = rules.find((i) => i.rule == 'time')) === null || _c === void 0 ? void 0 : _c.value);
-                LeadLog(`timeoutRule`, timeoutRule);
-                const scrollRule = Number((_d = rules.find((i) => i.rule == 'scroll')) === null || _d === void 0 ? void 0 : _d.value);
-                LeadLog(`scrollRule`, scrollRule);
-                let impressionAction = 'TIME';
-                if (Number.isInteger(timeoutRule)) {
-                    impressionAction = 'TIME';
-                    LeadLog('✨ SHOW AWESOME POPUP AFTER: ', timeoutRule, ' seconds');
-                    timeoutRef = setTimeout(() => {
-                        onShowPopup === null || onShowPopup === void 0 ? void 0 : onShowPopup(CAMPAIGN_SHOW, impressionAction);
-                    }, timeoutRule * 1000);
+        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,
+    });
+    const onFocus = (e) => {
+        const target = e.target;
+        target.scrollIntoView({
+            block: 'center',
+            inline: 'nearest',
+            behavior: 'auto',
+        });
+    };
+    const middlewareOnSubmit = (e) => {
+        e.preventDefault();
+        // mark all as touched to allow validation
+        const fields = Object.keys(validateObj);
+        const fieldStatus = fields.reduce((acc, cur) => {
+            acc[cur] = true;
+            return acc;
+        }, {});
+        form.setTouched(fieldStatus);
+        if (validatingEmailRef.current || validatingPhoneRef.current) {
+            return;
+        }
+        setTimeout(() => {
+            form.onSubmit((v) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                if (Object.keys(form.errors).length)
+                    return;
+                let newShowOtpPhone = null;
+                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.PhoneOtpBlock) > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_b = (_a = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.PhoneOtpBlock)) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value;
+                    if ((_c = v[fieldName]) === null || _c === void 0 ? void 0 : _c.startsWith('+')) {
+                        newShowOtpPhone = {
+                            phone: v[fieldName],
+                            type: 'phone',
+                        };
+                    }
                 }
-                if (Number.isInteger(scrollRule)) {
-                    impressionAction = 'SCROLL';
-                    LeadLog('✨ SHOW AWESOME AFTER: SCROLL', scrollRule, ' %');
-                    const $p = document.querySelector(`[data-url="${location.pathname}"]`) ||
-                        document.querySelector('body');
-                    const pct = $p.getBoundingClientRect().top;
-                    const pb = $p.offsetHeight;
-                    LeadLog(`👓 Element check scroll: `, $p);
-                    LEAD_SCROLL_EVENT = function leadScollCheckHandler() {
-                        const wt = window.pageYOffset || document.documentElement.scrollTop;
-                        let percent = 0;
-                        if (wt >= pct) {
-                            percent = Math.round(((wt - pct) / (pb - innerHeight)) * 100);
-                        }
-                        LeadLog('---Scroll', percent, scrollRule);
-                        // TODO: CHECK FOOTER HEIGHT
-                        if (percent >= scrollRule) {
-                            window.removeEventListener('scroll', LEAD_SCROLL_EVENT);
-                            onShowPopup === null || onShowPopup === void 0 ? void 0 : onShowPopup(CAMPAIGN_SHOW, impressionAction);
+                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.WhatsappOtpBlock) > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_e = (_d = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.WhatsappOtpBlock)) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.value;
+                    if ((_f = v[fieldName]) === null || _f === void 0 ? void 0 : _f.startsWith('+')) {
+                        newShowOtpPhone = {
+                            phone: v[fieldName],
+                            type: 'whatsapp',
+                        };
+                    }
+                }
+                if (listBlockAdded.findIndex((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock) > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_h = (_g = listBlockAdded.find((x) => x.name === LEADGEN_BLOCK.ZaloOtpBlock)) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.value;
+                    if ((_j = v[fieldName]) === null || _j === void 0 ? void 0 : _j.startsWith('+')) {
+                        newShowOtpPhone = {
+                            phone: v[fieldName],
+                            type: 'zalo',
+                        };
+                    }
+                }
+                if (newShowOtpPhone) {
+                    setIsSubmitLoading(true);
+                    Service.sendSMSOtpLead(newShowOtpPhone)
+                        .then((res) => {
+                        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);
+                            return;
                         }
-                    };
-                    window.addEventListener('scroll', LEAD_SCROLL_EVENT, {
-                        passive: true,
+                        setShowOtpPhone(newShowOtpPhone);
+                    })
+                        .finally(() => {
+                        setIsSubmitLoading(false);
                     });
+                    return;
                 }
-            }
-            else {
-                LeadLog('🚧 No lead campaigns on current URL, tags');
-            }
+                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, v);
+            })(e);
+        }, 100);
+    };
+    const onOpenChange = (_open) => {
+        setOpen(_open);
+        if (!_open) {
+            setTimeout(() => {
+                onClose();
+            }, 250);
         }
-    })
-        .catch((err) => {
-        LeadLog(`Lead error: `, err);
+    };
+    const { width: imageBackgroundWidth, height: imageBackgroundHeight, loaded: imageBackgroundLoaded, } = useImageSize(imageBackground);
+    const { loaded: imageMobileLoaded } = useImageSize(imageMobile);
+    const { loaded: imageDesktopLoaded } = useImageSize(imageDesktop);
+    const renderAfterImageSizes = imageMobileLoaded &&
+        imageDesktopLoaded &&
+        (isFullscreen ? imageBackgroundLoaded : true);
+    const ButtonSubmit = useMemo(() => {
+        var _a;
+        return !((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) && (React__default.createElement(Button$1, { size: "lg", id: "lead-submit", type: "submit", variant: "filled", className: "leadgen-btn leadgen-btn_action", loading: isSubmitLoading }, popUpSubmitText));
+    }, [popUpSubmitText, isSubmitLoading, (_b = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _b === void 0 ? void 0 : _b.isHide]);
+    const LinkButtonBlock = listBlockAdded.filter(({ name }) => name == LEADGEN_BLOCK.LinkButtonBlock);
+    const ButtonLink = !!(LinkButtonBlock === null || LinkButtonBlock === void 0 ? void 0 : LinkButtonBlock.length) && (React__default.createElement(React__default.Fragment, null, LinkButtonBlock.map((item, index) => {
+        var _a, _b, _c;
+        return (React__default.createElement(Button$1, { key: `${item.name}-${index}`, component: "a", href: (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.url, target: ((_b = item === null || item === void 0 ? void 0 : item.data) === null || _b === void 0 ? void 0 : _b.newtab) ? '_blank' : undefined, size: "lg", variant: "filled", className: "leadgen-btn leadgen-btn_action", color: primaryColor, onClick: () => {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+                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));
+    })));
+    const PopupHeader = showHeader && (React__default.createElement("header", { className: clsx('leadgen-header', { 'leadgen-header_only': onlyHeader }) }, LEADGEN_SHOW_HEADER.includes(currentLayout) ? (React__default.createElement(HeaderImage, { src: imageMobile, className: "lead-modal__image" })) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(HeaderImage, { src: imageDesktop, className: "le-only-desktop lead-modal__image" }),
+        React__default.createElement(HeaderImage, { src: imageMobile, className: "le-only-mobile lead-modal__image" })))));
+    const PopupEmpty = showEmpty && (React__default.createElement(EmptyComponent, { onClose: onClose, onContinue: () => setShowEmpty(false) }));
+    const PopupForm = (React__default.createElement(LeadFormProvider, { form: form },
+        React__default.createElement("form", { ref: formRef, className: "leadgen-form", onFocus: onFocus, onSubmit: middlewareOnSubmit },
+            React__default.createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, header: headerInsideFormContainer && PopupHeader, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
+                React__default.createElement("div", { className: "leadgen-form_inner" },
+                    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);
+        } }));
+    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', {
+            'leadgen-content_small': limitFieldsLightBoxB,
+        }) },
+        !headerInsideFormContainer && PopupHeader,
+        !onlyHeader && (React__default.createElement("div", { className: "leadgen-inner" },
+            PopupThankYou,
+            !showThankyou && (React__default.createElement(React__default.Fragment, null,
+                PopupOtp,
+                PopupEmpty,
+                !(showOtpPhone || showEmpty) && PopupForm))))));
+    const styleOverlay = useMemo(() => {
+        let styleContent = `.leadgen-inner {background-repeat: no-repeat;background-size: cover;background-position:center;}`;
+        if (isMobile && imageOverlayMobile) {
+            styleContent += `.leadgen-inner {background-image: url(${imageOverlayMobile});}`;
+        }
+        if (!isMobile && imageOverlayDesktop) {
+            styleContent += `@media screen and (min-width:768px) {.leadgen-inner {background-image: url(${imageOverlayDesktop});}}`;
+        }
+        return styleContent;
+    }, [isMobile, imageOverlayDesktop, imageOverlayMobile]);
+    const PopupWrapper = (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("style", { dangerouslySetInnerHTML: { __html: styleOverlay } }),
+        React__default.createElement("div", { className: clsx('leadgen-wrapper', {
+                'leadgen-wrapper_small': limitFieldsLightBoxB,
+            }) },
+            showButtonClose && (React__default.createElement(CloseButton, { onClose: () => onOpenChange(false), containerClassName: "leadgen-close_btn" })),
+            PopupContent)));
+    const popupContainerClassName = clsx('leadgen', `leadgen-${currentLayout}`, {
+        'leadgen-lightbox': isLightBox,
+        'leadgen-inline': isInPage,
+        'leadgen-slider': isSlider,
     });
-}
-const LeadLog = (...params) => {
-    if (process.env.NODE_ENV !== 'production' ||
-        (process.env.NEXT_PUBLIC_DEPLOY_ENV &&
-            process.env.NEXT_PUBLIC_DEPLOY_ENV !== 'production') ||
-        (typeof localStorage !== 'undefined' &&
-            localStorage.getItem('hhg_debug') === 'true')) {
-        console.log(...params);
+    const PopupContainer = isDrawer ? (React__default.createElement(DrawerComponent, { fadeFromIndex: ZINDEX_SSO - 9e6, open: open, snapPoints: [0.8, 1], activeSnapPoint: snap, setActiveSnapPoint: setSnap, onOpenChange: onOpenChange, overlayClassName: popupContainerClassName, className: "leadgen-drawer" },
+        PopupWrapper,
+        React__default.createElement("div", { style: { position: 'absolute', inset: 0, zIndex: snap === 1 ? -1 : 1 }, onClick: () => setSnap(1) }))) : (React__default.createElement("div", { id: popupId, "data-popup-url": currentPath, "data-popup-type": "lightbox-inline", className: popupContainerClassName },
+        isFullscreen ? (React__default.createElement("img", { className: "le-only-desktop le-fullscreen-img", draggable: false, src: imageBackground || '', style: {
+                aspectRatio: `${imageBackgroundWidth}/${imageBackgroundHeight}`,
+            } })) : null,
+        PopupWrapper));
+    if (!renderAfterImageSizes)
+        return null;
+    if (isLightBox || isFullscreen || isSlider) {
+        return PopupContainer;
+    }
+    else if (isSidebar) {
+        return React__default.createElement(SideBarLayout, { content: PopupContainer });
+    }
+    else if (isInline) {
+        return (React__default.createElement(InlineLayout, { content: PopupContainer, inlinePosition: extraFields.popupInlinePosition }));
     }
+    return null;
+};
+
+const SkinLayout = ({ popupId, link, linkText, linkNewTab, onClose, imageMobile, imageDesktop, currentLayout, onOtherSubmit, }) => {
+    const currentPath = location.pathname;
+    const { width: imageMobileWidth, height: imageMobileHeight, loaded: imageMobileLoaded, } = useImageSize(imageMobile);
+    const { width: imageDesktopWidth, height: imageDesktopHeight, loaded: imageDesktopLoaded, } = useImageSize(imageDesktop);
+    if (!imageMobileLoaded || !imageDesktopLoaded)
+        return null;
+    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": currentPath, "data-popup-type": "skin_ab" },
+        currentLayout == 'SkinA' ? (React__default.createElement("aside", { className: "le-only-desktop" },
+            React__default.createElement("div", { className: "le-skin-a-desktop" },
+                React__default.createElement("div", { style: { position: 'relative' } },
+                    React__default.createElement("img", { src: imageDesktop, style: {
+                            aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
+                        } }),
+                    React__default.createElement("a", { style: {
+                            position: 'absolute',
+                            top: '75%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            textAlign: 'center',
+                            width: 'calc(100% - 15px)',
+                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
+                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn js-popup-other-submit" }, linkText)),
+                    React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" }))))) : currentLayout == 'SkinB' ? (React__default.createElement("aside", { className: "le-only-desktop" },
+            React__default.createElement("div", { className: "" },
+                React__default.createElement("div", { style: { position: 'relative', zIndex: 10000 } },
+                    React__default.createElement("img", { src: imageDesktop, style: {
+                            width: '100%',
+                            aspectRatio: `${imageDesktopWidth}/${imageDesktopHeight}`,
+                        } }),
+                    React__default.createElement("a", { style: {
+                            position: 'absolute',
+                            top: '75%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            textAlign: 'center',
+                            width: '100%',
+                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
+                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn-mobile js-popup-other-submit" }, linkText)),
+                    React__default.createElement(CloseButton, { containerClassName: "close-button-top-right", onClose: onClose }))))) : null,
+        React__default.createElement("aside", { className: "le-only-mobile" },
+            React__default.createElement("div", { className: "le-skin-mobile" },
+                React__default.createElement("div", { style: { position: 'relative' } },
+                    isVideo(imageMobile) ? (React__default.createElement("video", { muted: true, autoPlay: true, loop: true },
+                        React__default.createElement("source", { src: imageMobile, type: "video/mp4" }))) : (React__default.createElement("img", { src: imageMobile, style: {
+                            width: '100%',
+                            aspectRatio: `${imageMobileWidth}/${imageMobileHeight}`,
+                        } })),
+                    React__default.createElement("a", { style: {
+                            position: 'absolute',
+                            top: '82%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            textAlign: 'center',
+                            maxWidth: 'calc(100% - 15px)',
+                        }, href: link, target: linkNewTab ? 'blank' : '_parent' },
+                        React__default.createElement("button", { onClick: onOtherSubmit, className: "le-joinbow-btn-mobile js-popup-other-submit" }, linkText)),
+                    React__default.createElement(CloseButton, { containerClassName: "close-button-top-right", svgClassName: "le-mobile-btn", onClose: onClose }))))));
+};
+
+// url: imageBlocks.imageMobile.data.url
+// newTab: imageBlocks.imageMobile.data.newtab
+// image: campaignShow.image
+// imageDestkop: campaignShow.image_desktop
+const TabLayout = ({ popupId, url, newTab, image, onClose, onOtherSubmit, }) => {
+    const { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
+    if (!imageLoaded)
+        return null;
+    return (React__default.createElement("div", { id: popupId, className: "lead-modal-wrapper", "data-popup-url": location.pathname, "data-popup-type": "tab" },
+        React__default.createElement("div", { className: "le-tab-popup" },
+            React__default.createElement("div", { style: { position: 'relative' } },
+                React__default.createElement("a", { href: url, target: newTab ? 'blank' : '_parent', onClick: onOtherSubmit },
+                    React__default.createElement("img", { className: "js-popup-other-submit", src: image, style: {
+                            aspectRatio: `${imageWidth}/${imageHeight}`,
+                        } })),
+                React__default.createElement(CloseButton, { onClose: onClose, containerClassName: "close-button-top-right" })))));
 };
 
 function getCategoryLevel(t = 'Xin chao {{category_2}} extra') {
@@ -3177,7 +4379,7 @@ function getCategoryLevel(t = 'Xin chao {{category_2}} extra') {
 }
 const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, locale, showEmpty, setShowEmpty, userInfo, }) => {
     var _a, _b;
-    const { apiUrl, siteDomain } = useContext(LeadGenContext);
+    const { apiUrl, siteDomain } = useContext(LeadGenContext$1);
     useEffect(() => {
         const gaCookie = getCookie('_ga') || null;
         fetch(`${apiUrl}api/campaign/${code}/impression`, {
@@ -3572,7 +4774,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             leadStartTimeRef.current = Date.now();
         }
     }, [showCampaign]);
-    return (React__default.createElement(LeadGenContext.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" }, (styles) => {
@@ -3592,4 +4794,4 @@ LeadGen.Thankyou = Thankyou;
 LeadGen.OtpForm = OtpBlock$1;
 LeadGen.Close = Close;
 
-export { LeadGen };
+export { LeadGen, LeadGenSubscriptionBox };