@hhgtech/hhg-components 1.29.511-beta-5 → 1.29.511-beta-7

package/build/esm/interfaces/constants/index.d.ts

@@ -22,6 +22,7 @@ export declare const STATIC_PAGES: {
 export declare const UP_BASEPATH = "user";
 export declare const LOCALE_HAS_COMMUNITY_SITE: string[];
 export declare const HAS_CLINITY_DOWNLOAD_SITE: string[];
+export declare const LOCALE_HAS_CART_CARE_SITE: string[];
 export declare const ECOM_LOCALES: string[];
 export declare const DATA_PRIVACY_LOCALES: string[];
 export declare const CARE_LOCALES: string[];
@@ -92,6 +93,7 @@ export declare const DATE_FNS_DATE_FORMAT = "dd-MM-yyyy";
 export declare const ZINDEX_SSO = 9999999;
 export declare const ZINDEX_HEADER = 305;
 export declare const VIDEO_DETAIL_TEMP_STORAGE = "video_item_detail";
+export declare const HHG_CART_CARE_STORE_KEY = "hhg_cart_care_store_key";
 export declare enum EMERGENCY_STATUS {
     UNAVAILABLE = 0,
     AVAILABLE = 1

package/build/esm/{labelSorting-e93ae92a.js → labelSorting-0a2e2662.js}

@@ -1,8 +1,8 @@
 import React__default, { useContext } from 'react';
-import { T as Text } from './index-00c53d29.js';
-import './translationsContext-c163dd2e.js';
-import { T as TogetherComponentGlobalContext } from './utils-a931e837.js';
-import { L as LabelSortPin, b as TreePopoverMenu } from './treePopoverMenu-44d601d5.js';
+import { T as Text } from './index-7be94e11.js';
+import './translationsContext-2946252c.js';
+import { T as TogetherComponentGlobalContext } from './utils-72d1957e.js';
+import { L as LabelSortPin, b as TreePopoverMenu } from './treePopoverMenu-2c7f2e8c.js';
 
 var img$1 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3cpath stroke='%233E3F58' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m8 14 4 4 4-4M16 10l-4-4-4 4'/%3e%3c/svg%3e";
 var MBSortBy = img$1;

package/build/esm/lead/LeadGen.type.d.ts

@@ -44,6 +44,12 @@ export type LeadGenSubscriptionBoxProps = Omit<LeadGenFormProps, 'className' | '
     image?: string;
     title?: string | ReactNode;
     submitText?: string;
+    desktopBanner?: string;
+    mobileBanner?: string;
+    buttonTextColor?: string;
+    buttonColor?: string;
+    isBannerStyle?: boolean;
+    subscriptionPhoneType?: string;
 };
 export type TrackingFormProps = {
     formRef?: HTMLFormElement;

package/build/esm/lead/LeadGenSubscriptionBox/LeadGenContext.d.ts

@@ -42,6 +42,10 @@ export type LeadGenContextProps = LeadGenProps & {
     subscriptionIcon: string;
     subscriptionTitle: string;
     subscriptionPhoneType: string;
+    desktopBanner: string;
+    mobileBanner: string;
+    buttonTextColor: string;
+    buttonColor: string;
 };
 export declare const LeadGenContext: React.Context<LeadGenContextProps>;
 export declare const LeadGenContextProvider: (props: PropsWithChildren<LeadGenProps>) => React.JSX.Element;
@@ -71,4 +75,8 @@ export declare const useLeadGenContext: () => {
     subscriptionIcon: string;
     subscriptionTitle: string;
     subscriptionPhoneType: string;
+    desktopBanner: string;
+    mobileBanner: string;
+    buttonTextColor: string;
+    buttonColor: string;
 };

package/build/esm/lead/LeadGenSubscriptionBox/LeadGenSubscriptionBox.styled.d.ts

@@ -14,8 +14,15 @@ export declare const StyledLeadGenSubscriptionBoxHeader: import("@emotion/styled
 export declare const StyledLeadGenSubscriptionBox: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;
+} & {
+    isBannerStyle: boolean;
+    buttonColor: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledLeadGenSubscriptionBoxA: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledBannerPicture: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/build/esm/lead.js

@@ -1,53 +1,54 @@
-import { _ as __rest, a as __awaiter } from './tslib.es6-57d9b6a7.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-765cd1ab.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, rem, AspectRatio, Badge, Tooltip, Portal, Transition, Overlay } from '@mantine/core';
+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-8c8e4947.js';
+import { B as BEARER_TOKEN_COOKIE } from './index-d9bcf7cb.js';
 import { getCookie, setCookie } from './miscCookieHelper.js';
-import { t as translationsMap$1 } from './translationsProvider-d4c489ef.js';
-import { u as useTranslations } from './index-95be7399.js';
-import { T as TranslationsContext } from './translationsContext-c163dd2e.js';
-import { M as MediaQueries, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-02025286.js';
-import { T as Text } from './index-00c53d29.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-03c0d9af.js';
-import { D as DatePicker } from './index-79a5731a.js';
-import { B as Button } from './index-1cebed66.js';
-import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './index-8321e658.js';
-import './index.styles-be71dd60.js';
+import { t as translationsMap$1 } from './translationsProvider-8a202570.js';
+import { u as useTranslations } from './index-d8e770df.js';
+import { T as TranslationsContext } from './translationsContext-2946252c.js';
+import { M as MediaQueries, B as Breakpoints, b as getWrapperDomWithSelector, a as getPopupWrapperDom } from './utils-62e23dd0.js';
+import { T as Text } from './index-7be94e11.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-c674aac7.js';
+import { D as DatePicker } from './index-136e021f.js';
+import { B as Button } from './index-9f6bc48a.js';
+import { G as GlobalTextStyleNew, C as CustomStylesType, F as FontWeight } from './index-c8bd0222.js';
+import './index.styles-d312817d.js';
 import { useIntersection } from '@mantine/hooks';
-import './index-7df689c8.js';
-import './index-72c301e2.js';
-import { M as MAPPED_LOCALE } from './utils-62bea119.js';
+import './index-571f0eb3.js';
+import './index-fb4b1a55.js';
+import { M as MAPPED_LOCALE } from './utils-673530b6.js';
 import { DateInput } from '@mantine/dates';
-import { L as LOCALE_SPECS, Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-8f49c7dc.js';
-import { C as COMMON_DATE_TRANSLATE_KEY } from './index-d8317608.js';
-import './index-6d01a4d3.js';
-import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-dca25288.js';
-import { H as Heading$1 } from './index-f3913667.js';
-import { L as LOCALE } from './Locale-ed6ca791.js';
+import { L as LOCALE_SPECS, Z as ZINDEX_SSO, I as ISO_FORMAT } from './index-5b99c353.js';
+import { C as COMMON_DATE_TRANSLATE_KEY } from './index-805c2478.js';
+import './index-fc4c0bc8.js';
+import { u as usePlacesAutocomplete, G as GOOGLE_API_KEY } from './usePlacesAutocomplete-529ccb42.js';
+import { H as Heading$1 } from './index-c718b6f3.js';
+import { L as LOCALE } from './Locale-4cefde67.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 { u as useTextStyles, C as ChoiceField, T as TextField } from './index-d71d52bd.js';
-import { T as TogetherComponentGlobalContext } from './utils-a931e837.js';
-import { M as MantineProvider } from './index-0f90ff83.js';
-import { i as isVideo } from './index-e775c9bc.js';
-import { I as ImageWrap, u as useScreenSize } from './index-0ac38f0e.js';
+import { h as hexToRgb } from './utils-f7fe1590.js';
+import { u as useTextStyles, C as ChoiceField, T as TextField } from './index-6f4bd448.js';
+import { T as TogetherComponentGlobalContext } from './utils-72d1957e.js';
+import { M as MantineProvider } from './index-91ae98de.js';
+import { i as isVideo } from './index-2907bd04.js';
+import { I as ImageWrap, u as useScreenSize } from './index-3b33844c.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-e9542f6b.js';
+import { I as InputDate } from './InputDate-f8d15504.js';
 import { Carousel } from '@mantine/carousel';
-import { c as currencyFormat } from './utils-84ddccef.js';
-import { D as DrawerComponent } from './index-89f4f3b9.js';
-import { C as Close } from './Close-900118a8.js';
+import { c as currencyFormat } from './utils-a2c23d6e.js';
+import { D as DrawerComponent } from './index-07457b1b.js';
+import { C as Close } from './Close-40e6da23.js';
 import './constantsIsProduction.js';
-import './normalizeLink-f81893c3.js';
+import './normalizeLink-bcf51bb6.js';
 import './i18n-values/en-PH.js';
 import './i18n-values/hi-IN.js';
 import './i18n-values/id-ID.js';
@@ -61,19 +62,20 @@ 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-a5038fa4.js';
+import './shared-c0d14fdc.js';
 import 'classnames';
-import './useUniqueId-146268cb.js';
+import './useUniqueId-8cff4912.js';
 import './constantsSite.js';
 import '@emotion/react';
 import '@mantine/notifications';
 import 'date-fns/locale';
 import './constantsRiskScreener.js';
-import './index-45086853.js';
-import 'slugify';
+import './constants-1e52b67d.js';
 import 'string-format';
+import './index-65c2dbc3.js';
+import 'slugify';
 import './togetherApiPaths.js';
-import './constants-66a62572.js';
+import './constants-8d3e90c9.js';
 import 'vaul';
 
 const LeadGenComponentContext = createContext({});
@@ -2056,6 +2058,10 @@ const LeadGenContext = createContext({
     subscriptionIcon: '',
     subscriptionTitle: '',
     subscriptionPhoneType: '',
+    desktopBanner: '',
+    mobileBanner: '',
+    buttonTextColor: '',
+    buttonColor: '',
 });
 const LeadGenContextProvider = (props) => {
     const { campaign_code: campaignCodeProps, apiSsoUrl, apiLeadUrl, apiSubotUrl, locale: localeProps, forceCampaign: forceCampaignProps, extraValues, articleId = 1, categoryList, siteDomain: site_domain, children, userInfo } = props, restProps = __rest(props, ["campaign_code", "apiSsoUrl", "apiLeadUrl", "apiSubotUrl", "locale", "forceCampaign", "extraValues", "articleId", "categoryList", "siteDomain", "children", "userInfo"]);
@@ -2068,6 +2074,10 @@ const LeadGenContextProvider = (props) => {
         subscriptionPhoneType: '',
         subcriptionCateId: '',
         subcriptionCateName: '',
+        desktopBanner: '',
+        mobileBanner: '',
+        buttonTextColor: '',
+        buttonColor: '',
     });
     const locale = useMemo(() => {
         return localeProps || LOCALE['PhilippinesEnglish'];
@@ -2192,12 +2202,12 @@ const LeadGenContextProvider = (props) => {
                 var _a;
                 const { _data } = res || {};
                 const { item = [], btn_type = 'zalo' } = _data || {};
-                const { icon, content, cate_id } = ((_a = item.filter((i) => i.cate_id !== 'default')) === null || _a === void 0 ? void 0 : _a[0]) || {};
+                const { icon, content, cate_id, desktop_banner, mobile_banner, button_text_color, background_color, } = ((_a = item.filter((i) => i.cate_id !== 'default')) === null || _a === void 0 ? void 0 : _a[0]) || {};
                 LeadLog('** LeadGen SubscriptionBox subscription_icon : ', icon);
                 LeadLog('** LeadGen SubscriptionBox subscription_title : ', content);
                 setSubscriptionInfo((prev) => {
                     var _a, _b;
-                    return (Object.assign(Object.assign({}, prev), { subscriptionIcon: icon, subscriptionTitle: content, subscriptionPhoneType: btn_type, subcriptionCateId: cate_id, subcriptionCateName: (_b = (_a = category_list.filter((i) => i.termId == cate_id)) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name }));
+                    return (Object.assign(Object.assign({}, prev), { subscriptionIcon: icon, subscriptionTitle: content, subscriptionPhoneType: btn_type, subcriptionCateId: cate_id, subcriptionCateName: (_b = (_a = category_list.filter((i) => i.termId == cate_id)) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name, desktopBanner: desktop_banner || '', mobileBanner: mobile_banner || '', buttonTextColor: button_text_color || '', buttonColor: background_color || '' }));
                 });
                 setForceCampaign(formatCampaignDetail({
                     id: 6993,
@@ -2682,19 +2692,7 @@ const StyledLeadGenSubscriptionBox = styled.div `
   );
   border-radius: 12px;
   margin-inline: auto;
-  &[data-phone-type='zalo'] {
-    background: linear-gradient(
-      180.71deg,
-      #7bc2ff -18.54%,
-      #e3f2ff 17.12%,
-      #ffffff 99.25%
-    );
-  }
-  &[data-phone-type]:not([data-phone-type='zalo']) {
-    .leadgen-btn {
-      background-color: #2cb742 !important;
-    }
-  }
+
   .leadgen-form_inputs {
     .leadgen-form_input {
       width: 100%;
@@ -2739,6 +2737,51 @@ const StyledLeadGenSubscriptionBox = styled.div `
         0px 4px 8px 0px #0000000a;
     }
   }
+
+  ${(props) => props.isBannerStyle
+    ? `
+      .leadgen-btn {
+        font-weight: 600;
+      }
+      ${MediaQueries.mbUp} {
+        box-shadow: 0px 0px 1px 0px #0000000A, 0px 0px 2px 0px #0000000F, 0px 4px 8px 0px #0000000A;
+        border: 0;
+        background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
+        linear-gradient(
+          180.71deg,
+          rgba(${hexToRgb(props.buttonColor)}, 0.8) -18.54%,
+          rgba(${hexToRgb(props.buttonColor)}, 0.1) 17.12%,
+          rgba(${hexToRgb(props.buttonColor)}, 0) 99.25%
+        );
+        .leadgen-subscription_box_body {
+          flex-direction: column;
+          align-items: flex-end;
+          gap: 16px;
+          .leadgen-btn {
+            padding-left: 38px;
+            padding-right: 38px;
+            min-height: 48px;
+          }
+        }
+        .leadgen-subscription_box_form {
+          width: 100%; 
+        }
+      }
+    `
+    : `
+      &[data-phone-type='zalo'] {
+        background: linear-gradient(
+          180.71deg,
+          #7bc2ff -18.54%,
+          #e3f2ff 17.12%,
+          #ffffff 99.25%
+        );
+      }
+      &[data-phone-type]:not([data-phone-type='zalo']) {
+        .leadgen-btn {
+          background-color: #2cb742 !important;
+        }
+      }`}
 `;
 const StyledLeadGenSubscriptionBoxA = styled.div `
   .leadgen-form_input {
@@ -2754,7 +2797,18 @@ const StyledLeadGenSubscriptionBoxA = styled.div `
       }
     }
   }
-`;
+`;
+const StyledBannerPicture = styled.picture ``;
+
+const WhatsAppOutline = (_a) => {
+    var { size } = _a, rest = __rest(_a, ["size"]);
+    return (React__default.createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 22 21", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest),
+        React__default.createElement("path", { d: "M11 .11a9.93 9.93 0 0 0-5.022 1.367A10.1 10.1 0 0 0 2.302 5.21 10.3 10.3 0 0 0 .96 10.305a10.3 10.3 0 0 0 1.352 5.093l-1.365 5.3 5.311-1.427a9.92 9.92 0 0 0 8.803.336 10.05 10.05 0 0 0 3.617-2.752 10.2 10.2 0 0 0 2.06-4.082c.371-1.501.4-3.07.085-4.584a10.25 10.25 0 0 0-1.906-4.158 10.1 10.1 0 0 0-3.512-2.888A9.9 9.9 0 0 0 11.001.11m5.906 16.173a8.264 8.264 0 0 1-10.42 1.139l-3.085.83.789-3.057a8.57 8.57 0 0 1-.441-9.102 8.4 8.4 0 0 1 3.366-3.297 8.25 8.25 0 0 1 8.954.766 8.46 8.46 0 0 1 2.775 3.823 8.6 8.6 0 0 1 .311 4.736 8.5 8.5 0 0 1-2.25 4.162", fill: "#25d366" }),
+        React__default.createElement("path", { d: "M16.03 12.96q.001.25-.041.5a3 3 0 0 1-.122.491c-.124.357-.803.793-.803.793a2.56 2.56 0 0 1-2.041.365 5 5 0 0 1-.336-.083c-.11-.033-.392-.123-.392-.123a12 12 0 0 0-.347-.107 7 7 0 0 1-1.246-.515c-.918-.506-1.917-1.412-1.917-1.412a11.4 11.4 0 0 1-1.597-1.776 7.5 7.5 0 0 1-.643-1.198l-.144-.338a14 14 0 0 1-.164-.382c-.043-.107-.12-.328-.12-.328a3 3 0 0 1-.11-.4 3 3 0 0 1-.044-.369c-.035-.647.282-1.328.282-1.328.349-.732.687-.9.687-.9q.228-.104.467-.173.237-.075.485-.099.076-.007.147.013c.128.035.398.514.398.514.083.129.228.369.228.369.146.239.268.43.268.43.121.194.235.364.235.364.023.027.131.17.131.17a2 2 0 0 1 .163.24q.05.093.06.198c.008.14-.178.363-.178.363a4 4 0 0 1-.409.411 5 5 0 0 0-.41.397c-.186.208-.181.335-.181.335a.6.6 0 0 0 .043.156c.04.093.067.141.067.141.027.048.106.163.106.163.08.116.087.13.087.13.366.58.802 1.112 1.298 1.584.717.65 1.698 1.131 1.698 1.131.015.006.137.073.137.073.121.068.171.09.171.09.05.022.146.051.146.051q.076.027.158.027c.125-.007.308-.219.308-.219q.185-.218.343-.457a4 4 0 0 1 .357-.457c.198-.212.336-.22.336-.22q.105 0 .2.038.132.06.255.137l.182.113c.182.096.383.197.383.197.204.102.454.222.454.222.25.12.386.19.386.19.499.218.546.343.546.343q.027.07.034.145", fill: "#25d366" })));
+};
+WhatsAppOutline.defaultProps = {
+    size: 24,
+};
 
 const NoData = ({ className, style }) => {
     return (React__default.createElement("svg", { width: "64", height: "55", viewBox: "0 0 64 55", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style },
@@ -3013,7 +3067,7 @@ const LeadGenForm = forwardRef((props, ref) => {
 const LEADGEN_ORDER_INPUT_WRAPPER = ['label', 'input', 'description', 'error'];
 
 const LeadGenSubscriptionBoxA = (props) => {
-    const { loading, image, title, submitText, locale, blocks, form, rules, onFinish, } = props;
+    const { loading, image, title, submitText, locale, blocks, form, rules, onFinish, isBannerStyle, buttonTextColor, buttonColor, desktopBanner, mobileBanner, subscriptionPhoneType, } = props;
     const formRef = useRef();
     const imageComp = useMemo(() => {
         if (!image) {
@@ -3026,14 +3080,36 @@ const LeadGenSubscriptionBoxA = (props) => {
         return (React__default.createElement(Text, { size: "h4", weight: "regular", className: "leadgen-title", dangerouslySetInnerHTML: { __html: title } }));
     }, [title]);
     return (React__default.createElement(StyledLeadGenSubscriptionBoxA, { className: "subcription_box_A" },
-        React__default.createElement(StyledLeadGenSubscriptionBoxHeader, { className: "leadgen-subscription_box_header" },
+        isBannerStyle ? (React__default.createElement(AspectRatio, { ratio: 375 / 213, sx: (theme) => ({
+                marginInline: -16,
+                marginTop: -16,
+                maxWidth: 'none',
+                [theme.fn.largerThan('sm')]: {
+                    borderTopLeftRadius: 12,
+                    borderTopRightRadius: 12,
+                    overflow: 'hidden',
+                    '&:before': {
+                        paddingBottom: `${(213 / 704) * 100}%`,
+                    },
+                },
+            }) },
+            React__default.createElement(StyledBannerPicture, null,
+                React__default.createElement("source", { media: `(min-width: ${Breakpoints.BREAK_POINT_TABLET}px)`, srcSet: desktopBanner }),
+                React__default.createElement("img", { loading: "lazy", src: mobileBanner, alt: title, width: "100%", height: "auto" })))) : (React__default.createElement(StyledLeadGenSubscriptionBoxHeader, { className: "leadgen-subscription_box_header" },
             titleComp,
-            imageComp),
+            imageComp)),
         React__default.createElement(StyledLeadGenSubscriptionBoxBody, { className: "leadgen-subscription_box_body" },
             React__default.createElement(LeadGenForm, { ref: formRef, form: form, rules: rules, blocks: blocks, locale: locale, onFinish: onFinish, className: "leadgen-subscription_box_form" }),
-            React__default.createElement(Button, { disabled: loading, loading: loading, size: "lg", onClick: () => {
+            React__default.createElement(Button, { disabled: loading, loading: loading, size: 'lg', color: buttonColor, onClick: () => {
                     formRef.current.submit();
-                }, className: "leadgen-btn leadgen-btn_action", fullWidth: true }, submitText))));
+                }, className: "leadgen-btn leadgen-btn_action", fullWidth: true, styles: {
+                    label: Object.assign({}, (buttonTextColor && {
+                        color: buttonTextColor,
+                    })),
+                    leftIcon: {
+                        marginRight: 4,
+                    },
+                }, leftIcon: subscriptionPhoneType === 'whatsapp' && (React__default.createElement(WhatsAppOutline, { size: 22, color: buttonTextColor })) }, submitText))));
 };
 
 const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, categoryId, }) => {
@@ -3041,7 +3117,7 @@ const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, ca
     const { image, extra_fields, id: campaign_id, bot_id: campaign_subot_id = [], ThankYouBlock, } = forceCampaign || {};
     const { textBlocks, listBlockAdded, actionBlocks } = extra_fields || {};
     const { submitBlock } = actionBlocks || {};
-    const { apiLeadUrl, subscriptionIcon, subscriptionTitle, subscriptionPhoneType, submitSubscriptionBox, onFinish, impression, } = useLeadGenContext();
+    const { apiLeadUrl, subscriptionIcon, subscriptionTitle, subscriptionPhoneType, desktopBanner, mobileBanner, buttonTextColor, buttonColor, submitSubscriptionBox, onFinish, impression, } = useLeadGenContext();
     const { t } = useTranslations();
     const { action: { pushNotifications }, } = useContext(TogetherComponentGlobalContext);
     const [loading, setLoading] = useState(false);
@@ -3063,6 +3139,7 @@ const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, ca
             t('leadgen.message.title.default');
     }, [subscriptionTitle, (_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 { image: thankyouImage, title: thankyouTitle, description: thankyouDescription, button: thankyouButton, } = ThankYouBlock || {};
+    const isBannerStyle = !!desktopBanner && !!mobileBanner;
     const middlewareOnSubmit = useCallback((values) => __awaiter(void 0, void 0, void 0, function* () {
         const newValues = {
             subscription_title,
@@ -3148,9 +3225,9 @@ const LeadGenSubscriptionBoxWithoutMemo = ({ locale, userInfo, forceCampaign, ca
         userInfo === null || userInfo === void 0 ? void 0 : userInfo.phone,
     ]);
     return (React__default.createElement(ImpressionTrackingWrapper, { dependency: categoryId, onImpression: () => impression('impression') },
-        React__default.createElement(StyledLeadGenSubscriptionBox, { "data-phone-type": subscriptionPhoneType, "data-type": "subscription_box_A" },
+        React__default.createElement(StyledLeadGenSubscriptionBox, { "data-phone-type": subscriptionPhoneType, "data-type": "subscription_box_A", isBannerStyle: isBannerStyle, buttonColor: buttonColor },
             showThankyou && (React__default.createElement(LeadGenThankYou, { image: Object.assign(Object.assign({}, thankyouImage), { src: thankyouImage.src || `${apiLeadUrl}admin/img/thanksyou.png` }), title: thankyouTitle, description: thankyouDescription, button: thankyouButton })),
-            !showThankyou && (React__default.createElement(LeadGenSubscriptionBoxA, { loading: loading, image: subscriptionIcon || image, title: subscription_title, submitText: (_c = submitBlock === null || submitBlock === void 0 ? void 0 : submitBlock.data) === null || _c === void 0 ? void 0 : _c.value, blocks: listBlockAdded, locale: locale, form: form, rules: validateObj, onFinish: middlewareOnSubmit })))));
+            !showThankyou && (React__default.createElement(LeadGenSubscriptionBoxA, { loading: loading, image: subscriptionIcon || image, title: subscription_title, submitText: (_c = submitBlock === null || submitBlock === void 0 ? void 0 : submitBlock.data) === null || _c === void 0 ? void 0 : _c.value, blocks: listBlockAdded, locale: locale, form: form, rules: validateObj, onFinish: middlewareOnSubmit, isBannerStyle: isBannerStyle, desktopBanner: desktopBanner, mobileBanner: mobileBanner, buttonTextColor: buttonTextColor, buttonColor: buttonColor, subscriptionPhoneType: subscriptionPhoneType })))));
 };
 const LeadGenSubscriptionBox$1 = memo(LeadGenSubscriptionBoxWithoutMemo);
 

package/build/esm/{logoIcon-efb264f5.js → logoIcon-5edabffb.js}

@@ -1,6 +1,6 @@
 import React__default, { memo, useMemo } from 'react';
-import { C as CommonGAssets } from './index-6d01a4d3.js';
-import { I as ImageWrap } from './index-0ac38f0e.js';
+import { C as CommonGAssets } from './index-fc4c0bc8.js';
+import { I as ImageWrap } from './index-3b33844c.js';
 
 const _LogoIcon = ({ type, width, height, isLight }) => {
     const data = useMemo(() => {

package/build/esm/mantine.js

@@ -1,47 +1,47 @@
-import { D as DEBOUNCED_TIME, j as StyledSliderWrapper, k as StyledSlider } from './index-03c0d9af.js';
-export { l as Accordion, b as Anchor, c as AspectRatio, A as Avatar, B as Breadcrumbs, a as Carousel, f as CentralCarousel, d as Checkbox, g as ChipButton, e as ErrorLabel, I as Input, O as OTP, P as Phone, n as PhoneInput, o as Popover, R as Radio, S as Select, m as emotionCache } from './index-03c0d9af.js';
-export { D as DatePicker } from './index-79a5731a.js';
-export { T as Text } from './index-00c53d29.js';
-import { B as Button } from './index-1cebed66.js';
-export { B as Button } from './index-1cebed66.js';
-export { I as Indicator } from './index-66b1e69c.js';
-export { T as TextArea } from './index-fc37671d.js';
-export { M as Modal } from './index-8b7dec72.js';
-import { _ as __rest } from './tslib.es6-57d9b6a7.js';
+import { D as DEBOUNCED_TIME, j as StyledSliderWrapper, k as StyledSlider } from './index-c674aac7.js';
+export { l as Accordion, b as Anchor, c as AspectRatio, A as Avatar, B as Breadcrumbs, a as Carousel, f as CentralCarousel, d as Checkbox, g as ChipButton, e as ErrorLabel, I as Input, O as OTP, P as Phone, n as PhoneInput, o as Popover, R as Radio, S as Select, m as emotionCache } from './index-c674aac7.js';
+export { D as DatePicker } from './index-136e021f.js';
+export { T as Text } from './index-7be94e11.js';
+import { B as Button } from './index-9f6bc48a.js';
+export { B as Button } from './index-9f6bc48a.js';
+export { I as Indicator } from './index-9954003d.js';
+export { T as TextArea } from './index-9da30c62.js';
+export { M as Modal } from './index-6608ad01.js';
+import { _ as __rest } from './tslib.es6-765cd1ab.js';
 import React__default, { useState, useEffect } from 'react';
 import { Badge as Badge$1, LoadingOverlay as LoadingOverlay$1, clsx, Title, Text, Button as Button$1 } from '@mantine/core';
 import { theme } from './miscTheme.js';
-export { S as Spoiler } from './index-fa3d601b.js';
+export { S as Spoiler } from './index-7de5ecf0.js';
 import { useDebouncedValue } from '@mantine/hooks';
-export { S as Switch } from './index-0f02f53a.js';
-export { M as MantineProvider } from './index-0f90ff83.js';
-export { C as CustomStylesType, F as FontWeight, T as TemplateProvider } from './index-8321e658.js';
-export { M as MAPPED_LOCALE, a as getHeadingStyles, g as getMantineThemeOverride, s as showNotification, t as themeColors, u as useMantineLocale } from './index-7df689c8.js';
-export { T as Tabs } from './index-72c301e2.js';
+export { S as Switch } from './index-63cfa782.js';
+export { M as MantineProvider } from './index-91ae98de.js';
+export { C as CustomStylesType, F as FontWeight, T as TemplateProvider } from './index-c8bd0222.js';
+export { M as MAPPED_LOCALE, a as getHeadingStyles, g as getMantineThemeOverride, s as showNotification, t as themeColors, u as useMantineLocale } from './index-571f0eb3.js';
+export { T as Tabs } from './index-fb4b1a55.js';
 import '@hhgtech/icons/other';
-import './index-6d01a4d3.js';
+import './index-fc4c0bc8.js';
 import './constantsDomainLocales.js';
-import './Locale-ed6ca791.js';
+import './Locale-4cefde67.js';
 import './constantsIsProduction.js';
-import './index-0ac38f0e.js';
-import './utils-02025286.js';
+import './index-3b33844c.js';
+import './utils-62e23dd0.js';
 import '@emotion/styled';
 import '@mantine/carousel';
-import './shared-a5038fa4.js';
+import './shared-c0d14fdc.js';
 import 'classnames';
 import 'uuid';
-import './useUniqueId-146268cb.js';
+import './useUniqueId-8cff4912.js';
 import './constantsSite.js';
-import './index-d8317608.js';
+import './index-805c2478.js';
 import '@emotion/react';
 import '@hhgtech/icons/core';
 import '@mantine/dates';
-import './index-8f49c7dc.js';
+import './index-5b99c353.js';
 import 'date-fns/locale';
 import './constantsRiskScreener.js';
-import './index.styles-be71dd60.js';
-import './index-95be7399.js';
-import './translationsContext-c163dd2e.js';
+import './index.styles-d312817d.js';
+import './index-d8e770df.js';
+import './translationsContext-2946252c.js';
 import 'dayjs';
 import '@mantine/notifications';
 

package/build/esm/misc.js

@@ -1,37 +1,37 @@
-export { a as ageGenerate } from './ageGenerate-1e779de0.js';
-export { h as fadeIn, a as slideInDown, b as slideInLeft, c as slideInRight, s as slideInUp, e as slideOutDown, f as slideOutLeft, g as slideOutRight, d as slideOutUp } from './animation-dc6fa73e.js';
+export { a as ageGenerate } from './ageGenerate-19f1c161.js';
+export { h as fadeIn, a as slideInDown, b as slideInLeft, c as slideInRight, s as slideInUp, e as slideOutDown, f as slideOutLeft, g as slideOutRight, d as slideOutUp } from './animation-79c7d557.js';
 export { deleteCookie, getCookie, setCookie } from './miscCookieHelper.js';
 import 'react';
 import '@mantine/core';
-import './index-7df689c8.js';
-import './index-8321e658.js';
-export { a as abbreviateNumber } from './number-08f4c45d.js';
-export { d as getCareApiDomain, g as getCurrentBaseUrl, a as getCurrentSsoUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain } from './normalizeLink-f81893c3.js';
+import './index-571f0eb3.js';
+import './index-c8bd0222.js';
+export { a as abbreviateNumber } from './number-d0896c07.js';
+export { d as getCareApiDomain, g as getCurrentBaseUrl, a as getCurrentSsoUrl, c as getDiscoverApiDomain, b as getTogetherApiDomain } from './normalizeLink-bcf51bb6.js';
 export { MBTheme, theme } from './miscTheme.js';
-export { B as Breakpoints, M as MediaQueries, S as Screens, d as convertDay, f as formatUrlWithPageParam, g as getBoundariesFromMediaQueryKey, a as getPopupWrapperDom, b as getWrapperDomWithSelector, m as makeParams, c as safeEncodeURI, e as sleep, s as startCase, t as toggleNoScroll } from './utils-02025286.js';
+export { B as Breakpoints, M as MediaQueries, S as Screens, d as convertDay, f as formatUrlWithPageParam, g as getBoundariesFromMediaQueryKey, a as getPopupWrapperDom, b as getWrapperDomWithSelector, m as makeParams, c as safeEncodeURI, e as sleep, s as startCase, t as toggleNoScroll } from './utils-62e23dd0.js';
 export { formatHealthTool, getDynamicHealthTool, getDynamicHealthToolWithCache } from './miscGetDynamicHealthTool.js';
 export { getSocialList } from './miscGetSocialList.js';
-export { c as convertLocalizedStringToNumber, f as formatPhoneNumber, l as localizeNumberFormat } from './localizeNumberFormat-d871721b.js';
+export { c as convertLocalizedStringToNumber, f as formatPhoneNumber, l as localizeNumberFormat } from './localizeNumberFormat-f60eea99.js';
 export { ScreenSizeContext, ScreenSizeContextProvider, getWindowSizeGroups } from './miscScreenSizeContext.js';
-export { f as formatPill } from './dataTransform-61b4b185.js';
+export { f as formatPill } from './dataTransform-09b57241.js';
 import 'dayjs';
 import '@emotion/react';
-import './tslib.es6-57d9b6a7.js';
-import './index-d8317608.js';
-import './Locale-ed6ca791.js';
+import './tslib.es6-765cd1ab.js';
+import './index-805c2478.js';
+import './Locale-4cefde67.js';
 import '@mantine/notifications';
-import './index-8f49c7dc.js';
+import './index-5b99c353.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsDomainLocales.js';
 import './constantsRiskScreener.js';
 import './constantsIsProduction.js';
-import './index-6d01a4d3.js';
-import './shared-a5038fa4.js';
-import './core-ee0f8041.js';
-import './WhatsApp-a556f152.js';
-import './index-09ae70cf.js';
-import './index-45086853.js';
+import './index-fc4c0bc8.js';
+import './shared-c0d14fdc.js';
+import './core-d0da8647.js';
+import './WhatsApp-579b412c.js';
+import './index-7a67ff29.js';
+import './index-65c2dbc3.js';
 import 'js-cookie';
 import 'uuid';
 import 'react-phone-number-input';

package/build/esm/miscGetDynamicHealthTool.js

@@ -1,8 +1,8 @@
-import { a as __awaiter } from './tslib.es6-57d9b6a7.js';
-import { n as normalizeLinkSlash, c as getDiscoverApiDomain } from './normalizeLink-f81893c3.js';
-import { g as getDataWithCache } from './core-ee0f8041.js';
+import { a as __awaiter } from './tslib.es6-765cd1ab.js';
+import { n as normalizeLinkSlash, c as getDiscoverApiDomain } from './normalizeLink-bcf51bb6.js';
+import { g as getDataWithCache } from './core-d0da8647.js';
 import './constantsDomainLocales.js';
-import './Locale-ed6ca791.js';
+import './Locale-4cefde67.js';
 import './constantsIsProduction.js';
 
 const formatHealthTool = (healthTool, locale) => {

package/build/esm/miscGetSocialList.js

@@ -1,12 +1,12 @@
 import React__default from 'react';
-import { _ as __rest } from './tslib.es6-57d9b6a7.js';
-import { W as WhatsApp, I as Instagram } from './WhatsApp-a556f152.js';
-import { S as SocialType } from './index-d8317608.js';
-import { g as getHelloSitesUrl } from './index-09ae70cf.js';
-import { C as CommonGAssets } from './index-6d01a4d3.js';
-import { L as LOCALE } from './Locale-ed6ca791.js';
-import './index-45086853.js';
-import './index-8f49c7dc.js';
+import { _ as __rest } from './tslib.es6-765cd1ab.js';
+import { W as WhatsApp, I as Instagram } from './WhatsApp-579b412c.js';
+import { S as SocialType } from './index-805c2478.js';
+import { g as getHelloSitesUrl } from './index-7a67ff29.js';
+import { C as CommonGAssets } from './index-fc4c0bc8.js';
+import { L as LOCALE } from './Locale-4cefde67.js';
+import './index-65c2dbc3.js';
+import './index-5b99c353.js';
 import 'date-fns/locale';
 import './constantsSite.js';
 import './constantsDomainLocales.js';

package/build/esm/miscScreenSizeContext.js

@@ -1,6 +1,6 @@
 import React__default, { createContext, useState, useEffect, useMemo } from 'react';
 import throttle from 'lodash/throttle';
-import { B as Breakpoints } from './utils-02025286.js';
+import { B as Breakpoints } from './utils-62e23dd0.js';
 
 const ScreenSizeContext = createContext({
     isInit: true,

package/build/esm/mobileBottomNavigation.js

@@ -1,13 +1,13 @@
-import { _ as __rest } from './tslib.es6-57d9b6a7.js';
+import { _ as __rest } from './tslib.es6-765cd1ab.js';
 import React__default from 'react';
-import { M as MobileBottomNavigationIcon, S as StyledMobileBottomNavigation } from './MobileBottomNavigationIcon-1fabd4cc.js';
-import './index-00c53d29.js';
+import { M as MobileBottomNavigationIcon, S as StyledMobileBottomNavigation } from './MobileBottomNavigationIcon-ce5f2071.js';
+import './index-7be94e11.js';
 import '@mantine/core';
-import './index-8321e658.js';
+import './index-c8bd0222.js';
 import './miscTheme.js';
 import '@emotion/react';
 import '@emotion/styled';
-import './utils-02025286.js';
+import './utils-62e23dd0.js';
 
 const MobileBottomNavigationWrapper = (_a) => {
     var { children, isCollapsed = false, template = 'homepage', refObject, height = 56 } = _a, rest = __rest(_a, ["children", "isCollapsed", "template", "refObject", "height"]);