@hhgtech/hhg-components
Version:
Hello Health Group common components
1,266 lines (1,242 loc) • 312 kB
JavaScript
import { _ as __rest, a as __awaiter } from './tslib.es6-00ab44b2.js';
import React__default, { createContext, useMemo, useContext, useEffect, useRef, useState, useCallback, forwardRef, useImperativeHandle, memo, useLayoutEffect } from 'react';
import { createStyles, Box, useMantineTheme, Button as Button$1, Autocomplete, Input as Input$1, Checkbox as Checkbox$1, Radio as Radio$1, Select as Select$1, Flex, clsx, TextInput, NumberInput as NumberInput$1, AspectRatio, rem, Badge, Tooltip, Portal, Transition, Overlay } from '@mantine/core';
import debounce from 'lodash/debounce';
import { createFormContext, useForm } from '@mantine/form';
import dayjs from 'dayjs';
import { B as BEARER_TOKEN_COOKIE } from './index-d535cfb0.js';
import { getCookie, setCookie } from './miscCookieHelper.js';
import { t as translationsMap$1 } from './translationsProvider-67aac7cb.js';
import { u as useTranslations } from './index-09d9e570.js';
import { T as TranslationsContext } from './translationsContext-18f7b7e0.js';
import { M as MediaQueries, B as Breakpoints, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-538169b3.js';
import { T as Text } from './index-0b67696c.js';
import { S as Select, d as Checkbox, I as Input, R as Radio, P as Phone, N as NumberInput, E as ErrorIcon, O as OTP } from './index-bd44bcb2.js';
import { D as DatePicker } from './index-0861b084.js';
import { B as Button } from './index-2d25b0f0.js';
import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './index-17c85f76.js';
import './index.styles-3adef5f6.js';
import { useIntersection } from '@mantine/hooks';
import './index-3f09210d.js';
import './index-04505e35.js';
import { M as MAPPED_LOCALE } from './utils-2d973164.js';
import { DateInput } from '@mantine/dates';
import { L as LOCALE_SPECS, Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-8c40504a.js';
import { C as COMMON_DATE_TRANSLATE_KEY } from './index-fe4471f4.js';
import './index-7adf994c.js';
import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-0feee1dd.js';
import { H as Heading$1 } from './index-e348d0b2.js';
import { L as LOCALE } from './Locale-dc1237b9.js';
import { v1 } from 'uuid';
import { domainLocales } from './constantsDomainLocales.js';
import { parsePhoneNumber } from 'react-phone-number-input';
import styled from '@emotion/styled';
import { theme } from './miscTheme.js';
import { h as hexToRgb } from './utils-cf2f413d.js';
import { u as useTextStyles, C as ChoiceField, T as TextField } from './index-0776ee15.js';
import { T as TogetherComponentGlobalContext } from './utils-5e9c89a7.js';
import { M as MantineProvider } from './index-4f530542.js';
import { i as isVideo } from './index-f64f2609.js';
import { I as ImageWrap, u as useScreenSize } from './index-50aea2c8.js';
import { motion } from 'framer-motion';
import { createPortal } from 'react-dom';
import { ChevronDown } from '@hhgtech/icons/arrow';
import { MapPin } from '@hhgtech/icons/core';
import { I as InputDate } from './InputDate-9df68382.js';
import { Carousel } from '@mantine/carousel';
import { c as currencyFormat } from './utils-75069a38.js';
import { D as DrawerComponent, C as Close } from './index-72e8c8cf.js';
import './constantsIsProduction.js';
import './normalizeLink-c3e1dac7.js';
import './i18n-values/en-PH.js';
import './i18n-values/hi-IN.js';
import './i18n-values/id-ID.js';
import './i18n-values/km-KH.js';
import './i18n-values/ms-MY.js';
import './i18n-values/my-MM.js';
import './i18n-values/th-TH.js';
import './i18n-values/tl-PH.js';
import './i18n-values/vi-VN.js';
import './i18n-values/vi-VN_MB.js';
import './i18n-values/zh-SG.js';
import './i18n-values/zh-TW.js';
import '@hhgtech/icons/other';
import './shared-b07d1eb2.js';
import 'classnames';
import './useUniqueId-38cdf062.js';
import './constantsSite.js';
import '@emotion/react';
import '@mantine/notifications';
import 'date-fns/locale';
import './constantsRiskScreener.js';
import './constants-ce67620e.js';
import 'string-format';
import './constants-a21536f3.js';
import './index-dac15b93.js';
import 'slugify';
import './togetherApiPaths.js';
import './constants-367949ba.js';
import 'vaul';
const LeadGenComponentContext = 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(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 = __rest(_a, ["url", "data"]);
const token = getCookie(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 = __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 = __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) => __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) => __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';
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) => __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({}, translationsMap$1[locale]), translationsMap[locale]);
if (translations) {
return translations;
}
return translationsMap['en-PH'];
};
const FormatMessageContext = createContext(null);
const LeadGenTranslationProvider = ({ locale, formatMessage, children, }) => {
const translationContextValue = useMemo(() => ({ locale, values: getTranslations(locale) }), [locale]);
return (React__default.createElement(FormatMessageContext.Provider, { value: formatMessage || null }, formatMessage ? (children) : (React__default.createElement(TranslationsContext.Provider, { value: translationContextValue }, children))));
};
const useLeadGenTranslations = () => {
const externalFormatMessage = useContext(FormatMessageContext);
const { t: internalT, locale } = useTranslations();
const t = 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] = createFormContext();
const useLeadFormConfig$1 = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo, }) => {
const { t } = useLeadGenTranslations();
const initialValues = useMemo(() => formatLeadGenFormValue(mappingSSOToLead(userInfo), listBlockAdded), [userInfo === null || userInfo === void 0 ? void 0 : userInfo.id]);
useEffect(() => {
if (!window.intlTelInputUtils) {
require('intl-tel-input/build/js/utils');
}
}, []);
const validateObj = useMemo(() => {
const InputBlocks = [
'TextBlock',
'NumberBlock',
'EmailBlock',
'PhoneBlock',
'DateBlock',
'CheckboxBlock',
'RadioBlock',
'DropdownBlock',
'PhoneOtpBlock',
'WhatsappOtpBlock',
'ZaloOtpBlock',
'LocationBlock',
'TncBlock',
];
// ALL are required and can skip if not touched yet
const withSharedCheck = (name, cb,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
block) => {
return (value) => {
var _a;
const isBLockRequired = (_a = block === null || block === void 0 ? void 0 : block.data) === null || _a === void 0 ? void 0 : _a.required;
if (!formRef.current.isTouched(name))
return;
if (typeof value === '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 = 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 = useRef(false);
const validatingEmailRef = useRef(false);
const leadFormConfig = useLeadFormConfig$1({
listBlockAdded,
validatingPhoneRef,
validatingEmailRef,
campaignId,
campaign_subot_id,
userInfo,
});
const [showOtpPhone, setShowOtpPhone] = useState(null);
const [formRef, setFormRef] = useState(null);
const onClose = () => {
if (showOtpPhone) {
setShowOtpPhone(null);
}
else {
onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
}
};
useEffect(() => {
clearCacheUsedEmailOrPhone();
}, []);
return campaign ? (React__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 = __rest(_a, []);
const { description } = useContext(LeadGenComponentContext);
return description ? (React__default.createElement(Text, Object.assign({ size: "p3" }, rest), description)) : null;
};
const LeadGenContext$1 = createContext({});
var useStyles$3 = createStyles(() => {
return {
control: {},
};
});
const libraries$1 = ['places'];
const LocationBlock = ({ name, placeholder, locale, required = true, }) => {
var _a;
const form = useLeadFormContext$1();
const [searchValue, setSearchValue] = useState('');
const [address, setAddress] = useState('');
const { predictions } = 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] = useState(null);
const [ready, setReady] = useState(false);
const randRef = useRef(