@hhgtech/hhg-components 1.29.481-beta-1 → 1.29.481

package/build/lead.js

@@ -2,65 +2,56 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-4a797eff.js');
+var tslib_es6 = require('./tslib.es6-32438f57.js');
 var React = require('react');
 var core = require('@mantine/core');
 var debounce = require('lodash/debounce');
 var form = require('@mantine/form');
 var dayjs = require('dayjs');
-var index = require('./index-1990eff6.js');
+var index = require('./index-0570f20a.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
-var index$1 = require('./index-51ffa1f5.js');
-var translationsContext = require('./translationsContext-d610fe38.js');
-var utils$1 = require('./utils-a42d098a.js');
-var index$2 = require('./index-cffc4281.js');
-var index$3 = require('./index-77d6cac2.js');
-var index$5 = require('./index-269e78e9.js');
-var index$4 = require('./index-77e110f2.js');
-var index$9 = require('./index-2bcb7fb6.js');
-require('./index.styles-6ba02a76.js');
+var translationsProvider = require('./translationsProvider-1a3f4c69.js');
+var index$1 = require('./index-366354c9.js');
+var translationsContext = require('./translationsContext-2057a072.js');
+var utils$1 = require('./utils-4e787da9.js');
+var index$2 = require('./index-f0e815f1.js');
+var index$3 = require('./index-c06fecd6.js');
+var index$5 = require('./index-b2ac64db.js');
+var index$4 = require('./index-048722ab.js');
+var index$9 = require('./index-4e847075.js');
+require('./index.styles-d012f777.js');
 var hooks = require('@mantine/hooks');
-require('./index-0912b470.js');
-require('./index-2de1864d.js');
-var utils = require('./utils-7e890074.js');
+require('./index-9ec9f9d4.js');
+require('./index-5ab55624.js');
+var utils = require('./utils-98559d51.js');
 var dates = require('@mantine/dates');
-var index$7 = require('./index-9b546f20.js');
-var index$c = require('./index-53be3962.js');
-require('./index-be6985c5.js');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-f9c22817.js');
-var index$6 = require('./index-ceb84907.js');
-var translationsProvider = require('./translationsProvider-78861891.js');
-var Locale = require('./Locale-788d4cb6.js');
+var index$7 = require('./index-9a36414e.js');
+var index$c = require('./index-2f7adb56.js');
+require('./index-4890570c.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-6bb93dd8.js');
+var index$6 = require('./index-3d4023fb.js');
+var Locale = require('./Locale-f24f8e73.js');
 var uuid = require('uuid');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var PhoneInputBase = require('react-phone-number-input');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index$8 = require('./index-56eb63a6.js');
-var togetherComponentGlobalContext = require('./utils-08e02596.js');
-var index$a = require('./index-63bbd42f.js');
-var index$b = require('./index-ccaeb9a0.js');
-var index$d = require('./index-6ef4a34b.js');
+var index$8 = require('./index-8c1779dd.js');
+var togetherComponentGlobalContext = require('./utils-8b3db262.js');
+var index$a = require('./index-4183a3a2.js');
+var index$b = require('./index-4cc4e94c.js');
+var index$d = require('./index-eb8ad24a.js');
 var framerMotion = require('framer-motion');
 var ReactDOM = require('react-dom');
 var arrow = require('@hhgtech/icons/arrow');
 var core$1 = require('@hhgtech/icons/core');
-var InputDate = require('./InputDate-3636db90.js');
+var InputDate = require('./InputDate-aa02d9a5.js');
 var carousel = require('@mantine/carousel');
-var utils$2 = require('./utils-140b5e84.js');
-var index$e = require('./index-5e40aac1.js');
-var Close = require('./Close-18464187.js');
+var utils$2 = require('./utils-4b7f1f41.js');
+var index$e = require('./index-69f935ae.js');
+var Close = require('./Close-b1efd086.js');
 require('./constantsIsProduction.js');
-require('./normalizeLink-678e875a.js');
-require('@hhgtech/icons/other');
-require('classnames');
-require('./useUniqueId-7fa06486.js');
-require('./constantsSite.js');
-require('@emotion/react');
-require('./shared-7eff181c.js');
-require('@mantine/notifications');
-require('date-fns/locale');
-require('./constantsRiskScreener.js');
+require('./normalizeLink-cb644fd3.js');
 require('./i18n-values/en-PH.js');
 require('./i18n-values/hi-IN.js');
 require('./i18n-values/id-ID.js');
@@ -73,11 +64,20 @@ require('./i18n-values/vi-VN.js');
 require('./i18n-values/vi-VN_MB.js');
 require('./i18n-values/zh-SG.js');
 require('./i18n-values/zh-TW.js');
-require('./index-1029ee59.js');
+require('@hhgtech/icons/other');
+require('classnames');
+require('./useUniqueId-80352f05.js');
+require('./constantsSite.js');
+require('@emotion/react');
+require('./shared-d5ae85ac.js');
+require('@mantine/notifications');
+require('date-fns/locale');
+require('./constantsRiskScreener.js');
+require('./index-a5ed4245.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-7b4d3f11.js');
+require('./constants-87793bc2.js');
 require('vaul');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -725,979 +725,992 @@ const clearCacheUsedEmailOrPhone = () => {
     validatedCache.phoneOnly = {};
 };
 
-// You can give context variables any name
-const [LeadFormProvider$1, useLeadFormContext$1, useLeadForm$1] = form.createFormContext();
-const useLeadFormConfig$1 = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, }) => {
-    const { t } = index$1.useTranslations();
-    const initialValues = React.useMemo(() => formatLeadGenFormValue(mappingSSOToLead(userInfo), listBlockAdded), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
-    React.useEffect(() => {
-        if (!window.intlTelInputUtils) {
-            require('intl-tel-input/build/js/utils');
-        }
-    }, []);
-    const validateObj = React.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 === '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$1({
-        validateInputOnChange: true,
-        clearInputErrorOnChange: true,
-        validate: validateObj,
-        initialValues,
-    });
-    const formRef = React.useRef(form);
-    formRef.current = form;
-    return { form, validateObj };
+var enPH = {
+	"validator.required": "This field is required.",
+	"validator.remote": "Please fix this field.",
+	"validator.email": "Please enter a valid email address.",
+	"validator.phone": "Please input correct phone number.",
+	"validator.url": "Please enter a valid URL.",
+	"validator.date": "Please enter a valid date.",
+	"validator.dateISO": "Please enter a valid date (ISO).",
+	"validator.number": "Please enter a valid number.",
+	"validator.digits": "Please enter only digits.",
+	"validator.creditcard": "Please enter a valid credit card number.",
+	"validator.equalTo": "Please enter the same value again.",
+	"validator.accept": "Please enter a value with a valid extension.",
+	"validator.maxlength": "jQuery.validator.format('Please enter no more than {0} characters.",
+	"validator.minlength": "jQuery.validator.format('Please enter at least {0} characters.",
+	"validator.rangelength": "jQuery.validator.format('Please enter a value between {0} and {1} characters long.",
+	"validator.range": "jQuery.validator.format('Please enter a value between {0} and {1}.",
+	"validator.max": "jQuery.validator.format('Please enter a value less than or equal to {0}.",
+	"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",
+	"lead.otp.resend": "Resend OTP{timer}",
+	"lead.otp.phoneLabel": "Phone OTP",
+	"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",
+	"inlineFreebie.freeSample.title": "Free Sample",
+	"inlineFreebie.luckyDrawGift.title": "Lucky-draw Gift",
+	"inlineFreebie.value": "Value",
+	"common.day": "Day",
+	"common.month": "Month",
+	"common.year": "Year"
 };
 
