@designcrowd/library.brand-page 5.19.1 → 5.19.2

package/lib/src/{CreatedOnBrandCrowd-de-de-BmeMc9oz.js → CreatedOnBrandCrowd-de-de-Ekmn0O3s.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-CQNdm_6P.js → CreatedOnBrandCrowd-en-us-BjeXlKTS.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-BrmHWeAM.js → CreatedOnBrandCrowd-es-es-rpNINAMY.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CaIyjTXl.js → CreatedOnBrandCrowd-fr-ca-BL4nSaLj.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-CaIyjTXl.js → CreatedOnBrandCrowd-fr-fr-BL4nSaLj.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-BClE0Nd9.js → CreatedOnBrandCrowd-pt-br-K0r4FyYq.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-BClE0Nd9.js → CreatedOnBrandCrowd-pt-pt-K0r4FyYq.js}

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

package/lib/src/{CreatedOnDcom-de-de-CkrdlPqK.js → CreatedOnDcom-de-de-0XYyEKYc.js}

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

package/lib/src/{CreatedOnDcom-en-us-D33J9qky.js → CreatedOnDcom-en-us-E8hvwiMd.js}

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

package/lib/src/{CreatedOnDcom-es-es-BsmInngw.js → CreatedOnDcom-es-es-pRuCd7xX.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-DOXlsRea.js → CreatedOnDcom-fr-ca-Bu4V3jpn.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-SfFYLtyn.js → CreatedOnDcom-fr-fr-CCcrGNz2.js}

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

package/lib/src/{CreatedOnDcom-pt-br-DcWeuZUy.js → CreatedOnDcom-pt-br-1GTvaLKd.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-DZsZZ4iX.js → CreatedOnDcom-pt-pt-CTIYW10X.js}

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

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

