@designcrowd/library.brand-page 5.16.42 → 5.16.43-ast-ai

package/lib/src/{CreatedOnBrandCrowd-de-de-2yOEYkJj.js → CreatedOnBrandCrowd-de-de-B-Oc1A1o.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-hXQaBPKF.js";
+import { _ as t } from "./lib-Cr89CnhI.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-C3ZcstVb.js → CreatedOnBrandCrowd-en-us-D5C-8hdn.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-hXQaBPKF.js";
+import { _ as t } from "./lib-Cr89CnhI.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-CUVbeolm.js → CreatedOnBrandCrowd-es-es-58ZSy8Zn.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-hXQaBPKF.js";
+import { _ as t } from "./lib-Cr89CnhI.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CWrEm5XF.js → CreatedOnBrandCrowd-fr-ca-Csqkn-I_.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-hXQaBPKF.js";
+import { _ as t } from "./lib-Cr89CnhI.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-CWrEm5XF.js → CreatedOnBrandCrowd-fr-fr-Csqkn-I_.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-hXQaBPKF.js";
+import { _ as t } from "./lib-Cr89CnhI.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-5WAjD7l3.js → CreatedOnBrandCrowd-pt-br-ILKVUj-T.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-hXQaBPKF.js";
+import { _ as t } from "./lib-Cr89CnhI.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-5WAjD7l3.js → CreatedOnBrandCrowd-pt-pt-ILKVUj-T.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-hXQaBPKF.js";
+import { _ as t } from "./lib-Cr89CnhI.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-B4b3caW2.js → CreatedOnDcom-de-de-B5x4Crpb.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-hXQaBPKF.js";
+import { _ as e } from "./lib-Cr89CnhI.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-DaLELZyT.js → CreatedOnDcom-en-us-DtufP1lJ.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-hXQaBPKF.js";
+import { _ as e } from "./lib-Cr89CnhI.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-p5JZJPXb.js → CreatedOnDcom-es-es-DJ0sw5dx.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-hXQaBPKF.js";
+import { _ as e } from "./lib-Cr89CnhI.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-DcaNqreO.js → CreatedOnDcom-fr-ca-DrMbvOz7.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-hXQaBPKF.js";
+import { _ as e } from "./lib-Cr89CnhI.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-DKzy6dez.js → CreatedOnDcom-fr-fr-B2EKyBz8.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-hXQaBPKF.js";
+import { _ as e } from "./lib-Cr89CnhI.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-DXK8qDlO.js → CreatedOnDcom-pt-br-SdOffbzb.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-hXQaBPKF.js";
+import { _ as M } from "./lib-Cr89CnhI.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-ChGL1q2P.js → CreatedOnDcom-pt-pt-3khFhgHk.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-hXQaBPKF.js";
+import { _ as M } from "./lib-Cr89CnhI.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/__fixtures__/brand-page-sample-data.js

@@ -97,6 +97,7 @@ export const context = {
         mediaSizes: MEDIA_SIZES.sizeThumb,
     },
     isCapturingPreview: false,
+    recaptchaSiteKey: undefined,
 };
 export const BScontext = {
     isTemplate: false,
@@ -119,6 +120,7 @@ export const BScontext = {
         mediaSizes: MEDIA_SIZES.sizeThumb,
     },
     isCapturingPreview: false,
+    recaptchaSiteKey: undefined,
 };
 export const logoTheme = {
     logoTextColor: {

package/lib/src/brand-page/clients/brand-page.client.d.ts

@@ -16,8 +16,8 @@ export interface CartForShopRequest {
     unitPrice: number;
 }
 declare const _default: {
-    addMailSubscriber: (brandPageToken: string, email: string, name?: string | undefined) => Promise<FormResult>;
-    submitContactForm: (brandPageToken: string, contentBlockId: string, values: ContactFormField[]) => Promise<FormResult>;
+    addMailSubscriber: (brandPageToken: string, email: string, name?: string | undefined, recaptchaToken?: string | undefined) => Promise<FormResult>;
+    submitContactForm: (brandPageToken: string, contentBlockId: string, values: ContactFormField[], recaptchaToken?: string | undefined) => Promise<FormResult>;
     getPaymentConfigStatusByPaymentConfigId: (paymentConfigId: string) => Promise<string>;
     getStoreProductsByBrandPageToken: (brandPageToken: string) => Promise<string>;
     createBrandPageCart: (request: {

package/lib/src/brand-page/clients/brand-page.client.js

@@ -1,12 +1,13 @@
 import axios from 'axios';
 import * as constants from '../constants';
 import * as csrfUtil from '../utils/csrf.util';
-const addMailSubscriber = async (brandPageToken, email, name) => {
+const addMailSubscriber = async (brandPageToken, email, name, recaptchaToken) => {
     try {
         const csrfToken = csrfUtil.getCsrfTokenFromMetaHeader();
         await axios.post(`/api/mailing-lists/${brandPageToken}`, {
             email,
             name,
+            recaptchaToken,
         }, {
             headers: {
                 'Content-Type': 'application/json',
@@ -28,12 +29,13 @@ const addMailSubscriber = async (brandPageToken, email, name) => {
         };
     }
 };
-const submitContactForm = async (brandPageToken, contentBlockId, values) => {
+const submitContactForm = async (brandPageToken, contentBlockId, values, recaptchaToken) => {
     try {
         const csrfToken = csrfUtil.getCsrfTokenFromMetaHeader();
         const formBody = {
             contentBlockId,
             fields: values,
+            recaptchaToken,
         };
         await axios.post(`/api/contact/${brandPageToken}`, formBody, {
             headers: {

package/lib/src/brand-page/components/contact-form/ContactForm.mixin.d.ts

@@ -28,7 +28,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: undefined;
     };
-}>, {}, {
+}>, {
+    recaptcha: {
+        isReady: import("vue").ComputedRef<boolean>;
+        initialise: (config: import("../../composables/recaptcha.composable").ReCaptchaConfig) => Promise<void>;
+        executeAsync: (action: string) => Promise<string | undefined>;
+        error: import("vue").ComputedRef<string | undefined>;
+        isLoading: import("vue").ComputedRef<boolean>;
+        siteKey: import("vue").ComputedRef<string>;
+    };
+}, {
     values: FieldValue[];
     hasSubmitted: boolean;
     isSubmitting: boolean;

package/lib/src/brand-page/components/contact-form/ContactForm.mixin.js

@@ -3,8 +3,9 @@ import { FORM_FIELD_TYPES } from '../../models';
 import { getEmailValidationError, getMessageValidationError, getNameValidationError, getPhoneValidationError, } from '../../utils';
 import brandPageClient from '../../clients/brand-page.client';
 import { isEmail } from '../../../utils/validator.util';
-import { ALIGN_CARD_CENTER, ALIGN_CARD_CENTER_IMAGE, ALIGN_CENTERED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, DISPLAY_STYLE_COLLAPSED, TEXT_ONLY, } from '../../constants';
+import { ALIGN_CARD_CENTER, ALIGN_CARD_CENTER_IMAGE, ALIGN_CENTERED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, DISPLAY_STYLE_COLLAPSED, RECAPTCHA_ACTION_CONTACT_FORM, TEXT_ONLY, } from '../../constants';
 import { getRenderText } from '../../utils';
+import { useReCaptcha } from '../../composables/recaptcha.composable';
 export default defineComponent({
     props: {
         context: {
@@ -29,6 +30,12 @@ export default defineComponent({
             default: undefined,
         },
     },
+    setup() {
+        const recaptcha = useReCaptcha();
+        return {
+            recaptcha,
+        };
+    },
     data: () => ({
         values: [],
         hasSubmitted: false,
@@ -136,6 +143,11 @@ export default defineComponent({
             field: f,
         }));
     },
+    mounted() {
+        if (this.context?.recaptchaSiteKey && !this.isPreview && this.recaptcha) {
+            this.recaptcha.initialise({ siteKey: this.context.recaptchaSiteKey });
+        }
+    },
     methods: {
         async submitContactForm() {
             this.validateFormValues();
@@ -152,12 +164,16 @@ export default defineComponent({
             let result;
             this.isSubmitting = true;
             try {
+                let recaptchaToken;
+                if (this.context?.recaptchaSiteKey && this.recaptcha?.isReady?.value) {
+                    recaptchaToken = await this.recaptcha.executeAsync(RECAPTCHA_ACTION_CONTACT_FORM);
+                }
                 result = await brandPageClient.submitContactForm(this.context.brandPageToken, this.viewModel.id, this.values.map((v) => ({
                     id: v.field.id,
                     name: v.field.name,
                     type: v.field.type,
                     value: v.value,
-                })));
+                })), recaptchaToken);
             }
             finally {
                 this.isSubmitting = false;

package/lib/src/brand-page/components/image-gallery/ImageGallery.stories.js

@@ -29,7 +29,8 @@ const context = {
     options: {
         mediaSizes: MEDIA_SIZES.sizeThumb,
     },
-    isCapturingPreview: false
+    isCapturingPreview: false,
+    recaptchaSiteKey: undefined,
 };
 export const Carousel = () => {
     return defineComponent({

package/lib/src/brand-page/components/images-section/ImagesSection.stories.js

@@ -29,7 +29,8 @@ const context = {
     options: {
         mediaSizes: MEDIA_SIZES.sizeThumb,
     },
-    isCapturingPreview: false
+    isCapturingPreview: false,
+    recaptchaSiteKey: undefined,
 };
 export const Images = () => {
     return defineComponent({

package/lib/src/brand-page/components/mailing-list/MailingList.mixin.d.ts

@@ -21,6 +21,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {
     mailingListTr: (key: any, valuesToInterpolate?: {}) => any;
+    recaptcha: {
+        isReady: import("vue").ComputedRef<boolean>;
+        initialise: (config: import("../../composables/recaptcha.composable").ReCaptchaConfig) => Promise<void>;
+        executeAsync: (action: string) => Promise<string | undefined>;
+        error: import("vue").ComputedRef<string | undefined>;
+        isLoading: import("vue").ComputedRef<boolean>;
+        siteKey: import("vue").ComputedRef<string>;
+    };
 }, {
     email: string;
     emailError: string | undefined;

package/lib/src/brand-page/components/mailing-list/MailingList.mixin.js

@@ -2,6 +2,8 @@ import { defineComponent } from 'vue';
 import brandPageClient from '../../clients/brand-page.client';
 import { getEmailValidationError } from '../../utils';
 import { contentSettingsTr, mailingListTr, } from '../../../composables/useTranslate';
+import { useReCaptcha } from '../../composables/recaptcha.composable';
+import { RECAPTCHA_ACTION_MAILING_LIST } from '../../constants';
 const MAX_NAME_LENGTH = 200;
 export default defineComponent({
     props: {
@@ -24,8 +26,10 @@ export default defineComponent({
         },
     },
     setup() {
+        const recaptcha = useReCaptcha();
         return {
             mailingListTr,
+            recaptcha,
         };
     },
     data() {
@@ -42,6 +46,9 @@ export default defineComponent({
     },
     mounted() {
         this.show = true;
+        if (this.context?.recaptchaSiteKey && !this.isPreview && this.recaptcha) {
+            this.recaptcha.initialise({ siteKey: this.context.recaptchaSiteKey });
+        }
     },
     computed: {
         hasNameError() {
@@ -107,14 +114,22 @@ export default defineComponent({
                 return;
             }
             this.isSubmitting = true;
-            const result = await brandPageClient.addMailSubscriber(this.brandPageToken, this.email, this.name === '' ? undefined : this.name);
-            this.isSubmitting = false;
-            if (!result.success) {
-                this.submitError = result.errMessage;
-                return;
+            try {
+                let recaptchaToken;
+                if (this.context?.recaptchaSiteKey && this.recaptcha?.isReady?.value) {
+                    recaptchaToken = await this.recaptcha.executeAsync(RECAPTCHA_ACTION_MAILING_LIST);
+                }
+                const result = await brandPageClient.addMailSubscriber(this.brandPageToken, this.email, this.name === '' ? undefined : this.name, recaptchaToken);
+                if (!result.success) {
+                    this.submitError = result.errMessage;
+                    return;
+                }
+                this.submitError = undefined;
+                this.hasSubscribed = result.success;
+            }
+            finally {
+                this.isSubmitting = false;
             }
-            this.submitError = undefined;
-            this.hasSubscribed = result.success;
         },
         validateName() {
             if (this.name.trim() === '') {

package/lib/src/brand-page/components/page/Page.mixin.d.ts

@@ -88,7 +88,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     scrollToLastContent(): void;
     onPageHeaderContainerClick(): void;
     onPageFooterContainerClick(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("on-logo-click" | "on-set-preview-styles" | "on-scroll-to-element" | "page-header-container-click" | "page-footer-container-click")[], "on-logo-click" | "on-set-preview-styles" | "on-scroll-to-element" | "page-header-container-click" | "page-footer-container-click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    onSaveContactWidgetClick(): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("on-logo-click" | "on-set-preview-styles" | "on-scroll-to-element" | "page-header-container-click" | "page-footer-container-click" | "save-contact-widget-click")[], "on-logo-click" | "on-set-preview-styles" | "on-scroll-to-element" | "page-header-container-click" | "page-footer-container-click" | "save-contact-widget-click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     context: {
         type: PropType<BrandPageContext>;
         required: true;
@@ -138,6 +139,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "onOn-scroll-to-element"?: ((...args: any[]) => any) | undefined;
     "onPage-header-container-click"?: ((...args: any[]) => any) | undefined;
     "onPage-footer-container-click"?: ((...args: any[]) => any) | undefined;
+    "onSave-contact-widget-click"?: ((...args: any[]) => any) | undefined;
 }>, {
     viewport: ViewportsType;
     isMobileDevice: boolean;

package/lib/src/brand-page/components/page/Page.mixin.js

@@ -55,6 +55,7 @@ export default defineComponent({
         'on-scroll-to-element',
         'page-header-container-click',
         'page-footer-container-click',
+        'save-contact-widget-click',
     ],
     setup(props) {
         return {
@@ -266,10 +267,12 @@ export default defineComponent({
         },
         shouldShowSaveContactWidget() {
             try {
-                if (this.context.isPreview ||
-                    this.context.options?.enableSaveContact === false ||
-                    !this.context.isBrandContact ||
-                    this.viewModel.saveContactSettings.isSavingEnabled === false) {
+                if ((!this.context.isPreview &&
+                    this.context.options?.enableSaveContact === false) ||
+                    !this.context.isBrandContact) {
+                    return false;
+                }
+                if (this.viewModel.saveContactSettings?.isSavingEnabled === false) {
                     return false;
                 }
                 const brandPageData = { pages: this.context?.pages || [] };
@@ -355,5 +358,11 @@ export default defineComponent({
             }
             this.$emit('page-footer-container-click');
         },
+        onSaveContactWidgetClick() {
+            if (!this.context.isPreview) {
+                return;
+            }
+            this.$emit('save-contact-widget-click');
+        },
     },
 });

package/lib/src/brand-page/components/payment/__fixtures__/request-payment.d.ts

@@ -12,6 +12,7 @@ export declare const context: {
     pages?: import("../../../view-models").PageViewModel[] | undefined;
     currentPageSlug?: string | undefined;
     runtimeEnvironment: string;
+    recaptchaSiteKey: string | undefined;
     pageTitle: string;
     customDomain: string | undefined;
     brandPageType: "default" | "brandSite" | "brandContact";

package/lib/src/brand-page/components/payment/__fixtures__/support-me.d.ts

@@ -12,6 +12,7 @@ export declare const context: {
     pages?: import("../../../view-models").PageViewModel[] | undefined;
     currentPageSlug?: string | undefined;
     runtimeEnvironment: string;
+    recaptchaSiteKey: string | undefined;
     pageTitle: string;
     customDomain: string | undefined;
     brandPageType: "default" | "brandSite" | "brandContact";

package/lib/src/brand-page/components/profile/Profile.stories.js

@@ -51,7 +51,8 @@ export const Sample = () => {
                 options: {
                     mediaSizes: MEDIA_SIZES.sizeThumb,
                 },
-                isCapturingPreview: false
+                isCapturingPreview: false,
+                recaptchaSiteKey: undefined,
             };
             return { viewModel, context };
         },

package/lib/src/brand-page/composables/recaptcha.composable.d.ts

@@ -0,0 +1,23 @@
+declare global {
+    interface Window {
+        grecaptcha: {
+            enterprise: {
+                ready: (callback: () => void) => void;
+                execute: (siteKey: string, options: {
+                    action: string;
+                }) => Promise<string>;
+            };
+        };
+    }
+}
+export interface ReCaptchaConfig {
+    siteKey: string;
+}
+export declare const useReCaptcha: () => {
+    isReady: import("vue").ComputedRef<boolean>;
+    initialise: (config: ReCaptchaConfig) => Promise<void>;
+    executeAsync: (action: string) => Promise<string | undefined>;
+    error: import("vue").ComputedRef<string | undefined>;
+    isLoading: import("vue").ComputedRef<boolean>;
+    siteKey: import("vue").ComputedRef<string>;
+};

package/lib/src/brand-page/composables/recaptcha.composable.js

@@ -0,0 +1,109 @@
+import { reactive, computed } from 'vue';
+const store = reactive({
+    isLoaded: false,
+    isLoading: false,
+    siteKey: '',
+    error: undefined,
+});
+const SCRIPT_ID = 'recaptcha-enterprise-script';
+const isBrowser = () => {
+    return typeof window !== 'undefined' && typeof document !== 'undefined';
+};
+const loadScript = (siteKey) => {
+    return new Promise((resolve, reject) => {
+        if (!isBrowser()) {
+            reject(new Error('reCAPTCHA can only be loaded in browser environment'));
+            return;
+        }
+        // Check if script already exists
+        const existingScript = document.getElementById(SCRIPT_ID);
+        if (existingScript) {
+            resolve();
+            return;
+        }
+        const script = document.createElement('script');
+        script.id = SCRIPT_ID;
+        script.src = `https://www.google.com/recaptcha/enterprise.js?render=${siteKey}`;
+        script.async = true;
+        script.defer = true;
+        script.onload = () => {
+            resolve();
+        };
+        script.onerror = () => {
+            reject(new Error('Failed to load reCAPTCHA script'));
+        };
+        document.head.appendChild(script);
+    });
+};
+export const useReCaptcha = () => {
+    const isReady = computed(() => store.isLoaded && !store.isLoading);
+    /**
+     * Initialize reCAPTCHA with the site key.
+     * Should be called once when the component mounts.
+     */
+    const initialise = async (config) => {
+        if (!isBrowser()) {
+            return;
+        }
+        if (store.isLoaded || store.isLoading) {
+            return;
+        }
+        if (!config.siteKey) {
+            store.error = 'reCAPTCHA site key is required';
+            return;
+        }
+        store.siteKey = config.siteKey;
+        store.isLoading = true;
+        store.error = undefined;
+        try {
+            await loadScript(config.siteKey);
+            store.isLoaded = true;
+        }
+        catch (err) {
+            store.error =
+                err instanceof Error ? err.message : 'Failed to load reCAPTCHA';
+        }
+        finally {
+            store.isLoading = false;
+        }
+    };
+    /**
+     * Execute reCAPTCHA and get a token for the specified action.
+     * @param action - The action name for reCAPTCHA (e.g., 'CONTACT_FORM_SUBMIT')
+     * @returns Promise<string | undefined> - The reCAPTCHA token or undefined if failed
+     */
+    const executeAsync = async (action) => {
+        if (!isBrowser()) {
+            return undefined;
+        }
+        if (!store.isLoaded || !store.siteKey) {
+            return undefined;
+        }
+        try {
+            return await new Promise((resolve, reject) => {
+                window.grecaptcha.enterprise.ready(async () => {
+                    try {
+                        const token = await window.grecaptcha.enterprise.execute(store.siteKey, { action });
+                        resolve(token);
+                    }
+                    catch (err) {
+                        reject(err);
+                    }
+                });
+            });
+        }
+        catch (err) {
+            store.error =
+                err instanceof Error ? err.message : 'Failed to execute reCAPTCHA';
+            return undefined;
+        }
+    };
+    return {
+        isReady,
+        initialise,
+        executeAsync,
+        error: computed(() => store.error),
+        isLoading: computed(() => store.isLoading),
+        siteKey: computed(() => store.siteKey),
+    };
+};

package/lib/src/brand-page/constants/misc.constants.d.ts

@@ -51,6 +51,9 @@ export declare const STATUS_CODE_CONFLICT = 409;
 export declare const MESSAGE_ADD_MAIL_SUBSCRIBER_CONFLICT: () => any;
 export declare const MESSAGE_ADD_MAIL_SUBSCRIBER_FAILED: () => any;
 export declare const MESSAGE_CONTACT_MESSAGE_FAILED: () => any;
+export declare const RECAPTCHA_ACTION_MAILING_LIST = "MAILING_LIST_SUBSCRIBE";
+export declare const RECAPTCHA_ACTION_CONTACT_FORM = "CONTACT_FORM_SUBMIT";
+export declare const RECAPTCHA_MIN_SCORE = 0.5;
 export declare const stripeDefaultStyle: {
     readonly base: {
         readonly color: "#7d8284";

package/lib/src/brand-page/constants/misc.constants.js

@@ -61,6 +61,10 @@ export const STATUS_CODE_CONFLICT = 409;
 export const MESSAGE_ADD_MAIL_SUBSCRIBER_CONFLICT = () => errorTr('alreadySubscribedError');
 export const MESSAGE_ADD_MAIL_SUBSCRIBER_FAILED = () => errorTr('mailingListError');
 export const MESSAGE_CONTACT_MESSAGE_FAILED = () => errorTr('contactMessageError');
+// reCAPTCHA constants
+export const RECAPTCHA_ACTION_MAILING_LIST = 'MAILING_LIST_SUBSCRIBE';
+export const RECAPTCHA_ACTION_CONTACT_FORM = 'CONTACT_FORM_SUBMIT';
+export const RECAPTCHA_MIN_SCORE = 0.5;
 export const stripeDefaultStyle = {
     base: {
         color: '#7d8284',

package/lib/src/brand-page/models/brand-page-context.model.d.ts

@@ -59,6 +59,8 @@ export interface BrandPageContext {
     currentPageSlug?: string;
     runtimeEnvironment: string;
     stripePublishableKey: string | undefined;
+    /** reCAPTCHA Enterprise site key for spam protection */
+    recaptchaSiteKey: string | undefined;
     pageTitle: string;
     customDomain: string | undefined;
     brandPageType: BrandPageType;

package/lib/src/brand-page/utils/index.d.ts

@@ -8,6 +8,7 @@ export * from './image.util';
 export * from './font-loader.util';
 export * from './aspect-ratio.util';
 export * from './context.util';
+export * from './color.util';
 export * from './personalisation.util';
 export * from './migration.util';
 export * from '../../utils/validator.util';

package/lib/src/brand-page/utils/index.js

@@ -8,6 +8,7 @@ export * from './image.util';
 export * from './font-loader.util';
 export * from './aspect-ratio.util';
 export * from './context.util';
+export * from './color.util';
 export * from './personalisation.util';
 export * from './migration.util';
 export * from '../../utils/validator.util';

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.d.ts

@@ -196,6 +196,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             isVisible: boolean;
         }): void;
         setSelectedTabName(payload: import("../../../lib").SetSelectedTabNamePayload): void;
+        setSelectedSettingsSection(payload: {
+            sectionName?: string | undefined;
+        }): void;
     }>;
     userStore: import("pinia").Store<"brandPageMakerUser", import("../../stores").UserState, {}, {
         setUserState(payload: {