@hhgtech/hhg-components
Version:
Hello Health Group common components
1,292 lines (1,263 loc) • 323 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('./tslib.es6-af09a0ba.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-83c3a6b2.js');
var miscCookieHelper = require('./miscCookieHelper.js');
var translationsProvider = require('./translationsProvider-d99b6fa7.js');
var index$1 = require('./index-2b476eb9.js');
var translationsContext = require('./translationsContext-4698cb34.js');
var utils$1 = require('./utils-5e3a8440.js');
var index$2 = require('./index-d4ad3f79.js');
var index$3 = require('./index-3424862e.js');
var index$5 = require('./index-2558f624.js');
var index$4 = require('./index-515469d0.js');
var index$9 = require('./index-04864074.js');
require('./index.styles-5f6a7ac0.js');
var hooks = require('@mantine/hooks');
require('./index-4d838fd2.js');
require('./index-a985d53b.js');
var utils = require('./utils-b5f30c40.js');
var dates = require('@mantine/dates');
var index$7 = require('./index-ec32050c.js');
var index$c = require('./index-0a047edc.js');
require('./index-9301f298.js');
var usePlacesAutocomplete = require('./usePlacesAutocomplete-b43fc835.js');
var index$6 = require('./index-e13a0e39.js');
var Locale = require('./Locale-eb0da538.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 utils$2 = require('./utils-c34df6dd.js');
var index$8 = require('./index-cf6e6a67.js');
var togetherComponentGlobalContext = require('./utils-3a3800c0.js');
var index$a = require('./index-d5c17a6c.js');
var index$b = require('./index-93047527.js');
var index$d = require('./index-6b44ec2b.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-977b7e0b.js');
var carousel = require('@mantine/carousel');
var utils$3 = require('./utils-55154db9.js');
var index$e = require('./index-78a4fbc3.js');
require('./constantsIsProduction.js');
require('./normalizeLink-90691beb.js');
require('./i18n-values/en-PH.js');
require('./i18n-values/hi-IN.js');
require('./i18n-values/id-ID.js');
require('./i18n-values/km-KH.js');
require('./i18n-values/ms-MY.js');
require('./i18n-values/my-MM.js');
require('./i18n-values/th-TH.js');
require('./i18n-values/tl-PH.js');
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('@hhgtech/icons/other');
require('./shared-201fc49c.js');
require('classnames');
require('./useUniqueId-88b26792.js');
require('./constantsSite.js');
require('@emotion/react');
require('@mantine/notifications');
require('date-fns/locale');
require('./constantsRiskScreener.js');
require('./constants-961f54ac.js');
require('string-format');
require('./constants-b53fd629.js');
require('./index-ee0d35ba.js');
require('slugify');
require('./togetherApiPaths.js');
require('./constants-817a109a.js');
require('vaul');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__default = /*#__PURE__*/_interopDefault(React);
var debounce__default = /*#__PURE__*/_interopDefault(debounce);
var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
var styled__default = /*#__PURE__*/_interopDefault(styled);
const LeadGenComponentContext = React.createContext({});
var LEADGEN_LAYOUT;
(function (LEADGEN_LAYOUT) {
LEADGEN_LAYOUT["LightBoxA"] = "LightBoxA";
LEADGEN_LAYOUT["LightBoxB"] = "LightBoxB";
LEADGEN_LAYOUT["SkinA"] = "SkinA";
LEADGEN_LAYOUT["SkinB"] = "SkinB";
LEADGEN_LAYOUT["Floating"] = "Floating";
LEADGEN_LAYOUT["Tab"] = "Tab";
LEADGEN_LAYOUT["InlineA"] = "InlineA";
LEADGEN_LAYOUT["InlineB"] = "InlineB";
LEADGEN_LAYOUT["CenterTab"] = "CenterTab";
LEADGEN_LAYOUT["Sidebar"] = "Sidebar";
LEADGEN_LAYOUT["Fullscreen"] = "Fullscreen";
LEADGEN_LAYOUT["Slider"] = "Slider";
})(LEADGEN_LAYOUT || (LEADGEN_LAYOUT = {}));
const LEADGEN_BLOCK = {
TextBlock: 'TextBlock',
NumberBlock: 'NumberBlock',
DateBlock: 'DateBlock',
EmailBlock: 'EmailBlock',
PhoneBlock: 'PhoneBlock',
PhoneOtpBlock: 'PhoneOtpBlock',
WhatsappOtpBlock: 'WhatsappOtpBlock',
ZaloOtpBlock: 'ZaloOtpBlock',
LocationBlock: 'LocationBlock',
LinkButtonBlock: 'LinkButtonBlock',
RadioBlock: 'RadioBlock',
DropdownBlock: 'DropdownBlock',
CheckboxBlock: 'CheckboxBlock',
TncBlock: 'TncBlock',
TitleBlock: 'TitleBlock',
SubtitleBlock: 'SubtitleBlock',
};
const LEADGEN_BLOCK_INPUT = [
LEADGEN_BLOCK.TextBlock,
LEADGEN_BLOCK.NumberBlock,
LEADGEN_BLOCK.DateBlock,
LEADGEN_BLOCK.EmailBlock,
LEADGEN_BLOCK.PhoneBlock,
LEADGEN_BLOCK.PhoneOtpBlock,
LEADGEN_BLOCK.WhatsappOtpBlock,
LEADGEN_BLOCK.ZaloOtpBlock,
LEADGEN_BLOCK.LocationBlock,
LEADGEN_BLOCK.RadioBlock,
LEADGEN_BLOCK.DropdownBlock,
LEADGEN_BLOCK.CheckboxBlock,
LEADGEN_BLOCK.TncBlock,
];
const leadGenFieldNamePhone = (listBlockAdded) => {
return listBlockAdded
.filter(({ name }) => [
LEADGEN_BLOCK.PhoneBlock,
LEADGEN_BLOCK.PhoneOtpBlock,
LEADGEN_BLOCK.WhatsappOtpBlock,
LEADGEN_BLOCK.ZaloOtpBlock,
].includes(name))
.map(({ data }) => data.value);
};
const leadGenFieldRequired = (blocks) => {
if (!(blocks === null || blocks === void 0 ? void 0 : blocks.length)) {
return [];
}
return blocks
.map(({ data, name, id }) => {
const { required, value } = data;
if (name === LEADGEN_BLOCK.TncBlock && id && required) {
return `TNC-${id}`;
}
if (required && typeof data['newtab'] === 'undefined') {
return value;
}
return;
})
.filter(Boolean);
};
const SSO_MAP_LEAD = ['name', 'email', 'birthday', 'phone', 'gender'];
const LEAD_LOCALE_DATA$1 = {
'vi-VN': {
popupLang: 'vi',
countryCode: 'vn',
countryCodeNumber: 84,
},
'id-ID': {
popupLang: 'id',
countryCode: 'id',
countryCodeNumber: 62,
},
'th-TH': {
popupLang: 'th',
countryCode: 'th',
countryCodeNumber: 66,
},
'ms-MY': {
popupLang: 'ms',
countryCode: 'my',
countryCodeNumber: 60,
},
'zh-TW': {
popupLang: 'zh',
countryCode: 'tw',
countryCodeNumber: 886,
},
'km-KH': {
popupLang: 'km',
countryCode: 'kh',
countryCodeNumber: 855,
},
'my-MM': {
popupLang: 'my',
countryCode: 'mm',
countryCodeNumber: 95,
},
'hi-IN': {
popupLang: 'hi',
countryCode: 'in',
countryCodeNumber: 91,
},
};
const mappingSSOToLead = (userInfoProps) => {
var _a, _b;
try {
const { id, area_code } = userInfoProps;
if (!userInfoProps || !id) {
return;
}
const user = {};
for (const ssoKey of SSO_MAP_LEAD) {
if (ssoKey in userInfoProps &&
typeof (userInfoProps === null || userInfoProps === void 0 ? void 0 : userInfoProps[ssoKey]) !== 'undefined') {
const initValue = userInfoProps[ssoKey];
if (ssoKey === 'birthday') {
const dob = dayjs__default["default"](initValue, 'YYYY-MM-DD', true);
if (dob.isValid()) {
user.birthday = dob.toDate();
}
}
else if (ssoKey === 'gender') {
user.gender = initValue.toString();
}
else if (ssoKey === 'phone' && typeof area_code !== 'undefined') {
user.phone = area_code + initValue;
}
else {
user[ssoKey] = initValue;
}
}
}
if (((_a = user === null || user === void 0 ? void 0 : user.email) === null || _a === void 0 ? void 0 : _a.includes('@hhg.com')) ||
((_b = user === null || user === void 0 ? void 0 : user.email) === null || _b === void 0 ? void 0 : _b.includes('@facebook.com'))) {
delete user.email;
}
return Object.values(user).length ? user : undefined;
}
catch (error) {
return;
}
};
const formatCampaignDetail = (campaign) => {
if (!campaign) {
return {};
}
try {
const { extra_fields, thank_you_image } = campaign || {};
const { textBlocks: exTextBlocks, imageBlocks: exImageBlocks, listBlockAdded: exListBlockAdded, listBlockThankyou: exListBlockThankyou, actionBlocks: exActionBlocks, } = extra_fields;
const textBlocks = JSON.parse(exTextBlocks);
const imageBlocks = JSON.parse(exImageBlocks);
const listBlockAdded = JSON.parse(exListBlockAdded);
const listBlockThankyou = JSON.parse(exListBlockThankyou);
const actionBlocks = JSON.parse(exActionBlocks);
const ThankYouBlock = {
image: { src: thank_you_image },
};
listBlockThankyou.forEach((block) => {
const { name, data } = block || {};
const { value: htmlText, align, newtab, url } = data || {};
switch (name) {
case LEADGEN_BLOCK.TitleBlock: {
ThankYouBlock.title = { htmlText, align };
}
case LEADGEN_BLOCK.SubtitleBlock: {
ThankYouBlock.description = { htmlText, align };
}
case LEADGEN_BLOCK.LinkButtonBlock: {
ThankYouBlock.button = { htmlText, newtab, url };
}
}
});
return Object.assign(Object.assign({}, campaign), { extra_fields: Object.assign(Object.assign({}, extra_fields), { textBlocks,
imageBlocks,
listBlockAdded,
listBlockThankyou,
actionBlocks }), ThankYouBlock });
}
catch (error) {
return {};
}
};
const CAMPAIGN_TARGET_TYPE = { LINKS: 1, TAGS: 2 };
let LEAD_API = 'https://dev.leadgen.hellobacsi.com/';
const LEAD_DEVICE_TYPE = {
MOBILE: 1,
DESKTOP: 2,
};
let LEAD_CLASS = '';
if (LEAD_API.includes('localhost')) {
LEAD_API = 'https://dev.leadgen.hellobacsi.com/';
}
if (location.hostname.includes('marrybaby.vn')) {
LEAD_CLASS = 'pink';
}
// var LEAD_CURRENT_URL = location.href.toLowerCase();
let LEAD_CURRENT_URL = 'https://' + location.hostname + location.pathname + location.search;
LEAD_CURRENT_URL = LEAD_CURRENT_URL.toLowerCase();
// TODO: set inital object if exists
if (sessionStorage.getItem('insider_object')) {
window.insider_object = JSON.parse(sessionStorage.getItem('insider_object'));
}
const docLang = document.documentElement.lang;
// TODO: country code
const LEAD_LOCALE_DATA = {
'vi-VN': {
popupLang: 'vi',
countryCode: 'vn',
countryCodeNumber: 84,
},
'id-ID': {
popupLang: 'id',
countryCode: 'id',
countryCodeNumber: 62,
},
'th-TH': {
popupLang: 'th',
countryCode: 'th',
countryCodeNumber: 66,
},
'ms-MY': {
popupLang: 'ms',
countryCode: 'my',
countryCodeNumber: 60,
},
'zh-TW': {
popupLang: 'zh',
countryCode: 'tw',
countryCodeNumber: 886,
},
'km-KH': {
popupLang: 'km',
countryCode: 'kh',
countryCodeNumber: 855,
},
'my-MM': {
popupLang: 'my',
countryCode: 'mm',
countryCodeNumber: 95,
},
'hi-IN': {
popupLang: 'hi',
countryCode: 'in',
countryCodeNumber: 91,
},
};
const LEAD_LOCALE = LEAD_LOCALE_DATA[docLang] || LEAD_LOCALE_DATA['vi-VN'];
function LEAD_RESET_VAR() {
// LEAD_CURRENT_URL = location.href.toLowerCase();
LEAD_CURRENT_URL =
'https://' + location.hostname + location.pathname + location.search;
}
const LEAD_TIMEZONE_DATA = {
1: 'Asia/Ho_Chi_Minh',
10: 'Asia/Ho_Chi_Minh',
11: 'Asia/Ho_Chi_Minh',
12: 'Asia/Ho_Chi_Minh',
2: 'Asia/Jakarta',
3: 'Asia/Bangkok',
4: 'Asia/Phnom_Penh',
5: 'Asia/Kuala_Lumpur',
6: 'Asia/Taipei',
7: 'Asia/Yangon',
8: 'Asia/Kolkata',
9: 'Asia/Manila', // Philippines / Filipinos Site
};
const TEMPLATE_ALLOW_NEWTRACKING = [
LEADGEN_LAYOUT.LightBoxA,
LEADGEN_LAYOUT.LightBoxB,
LEADGEN_LAYOUT.InlineA,
LEADGEN_LAYOUT.InlineB,
LEADGEN_LAYOUT.Slider,
LEADGEN_LAYOUT.CenterTab,
];
const formatLeadGenFormValue = (values = {}, blocks) => {
const newValues = {};
for (const block of blocks) {
const { data } = block || {};
const { value: fieldName } = data || {};
if (fieldName in values) {
newValues[fieldName] = values[fieldName];
}
}
return newValues;
};
class Store {
constructor() {
this.apiSsoUrl = 'https://staging-id.hellobacsi.com/';
this.apiLeadUrl = 'https://dev.leadgen.hellobacsi.com/';
this.apiSubotUrl = 'https://staging-service-subot.hellohealthgroup.com/';
}
}
const leadStore = new Store();
const METHOD = {
GET: 'get',
POST: 'POST',
};
const LEADGEN_ERROR_CODE = {
UNAUTHORIZED: 'UNAUTHORIZED',
};
const LEADGEN_API_PATH = {
V2_CAMPAIGN: 'api/v2/campaign',
V2_SUBSCRIPTION_LEAD: 'api/v2/subscription-box',
V2_SUBSCRIPTION_INFO: 'api/campaign/get-title',
POST_CTA_SUBMIT: 'api/collection/cta-submit',
};
const SSO_API_PATH = {
USER_UPDATE: 'api/user/update',
};
const ssoApi = {
call(_a) {
var { url, data } = _a, config = tslib_es6.__rest(_a, ["url", "data"]);
const token = miscCookieHelper.getCookie(index.BEARER_TOKEN_COOKIE);
config.body = JSON.stringify(data);
config.headers = {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
};
if (!token) {
return Promise.reject({
code: LEADGEN_ERROR_CODE.UNAUTHORIZED,
_data: '',
});
}
return fetch(`${leadStore.apiSsoUrl}${url}`, config)
.then((res) => res.json())
.catch(() => ({}));
},
};
const leadApi = {
call(_a) {
var { url, data = undefined } = _a, config = tslib_es6.__rest(_a, ["url", "data"]);
config.body = JSON.stringify(data);
config.headers = {
'Content-Type': 'application/json',
};
return fetch(`${leadStore.apiLeadUrl}${url}`, config)
.then((res) => res.json())
.catch(() => ({}));
},
};
const subotApi = {
call(_a) {
var { url, data } = _a, config = tslib_es6.__rest(_a, ["url", "data"]);
config.body = JSON.stringify(data);
config.headers = {
'Content-Type': 'application/json',
};
return fetch(`${leadStore.apiSubotUrl}${url}`, config)
.then((res) => res.json())
.catch(() => ({}));
},
};
const campaignGetById = (id) => {
return leadApi.call({
url: `api/internal/campaign/${id}`,
method: 'get',
});
};
const validateEmailOrPhoneOnLeadGen = ({ campaign_id, email, phone, }) => {
let phoneToSend = phone;
// Remove the '0' part. Logic from Back to check between Subot and Lead with different format
if (phoneToSend && phoneToSend.startsWith('0')) {
phoneToSend = phoneToSend.substring(1);
}
return leadApi.call({
url: 'api/subot-campaign/check',
method: 'post',
data: {
campaign_id,
email,
phone: phoneToSend,
},
});
};
const validateEmailOrPhoneOnSubot = ({ bot_id, email, phone, }) => {
let phoneToSend = phone;
// Remove the '0' part. Logic from Back to check between Subot and Lead with different format
if (phoneToSend && phoneToSend.startsWith('0')) {
phoneToSend = phoneToSend.substring(1);
}
return subotApi.call({
url: 'frontend/api/subot-campaign/check',
method: 'post',
data: {
bot_id,
email,
phone: phoneToSend,
},
});
};
const validatePhoneNumberOnLeadGen = ({ campaign_id, phone, }) => {
return leadApi.call({
url: 'api/collection/log/check-phone-with-campaign',
method: 'post',
data: {
campaign_id,
phone,
},
});
};
const LEAD_OTP_API = {
whatsapp: 'api/sms/whatsapp_otp',
phone: 'api/sms/otp',
zalo: 'api/sms/zalo_otp',
};
const sendSMSOtpLead = ({ phone, type, }) => {
return leadApi.call({
url: LEAD_OTP_API[type],
method: 'post',
data: {
// The type Whatsapp/Zalo do not remove the '+'
phone_number: type === 'phone' ? phone.replace('+', '') : phone,
},
});
};
const LEAD_VERIFY_OTP_API = {
whatsapp: 'api/sms/whatsapp_verify',
phone: 'api/sms/verify',
zalo: 'api/sms/zalo_verify',
};
const verifyOtpLead = ({ phone, otp, type, }) => {
return leadApi.call({
url: LEAD_VERIFY_OTP_API[type],
method: 'post',
data: {
// The type Whatsapp/Zalo do not remove the '+'
otp_code: otp,
phone_number: type === 'phone' ? phone.replace('+', '') : phone,
},
});
};
const getCampaignByCode = (campaign_code) => {
return leadApi.call({
url: `${LEADGEN_API_PATH.V2_CAMPAIGN}/${campaign_code}`,
method: METHOD.GET,
});
};
const getSubscriptionBoxInfo = ({ category, site, slug, }) => {
return leadApi.call({
url: `${LEADGEN_API_PATH.V2_SUBSCRIPTION_INFO}?category=${category}&site=${site}&slug=${slug}`,
method: METHOD.GET,
});
};
const postSubscriptionBoxLead = ({ data }) => {
return leadApi.call({
url: LEADGEN_API_PATH.V2_SUBSCRIPTION_LEAD,
method: METHOD.POST,
data,
});
};
const postUserInfoFromLeadGen = ({ name }) => {
return ssoApi.call({
url: SSO_API_PATH.USER_UPDATE,
method: METHOD.POST,
data: { name },
});
};
const campaignPostImpression = ({ code, action, title_article, ga_client_id, cookie_id, extra, url, referrer, }) => {
return leadApi.call({
url: `api/campaign/${code}/impression`,
method: METHOD.POST,
data: {
action,
title_article,
cookie_id,
ga_client_id,
url,
extra,
referrer,
},
});
};
const trackingSubscription = (data) => {
return leadApi.call({
url: `api/collection/tracking-subscription`,
method: METHOD.POST,
data,
});
};
const postPhoneToCtaSubmit = ({ data }) => {
return leadApi.call({
url: LEADGEN_API_PATH.POST_CTA_SUBMIT,
method: METHOD.POST,
data,
});
};
const Service = {
campaignGetById,
getCampaignByCode,
getSubscriptionBoxInfo,
postSubscriptionBoxLead,
postUserInfoFromLeadGen,
campaignPostImpression,
trackingSubscription,
validateEmailOrPhoneOnSubot,
validateEmailOrPhoneOnLeadGen,
validatePhoneNumberOnLeadGen,
sendSMSOtpLead,
verifyOtpLead,
postPhoneToCtaSubmit,
};
const checkUsedEmailOrPhone = (campaignId, campaign_subot_id, data) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const key = 'email' in data ? 'email' : 'phone';
const value = 'email' in data ? data.email : data.phone;
const errorMsg = 'email' in data ? 'validator.emailUsed' : 'validator.phoneUsed';
/** Check on Leadgen Tool */
const resLeadGen = yield Service.validateEmailOrPhoneOnLeadGen({
campaign_id: [campaignId],
[key]: value, // Can be email or phone
});
if (resLeadGen._errorCode === 'SubmitLeadWithBotId_ERR_001' ||
resLeadGen._errorCode === 'SubmitLeadWithBotId_ERR_002') {
return errorMsg;
}
/** Check on Subot */
if (campaign_subot_id.length) {
const resSubot = yield Service.validateEmailOrPhoneOnSubot({
bot_id: campaign_subot_id,
[key]: value, // Can be email or phone
});
if (resSubot._errorCode === 'CheckSuBotLeadTool_ERR_001') {
return errorMsg;
}
}
});
const checkUsedPhoneOnly = (campaignId, phone) => tslib_es6.__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) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
const key = 'email' in data ? 'email' : 'phone';
const value = 'email' in data ? data.email : data.phone;
const errorMsg = 'email' in data ? 'validator.emailUsed' : 'validator.phoneUsed';
if (validatedCache[key][value]) {
if (validatedCache[key][value].value) {
return errorMsg;
}
else if (!validatedCache[key][value].value &&
validatedCache[key][value].expire > Date.now()) {
return '';
}
}
const res = yield checkUsedEmailOrPhone(campaignId, campaign_subot_id, data);
if (res) {
validatedCache[key][value] = {
value: true,
};
}
else {
validatedCache[key][value] = {
value: false,
expire: Date.now() + 1000 * 60,
};
}
return res;
});
const checkUsedPhoneOnlyWithCache = (campaignId, phone) => tslib_es6.__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 = yield 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 = {};
};
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"
};
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": ""
};
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"
};
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 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": "ปี"
};
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 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 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 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);
};
}
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;
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 };
};
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;
};
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 {
control: {},
};
});
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 ==