@@ -547,6 +547,7 @@ export interface SaveContactOptions {
 }
 export declare class BrandPageModel {
     v: number;
+    userPromptContentKey?: string;
     styles: PageStyles;
     /** @deprecated */
     headerStyles?: AbstractPageHeaderStyles;

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

@@ -400,6 +400,9 @@ export class PageFooterMobile extends AbstractPageFooterStyles {
 export class BrandPageModel {
     // Model version
     v;
+    // AI personalisation key persisted with the draft so previews survive login/checkout-back/
+    // refresh - content is retrieved by this token (user-agnostic), not regenerated (bp-5742).
+    userPromptContentKey;
     styles;
     /** @deprecated */
     headerStyles;

package/lib/src/brand-page/utils/personalisation.util.js

@@ -206,15 +206,59 @@ const getPersonalisationValueAsync = async (section, property) => {
     }
     return { value: propertyValue, section };
 };
+// The userPrompt AI content generation only populates these content-bearing sections
+// (see GenerateAiDesignMakerContentService / GenerateWebsiteContentService - About,
+// Information, Profile, Media). Sections like email/website/phone are never generated, so
+// blocks whose role points at an ungenerated section fall back to this pool.
+const PERSONALISATION_FALLBACK_ROLES = [
+    'profile',
+    'about',
+    'information',
+    'media',
+];
+// "Effectively empty" = no renderable content (ungenerated userPrompt sections like
+// email/website/phone). A section that has data but lacks one property is NOT empty - it
+// intentionally keeps its original content.
+const isSectionEffectivelyEmpty = (section) => {
+    if (!section) {
+        return true;
+    }
+    return (!section.title &&
+        !section.name &&
+        !section.url &&
+        !section.description &&
+        !section.descriptionShort &&
+        !section.ctaTitle &&
+        !section.imageUrls?.length &&
+        !section.shapes?.length &&
+        !section.items?.length &&
+        !section.mainShapesCollection?.tall?.length &&
+        !section.mainShapesCollection?.square?.length &&
+        !section.mainShapesCollection?.wide?.length);
+};
+// Resolve a property from a specific role's section. Returns null when that section is
+// ungenerated (effectively empty) or cannot supply the property, so the caller can try the
+// next role.
+const resolvePersonalisationValueForRoleAsync = async (role, property, personalisation) => {
+    const key = `${role}Section`;
+    const section = personalisation[key];
+    if (isSectionEffectivelyEmpty(section)) {
+        return null;
+    }
+    const { value, section: updatedSection, valuesToUpdate, } = await getPersonalisationValueAsync(section, property);
+    if (value === undefined || value === null) {
+        return null;
+    }
+    return {
+        value,
+        personalisation: { ...personalisation, [key]: updatedSection },
+        valuesToUpdate,
+    };
+};
 const getPersonalisationValueFromPropertyAsync = async (propertyKey, propertyValue, personalisationRole, personalisationOverride, personalisation, contentType) => {
     if (!personalisationRole || personalisationOverride === 'none') {
         return { value: undefined, personalisation };
     }
-    const matchingValue = Object.entries(personalisation).find(([key]) => key === `${personalisationRole}Section`);
-    if (!matchingValue) {
-        return { value: undefined, personalisation };
-    }
-    const section = matchingValue[1];
     const mapping = getPersonalisationMappingForContentType(contentType);
     const matchingProperty = Object.entries(mapping).find(([, value]) => value.includes(propertyKey));
     if (!matchingProperty) {
@@ -225,15 +269,29 @@ const getPersonalisationValueFromPropertyAsync = async (propertyKey, propertyVal
         brandPageType: personalisation.type,
         isSvgShape: typeof propertyValue === 'string' && propertyValue.endsWith('.svg'),
     });
-    const { value, section: updatedSection, valuesToUpdate, } = await getPersonalisationValueAsync(section, property);
-    return {
-        value,
-        personalisation: {
-            ...personalisation,
-            [`${personalisationRole}Section`]: updatedSection,
-        },
-        valuesToUpdate,
-    };
+    const primaryKey = `${personalisationRole}Section`;
+    const primarySection = personalisation[primaryKey];
+    // When the block's own section has content, use it as-is - this preserves existing
+    // behaviour, including legitimately keeping the original when that section lacks a
+    // specific property (e.g. no items, or an invalid shape).
+    if (!isSectionEffectivelyEmpty(primarySection)) {
+        const { value, section: updatedSection, valuesToUpdate, } = await getPersonalisationValueAsync(primarySection, property);
+        return {
+            value,
+            personalisation: { ...personalisation, [primaryKey]: updatedSection },
+            valuesToUpdate,
+        };
+    }
+    // The block's section was never generated - fall back to the first populated section that
+    // can supply this property, so it doesn't render the "should be AI generated" placeholder.
+    // Never reached when the section exists (above) or all are populated (AI Website Builder).
+    for (const role of PERSONALISATION_FALLBACK_ROLES) {
+        const resolved = await resolvePersonalisationValueForRoleAsync(role, property, personalisation);
+        if (resolved) {
+            return resolved;
+        }
+    }
+    return { value: undefined, personalisation };
 };
 const applyPersonalisationToBrandPageContentsRecursiveAsync = async (personalisation, mappingType, content, personalisationRole) => {
     let isApplied = false;

package/lib/src/brand-page-maker/components/action-bar/ActionBar.mixin.d.ts

@@ -127,7 +127,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page/models").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page/models").PageModel[];
             sections: import("../../../shared/page-settings/store").PageSettingsStateSections;

package/lib/src/brand-page-maker/components/admin-background-settings/AdminBackgroundSettings.mixin.d.ts

@@ -251,6 +251,12 @@ declare const _default: import("vue").DefineComponent<{}, {
         setUserPersonalisationData({ personalisationData, }: {
             personalisationData: import("../../../brand-page").UserPersonalisationContent[];
         }): void;
+        setUserPromptContentKey({ userPromptContentKey, }: {
+            userPromptContentKey: string | undefined;
+        }): void;
+        setShowAiTemplatesTab({ showAiTemplatesTab, }: {
+            showAiTemplatesTab: boolean;
+        }): void;
         onBackgroundChanged(): void;
         onContentChanged(): void;
         onStyleChanged(): void;

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

@@ -20,6 +20,8 @@ export interface BrandPageMakerViewModel {
     initialCategories: InitialCategories;
     personalisation?: UserPersonalisationContent[];
     isPersonalisationEnabled?: boolean;
+    userPromptContentKey?: string;
+    showAiTemplatesTab?: boolean;
     brandPageType?: BrandPageType;
     businessName?: string;
     industry?: string;
@@ -172,7 +174,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page").PageModel[];
             sections: import("@shared/page-settings/store").PageSettingsStateSections;
@@ -953,6 +955,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setUserPersonalisationData({ personalisationData, }: {
             personalisationData: UserPersonalisationContent[];
         }): void;
+        setUserPromptContentKey({ userPromptContentKey, }: {
+            userPromptContentKey: string | undefined;
+        }): void;
+        setShowAiTemplatesTab({ showAiTemplatesTab, }: {
+            showAiTemplatesTab: boolean;
+        }): void;
         onBackgroundChanged(): void;
         onContentChanged(): void;
         onStyleChanged(): void;
@@ -1099,6 +1107,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             initialSearchTerm: string;
             onSearchTermChanged?: import("@shared/template-settings/store").OnSearchTermChangedCallback | undefined;
         }): void;
+        setAiTemplateKeywords(payload: {
+            aiTemplateKeywords: string;
+        }): void;
         notifySearchTermChanged(searchTerm: string | undefined): void;
         clearTemplates(): void;
         getTemplateByTemplateId(id: string): import("@shared/template-settings/models").TemplateSettingsTemplate | undefined;

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

@@ -150,6 +150,8 @@ export default defineComponent({
             templateCategories: this.viewModel.templateCategories,
             personalisationData: this.viewModel.personalisation,
             isPersonalisationEnabled: this.viewModel.isPersonalisationEnabled || false,
+            userPromptContentKey: this.viewModel.userPromptContentKey,
+            showAiTemplatesTab: this.viewModel.showAiTemplatesTab || false,
             brandPageType: this.viewModel.brandPageType,
             businessName: this.viewModel.businessName,
             industry: this.viewModel.industry,

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.js

@@ -179,6 +179,7 @@ const InitialiseMakerStores = (options) => {
         isContextualUpgradeModalVisible: false,
         gettyVideos: [],
         templateSearchTerm: undefined,
+        aiTemplateKeywords: undefined,
     });
     userStore.setUserState({
         isAdmin: options.isAdmin,

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

@@ -116,7 +116,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("../../../lib").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("../../stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("../../stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("../../../lib").PageModel[];
             sections: import("../../../shared/page-settings/store").PageSettingsStateSections;

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

@@ -636,7 +636,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page").PageModel[];
             sections: import("@shared/page-settings/store").PageSettingsStateSections;

package/lib/src/brand-page-maker/components/brandpage-settings/ReplaceImageSettingsForBrandPageSettings.mixin.d.ts

@@ -122,7 +122,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("../../../brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("../../../brand-page").PageModel[];
             sections: import("../../../shared/page-settings/store").PageSettingsStateSections;

package/lib/src/brand-page-maker/components/seo-settings/SeoPageSettings.mixin.d.ts

@@ -400,7 +400,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("../../../brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("../../../brand-page").PageModel[];
             sections: import("../../../shared/page-settings/store").PageSettingsStateSections;

package/lib/src/brand-page-maker/components/seo-settings/UrlSettings.mixin.d.ts

@@ -401,7 +401,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("../../../brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("../../../brand-page").PageModel[];
             sections: import("../../../shared/page-settings/store").PageSettingsStateSections;

package/lib/src/brand-page-maker/components/social-share/SocialShare.mixin.d.ts

@@ -132,7 +132,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("../../../brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("../../../brand-page").PageModel[];
             sections: import("../../../shared/page-settings/store").PageSettingsStateSections;

package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="types/lodash-shims" />
 import type { PropType } from 'vue';
 import type { BrandPageContext, BrandPageViewModel, LogoImageModel, LogoTemplateImageModel, LogoTheme, UserPersonalisation } from '@brand-page';
-import { type TemplateSettingsTemplate } from '@shared/template-settings/models';
+import type { TemplateSettingsTemplate } from '@shared/template-settings/models';
 import type { DebounceHandle } from 'lodash.debounce';
 interface TemplatePreviewData {
     containerStyle: BrandPageCssStyle;
@@ -68,7 +68,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isAdmin: import("vue").ComputedRef<boolean>;
     userToken: import("vue").ComputedRef<string | undefined>;
     isBrandSite: import("vue").ComputedRef<boolean>;
-    selectedTab: import("vue").ComputedRef<string>;
     renderAsImage: import("vue").ComputedRef<boolean>;
     brandPageMakerUserStore: import("pinia").Store<"brandPageMakerUser", import("@brand-page-maker/stores").UserState, {}, {
         setUserState(payload: {
@@ -452,7 +451,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page").PageModel[];
             sections: import("../../../shared/page-settings/store").PageSettingsStateSections;

package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.js

@@ -2,7 +2,6 @@ import { computed, defineComponent } from 'vue';
 import { BRAND_PAGE_TYPES, MEDIA_SIZES, VIEWPORTS } from '@brand-page';
 import { applyLogoThemeToBrandPageModel, applyUserPersonalisationToBrandPageModelAsync, getBrandPageViewModelFromBrandPageModel, } from '@brand-page/utils';
 import { STYLE_THEME_KEYS } from '@brand-page/constants';
-import { TEMPLATE_TABS, } from '@shared/template-settings/models';
 import debounce from 'lodash.debounce';
 import { MOBILE_HEIGHT, MOBILE_WIDTH } from '@brand-page-maker/constants';
 import { useBrandPageContainerStore, useBrandPageMakerStore, useBrandPageMakerUserStore, } from '@brand-page-maker/stores';
@@ -24,7 +23,6 @@ export default defineComponent({
             isAdmin: computed(() => brandPageMakerUserStore.isAdmin),
             userToken: computed(() => brandPageMakerUserStore.userToken),
             isBrandSite: computed(() => brandPageMakerStore.brandPageType === BRAND_PAGE_TYPES.brandSite),
-            selectedTab: computed(() => templateSettingsStore.selectedTab.key),
             renderAsImage: computed(() => templateSettingsStore.renderAsImage),
             brandPageMakerUserStore,
             brandPageContainerStore,
@@ -171,11 +169,24 @@ export default defineComponent({
             if (!previewImageUrl) {
                 return '';
             }
-            if (this.selectedTab === TEMPLATE_TABS.AI && this.template.contentKey) {
-                if (this.userToken) {
-                    previewImageUrl += `&contentKey=${this.template.contentKey}&userToken=${this.userToken}`;
+            const isAlreadyPersonalised = previewImageUrl.includes('contentKey=') ||
+                previewImageUrl.includes('userPromptContentKey=');
+            if (this.isPersonalisable &&
+                this.template.contentKey &&
+                !isAlreadyPersonalised) {
+                if (this.userToken && !this.template.usesUserPromptContentKey) {
+                    previewImageUrl += `&contentKey=${this.template.contentKey}`;
+                    // The backend already bakes userToken into brand-site preview URLs. Only add
+                    // it when missing - two userToken params parse as an array and the preview
+                    // renderer rejects it ("userToken must be a string type") (bp-5765).
+                    if (!previewImageUrl.includes('userToken=')) {
+                        previewImageUrl += `&userToken=${this.userToken}`;
+                    }
                 }
                 else {
+                    // userPromptContentKey resolves from the userPrompt S3 bucket (real AI images).
+                    // Post-purchase designs with a userPrompt key route here too, NOT through the
+                    // userToken/regular-bucket branch above which holds placeholders (bp-5454).
                     previewImageUrl += `&userPromptContentKey=${this.template.contentKey}`;
                 }
             }

package/lib/src/brand-page-maker/stores/ai-checkpoint/ai-checkpoint-store.d.ts

@@ -8,6 +8,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
         userMessageId: string;
         model: {
             v: number;
+            userPromptContentKey?: string | undefined;
             styles: {
                 backgroundStyles: {
                     style: {
@@ -5116,6 +5117,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
         userMessageId: string;
         model: {
             v: number;
+            userPromptContentKey?: string | undefined;
             styles: {
                 backgroundStyles: {
                     style: {
@@ -10230,6 +10232,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
         userMessageId: string;
         model: {
             v: number;
+            userPromptContentKey?: string | undefined;
             styles: {
                 backgroundStyles: {
                     style: {
@@ -15338,6 +15341,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
         userMessageId: string;
         model: {
             v: number;
+            userPromptContentKey?: string | undefined;
             styles: {
                 backgroundStyles: {
                     style: {
@@ -20452,6 +20456,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
         userMessageId: string;
         model: {
             v: number;
+            userPromptContentKey?: string | undefined;
             styles: {
                 backgroundStyles: {
                     style: {
@@ -25560,6 +25565,7 @@ export declare const useAiCheckpointStore: import("pinia").StoreDefinition<"aiCh
         userMessageId: string;
         model: {
             v: number;
+            userPromptContentKey?: string | undefined;
             styles: {
                 backgroundStyles: {
                     style: {

package/lib/src/brand-page-maker/stores/brandpage-container/brand-page-container-store.d.ts

@@ -75,6 +75,7 @@ export type InitialisePayload = Omit<BrandPageContainerState, 'customDomain' | '
     logoDraftAssets: LogoDraftAsset[];
     gettyVideos: GettyVideoEditorViewModelResponse[];
     templateSearchTerm: string | undefined;
+    aiTemplateKeywords: string | undefined;
     onSearchTermChanged?: OnSearchTermChangedCallback;
 };
 export declare const BRANDPAGE_STATUS: Readonly<{

package/lib/src/brand-page-maker/stores/brandpage-container/brand-page-container-store.js

@@ -137,6 +137,9 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                 initialSearchTerm: payload.templateSearchTerm ?? '',
                 onSearchTermChanged: payload.onSearchTermChanged,
             });
+            templateSettingsStore.setAiTemplateKeywords({
+                aiTemplateKeywords: payload.aiTemplateKeywords ?? '',
+            });
             brandPageMakerStore.setSelectedTemplateId({
                 templateId: this.designTemplateToken,
             });

package/lib/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.d.ts

@@ -20,6 +20,8 @@ export interface InitialisePayload {
     templateCategories: TemplateCategory[];
     personalisationData?: UserPersonalisationContent[];
     isPersonalisationEnabled: boolean;
+    userPromptContentKey?: string;
+    showAiTemplatesTab?: boolean;
     businessName: string | undefined;
     industry: string | undefined;
     layout?: string;
@@ -231,7 +233,7 @@ export declare const useBrandPageMakerStore: import("pinia").StoreDefinition<"br
         brandPageType: BrandPageType;
     }): void;
     initialiseStoresByBrandPageModelAsync(brandPageModel: BrandPageModel): Promise<void>;
-    initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: InitialisePayload): Promise<void>;
+    initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: InitialisePayload): Promise<void>;
     initialisePages({ pages, sections, }: {
         pages: PageModel[];
         sections: PageSettingsStateSections;

package/lib/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.js

@@ -824,7 +824,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             transformToRTE(pageSettingsStore, externalEditor, undefined, undefined, TEXT_STYLE_TYPES.paragraphs, textStyles.textStyleOptions.paragraphs.style);
             externalEditor.destroy();
         },
-        async initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride = false, }) {
+        async initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab = false, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride = false, }) {
             const brandPageContainerStore = useBrandPageContainerStore();
             const userStore = useBrandPageMakerUserStore();
             const uiStore = useUiStore();
@@ -895,6 +895,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                         personalisationData: personalisationData,
                     });
                 }
+                uiStore.setUserPromptContentKey({ userPromptContentKey });
+                uiStore.setShowAiTemplatesTab({ showAiTemplatesTab });
                 templateSettingsStore.setTemplateCategories({
                     categories: templateCategories,
                 });
@@ -1227,6 +1229,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
             const shopStore = useShopConfigStore();
             const pageNavigationStore = usePageNavigationStore();
+            const uiStore = useUiStore();
             const pages = pageSettingsStore.pages.map((p) => ({
                 ...p,
                 contents: p.contents.map((c) => c.settings.content),
@@ -1240,6 +1243,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             const pageNavStructure = pageNavigationStore.nav;
             return {
                 v: GetLatestModelVersion(),
+                userPromptContentKey: uiStore.userPromptContentKey,
                 pages,
                 styles: {
                     logoStyles,

package/lib/src/brand-page-maker/stores/ui/ui-store.d.ts

@@ -23,6 +23,12 @@ export declare const useUiStore: import("pinia").StoreDefinition<"ui", UIRootSta
     setUserPersonalisationData({ personalisationData, }: {
         personalisationData: UserPersonalisationContent[];
     }): void;
+    setUserPromptContentKey({ userPromptContentKey, }: {
+        userPromptContentKey: string | undefined;
+    }): void;
+    setShowAiTemplatesTab({ showAiTemplatesTab, }: {
+        showAiTemplatesTab: boolean;
+    }): void;
     onBackgroundChanged(): void;
     onContentChanged(): void;
     onStyleChanged(): void;

package/lib/src/brand-page-maker/stores/ui/ui-store.js

@@ -27,6 +27,8 @@ export const useUiStore = defineStore('ui', {
         },
         personalisationData: undefined,
         isPersonalisationEnabled: false,
+        userPromptContentKey: undefined,
+        showAiTemplatesTab: false,
     }),
     actions: {
         setLogoTheme(payload) {
@@ -47,6 +49,12 @@ export const useUiStore = defineStore('ui', {
         setUserPersonalisationData({ personalisationData, }) {
             this.personalisationData = personalisationData;
         },
+        setUserPromptContentKey({ userPromptContentKey, }) {
+            this.userPromptContentKey = userPromptContentKey;
+        },
+        setShowAiTemplatesTab({ showAiTemplatesTab, }) {
+            this.showAiTemplatesTab = showAiTemplatesTab;
+        },
         onBackgroundChanged() {
             const brandPageMakerStore = useBrandPageMakerStore();
             brandPageMakerStore.onBackgroundChanged();