-const Component = ({ campaign, onClose: onCloseProp, onOtherSubmit, onSubmit, showThankyou, setShowThankyou, locale, children, showEmpty, setShowEmpty, userInfo, }) => {
-    var _a, _b;
-    const extraFields = campaign.extra_fields;
-    const campaignId = campaign.id;
-    const campaign_subot_id = campaign.bot_id || [];
-    const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
-    const actionBlocks = JSON.parse(extraFields.actionBlocks);
-    const textBlocks = JSON.parse(extraFields.textBlocks);
-    const heading = ((_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 description = textBlocks.subtitleBlock.data.value;
-    const validatingPhoneRef = React.useRef(false);
-    const validatingEmailRef = React.useRef(false);
-    const leadFormConfig = useLeadFormConfig$1({
-        listBlockAdded,
-        validatingPhoneRef,
-        validatingEmailRef,
-        campaignId,
-        campaign_subot_id,
-        userInfo,
-    });
-    const [showOtpPhone, setShowOtpPhone] = React.useState(null);
-    const [formRef, setFormRef] = React.useState(null);
-    const onClose = () => {
-        if (showOtpPhone) {
-            setShowOtpPhone(null);
-        }
-        else {
-            onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
-        }
-    };
-    React.useEffect(() => {
-        clearCacheUsedEmailOrPhone();
-    }, []);
-    return campaign ? (React__default["default"].createElement(LeadGenComponentContext.Provider, { value: {
-            campaignId,
-            campaign_subot_id,
-            heading,
-            description,
-            listBlockAdded,
-            textBlocks,
-            actionBlocks,
-            leadFormConfig,
-            validatingEmailRef,
-            validatingPhoneRef,
-            formRef: { current: formRef },
-            setFormRef,
-            locale,
-            onClose,
-            onOtherSubmit,
-            showOtpPhone,
-            setShowOtpPhone,
-            onSubmit,
-            showThankyou,
-            setShowThankyou,
-            showEmpty,
-            setShowEmpty,
-        } }, children)) : null;
+var hiIN = {
+	"validator.required": "इस क्षेत्र की आवश्यकता है।",
+	"validator.email": "कृपया एक मान्य ईमेल पता दर्ज करें",
+	"validator.number": "कृपया एक वैध संख्या दर्ज करें",
+	"validator.digits": "कृपया केवल अंक दर्ज करें",
+	"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",
+	"lead.otp.desc": "We have sent an OTP to your mobile number {phone}",
+	"lead.otp.verify": "Verify",
+	"lead.otp.resend": "Resend OTP{timer}",
+	"lead.empty.title": "ऊप्स! लगता है आपकी जानकारी खाली है। क्या आप जानकारी फिर से सबमिट करना चाहते हैं?",
+	"lead.empty.cancel": "रद्द करें",
+	"lead.empty.submitAgain": "फिर से सबमिट करें",
+	"inlineFreebie.freeSample.title": "मुफ्त नमूना",
+	"inlineFreebie.luckyDrawGift.title": "लकी-ड्रा गिफ्ट",
+	"inlineFreebie.value": "मूल्य",
+	"common.day": "साल",
+	"common.month": "महीना",
+	"common.year": ""
 };
 
-const Description = (_a) => {
-    var rest = tslib_es6.__rest(_a, []);
-    const { description } = React.useContext(LeadGenComponentContext);
-    return description ? (React__default["default"].createElement(index$2.Text, Object.assign({ size: "p3" }, rest), description)) : null;
+var idID = {
+	"validator.required": "Kolom ini wajib diisi",
+	"validator.email": "Tolong daftarkan email yang valid",
+	"validator.number": "Tolong daftarkan nomor telepon yang valid",
+	"validator.digits": "Tolong masukkan angka saja",
+	"validator.maxlength": "Jangan memasukkan lebih dari {0} karakter",
+	"validator.minlength": "Tolong ketik sedikitnya {0} karakter",
+	"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",
+	"lead.otp.resend": "Kirim Ulang OTP {timer}",
+	"lead.otp.phoneLabel": "OTP Telepon",
+	"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",
+	"inlineFreebie.freeSample.title": "Sampel Gratis",
+	"inlineFreebie.luckyDrawGift.title": "Hadiah Undian",
+	"inlineFreebie.value": "Nilai",
+	"common.day": "Hari",
+	"common.month": "Bulan",
+	"common.year": "Tahun"
 };
 
-const LeadGenContext$1 = React.createContext({});
-
-var useStyles$3 = core.createStyles(() => {
-    return {
-        control: {},
-    };
-});
+var kmKH = {
+	"validator.required": "ព័ត៌មាន​ចាំបាច់​ដែល​ត្រូវ​បំពេញ",
+	"validator.email": "សូម​វាយ​អាសយដ្ឋាន​អ៊ីម៉ែល​ឲ្យ​បាន​ត្រឹមត្រូវ",
+	"validator.number": "សូម​វាយបញ្ចូល​លេខ​ឲ្យ​បាន​ត្រឹមត្រូវ",
+	"validator.digits": "វាយ​បញ្ចូល​បាន​តែ​លេខ​ប៉ុណ្ណោះ",
+	"validator.maxlength": "សូម​វាយ​បញ្ចូលកុំ​ឲ្យ​លើស {0} តួអក្សរ",
+	"validator.minlength": "សូម​វាយ​បញ្ចូល​តិច​បំផុត {0} តួអក្ស",
+	"validator.phone": "សូម​វាយបញ្ចូល​លេខ​ឲ្យ​បាន​ត្រឹមត្រូវ",
+	"validator.emailUsed": "អ៊ីមែលត្រូវបានប្រើប្រាស់សម្រាប់យុទ្ធនាការនេះរួចហើយ។",
+	"validator.phoneUsed": "លេខទូរស័ព្ទរបស់អ្នកត្រូវបានប្រើប្រាស់សម្រាប់យុទ្ធនាការនេះរួចហើយ។",
+	"validator.dateInvalid": "កាលបរិច្ឆេទនេះមិនត្រឹមត្រូវទេ សូមធ្វើបច្ចុប្បន្នភាព។",
+	"lead.otp.title": "បញ្ចូល OTP",
+	"lead.otp.desc": "យើងបានផ្ញើ OTP ទៅកាន់លេខទូរសព្ទរបស់អ្នក {phone}",
+	"lead.otp.verify": "ផ្ទៀងផ្ទាត់",
+	"lead.otp.resend": "ផ្ញើ OTP ម្តងទៀត {timer}",
+	"lead.otp.phoneLabel": "OTP ទូរស័ព្ទ",
+	"lead.otp.phonePlaceholder": "បញ្ចូល OTP",
+	"lead.empty.title": "អូុបស! ហាក់ដូចជាព័ត៌មានរបស់អ្នកទទេ។ តើអ្នកចង់ដាក់ស្នើព័ត៌មានម្តងទៀតទេ?",
+	"lead.empty.cancel": "លុប​ចោល",
+	"lead.empty.submitAgain": "ដាក់ស្នើម្ដងទៀត",
+	"inlineFreebie.freeSample.title": "សំបុត្រស្រង់ពិន័យ",
+	"inlineFreebie.luckyDrawGift.title": "សំបុត្រស្រង់ពិន័យ",
+	"inlineFreebie.value": "តម្លៃ",
+	"common.day": "ឆ្នាំ",
+	"common.month": "ខែ",
+	"common.year": "ថ្ងៃ"
+};
 
-const libraries$1 = ['places'];
-const LocationBlock = ({ name, placeholder, locale, required = true, }) => {
-    var _a;
-    const form = useLeadFormContext$1();
-    const [searchValue, setSearchValue] = React.useState('');
-    const [address, setAddress] = React.useState('');
-    const { predictions } = usePlacesAutocomplete.usePlacesAutocomplete(searchValue, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
-    const [LoadScript, setLoadScript] = React.useState(null);
-    const [ready, setReady] = React.useState(false);
-    const randRef = React.useRef(Math.random().toString(36).substring(7));
-    const options = React.useMemo(() => {
-        const _opts = predictions.map((p) => {
-            return {
-                value: p.description,
-                label: p.description,
-            };
-        });
-        const isExist = _opts.find((o) => o.value === address);
-        if (!address || isExist) {
-            return _opts;
-        }
-        return [{ value: address, label: address }].concat(_opts);
-    }, [predictions, address]);
-    React.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)) {
-            Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@react-google-maps/api')); }).then((m) => {
-                setLoadScript(() => m.LoadScript);
-                setTimeout(() => {
-                    setReady(true);
-                }, 200);
-            });
-        }
-        else {
-            setReady(true);
-        }
-    }, []);
-    if (!ready)
-        return (React__default["default"].createElement("div", { style: {
-                height: 73,
-            } }));
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        LoadScript && (React__default["default"].createElement(LoadScript, { googleMapsApiKey: usePlacesAutocomplete.GOOGLE_API_KEY, libraries: libraries$1, loadingElement: React__default["default"].createElement(React__default["default"].Fragment, null) })),
-        React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": name, "data-control": 'text' }),
-        React__default["default"].createElement(index$3.Select, Object.assign({ className: "lead-modal__form-control", label: placeholder, placeholder: placeholder, withAsterisk: required, name: name, data: options, searchValue: searchValue, onSearchChange: (query) => {
-                setSearchValue(query);
-            }, filter: () => true, clearable: true, searchable: true, onChange: (val) => setAddress(val || ''), icon: React__default["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
-                React__default["default"].createElement("path", { d: "M10 9.792q.605 0 1.032-.427.426-.428.426-1.032 0-.603-.426-1.031A1.4 1.4 0 0 0 10 6.875q-.604 0-1.032.427a1.4 1.4 0 0 0-.426 1.031q0 .604.426 1.032.428.426 1.032.427m0 8.083q-.145 0-.292-.042a.7.7 0 0 1-.27-.145Q6.478 15 5.01 12.708 3.54 10.418 3.54 8.5q0-3.021 1.949-4.823T10 1.875t4.51 1.802q1.95 1.802 1.949 4.823 0 1.917-1.468 4.208-1.47 2.292-4.427 4.98a.7.7 0 0 1-.271.145 1 1 0 0 1-.292.042", fill: "#8C8C8C" })), autoComplete: 'no-auto-complete-' + randRef.current, rightSection: React__default["default"].createElement(React__default["default"].Fragment, null) }, form.getInputProps(name)))));
+var msMY = {
+	"validator.required": "Bahagian ini wajib diisi.",
+	"validator.email": "Sila masukkan alamat emel yang sah.",
+	"validator.number": "Sila masukkan no telefon yang sah.",
+	"validator.digits": "Sila masukkan nombor digit sahaja.",
+	"validator.maxlength": "Sila masukkan tidak lebih dari {0} aksara",
+	"validator.minlength": "Sila masukkan sekurang-kurangnya {0} aksara",
+	"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",
+	"lead.otp.resend": "Hantar semula OTP {timer}",
+	"lead.otp.phoneLabel": "OTP Telefon",
+	"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",
+	"inlineFreebie.freeSample.title": "Sampel Percuma",
+	"inlineFreebie.luckyDrawGift.title": "Hadiah Undian",
+	"inlineFreebie.value": "Nilai",
+	"common.day": "Hari",
+	"common.month": "Bulan",
+	"common.year": "Tahun"
 };
 
