@hhgtech/hhg-components 1.29.227 → 1.29.229

package/build/esm/lead.js

@@ -1,42 +1,42 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-2b7f044d.js';
-import React__default, { createContext, useMemo, useRef, useState, useEffect, useContext } from 'react';
+import { _ as __rest, a as __awaiter } from './tslib.es6-49f05c4f.js';
+import React__default, { createContext, useEffect, useMemo, useRef, useState, useContext } from 'react';
 import debounce from 'lodash/debounce';
 import { createFormContext } from '@mantine/form';
-import { u as useTranslations } from './index-a5d0e615.js';
-import { T as Text } from './index-cad84988.js';
+import { u as useTranslations } from './index-7b27d7d2.js';
+import { T as Text } from './index-4194d757.js';
 import { createStyles, Box, Portal, Transition, Overlay } from '@mantine/core';
-import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput } from './index-8fc34830.js';
-import { D as DatePicker } from './index-ccd36f6d.js';
-import { M as MAPPED_LOCALE } from './utils-f39b3724.js';
+import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput } from './index-d50352ed.js';
+import { D as DatePicker } from './index-163b7893.js';
+import { M as MAPPED_LOCALE } from './utils-0aed17fe.js';
 import '@mantine/dates';
-import './index-d9961625.js';
-import './index-550cfd50.js';
-import { C as CommonGAssets } from './index-8e7bab1e.js';
-import './useMantineLocale-ba8d6644.js';
-import { B as Button$1 } from './index-928b0091.js';
-import './index.styles-cc04162c.js';
-import { T as TranslationsContext } from './translationsContext-210496ff.js';
+import './index-eff81562.js';
+import './index-533f6513.js';
+import { C as CommonGAssets } from './index-04fe07e7.js';
+import './useMantineLocale-5dd0b7fa.js';
+import { B as Button$1 } from './index-8df9351b.js';
+import './index.styles-2b33508a.js';
+import { T as TranslationsContext } from './translationsContext-879d07bf.js';
 import '@mantine/hooks';
-import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-248eb584.js';
-import './other-e828d1b8.js';
-import './index-43e0ec0f.js';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-e5aaa7e0.js';
-import { B as Button } from './index-7358b5c2.js';
-import { H as Heading$1 } from './index-2f9cf656.js';
+import { b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-1c66da8f.js';
+import './other-1c0fe2df.js';
+import './index-3dc94425.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-ea1afb1f.js';
+import { B as Button } from './index-58822cb7.js';
+import { H as Heading$1 } from './index-563cc7a2.js';
 import { v1 } from 'uuid';
 import { theme } from './miscTheme.js';
-import { i as isVideo } from './index-0aaf8b74.js';
+import { i as isVideo } from './index-d05e4046.js';
 import { createPortal } from 'react-dom';
 import { getCookie, setCookie } from './miscCookieHelper.js';
 import dayjs from 'dayjs';
-import { C as Close } from './Close-6c15b294.js';
+import { C as Close } from './Close-ee5cd223.js';
 import '@hhgtech/icons/other';
 import '@emotion/styled';
 import '@mantine/carousel';
-import './Locale-c35bebc3.js';
-import './index-af2536d4.js';
+import './Locale-bb1cfdf7.js';
+import './index-c2cbcde0.js';
 import 'classnames';
-import './useUniqueId-7d67e394.js';
+import './useUniqueId-7de27d15.js';
 import './constantsSite.js';
 import '@hhgtech/icons/core';
 import 'date-fns/locale';
@@ -202,6 +202,16 @@ const validateEmailOrPhoneOnSubot = ({ bot_id, email, phone, }) => {
         },
     });
 };
+const validatePhoneNumberOnLeadGen = ({ campaign_id, phone, }) => {
+    return leadApi.call({
+        url: 'api/collection/log/check-phone-with-campaign',
+        method: 'post',
+        data: {
+            campaign_id,
+            phone,
+        },
+    });
+};
 const sendSMSOtpLead = ({ phone, type, }) => {
     return leadApi.call({
         url: type === 'phone' ? 'api/sms/otp' : 'api/sms/whatsapp_otp',
@@ -227,6 +237,7 @@ const Service = {
     campaignGetById,
     validateEmailOrPhoneOnSubot,
     validateEmailOrPhoneOnLeadGen,
+    validatePhoneNumberOnLeadGen,
     sendSMSOtpLead,
     verifyOtpLead,
 };
@@ -255,9 +266,20 @@ const checkUsedEmailOrPhone = (campaignId, campaign_subot_id, data) => __awaiter
         }
     }
 });
