@hhgtech/hhg-components 1.29.367 → 1.29.369-beta-1

package/build/esm/lead.js

@@ -1,44 +1,45 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-a80c6693.js';
-import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, useCallback } from 'react';
-import { createStyles, Box, Button as Button$2, 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-597deede.js';
+import React__default, { createContext, useMemo, useEffect, useRef, useState, useContext, forwardRef, useCallback, useImperativeHandle, memo } from 'react';
+import { createStyles, Box, Input as Input$1, clsx, Autocomplete, Checkbox as Checkbox$1, Radio as Radio$1, Select as Select$1, TextInput, NumberInput as NumberInput$1, Button as Button$2, 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-4207fae8.js';
-import { T as TranslationsContext } from './translationsContext-90b6afe2.js';
+import { createFormContext, useForm } from '@mantine/form';
+import { u as useTranslations } from './index-3df48ed3.js';
+import { T as TranslationsContext } from './translationsContext-75264091.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-adf81d95.js';
-import { T as Text } from './index-3af59329.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-ffa88d3d.js';
-import { D as DatePicker } from './index-25edd9d7.js';
-import { M as MAPPED_LOCALE } from './utils-bbcdef82.js';
-import '@mantine/dates';
-import { Z as ZINDEX_SSO } from './index-e35d4ac3.js';
-import './index-7d3b75e2.js';
-import './index-8d334024.js';
-import './useMantineLocale-3c15894c.js';
-import { B as Button$1 } from './index-7a817600.js';
-import './index.styles-8840440f.js';
+import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-440717e5.js';
+import { T as Text } from './index-fe73aae3.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-9b198336.js';
+import { D as DatePicker } from './index-29c90bd9.js';
+import { M as MAPPED_LOCALE } from './utils-9ad44422.js';
+import { DateInput } from '@mantine/dates';
+import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-9aee0d96.js';
+import { C as COMMON_DATE_TRANSLATE_KEY } from './index-42b2d9b5.js';
+import './index-74594561.js';
+import './useMantineLocale-64d31ceb.js';
+import { B as Button$1 } from './index-b74d4072.js';
+import './index.styles-b59189ca.js';
 import { useClickOutside } from '@mantine/hooks';
-import './other-27345fe3.js';
-import './index-d12ed430.js';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-7946fe73.js';
-import { B as Button } from './index-86b98bc5.js';
-import { H as Heading$1 } from './index-3aad9cea.js';
+import './other-e24b4153.js';
+import './index-d3657485.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-593e1f26.js';
+import { B as Button } from './index-3d18933f.js';
+import { H as Heading$1 } from './index-edfd0b23.js';
+import styled from '@emotion/styled';
 import { v1 } from 'uuid';
-import { i as isVideo } from './index-589d6100.js';
-import { D as DrawerComponent } from './index-41253c23.js';
-import { u as useScreenSize } from './useScreenSize-6a9f2903.js';
-import { createPortal } from 'react-dom';
 import { css } from '@emotion/react';
-import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { C as Close } from './Close-51c8b025.js';
+import { i as isVideo } from './index-d23eb4f1.js';
+import { D as DrawerComponent } from './index-e632f8a8.js';
+import { u as useScreenSize } from './useScreenSize-0e511139.js';
+import { createPortal } from 'react-dom';
+import { I as InputDate } from './InputDate-cdbcab92.js';
+import { C as Close } from './Close-ad9b18d7.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
-import './Locale-d927add8.js';
+import './Locale-e81e6be1.js';
 import 'classnames';
-import './useUniqueId-fa86fb02.js';
+import './useUniqueId-ddeb8a5e.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import 'date-fns/locale';
@@ -72,7 +73,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 +115,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 +136,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 +170,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,
@@ -181,6 +189,48 @@ const LEADGEN_BLOCK_IN_FORM = [
     LEADGEN_BLOCK.TncBlock,
 ];
 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 +246,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,6 +269,46 @@ 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 {
@@ -229,6 +319,13 @@ class Store {
 }
 const leadStore = new Store();
 
+const LEADGEN_API_METHOD = {
+    GET: 'get',
+    POST: 'POST',
+};
+const LEADGEN_API_PATH = {
+    V2_CAMPAIGN: 'api/v2/campaign',
+};
 const leadApi = {
     call(_a) {
         var { url, data = undefined } = _a, config = __rest(_a, ["url", "data"]);
@@ -332,8 +429,39 @@ const verifyOtpLead = ({ phone, otp, type, }) => {
         },
     });
 };
+const campaignGetByCode = (campaign_code) => {
+    return leadApi.call({
+        url: `${LEADGEN_API_PATH.V2_CAMPAIGN}/${campaign_code}`,
+        method: LEADGEN_API_METHOD.GET,
+    });
+};
+const campaignPostLead = ({ data }) => {
+    return leadApi.call({
+        url: 'api/v2/subscription-box',
+        method: LEADGEN_API_METHOD.POST,
+        data,
+    });
+};
+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,
+    campaignGetByCode,
+    campaignPostLead,
+    campaignPostImpression,
     validateEmailOrPhoneOnSubot,
     validateEmailOrPhoneOnLeadGen,
     validatePhoneNumberOnLeadGen,
@@ -1125,6 +1253,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",
@@ -1133,7 +1262,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 = {
@@ -1144,6 +1276,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",
@@ -1152,7 +1285,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 = {
@@ -1165,6 +1301,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",
@@ -1173,7 +1310,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 = {
@@ -1186,6 +1326,7 @@ var kmKH = {
 	"validator.phone": "សូម​វាយបញ្ចូល​លេខ​ឲ្យ​បាន​ត្រឹមត្រូវ",
 	"validator.emailUsed": "អ៊ីមែលត្រូវបានប្រើប្រាស់សម្រាប់យុទ្ធនាការនេះរួចហើយ។",
 	"validator.phoneUsed": "លេខទូរស័ព្ទរបស់អ្នកត្រូវបានប្រើប្រាស់សម្រាប់យុទ្ធនាការនេះរួចហើយ។",
+	"validator.dateInvalid": "កាលបរិច្ឆេទនេះមិនត្រឹមត្រូវទេ សូមធ្វើបច្ចុប្បន្នភាព។",
 	"lead.otp.title": "បញ្ចូល OTP",
 	"lead.otp.desc": "យើងបានផ្ញើ OTP ទៅកាន់លេខទូរសព្ទរបស់អ្នក {phone}",
 	"lead.otp.verify": "ផ្ទៀងផ្ទាត់",
@@ -1194,7 +1335,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 = {
@@ -1207,6 +1351,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",
@@ -1215,7 +1360,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 = {
@@ -1228,6 +1376,7 @@ var myMM = {
 	"validator.phone": "မှန်ကန်သော ဖုန်းနံပါတ်ထည့်သွင်းပါ",
 	"validator.emailUsed": "ဤအေကာင့်အတွက် အီးမေးလ်ကို အသုံးပြုပြီးဖြစ်ပါသည်။",
 	"validator.phoneUsed": "ဤအေကာင့်အတွက် သင့်ဖုန်းနံပါတ်ကို အသုံးပြုပြီးဖြစ်ပါသည်။",
+	"validator.dateInvalid": "ယနေ့စွဲမှားနေသည်၊ ကျေးဇူးပြု၍ ပြင်ဆင်ပါ။",
 	"lead.otp.title": "OTP ကိုထည့်ပါ",
 	"lead.otp.desc": "ကျွန်ုပ်တို့သည် OTP ကိုသင့်ဖုန်းနံပါတ် {phone} သို့ပို့ခဲ့သည်",
 	"lead.otp.verify": "အတည်ပြုပါ",
@@ -1236,7 +1385,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 = {
@@ -1249,6 +1401,7 @@ var thTH = {
 	"validator.phone": "กรุณาใส่ตัวเลขที่ถูกต้อง",
 	"validator.emailUsed": "อีเมลนี้ถูกใช้สำหรับแคมเปญนี้แล้ว",
 	"validator.phoneUsed": "หมายเลขโทรศัพท์ของคุณถูกใช้สำหรับแคมเปญนี้แล้ว",
+	"validator.dateInvalid": "วันที่นี้ไม่ถูกต้อง โปรดอัปเดต",
 	"lead.otp.title": "ป้อน OTP",
 	"lead.otp.desc": "เราได้ส่ง OTP ไปยังหมายเลขโทรศัพท์มือถือของคุณ {phone}",
 	"lead.otp.verify": "ยืนยัน",
@@ -1257,7 +1410,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 = {
@@ -1281,6 +1437,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",
@@ -1289,7 +1446,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 = {
@@ -1302,6 +1462,7 @@ var zhTW = {
 	"validator.phone": "請填入有效的電話號碼",
 	"validator.emailUsed": "此電子郵件已被使用於此活動。",
 	"validator.phoneUsed": "您的手機號碼已被使用於此活動。",
+	"validator.dateInvalid": "此日期無效，請更新.",
 	"lead.otp.title": "輸入 OTP",
 	"lead.otp.desc": "我們已將 OTP 發送到您的手機號碼 {phone}",
 	"lead.otp.verify": "驗證",
@@ -1310,7 +1471,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 = {
@@ -1322,6 +1486,7 @@ const translationsMap = {
     'my-MM': myMM,
     'km-KH': kmKH,
     'zh-TW': zhTW,
+    'zh-CN': zhTW,
     'th-TH': thTH,
     'tl-PH': enPH,
 };
@@ -1335,188 +1500,1201 @@ const getTranslations = (locale) => {
 
 const LeadGenContext = createContext({});
 
-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
+const LeadGenSubscriptionBoxContext = createContext({});
+const LeadGenSubscriptionBoxProvider = (props) => {
+    const { campaign_code, apiUrl: apiUrlProps, apiSubotUrl, locale, forceCampaign: forceCampaignProps, children, } = props;
+    const [forceCampaign, setForceCampaign] = useState(forceCampaignProps);
+    const leadGenSubscriptionBoxValue = useMemo(() => (Object.assign(Object.assign({}, props), { forceCampaign })), [campaign_code, locale, forceCampaign]);
+    const translationContextValue = { locale, values: getTranslations(locale) };
     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;
+        if (forceCampaignProps) {
+            setForceCampaign(forceCampaignProps);
+            return;
         }
-        else {
-            setWidth(16);
-            setHeight(9);
-            setLoaded(true);
+        if (campaign_code) {
+            Service.campaignGetByCode(campaign_code).then((res) => {
+                const { _data } = res || {};
+                const { campaigns } = _data || {};
+                setForceCampaign(formatCampaignDetail(campaigns));
+            });
         }
-    }, [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 { width: imageWidth, height: imageHeight, loaded: imageLoaded, } = useImageSize(image);
-    if (!imageLoaded)
+    }, [campaign_code]);
+    useEffect(() => {
+        leadStore.apiLeadUrl = apiUrlProps;
+        leadStore.apiSubotUrl = apiSubotUrl;
+        return () => {
+            setForceCampaign(null);
+        };
+    }, []);
+    if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
         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}` }, linkText)))))));
+    }
+    return (React__default.createElement(LeadGenSubscriptionBoxContext.Provider, { value: leadGenSubscriptionBoxValue },
+        React__default.createElement(TranslationsContext.Provider, { value: translationContextValue }, children)));
 };
 
-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) {
-                case '1th':
-                    target = allPTags[0];
-                    break;
-                case '2th':
-                    target = allPTags[1];
-                    break;
-                case '3th':
-                    target = allPTags[2];
-                    break;
-                case '4th':
-                    target = allPTags[3];
-                    break;
-                case '5th':
-                    target = allPTags[4];
-                    break;
-                case '6th':
-                    target = allPTags[5];
-                    break;
-                case '7th':
-                    target = allPTags[6];
-                    break;
-                case '8th':
-                    target = allPTags[7];
-                    break;
-                case '9th':
-                    target = allPTags[8];
-                    break;
-                case '10th':
-                    target = allPTags[9];
-                    break;
-                case '11th':
-                    target = allPTags[10];
+// 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 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 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 = (values, event) => {
+        onFinish === null || onFinish === void 0 ? void 0 : onFinish(values, event);
+    };
+    const middlewareFinishFailed = (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);
+    };
+    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 '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 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$2, { 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: 600;
+    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 LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, siteId, siteDomain, forceCampaign, campaign_code, article_id, subscription_title: subscriptionTitleProps, }) => {
+    var _a, _b, _c;
+    const refContainer = useRef(null);
+    const validatingEmailRef = useRef(false);
+    const validatingPhoneRef = useRef(false);
+    const { image, extra_fields, id: campaign_id, bot_id: campaign_subot_id = [], ThankYouBlock, } = forceCampaign || {};
+    const { textBlocks, listBlockAdded, actionBlocks } = extra_fields || {};
+    const { submitBlock } = actionBlocks || {};
+    const [loading, setLoading] = useState(false);
+    const [showThankyou, setShowThankyou] = useState(false);
+    const formRef = useRef(null);
+    const { form, validateObj } = useLeadFormConfig({
+        listBlockAdded,
+        campaignId: campaign_id,
+        campaign_subot_id,
+        validatingEmailRef,
+        validatingPhoneRef,
+        userInfo,
+    });
+    const subscription_title = useMemo(() => { var _a, _b; return subscriptionTitleProps || ((_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); }, [subscriptionTitleProps, (_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 { apiUrl } = useMemo(() => {
+        let apiUrl = leadStore.apiLeadUrl;
+        if (apiUrl.includes('localhost')) {
+            apiUrl = 'https://dev.leadgen.hellobacsi.com/';
+        }
+        return {
+            apiUrl,
+        };
+    }, [siteDomain, siteId]);
+    const url = useMemo(() => location.href.toLowerCase() || '', []);
+    const article_title = useMemo(() => document.title || '', []);
+    const cookie_id = useMemo(() => getCookie('hhg-id') || null, []);
+    const ga_client_id = useMemo(() => getCookie('_ga') || null, []);
+    const leadgenImpression = useCallback(() => {
+        Service.campaignPostImpression({
+            url,
+            action: LEADGEN_ACTIONS.SCROLL,
+            code: campaign_code,
+            title_article: article_title,
+            cookie_id,
+            ga_client_id,
+            extra: { cookie_id, article_id, subscription_title },
+        });
+    }, [
+        article_id,
+        article_title,
+        cookie_id,
+        ga_client_id,
+        campaign_code,
+        subscription_title,
+    ]);
+    const intersectionObserverCallback = useCallback((entries) => {
+        entries.forEach((entry) => {
+            const { isIntersecting, target } = entry;
+            if (isIntersecting && target === refContainer.current) {
+                leadgenImpression();
+            }
+        });
+    }, [leadgenImpression]);
+    const IObserver = new IntersectionObserver(intersectionObserverCallback);
+    const middlewareOnSubmit = useCallback((value) => __awaiter(void 0, void 0, void 0, function* () {
+        const newValue = {
+            url,
+            article_title,
+            cookie_id,
+            ga_client_id,
+            article_id,
+            campaign_id,
+            campaign_code,
+            subscription_title: subscription_title,
+        };
+        listBlockAdded.forEach(({ data: { value: k } }) => {
+            newValue[k] = value[k];
+        });
+        setLoading(true);
+        try {
+            const { _data } = (yield Service.campaignPostLead({ data: newValue })) || {};
+            const { model } = _data;
+            if (model && model.id) {
+                setShowThankyou(true);
+            }
+        }
+        catch (error) {
+            console.log('** Error : ', error);
+        }
+        setLoading(false);
+    }), [
+        url,
+        article_id,
+        article_title,
+        cookie_id,
+        ga_client_id,
+        campaign_code,
+        subscription_title,
+        listBlockAdded,
+    ]);
+    useEffect(() => {
+        if (refContainer.current) {
+            IObserver.observe(refContainer.current);
+        }
+        return () => {
+            IObserver.disconnect();
+        };
+    }, [
+        url,
+        article_id,
+        article_title,
+        ga_client_id,
+        campaign_id,
+        campaign_code,
+        subscription_title,
+    ]);
+    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 || `${apiUrl}admin/img/thanksyou.png` }), title: thankyouTitle, description: thankyouDescription, button: thankyouButton })),
+            !showThankyou && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(StyledLeadGenSubscriptionBoxHeader, null,
+                    !!image && (React__default.createElement(StyledLeadGenSubscriptionBoxHeaderImage, null,
+                        React__default.createElement("img", { src: image, alt: "" }))),
+                    React__default.createElement("p", { className: "leadgen-title" }, subscription_title)),
+                React__default.createElement(StyledLeadGenSubscriptionBoxBody, { className: "leadgen-subscription_box_body" },
+                    React__default.createElement(LeadGenForm, { ref: formRef, form: form, rules: validateObj, blocks: listBlockAdded, locale: locale, onFinish: middlewareOnSubmit }),
+                    React__default.createElement(Button$2, { disabled: loading, loading: loading, variant: "filled", size: "lg", onClick: () => { var _a; return (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.submit(); }, className: "leadgen-btn leadgen-btn_action", fullWidth: true }, (_c = submitBlock === null || submitBlock === void 0 ? void 0 : submitBlock.data) === null || _c === void 0 ? void 0 : _c.value)))))));
+};
+const LeadGenSubscriptionBoxWithMemo = memo(LeadGenSubscriptionBoxWithoutMemo);
+
+const Container = () => {
+    const context = useContext(LeadGenSubscriptionBoxContext);
+    const { 
+    // apiUrl: apiUrlProps,
+    // apiSubotUrl,
+    campaign_code, article_id, subscription_title, locale, siteId, siteDomain, userInfo, forceCampaign, } = context;
+    if (!forceCampaign || !(forceCampaign === null || forceCampaign === void 0 ? void 0 : forceCampaign.id)) {
+        return null;
+    }
+    return (React__default.createElement(LeadGenSubscriptionBoxWithMemo, { locale: locale, userInfo: userInfo, siteId: siteId, siteDomain: siteDomain, forceCampaign: forceCampaign, campaign_code: campaign_code, article_id: article_id, subscription_title: subscription_title }));
+};
+Container.displayName = 'LeadGenSubscriptionBox';
+const LeadGenSubscriptionBoxContainer = (props) => {
+    const { campaign_code } = props;
+    if (!campaign_code) {
+        return null;
+    }
+    return (React__default.createElement(LeadGenSubscriptionBoxProvider, Object.assign({}, props),
+        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 { 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}` }, 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) {
+                case '1th':
+                    target = allPTags[0];
+                    break;
+                case '2th':
+                    target = allPTags[1];
+                    break;
+                case '3th':
+                    target = allPTags[2];
+                    break;
+                case '4th':
+                    target = allPTags[3];
+                    break;
+                case '5th':
+                    target = allPTags[4];
+                    break;
+                case '6th':
+                    target = allPTags[5];
+                    break;
+                case '7th':
+                    target = allPTags[6];
+                    break;
+                case '8th':
+                    target = allPTags[7];
+                    break;
+                case '9th':
+                    target = allPTags[8];
+                    break;
+                case '10th':
+                    target = allPTags[9];
+                    break;
+                case '11th':
+                    target = allPTags[10];
                     break;
                 case '12th':
                     target = allPTags[11];
@@ -1616,211 +2794,6 @@ const EmptyComponent = ({ onClose, onContinue, }) => {
             React__default.createElement(Button$2, { 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 };
-};
-
 const SubtitleBlock = ({ children, align, }) => (React__default.createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
 const cssInputNotShrink = css `
@@ -1991,6 +2964,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;
@@ -2139,11 +3120,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(() => {
@@ -2160,8 +3143,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 || {};
@@ -2211,13 +3200,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' } },
@@ -2260,7 +3247,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)))));
@@ -2510,7 +3497,7 @@ const LEADGEN_SHOW_HEADER = [
     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;
+    var _a, _b;
     const { isMobile } = useScreenSize();
     const [open, setOpen] = useState(!!campaignId);
     const [showOtpPhone, setShowOtpPhone] = useState(null);
@@ -2543,7 +3530,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     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)))
+        ? 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;
@@ -2572,14 +3559,25 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         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
-        form.setTouched(Object.keys(validateObj).reduce((acc, cur) => {
+        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;
         }
@@ -2654,7 +3652,10 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     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$2, { size: "lg", id: "lead-submit", type: "submit", variant: "filled", className: "leadgen-btn leadgen-btn_action", loading: isSubmitLoading }, popUpSubmitText));
+    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$2, { 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;
@@ -2668,7 +3669,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         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("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 }))))));
@@ -3587,4 +4588,4 @@ LeadGen.Thankyou = Thankyou;
 LeadGen.OtpForm = OtpBlock$1;
 LeadGen.Close = Close;
 
-export { LeadGen };
+export { LeadGen, LeadGenSubscriptionBox };