@designcrowd/library.brand-page 5.19.1 → 5.19.2

package/lib/src/shared/unsplash-library/UnsplashLibrary.mixin.d.ts

@@ -38,6 +38,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.19.1",
+  "version": "5.19.2",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

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

@@ -929,6 +929,10 @@ export class BrandPageModel {
   // Model version
   v: number;
 
+  // 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?: string;
+
   styles: PageStyles;
 
   /** @deprecated */

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -456,6 +456,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
+    "userPromptContentKey": undefined,
     "v": 17,
   },
   "useOldLogoRenderSize": true,
@@ -901,6 +902,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
+    "userPromptContentKey": undefined,
     "v": 17,
   },
   "useOldLogoRenderSize": true,
@@ -1353,6 +1355,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
+    "userPromptContentKey": undefined,
     "v": 17,
   },
   "useOldLogoRenderSize": true,

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -472,6 +472,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         },
       },
     },
+    "userPromptContentKey": undefined,
     "v": 0,
   },
   "useOldLogoRenderSize": false,

package/src/brand-page/utils/__snapshots__/model.util.test.ts.snap

@@ -446,6 +446,7 @@ BrandPageModel {
       },
     },
   },
+  "userPromptContentKey": undefined,
   "v": 0,
 }
 `;
@@ -911,6 +912,7 @@ BrandPageModel {
       },
     },
   },
+  "userPromptContentKey": undefined,
   "v": 0,
 }
 `;

package/src/brand-page/utils/personalisation.util.test.ts

@@ -701,6 +701,41 @@ describe('personalisation.util', async () => {
     ).toBe(title);
   });
 