+const checkUsedPhoneOnly = (campaignId, phone) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const resLeadGen = yield Service.validatePhoneNumberOnLeadGen({
+        campaign_id: campaignId,
+        phone,
+    });
+    if (((_a = resLeadGen === null || resLeadGen === void 0 ? void 0 : resLeadGen._messages) === null || _a === void 0 ? void 0 : _a[0]) === 'Phone was exist') {
+        return 'validator.phoneUsed';
+    }
+});
 const validatedCache = {
     email: {},
     phone: {},
+    phoneOnly: {},
 };
 const checkUsedEmailOrPhoneWithCache = (campaignId, campaign_subot_id, data) => __awaiter(void 0, void 0, void 0, function* () {
     const key = 'email' in data ? 'email' : 'phone';
@@ -286,15 +308,45 @@ const checkUsedEmailOrPhoneWithCache = (campaignId, campaign_subot_id, data) =>
     }
     return res;
 });
+const checkUsedPhoneOnlyWithCache = (campaignId, phone) => __awaiter(void 0, void 0, void 0, function* () {
+    if (validatedCache.phoneOnly[phone]) {
+        if (validatedCache.phoneOnly[phone].value) {
+            return 'validator.phoneUsed';
+        }
+        else if (!validatedCache.phoneOnly[phone].value &&
+            validatedCache.phoneOnly[phone].expire > Date.now()) {
+            return '';
+        }
+    }
+    const res = checkUsedPhoneOnly(campaignId, phone);
+    if (res) {
+        validatedCache.phoneOnly[phone] = {
+            value: true,
+        };
+    }
+    else {
+        validatedCache.phoneOnly[phone] = {
+            value: false,
+            expire: Date.now() + 1000 * 60,
+        };
+    }
+    return res;
+});
 const clearCacheUsedEmailOrPhone = () => {
     validatedCache.email = {};
     validatedCache.phone = {};
+    validatedCache.phoneOnly = {};
 };
 
 // You can give context variables any name
 const [LeadFormProvider$1, useLeadFormContext$1, useLeadForm$1] = createFormContext();
 const useLeadFormConfig$1 = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], }) => {
     const { t } = useTranslations();
+    useEffect(() => {
+        if (!window.intlTelInputUtils) {
+            require('intl-tel-input/build/js/utils');
+        }
+    }, []);
     const validateObj = useMemo(() => {
         const InputBlocks = [
             'TextBlock',
@@ -311,14 +363,20 @@ const useLeadFormConfig$1 = ({ listBlockAdded = [], validatingPhoneRef, validati
             'TncBlock',
         ];
         // ALL are required and can skip if not touched yet
-        const withSharedCheck = (name, cb) => {
+        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 t('validator.required');
+                    return isBLockRequired
+                        ? t('validator.required')
+                        : cb === null || cb === void 0 ? void 0 : cb(value);
                 }
                 return cb === null || cb === void 0 ? void 0 : cb(value);
             };
@@ -326,18 +384,22 @@ const useLeadFormConfig$1 = ({ listBlockAdded = [], validatingPhoneRef, validati
         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 (isNaN(Number(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 (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(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...');
@@ -359,56 +421,77 @@ const useLeadFormConfig$1 = ({ listBlockAdded = [], validatingPhoneRef, validati
                                 validatingEmailRef.current = false;
                             });
                         }, 200);
-                    }) });
+                    }, b) });
             }
             else if (b.name === 'PhoneBlock' ||
                 b.name === 'PhoneOtpBlock' ||
                 b.name === 'WhatsappOtpBlock') {
                 return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
-                        if (window.intlTelInputUtils &&
+                        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...');
-                            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;
-                            });
+                            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);
                     }) });
             }
             else if (b.name === 'DateBlock') {
                 return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
-                        if (isNaN(Date.parse(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) => {
-                        console.log('value', value);
-                        if (!value) {
+                        if (isRequired && !value) {
                             return t('validator.required');
                         }
                     }) });
             }
             else {
-                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value) });
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, undefined, b) });
             }
         }, {});
     }, [listBlockAdded.map((b) => b.name).join(',')]);
