@hhgtech/hhg-components 1.29.341 → 1.29.343-beta-1

package/build/lead/components/index.d.ts

@@ -1,7 +1,7 @@
 import React, { Dispatch, ReactNode, SetStateAction } from 'react';
-import { LOCALE } from "../../interfaces/types";
+import { LOCALE, UserInfo } from "../../interfaces/types";
 import { ThankyouType } from "./context";
-export declare const Component: ({ campaign, onClose: onCloseProp, onOtherSubmit, onSubmit, showThankyou, setShowThankyou, locale, children, showEmpty, setShowEmpty, }: {
+export declare const Component: ({ campaign, onClose: onCloseProp, onOtherSubmit, onSubmit, showThankyou, setShowThankyou, locale, children, showEmpty, setShowEmpty, userInfo, }: {
     campaign: any;
     onClose?: () => void;
     onOtherSubmit?: () => void;
@@ -12,4 +12,5 @@ export declare const Component: ({ campaign, onClose: onCloseProp, onOtherSubmit
     children?: ReactNode;
     showEmpty?: boolean;
     setShowEmpty?: Dispatch<SetStateAction<boolean>>;
+    userInfo?: UserInfo | null;
 }) => React.JSX.Element;

package/build/lead/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const SSO_MAP_LEAD: string[];
+export declare const mappingSSOToLead: (userInfoProps: any) => Record<string, any>;

package/build/lead/index.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react';
+import { UserInfo } from "../interfaces/types";
 import { LOCALE } from "../interfaces/types/Locale";
 import { Close } from "..";
 import { Description } from "./components/description";
@@ -22,6 +23,7 @@ export type Props = {
         control: string;
     }>;
     excludeExitRulesHandler?: boolean;
+    userInfo?: UserInfo | null;
 };
 export interface CompoundedComponent extends React.ForwardRefExoticComponent<Props> {
     Heading: typeof Heading;

package/build/lead/layouts/lightbox/formContext.d.ts

@@ -1,11 +1,13 @@
 import { MutableRefObject } from 'react';
+import { UserInfo } from "../../../interfaces/types";
 export declare const LeadFormProvider: import("react").FC<import("@mantine/form/lib/FormProvider/FormProvider").FormProviderProps<import("@mantine/form").UseFormReturnType<unknown, (values: unknown) => unknown>>>, useLeadFormContext: () => import("@mantine/form").UseFormReturnType<unknown, (values: unknown) => unknown>, useLeadForm: import("@mantine/form/lib/types").UseForm<unknown, (values: unknown) => unknown>;
-export declare const useLeadFormConfig: ({ listBlockAdded, validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id, }: {
+export declare const useLeadFormConfig: ({ listBlockAdded, validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id, userInfo: userInfoProps, }: {
     listBlockAdded: any[];
     validatingPhoneRef: MutableRefObject<boolean>;
     validatingEmailRef: MutableRefObject<boolean>;
     campaignId: number;
     campaign_subot_id: number[];
+    userInfo?: UserInfo | null;
 }) => {
     form: import("@mantine/form").UseFormReturnType<unknown, (values: unknown) => unknown>;
     validateObj: import("@mantine/form/lib/types").FormValidateInput<unknown>;

package/build/lead/layouts/lightbox/index.d.ts

@@ -1,6 +1,6 @@
 import React, { Dispatch, SetStateAction } from 'react';
-import { LOCALE } from "../../../interfaces/types";
-export declare const LightboxLayout: ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaign_subot_id, locale, showEmpty, setShowEmpty, }: {
+import { LOCALE, UserInfo } from "../../../interfaces/types";
+export declare const LightboxLayout: ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, }: {
     popupId: string;
     currentLayout: string;
     extraFields: any;
@@ -28,4 +28,5 @@ export declare const LightboxLayout: ({ popupId, extraFields, onClose: onClosePr
     locale?: LOCALE;
     showEmpty?: boolean;
     setShowEmpty?: Dispatch<SetStateAction<boolean>>;
+    userInfo?: UserInfo | null;
 }) => React.JSX.Element;

package/build/lead/newLeadPopup.d.ts

@@ -1,6 +1,6 @@
 import React, { Dispatch, SetStateAction } from 'react';
-import { LOCALE } from "../interfaces/types";
-export declare const NewLeadPopup: ({ campaign, action, onSubmit, onClose, showThankyou, locale, showEmpty, setShowEmpty, }: {
+import { LOCALE, UserInfo } from "../interfaces/types";
+export declare const NewLeadPopup: ({ campaign, action, onSubmit, onClose, showThankyou, locale, showEmpty, setShowEmpty, userInfo, }: {
     campaign: any;
     action?: string;
     onSubmit?: (currentForm: HTMLFormElement, values?: Record<string, any>, categoryLevel?: number, categoryData?: {
@@ -23,4 +23,5 @@ export declare const NewLeadPopup: ({ campaign, action, onSubmit, onClose, showT
     locale?: LOCALE;
     showEmpty?: boolean;
     setShowEmpty?: Dispatch<SetStateAction<boolean>>;
+    userInfo?: UserInfo | null;
 }) => React.JSX.Element;

package/build/lead.js

@@ -2,47 +2,47 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-876a6fb8.js');
+var tslib_es6 = require('./tslib.es6-08cfd6e4.js');
 var React = require('react');
 var core = require('@mantine/core');
 var dayjs = require('dayjs');
 var debounce = require('lodash/debounce');
 var form = require('@mantine/form');
-var index = require('./index-d63df4e6.js');
-var index$1 = require('./index-75ffffea.js');
-var index$2 = require('./index-6084d7d2.js');
-var index$4 = require('./index-f9032264.js');
-var utils = require('./utils-5b446c46.js');
+var index = require('./index-2ad70d9a.js');
+var translationsContext = require('./translationsContext-4a27524a.js');
+var miscCookieHelper = require('./miscCookieHelper.js');
+var utils$1 = require('./utils-eb7527f9.js');
+var index$1 = require('./index-5be506ba.js');
+var index$2 = require('./index-6f301b3c.js');
+var index$4 = require('./index-e4245694.js');
+var utils = require('./utils-e72360f4.js');
 require('@mantine/dates');
-var index$a = require('./index-ef1363d4.js');
-require('./index-2ac51c28.js');
-var index$8 = require('./index-bdfbb311.js');
-require('./useMantineLocale-dc446f96.js');
-var index$5 = require('./index-cb44a93c.js');
-require('./index.styles-e11d26f3.js');
-var translationsContext = require('./translationsContext-d0d800a5.js');
+var index$a = require('./index-cf8d4497.js');
+require('./index-4ff45cf7.js');
+var index$8 = require('./index-1a22b8a6.js');
+require('./useMantineLocale-7f3c53c7.js');
+var index$5 = require('./index-85abceae.js');
+require('./index.styles-3a62da10.js');
 var hooks = require('@mantine/hooks');
-var utils$1 = require('./utils-fdfa3e28.js');
-require('./other-06fe2945.js');
-require('./index-d8587b52.js');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-1f9453b2.js');
-var index$3 = require('./index-06c40093.js');
-var index$6 = require('./index-e835d166.js');
+require('./other-4093510e.js');
+require('./index-d2d2ce8a.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-25bf3314.js');
+var index$3 = require('./index-ae18381c.js');
+var index$6 = require('./index-99825c5e.js');
 var uuid = require('uuid');
-var index$7 = require('./index-0af5e4f9.js');
-var index$9 = require('./index-0dd90e03.js');
-var useScreenSize = require('./useScreenSize-0c0d47f5.js');
+var index$7 = require('./index-a3cd9607.js');
+var index$9 = require('./index-8fc53691.js');
+var useScreenSize = require('./useScreenSize-9d18c2bb.js');
 var ReactDOM = require('react-dom');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var miscCookieHelper = require('./miscCookieHelper.js');
-var Close = require('./Close-127b40f9.js');
+var Close = require('./Close-1bddd1e3.js');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
-require('./Locale-57db1c3d.js');
+require('./Locale-e84afdc8.js');
 require('classnames');
-require('./useUniqueId-5769db85.js');
+require('./useUniqueId-8ac8559d.js');
 require('./constantsSite.js');
 require('@hhgtech/icons/core');
 require('date-fns/locale');
@@ -164,6 +164,38 @@ const LEAD_TIMEZONE_DATA = {
     9: 'Asia/Manila', // Philippines / Filipinos Site
 };
 
+const SSO_MAP_LEAD = ['name', 'email', 'birthday', 'phone', 'gender'];
+const mappingSSOToLead = (userInfoProps) => {
+    if (!(userInfoProps === null || userInfoProps === void 0 ? void 0 : userInfoProps.id)) {
+        return null;
+    }
+    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;
+                }
+            }
+            else if (ssoKey === 'gender') {
+                user.gender = initValue.toString();
+            }
+            else if (ssoKey === 'phone' &&
+                typeof (userInfoProps === null || userInfoProps === void 0 ? void 0 : userInfoProps['area_code']) !== 'undefined') {
+                const areaCode = userInfoProps === null || userInfoProps === void 0 ? void 0 : userInfoProps['area_code'];
+                user.phone = areaCode + initValue;
+            }
+            else {
+                user[ssoKey] = initValue;
+            }
+        }
+    }
+    return Object.values(user).length ? user : null;
+};
+
 class Store {
     constructor() {
         this.apiLeadUrl = 'https://dev.leadgen.hellobacsi.com/';
@@ -382,8 +414,9 @@ const clearCacheUsedEmailOrPhone = () => {
 
 // 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 = [], }) => {
+const useLeadFormConfig$1 = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo: userInfoProps, }) => {
     const { t } = index.useTranslations();
+    const userInfo = React.useMemo(() => mappingSSOToLead(userInfoProps), [userInfoProps === null || userInfoProps === void 0 ? void 0 : userInfoProps.id]);
     React.useEffect(() => {
         if (!window.intlTelInputUtils) {
             require('intl-tel-input/build/js/utils');
@@ -543,13 +576,14 @@ const useLeadFormConfig$1 = ({ listBlockAdded = [], validatingPhoneRef, validati
         validateInputOnChange: true,
         clearInputErrorOnChange: true,
         validate: validateObj,
+        initialValues: userInfo,
     });
     const formRef = React.useRef(form);
     formRef.current = form;
     return { form, validateObj };
 };
 
-const Component = ({ campaign, onClose: onCloseProp, onOtherSubmit, onSubmit, showThankyou, setShowThankyou, locale, children, showEmpty, setShowEmpty, }) => {
+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;
@@ -567,6 +601,7 @@ const Component = ({ campaign, onClose: onCloseProp, onOtherSubmit, onSubmit, sh
         validatingEmailRef,
         campaignId,
         campaign_subot_id,
+        userInfo,
     });
     const [showOtpPhone, setShowOtpPhone] = React.useState(null);
     const [formRef, setFormRef] = React.useState(null);
@@ -1576,8 +1611,9 @@ const GoogleLocation = (props) => {
 
 // You can give context variables any name
 const [LeadFormProvider, useLeadFormContext, useLeadForm] = form.createFormContext();
-const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], }) => {
+const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validatingEmailRef, campaignId, campaign_subot_id = [], userInfo: userInfoProps, }) => {
     const { t } = index.useTranslations();
+    const userInfo = React.useMemo(() => mappingSSOToLead(userInfoProps), [userInfoProps === null || userInfoProps === void 0 ? void 0 : userInfoProps.id]);
     const validateObj = React.useMemo(() => {
         const InputBlocks = [
             'TextBlock',
@@ -1733,6 +1769,7 @@ const useLeadFormConfig = ({ listBlockAdded = [], validatingPhoneRef, validating
         validateInputOnChange: true,
         clearInputErrorOnChange: true,
         validate: validateObj,
+        initialValues: userInfo,
     });
     const formRef = React.useRef(form);
     formRef.current = form;
@@ -2092,20 +2129,20 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
             case 'SubtitleBlock':
                 return (React__default["default"].createElement(SubtitleBlock, { key: index, align: align }, value));
             case 'TextBlock':
-                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(core.TextInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, 
+                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default["default"].createElement(core.TextInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "text", placeholder: placeholder, 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChangeRaw={(e) => inputOnChange('text', e)}
                         label: placeholder, "data-control": "text", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'NumberBlock':
-                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(core.NumberInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, 
+                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default["default"].createElement(core.NumberInput, Object.assign({ withAsterisk: required, spellCheck: false, type: "number", placeholder: placeholder, 
                         // className="lead-modal__form-control leadgen-form_field"
                         // onChange={(e) => inputOnChange('number', e)}
                         label: placeholder, "data-control": "number", name: value, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             case 'EmailBlock':
-                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(core.TextInput, Object.assign({ key: index, withAsterisk: required, spellCheck: false, 
+                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default["default"].createElement(core.TextInput, Object.assign({ withAsterisk: required, spellCheck: false, 
                         // type="email"
                         placeholder: placeholder, 
                         // className="lead-modal__form-control leadgen-form_field"
@@ -2116,26 +2153,22 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
             case 'PhoneBlock': {
                 const id = popupId + '-' + value + '-' + index;
                 const _b = form.getInputProps(value), { error } = _b, formPhoneInputWrapper = tslib_es6.__rest(_b, ["error"]);
-                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: core.clsx('lead-modal__form-control leadgen-form_field', {
+                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: core.clsx('lead-modal__form-control leadgen-form_field', {
                         'leadgen-form_field_error': !!error,
                     }) },
-                    React__default["default"].createElement(core.Input.Wrapper, Object.assign({ size: "md", withAsterisk: required, key: index, label: placeholder, "data-invalid": !!error, labelProps: {
-                            htmlFor: id,
-                        }, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, formPhoneInputWrapper, { error: error }),
+                    React__default["default"].createElement(core.Input.Wrapper, { size: "md", withAsterisk: required, label: placeholder, "data-invalid": !!error, labelProps: { htmlFor: id }, inputWrapperOrder: ['label', 'input', 'description', 'error'], error: error },
                         React__default["default"].createElement("div", { className: "mantine-Input-wrapper" },
-                            React__default["default"].createElement(index$2.Phone, { className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: placeholder, onChange: (v) => {
-                                    form.setFieldValue(value, v);
-                                }, 
+                            React__default["default"].createElement(index$2.Phone, Object.assign({ className: "mantine-Input-input", name: value, spellCheck: false, type: "tel", placeholder: placeholder, 
                                 // onBlur={(e) => inputOnBlur('tel', e)}
-                                id: id, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" })))));
+                                id: id, defaultCountry: (locale ? utils.MAPPED_LOCALE[locale] || 'VN' : 'VN'), "data-control": "tel" }, formPhoneInputWrapper))))));
             }
             case 'LocationBlock': {
-                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(GoogleLocation, Object.assign({ withAsterisk: required, key: index, name: value, placeholder: placeholder, label: placeholder, "data-control": "text", locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
+                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default["default"].createElement(GoogleLocation, Object.assign({ withAsterisk: required, name: value, placeholder: placeholder, label: placeholder, "data-control": "text", locale: locale, inputWrapperOrder: ['label', 'input', 'description', 'error'] }, form.getInputProps(value)))));
             }
             case 'DateBlock':
-                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
-                    React__default["default"].createElement(index$4.DatePicker, Object.assign({ clearable: true, withAsterisk: required, key: index, type: "default", name: value, placeholder: placeholder, label: placeholder, inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
+                return (React__default["default"].createElement(TextField, { key: index, shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                    React__default["default"].createElement(index$4.DatePicker, Object.assign({ clearable: true, withAsterisk: required, type: "default", name: value, placeholder: placeholder, label: placeholder, inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default["default"].createElement(React__default["default"].Fragment, null,
                                 children,
                                 React__default["default"].createElement("input", { type: "hidden", "data-control": "date", name: value, value: formValue })));
@@ -2148,13 +2181,13 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                                 onOtherSubmit === null || onOtherSubmit === void 0 ? void 0 : onOtherSubmit();
                             } }, value))));
             case 'CheckboxBlock':
-                return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_checkbox" },
+                return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_checkbox", key: index },
                     isSendMailChimp && (React__default["default"].createElement("div", { style: {
                             display: 'none',
                         }, "data-name": value + '-mailchimp' })),
                     React__default["default"].createElement(index$2.Checkbox.Group, Object.assign({ withAsterisk: required, 
                         // className="lead-modal__form-control leadgen-form_field"
-                        key: index, label: placeholder, size: "md", sx: {
+                        label: placeholder, size: "md", sx: {
                             display: 'flex',
                             flexDirection: 'column',
                             flexWrap: 'wrap',
@@ -2163,17 +2196,19 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                             return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
                         } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$2.Checkbox, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "checkbox" }))))));
             case 'RadioBlock':
-                return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_radio" },
+                return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_radio", key: index },
                     isSendMailChimp && (React__default["default"].createElement(core.Input, { type: "hidden", name: value + '-mailchimp', value: isSendMailChimp })),
                     React__default["default"].createElement(index$2.Radio.Group, Object.assign({ withAsterisk: required, 
                         // className="lead-modal__form-control leadgen-form_field"
-                        key: index, label: placeholder, size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
+                        label: placeholder, size: "md", inputWrapperOrder: ['label', 'input', 'description', 'error'], inputContainer: (children) => {
                             return (React__default["default"].createElement("div", { className: "leadgen-choiceContainer" }, children));
                         } }, form.getInputProps(value)), listQuestion.map((l, _index) => (React__default["default"].createElement(index$2.Radio, { name: value, key: _index, value: l.value, label: l.placeholder, "data-control": "radio" }))))));
             case 'DropdownBlock':
-                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field" },
+                return (React__default["default"].createElement(TextField, { shrink: !!formValue, className: "lead-modal__form-control leadgen-form_field", key: index },
                     React__default["default"].createElement("div", { style: { display: 'none' }, "data-extra": true, "data-name": value, "data-control": 'dropdown' }),
-                    React__default["default"].createElement(index$2.Select, Object.assign({ key: index, 
+                    React__default["default"].createElement(index$2.Select
+                    // className="lead-modal__form-control leadgen-form_field"
+                    , Object.assign({ 
                         // className="lead-modal__form-control leadgen-form_field"
                         label: placeholder, placeholder: placeholder, withAsterisk: required, name: value, data: listQuestion.map((l) => ({
                             value: l.value,
@@ -2181,9 +2216,9 @@ const LightboxFields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmi
                         })) }, form.getInputProps(value)))));
             case 'TncBlock':
                 const _c = form.getInputProps(`TNC-${b.id}`), { error } = _c, tncInputProps = tslib_es6.__rest(_c, ["error"]);
-                return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_checkbox" },
+                return (React__default["default"].createElement(ChoiceField, { className: "leadgen-form_checkbox", key: b.id },
                     React__default["default"].createElement(core.Input.Wrapper, { error: error },
-                        React__default["default"].createElement(index$2.Checkbox, Object.assign({ name: 'TNC-' + b.id, key: b.id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, tncInputProps)))));
+                        React__default["default"].createElement(index$2.Checkbox, Object.assign({ name: 'TNC-' + b.id, label: React__default["default"].createElement("p", { className: "lead-modal__tnc-link", dangerouslySetInnerHTML: { __html: data.valueHTML } }), className: "tnc-block", "data-control": "checkbox" }, tncInputProps)))));
         }
         return null;
     })));
@@ -2327,7 +2362,7 @@ const EmptyIcon = (props) => {
 // image: campaignShow.image
 // imageDestkop: campaignShow.image_desktop
 const LEADGEN_LIMIT_LIGHTBOXB = 6;
-const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaign_subot_id, locale, showEmpty, setShowEmpty, }) => {
+const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSubmit, imageMobile, imageDesktop, imageOverlayMobile, imageOverlayDesktop, imageBackground, currentLayout, title, onSubmit, showThankyou, campaignId, campaign_subot_id, locale, showEmpty, setShowEmpty, userInfo, }) => {
     var _a, _b, _c;
     const { t } = index.useTranslations();
     const { isMobile } = useScreenSize.useScreenSize();
@@ -2395,6 +2430,7 @@ const LightboxLayout = ({ popupId, extraFields, onClose: onCloseProp, onOtherSub
         validatingEmailRef,
         campaignId,
         campaign_subot_id,
+        userInfo,
     });
     const middlewareOnSubmit = (e) => {
         e.preventDefault();
@@ -3035,7 +3071,7 @@ function getCategoryLevel(t = 'Xin chao {{category_2}} extra') {
         return null;
     }
 }
-const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, locale, showEmpty, setShowEmpty, }) => {
+const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, locale, showEmpty, setShowEmpty, userInfo, }) => {
     var _a, _b;
     const { apiUrl, siteDomain } = React.useContext(LeadGenContext);
     React.useEffect(() => {
@@ -3154,7 +3190,7 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, local
         currentLayout == 'Fullscreen' ||
         currentLayout == 'Sidebar' ||
         currentLayout == 'Slider') {
-        return (React__default["default"].createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, title: titleText, onSubmit: (form, values) => onSubmit(form, values, categoryLevel, categoryData), key: currentLayout, imageOverlayDesktop: image_overlay_desktop, imageOverlayMobile: image_overlay_mobile, showThankyou: showThankyou, campaignId: campaign.id, campaign_subot_id: campaign.bot_id || [], locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty }));
+        return (React__default["default"].createElement(LightboxLayout, { popupId: popupIdRef.current, extraFields: extra_fields, onClose: onClose, onOtherSubmit: onOtherSubmit, imageMobile: image, imageDesktop: image_desktop, imageBackground: image_background, currentLayout: currentLayout, title: titleText, onSubmit: (form, values) => onSubmit(form, values, categoryLevel, categoryData), key: currentLayout, imageOverlayDesktop: image_overlay_desktop, imageOverlayMobile: image_overlay_mobile, showThankyou: showThankyou, campaignId: campaign.id, campaign_subot_id: campaign.bot_id || [], locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }));
     }
     else if (currentLayout.includes('Skin')) {
         return (React__default["default"].createElement(SkinLayout, { popupId: popupIdRef.current, link: actionBlocks.linkButtonBlock.data.url, linkNewTab: !!actionBlocks.linkButtonBlock.data.newtab, linkText: actionBlocks.linkButtonBlock.data.value, onClose: onClose, onOtherSubmit: onOtherSubmit, imageMobile: image, imageDesktop: image_desktop, currentLayout: currentLayout }));
@@ -3163,7 +3199,7 @@ const NewLeadPopup = ({ campaign, action, onSubmit, onClose, showThankyou, local
 };
 
 // mount css
-const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl, DEBUG_URL, forceCampaign, children, extraPayloadValues = [], excludeExitRulesHandler, }) => {
+const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl, DEBUG_URL, forceCampaign, children, extraPayloadValues = [], excludeExitRulesHandler, userInfo, }) => {
     var _a;
     const scrollEventHandlerRef = React.useRef();
     const leadStartTimeRef = React.useRef(Date.now());
@@ -3431,7 +3467,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
         }
     }, [showCampaign]);
     return (React__default["default"].createElement(LeadGenContext.Provider, { value: { apiUrl, siteDomain, siteId, locale } },
-        React__default["default"].createElement(translationsContext.TranslationsContext.Provider, { value: { locale, values: getTranslations(locale) } }, children ? (React__default["default"].createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, setShowThankyou: setShowThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty }, children)) : (React__default["default"].createElement(core.Portal, { target: utils$1.getPopupWrapperDom() },
+        React__default["default"].createElement(translationsContext.TranslationsContext.Provider, { value: { locale, values: getTranslations(locale) } }, children ? (React__default["default"].createElement(Component, { campaign: showCampaign, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, setShowThankyou: setShowThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo }, children)) : (React__default["default"].createElement(core.Portal, { target: utils$1.getPopupWrapperDom() },
             React__default["default"].createElement(core.Box, { sx: { position: 'fixed', zIndex: index$a.ZINDEX_SSO - 9e6 } },
                 React__default["default"].createElement(core.Transition, { mounted: Boolean(((_a = showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields) === null || _a === void 0 ? void 0 : _a.popupVersion) === '2.1'), transition: "fade", duration: 600, timingFunction: "ease" }, (styles) => {
                     var _a;
@@ -3439,7 +3475,7 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
                         !!showCampaign.extra_fields.currentLayout &&
                             !showCampaign.extra_fields.currentLayout.includes('Inline') &&
                             !showCampaign.extra_fields.currentLayout.includes('Sidebar') && (React__default["default"].createElement(core.Overlay, { color: "#000", opacity: 0.6, center: true, zIndex: 400, pos: 'fixed', onClick: () => onClose() })),
-                        React__default["default"].createElement(NewLeadPopup, { campaign: showCampaign, action: action, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty })))));
+                        React__default["default"].createElement(NewLeadPopup, { campaign: showCampaign, action: action, onSubmit: onSubmit, onClose: onClose, showThankyou: showThankyou, locale: locale, showEmpty: showEmpty, setShowEmpty: setShowEmpty, userInfo: userInfo })))));
                 })))))));
 };
 const LeadGen = _LeadGen;

package/build/{logoIcon-904a4cf6.js → logoIcon-e6756cb8.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-bdfbb311.js');
-var useScreenSize = require('./useScreenSize-0c0d47f5.js');
+var index = require('./index-1a22b8a6.js');
+var useScreenSize = require('./useScreenSize-9d18c2bb.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/mantine.js

@@ -2,43 +2,43 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-6084d7d2.js');
-var index$1 = require('./index-f9032264.js');
-var index$2 = require('./index-75ffffea.js');
-var index$3 = require('./index-cb44a93c.js');
-var index$4 = require('./index-7c2a27e6.js');
+var index = require('./index-6f301b3c.js');
+var index$1 = require('./index-e4245694.js');
+var index$2 = require('./index-5be506ba.js');
+var index$3 = require('./index-85abceae.js');
+var index$4 = require('./index-be56348d.js');
 var React = require('react');
-var index$5 = require('./index-aece5b55.js');
-var tslib_es6 = require('./tslib.es6-876a6fb8.js');
+var index$5 = require('./index-0437fc96.js');
+var tslib_es6 = require('./tslib.es6-08cfd6e4.js');
 var core = require('@mantine/core');
 var miscTheme = require('./miscTheme.js');
-var index$6 = require('./index-09fe20ee.js');
+var index$6 = require('./index-95309324.js');
 var hooks = require('@mantine/hooks');
-var index$7 = require('./index-fa3e7daa.js');
-var useMantineLocale = require('./useMantineLocale-dc446f96.js');
-var other = require('./other-06fe2945.js');
-var index$8 = require('./index-d8587b52.js');
+var index$7 = require('./index-e1ae0b9c.js');
+var useMantineLocale = require('./useMantineLocale-7f3c53c7.js');
+var other = require('./other-4093510e.js');
+var index$8 = require('./index-d2d2ce8a.js');
 require('@hhgtech/icons/other');
-require('./index-bdfbb311.js');
+require('./index-1a22b8a6.js');
 require('./constantsDomainLocales.js');
-require('./Locale-57db1c3d.js');
+require('./Locale-e84afdc8.js');
 require('./constantsIsProduction.js');
-require('./useScreenSize-0c0d47f5.js');
+require('./useScreenSize-9d18c2bb.js');
 require('@emotion/styled');
-require('./utils-fdfa3e28.js');
+require('./utils-eb7527f9.js');
 require('@mantine/carousel');
-require('./index-2ac51c28.js');
-require('./index-ef1363d4.js');
+require('./index-4ff45cf7.js');
+require('./index-cf8d4497.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
 require('classnames');
-require('./useUniqueId-5769db85.js');
+require('./useUniqueId-8ac8559d.js');
 require('@hhgtech/icons/core');
 require('@mantine/dates');
-require('./index.styles-e11d26f3.js');
-require('./index-d63df4e6.js');
-require('./translationsContext-d0d800a5.js');
+require('./index.styles-3a62da10.js');
+require('./index-2ad70d9a.js');
+require('./translationsContext-4a27524a.js');
 require('@mantine/notifications');
 require('dayjs');
 

package/build/misc.js

@@ -2,37 +2,37 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var localizeNumberFormat = require('./localizeNumberFormat-c1f19087.js');
-var animation = require('./animation-51d9f750.js');
+var localizeNumberFormat = require('./localizeNumberFormat-06275cbd.js');
+var animation = require('./animation-03a0fda0.js');
 var miscCookieHelper = require('./miscCookieHelper.js');
 require('react');
 require('@mantine/core');
-require('./useMantineLocale-dc446f96.js');
-require('./index-2ac51c28.js');
-require('./index-bdfbb311.js');
+require('./useMantineLocale-7f3c53c7.js');
+require('./index-4ff45cf7.js');
+require('./index-1a22b8a6.js');
 var miscTheme = require('./miscTheme.js');
-var utils = require('./utils-fdfa3e28.js');
-require('./index-ef1363d4.js');
-var dataTransform = require('./dataTransform-50730e70.js');
-var normalizeLink = require('./normalizeLink-92174959.js');
+var utils = require('./utils-eb7527f9.js');
+require('./index-cf8d4497.js');
+var dataTransform = require('./dataTransform-a2b4a589.js');
+var normalizeLink = require('./normalizeLink-7f8ed159.js');
 var miscGetDynamicHealthTool = require('./miscGetDynamicHealthTool.js');
 var miscGetSocialList = require('./miscGetSocialList.js');
 var miscScreenSizeContext = require('./miscScreenSizeContext.js');
 require('dayjs');
 require('@emotion/react');
-require('./tslib.es6-876a6fb8.js');
+require('./tslib.es6-08cfd6e4.js');
 require('@mantine/notifications');
-require('./other-06fe2945.js');
-require('./Locale-57db1c3d.js');
+require('./other-4093510e.js');
+require('./Locale-e84afdc8.js');
 require('./constantsDomainLocales.js');
 require('./constantsIsProduction.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
-require('./core-659eb53b.js');
-require('./WhatsApp-6c83bb5f.js');
-require('./index-6791aa5b.js');
-require('./index-68e0c498.js');
+require('./core-7d4f9b20.js');
+require('./WhatsApp-f073e06e.js');
+require('./index-ea0b9dc6.js');
+require('./index-80c2eff3.js');
 require('js-cookie');
 require('uuid');
 require('lodash/throttle');

package/build/miscGetDynamicHealthTool.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-876a6fb8.js');
-var normalizeLink = require('./normalizeLink-92174959.js');
-var core = require('./core-659eb53b.js');
+var tslib_es6 = require('./tslib.es6-08cfd6e4.js');
+var normalizeLink = require('./normalizeLink-7f8ed159.js');
+var core = require('./core-7d4f9b20.js');
 require('./constantsDomainLocales.js');
-require('./Locale-57db1c3d.js');
+require('./Locale-e84afdc8.js');
 require('./constantsIsProduction.js');
 
 const formatHealthTool = (healthTool, locale) => {

package/build/miscGetSocialList.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var tslib_es6 = require('./tslib.es6-876a6fb8.js');
-var WhatsApp = require('./WhatsApp-6c83bb5f.js');
-var index = require('./index-2ac51c28.js');
-var index$2 = require('./index-6791aa5b.js');
-var index$1 = require('./index-bdfbb311.js');
-var Locale = require('./Locale-57db1c3d.js');
-require('./index-68e0c498.js');
-require('./index-ef1363d4.js');
+var tslib_es6 = require('./tslib.es6-08cfd6e4.js');
+var WhatsApp = require('./WhatsApp-f073e06e.js');
+var index = require('./index-4ff45cf7.js');
+var index$2 = require('./index-ea0b9dc6.js');
+var index$1 = require('./index-1a22b8a6.js');
+var Locale = require('./Locale-e84afdc8.js');
+require('./index-80c2eff3.js');
+require('./index-cf8d4497.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsDomainLocales.js');

package/build/miscScreenSizeContext.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var throttle = require('lodash/throttle');
-var utils = require('./utils-fdfa3e28.js');
+var utils = require('./utils-eb7527f9.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }