@hhgtech/hhg-components 1.29.367-beta-10 → 1.29.368

package/build/esm/lead.js

@@ -1,45 +1,44 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-483816a5.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 { _ as __rest, a as __awaiter } from './tslib.es6-72910860.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 dayjs from 'dayjs';
 import debounce from 'lodash/debounce';
-import { createFormContext, useForm } from '@mantine/form';
-import { u as useTranslations } from './index-eea8eb49.js';
-import { T as TranslationsContext } from './translationsContext-4d2ef0b8.js';
+import { createFormContext } from '@mantine/form';
+import { u as useTranslations } from './index-b051f29b.js';
+import { T as TranslationsContext } from './translationsContext-ccaa070b.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-1b106b1e.js';
-import { T as Text } from './index-0ba1b8b4.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-aa51729b.js';
-import { D as DatePicker } from './index-bf6b67d8.js';
-import { M as MAPPED_LOCALE } from './utils-54b3a2ff.js';
-import { DateInput } from '@mantine/dates';
-import { Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-38866c7c.js';
-import { C as COMMON_DATE_TRANSLATE_KEY } from './index-01192772.js';
-import './index-ec7fe439.js';
-import './useMantineLocale-b2b06639.js';
-import { B as Button$1 } from './index-4cfae667.js';
-import './index.styles-061d7e04.js';
+import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-fe433043.js';
+import { T as Text } from './index-40297052.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-3d3825cc.js';
+import { D as DatePicker } from './index-9c3124e0.js';
+import { M as MAPPED_LOCALE } from './utils-1abba51b.js';
+import '@mantine/dates';
+import { Z as ZINDEX_SSO } from './index-9df141a8.js';
+import './index-e0180027.js';
+import './index-a52dd34a.js';
+import './useMantineLocale-4fde4c36.js';
+import { B as Button$1 } from './index-0e107b33.js';
+import './index.styles-8902b845.js';
 import { useClickOutside } from '@mantine/hooks';
-import './other-b9019cc0.js';
-import './index-314741bf.js';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-c1728643.js';
-import { B as Button } from './index-4a26c8fa.js';
-import { H as Heading$1 } from './index-c2696041.js';
-import styled from '@emotion/styled';
+import './other-2824b8ce.js';
+import './index-435dfcc8.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-51af42e6.js';
+import { B as Button } from './index-e1610248.js';
+import { H as Heading$1 } from './index-42dd310a.js';
 import { v1 } from 'uuid';
+import { i as isVideo } from './index-0019e5db.js';
+import { D as DrawerComponent } from './index-58b54ff1.js';
+import { u as useScreenSize } from './useScreenSize-be6b7d68.js';
+import { createPortal } from 'react-dom';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { i as isVideo } from './index-d696ba71.js';
-import { D as DrawerComponent } from './index-e7176020.js';
-import { u as useScreenSize } from './useScreenSize-69526e53.js';
-import { createPortal } from 'react-dom';
-import { I as InputDate } from './InputDate-02be7591.js';
-import { C as Close } from './Close-62c4bf39.js';
+import { C as Close } from './Close-8747ccc0.js';
 import '@hhgtech/icons/other';
 import '@mantine/carousel';
-import './Locale-104cb3a6.js';
+import './Locale-a5908a68.js';
 import 'classnames';
-import './useUniqueId-086c068e.js';
+import './useUniqueId-3a3c5775.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import 'date-fns/locale';
@@ -73,7 +72,7 @@ if (sessionStorage.getItem('insider_object')) {
 }
 const docLang = document.documentElement.lang;
 // TODO: country code
-const LEAD_LOCALE_DATA$1 = {
+const LEAD_LOCALE_DATA = {
     'vi-VN': {
         popupLang: 'vi',
         countryCode: 'vn',
@@ -115,7 +114,7 @@ const LEAD_LOCALE_DATA$1 = {
         countryCodeNumber: 91,
     },
 };
-const LEAD_LOCALE = LEAD_LOCALE_DATA$1[docLang] || LEAD_LOCALE_DATA$1['vi-VN'];
+const LEAD_LOCALE = LEAD_LOCALE_DATA[docLang] || LEAD_LOCALE_DATA['vi-VN'];
 function LEAD_RESET_VAR() {
     // LEAD_CURRENT_URL = location.href.toLowerCase();
     LEAD_CURRENT_URL =
@@ -136,11 +135,6 @@ 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',
@@ -170,10 +164,8 @@ const LEADGEN_BLOCK = {
     DropdownBlock: 'DropdownBlock',
     CheckboxBlock: 'CheckboxBlock',
     TncBlock: 'TncBlock',
-    TitleBlock: 'TitleBlock',
-    SubtitleBlock: 'SubtitleBlock',
 };
-const LEADGEN_BLOCK_INPUT = [
+const LEADGEN_BLOCK_IN_FORM = [
     LEADGEN_BLOCK.TextBlock,
     LEADGEN_BLOCK.NumberBlock,
     LEADGEN_BLOCK.DateBlock,
@@ -189,48 +181,6 @@ const LEADGEN_BLOCK_INPUT = [
     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 {
@@ -246,7 +196,7 @@ const mappingSSOToLead = (userInfoProps) => {
                 if (ssoKey === 'birthday') {
                     const dob = dayjs(initValue, 'YYYY-MM-DD', true);
                     if (dob.isValid()) {
-                        user.birthday = dob.toDate();
+                        user.birthday = dob;
                     }
                 }
                 else if (ssoKey === 'gender') {
@@ -269,46 +219,6 @@ 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 {
@@ -319,13 +229,6 @@ 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"]);
@@ -429,39 +332,8 @@ 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,
@@ -1253,7 +1125,6 @@ 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",
@@ -1262,10 +1133,7 @@ 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",
-	"common.day": "Day",
-	"common.month": "Month",
-	"common.year": "Year"
+	"lead.empty.submitAgain": "Submit again"
 };
 
 var hiIN = {
@@ -1276,7 +1144,6 @@ 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",
@@ -1285,10 +1152,7 @@ var hiIN = {
 	"lead.otp.resend": "Resend OTP{timer}",
 	"lead.empty.title": "ऊप्स! लगता है आपकी जानकारी खाली है। क्या आप जानकारी फिर से सबमिट करना चाहते हैं?",
 	"lead.empty.cancel": "रद्द करें",
-	"lead.empty.submitAgain": "फिर से सबमिट करें",
-	"common.day": "साल",
-	"common.month": "महीना",
-	"common.year": ""
+	"lead.empty.submitAgain": "फिर से सबमिट करें"
 };
 
 var idID = {
@@ -1301,7 +1165,6 @@ 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",
@@ -1310,10 +1173,7 @@ 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",
-	"common.day": "Hari",
-	"common.month": "Bulan",
-	"common.year": "Tahun"
+	"lead.empty.submitAgain": "Kirim lagi"
 };
 
 var kmKH = {
@@ -1326,7 +1186,6 @@ var kmKH = {
 	"validator.phone": "សូម​វាយបញ្ចូល​លេខ​ឲ្យ​បាន​ត្រឹមត្រូវ",
 	"validator.emailUsed": "អ៊ីមែលត្រូវបានប្រើប្រាស់សម្រាប់យុទ្ធនាការនេះរួចហើយ។",
 	"validator.phoneUsed": "លេខទូរស័ព្ទរបស់អ្នកត្រូវបានប្រើប្រាស់សម្រាប់យុទ្ធនាការនេះរួចហើយ។",
-	"validator.dateInvalid": "កាលបរិច្ឆេទនេះមិនត្រឹមត្រូវទេ សូមធ្វើបច្ចុប្បន្នភាព។",
 	"lead.otp.title": "បញ្ចូល OTP",
 	"lead.otp.desc": "យើងបានផ្ញើ OTP ទៅកាន់លេខទូរសព្ទរបស់អ្នក {phone}",
 	"lead.otp.verify": "ផ្ទៀងផ្ទាត់",
@@ -1335,10 +1194,7 @@ var kmKH = {
 	"lead.otp.phonePlaceholder": "បញ្ចូល OTP",
 	"lead.empty.title": "អូុបស! ហាក់ដូចជាព័ត៌មានរបស់អ្នកទទេ។ តើអ្នកចង់ដាក់ស្នើព័ត៌មានម្តងទៀតទេ?",
 	"lead.empty.cancel": "លុប​ចោល",
-	"lead.empty.submitAgain": "ដាក់ស្នើម្ដងទៀត",
-	"common.day": "ឆ្នាំ",
-	"common.month": "ខែ",
-	"common.year": "ថ្ងៃ"
+	"lead.empty.submitAgain": "ដាក់ស្នើម្ដងទៀត"
 };
 
 var msMY = {
@@ -1351,7 +1207,6 @@ 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",
@@ -1360,10 +1215,7 @@ 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",
-	"common.day": "Hari",
-	"common.month": "Bulan",
-	"common.year": "Tahun"
+	"lead.empty.submitAgain": "Hantar semula"
 };
 
 var myMM = {
@@ -1376,7 +1228,6 @@ var myMM = {
 	"validator.phone": "မှန်ကန်သော ဖုန်းနံပါတ်ထည့်သွင်းပါ",
 	"validator.emailUsed": "ဤအေကာင့်အတွက် အီးမေးလ်ကို အသုံးပြုပြီးဖြစ်ပါသည်။",
 	"validator.phoneUsed": "ဤအေကာင့်အတွက် သင့်ဖုန်းနံပါတ်ကို အသုံးပြုပြီးဖြစ်ပါသည်။",
-	"validator.dateInvalid": "ယနေ့စွဲမှားနေသည်၊ ကျေးဇူးပြု၍ ပြင်ဆင်ပါ။",
 	"lead.otp.title": "OTP ကိုထည့်ပါ",
 	"lead.otp.desc": "ကျွန်ုပ်တို့သည် OTP ကိုသင့်ဖုန်းနံပါတ် {phone} သို့ပို့ခဲ့သည်",
 	"lead.otp.verify": "အတည်ပြုပါ",
@@ -1385,10 +1236,7 @@ var myMM = {
 	"lead.otp.phonePlaceholder": "OTP ကိုထည့်ပါ",
 	"lead.empty.title": "အုပ်စ်! သင့်အချက်အလက်သည် ဗလာဖြစ်နေသလိုဖြစ်သည်။ ထပ်မံတင်သွင်းလိုပါသလား?",
 	"lead.empty.cancel": "မလုပ်ဆောင်ပါ",
-	"lead.empty.submitAgain": "ထပ်မံတင်သွင်းပါ",
-	"common.day": "ရက်",
-	"common.month": "လ",
-	"common.year": "နှစ်"
+	"lead.empty.submitAgain": "ထပ်မံတင်သွင်းပါ"
 };
 
 var thTH = {
@@ -1401,7 +1249,6 @@ var thTH = {
 	"validator.phone": "กรุณาใส่ตัวเลขที่ถูกต้อง",
 	"validator.emailUsed": "อีเมลนี้ถูกใช้สำหรับแคมเปญนี้แล้ว",
 	"validator.phoneUsed": "หมายเลขโทรศัพท์ของคุณถูกใช้สำหรับแคมเปญนี้แล้ว",
-	"validator.dateInvalid": "วันที่นี้ไม่ถูกต้อง โปรดอัปเดต",
 	"lead.otp.title": "ป้อน OTP",
 	"lead.otp.desc": "เราได้ส่ง OTP ไปยังหมายเลขโทรศัพท์มือถือของคุณ {phone}",
 	"lead.otp.verify": "ยืนยัน",
@@ -1410,10 +1257,7 @@ var thTH = {
 	"lead.otp.phonePlaceholder": "ป้อน OTP",
 	"lead.empty.title": "อุ๊ปส์! ดูเหมือนว่าข้อมูลของคุณว่างเปล่า คุณต้องการส่งข้อมูลอีกครั้งหรือไม่?",
 	"lead.empty.cancel": "ยกเลิก",
-	"lead.empty.submitAgain": "ส่งอีกครั้ง",
-	"common.day": "วัน",
-	"common.month": "เดือน",
-	"common.year": "ปี"
+	"lead.empty.submitAgain": "ส่งอีกครั้ง"
 };
 
 var viVN = {
@@ -1437,7 +1281,6 @@ 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",
@@ -1446,10 +1289,7 @@ 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",
-	"common.day": "Ngày",
-	"common.month": "Tháng",
-	"common.year": "Năm"
+	"lead.empty.submitAgain": "Gửi lại"
 };
 
 var zhTW = {
@@ -1462,7 +1302,6 @@ var zhTW = {
 	"validator.phone": "請填入有效的電話號碼",
 	"validator.emailUsed": "此電子郵件已被使用於此活動。",
 	"validator.phoneUsed": "您的手機號碼已被使用於此活動。",
-	"validator.dateInvalid": "此日期無效，請更新.",
 	"lead.otp.title": "輸入 OTP",
 	"lead.otp.desc": "我們已將 OTP 發送到您的手機號碼 {phone}",
 	"lead.otp.verify": "驗證",
@@ -1471,10 +1310,7 @@ var zhTW = {
 	"lead.otp.phonePlaceholder": "輸入 OTP",
 	"lead.empty.title": "哎呀，您的資訊似乎是空的，您想要重新提交資訊嗎？",
 	"lead.empty.cancel": "取消",
-	"lead.empty.submitAgain": "重新提交",
-	"common.day": "日",
-	"common.month": "月",
-	"common.year": "年"
+	"lead.empty.submitAgain": "重新提交"
 };
 
 const translationsMap = {
@@ -1486,7 +1322,6 @@ const translationsMap = {
     'my-MM': myMM,
     'km-KH': kmKH,
     'zh-TW': zhTW,
-    'zh-CN': zhTW,
     'th-TH': thTH,
     'tl-PH': enPH,
 };
@@ -1500,1056 +1335,43 @@ const getTranslations = (locale) => {
 
 const LeadGenContext = createContext({});
 
-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) };
+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(() => {
-        if (forceCampaignProps) {
-            setForceCampaign(forceCampaignProps);
-            return;
-        }
-        if (campaign_code) {
-            Service.campaignGetByCode(campaign_code).then((res) => {
-                const { _data } = res || {};
-                const { campaigns } = _data || {};
-                setForceCampaign(formatCampaignDetail(campaigns));
+        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;
         }
-    }, [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(LeadGenSubscriptionBoxContext.Provider, { value: leadGenSubscriptionBoxValue },
-        React__default.createElement(TranslationsContext.Provider, { value: translationContextValue }, children)));
-};
-
-// 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 };
+        else {
+            setWidth(16);
+            setHeight(9);
+            setLoaded(true);
+        }
+    }, [src]);
+    return {
+        loaded,
+        width,
+        height,
+    };
 };
 
-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" }))));
+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
@@ -2794,6 +1616,211 @@ 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 `
@@ -2964,14 +1991,6 @@ 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;
@@ -3120,13 +2139,11 @@ const TextField = (props) => {
         const $focusEl = $textEl.item($textEl.length - 1);
         if ($focusEl) {
             $focusEl.focus();
-            setTimeout(() => {
-                $focusEl.scrollIntoView({
-                    behavior: 'auto',
-                    block: 'center',
-                    inline: 'start',
-                });
-            }, 100);
+            $focusEl.scrollIntoView({
+                behavior: 'auto',
+                block: 'center',
+                inline: 'start',
+            });
         }
     }, [shrink]);
     useEffect(() => {
@@ -3143,14 +2160,8 @@ 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 || {};
@@ -3200,11 +2211,13 @@ 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': {
-                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 '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 'LinkButtonBlock':
                 return (React__default.createElement("div", { key: index },
                     React__default.createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
@@ -3247,7 +2260,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                             label: l.placeholder,
                         })) }, form.getInputProps(value)))));
             case 'TncBlock':
-                const _d = form.getInputProps(`TNC-${id}`), { error } = _d, tncInputProps = __rest(_d, ["error"]);
+                const _c = form.getInputProps(`TNC-${id}`), { error } = _c, tncInputProps = __rest(_c, ["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)))));
@@ -3497,7 +2510,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, _b;
+    var _a;
     const { isMobile } = useScreenSize();
     const [open, setOpen] = useState(!!campaignId);
     const [showOtpPhone, setShowOtpPhone] = useState(null);
@@ -3530,7 +2543,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_INPUT.some((k) => k === (item === null || item === void 0 ? void 0 : item.name)))
+        ? listBlockAdded.some((item) => LEADGEN_BLOCK_IN_FORM.some((k) => k === (item === null || item === void 0 ? void 0 : item.name)))
         : true;
     const headerInsideFormContainer = isSlider || isLightBoxA || isFullscreen;
     const showHeader = !!imageMobile || !!imageDesktop;
@@ -3559,25 +2572,14 @@ 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
-        const fields = Object.keys(validateObj);
-        const fieldStatus = fields.reduce((acc, cur) => {
+        form.setTouched(Object.keys(validateObj).reduce((acc, cur) => {
             acc[cur] = true;
             return acc;
-        }, {});
-        form.setTouched(fieldStatus);
+        }, {}));
         if (validatingEmailRef.current || validatingPhoneRef.current) {
             return;
         }
@@ -3652,10 +2654,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
     const renderAfterImageSizes = imageMobileLoaded &&
         imageDesktopLoaded &&
         (isFullscreen ? imageBackgroundLoaded : true);
-    const ButtonSubmit = useMemo(() => {
-        var _a;
-        return !((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) && (React__default.createElement(Button$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 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 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;
@@ -3669,7 +2668,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", onFocus: onFocus, onSubmit: middlewareOnSubmit },
+        React__default.createElement("form", { ref: formRef, className: "leadgen-form", onSubmit: middlewareOnSubmit },
             React__default.createElement(FormContainer, { title: title, titleAlign: titleAlign, description: description, descriptionAlign: descriptionAlign, header: headerInsideFormContainer && PopupHeader, footer: hasForm ? ButtonSubmit : ButtonLink, "data-hidden-form": !hasForm },
                 React__default.createElement("div", { className: "leadgen-form_inner" },
                     React__default.createElement(LightboxFields, { listBlockAdded: listBlockAdded, popupId: popupId, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit }))))));
@@ -4588,4 +3587,4 @@ LeadGen.Thankyou = Thankyou;
 LeadGen.OtpForm = OtpBlock$1;
 LeadGen.Close = Close;
 
-export { LeadGen, LeadGenSubscriptionBox };
+export { LeadGen };