@@ -491,7 +574,7 @@ var useStyles$2 = createStyles(() => {
 });
 
 const libraries$1 = ['places'];
-const LocationBlock$1 = ({ name, placeholder, locale, }) => {
+const LocationBlock$1 = ({ name, placeholder, locale, required = true, }) => {
     var _a;
     const form = useLeadFormContext$1();
     const [searchValue, setSearchValue] = useState('');
@@ -535,7 +618,7 @@ const LocationBlock$1 = ({ name, placeholder, locale, }) => {
     return (React__default.createElement(React__default.Fragment, null,
         LoadScript && (React__default.createElement(LoadScript, { googleMapsApiKey: GOOGLE_API_KEY, libraries: libraries$1, loadingElement: React__default.createElement(React__default.Fragment, null) })),
         React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": name, "data-control": 'text' }),
-        React__default.createElement(Select, Object.assign({ className: "lead-modal__form-control", label: placeholder, placeholder: placeholder, withAsterisk: true, name: name, data: options, searchValue: searchValue, onSearchChange: (query) => {
+        React__default.createElement(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.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
                 React__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.createElement(React__default.Fragment, null) }, form.getInputProps(name)))));
@@ -553,30 +636,32 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
     });
     const form = useLeadFormContext$1();
     return (React__default.createElement(React__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.createElement(TitleBlock$1, { key: index, align: align }, value));
             case 'SubtitleBlock':
                 return (React__default.createElement(SubtitleBlock$1, { key: index, align: align }, value));
             case 'TextBlock':
-                return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: true, spellCheck: false, type: "text", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
+                return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
                     // onChangeRaw={(e) => inputOnChange('text', e)}
                     label: placeholder, "data-control": "text", name: value }, form.getInputProps(value))));
             case 'NumberBlock':
