@hhgtech/hhg-components 1.28.80 → 1.28.82

package/build/{index-958f67bb.js → index-cd2d590a.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var locale = require('date-fns/locale');
-var Subot = require('./Subot-a11a4e5b.js');
-var isProduction = require('./isProduction-253f0a63.js');
+var Subot = require('./Subot-f130357f.js');
+var isProduction = require('./isProduction-b98e94b0.js');
 
 const siteHost = {
     HELLO_HEALTH_GROUP: 'hellohealthgroup.com',

package/build/{index-a909db6f.js → index-d4d22c6d.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-05775979.js');
+var tslib_es6 = require('./tslib.es6-e55862b5.js');
 var React = require('react');
 var core = require('@mantine/core');
-var theme = require('./theme-3069f85a.js');
+var theme = require('./theme-99d60665.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{index-d7aea2d0.js → index-d511a66e.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var core = require('@mantine/core');
-var theme = require('./theme-3069f85a.js');
+var theme = require('./theme-99d60665.js');
 var styled = require('styled-components');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index-e3b0bdb0.js → index-fab5b061.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-05775979.js');
+var tslib_es6 = require('./tslib.es6-e55862b5.js');
 var React = require('react');
 var core = require('@mantine/core');
-var index$2 = require('./index-a79982f7.js');
-var index = require('./index-c194972d.js');
-var index$1 = require('./index-a84eedaa.js');
+var index$2 = require('./index-ae2b7f10.js');
+var index = require('./index-8e5eb06c.js');
+var index$1 = require('./index-2ca767e3.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/index.js

@@ -2,78 +2,78 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Subot = require('./Subot-a11a4e5b.js');
-var index$1 = require('./index-958f67bb.js');
-var index$5 = require('./index-c194972d.js');
+var Subot = require('./Subot-f130357f.js');
+var index$1 = require('./index-cd2d590a.js');
+var index$5 = require('./index-8e5eb06c.js');
 var React = require('react');
-var ChevronDown = require('./ChevronDown-00b6c45c.js');
-var Close = require('./Close-b7a203d1.js');
-var Visible = require('./Visible-c9b6d1c1.js');
-var index$2 = require('./index-14226ab2.js');
-var index$3 = require('./index-a2785ada.js');
-var index$4 = require('./index-a511db2b.js');
-var index$6 = require('./index-a3d460fa.js');
-var index$7 = require('./index-76bb520c.js');
-var constants = require('./constants-3479888e.js');
-var index$8 = require('./index-05304b9b.js');
-var index_styles = require('./index.styles-2705c1b1.js');
-var index$9 = require('./index-f77accef.js');
-var index$a = require('./index-7aff6c39.js');
-var index$b = require('./index-8d87268c.js');
-var index$c = require('./index-96b9585a.js');
-var index$d = require('./index-5f30931a.js');
-var utils = require('./utils-d583cd84.js');
-var index$e = require('./index-1cc3b628.js');
-var index$f = require('./index-d7aea2d0.js');
-var index$g = require('./index-8c630d76.js');
-var index$h = require('./index-88286df3.js');
-var index$i = require('./index-d02a1631.js');
-var index$j = require('./index-90b4cf6b.js');
-var index$k = require('./index-830cfc43.js');
-var useTranslations = require('./useTranslations-ee85619b.js');
-var useScrollbarSize = require('./useScrollbarSize-3e2d19c9.js');
-var useCategory = require('./useCategory-54dfd7ee.js');
-var useHealthToolCache = require('./useHealthToolCache-a5a6585a.js');
-var useIsInit = require('./useIsInit-91ab8916.js');
-var useOutsideClick = require('./useOutsideClick-e32b8474.js');
-var useUniqueId = require('./useUniqueId-3b22c3ca.js');
-var types = require('./types-55014b2c.js');
-var utils$1 = require('./utils-da97b7ae.js');
-var types$1 = require('./types-03e001c9.js');
-var localizeNumberFormat = require('./localizeNumberFormat-691759ff.js');
-var animation = require('./animation-1621b827.js');
-var cookieHelper = require('./cookieHelper-115e3b7b.js');
-var number = require('./number-97ef064d.js');
-var routing = require('./routing-46b3def0.js');
-var theme = require('./theme-3069f85a.js');
-var utils$2 = require('./utils-f7881466.js');
-var getDynamicHealthTool = require('./getDynamicHealthTool-fe550923.js');
-var getSocialList = require('./getSocialList-28b8aa45.js');
-var dataTransform = require('./dataTransform-29cc3dd2.js');
+var ChevronDown = require('./ChevronDown-cda9bf0a.js');
+var Close = require('./Close-cc2a81fe.js');
+var Visible = require('./Visible-a822251f.js');
+var index$2 = require('./index-b8c8e986.js');
+var index$3 = require('./index-57571b29.js');
+var index$4 = require('./index-55fda92e.js');
+var index$6 = require('./index-9e6a0e2d.js');
+var index$7 = require('./index-1a7828e5.js');
+var constants = require('./constants-e609d3aa.js');
+var index$8 = require('./index-6bdde1aa.js');
+var index_styles = require('./index.styles-3ff5fc4e.js');
+var index$9 = require('./index-7001d84b.js');
+var index$a = require('./index-c475966d.js');
+var index$b = require('./index-9d203d6b.js');
+var index$c = require('./index-35077d88.js');
+var index$d = require('./index-81a02e46.js');
+var utils = require('./utils-0697210e.js');
+var index$e = require('./index-31b77d45.js');
+var index$f = require('./index-d511a66e.js');
+var index$g = require('./index-0c2eb08e.js');
+var index$h = require('./index-715d5d30.js');
+var index$i = require('./index-2ed3e77a.js');
+var index$j = require('./index-459d6ad4.js');
+var index$k = require('./index-91330e5c.js');
+var useTranslations = require('./useTranslations-b53041be.js');
+var useScrollbarSize = require('./useScrollbarSize-14541366.js');
+var useCategory = require('./useCategory-f14a025e.js');
+var useHealthToolCache = require('./useHealthToolCache-4e156651.js');
+var useIsInit = require('./useIsInit-d47a099d.js');
+var useOutsideClick = require('./useOutsideClick-b533a142.js');
+var useUniqueId = require('./useUniqueId-bf6075d3.js');
+var types = require('./types-808399ec.js');
+var utils$1 = require('./utils-7fee6f4f.js');
+var types$1 = require('./types-d1e7d2cd.js');
+var localizeNumberFormat = require('./localizeNumberFormat-0749e483.js');
+var animation = require('./animation-2c02cea6.js');
+var cookieHelper = require('./cookieHelper-e8f1d4ca.js');
+var number = require('./number-2419341f.js');
+var routing = require('./routing-1f3a386d.js');
+var theme = require('./theme-99d60665.js');
+var utils$2 = require('./utils-72403c5b.js');
+var getDynamicHealthTool = require('./getDynamicHealthTool-5d218518.js');
+var getSocialList = require('./getSocialList-9363d7d2.js');
+var dataTransform = require('./dataTransform-a6b6db85.js');
 require('date-fns/locale');
-require('./isProduction-253f0a63.js');
-require('./tslib.es6-05775979.js');
+require('./isProduction-b98e94b0.js');
+require('./tslib.es6-e55862b5.js');
 require('@hhgtech/icons/other');
 require('@mantine/core');
 require('@mantine/hooks');
-require('./index-a79982f7.js');
+require('./index-ae2b7f10.js');
 require('dayjs');
 require('styled-components');
 require('@mantine/carousel');
-require('./index-a84eedaa.js');
+require('./index-2ca767e3.js');
 require('classnames');
 require('@hhgtech/icons/core');
 require('innertext');
 require('@mantine/dates');
-require('./translationsContext-09f33cc8.js');
+require('./translationsContext-17a2f0f9.js');
 require('string-format');
 require('lodash/throttle');
 require('html-react-parser');
 require('date-fns');
-require('./types-ab2e9e82.js');
-require('./index-50a331ae.js');
-require('./index.styled-2ad9b370.js');
-require('./index-17f9a72f.js');
+require('./types-786e65ba.js');
+require('./index-614ae445.js');
+require('./index.styled-9cfaad5a.js');
+require('./index-212d0092.js');
 require('react-hook-form');
 require('@hookform/resolvers/yup');
 require('date-fns/locale/en-US');
@@ -82,21 +82,21 @@ require('date-fns/locale/vi');
 require('date-fns/locale/zh-TW');
 require('uuid');
 require('@mantine/form');
-require('./index-e3b0bdb0.js');
+require('./index-fab5b061.js');
 require('js-cookie');
 require('lodash/flatten');
 require('lodash/uniqBy');
-require('./normalizeLink-289e65d5.js');
-require('./paths-a793ca70.js');
+require('./normalizeLink-860ee4cd.js');
+require('./paths-85f921c5.js');
 require('react-keyed-flatten-children');
 require('react-dom');
 require('react-day-picker/DayPickerInput');
-require('./constants-bd8afa18.js');
-require('./index-a909db6f.js');
+require('./constants-856e5cfa.js');
+require('./index-d4d22c6d.js');
 require('dayjs/plugin/relativeTime');
 require('lodash/debounce');
-require('./core-22367a27.js');
-require('./utils-8aee541d.js');
+require('./core-7a417965.js');
+require('./utils-b2499923.js');
 require('react-contenteditable');
 require('slugify');
 require('lodash/shuffle');
@@ -259,6 +259,7 @@ exports.ScrollList = index$2.ScrollList;
 exports.SeoHead = index$2.SeoHead;
 exports.ShareContainer = index$2.ShareContainer;
 exports.ShareDrawer = index$2.ShareDrawer;
+exports.SideBannerModal = index$2.SideBannerModal;
 exports.SideMenu = index$2.index;
 exports.StatisticCard = index$2.StatisticCard;
 exports.SurveyOrPremiumBanner = index$2.SurveyOrPremiumBanner;

package/build/{index.styled-2ad9b370.js → index.styled-9cfaad5a.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-05775979.js');
+var tslib_es6 = require('./tslib.es6-e55862b5.js');
 var React = require('react');
-var theme = require('./theme-3069f85a.js');
+var theme = require('./theme-99d60665.js');
 var styled = require('styled-components');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{index.styles-2705c1b1.js → index.styles-3ff5fc4e.js}

@@ -1,12 +1,12 @@
 'use strict';
 
 var styled = require('styled-components');
-var theme = require('./theme-3069f85a.js');
-var utils = require('./utils-f7881466.js');
-var tslib_es6 = require('./tslib.es6-05775979.js');
+var theme = require('./theme-99d60665.js');
+var utils = require('./utils-72403c5b.js');
+var tslib_es6 = require('./tslib.es6-e55862b5.js');
 var React = require('react');
-var constants = require('./constants-3479888e.js');
-var animation = require('./animation-1621b827.js');
+var constants = require('./constants-e609d3aa.js');
+var animation = require('./animation-2c02cea6.js');
 var core = require('@mantine/core');
 var flattenChildren = require('react-keyed-flatten-children');
 

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

@@ -12,7 +12,10 @@ export type ThankyouType = {
     image?: string;
 };
 type LeadGenComponentContextType = {
-    formRef: MutableRefObject<HTMLFormElement>;
+    formRef: {
+        current: HTMLFormElement | null;
+    };
+    setFormRef: Dispatch<SetStateAction<HTMLFormElement | null>>;
     campaignId: number;
     campaign_subot_id: number[];
     heading: string;

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

@@ -1,5 +1,10 @@
 import React from 'react';
 import { BoxProps } from '@mantine/core';
-type Props = BoxProps;
+type Props = {
+    fillInfo: {
+        phone?: string;
+        email?: string;
+    };
+} & BoxProps;
 export declare const Form: (props: Props) => React.JSX.Element;
 export {};

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

@@ -4,6 +4,4 @@ export type OtpData = {
     phone: string;
     type: 'whatsapp' | 'phone';
 };
-export declare const OtpBlock: ({}: {
-    onSuccess?: () => void;
-} & BoxProps) => React.JSX.Element;
+export declare const OtpBlock: ({ ...rest }: BoxProps) => React.JSX.Element;

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

@@ -1,9 +1,11 @@
 declare const _default: (params: void, options?: import("@mantine/core").UseStylesOptions<string>) => {
     classes: {
         root: string;
+        header: string;
         heading: string;
         description: string;
         control: string;
+        actions: string;
         submitBtn: string;
         resendOtp: string;
     };

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

@@ -1,4 +1,4 @@
 import { ThankyouType } from "./context";
 export declare const Thankyou: ({ children, }: {
     children: (v: ThankyouType) => Element;
-}) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+}) => Element;

package/build/lead.js

@@ -2,48 +2,48 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-05775979.js');
+var tslib_es6 = require('./tslib.es6-e55862b5.js');
 var React = require('react');
 var debounce = require('lodash/debounce');
 var form = require('@mantine/form');
-var useTranslations = require('./useTranslations-ee85619b.js');
-var index = require('./index-a84eedaa.js');
+var useTranslations = require('./useTranslations-b53041be.js');
+var index = require('./index-2ca767e3.js');
 var core = require('@mantine/core');
-require('./index.styles-2705c1b1.js');
-var index$1 = require('./index-c194972d.js');
-var index$2 = require('./index-a2785ada.js');
-var index$5 = require('./index-a79982f7.js');
-require('./constants-3479888e.js');
-require('./Subot-a11a4e5b.js');
-require('./utils-d583cd84.js');
-var utils$1 = require('./utils-f7881466.js');
-var index$3 = require('./index-72a41d2b.js');
-var theme = require('./theme-3069f85a.js');
-var translationsContext = require('./translationsContext-09f33cc8.js');
+require('./index.styles-3ff5fc4e.js');
+var index$1 = require('./index-8e5eb06c.js');
+var index$2 = require('./index-57571b29.js');
+var index$5 = require('./index-ae2b7f10.js');
+require('./constants-e609d3aa.js');
+require('./Subot-f130357f.js');
+require('./utils-0697210e.js');
+var utils$1 = require('./utils-72403c5b.js');
+var index$3 = require('./index-b0eb606c.js');
+var theme = require('./theme-99d60665.js');
+var translationsContext = require('./translationsContext-17a2f0f9.js');
 require('string-format');
 require('@mantine/hooks');
-require('./index-958f67bb.js');
-require('./utils-da97b7ae.js');
-require('./index.styled-2ad9b370.js');
-require('./index-5f30931a.js');
-var utils = require('./utils-8aee541d.js');
+require('./index-cd2d590a.js');
+require('./utils-7fee6f4f.js');
+require('./index.styled-9cfaad5a.js');
+require('./index-81a02e46.js');
+var utils = require('./utils-b2499923.js');
 require('@mantine/dates');
-var usePlacesAutocomplete = require('./usePlacesAutocomplete-c73d655f.js');
-var index$4 = require('./index-a3d460fa.js');
+var usePlacesAutocomplete = require('./usePlacesAutocomplete-152d2e73.js');
+var index$4 = require('./index-9e6a0e2d.js');
 var uuid = require('uuid');
 var ReactDOM = require('react-dom');
-var cookieHelper = require('./cookieHelper-115e3b7b.js');
+var cookieHelper = require('./cookieHelper-e8f1d4ca.js');
 var dayjs = require('dayjs');
-var Close = require('./Close-b7a203d1.js');
+var Close = require('./Close-cc2a81fe.js');
 require('styled-components');
-require('./animation-1621b827.js');
+require('./animation-2c02cea6.js');
 require('react-keyed-flatten-children');
 require('@hhgtech/icons/other');
 require('@mantine/carousel');
 require('classnames');
-require('./useUniqueId-3b22c3ca.js');
+require('./useUniqueId-bf6075d3.js');
 require('@hhgtech/icons/core');
-require('./isProduction-253f0a63.js');
+require('./isProduction-b98e94b0.js');
 require('date-fns/locale');
 require('slugify');
 
@@ -463,7 +463,7 @@ const Component = ({ campaign, onClose: onCloseProp, onOtherSubmit, onSubmit, sh
         campaign_subot_id,
     });
     const [showOtpPhone, setShowOtpPhone] = React.useState(null);
-    const formRef = React.useRef();
+    const [formRef, setFormRef] = React.useState(null);
     const onClose = () => {
         if (showOtpPhone) {
             setShowOtpPhone(null);
@@ -489,7 +489,8 @@ const Component = ({ campaign, onClose: onCloseProp, onOtherSubmit, onSubmit, sh
             leadFormConfig,
             validatingEmailRef,
             validatingPhoneRef,
-            formRef,
+            formRef: { current: formRef },
+            setFormRef,
             locale,
             onClose,
             onOtherSubmit,
@@ -603,7 +604,7 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
                     className: cx('leadgen-control', classes.control), labelProps: {
                         htmlFor: id,
                     } }, form.getInputProps(value)),
-                    React__default["default"].createElement(index$1.Phone, { name: value, spellCheck: false, type: "tel", placeholder: placeholder, onChange: (v) => {
+                    React__default["default"].createElement(index$1.Phone, { name: value, spellCheck: false, type: "tel", placeholder: placeholder, value: form.getInputProps(value).value, onChange: (v) => {
                             form.setFieldValue(value, v);
                         }, 
                         // onBlur={(e) => inputOnBlur('tel', e)}
@@ -653,13 +654,17 @@ const Fields = ({ listBlockAdded, popupId, locale, onClose, onOtherSubmit, style
     })));
 };
 
-var useStyles$1 = core.createStyles(() => {
+var useStyles$1 = core.createStyles((theme) => {
     return {
         root: {},
         header: {},
         heading: {},
         description: {},
-        term: {},
+        term: {
+            a: {
+                color: theme.fn.primaryColor(),
+            },
+        },
         controlList: {},
         control: {},
         submitBtn: {},
@@ -672,9 +677,9 @@ const Heading = (_a) => {
     return heading ? (React__default["default"].createElement(index.Text, Object.assign({ size: "h3" }, rest), heading)) : null;
 };
 
-const FormComponent = ({ styles, className, classNames }) => {
+const FormComponent = ({ styles, className, classNames, fillInfo }) => {
     var _a;
-    const { listBlockAdded, leadFormConfig: { form, validateObj }, validatingEmailRef, validatingPhoneRef, formRef, onClose, onOtherSubmit, actionBlocks, locale, setShowOtpPhone, onSubmit, } = React.useContext(LeadGenComponentContext);
+    const { listBlockAdded, leadFormConfig: { form, validateObj }, validatingEmailRef, validatingPhoneRef, formRef, setFormRef, onClose, onOtherSubmit, actionBlocks, locale, setShowOtpPhone, onSubmit, } = React.useContext(LeadGenComponentContext);
     const { classes, cx } = useStyles$1(undefined, {
         name: 'LeadGen__FormComponent',
         styles,
@@ -743,8 +748,11 @@ const FormComponent = ({ styles, className, classNames }) => {
             })(e);
         }, 100);
     };
+    React.useEffect(() => {
+        form === null || form === void 0 ? void 0 : form.setValues(fillInfo);
+    }, [fillInfo]);
     return (React__default["default"].createElement(LeadFormProvider$1, { form: form },
-        React__default["default"].createElement(core.Box, { component: "form", ref: formRef, className: cx(className, classes.root), onSubmit: middlewareOnSubmit, styles: styles },
+        React__default["default"].createElement(core.Box, { component: "form", ref: (el) => el && setFormRef(el), className: cx(className, classes.root), onSubmit: middlewareOnSubmit, styles: styles },
             React__default["default"].createElement("div", { className: classes.header },
                 React__default["default"].createElement(Heading, { className: classes.heading }),
                 React__default["default"].createElement(Description, { className: classes.description })),
@@ -754,14 +762,11 @@ const FormComponent = ({ styles, className, classNames }) => {
                     }, listBlockAdded: listBlockAdded, locale: locale, onClose: onClose, onOtherSubmit: onOtherSubmit })),
             ((_a = actionBlocks === null || actionBlocks === void 0 ? void 0 : actionBlocks.submitBlock) === null || _a === void 0 ? void 0 : _a.isHide) ? null : (React__default["default"].createElement(React__default["default"].Fragment, null,
                 React__default["default"].createElement("div", { className: classes.term },
-                    React__default["default"].createElement("div", { className: "lead-modal__checkbox" },
-                        React__default["default"].createElement("input", { id: "lead-term-checkbox", className: `lead-modal__checkbox__input ${LEAD_CLASS}`, type: "checkbox", "aria-label": "Checkbox label", checked: checkedTerm, onChange: (e) => setCheckedTerm(e.currentTarget.checked) }),
-                        React__default["default"].createElement("div", { className: "lead-modal__checkbox__control", "aria-hidden": "true" })),
-                    React__default["default"].createElement("label", { htmlFor: "checkbox", className: "lead-modal__checkbox__label" },
-                        popUpTermAgreeText,
-                        ' ',
-                        React__default["default"].createElement("span", { style: { fontWeight: 'bold' } },
-                            React__default["default"].createElement("a", { target: "blank", href: popUpTermURL || 'https://hellobacsi.com/chinh-sach', rel: "noopener noreferrer", style: { textDecoration: 'none' } }, popUpTermText)))),
+                    React__default["default"].createElement(index$1.Checkbox, { label: React__default["default"].createElement("label", { htmlFor: "checkbox" },
+                            popUpTermAgreeText,
+                            ' ',
+                            React__default["default"].createElement("span", { style: { fontWeight: 'bold' } },
+                                React__default["default"].createElement("a", { target: "blank", href: popUpTermURL || 'https://hellobacsi.com/chinh-sach', rel: "noopener noreferrer", style: { textDecoration: 'none' } }, popUpTermText))), onChange: (e) => setCheckedTerm(e.currentTarget.checked) })),
                 React__default["default"].createElement(index$1.Button, { size: "md", id: "lead-submit", type: "submit", className: classes.submitBtn, disabled: !checkedTerm, loading: isSubmitLoading }, popUpSubmitText))))));
 };
 const Form = (props) => {
@@ -772,9 +777,11 @@ const Form = (props) => {
 var useStyles = core.createStyles(() => {
     return {
         root: {},
+        header: {},
         heading: {},
         description: {},
         control: {},
+        actions: {},
         submitBtn: {},
         resendOtp: {},
     };
@@ -888,8 +895,9 @@ const OtpBlockComponent = ({ otpData, onSuccess, autoSendWhenOpen, className, st
                 e.preventDefault();
                 submitOtp();
             }, className: cx(classes.root, className) },
-            React__default["default"].createElement(index$4.Heading, { tag: "h3", className: classes.heading }, t('lead.otp.title')),
-            React__default["default"].createElement(index.Text, { size: "p1", className: classes.description }, t('lead.otp.desc', { phone: displayPhone })),
+            React__default["default"].createElement("div", { className: classes.header },
+                React__default["default"].createElement(index$4.Heading, { tag: "h3", className: classes.heading }, t('lead.otp.title')),
+                React__default["default"].createElement(index.Text, { size: "p3", className: classes.description }, t('lead.otp.desc', { phone: displayPhone }))),
             React__default["default"].createElement(index$1.Input, { ref: inputRef, name: '_' + name + '-otp', spellCheck: false, type: "number", placeholder: "Enter OTP", className: classes.control, label: "Phone OTP", "data-control": "otp", withAsterisk: true, pattern: "[0-9]*", value: otp, maxLength: 6, onChange: (v) => {
                     setIsDirty(true);
                     setOtp(v);
@@ -898,26 +906,28 @@ const OtpBlockComponent = ({ otpData, onSuccess, autoSendWhenOpen, className, st
                     else
                         setErrorMsg(undefined);
                 }, error: isDirty ? errorMsg : undefined }),
-            React__default["default"].createElement(index$1.Button, { type: "submit", size: "md", color: "primary", className: classes.submitBtn, 
-                // onClick={() => submitOtp()}
-                disabled: !otp, loading: isSubmitLoading }, t('lead.otp.verify')),
-            React__default["default"].createElement(index$1.Button, { type: "button", size: "md", color: "transparent", className: classes.resendOtp, onClick: () => {
-                    sendOtp();
-                }, disabled: !!resendTimer }, t('lead.otp.resend', {
-                timer: resendTimer ? ` (${resendTimer}s)` : '',
-            })))));
+            React__default["default"].createElement("div", { className: classes.actions },
+                React__default["default"].createElement(index$1.Button, { type: "submit", size: "md", color: "primary", className: classes.submitBtn, 
+                    // onClick={() => submitOtp()}
+                    disabled: !otp, loading: isSubmitLoading }, t('lead.otp.verify')),
+                React__default["default"].createElement(index$1.Button, { type: "button", size: "md", color: "transparent", className: classes.resendOtp, onClick: () => {
+                        sendOtp();
+                    }, disabled: !!resendTimer }, t('lead.otp.resend', {
+                    timer: resendTimer ? ` (${resendTimer}s)` : '',
+                }))))));
 };
-const OtpBlock$1 = ({}) => {
+const OtpBlock$1 = (_a) => {
+    var rest = tslib_es6.__rest(_a, []);
     const { showOtpPhone, setShowOtpPhone, onSubmit, formRef, leadFormConfig: { form }, } = React.useContext(LeadGenComponentContext);
-    return showOtpPhone ? (React__default["default"].createElement(OtpBlockComponent, { otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
+    return showOtpPhone ? (React__default["default"].createElement(OtpBlockComponent, Object.assign({ otpData: showOtpPhone, autoSendWhenOpen: false, onSuccess: () => {
             setShowOtpPhone(null);
             onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formRef.current, form.values);
-        } })) : null;
+        } }, rest))) : null;
 };
 
 const Thankyou = ({ children, }) => {
     const { showThankyou } = React.useContext(LeadGenComponentContext);
-    return showThankyou ? typeof children(showThankyou) : null;
+    return showThankyou ? children(showThankyou) : null;
 };
 
 var enPH = {
@@ -2676,7 +2686,6 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
             document.body.classList.remove('noscroll');
             return;
         }
-        let isShowThanksYou = true;
         const thanksImg = showCampaign.thank_you_image || `${apiUrl}admin/img/thanksyou.png`;
         let thankTitle = (showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.popupThankyouTitle) || 'Thank you.';
         let thankDesc = (showCampaign === null || showCampaign === void 0 ? void 0 : showCampaign.extra_fields.popupThankyouDesc) || 'We appreciate your time!';
@@ -2696,14 +2705,17 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
             linkText = ((_k = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _k === void 0 ? void 0 : _k.value) || '';
             linkNewTab = ((_l = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _l === void 0 ? void 0 : _l.newtab) || false;
             linkUrl = ((_m = linkButtonBlock === null || linkButtonBlock === void 0 ? void 0 : linkButtonBlock.data) === null || _m === void 0 ? void 0 : _m.url) || '';
-            const curLayout = showCampaign.extra_fields.currentLayout;
+            // ALWAYS SHOW THANK YOU ON COMPOUND COMP
+            // const curLayout = showCampaign.extra_fields.currentLayout
             // TODO: newbuilder thank you
             // List layout not show thanks you
-            if (['SkinA', 'SkinB', 'Floating', 'Tab', 'CenterTab'].includes(curLayout)) {
-                isShowThanksYou = false;
-            }
+            // if (
+            //   ['SkinA', 'SkinB', 'Floating', 'Tab', 'CenterTab'].includes(curLayout)
+            // ) {
+            //   isShowThanksYou = false
+            // }
         }
-        if (isShowThanksYou) {
+        {
             setShowThankyou({
                 title: thankTitle,
                 titleAlign,
@@ -2715,9 +2727,6 @@ const _LeadGen = ({ apiUrl: apiUrlProp, siteDomain, siteId, locale, apiSubotUrl,
                 image: thanksImg,
             });
         }
-        else {
-            setShowThankyou(null);
-        }
         // Other
         // Init Insider Obj
         if (sessionStorage.getItem('insider_object')) {