+  test('applyUserPersonalisationToBrandPageModelAsync should fall back to a populated section when the block section was not generated', async () => {
+    // Arrange - simulate userPrompt AI content that only generated the core sections
+    // (profile/about/information/media); email/website/phone are never generated.
+    const personalisation = {
+      ...PERSONALISATION,
+      websiteSection: undefined,
+      emailSection: undefined,
+      phoneSection: undefined,
+    } as unknown as typeof PERSONALISATION;
+
+    // A block whose role points at the ungenerated website section - without the fallback
+    // this renders the designer's placeholder instead of personalised content.
+    const model = new BrandPageModel({
+      brandPageType: BRAND_PAGE_TYPES.brandSite,
+      styles: {
+        backgroundStyles: {
+          backgroundImageUrl: faker.internet.url(),
+          personalisationRole: 'website',
+        },
+      },
+    });
+
+    // Act
+    const result = await applyUserPersonalisationToBrandPageModelAsync(
+      personalisation,
+      model,
+    );
+
+    // Assert - it borrowed the first populated fallback section (profile).
+    expect(result.isModified).toBe(true);
+    expect(result.model.styles.backgroundStyles.backgroundImageUrl).toBe(
+      PERSONALISATION.profileSection.imageUrls?.[0].imageUrl,
+    );
+  });
+
   test('applyUserPersonalisationToBrandPageModelAsync should return modified text items when input has text with multiple items', async () => {
     // Arrange
     const textContent = {

package/src/brand-page/utils/personalisation.util.ts

@@ -326,6 +326,84 @@ const getPersonalisationValueAsync = async (
   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: PersonalisationRole[] = [
+  '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: UserPersonalisationSectionWithIndices | undefined,
+): boolean => {
+  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: PersonalisationRole,
+  property: keyof UserPersonalisationSection | keyof UserPersonalisationItem,
+  personalisation: UserPersonalisationWithIndices,
+): Promise<{
+  value: any;
+  personalisation: UserPersonalisationWithIndices;
+  valuesToUpdate?: Record<string, any>;
+} | null> => {
+  const key = `${role}Section` as keyof UserPersonalisationWithIndices;
+  const section = personalisation[key] as
+    | UserPersonalisationSectionWithIndices
+    | undefined;
+
+  if (isSectionEffectivelyEmpty(section)) {
+    return null;
+  }
+
+  const {
+    value,
+    section: updatedSection,
+    valuesToUpdate,
+  } = await getPersonalisationValueAsync(
+    section as UserPersonalisationSectionWithIndices,
+    property,
+  );
+
+  if (value === undefined || value === null) {
+    return null;
+  }
+
+  return {
+    value,
+    personalisation: { ...personalisation, [key]: updatedSection },
+    valuesToUpdate,
+  };
+};
+
 const getPersonalisationValueFromPropertyAsync = async (
   propertyKey: string,
   propertyValue: any,
@@ -342,16 +420,6 @@ const getPersonalisationValueFromPropertyAsync = async (
     return { value: undefined, personalisation };
   }
 
-  const matchingValue = Object.entries(personalisation).find(
-    ([key]) => key === `${personalisationRole}Section`,
-  );
-
-  if (!matchingValue) {
-    return { value: undefined, personalisation };
-  }
-
-  const section = matchingValue[1] as UserPersonalisationSectionWithIndices;
-
   const mapping = getPersonalisationMappingForContentType(contentType);
 
   const matchingProperty = Object.entries(mapping).find(([, value]) =>
@@ -372,20 +440,48 @@ const getPersonalisationValueFromPropertyAsync = async (
       typeof propertyValue === 'string' && propertyValue.endsWith('.svg'),
   });
 
-  const {
-    value,
-    section: updatedSection,
-    valuesToUpdate,
-  } = await getPersonalisationValueAsync(section, property);
+  const primaryKey =
+    `${personalisationRole}Section` as keyof UserPersonalisationWithIndices;
+  const primarySection = personalisation[primaryKey] as
+    | UserPersonalisationSectionWithIndices
+    | undefined;
+
+  // 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 as UserPersonalisationSectionWithIndices,
+      property,
+    );
 
-  return {
-    value,
-    personalisation: {
-      ...personalisation,
-      [`${personalisationRole}Section`]: updatedSection,
-    },
-    valuesToUpdate,
-  };
+    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 };
 };
 
 type ContentProperty = Record<string, string | any>;

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

@@ -70,6 +70,8 @@ export interface BrandPageMakerViewModel {
   initialCategories: InitialCategories;
   personalisation?: UserPersonalisationContent[];
   isPersonalisationEnabled?: boolean;
+  userPromptContentKey?: string;
+  showAiTemplatesTab?: boolean;
   brandPageType?: BrandPageType;
   businessName?: string;
   industry?: string;
@@ -227,6 +229,8 @@ export default defineComponent({
       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/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.ts

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

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

@@ -15,10 +15,7 @@ import {
   getBrandPageViewModelFromBrandPageModel,
 } from '@brand-page/utils';
 import { STYLE_THEME_KEYS } from '@brand-page/constants';
-import {
-  TEMPLATE_TABS,
-  type TemplateSettingsTemplate,
-} from '@shared/template-settings/models';
+import type { TemplateSettingsTemplate } from '@shared/template-settings/models';
 import type { DebounceHandle } from 'lodash.debounce';
 import debounce from 'lodash.debounce';
 import { MOBILE_HEIGHT, MOBILE_WIDTH } from '@brand-page-maker/constants';
@@ -74,7 +71,6 @@ export default defineComponent({
       isBrandSite: computed(
         () => brandPageMakerStore.brandPageType === BRAND_PAGE_TYPES.brandSite,
       ),
-      selectedTab: computed(() => templateSettingsStore.selectedTab.key),
       renderAsImage: computed(() => templateSettingsStore.renderAsImage),
       brandPageMakerUserStore,
       brandPageContainerStore,
@@ -241,10 +237,28 @@ export default defineComponent({
         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/src/brand-page-maker/components/template-preview/TemplatePreview.vue

@@ -2,7 +2,7 @@
   <div
     ref="container"
     data-component="template-preview"
-    class="template-preview-container hover:!tw-shadow-[0_0_0_3px] hover:!tw-shadow-info-500 tw-overflow-hidden"
+    class="template-preview-container hover:!tw-shadow-[0_0_0_3px] hover:!tw-shadow-info-500 tw-overflow-hidden tw-relative tw-isolate"
     :style="containerStyle"
     :class="{
       '!tw-shadow-[0_0_0_3px] !tw-shadow-info-500':
@@ -55,17 +55,10 @@
           />
         </div>
         <!-- End Preview Image -->
-        <!-- Start personalisation tag -->
-        <div
-          v-if="isPersonalisable"
-          class="tw-absolute tw-bottom-0 tw-right-0 tw-p-2 tw-z-50 tw-text-white"
-          style="background: lightgreen"
-        >
-          <span>Personalisable</span>
-        </div>
-        <!-- End personalisation tag -->
       </div>
     </div>
+    <!-- AI badge outside scaled container so it renders at natural size -->
+    <TemplatePreviewAiBadge v-if="isPersonalisable" />
   </div>
 </template>
 <script>
@@ -73,11 +66,13 @@ import { defineComponent } from 'vue';
 import TemplatePreviewMixin from './TemplatePreview.mixin.ts';
 import Page from '@brand-page/components/page/Page.vue';
 import { Loader } from '@designcrowd/fe-shared-lib';
+import TemplatePreviewAiBadge from './TemplatePreviewAiBadge.vue';
 
 export default defineComponent({
   components: {
     Page,
     Loader,
+    TemplatePreviewAiBadge,
   },
   mixins: [TemplatePreviewMixin],
   setup(props, context) {

package/src/brand-page-maker/components/template-preview/TemplatePreviewAiBadge.vue

@@ -0,0 +1,12 @@
+<template>
+  <div
+    data-test-ai-design
+    class="tw-flex tw-flex-row tw-absolute tw-top-2.5 tw-left-2.5 tw-rounded-full tw-py-1 tw-px-2 tw-text-white tw-text-xs tw-font-bold tw-z-[25] tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6]"
+  >
+    <Icon name="ai" class="tw-text-white tw-pr-1" size="sm" />
+    <span>AI</span>
+  </div>
+</template>
+<script setup lang="ts">
+import { Icon } from '@designcrowd/fe-shared-lib';
+</script>

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

@@ -123,6 +123,7 @@ export type InitialisePayload = Omit<
   logoDraftAssets: LogoDraftAsset[];
   gettyVideos: GettyVideoEditorViewModelResponse[];
   templateSearchTerm: string | undefined;
+  aiTemplateKeywords: string | undefined;
   onSearchTermChanged?: OnSearchTermChangedCallback;
 };
 
@@ -266,6 +267,10 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
         onSearchTermChanged: payload.onSearchTermChanged,
       });
 
+      templateSettingsStore.setAiTemplateKeywords({
+        aiTemplateKeywords: payload.aiTemplateKeywords ?? '',
+      });
+
       brandPageMakerStore.setSelectedTemplateId({
         templateId: this.designTemplateToken,
       });

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

@@ -125,6 +125,8 @@ export interface InitialisePayload {
   templateCategories: TemplateCategory[];
   personalisationData?: UserPersonalisationContent[];
   isPersonalisationEnabled: boolean;
+  userPromptContentKey?: string;
+  showAiTemplatesTab?: boolean;
   businessName: string | undefined;
   industry: string | undefined;
   layout?: string;
@@ -1230,6 +1232,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       templateCategories,
       personalisationData,
       isPersonalisationEnabled,
+      userPromptContentKey,
+      showAiTemplatesTab = false,
       businessName,
       industry,
       layout,
@@ -1353,6 +1357,10 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           });
         }
 
+        uiStore.setUserPromptContentKey({ userPromptContentKey });
+
+        uiStore.setShowAiTemplatesTab({ showAiTemplatesTab });
+
         templateSettingsStore.setTemplateCategories({
           categories: templateCategories,
         });
@@ -1800,6 +1808,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,
@@ -1817,6 +1826,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
 
       return {
         v: GetLatestModelVersion(),
+        userPromptContentKey: uiStore.userPromptContentKey,
         pages,
         styles: {
           logoStyles,

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

@@ -48,6 +48,8 @@ export const useUiStore = defineStore('ui', {
     },
     personalisationData: undefined,
     isPersonalisationEnabled: false,
+    userPromptContentKey: undefined,
+    showAiTemplatesTab: false,
   }),
   actions: {
     setLogoTheme(payload: { logoTheme: LogoTheme }) {
@@ -78,6 +80,20 @@ export const useUiStore = defineStore('ui', {
     }) {
       this.personalisationData = personalisationData;
     },
+    setUserPromptContentKey({
+      userPromptContentKey,
+    }: {
+      userPromptContentKey: string | undefined;
+    }) {
+      this.userPromptContentKey = userPromptContentKey;
+    },
+    setShowAiTemplatesTab({
+      showAiTemplatesTab,
+    }: {
+      showAiTemplatesTab: boolean;
+    }) {
+      this.showAiTemplatesTab = showAiTemplatesTab;
+    },
     onBackgroundChanged() {
       const brandPageMakerStore = useBrandPageMakerStore();
 

package/src/clients/design-template-client.ts

@@ -11,6 +11,7 @@ interface DesignTemplateClientOptions {}
 interface GetTemplatesAsyncOptions {
   categoryName?: string;
   searchTerm?: string;
+  keywords?: string;
   side?: string;
   logoDraftToken?: string;
   logoVariation?: number;
@@ -22,6 +23,8 @@ interface GetTemplatesAsyncOptions {
   locale?: string;
   logoS3Token?: string;
   logoTemplateToken?: string;
+  pageSection?: string;
+  pageName?: string;
 }
 
 export const getTemplatesEndpoint = (templateTypeName: string) =>

package/src/clients/models.ts

@@ -4,6 +4,7 @@ export interface Paginated<T> {
   pageSize: number;
   pageCount: number;
   totalResultCount: number;
+  abTestValuesToBePushed?: Record<string, string>;
 }
 
 export interface DesignTemplate {
@@ -14,6 +15,7 @@ export interface DesignTemplate {
 
 export interface PaginatedDesignTemplateItem {
   designTemplateToken: string;
+  isPersonalisable?: boolean;
   previewImageUrl?: string;
 }
 

package/src/shared/models.ts

@@ -19,6 +19,12 @@ export interface UIRootState {
   thirdPartySettings: UIRootStateThirdPartySettings;
   personalisationData: UserPersonalisationContent[] | undefined;
   isPersonalisationEnabled: boolean;
+  // Pre-purchase AI content key used to personalise AI template previews when
+  // there is no post-purchase personalisationData (bp-5742).
+  userPromptContentKey: string | undefined;
+  // Controls visibility of the dedicated AI templates tab. Decoupled from personalisationData
+  // so the slug flow can personalise previews/apply without surfacing the AI tab (bp-5742).
+  showAiTemplatesTab: boolean;
 }
 
 export interface Endpoints {

package/src/shared/template-settings/components/TemplatesSettings.mixin.ts

@@ -60,7 +60,7 @@ export default defineComponent({
       templateCategories: computed(
         () => templateSettingsStore.templateCategories,
       ),
-      personalisationData: computed(() => uiStore.personalisationData),
+      showAiTemplatesTab: computed(() => uiStore.showAiTemplatesTab),
       templateSettingsStore,
       uiStore,
       isDesignCom: computed(() => containerStore.isDesignCom),
@@ -155,7 +155,7 @@ export default defineComponent({
     },
 
     visibleTabs() {
-      return this.personalisationData
+      return this.showAiTemplatesTab
         ? this.tabs
         : [...this.tabs].splice(
             0,

package/src/shared/template-settings/models.ts

@@ -7,6 +7,7 @@ export interface TemplateSettingsTemplate {
   personalisationContentIndex?: number;
   brandPageModel: BrandPageModel;
   contentKey?: string;
+  usesUserPromptContentKey?: boolean;
   previewImageUrl?: string;
 }