-                return (React__default.createElement(NumberInput, Object.assign({ key: index, withAsterisk: true, spellCheck: false, type: "number", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
+                return (React__default.createElement(NumberInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, className: cx('leadgen-control', classes.control), 
                     // onChange={(e) => inputOnChange('number', e)}
                     label: placeholder, "data-control": "number", name: value }, form.getInputProps(value))));
             case 'EmailBlock':
-                return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: true, spellCheck: false, 
+                return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
                     // type="email"
                     placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "email", name: value }, form.getInputProps(value))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'PhoneBlock': {
                 const id = popupId + '-' + value + '-' + index;
-                return (React__default.createElement(Input.Wrapper, Object.assign({ size: "md", withAsterisk: true, key: index, label: placeholder, 
+                return (React__default.createElement(Input.Wrapper, Object.assign({ size: "md", withAsterisk: required, key: index, label: placeholder, 
                     // error={errorField.phone}
                     className: cx('leadgen-control', classes.control), labelProps: {
                         htmlFor: id,
@@ -588,11 +673,11 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                         id: id, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" })));
             }
             case 'LocationBlock': {
-                return (React__default.createElement(LocationBlock$1, { key: index, name: value, placeholder: placeholder, locale: locale }));
+                return (React__default.createElement(LocationBlock$1, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
             }
             case 'DateBlock':
                 return (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(DatePicker, Object.assign({ withAsterisk: true, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date", popoverProps: popoverProps }, form.getInputProps(value))),
+                    React__default.createElement(DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: cx('leadgen-control', classes.control), label: placeholder, "data-control": "date", popoverProps: popoverProps }, form.getInputProps(value))),
                     React__default.createElement("input", { type: "hidden", name: value, "data-control": "date" })));
             case 'LinkButtonBlock':
                 return (React__default.createElement("div", { key: index },
@@ -606,7 +691,7 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                     isSendMailChimp && (React__default.createElement("div", { style: {
                             display: 'none',
                         }, "data-name": value + '-mailchimp' })),
-                    React__default.createElement(Checkbox.Group, Object.assign({ withAsterisk: true, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md", sx: {
+                    React__default.createElement(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,
@@ -614,11 +699,11 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
             case 'RadioBlock':
                 return (React__default.createElement(React__default.Fragment, null,
                     isSendMailChimp && (React__default.createElement(Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
-                    React__default.createElement(Radio.Group, Object.assign({ withAsterisk: true, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+                    React__default.createElement(Radio.Group, Object.assign({ withAsterisk: required, className: cx('leadgen-control', classes.control), key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
             case 'DropdownBlock':
                 return (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
-                    React__default.createElement(Select, Object.assign({ key: index, className: cx('leadgen-control', classes.control), label: placeholder, withAsterisk: true, name: value, data: listQuestion.map((l) => ({
+                    React__default.createElement(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)))));
@@ -1054,8 +1139,8 @@ var viVN = {
 	"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 cho chiến dịch.",
-	"validator.phoneUsed": "Số điện thoại này đã được sử dụng cho chiến dịch.",
+	"validator.emailUsed": "Email này đã được sử dụng.",
+	"validator.phoneUsed": "Số điện thoại này đã được sử dụng.",
 	"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",
@@ -1236,14 +1321,20 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
             'TncBlock',
         ];
         // ALL are required and can skip if not touched yet
-        const withSharedCheck = (name, cb) => {
+        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 t('validator.required');
+                    return isBLockRequired
+                        ? t('validator.required')
+                        : cb === null || cb === void 0 ? void 0 : cb(value);
                 }
                 return cb === null || cb === void 0 ? void 0 : cb(value);
             };
@@ -1251,18 +1342,22 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
         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 (isNaN(Number(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 (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(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...');
@@ -1284,55 +1379,77 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
                                 validatingEmailRef.current = false;
                             });
                         }, 200);
-                    }) });
+                    }, b) });
             }
             else if (b.name === 'PhoneBlock' ||
                 b.name === 'PhoneOtpBlock' ||
                 b.name === 'WhatsappOtpBlock') {
                 return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, (value) => {
-                        if (window.intlTelInputUtils &&
+                        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...');
-                            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;
-                            });
+                            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 (isNaN(Date.parse(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 (!value) {
+                        if (isRequired && !value) {
                             return t('validator.required');
                         }
-                    }) });
+                    }, b) });
             }
             else {
-                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value) });
+                return Object.assign(Object.assign({}, r), { [b.data.value]: withSharedCheck(b.data.value, undefined, b) });
             }
         }, {});
     }, [listBlockAdded.map((b) => b.name).join(',')]);
@@ -1347,7 +1464,7 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
 };
 
 const libraries = ['places'];
-const LocationBlock = ({ name, placeholder, locale, }) => {
+const LocationBlock = ({ name, placeholder, locale, required = true, }) => {
     var _a;
     const form = useLeadFormContext();
     const [searchValue, setSearchValue] = useState('');
@@ -1391,7 +1508,7 @@ const LocationBlock = ({ name, placeholder, locale, }) => {
     return (React__default.createElement(React__default.Fragment, null,
         LoadScript && (React__default.createElement(LoadScript, { googleMapsApiKey: GOOGLE_API_KEY, libraries: libraries, loadingElement: React__default.createElement(React__default.Fragment, null) })),
         React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": name, "data-control": 'text' }),
-        React__default.createElement(Select, Object.assign({ className: "lead-modal__form-control", label: placeholder, placeholder: placeholder, withAsterisk: true, name: name, data: options, searchValue: searchValue, onSearchChange: (query) => {
+        React__default.createElement(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.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
                 React__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.createElement(React__default.Fragment, null) }, form.getInputProps(name)))));
@@ -1404,30 +1521,32 @@ const TitleBlock = ({ children, align, }) => (React__default.createElement("h2",
 const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, }) => {
     const form = useLeadFormContext();
     return (React__default.createElement(React__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.createElement(TitleBlock, { key: index, align: align }, value));
             case 'SubtitleBlock':
                 return (React__default.createElement(SubtitleBlock, { key: index, align: align }, value));
             case 'TextBlock':
-                return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: true, spellCheck: false, type: "text", placeholder: placeholder, className: "lead-modal__form-control", 
+                return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, className: "lead-modal__form-control", 
                     // onChangeRaw={(e) => inputOnChange('text', e)}
                     label: placeholder, "data-control": "text", name: value }, form.getInputProps(value))));
             case 'NumberBlock':
-                return (React__default.createElement(NumberInput, Object.assign({ key: index, withAsterisk: true, spellCheck: false, type: "number", placeholder: placeholder, className: "lead-modal__form-control", 
+                return (React__default.createElement(NumberInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, className: "lead-modal__form-control", 
                     // onChange={(e) => inputOnChange('number', e)}
                     label: placeholder, "data-control": "number", name: value }, form.getInputProps(value))));
             case 'EmailBlock':
-                return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: true, spellCheck: false, 
+                return (React__default.createElement(Input, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
                     // type="email"
                     placeholder: placeholder, className: "lead-modal__form-control", label: placeholder, "data-control": "email", name: value }, form.getInputProps(value))));
             case 'PhoneOtpBlock':
             case 'WhatsappOtpBlock':
             case 'PhoneBlock': {
                 const id = popupId + '-' + value + '-' + index;
-                return (React__default.createElement(Input.Wrapper, Object.assign({ size: "md", withAsterisk: true, key: index, label: placeholder, 
+                return (React__default.createElement(Input.Wrapper, Object.assign({ size: "md", withAsterisk: required, key: index, label: placeholder, 
                     // error={errorField.phone}
                     className: "lead-modal__form-control", labelProps: {
                         htmlFor: id,
@@ -1439,11 +1558,11 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         id: id, defaultCountry: (locale ? MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" })));
             }
             case 'LocationBlock': {
-                return (React__default.createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale }));
+                return (React__default.createElement(LocationBlock, { key: index, name: value, placeholder: placeholder, locale: locale, required: required }));
             }
             case 'DateBlock':
                 return (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(DatePicker, Object.assign({ withAsterisk: true, key: index, type: "default", name: value, placeholder: placeholder, className: "lead-modal__form-control", label: placeholder, "data-control": "date" }, form.getInputProps(value))),
+                    React__default.createElement(DatePicker, Object.assign({ withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, className: "lead-modal__form-control", label: placeholder, "data-control": "date" }, form.getInputProps(value))),
                     React__default.createElement("input", { type: "hidden", name: value, "data-control": "date" })));
             case 'LinkButtonBlock':
                 return (React__default.createElement("div", { key: index },
@@ -1457,7 +1576,7 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                     isSendMailChimp && (React__default.createElement("div", { style: {
                             display: 'none',
                         }, "data-name": value + '-mailchimp' })),
-                    React__default.createElement(Checkbox.Group, Object.assign({ withAsterisk: true, className: "lead-modal__form-control", key: index, label: placeholder, size: "md", sx: {
+                    React__default.createElement(Checkbox.Group, Object.assign({ withAsterisk: required, className: "lead-modal__form-control", key: index, label: placeholder, size: "md", sx: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 8,
@@ -1465,11 +1584,11 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
             case 'RadioBlock':
                 return (React__default.createElement(React__default.Fragment, null,
                     isSendMailChimp && (React__default.createElement(Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
-                    React__default.createElement(Radio.Group, Object.assign({ withAsterisk: true, className: "lead-modal__form-control", key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
+                    React__default.createElement(Radio.Group, Object.assign({ withAsterisk: required, className: "lead-modal__form-control", key: index, label: placeholder, size: "md" }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default.createElement(Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
             case 'DropdownBlock':
                 return (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
-                    React__default.createElement(Select, Object.assign({ key: index, className: "lead-modal__form-control", label: placeholder, withAsterisk: true, name: value, data: listQuestion.map((l) => ({
+                    React__default.createElement(Select, Object.assign({ key: index, className: "lead-modal__form-control", label: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
                             value: l.value,
                             label: l.placeholder,
                         })) }, form.getInputProps(value)))));
@@ -2606,11 +2725,12 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
     }, []);
     const onSubmit = (currentForm, formDataObj, categoryLevel, categoryData) => __awaiter(void 0, void 0, void 0, function* () {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        debugger;
         if (!formDataObj)
             return;
         LeadLog('submitHandler', categoryLevel, categoryData);
-        const formData = Object.keys(formDataObj).map((key) => ({
+        const formData = Object.keys(formDataObj)
+            .filter((key) => !!formDataObj[key])
+            .map((key) => ({
             name: key,
             value: String(formDataObj[key]),
         }));