@designcrowd/library.brand-page 5.19.1 → 5.19.2

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

@@ -14,6 +14,7 @@ import * as DesignTemplateClient from '../../../clients/design-template-client';
 import { type DesignTemplate } from '../../../clients/models';
 import {
   BP_DEFAULT_TEMPLATE_TYPE_NAME,
+  BP_BRAND_SITE_TEMPLATE_TYPE_NAME,
   SIDE_BAR_TAB_NAMES,
 } from '@brand-page-maker/constants';
 import { defineStore, storeToRefs } from 'pinia';
@@ -32,6 +33,7 @@ import {
   useUiEditableLogoStore,
   useUiLogoSettingsStore,
 } from '../../logo-settings/store';
+import { useEventTracker } from '@brand-page-maker/composables/useEventTracker';
 import {
   templateSettingsTr,
   getCurrentLocale,
@@ -39,6 +41,17 @@ import {
 import { watch } from 'vue';
 
 export const DEFAULT_PAGE_SIZE = 6;
+
+const POST_PURCHASE_PAGE_SECTION_BY_TAB: Record<string, string> = {
+  [TEMPLATE_TABS.all]: 'MakerPostPurchaseSidebarTemplatesAllTab',
+  [TEMPLATE_TABS.AI]: 'MakerPostPurchaseSidebarTemplatesAiTab',
+  [TEMPLATE_TABS.categories]: 'MakerPostPurchaseSidebarTemplatesCategoryTab',
+};
+
+const PRE_PURCHASE_PAGE_SECTION_BY_TAB: Record<string, string> = {
+  [TEMPLATE_TABS.all]: 'MakerPrePurchaseSidebarTemplatesAllTab',
+  [TEMPLATE_TABS.categories]: 'MakerPrePurchaseSidebarTemplatesCategoryTab',
+};
 const LOAD_PAGE_RETRY_DELAY = 250;
 
 type SelectedTabType = {
@@ -66,6 +79,7 @@ export interface TemplatesSettingState {
   tabsWithTranslations: SelectedTabType[];
   logoChangeWatcherInitialized: boolean;
   initialSearchTerm: string | undefined;
+  aiTemplateKeywords: string | undefined;
   onSearchTermChanged: OnSearchTermChangedCallback | undefined;
 }
 
@@ -103,6 +117,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
       cachedTemplates: {},
       logoChangeWatcherInitialized: false,
       initialSearchTerm: undefined,
+      aiTemplateKeywords: undefined,
       onSearchTermChanged: undefined,
     };
   },
@@ -302,22 +317,60 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
         const editableLogoVariation =
           editableLogoStore.editableLogoVariations[logoVariation];
 
+        const isPrePurchase = brandPageContainerStore.isPrePurchase;
+        const isBrandSite =
+          this.templateType === BP_BRAND_SITE_TEMPLATE_TYPE_NAME;
+
+        // Pre-purchase has no logo draft for logo-based recommendation, so fall back to the seeded
+        // search term (the keyword from the URL/cookie - never the business name) so the All tab
+        // stays relevant instead of generic (bp-5454).
+        const effectiveSearchTerm =
+          !this.searchTerm &&
+          !this.selectedCategory &&
+          isPrePurchase &&
+          isBrandSite &&
+          this.selectedTab.key === TEMPLATE_TABS.all
+            ? this.initialSearchTerm
+            : this.searchTerm;
+
+        const pageSection = isBrandSite
+          ? (isPrePurchase
+              ? PRE_PURCHASE_PAGE_SECTION_BY_TAB
+              : POST_PURCHASE_PAGE_SECTION_BY_TAB)[this.selectedTab.key]
+          : undefined;
+
+        const pageName = isBrandSite
+          ? isPrePurchase
+            ? 'maker-pre-purchase'
+            : 'maker'
+          : undefined;
+
+        const baseParams = {
+          page: pageNo,
+          categoryName: this.selectedCategory,
+          searchTerm: effectiveSearchTerm,
+          keywords: this.aiTemplateKeywords,
+          logoDraftToken: logoSettingsStore.selectedLogoImage.logoDraftToken,
+          logoVariation: logoSettingsStore.selectedLogoImage.logoVariation,
+          selectedTemplateToken: designTemplateToken,
+          locale: currentLocale,
+          logoS3Token: !isByo ? editableLogoVariation.s3Token : undefined,
+          logoTemplateToken: isByo ? logoTemplateToken : undefined,
+          useLogoForRecommendedTemplates:
+            isBrandSite && this.selectedTab.key === TEMPLATE_TABS.all,
+          pageSection,
+          pageName,
+        };
+
+        // AI templates are interleaved server-side for the Brand Site All tab
+        // (bp-5306); the frontend just renders the returned order.
         const result =
           await designTemplateClient.getTemplateItemsByTemplateType(
             this.templateType,
             {
-              page: pageNo,
+              ...baseParams,
               pageSize: DEFAULT_PAGE_SIZE,
-              categoryName: this.selectedCategory,
-              searchTerm: this.searchTerm,
-              logoDraftToken:
-                logoSettingsStore.selectedLogoImage.logoDraftToken,
-              logoVariation: logoSettingsStore.selectedLogoImage.logoVariation,
               personalisable: this.selectedTab.key === TEMPLATE_TABS.AI,
-              selectedTemplateToken: designTemplateToken,
-              locale: currentLocale,
-              logoS3Token: !isByo ? editableLogoVariation.s3Token : undefined,
-              logoTemplateToken: isByo ? logoTemplateToken : undefined,
             },
           );
 
@@ -327,11 +380,27 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
 
         this._setPageCount({ pageCount: result.pageCount });
 
+        if (
+          pageNo === 1 &&
+          result.abTestValuesToBePushed &&
+          Object.keys(result.abTestValuesToBePushed).length > 0
+        ) {
+          const eventTracker = useEventTracker();
+
+          for (const [experimentName, experimentValue] of Object.entries(
+            result.abTestValuesToBePushed,
+          )) {
+            eventTracker.sendExperimentStartedEvent(
+              experimentName,
+              experimentValue,
+            );
+          }
+        }
+
         const templates = await Promise.all(
           result.paginatedItems.map(async (item) => {
             try {
               if (brandPageMakerUserStore.isAdmin) {
-                // Pre-purchase: full template with brandPageModel for live rendering
                 const template =
                   await designTemplateClient.getTemplateByTemplateToken(
                     item.designTemplateToken,
@@ -349,17 +418,24 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                       uiStore.personalisationData.length,
                     );
 
-                  // Get the contentKey from the selected personalisation variation
-                  // This is needed for the backend preview URL to show the correct variation
-                  const selectedPersonalisation =
-                    uiStore.personalisationData[personalisationContentIndex];
-
-                  contentKey = selectedPersonalisation.contentKey;
+                  contentKey =
+                    uiStore.personalisationData[personalisationContentIndex]
+                      .contentKey;
+                } else if (item.isPersonalisable) {
+                  // Pre-purchase has no personalisationData; personalise AI
+                  // template previews with the prompt content key (bp-5742).
+                  contentKey = uiStore.userPromptContentKey;
                 }
 
                 return {
                   id: item.designTemplateToken,
+                  isPersonalisable: item.isPersonalisable,
                   contentKey,
+                  // A userPromptContentKey signals this design's real AI images live
+                  // in the userPrompt bucket (post- or pre-purchase). The preview must
+                  // then resolve via userPromptContentKey, not the regular bucket which
+                  // holds placeholders post-purchase (bp-5454).
+                  usesUserPromptContentKey: !!uiStore.userPromptContentKey,
                   previewImageUrl: item.previewImageUrl,
                 } as TemplateSettingsTemplate;
               }
@@ -374,7 +450,15 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
           (t): t is TemplateSettingsTemplate => t !== null,
         );
 
-        this._addTemplates({ templates: validTemplates });
+        // The Categories tab must never surface AI templates or the AI badge
+        // (bp-5454 scenario 5). The badge is driven purely by isPersonalisable,
+        // so clear it for category results regardless of the template's catalog flag.
+        const displayTemplates =
+          this.selectedTab.key === TEMPLATE_TABS.categories
+            ? validTemplates.map((t) => ({ ...t, isPersonalisable: false }))
+            : validTemplates;
+
+        this._addTemplates({ templates: displayTemplates });
         this._setPageNoLoaded({ pageNoLoaded: pageNo });
       } finally {
         this._setIsBusy({ isBusy: false });
@@ -496,6 +580,9 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
       this.initialSearchTerm = payload.initialSearchTerm;
       this.onSearchTermChanged = payload.onSearchTermChanged;
     },
+    setAiTemplateKeywords(payload: { aiTemplateKeywords: string }) {
+      this.aiTemplateKeywords = payload.aiTemplateKeywords;
+    },
     notifySearchTermChanged(searchTerm: string | undefined) {
       this.onSearchTermChanged?.(searchTerm);
     },