-const SubtitleBlock$1 = ({ children, align, }) => (React__default["default"].createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
+var myMM = {
+	"validator.required": "ဒီနေရာမှာ ဖြည့်ဖို့ လိုအပ်ပါတယ်",
+	"validator.email": "မှန်ကန်သော အီးမေးလ်လိပ်စာထည့်သွင်းပါ",
+	"validator.number": "မှန်ကန်သော ဖုန်းနံပါတ်ထည့်သွင်းပါ",
+	"validator.digits": "နံပါတ်များသာဖြည့်ပါ",
+	"validator.maxlength": "ကျေးဇူးပြု၍ {0} ထပ်မပိုသော ဂဏန်းများသာဖြည့်ပါ",
+	"validator.minlength": "ကျေးဇူးပြု၍ အနည်းဆုံး {0} ဂဏန်းဖြည့်ပါ",
+	"validator.phone": "မှန်ကန်သော ဖုန်းနံပါတ်ထည့်သွင်းပါ",
+	"validator.emailUsed": "ဤအေကာင့်အတွက် အီးမေးလ်ကို အသုံးပြုပြီးဖြစ်ပါသည်။",
+	"validator.phoneUsed": "ဤအေကာင့်အတွက် သင့်ဖုန်းနံပါတ်ကို အသုံးပြုပြီးဖြစ်ပါသည်။",
+	"validator.dateInvalid": "ယနေ့စွဲမှားနေသည်၊ ကျေးဇူးပြု၍ ပြင်ဆင်ပါ။",
+	"lead.otp.title": "OTP ကိုထည့်ပါ",
+	"lead.otp.desc": "ကျွန်ုပ်တို့သည် OTP ကိုသင့်ဖုန်းနံပါတ် {phone} သို့ပို့ခဲ့သည်",
+	"lead.otp.verify": "အတည်ပြုပါ",
+	"lead.otp.resend": "OTP ကိုထပ်မံပို့ရန် {timer}",
+	"lead.otp.phoneLabel": "ဖုန်း OTP",
+	"lead.otp.phonePlaceholder": "OTP ကိုထည့်ပါ",
+	"lead.empty.title": "အုပ်စ်! သင့်အချက်အလက်သည် ဗလာဖြစ်နေသလိုဖြစ်သည်။ ထပ်မံတင်သွင်းလိုပါသလား?",
+	"lead.empty.cancel": "မလုပ်ဆောင်ပါ",
+	"lead.empty.submitAgain": "ထပ်မံတင်သွင်းပါ",
+	"inlineFreebie.freeSample.title": "အခမဲ့အစားအစာ",
+	"inlineFreebie.luckyDrawGift.title": "အခမဲ့အစားအစာ",
+	"inlineFreebie.value": "တန်ဖိုး",
+	"common.day": "ရက်",
+	"common.month": "လ",
+	"common.year": "နှစ်"
+};
 
-const TitleBlock$1 = ({ children, align, }) => (React__default["default"].createElement("h2", { className: `lead-modal__title ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
+var thTH = {
+	"validator.required": "ต้องระบุข้อมูลในช่องนี้",
+	"validator.email": "กรุณาใส่อีเมล์ที่ถูกต้อง",
+	"validator.number": "กรุณาใส่ตัวเลขที่ถูกต้อง",
+	"validator.digits": "กรุณาส่เฉพาะตัวเลข",
+	"validator.maxlength": "กรุณาใส่ตัวเลขมากกว่า {0} หลัก",
+	"validator.minlength": "กรุณาใส่ตัวเลขอย่างน้อย {0} หลัก",
+	"validator.phone": "กรุณาใส่ตัวเลขที่ถูกต้อง",
+	"validator.emailUsed": "อีเมลนี้ถูกใช้สำหรับแคมเปญนี้แล้ว",
+	"validator.phoneUsed": "หมายเลขโทรศัพท์ของคุณถูกใช้สำหรับแคมเปญนี้แล้ว",
+	"validator.dateInvalid": "วันที่นี้ไม่ถูกต้อง โปรดอัปเดต",
+	"lead.otp.title": "ป้อน OTP",
+	"lead.otp.desc": "เราได้ส่ง OTP ไปยังหมายเลขโทรศัพท์มือถือของคุณ {phone}",
+	"lead.otp.verify": "ยืนยัน",
+	"lead.otp.resend": "ส่ง OTP อีกครั้ง {timer}",
+	"lead.otp.phoneLabel": "OTP โทรศัพท์",
+	"lead.otp.phonePlaceholder": "ป้อน OTP",
+	"lead.empty.title": "อุ๊ปส์! ดูเหมือนว่าข้อมูลของคุณว่างเปล่า คุณต้องการส่งข้อมูลอีกครั้งหรือไม่?",
+	"lead.empty.cancel": "ยกเลิก",
+	"lead.empty.submitAgain": "ส่งอีกครั้ง",
+	"inlineFreebie.freeSample.title": "ตัวอย่างฟรี",
+	"inlineFreebie.luckyDrawGift.title": "ของรางวัลที่ถูกรางวัล",
+	"inlineFreebie.value": "ค่า",
+	"common.day": "วัน",
+	"common.month": "เดือน",
+	"common.year": "ปี"
+};
 
-const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, styles, classNames, popoverProps, }) => {
-    const { primaryColor } = React.useContext(LeadGenContext$1);
-    const { classes, cx } = useStyles$3(undefined, {
-        name: 'LeadGen__Field',
-        styles,
-        classNames,
-    });
-    const form = useLeadFormContext$1();
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, listBlockAdded.map((b, index) => {
-        var _a;
-        const { name = '', data = {} } = b || {};
-        const { placeholder, value, align, listQuestion, isSendMailChimp = false, newtab, url, } = data;
-        const required = (_a = data.required) !== null && _a !== void 0 ? _a : true;
-        switch (name) {
-            case 'TitleBlock':
-                return (React__default["default"].createElement(TitleBlock$1, { key: index, align: align }, value));
-            case 'SubtitleBlock':
-                return (React__default["default"].createElement(SubtitleBlock$1, { key: index, align: align }, value));
-            case 'TextBlock':
-                return (React__default["default"].createElement(index$3.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
-                    // onChangeRaw={(e) => inputOnChange('text', e)}
-                    label: placeholder, "data-control": "text", "data-lead-control": name, "data-is-required": required, name: value }, form.getInputProps(value))));
-            case 'NumberBlock':
-                return (React__default["default"].createElement(index$3.NumberInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
-                    // onChange={(e) => inputOnChange('number', e)}
-                    label: placeholder, "data-control": "number", "data-lead-control": name, "data-is-required": required, name: value }, form.getInputProps(value))));
-            case 'EmailBlock':
-                return (React__default["default"].createElement(index$3.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
-                    // type="email"
-                    placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "email", "data-lead-control": name, "data-is-required": required, name: value }, form.getInputProps(value))));
-            case 'PhoneOtpBlock':
-            case 'WhatsappOtpBlock':
-            case 'ZaloOtpBlock':
-            case 'PhoneBlock': {
-                const id = popupId + '-' + value + '-' + index;
-                return (React__default["default"].createElement(index$3.Input.Wrapper, Object.assign({ size: "md", withAsterisk: required, key: index, label: placeholder, 
-                    // error={errorField.phone}
-                    className: cx('leadgen-control', classes.control), labelProps: {
-                        htmlFor: id,
-                    } }, form.getInputProps(value)),
-                    React__default["default"].createElement(index$3.Phone, { name: value, spellCheck: false, type: "tel", placeholder: placeholder, value: form.getInputProps(value).value, onChange: (v) => {
-                            form.setFieldValue(value, v);
-                        }, 
-                        // onBlur={(e) => inputOnBlur('tel', e)}
-                        id: id, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name, "data-is-required": required })));
-            }
-            case 'LocationBlock': {
-                return (React__default["default"].createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
-            }
-            case 'DateBlock':
-                return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(index$5.DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date", "data-lead-control": name, "data-is-required": required, popoverProps: popoverProps }, form.getInputProps(value))),
-                    React__default["default"].createElement("input", { type: "hidden", name: value, "data-control": "date" })));
-            case 'LinkButtonBlock':
-                return (React__default["default"].createElement("div", { key: index },
-                    React__default["default"].createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
-                        React__default["default"].createElement(index$4.Button, { type: "button", size: "md", color: primaryColor, className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
-                                onClose === null || onClose === void 0 ? void 0 : onClose();
-                                onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
-                            } }, value))));
-            case 'CheckboxBlock':
-                return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    isSendMailChimp && (React__default["default"].createElement("div", { style: {
-                            display: 'none',
-                        }, "data-name": value + '-mailchimp' })),
-                    React__default["default"].createElement(index$3.Checkbox.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md", sx: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 8,
-                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }))))));
-            case 'RadioBlock':
-                return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    isSendMailChimp && (React__default["default"].createElement(index$3.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
-                    React__default["default"].createElement(index$3.Radio.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name, "data-is-required": required }))))));
-            case 'DropdownBlock':
-                return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown', "data-lead-control": name, "data-is-required": required }),
-                    React__default["default"].createElement(index$3.Select, Object.assign({ key: index, className: cx('leadgen-control', classes.control), label: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
-                            value: l.value,
-                            label: l.placeholder,
-                        })) }, form.getInputProps(value)))));
-            case 'TncBlock':
-                const tncInputProps = form.getInputProps('TNC-' + b.id);
-                return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }, tncInputProps, { error: tncInputProps.error ? tncInputProps.error : undefined }))));
-        }
-        return null;
-    })));
+var viVN = {
+	"validator.required": "Vui lòng điền mục này",
+	"validator.email": "Vui lòng điền email có thật.",
+	"validator.number": "Vui lòng điền số có thật",
+	"validator.digits": "Vui lòng chỉ điền số",
+	"validator.maxlength": "Vui lòng điền dưới {0} số",
+	"validator.minlength": "Vui lòng điền hơn {0} số",
+	"validator.remote": "Hãy sửa cho đúng.",
+	"validator.url": "Hãy nhập URL.",
+	"validator.date": "Hãy nhập ngày.",
+	"validator.dateISO": "Hãy nhập ngày (ISO).",
+	"validator.creditcard": "Hãy nhập số thẻ tín dụng.",
+	"validator.equalTo": "Hãy nhập thêm lần nữa.",
+	"validator.extension": "Phần mở rộng không đúng.",
+	"validator.rangelength": "Hãy nhập từ {0} đến {1} kí tự.",
+	"validator.range": "Hãy nhập từ {0} đến {1}.",
+	"validator.max": "Hãy nhập từ {0} trở xuống.",
+	"validator.min": "Hãy nhập từ {0} trở lên.",
+	"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",
+	"lead.otp.resend": "Gửi lại OTP {timer}",
+	"lead.otp.phoneLabel": "Nhập OTP",
+	"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",
+	"inlineFreebie.freeSample.title": "Dùng thử miễn phí",
+	"inlineFreebie.luckyDrawGift.title": "Phần thưởng may mắn",
+	"inlineFreebie.value": "Trị giá",
+	"common.day": "Ngày",
+	"common.month": "Tháng",
+	"common.year": "Năm"
 };
 
-var useStyles$2 = core.createStyles((theme) => {
-    return {
-        root: {},
-        header: {},
-        heading: {},
-        description: {},
-        term: {
-            a: {
-                color: theme.fn.primaryColor(),
-            },
-        },
-        controlList: {},
-        control: {},
-        submitBtn: {},
-        submitBtnWrapper: {},
-    };
-});
+var zhTW = {
+	"validator.required": "此為必填欄位",
+	"validator.email": "請填入有效的 email 地址",
+	"validator.number": "請填入有效的電話號碼",
+	"validator.digits": "此欄位僅能輸入數字",
+	"validator.maxlength": "請輸入少於 {0} 位數",
+	"validator.minlength": "請輸入至少 {0} 位數",
+	"validator.phone": "請填入有效的電話號碼",
+	"validator.emailUsed": "此電子郵件已被使用於此活動。",
+	"validator.phoneUsed": "您的手機號碼已被使用於此活動。",
+	"validator.dateInvalid": "此日期無效，請更新.",
+	"lead.otp.title": "輸入 OTP",
+	"lead.otp.desc": "我們已將 OTP 發送到您的手機號碼 {phone}",
+	"lead.otp.verify": "驗證",
+	"lead.otp.resend": "重新發送 OTP {timer}",
+	"lead.otp.phoneLabel": "電話 OTP",
+	"lead.otp.phonePlaceholder": "輸入 OTP",
+	"lead.empty.title": "哎呀，您的資訊似乎是空的，您想要重新提交資訊嗎？",
+	"lead.empty.cancel": "取消",
+	"lead.empty.submitAgain": "重新提交",
+	"inlineFreebie.freeSample.title": "免費試用",
+	"inlineFreebie.luckyDrawGift.title": "幸運抽獎禮品",
+	"inlineFreebie.value": "價值",
+	"common.day": "日",
+	"common.month": "月",
+	"common.year": "年"
+};
 
-const Heading = (_a) => {
-    var rest = tslib_es6.__rest(_a, []);
-    const { heading } = React.useContext(LeadGenComponentContext);
-    return heading ? (React__default["default"].createElement(index$2.Text, Object.assign({ size: "h3" }, rest), heading)) : null;
+const translationsMap = {
+    'en-PH': enPH,
+    'vi-VN': viVN,
+    'hi-IN': hiIN,
+    'id-ID': idID,
+    'ms-MY': msMY,
+    'my-MM': myMM,
+    'km-KH': kmKH,
+    'zh-TW': zhTW,
+    'zh-SG': zhTW,
+    'th-TH': thTH,
+    'tl-PH': enPH,
+};
+const getTranslations = (locale) => {
+    const translations = Object.assign(Object.assign({}, translationsProvider.translationsMap[locale]), translationsMap[locale]);
+    if (translations) {
+        return translations;
+    }
+    return translationsMap['en-PH'];
 };
 
-const FormComponent = ({ styles, className, classNames, fillInfo, popoverProps, submitProps, }) => {
-    var _a;
-    const { primaryColor } = React.useContext(LeadGenContext$1);
-    const { listBlockAdded, leadFormConfig: { form, validateObj }, validatingEmailRef, validatingPhoneRef, 
-    // formRef,
-    setFormRef, onClose, onOtherSubmit, actionBlocks, locale, setShowOtpPhone, onSubmit, } = React.useContext(LeadGenComponentContext);
-    const { classes, cx } = useStyles$2(undefined, {
-        name: 'LeadGen__FormComponent',
-        styles,
-        classNames,
-    });
-    const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
-    const popUpSubmitText = actionBlocks.submitBlock.data.value;
-    const middlewareOnSubmit = (e) => {
-        e.preventDefault();
-        // mark all as touched to allow validation
-        form.setTouched(Object.keys(validateObj).reduce((acc, cur) => {
-            acc[cur] = true;
-            return acc;
-        }, {}));
-        if (validatingEmailRef.current || validatingPhoneRef.current) {
-            return;
+const FormatMessageContext = React.createContext(null);
+const LeadGenTranslationProvider = ({ locale, formatMessage, children, }) => {
+    const translationContextValue = React.useMemo(() => ({ locale, values: getTranslations(locale) }), [locale]);
+    return (React__default["default"].createElement(FormatMessageContext.Provider, { value: formatMessage || null }, formatMessage ? (children) : (React__default["default"].createElement(translationsContext.TranslationsContext.Provider, { value: translationContextValue }, children))));
+};
+const useLeadGenTranslations = () => {
+    const externalFormatMessage = React.useContext(FormatMessageContext);
+    const { t: internalT, locale } = index$1.useTranslations();
+    const t = React.useMemo(() => {
+        if (externalFormatMessage) {
+            return (key, options) => {
+                return externalFormatMessage({ id: key, defaultMessage: key }, options);
+            };
         }
-        setTimeout(() => {
-            form.onSubmit((v) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-                if (Object.keys(form.errors).length)
+        return internalT;
+    }, [externalFormatMessage, internalT]);
+    return { t, locale };
+};
+
+// You can give context variables any name
+const [LeadFormProvider$1, useLeadFormContext$1, useLeadForm$1] = form.createFormContext();
+const useLeadFormConfig$1 = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, }) => {
+    const { t } = useLeadGenTranslations();
+    const initialValues = React.useMemo(() => formatLeadGenFormValue(mappingSSOToLead(userInfo), listBlockAdded), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
+    React.useEffect(() => {
+        if (!window.intlTelInputUtils) {
+            require('intl-tel-input/build/js/utils');
+        }
+    }, []);
+    const validateObj = React.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;
-                let newShowOtpPhone = null;
-                if (listBlockAdded.findIndex((x) => x.name === 'PhoneOtpBlock') > -1) {
-                    // not submit yet, open otp
-                    const fieldName = (_b = (_a = listBlockAdded.find((x) => x.name === 'PhoneOtpBlock')) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value;
-                    if ((_c = v[fieldName]) === null || _c === void 0 ? void 0 : _c.startsWith('+')) {
-                        newShowOtpPhone = {
-                            phone: v[fieldName],
-                            type: 'phone',
-                        };
-                    }
+                if (typeof value === 'undefined' ||
+                    value === '' ||
+                    (Array.isArray(value) && value.length === 0)) {
+                    return isBLockRequired
+                        ? t('validator.required')
+                        : cb === null || cb === void 0 ? void 0 : cb(value);
                 }
-                if (listBlockAdded.findIndex((x) => x.name === 'WhatsappOtpBlock') > -1) {
-                    // not submit yet, open otp
-                    const fieldName = (_e = (_d = listBlockAdded.find((x) => x.name === 'WhatsappOtpBlock')) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.value;
-                    if ((_f = v[fieldName]) === null || _f === void 0 ? void 0 : _f.startsWith('+')) {
-                        newShowOtpPhone = {
-                            phone: v[fieldName],
-                            type: 'whatsapp',
-                        };
-                    }
-                }
-                if (listBlockAdded.findIndex((x) => x.name === 'ZaloOtpBlock') > -1) {
-                    // not submit yet, open otp
-                    const fieldName = (_h = (_g = listBlockAdded.find((x) => x.name === 'ZaloOtpBlock')) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.value;
-                    if ((_j = v[fieldName]) === null || _j === void 0 ? void 0 : _j.startsWith('+')) {
-                        newShowOtpPhone = {
-                            phone: v[fieldName],
-                            type: 'zalo',
-                        };
-                    }
-                }
-                if (newShowOtpPhone) {
-                    setIsSubmitLoading(true);
-                    Service.sendSMSOtpLead(newShowOtpPhone)
-                        .then((res) => {
-                        var _a;
-                        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
-                        if (respMessage === 'This phone number was verified') {
-                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
+                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');
                         }
-                        setShowOtpPhone(newShowOtpPhone);
-                    })
-                        .finally(() => {
-                        setIsSubmitLoading(false);
-                    });
-                    return;
-                }
-                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
-            })(e);
-        }, 100);
+                        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$1({
+        validateInputOnChange: true,
+        clearInputErrorOnChange: true,
+        validate: validateObj,
+        initialValues,
+    });
+    const formRef = React.useRef(form);
+    formRef.current = form;
+    return { form, validateObj };
+};
+
+const Component = ({ campaign, onClose: onCloseProp, onOtherSubmit, onSubmit, showThankyou, setShowThankyou, locale, children, showEmpty, setShowEmpty, userInfo, }) => {
+    var _a, _b;
+    const extraFields = campaign.extra_fields;
+    const campaignId = campaign.id;
+    const campaign_subot_id = campaign.bot_id || [];
+    const listBlockAdded = JSON.parse(extraFields.listBlockAdded);
+    const actionBlocks = JSON.parse(extraFields.actionBlocks);
+    const textBlocks = JSON.parse(extraFields.textBlocks);
+    const heading = ((_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 description = textBlocks.subtitleBlock.data.value;
+    const validatingPhoneRef = React.useRef(false);
+    const validatingEmailRef = React.useRef(false);
+    const leadFormConfig = useLeadFormConfig$1({
+        listBlockAdded,
+        validatingPhoneRef,
+        validatingEmailRef,
+        campaignId,
+        campaign_subot_id,
+        userInfo,
+    });
+    const [showOtpPhone, setShowOtpPhone] = React.useState(null);
+    const [formRef, setFormRef] = React.useState(null);
+    const onClose = () => {
+        if (showOtpPhone) {
+            setShowOtpPhone(null);
+        }
+        else {
+            onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
+        }
     };
     React.useEffect(() => {
-        form === null || form === void 0 ? void 0 : form.setValues(fillInfo);
-    }, [fillInfo]);
-    return (React__default["default"].createElement(LeadFormProvider$1, { form: form },
-        React__default["default"].createElement(core.Box, { component: "form", ref: (el) => el && setFormRef(el), className: cx(className, classes.root), onSubmit: middlewareOnSubmit, styles: styles },
-            React__default["default"].createElement("div", { className: classes.header },
-                React__default["default"].createElement(Heading, { className: classes.heading }),
-                React__default["default"].createElement(Description, { className: classes.description })),
-            React__default["default"].createElement("div", { className: classes.controlList },
-                React__default["default"].createElement(Fields, { classNames: {
-                        control: classes.control,
-                    }, listBlockAdded: listBlockAdded, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit, popoverProps: popoverProps })),
-            ((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) ? null : (React__default["default"].createElement("div", { className: classes.submitBtnWrapper },
-                React__default["default"].createElement(index$4.Button, Object.assign({ size: "md", id: "lead-submit", type: "submit", className: classes.submitBtn, loading: isSubmitLoading, color: primaryColor }, submitProps), popUpSubmitText))))));
-};
-const Form = (props) => {
-    const { showOtpPhone, showThankyou } = React.useContext(LeadGenComponentContext);
-    return showThankyou || showOtpPhone ? null : React__default["default"].createElement(FormComponent, Object.assign({}, props));
+        clearCacheUsedEmailOrPhone();
+    }, []);
+    return campaign ? (React__default["default"].createElement(LeadGenComponentContext.Provider, { value: {
+            campaignId,
+            campaign_subot_id,
+            heading,
+            description,
+            listBlockAdded,
+            textBlocks,
+            actionBlocks,
+            leadFormConfig,
+            validatingEmailRef,
+            validatingPhoneRef,
+            formRef: { current: formRef },
+            setFormRef,
+            locale,
+            onClose,
+            onOtherSubmit,
+            showOtpPhone,
+            setShowOtpPhone,
+            onSubmit,
+            showThankyou,
+            setShowThankyou,
+            showEmpty,
+            setShowEmpty,
+        } }, children)) : null;
 };
 
-var useStyles$1 = core.createStyles(() => {
+const Description = (_a) => {
+    var rest = tslib_es6.__rest(_a, []);
+    const { description } = React.useContext(LeadGenComponentContext);
+    return description ? (React__default["default"].createElement(index$2.Text, Object.assign({ size: "p3" }, rest), description)) : null;
+};
+
+const LeadGenContext$1 = React.createContext({});
+
+var useStyles$3 = core.createStyles(() => {
     return {
-        root: {},
-        header: {},
-        heading: {},
-        description: {},
         control: {},
-        actions: {},
-        submitBtn: {},
-        resendOtp: {},
     };
 });
 
-const OtpBlockComponent = ({ otpData, onSuccess, autoSendWhenOpen, className, styles, classNames, }) => {
-    const { t } = index$1.useTranslations();
-    const phone = otpData.phone;
-    const otpType = otpData.type;
-    const [otp, setOtp] = React.useState('');
-    const [isDirty, setIsDirty] = React.useState(false);
-    const [resendTimer, setResendTimer] = React.useState(autoSendWhenOpen ? 0 : 60);
-    const inputRef = React.useRef(null);
-    const [errorMsg, setErrorMsg] = React.useState();
-    const [displayPhone, setDisplayPhone] = React.useState('');
-    const formatPhoneNumberIntlRef = React.useRef();
-    const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
-    const { classes, cx } = useStyles$1(undefined, {
-        name: 'LeadGen__OTP',
-        styles,
-        classNames,
-    });
-    React.useEffect(() => {
-        (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-            var _a;
-            if (!formatPhoneNumberIntlRef.current) {
-                const res = yield Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('react-phone-number-input')); });
-                formatPhoneNumberIntlRef.current = res.formatPhoneNumberIntl;
-            }
-            setDisplayPhone(((_a = formatPhoneNumberIntlRef.current) === null || _a === void 0 ? void 0 : _a.call(formatPhoneNumberIntlRef, phone)) || phone);
-        }))();
-    }, [phone]);
-    const sendOtp = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        if (!phone) {
-            return;
-        }
-        const res = yield Service.sendSMSOtpLead({
-            phone,
-            type: otpType,
-        });
-        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
-        if (respMessage === 'Send sms successfully' ||
-            respMessage === 'Send WhatsApp successfully' ||
-            respMessage === 'Send Zalo successfully') {
-            setResendTimer(60);
-            setTimeout(() => {
-                if (inputRef.current) {
-                    inputRef.current.focus();
-                    inputRef.current.scrollIntoView({ block: 'center' });
-                }
-            }, 100);
-        }
-        else if (respMessage === 'This phone number was verified') {
-            onSuccess();
-        }
-        else {
-            setErrorMsg(respMessage || 'Something went wrong!');
-            // const defaultError = f({ id: 'notification.comment.somethingWrong' })
-            // setStatusVerifyOTP('idle')
-            // pushNotifications({
-            //   title: respMessage || defaultError,
-            //   message: '',
-            //   type: 'danger',
-            // })
-        }
-    });
-    const submitOtp = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
-        if (!phone || !otp) {
-            return;
-        }
-        setIsSubmitLoading(true);
-        const res = yield Service.verifyOtpLead({
-            phone,
-            otp,
-            type: otpType,
+const libraries$1 = ['places'];
+const LocationBlock = ({ name, placeholder, locale, required = true, }) => {
+    var _a;
+    const form = useLeadFormContext$1();
+    const [searchValue, setSearchValue] = React.useState('');
+    const [address, setAddress] = React.useState('');
+    const { predictions } = usePlacesAutocomplete.usePlacesAutocomplete(searchValue, '', locale === 'tl-PH' ? 'en' : (_a = locale === null || locale === void 0 ? void 0 : locale.split('-')) === null || _a === void 0 ? void 0 : _a[0]);
+    const [LoadScript, setLoadScript] = React.useState(null);
+    const [ready, setReady] = React.useState(false);
+    const randRef = React.useRef(Math.random().toString(36).substring(7));
+    const options = React.useMemo(() => {
+        const _opts = predictions.map((p) => {
+            return {
+                value: p.description,
+                label: p.description,
+            };
         });
-        const respMessage = res === null || res === void 0 ? void 0 : res._messages[0];
-        if (respMessage === 'Verify successfully' ||
-            respMessage === 'Verify WhatsApp OTP sucess' ||
-            respMessage === 'Verify Zalo OTP sucess') {
-            onSuccess();
+        const isExist = _opts.find((o) => o.value === address);
+        if (!address || isExist) {
+            return _opts;
         }
-        else if (respMessage === 'This phone number was verified') {
-            onSuccess();
+        return [{ value: address, label: address }].concat(_opts);
+    }, [predictions, address]);
+    React.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)) {
+            Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@react-google-maps/api')); }).then((m) => {
+                setLoadScript(() => m.LoadScript);
+                setTimeout(() => {
+                    setReady(true);
+                }, 200);
+            });
         }
         else {
-            setErrorMsg(respMessage || 'something Wrong');
-            // setIsShowError(true)
-            // setStatusVerifyOTP('sent')
-            // pushNotifications({
-            //   title: res?._messages[0] || defaultError,
-            //   message: '',
-            //   type: 'danger',
-            // })
-        }
-        setIsSubmitLoading(false);
-    });
-    React.useEffect(() => {
-        setTimeout(() => {
-            if (resendTimer > 0) {
-                setResendTimer((r) => r - 1);
-            }
-        }, 1000);
-    }, [resendTimer]);
-    React.useEffect(() => {
-        if (autoSendWhenOpen && !resendTimer) {
-            sendOtp();
+            setReady(true);
         }
     }, []);
+    if (!ready)
+        return (React__default["default"].createElement("div", { style: {
+                height: 73,
+            } }));
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(core.Box, { component: "form", onSubmit: (e) => {
-                e.preventDefault();
-                submitOtp();
-            }, className: cx(classes.root, className) },
-            React__default["default"].createElement("div", { className: classes.header },
-                React__default["default"].createElement(index$6.Heading, { tag: "h3", className: classes.heading }, t('lead.otp.title')),
-                React__default["default"].createElement(index$2.Text, { size: "p3", className: classes.description }, t('lead.otp.desc', { phone: displayPhone }))),
-            React__default["default"].createElement(index$3.Input, { ref: inputRef, name: '_' + name + '-otp', spellCheck: false, type: "number", placeholder: t('lead.otp.phonePlaceholder'), className: classes.control, label: t('lead.otp.phoneLabel'), "data-control": "otp", withAsterisk: true, pattern: "[0-9]*", value: otp, maxLength: 6, onChange: (v) => {
-                    setIsDirty(true);
-                    setOtp(v);
-                    if (isDirty && !v)
-                        setErrorMsg('OTP is required');
-                    else
-                        setErrorMsg(undefined);
-                }, error: isDirty ? errorMsg : undefined }),
-            React__default["default"].createElement("div", { className: classes.actions },
-                React__default["default"].createElement(index$4.Button, { type: "submit", size: "md", color: "primary", className: classes.submitBtn, 
-                    // onClick={() => submitOtp()}
-                    disabled: !otp, loading: isSubmitLoading }, t('lead.otp.verify')),
-                React__default["default"].createElement(index$4.Button, { type: "button", size: "md", color: "transparent", className: classes.resendOtp, onClick: () => {
-                        sendOtp();
-                    }, disabled: !!resendTimer }, t('lead.otp.resend', {
-                    timer: resendTimer ? ` (${resendTimer}s)` : '',
-                }))))));
-};
-const OtpBlock$1 = (_a) => {
-    var rest = tslib_es6.__rest(_a, []);
-    const { showOtpPhone, setShowOtpPhone, onSubmit,
-    // formRef,
-    // leadFormConfig: { form },
-     } = React.useContext(LeadGenComponentContext);
-    return showOtpPhone ? (React__default["default"].createElement(OtpBlockComponent, Object.assign({ otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
-            setShowOtpPhone(null);
-            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
-        } }, rest))) : null;
-};
-
-const Thankyou = ({ children, }) => {
-    const { showThankyou, setShowThankyou } = React.useContext(LeadGenComponentContext);
-    return showThankyou
-        ? children(showThankyou, () => setShowThankyou(null))
-        : null;
+        LoadScript && (React__default["default"].createElement(LoadScript, { googleMapsApiKey: usePlacesAutocomplete.GOOGLE_API_KEY, libraries: libraries$1, loadingElement: React__default["default"].createElement(React__default["default"].Fragment, null) })),
+        React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": name, "data-control": 'text' }),
+        React__default["default"].createElement(index$3.Select, Object.assign({ className: "lead-modal__form-control", label: placeholder, placeholder: placeholder, withAsterisk: required, name: name, data: options, searchValue: searchValue, onSearchChange: (query) => {
+                setSearchValue(query);
+            }, filter: () => true, clearable: true, searchable: true, onChange: (val) => setAddress(val || ''), icon: React__default["default"].createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
+                React__default["default"].createElement("path", { d: "M10 9.792q.605 0 1.032-.427.426-.428.426-1.032 0-.603-.426-1.031A1.4 1.4 0 0 0 10 6.875q-.604 0-1.032.427a1.4 1.4 0 0 0-.426 1.031q0 .604.426 1.032.428.426 1.032.427m0 8.083q-.145 0-.292-.042a.7.7 0 0 1-.27-.145Q6.478 15 5.01 12.708 3.54 10.418 3.54 8.5q0-3.021 1.949-4.823T10 1.875t4.51 1.802q1.95 1.802 1.949 4.823 0 1.917-1.468 4.208-1.47 2.292-4.427 4.98a.7.7 0 0 1-.271.145 1 1 0 0 1-.292.042", fill: "#8C8C8C" })), autoComplete: 'no-auto-complete-' + randRef.current, rightSection: React__default["default"].createElement(React__default["default"].Fragment, null) }, form.getInputProps(name)))));
 };
 
-var enPH = {
-	"validator.required": "This field is required.",
-	"validator.remote": "Please fix this field.",
-	"validator.email": "Please enter a valid email address.",
-	"validator.phone": "Please input correct phone number.",
-	"validator.url": "Please enter a valid URL.",
-	"validator.date": "Please enter a valid date.",
-	"validator.dateISO": "Please enter a valid date (ISO).",
-	"validator.number": "Please enter a valid number.",
-	"validator.digits": "Please enter only digits.",
-	"validator.creditcard": "Please enter a valid credit card number.",
-	"validator.equalTo": "Please enter the same value again.",
-	"validator.accept": "Please enter a value with a valid extension.",
-	"validator.maxlength": "jQuery.validator.format('Please enter no more than {0} characters.",
-	"validator.minlength": "jQuery.validator.format('Please enter at least {0} characters.",
-	"validator.rangelength": "jQuery.validator.format('Please enter a value between {0} and {1} characters long.",
-	"validator.range": "jQuery.validator.format('Please enter a value between {0} and {1}.",
-	"validator.max": "jQuery.validator.format('Please enter a value less than or equal to {0}.",
-	"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",
-	"lead.otp.resend": "Resend OTP{timer}",
-	"lead.otp.phoneLabel": "Phone OTP",
-	"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",
-	"inlineFreebie.freeSample.title": "Free Sample",
-	"inlineFreebie.luckyDrawGift.title": "Lucky-draw Gift",
-	"inlineFreebie.value": "Value",
-	"common.day": "Day",
-	"common.month": "Month",
-	"common.year": "Year"
-};
+const SubtitleBlock$1 = ({ children, align, }) => (React__default["default"].createElement("p", { className: `lead-modal__description ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
-var hiIN = {
-	"validator.required": "इस क्षेत्र की आवश्यकता है।",
-	"validator.email": "कृपया एक मान्य ईमेल पता दर्ज करें",
-	"validator.number": "कृपया एक वैध संख्या दर्ज करें",
-	"validator.digits": "कृपया केवल अंक दर्ज करें",
-	"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",
-	"lead.otp.desc": "We have sent an OTP to your mobile number {phone}",
-	"lead.otp.verify": "Verify",
-	"lead.otp.resend": "Resend OTP{timer}",
-	"lead.empty.title": "ऊप्स! लगता है आपकी जानकारी खाली है। क्या आप जानकारी फिर से सबमिट करना चाहते हैं?",
-	"lead.empty.cancel": "रद्द करें",
-	"lead.empty.submitAgain": "फिर से सबमिट करें",
-	"inlineFreebie.freeSample.title": "मुफ्त नमूना",
-	"inlineFreebie.luckyDrawGift.title": "लकी-ड्रा गिफ्ट",
-	"inlineFreebie.value": "मूल्य",
-	"common.day": "साल",
-	"common.month": "महीना",
-	"common.year": ""
-};
+const TitleBlock$1 = ({ children, align, }) => (React__default["default"].createElement("h2", { className: `lead-modal__title ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
-var idID = {
-	"validator.required": "Kolom ini wajib diisi",
-	"validator.email": "Tolong daftarkan email yang valid",
-	"validator.number": "Tolong daftarkan nomor telepon yang valid",
-	"validator.digits": "Tolong masukkan angka saja",
-	"validator.maxlength": "Jangan memasukkan lebih dari {0} karakter",
-	"validator.minlength": "Tolong ketik sedikitnya {0} karakter",
-	"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",
-	"lead.otp.resend": "Kirim Ulang OTP {timer}",
-	"lead.otp.phoneLabel": "OTP Telepon",
-	"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",
-	"inlineFreebie.freeSample.title": "Sampel Gratis",
-	"inlineFreebie.luckyDrawGift.title": "Hadiah Undian",
-	"inlineFreebie.value": "Nilai",
-	"common.day": "Hari",
-	"common.month": "Bulan",
-	"common.year": "Tahun"
-};
-
-var kmKH = {
-	"validator.required": "ព័ត៌មាន​ចាំបាច់​ដែល​ត្រូវ​បំពេញ",
-	"validator.email": "សូម​វាយ​អាសយដ្ឋាន​អ៊ីម៉ែល​ឲ្យ​បាន​ត្រឹមត្រូវ",
-	"validator.number": "សូម​វាយបញ្ចូល​លេខ​ឲ្យ​បាន​ត្រឹមត្រូវ",
-	"validator.digits": "វាយ​បញ្ចូល​បាន​តែ​លេខ​ប៉ុណ្ណោះ",
-	"validator.maxlength": "សូម​វាយ​បញ្ចូលកុំ​ឲ្យ​លើស {0} តួអក្សរ",
-	"validator.minlength": "សូម​វាយ​បញ្ចូល​តិច​បំផុត {0} តួអក្ស",
-	"validator.phone": "សូម​វាយបញ្ចូល​លេខ​ឲ្យ​បាន​ត្រឹមត្រូវ",
-	"validator.emailUsed": "អ៊ីមែលត្រូវបានប្រើប្រាស់សម្រាប់យុទ្ធនាការនេះរួចហើយ។",
-	"validator.phoneUsed": "លេខទូរស័ព្ទរបស់អ្នកត្រូវបានប្រើប្រាស់សម្រាប់យុទ្ធនាការនេះរួចហើយ។",
-	"validator.dateInvalid": "កាលបរិច្ឆេទនេះមិនត្រឹមត្រូវទេ សូមធ្វើបច្ចុប្បន្នភាព។",
-	"lead.otp.title": "បញ្ចូល OTP",
-	"lead.otp.desc": "យើងបានផ្ញើ OTP ទៅកាន់លេខទូរសព្ទរបស់អ្នក {phone}",
-	"lead.otp.verify": "ផ្ទៀងផ្ទាត់",
-	"lead.otp.resend": "ផ្ញើ OTP ម្តងទៀត {timer}",
-	"lead.otp.phoneLabel": "OTP ទូរស័ព្ទ",
-	"lead.otp.phonePlaceholder": "បញ្ចូល OTP",
-	"lead.empty.title": "អូុបស! ហាក់ដូចជាព័ត៌មានរបស់អ្នកទទេ។ តើអ្នកចង់ដាក់ស្នើព័ត៌មានម្តងទៀតទេ?",
-	"lead.empty.cancel": "លុប​ចោល",
-	"lead.empty.submitAgain": "ដាក់ស្នើម្ដងទៀត",
-	"inlineFreebie.freeSample.title": "សំបុត្រស្រង់ពិន័យ",
-	"inlineFreebie.luckyDrawGift.title": "សំបុត្រស្រង់ពិន័យ",
-	"inlineFreebie.value": "តម្លៃ",
-	"common.day": "ឆ្នាំ",
-	"common.month": "ខែ",
-	"common.year": "ថ្ងៃ"
-};
-
-var msMY = {
-	"validator.required": "Bahagian ini wajib diisi.",
-	"validator.email": "Sila masukkan alamat emel yang sah.",
-	"validator.number": "Sila masukkan no telefon yang sah.",
-	"validator.digits": "Sila masukkan nombor digit sahaja.",
-	"validator.maxlength": "Sila masukkan tidak lebih dari {0} aksara",
-	"validator.minlength": "Sila masukkan sekurang-kurangnya {0} aksara",
-	"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",
-	"lead.otp.resend": "Hantar semula OTP {timer}",
-	"lead.otp.phoneLabel": "OTP Telefon",
-	"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",
-	"inlineFreebie.freeSample.title": "Sampel Percuma",
-	"inlineFreebie.luckyDrawGift.title": "Hadiah Undian",
-	"inlineFreebie.value": "Nilai",
-	"common.day": "Hari",
-	"common.month": "Bulan",
-	"common.year": "Tahun"
+const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, styles, classNames, popoverProps, }) => {
+    const { primaryColor } = React.useContext(LeadGenContext$1);
+    const { classes, cx } = useStyles$3(undefined, {
+        name: 'LeadGen__Field',
+        styles,
+        classNames,
+    });
+    const form = useLeadFormContext$1();
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, listBlockAdded.map((b, index) => {
+        var _a;
+        const { name = '', data = {} } = b || {};
+        const { placeholder, value, align, listQuestion, isSendMailChimp = false, newtab, url, } = data;
+        const required = (_a = data.required) !== null && _a !== void 0 ? _a : true;
+        switch (name) {
+            case 'TitleBlock':
+                return (React__default["default"].createElement(TitleBlock$1, { key: index, align: align }, value));
+            case 'SubtitleBlock':
+                return (React__default["default"].createElement(SubtitleBlock$1, { key: index, align: align }, value));
+            case 'TextBlock':
+                return (React__default["default"].createElement(index$3.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
+                    // onChangeRaw={(e) => inputOnChange('text', e)}
+                    label: placeholder, "data-control": "text", "data-lead-control": name, "data-is-required": required, name: value }, form.getInputProps(value))));
+            case 'NumberBlock':
+                return (React__default["default"].createElement(index$3.NumberInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
+                    // onChange={(e) => inputOnChange('number', e)}
+                    label: placeholder, "data-control": "number", "data-lead-control": name, "data-is-required": required, name: value }, form.getInputProps(value))));
+            case 'EmailBlock':
+                return (React__default["default"].createElement(index$3.Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
+                    // type="email"
+                    placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "email", "data-lead-control": name, "data-is-required": required, name: value }, form.getInputProps(value))));
+            case 'PhoneOtpBlock':
+            case 'WhatsappOtpBlock':
+            case 'ZaloOtpBlock':
+            case 'PhoneBlock': {
+                const id = popupId + '-' + value + '-' + index;
+                return (React__default["default"].createElement(index$3.Input.Wrapper, Object.assign({ size: "md", withAsterisk: required, key: index, label: placeholder, 
+                    // error={errorField.phone}
+                    className: cx('leadgen-control', classes.control), labelProps: {
+                        htmlFor: id,
+                    } }, form.getInputProps(value)),
+                    React__default["default"].createElement(index$3.Phone, { name: value, spellCheck: false, type: "tel", placeholder: placeholder, value: form.getInputProps(value).value, onChange: (v) => {
+                            form.setFieldValue(value, v);
+                        }, 
+                        // onBlur={(e) => inputOnBlur('tel', e)}
+                        id: id, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel", "data-lead-control": name, "data-is-required": required })));
+            }
+            case 'LocationBlock': {
+                return (React__default["default"].createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
+            }
+            case 'DateBlock':
+                return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(index$5.DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date", "data-lead-control": name, "data-is-required": required, popoverProps: popoverProps }, form.getInputProps(value))),
+                    React__default["default"].createElement("input", { type: "hidden", name: value, "data-control": "date" })));
+            case 'LinkButtonBlock':
+                return (React__default["default"].createElement("div", { key: index },
+                    React__default["default"].createElement("a", { target: newtab ? 'blank' : 'parrent', href: url, style: { textDecoration: 'none' } },
+                        React__default["default"].createElement(index$4.Button, { type: "button", size: "md", color: primaryColor, className: `lead-modal__btn ${LEAD_CLASS}`, onClick: () => {
+                                onClose === null || onClose === void 0 ? void 0 : onClose();
+                                onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
+                            } }, value))));
+            case 'CheckboxBlock':
+                return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    isSendMailChimp && (React__default["default"].createElement("div", { style: {
+                            display: 'none',
+                        }, "data-name": value + '-mailchimp' })),
+                    React__default["default"].createElement(index$3.Checkbox.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md", sx: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 8,
+                        } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }))))));
+            case 'RadioBlock':
+                return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    isSendMailChimp && (React__default["default"].createElement(index$3.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
+                    React__default["default"].createElement(index$3.Radio.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$3.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio", "data-lead-control": name, "data-is-required": required }))))));
+            case 'DropdownBlock':
+                return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown', "data-lead-control": name, "data-is-required": required }),
+                    React__default["default"].createElement(index$3.Select, Object.assign({ key: index, className: cx('leadgen-control', classes.control), label: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
+                            value: l.value,
+                            label: l.placeholder,
+                        })) }, form.getInputProps(value)))));
+            case 'TncBlock':
+                const tncInputProps = form.getInputProps('TNC-' + b.id);
+                return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(index$3.Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox", "data-lead-control": name, "data-is-required": required }, tncInputProps, { error: tncInputProps.error ? tncInputProps.error : undefined }))));
+        }
+        return null;
+    })));
 };
 
-var myMM = {
-	"validator.required": "ဒီနေရာမှာ ဖြည့်ဖို့ လိုအပ်ပါတယ်",
-	"validator.email": "မှန်ကန်သော အီးမေးလ်လိပ်စာထည့်သွင်းပါ",
-	"validator.number": "မှန်ကန်သော ဖုန်းနံပါတ်ထည့်သွင်းပါ",
-	"validator.digits": "နံပါတ်များသာဖြည့်ပါ",
-	"validator.maxlength": "ကျေးဇူးပြု၍ {0} ထပ်မပိုသော ဂဏန်းများသာဖြည့်ပါ",
-	"validator.minlength": "ကျေးဇူးပြု၍ အနည်းဆုံး {0} ဂဏန်းဖြည့်ပါ",
-	"validator.phone": "မှန်ကန်သော ဖုန်းနံပါတ်ထည့်သွင်းပါ",
-	"validator.emailUsed": "ဤအေကာင့်အတွက် အီးမေးလ်ကို အသုံးပြုပြီးဖြစ်ပါသည်။",
-	"validator.phoneUsed": "ဤအေကာင့်အတွက် သင့်ဖုန်းနံပါတ်ကို အသုံးပြုပြီးဖြစ်ပါသည်။",
-	"validator.dateInvalid": "ယနေ့စွဲမှားနေသည်၊ ကျေးဇူးပြု၍ ပြင်ဆင်ပါ။",
-	"lead.otp.title": "OTP ကိုထည့်ပါ",
-	"lead.otp.desc": "ကျွန်ုပ်တို့သည် OTP ကိုသင့်ဖုန်းနံပါတ် {phone} သို့ပို့ခဲ့သည်",
-	"lead.otp.verify": "အတည်ပြုပါ",
-	"lead.otp.resend": "OTP ကိုထပ်မံပို့ရန် {timer}",
-	"lead.otp.phoneLabel": "ဖုန်း OTP",
-	"lead.otp.phonePlaceholder": "OTP ကိုထည့်ပါ",
-	"lead.empty.title": "အုပ်စ်! သင့်အချက်အလက်သည် ဗလာဖြစ်နေသလိုဖြစ်သည်။ ထပ်မံတင်သွင်းလိုပါသလား?",
-	"lead.empty.cancel": "မလုပ်ဆောင်ပါ",
-	"lead.empty.submitAgain": "ထပ်မံတင်သွင်းပါ",
-	"inlineFreebie.freeSample.title": "အခမဲ့အစားအစာ",
-	"inlineFreebie.luckyDrawGift.title": "အခမဲ့အစားအစာ",
-	"inlineFreebie.value": "တန်ဖိုး",
-	"common.day": "ရက်",
-	"common.month": "လ",
-	"common.year": "နှစ်"
-};
+var useStyles$2 = core.createStyles((theme) => {
+    return {
+        root: {},
+        header: {},
+        heading: {},
+        description: {},
+        term: {
+            a: {
+                color: theme.fn.primaryColor(),
+            },
+        },
+        controlList: {},
+        control: {},
+        submitBtn: {},
+        submitBtnWrapper: {},
+    };
+});
 
-var thTH = {
-	"validator.required": "ต้องระบุข้อมูลในช่องนี้",
-	"validator.email": "กรุณาใส่อีเมล์ที่ถูกต้อง",
-	"validator.number": "กรุณาใส่ตัวเลขที่ถูกต้อง",
-	"validator.digits": "กรุณาส่เฉพาะตัวเลข",
-	"validator.maxlength": "กรุณาใส่ตัวเลขมากกว่า {0} หลัก",
-	"validator.minlength": "กรุณาใส่ตัวเลขอย่างน้อย {0} หลัก",
-	"validator.phone": "กรุณาใส่ตัวเลขที่ถูกต้อง",
-	"validator.emailUsed": "อีเมลนี้ถูกใช้สำหรับแคมเปญนี้แล้ว",
-	"validator.phoneUsed": "หมายเลขโทรศัพท์ของคุณถูกใช้สำหรับแคมเปญนี้แล้ว",
-	"validator.dateInvalid": "วันที่นี้ไม่ถูกต้อง โปรดอัปเดต",
-	"lead.otp.title": "ป้อน OTP",
-	"lead.otp.desc": "เราได้ส่ง OTP ไปยังหมายเลขโทรศัพท์มือถือของคุณ {phone}",
-	"lead.otp.verify": "ยืนยัน",
-	"lead.otp.resend": "ส่ง OTP อีกครั้ง {timer}",
-	"lead.otp.phoneLabel": "OTP โทรศัพท์",
-	"lead.otp.phonePlaceholder": "ป้อน OTP",
-	"lead.empty.title": "อุ๊ปส์! ดูเหมือนว่าข้อมูลของคุณว่างเปล่า คุณต้องการส่งข้อมูลอีกครั้งหรือไม่?",
-	"lead.empty.cancel": "ยกเลิก",
-	"lead.empty.submitAgain": "ส่งอีกครั้ง",
-	"inlineFreebie.freeSample.title": "ตัวอย่างฟรี",
-	"inlineFreebie.luckyDrawGift.title": "ของรางวัลที่ถูกรางวัล",
-	"inlineFreebie.value": "ค่า",
-	"common.day": "วัน",
-	"common.month": "เดือน",
-	"common.year": "ปี"
+const Heading = (_a) => {
+    var rest = tslib_es6.__rest(_a, []);
+    const { heading } = React.useContext(LeadGenComponentContext);
+    return heading ? (React__default["default"].createElement(index$2.Text, Object.assign({ size: "h3" }, rest), heading)) : null;
 };
 
-var viVN = {
-	"validator.required": "Vui lòng điền mục này",
-	"validator.email": "Vui lòng điền email có thật.",
-	"validator.number": "Vui lòng điền số có thật",
-	"validator.digits": "Vui lòng chỉ điền số",
-	"validator.maxlength": "Vui lòng điền dưới {0} số",
-	"validator.minlength": "Vui lòng điền hơn {0} số",
-	"validator.remote": "Hãy sửa cho đúng.",
-	"validator.url": "Hãy nhập URL.",
-	"validator.date": "Hãy nhập ngày.",
-	"validator.dateISO": "Hãy nhập ngày (ISO).",
-	"validator.creditcard": "Hãy nhập số thẻ tín dụng.",
-	"validator.equalTo": "Hãy nhập thêm lần nữa.",
-	"validator.extension": "Phần mở rộng không đúng.",
-	"validator.rangelength": "Hãy nhập từ {0} đến {1} kí tự.",
-	"validator.range": "Hãy nhập từ {0} đến {1}.",
-	"validator.max": "Hãy nhập từ {0} trở xuống.",
-	"validator.min": "Hãy nhập từ {0} trở lên.",
-	"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",
-	"lead.otp.resend": "Gửi lại OTP {timer}",
-	"lead.otp.phoneLabel": "Nhập OTP",
-	"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",
-	"inlineFreebie.freeSample.title": "Dùng thử miễn phí",
-	"inlineFreebie.luckyDrawGift.title": "Phần thưởng may mắn",
-	"inlineFreebie.value": "Trị giá",
-	"common.day": "Ngày",
-	"common.month": "Tháng",
-	"common.year": "Năm"
+const FormComponent = ({ styles, className, classNames, fillInfo, popoverProps, submitProps, }) => {
+    var _a;
+    const { primaryColor } = React.useContext(LeadGenContext$1);
+    const { listBlockAdded, leadFormConfig: { form, validateObj }, validatingEmailRef, validatingPhoneRef, 
+    // formRef,
+    setFormRef, onClose, onOtherSubmit, actionBlocks, locale, setShowOtpPhone, onSubmit, } = React.useContext(LeadGenComponentContext);
+    const { classes, cx } = useStyles$2(undefined, {
+        name: 'LeadGen__FormComponent',
+        styles,
+        classNames,
+    });
+    const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
+    const popUpSubmitText = actionBlocks.submitBlock.data.value;
+    const middlewareOnSubmit = (e) => {
+        e.preventDefault();
+        // mark all as touched to allow validation
+        form.setTouched(Object.keys(validateObj).reduce((acc, cur) => {
+            acc[cur] = true;
+            return acc;
+        }, {}));
+        if (validatingEmailRef.current || validatingPhoneRef.current) {
+            return;
+        }
+        setTimeout(() => {
+            form.onSubmit((v) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                if (Object.keys(form.errors).length)
+                    return;
+                let newShowOtpPhone = null;
+                if (listBlockAdded.findIndex((x) => x.name === 'PhoneOtpBlock') > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_b = (_a = listBlockAdded.find((x) => x.name === 'PhoneOtpBlock')) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.value;
+                    if ((_c = v[fieldName]) === null || _c === void 0 ? void 0 : _c.startsWith('+')) {
+                        newShowOtpPhone = {
+                            phone: v[fieldName],
+                            type: 'phone',
+                        };
+                    }
+                }
+                if (listBlockAdded.findIndex((x) => x.name === 'WhatsappOtpBlock') > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_e = (_d = listBlockAdded.find((x) => x.name === 'WhatsappOtpBlock')) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.value;
+                    if ((_f = v[fieldName]) === null || _f === void 0 ? void 0 : _f.startsWith('+')) {
+                        newShowOtpPhone = {
+                            phone: v[fieldName],
+                            type: 'whatsapp',
+                        };
+                    }
+                }
+                if (listBlockAdded.findIndex((x) => x.name === 'ZaloOtpBlock') > -1) {
+                    // not submit yet, open otp
+                    const fieldName = (_h = (_g = listBlockAdded.find((x) => x.name === 'ZaloOtpBlock')) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.value;
+                    if ((_j = v[fieldName]) === null || _j === void 0 ? void 0 : _j.startsWith('+')) {
+                        newShowOtpPhone = {
+                            phone: v[fieldName],
+                            type: 'zalo',
+                        };
+                    }
+                }
+                if (newShowOtpPhone) {
+                    setIsSubmitLoading(true);
+                    Service.sendSMSOtpLead(newShowOtpPhone)
+                        .then((res) => {
+                        var _a;
+                        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
+                        if (respMessage === 'This phone number was verified') {
+                            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
+                            return;
+                        }
+                        setShowOtpPhone(newShowOtpPhone);
+                    })
+                        .finally(() => {
+                        setIsSubmitLoading(false);
+                    });
+                    return;
+                }
+                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
+            })(e);
+        }, 100);
+    };
+    React.useEffect(() => {
+        form === null || form === void 0 ? void 0 : form.setValues(fillInfo);
+    }, [fillInfo]);
+    return (React__default["default"].createElement(LeadFormProvider$1, { form: form },
+        React__default["default"].createElement(core.Box, { component: "form", ref: (el) => el && setFormRef(el), className: cx(className, classes.root), onSubmit: middlewareOnSubmit, styles: styles },
+            React__default["default"].createElement("div", { className: classes.header },
+                React__default["default"].createElement(Heading, { className: classes.heading }),
+                React__default["default"].createElement(Description, { className: classes.description })),
+            React__default["default"].createElement("div", { className: classes.controlList },
+                React__default["default"].createElement(Fields, { classNames: {
+                        control: classes.control,
+                    }, listBlockAdded: listBlockAdded, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit, popoverProps: popoverProps })),
+            ((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) ? null : (React__default["default"].createElement("div", { className: classes.submitBtnWrapper },
+                React__default["default"].createElement(index$4.Button, Object.assign({ size: "md", id: "lead-submit", type: "submit", className: classes.submitBtn, loading: isSubmitLoading, color: primaryColor }, submitProps), popUpSubmitText))))));
+};
+const Form = (props) => {
+    const { showOtpPhone, showThankyou } = React.useContext(LeadGenComponentContext);
+    return showThankyou || showOtpPhone ? null : React__default["default"].createElement(FormComponent, Object.assign({}, props));
 };
 
-var zhTW = {
-	"validator.required": "此為必填欄位",
-	"validator.email": "請填入有效的 email 地址",
-	"validator.number": "請填入有效的電話號碼",
-	"validator.digits": "此欄位僅能輸入數字",
-	"validator.maxlength": "請輸入少於 {0} 位數",
-	"validator.minlength": "請輸入至少 {0} 位數",
-	"validator.phone": "請填入有效的電話號碼",
-	"validator.emailUsed": "此電子郵件已被使用於此活動。",
-	"validator.phoneUsed": "您的手機號碼已被使用於此活動。",
-	"validator.dateInvalid": "此日期無效，請更新.",
-	"lead.otp.title": "輸入 OTP",
-	"lead.otp.desc": "我們已將 OTP 發送到您的手機號碼 {phone}",
-	"lead.otp.verify": "驗證",
-	"lead.otp.resend": "重新發送 OTP {timer}",
-	"lead.otp.phoneLabel": "電話 OTP",
-	"lead.otp.phonePlaceholder": "輸入 OTP",
-	"lead.empty.title": "哎呀，您的資訊似乎是空的，您想要重新提交資訊嗎？",
-	"lead.empty.cancel": "取消",
-	"lead.empty.submitAgain": "重新提交",
-	"inlineFreebie.freeSample.title": "免費試用",
-	"inlineFreebie.luckyDrawGift.title": "幸運抽獎禮品",
-	"inlineFreebie.value": "價值",
-	"common.day": "日",
-	"common.month": "月",
-	"common.year": "年"
-};
+var useStyles$1 = core.createStyles(() => {
+    return {
+        root: {},
+        header: {},
+        heading: {},
+        description: {},
+        control: {},
+        actions: {},
+        submitBtn: {},
+        resendOtp: {},
+    };
+});
 
-const translationsMap = {
-    'en-PH': enPH,
-    'vi-VN': viVN,
-    'hi-IN': hiIN,
-    'id-ID': idID,
-    'ms-MY': msMY,
-    'my-MM': myMM,
-    'km-KH': kmKH,
-    'zh-TW': zhTW,
-    'zh-SG': zhTW,
-    'th-TH': thTH,
-    'tl-PH': enPH,
+const OtpBlockComponent = ({ otpData, onSuccess, autoSendWhenOpen, className, styles, classNames, }) => {
+    const { t } = useLeadGenTranslations();
+    const phone = otpData.phone;
+    const otpType = otpData.type;
+    const [otp, setOtp] = React.useState('');
+    const [isDirty, setIsDirty] = React.useState(false);
+    const [resendTimer, setResendTimer] = React.useState(autoSendWhenOpen ? 0 : 60);
+    const inputRef = React.useRef(null);
+    const [errorMsg, setErrorMsg] = React.useState();
+    const [displayPhone, setDisplayPhone] = React.useState('');
+    const formatPhoneNumberIntlRef = React.useRef();
+    const [isSubmitLoading, setIsSubmitLoading] = React.useState(false);
+    const { classes, cx } = useStyles$1(undefined, {
+        name: 'LeadGen__OTP',
+        styles,
+        classNames,
+    });
+    React.useEffect(() => {
+        (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            if (!formatPhoneNumberIntlRef.current) {
+                const res = yield Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('react-phone-number-input')); });
+                formatPhoneNumberIntlRef.current = res.formatPhoneNumberIntl;
+            }
+            setDisplayPhone(((_a = formatPhoneNumberIntlRef.current) === null || _a === void 0 ? void 0 : _a.call(formatPhoneNumberIntlRef, phone)) || phone);
+        }))();
+    }, [phone]);
+    const sendOtp = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        if (!phone) {
+            return;
+        }
+        const res = yield Service.sendSMSOtpLead({
+            phone,
+            type: otpType,
+        });
+        const respMessage = (_a = res === null || res === void 0 ? void 0 : res._messages) === null || _a === void 0 ? void 0 : _a[0];
+        if (respMessage === 'Send sms successfully' ||
+            respMessage === 'Send WhatsApp successfully' ||
+            respMessage === 'Send Zalo successfully') {
+            setResendTimer(60);
+            setTimeout(() => {
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                    inputRef.current.scrollIntoView({ block: 'center' });
+                }
+            }, 100);
+        }
+        else if (respMessage === 'This phone number was verified') {
+            onSuccess();
+        }
+        else {
+            setErrorMsg(respMessage || 'Something went wrong!');
+            // const defaultError = f({ id: 'notification.comment.somethingWrong' })
+            // setStatusVerifyOTP('idle')
+            // pushNotifications({
+            //   title: respMessage || defaultError,
+            //   message: '',
+            //   type: 'danger',
+            // })
+        }
+    });
+    const submitOtp = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        if (!phone || !otp) {
+            return;
+        }
+        setIsSubmitLoading(true);
+        const res = yield Service.verifyOtpLead({
+            phone,
+            otp,
+            type: otpType,
+        });
+        const respMessage = res === null || res === void 0 ? void 0 : res._messages[0];
+        if (respMessage === 'Verify successfully' ||
+            respMessage === 'Verify WhatsApp OTP sucess' ||
+            respMessage === 'Verify Zalo OTP sucess') {
+            onSuccess();
+        }
+        else if (respMessage === 'This phone number was verified') {
+            onSuccess();
+        }
+        else {
+            setErrorMsg(respMessage || 'something Wrong');
+            // setIsShowError(true)
+            // setStatusVerifyOTP('sent')
+            // pushNotifications({
+            //   title: res?._messages[0] || defaultError,
+            //   message: '',
+            //   type: 'danger',
+            // })
+        }
+        setIsSubmitLoading(false);
+    });
+    React.useEffect(() => {
+        setTimeout(() => {
+            if (resendTimer > 0) {
+                setResendTimer((r) => r - 1);
+            }
+        }, 1000);
+    }, [resendTimer]);
+    React.useEffect(() => {
+        if (autoSendWhenOpen && !resendTimer) {
+            sendOtp();
+        }
+    }, []);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(core.Box, { component: "form", onSubmit: (e) => {
+                e.preventDefault();
+                submitOtp();
+            }, className: cx(classes.root, className) },
+            React__default["default"].createElement("div", { className: classes.header },
+                React__default["default"].createElement(index$6.Heading, { tag: "h3", className: classes.heading }, t('lead.otp.title')),
+                React__default["default"].createElement(index$2.Text, { size: "p3", className: classes.description }, t('lead.otp.desc', { phone: displayPhone }))),
+            React__default["default"].createElement(index$3.Input, { ref: inputRef, name: '_' + name + '-otp', spellCheck: false, type: "number", placeholder: t('lead.otp.phonePlaceholder'), className: classes.control, label: t('lead.otp.phoneLabel'), "data-control": "otp", withAsterisk: true, pattern: "[0-9]*", value: otp, maxLength: 6, onChange: (v) => {
+                    setIsDirty(true);
+                    setOtp(v);
+                    if (isDirty && !v)
+                        setErrorMsg('OTP is required');
+                    else
+                        setErrorMsg(undefined);
+                }, error: isDirty ? errorMsg : undefined }),
+            React__default["default"].createElement("div", { className: classes.actions },
+                React__default["default"].createElement(index$4.Button, { type: "submit", size: "md", color: "primary", className: classes.submitBtn, 
+                    // onClick={() => submitOtp()}
+                    disabled: !otp, loading: isSubmitLoading }, t('lead.otp.verify')),
+                React__default["default"].createElement(index$4.Button, { type: "button", size: "md", color: "transparent", className: classes.resendOtp, onClick: () => {
+                        sendOtp();
+                    }, disabled: !!resendTimer }, t('lead.otp.resend', {
+                    timer: resendTimer ? ` (${resendTimer}s)` : '',
+                }))))));
 };
-const getTranslations = (locale) => {
-    const translations = Object.assign(Object.assign({}, translationsProvider.translationsMap[locale]), translationsMap[locale]);
-    if (translations) {
-        return translations;
-    }
-    return translationsMap['en-PH'];
+const OtpBlock$1 = (_a) => {
+    var rest = tslib_es6.__rest(_a, []);
+    const { showOtpPhone, setShowOtpPhone, onSubmit,
+    // formRef,
+    // leadFormConfig: { form },
+     } = React.useContext(LeadGenComponentContext);
+    return showOtpPhone ? (React__default["default"].createElement(OtpBlockComponent, Object.assign({ otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
+            setShowOtpPhone(null);
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
+        } }, rest))) : null;
 };
 
-const LeadGenTranslationProvider = (props) => {
-    const { locale, children } = props;
-    const translationContextValue = React.useMemo(() => ({ locale, values: getTranslations(locale) }), [locale]);
-    return (React__default["default"].createElement(translationsContext.TranslationsContext.Provider, { value: translationContextValue }, children));
+const Thankyou = ({ children, }) => {
+    const { showThankyou, setShowThankyou } = React.useContext(LeadGenComponentContext);
+    return showThankyou
+        ? children(showThankyou, () => setShowThankyou(null))
+        : null;
 };
 
 // import mockLeadData from './mockLeadData'
@@ -2075,8 +2088,8 @@ const LeadGenContext = React.createContext({
 });
 const LeadGenContextProvider = (props) => {
     const { campaign_code: campaignCodeProps, apiSsoUrl, apiLeadUrl, apiSubotUrl, locale: localeProps, forceCampaign: forceCampaignProps, extraValues, articleId = 1, categoryList, siteDomain: site_domain, children, userInfo } = props, restProps = tslib_es6.__rest(props, ["campaign_code", "apiSsoUrl", "apiLeadUrl", "apiSubotUrl", "locale", "forceCampaign", "extraValues", "articleId", "categoryList", "siteDomain", "children", "userInfo"]);
-    const { t } = index$1.useTranslations();
     const [forceCampaign, setForceCampaign] = React.useState(forceCampaignProps);
+    const { t } = useLeadGenTranslations();
     const [subscriptionInfo, setSubscriptionInfo] = React.useState({
         subscriptionIcon: '',
         subscriptionTitle: '',
@@ -2355,8 +2368,7 @@ const LeadGenContextProvider = (props) => {
             apiSubotUrl, locale: localeProps, articleId, categoryId: subscriptionInfo.subcriptionCateId, siteDomain: site_domain, forceCampaign,
             submit,
             submitSubscriptionBox,
-            impression }) },
-        React__default["default"].createElement(LeadGenTranslationProvider, { locale: locale }, children)));
+            impression }) }, children));
 };
 const useLeadGenContext = () => {
     const context = React.useContext(LeadGenContext);
@@ -2416,7 +2428,7 @@ dayjs__default["default"].extend(customParseFormat);
 const [LeadFormProvider, useLeadFormContext, useLeadForm] = form.createFormContext();
 const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, format, }) => {
     var _a;
-    const { t } = index$1.useTranslations();
+    const { t } = useLeadGenTranslations();
     const initialValues = React.useMemo(() => formatLeadGenFormValue(mappingSSOToLead(userInfo), listBlockAdded), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
     const LEAD_LOCALE = LEAD_LOCALE_DATA$1[(_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.lang] ||
         LEAD_LOCALE_DATA$1['vi-VN'];
@@ -3184,8 +3196,9 @@ const LeadGenSubscriptionBoxContainer = (props) => {
         return null;
     }
     return (React__default["default"].createElement(index$a.MantineProvider, { locale: locale, customStyleType: index$9.CustomStylesType.LEADGEN },
-        React__default["default"].createElement(LeadGenContextProvider, Object.assign({}, props, { apiLeadUrl: apiUrl, apiSubotUrl: apiSubotUrl }),
-            React__default["default"].createElement(Container, null))));
+        React__default["default"].createElement(LeadGenTranslationProvider, { locale: locale },
+            React__default["default"].createElement(LeadGenContextProvider, Object.assign({}, props, { apiLeadUrl: apiUrl, apiSubotUrl: apiSubotUrl }),
+                React__default["default"].createElement(Container, null)))));
 };
 const LeadGenSubscriptionBox = LeadGenSubscriptionBoxContainer;
 
@@ -4030,7 +4043,7 @@ const EmptyIcon = (props) => {
 };
 
 const EmptyComponent = ({ onClose, onContinue, }) => {
-    const { t } = index$1.useTranslations();
+    const { t } = useLeadGenTranslations();
     return (React__default["default"].createElement("div", { className: "leadgen-empty" },
         React__default["default"].createElement("div", { className: "leadgen-empty_body" },
             React__default["default"].createElement("div", { className: "leadgen-empty_wrapper" },
@@ -4046,7 +4059,7 @@ const SubtitleBlock = ({ children, align, }) => (React__default["default"].creat
 const TitleBlock = ({ children, align, }) => (React__default["default"].createElement("h2", { className: `lead-modal__title ${'le-text-align-' + (align || '')} ${LEAD_CLASS}` }, children));
 
 const LightboxFields = ({ listBlockAdded, popupId, locale, hasSubmitBtn, isSubmitLoading, disabledButtonSubmit, }) => {
-    const { t } = index$1.useTranslations();
+    const { t } = useLeadGenTranslations();
     const { setRedirectUrl } = React.useContext(LeadGenContext$1);
     const form = useLeadFormContext();
     const formValues = form.values;
@@ -4372,7 +4385,7 @@ const HeaderImage = ({ src, ratio = 3 / 2, className, style, }) => {
 
 const OtpBlock = ({ otpData, onSuccess, autoSendWhenOpen, }) => {
     const { primaryColor } = React.useContext(LeadGenContext$1);
-    const { t } = index$1.useTranslations();
+    const { t } = useLeadGenTranslations();
     const phone = otpData.phone;
     const otpType = otpData.type;
     const [otp, setOtp] = React.useState('');
@@ -4585,7 +4598,7 @@ const StyledImageWrap = styled__default["default"].div `
 `;
 
 const FreebieLuckyGiftItem = ({ isHostedByClient, locale, data: { image, name, desc, prize_value, prize_unit, cta_button, winning_slot, }, }) => {
-    const { t } = index$1.useTranslations();
+    const { t } = useLeadGenTranslations();
     console.log(prize_value, prize_unit, locale);
     const formattedPrice = prize_value && prize_unit
         ? utils$2.currencyFormat(prize_value, locale, prize_unit)
@@ -4637,7 +4650,7 @@ const FreebieCarousel = ({ isHostedByClient, data, locale, }) => {
     const { classes } = useStyles(undefined, {
         name: 'Carousel',
     });
-    const { t } = index$1.useTranslations();
+    const { t } = useLeadGenTranslations();
     const freeSample = data.filter((item) => item.type === EFreebieType.SAMPLE);
     const luckyGift = data.filter((item) => item.type === EFreebieType.LUCKY_DRAW);
     const isHasLuckyGift = luckyGift.length > 0;
@@ -5412,7 +5425,7 @@ const formatTrackingData = (params) => {
 };
 
 // mount css
-const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor, apiSubotUrl, DEBUG_URL, forceCampaign, children, extraPayloadValues = [], excludeExitRulesHandler, userInfo, onClose: onCloseProps, onSubmit: onSubmitProps, }) => {
+const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor, apiSubotUrl, DEBUG_URL, forceCampaign, children, extraPayloadValues = [], excludeExitRulesHandler, userInfo, onClose: onCloseProps, onSubmit: onSubmitProps, formatMessage, }) => {
     var _a, _b;
     const scrollEventHandlerRef = React.useRef();
     const leadStartTimeRef = React.useRef(Date.now());
@@ -5767,7 +5780,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, primaryColor
             redirectUrl,
             setRedirectUrl,
         } },
-        React__default["default"].createElement(translationsContext.TranslationsContext.Provider, { value: { locale, values: getTranslations(locale) } },
+        React__default["default"].createElement(LeadGenTranslationProvider, { locale: locale, formatMessage: formatMessage },
             React__default["default"].createElement(index$a.MantineProvider, { locale: locale, customStyleType: index$9.CustomStylesType.LEADGEN }, children ? (React__default["default"].createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, setShowThankyou: setShowThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }, children)) : (React__default["default"].createElement(core.Portal, { target: utils$1.getPopupWrapperDom() },
                 React__default["default"].createElement(core.Box, { sx: { position: 'fixed', zIndex: index$7.ZINDEX_SSO - 9e6 } },
                     React__default["default"].createElement(core.Transition, { mounted: Boolean(((_b = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _b === void 0 ? void 0 : _b.popupVersion) === '2.1'), transition: "fade", duration: 600, timingFunction: "ease", exitDuration: 200 }, (styles) => {