@designcrowd/library.brand-page 6.1.1-json-prereq-3 → 6.1.1

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.js

@@ -8,7 +8,7 @@ import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { ITEM_FIELD_TYPES } from '@brand-page-maker/models';
 import { useUiPageSettingsStore } from '../../../page-settings/store';
 import { PAGE_SECTIONS } from '../../../page-settings/models';
-import { getPlainTextFromRTE, replaceTextInRTE, RTE_ALLOWED_SECTION_TYPES, isRTEManagedStyleField, isTiptapDocument, renderRteToHtml, toRteJson, } from '@brand-page-maker/utils';
+import { getPlainTextFromRTE, replaceTextInRTE, RTE_ALLOWED_SECTION_TYPES, isRTEManagedStyleField, } from '@brand-page-maker/utils';
 import { isDefaultContentText } from '@shared/content-settings/utils';
 import { useUiLogoSettingsStore } from '../../../logo-settings/store';
 const RTE_DISALLOWED_FIELD_NAMES = ['buttonText'];
@@ -267,17 +267,8 @@ export default defineComponent({
         },
         onUseGeneratedText(generatedText) {
             let formattedText = generatedText;
-            // BP-5787: preserve the field's formatting when dropping in AI text.
-            // replaceTextInRTE is HTML-based, so JSON is rendered/parsed around it
-            // (cold AI path, shared editor); string fields use it directly.
-            if (this.showRichTextEditor) {
-                if (isTiptapDocument(this.value)) {
-                    formattedText =
-                        toRteJson(replaceTextInRTE(renderRteToHtml(this.value), generatedText)) ?? generatedText;
-                }
-                else if (typeof this.value === 'string') {
-                    formattedText = replaceTextInRTE(this.value, generatedText);
-                }
+            if (this.showRichTextEditor && typeof this.value === 'string') {
+                formattedText = replaceTextInRTE(this.value, generatedText);
             }
             this.contentSettingsStore.updateItemValue({
                 id: this.id,

package/lib/src/shared/content-settings/components/email-field/EmailField.mixin.d.ts

@@ -80,13 +80,13 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
     _oldValue: string;
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
+    lengthError: boolean;
     burstIsHydration: boolean | undefined;
     pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
     isValid(): boolean | undefined;
-    lengthError(): boolean;
     label(): string;
     text: {
         get(): string | false;

package/lib/src/shared/content-settings/components/tel-field/TelField.mixin.d.ts

@@ -80,13 +80,13 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
     _oldValue: string;
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
+    lengthError: boolean;
     burstIsHydration: boolean | undefined;
     pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
     isValid(): boolean | undefined;
-    lengthError(): boolean;
     label(): string;
     text: {
         get(): string | false;

package/lib/src/shared/content-settings/components/testimonial-items-field/TestimonialItemsField.mixin.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { ColorReplacement, Content, LogoTheme, RichTextValue, TestimonialItems } from '@brand-page';
+import type { ColorReplacement, Content, LogoTheme, TestimonialItems } from '@brand-page';
 import type { DebounceHandle } from 'lodash.debounce';
 import type { UpdateItemValuePayload } from '../../models';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -64,8 +64,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         name: string;
         value: string;
     }, index: number): void;
-    getItemTextPreview(text: RichTextValue): string;
-    rteTextLength(value: RichTextValue): number;
+    getItemTextPreview(text: string): string;
     getPlainTextValue(index: number): string;
     onCaptureSnapshot(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "capture-preview-snapshot" | "on-intent-image-replace")[], "update:modelValue" | "capture-preview-snapshot" | "on-intent-image-replace", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/lib/src/shared/content-settings/components/testimonial-items-field/TestimonialItemsField.mixin.js

@@ -3,7 +3,7 @@ import { EMPTY_TESTIMONIAL, MAX_DESCRIPTION_LENGTH, MAX_LENGTH_ERROR_MESSAGE, MA
 import debounce from 'lodash.debounce';
 import cloneDeep from 'lodash.clonedeep';
 import { useSnapshotStore } from '@brand-page-maker/stores';
-import { getPlainTextFromRTE, getRteTextLength } from '@brand-page-maker/utils';
+import { getPlainTextFromRTE } from '@brand-page-maker/utils';
 import { isDefaultContentText } from '../../utils';
 import { decodeHtmlEntities } from '@brand-page/utils';
 import { ESCAPED_NEWLINE_CHARACTER } from '../../../../constants/ui';
@@ -73,9 +73,7 @@ export default defineComponent({
     },
     created() {
         this.options = cloneDeep(this.value);
-        // BP-5787: testimonials may be Tiptap JSON (migrated legacy content), so
-        // read visible text via getPlainTextFromRTE rather than `.trim()` on a doc.
-        this.isEmpty = this.options.map((option) => getPlainTextFromRTE(option.testimonials).length === 0);
+        this.isEmpty = this.options.map((option) => option.testimonials.trim().length === 0);
         if (!this.changeDebounce) {
             this.changeDebounce = debounce(this.emitChange, DEBOUNCE_IN_MS);
         }
@@ -162,12 +160,7 @@ export default defineComponent({
             this.emitChange();
         },
         getItemTextPreview(text) {
-            // BP-5787: a JSON doc has no `.replace` — take its visible text first.
-            const value = typeof text === 'string' ? text : getPlainTextFromRTE(text);
-            return decodeHtmlEntities(value.replace(new RegExp(ESCAPED_NEWLINE_CHARACTER, 'g'), ' '));
-        },
-        rteTextLength(value) {
-            return getRteTextLength(value);
+            return decodeHtmlEntities(text.replace(new RegExp(ESCAPED_NEWLINE_CHARACTER, 'g'), ' '));
         },
         getPlainTextValue(index) {
             const text = this.options[index]?.testimonials || '';

package/lib/src/shared/content-settings/components/text-field/TextField.mixin.d.ts

@@ -80,13 +80,13 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
     _oldValue: string;
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
+    lengthError: boolean;
     burstIsHydration: boolean | undefined;
     pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
     isValid(): boolean | undefined;
-    lengthError(): boolean;
     label(): string;
     text: {
         get(): string | false;

package/lib/src/shared/content-settings/components/text-items-field/TextItemsField.mixin.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Content, LogoTheme, RichTextValue, TextItem, TextStyleDeclaration } from '@brand-page/models';
+import type { Content, LogoTheme, TextItem, TextStyleDeclaration } from '@brand-page/models';
 import type { DebounceHandle } from 'lodash.debounce';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     id: {
@@ -79,7 +79,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         name: string;
         value: string;
     }, index: number): void;
-    rteTextLength(value: RichTextValue): number;
     getPlainTextValue(index: number): string;
     onCaptureSnapshot(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("capture-preview-snapshot" | "update:model-value")[], "capture-preview-snapshot" | "update:model-value", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/lib/src/shared/content-settings/components/text-items-field/TextItemsField.mixin.js

@@ -4,7 +4,7 @@ import debounce from 'lodash.debounce';
 import cloneDeep from 'lodash.clonedeep';
 import { decodeHtmlEntities, escapeContentText } from '@brand-page/utils';
 import { useSnapshotStore } from '@brand-page-maker/stores';
-import { getPlainTextFromRTE, getRteTextLength } from '@brand-page-maker/utils';
+import { getPlainTextFromRTE } from '@brand-page-maker/utils';
 import { isDefaultContentText } from '../../utils';
 const DEBOUNCE_IN_MS = 250;
 export default defineComponent({
@@ -172,9 +172,6 @@ export default defineComponent({
             this.options[index][payload.name] = payload.value;
             this.emitChange();
         },
-        rteTextLength(value) {
-            return getRteTextLength(value);
-        },
         getPlainTextValue(index) {
             const text = this.options[index]?.text || '';
             const plainText = getPlainTextFromRTE(text);

package/lib/src/shared/content-settings/components/textarea-field/TextareaField.mixin.d.ts

@@ -94,13 +94,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     _oldValue: string;
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
+    lengthError: boolean;
     burstIsHydration: boolean | undefined;
     pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
     isValid(): boolean | undefined;
-    lengthError(): boolean;
     label(): string;
     text: {
         get(): string | false;

package/lib/src/shared/content-settings/components/url-field/UrlField.mixin.d.ts

@@ -87,13 +87,13 @@ declare const _default: import("vue").DefineComponent<{}, {}, Record<string, any
     _oldValue: string;
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
+    lengthError: boolean;
     burstIsHydration: boolean | undefined;
     pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
     isValid(): boolean | undefined;
-    lengthError(): boolean;
     label(): string;
     text: {
         get(): string | false;

package/lib/src/shared/content-settings/components/youtube-video-field/YoutubeVideoField.mixin.d.ts

@@ -83,13 +83,13 @@ declare const _default: import("vue").DefineComponent<{}, {}, Record<string, any
     _oldValue: string;
     isDirty: boolean;
     emitChangeDebounce: import("lodash.debounce").DebounceHandle | undefined;
+    lengthError: boolean;
     burstIsHydration: boolean | undefined;
     pendingWriteIsHydration: boolean;
 }, {
     errorMessage(): string | undefined;
     isErrorVisible(): boolean;
     isValid(): boolean | undefined;
-    lengthError(): boolean;
     label(): string;
     text: {
         get(): string | false;

package/lib/src/shared/logo-settings/components/EditLogoSettings.mixin.d.ts

@@ -168,7 +168,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             mode: import("../../models").UiScreenSizeMode;
         }): void;
         setUserPersonalisationData({ personalisationData, }: {
-            personalisationData: import("../../../brand-page").UserPersonalisationContent[];
+            personalisationData: import("../../../brand-page").UserPersonalisationContent[] | undefined;
         }): void;
         setUserPromptContentKey({ userPromptContentKey, }: {
             userPromptContentKey: string | undefined;

package/lib/src/shared/logo-versions/LogoVersions.mixin.d.ts

@@ -25,7 +25,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             mode: import("../models").UiScreenSizeMode;
         }): void;
         setUserPersonalisationData({ personalisationData, }: {
-            personalisationData: import("../../brand-page").UserPersonalisationContent[];
+            personalisationData: import("../../brand-page").UserPersonalisationContent[] | undefined;
         }): void;
         setUserPromptContentKey({ userPromptContentKey, }: {
             userPromptContentKey: string | undefined;

package/lib/src/shared/my-designs/MyDesigns.mixin.d.ts

@@ -20,7 +20,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             mode: import("../models").UiScreenSizeMode;
         }): void;
         setUserPersonalisationData({ personalisationData, }: {
-            personalisationData: import("../../brand-page").UserPersonalisationContent[];
+            personalisationData: import("../../brand-page").UserPersonalisationContent[] | undefined;
         }): void;
         setUserPromptContentKey({ userPromptContentKey, }: {
             userPromptContentKey: string | undefined;

package/lib/src/shared/my-uploads/MyMedia.mixin.d.ts

@@ -37,7 +37,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             mode: import("../models").UiScreenSizeMode;
         }): void;
         setUserPersonalisationData({ personalisationData, }: {
-            personalisationData: import("../../brand-page").UserPersonalisationContent[];
+            personalisationData: import("../../brand-page").UserPersonalisationContent[] | undefined;
         }): void;
         setUserPromptContentKey({ userPromptContentKey, }: {
             userPromptContentKey: string | undefined;

package/lib/src/shared/my-uploads/MyUploads.mixin.d.ts

@@ -60,7 +60,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             mode: import("../models").UiScreenSizeMode;
         }): void;
         setUserPersonalisationData({ personalisationData, }: {
-            personalisationData: import("../../brand-page").UserPersonalisationContent[];
+            personalisationData: import("../../brand-page").UserPersonalisationContent[] | undefined;
         }): void;
         setUserPromptContentKey({ userPromptContentKey, }: {
             userPromptContentKey: string | undefined;

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -3916,7 +3916,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             mode: import("../../../models").UiScreenSizeMode;
         }): void;
         setUserPersonalisationData({ personalisationData, }: {
-            personalisationData: import("@brand-page").UserPersonalisationContent[];
+            personalisationData: import("@brand-page").UserPersonalisationContent[] | undefined;
         }): void;
         setUserPromptContentKey({ userPromptContentKey, }: {
             userPromptContentKey: string | undefined;

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -3897,7 +3897,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             mode: import("../../../models").UiScreenSizeMode;
         }): void;
         setUserPersonalisationData({ personalisationData, }: {
-            personalisationData: import("@brand-page").UserPersonalisationContent[];
+            personalisationData: import("@brand-page").UserPersonalisationContent[] | undefined;
         }): void;
         setUserPromptContentKey({ userPromptContentKey, }: {
             userPromptContentKey: string | undefined;

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -379,7 +379,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             mode: import("../../models").UiScreenSizeMode;
         }): void;
         setUserPersonalisationData({ personalisationData, }: {
-            personalisationData: import("@brand-page").UserPersonalisationContent[];
+            personalisationData: import("@brand-page").UserPersonalisationContent[] | undefined;
         }): void;
         setUserPromptContentKey({ userPromptContentKey, }: {
             userPromptContentKey: string | undefined;

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

@@ -107,7 +107,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             mode: import("../../models").UiScreenSizeMode;
         }): void;
         setUserPersonalisationData({ personalisationData, }: {
-            personalisationData: import("../../../brand-page").UserPersonalisationContent[];
+            personalisationData: import("../../../brand-page").UserPersonalisationContent[] | undefined;
         }): void;
         setUserPromptContentKey({ userPromptContentKey, }: {
             userPromptContentKey: string | undefined;

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

@@ -1,5 +1,6 @@
 import type { TemplateSettingsTemplate, DesignTemplateType, OnTemplateSelectedPayload, TemplateTab, OnSearchPayload, OnTabSelectedPayload, TemplateCategory, OnCategorySelectedPayload, SetTemplateCategoriesPayload } from '../models';
 import { type DesignTemplate } from '../../../clients/models';
+import { type UserPersonalisationContent } from '@brand-page/models';
 export declare const DEFAULT_PAGE_SIZE = 6;
 type SelectedTabType = {
     key: string;
@@ -19,6 +20,7 @@ export interface TemplatesSettingState {
     selectedTab: SelectedTabType;
     selectedCategory: string | undefined;
     searchTerm: string | undefined;
+    searchPersonalisationData: UserPersonalisationContent[] | undefined;
     tabsWithTranslations: SelectedTabType[];
     logoChangeWatcherInitialized: boolean;
     initialSearchTerm: string | undefined;

package/lib/src/shared/template-settings/store/template-settings-store.js

@@ -5,7 +5,7 @@ import { BP_DEFAULT_TEMPLATE_TYPE_NAME, BP_BRAND_SITE_TEMPLATE_TYPE_NAME, SIDE_B
 import { defineStore, storeToRefs } from 'pinia';
 import { useBrandPageContainerStore, useBrandPageMakerStore, useBrandPageMakerUserStore, useLogoStore, useUiStore, } from '@brand-page-maker/stores';
 import { useUiSideBarStore } from '../../side-bar/store';
-import { BrandPageModel } from '@brand-page/models';
+import { BrandPageModel, } from '@brand-page/models';
 import { migrateBrandPageModel } from '@brand-page/utils';
 import { getAiContentIndexByTemplateTokenAndNumberOfVariations } from '@brand-page-maker/utils/ai-content-selection.util';
 import { useUiEditableLogoStore, useUiLogoSettingsStore, } from '../../logo-settings/store';
@@ -20,6 +20,7 @@ const POST_PURCHASE_PAGE_SECTION_BY_TAB = {
 };
 const PRE_PURCHASE_PAGE_SECTION_BY_TAB = {
     [TEMPLATE_TABS.all]: 'MakerPrePurchaseSidebarTemplatesAllTab',
+    [TEMPLATE_TABS.AI]: 'MakerPrePurchaseSidebarTemplatesAiTab',
     [TEMPLATE_TABS.categories]: 'MakerPrePurchaseSidebarTemplatesCategoryTab',
 };
 const LOAD_PAGE_RETRY_DELAY = 250;
@@ -38,6 +39,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                 displayName: templateSettingsTr(`headerAll`),
             },
             searchTerm: undefined,
+            searchPersonalisationData: undefined,
             selectedCategory: undefined,
             templateCategories: [],
             tabsWithTranslations: [
@@ -200,15 +202,21 @@ 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 &&
+                // With no user search, the All tab must still show industry-relevant templates rather than
+                // generic ones (searchIndustries alone doesn't rank the non-AI half). Seed searchTerm as an
+                // invisible default: pre-purchase has no logo to read an industry from, so it uses the seeded
+                // keyword from the URL/cookie (bp-5454); post-purchase falls back to the logo draft's industry
+                // (bp-5789). Once the user searches, this.searchTerm takes over. this.searchTerm stays unset
+                // here, so AI content-key resolution below is unaffected.
+                const useSeededSearchTerm = !this.searchTerm &&
                     !this.selectedCategory &&
-                    isPrePurchase &&
                     isBrandSite &&
-                    this.selectedTab.key === TEMPLATE_TABS.all
+                    this.selectedTab.key === TEMPLATE_TABS.all;
+                const seededSearchTerm = isPrePurchase
                     ? this.initialSearchTerm
+                    : brandPageMakerStore.industry;
+                const effectiveSearchTerm = useSeededSearchTerm
+                    ? seededSearchTerm
                     : this.searchTerm;
                 const pageSection = isBrandSite
                     ? (isPrePurchase
@@ -254,6 +262,22 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                         eventTracker.sendExperimentStartedEvent(experimentName, experimentValue);
                     }
                 }
+                // searchPersonalisation is a per-search payload established on page 1; only set it there
+                // (like abTestValuesToBePushed above) so paginating to page 2+ can't reset it to undefined.
+                // Every context change (search/clear/category/logo swap) reloads from page 1, so this still
+                // clears stale search content on a new search.
+                //
+                // Set BEFORE the mapping loop so tiles and the apply path read the same value — reading the
+                // per-page `result.searchPersonalisation` here made page-2 tiles fall back to page-load
+                // content while applying used page-1 search content.
+                //
+                // Empty [] is stored as undefined: it wins `??` but fails `?.length`, so it would strand
+                // the downstream fallback to uiStore.personalisationData and silently skip the apply.
+                if (pageNo === 1) {
+                    this.searchPersonalisationData = result.searchPersonalisation?.length
+                        ? result.searchPersonalisation
+                        : undefined;
+                }
                 const templates = await Promise.all(result.paginatedItems.map(async (item) => {
                     try {
                         if (brandPageMakerUserStore.isAdmin) {
@@ -263,14 +287,15 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                         else {
                             let personalisationContentIndex;
                             let contentKey;
-                            if (uiStore.personalisationData?.length) {
+                            const activePersonalisation = this.searchPersonalisationData ?? uiStore.personalisationData;
+                            if (activePersonalisation?.length) {
                                 personalisationContentIndex =
-                                    await getAiContentIndexByTemplateTokenAndNumberOfVariations(item.designTemplateToken, uiStore.personalisationData.length);
+                                    await getAiContentIndexByTemplateTokenAndNumberOfVariations(item.designTemplateToken, activePersonalisation.length);
                                 contentKey =
-                                    uiStore.personalisationData[personalisationContentIndex]
+                                    activePersonalisation[personalisationContentIndex]
                                         .contentKey;
                             }
-                            else if (item.isPersonalisable) {
+                            else if (item.isPersonalisable && !this.searchTerm) {
                                 // Pre-purchase has no personalisationData; personalise AI
                                 // template previews with the prompt content key (bp-5742).
                                 contentKey = uiStore.userPromptContentKey;
@@ -279,10 +304,9 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                                 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).
+                                // userPromptContentKey signals the content lives in the userPrompt S3
+                                // bucket (post- or pre-purchase); the preview must resolve via
+                                // userPromptContentKey, not the regular bucket (bp-5454).
                                 usesUserPromptContentKey: !!uiStore.userPromptContentKey,
                                 previewImageUrl: item.previewImageUrl,
                             };
@@ -294,12 +318,21 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                 }));
                 // Filter out null templates before adding
                 const validTemplates = templates.filter((t) => t !== null);
-                // 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;
+                let displayTemplates = validTemplates;
+                // The All tab shows backend-interleaved AI templates (gated server-side on the AB
+                // variation) even when the dedicated AI tab is hidden — e.g. regular templates
+                // pre-purchase (bp-5789). So only strip AI when the AI tab is hidden AND we're not on
+                // the All tab; the backend is the interleave gate, control buckets return no AI here.
+                if (!uiStore.showAiTemplatesTab &&
+                    this.selectedTab.key !== TEMPLATE_TABS.all) {
+                    displayTemplates = displayTemplates.filter((t) => !t.isPersonalisable);
+                }
+                else if (this.selectedTab.key === TEMPLATE_TABS.categories) {
+                    displayTemplates = displayTemplates.map((t) => ({
+                        ...t,
+                        isPersonalisable: false,
+                    }));
+                }
                 this._addTemplates({ templates: displayTemplates });
                 this._setPageNoLoaded({ pageNoLoaded: pageNo });
             }
@@ -364,6 +397,10 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             await this._setSearchTerm({
                 searchTerm: payload.searchTerm,
             });
+            // Drive AI industry selection from the typed term; fall back to the
+            // seeded keyword on clear so the AI tab doesn't go generic (bp-5789).
+            this.aiTemplateKeywords =
+                payload.searchTerm || this.initialSearchTerm || '';
             this.onSearchTermChanged?.(payload.searchTerm);
             await this._setPageNo({ pageNo: 1 });
             await this.loadPageNo({ pageNo: 1 });
@@ -434,14 +471,25 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                 if (!oldLogoImage) {
                     return;
                 }
-                // Only refetch for post-purchase users and when logo actually changes
+                // Refetch previews on any logo change (pre- and post-purchase) so the new logo
+                // shows in the thumbnails.
                 const hasLogoChanged = newLogoImage.logoDraftToken !== oldLogoImage.logoDraftToken ||
                     newLogoImage.logoVariation !== oldLogoImage.logoVariation;
                 if (!brandPageMakerUserStore.isAdmin &&
                     newLogoImage.logoDraftToken &&
                     hasLogoChanged) {
-                    // Reset templates state and reload with new logo
-                    // Use the same pattern as onCategorySelected and onSearch
+                    const uiStore = useUiStore();
+                    const isPrePurchase = useBrandPageContainerStore().isPrePurchase;
+                    uiStore.setUserPersonalisationData({
+                        personalisationData: undefined,
+                    });
+                    if (!isPrePurchase &&
+                        newLogoImage.logoDraftToken !== oldLogoImage.logoDraftToken) {
+                        uiStore.setUserPromptContentKey({
+                            userPromptContentKey: undefined,
+                        });
+                        uiStore.setShowAiTemplatesTab({ showAiTemplatesTab: false });
+                    }
                     await this._setTemplates({ templates: [] });
                     await this._setPageNoLoaded({ pageNoLoaded: 0 });
                     await this._setPageNo({ pageNo: 1 });

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

@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             mode: import("../models").UiScreenSizeMode;
         }): void;
         setUserPersonalisationData({ personalisationData, }: {
-            personalisationData: import("../../brand-page").UserPersonalisationContent[];
+            personalisationData: import("../../brand-page").UserPersonalisationContent[] | undefined;
         }): void;
         setUserPromptContentKey({ userPromptContentKey, }: {
             userPromptContentKey: string | undefined;

package/lib/src/utils/minify-brand-page-metadata.js

@@ -1,5 +1,5 @@
 import { BRAND_PAGE_TYPES, } from '../brand-page/models';
-import { hasRTEContent, isTiptapDocument } from '../brand-page-maker/utils';
+import { hasRTEContent } from '../brand-page-maker/utils';
 import { useExternalRichTextEditor } from '../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import { findAssetKey, resolveLogoData, } from './build-asset-manifest';
 const BUTTON_TYPES = [
@@ -17,9 +17,6 @@ const BUTTON_TYPES = [
     'tiktok',
 ];
 const convertText = (value, editor) => {
-    // Already Tiptap JSON (BP-5787 storage) — keep as-is.
-    if (isTiptapDocument(value))
-        return value;
     if (typeof value !== 'string' || !value)
         return undefined;
     if (hasRTEContent(value)) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.1.1-json-prereq-3",
+  "version": "6.1.1",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -74,20 +74,19 @@
     "@designcrowd/fe-shared-lib": "2.0.9",
     "@pinia/nuxt": "0.11.3",
     "@storybook/react": "9.0.4",
-    "@tiptap/extension-bubble-menu": "3.28.0",
-    "@tiptap/extension-character-count": "3.28.0",
-    "@tiptap/extension-color": "3.28.0",
-    "@tiptap/extension-font-family": "3.28.0",
-    "@tiptap/extension-hard-break": "3.28.0",
-    "@tiptap/extension-highlight": "3.28.0",
-    "@tiptap/extension-link": "3.28.0",
-    "@tiptap/extension-placeholder": "3.28.0",
-    "@tiptap/extension-text-align": "3.28.0",
-    "@tiptap/extension-text-style": "3.28.0",
-    "@tiptap/extension-underline": "3.28.0",
-    "@tiptap/starter-kit": "3.28.0",
-    "@tiptap/static-renderer": "3.28.0",
-    "@tiptap/vue-3": "3.28.0",
+    "@tiptap/extension-bubble-menu": "^2.14.0",
+    "@tiptap/extension-character-count": "2.11.7",
+    "@tiptap/extension-color": "2.11.5",
+    "@tiptap/extension-font-family": "2.11.5",
+    "@tiptap/extension-hard-break": "2.12.0",
+    "@tiptap/extension-highlight": "2.11.5",
+    "@tiptap/extension-link": "2.11.5",
+    "@tiptap/extension-placeholder": "2.11.5",
+    "@tiptap/extension-text-align": "2.11.5",
+    "@tiptap/extension-text-style": "2.11.5",
+    "@tiptap/extension-underline": "2.11.5",
+    "@tiptap/starter-kit": "2.11.5",
+    "@tiptap/vue-3": "2.11.5",
     "axios": "1.13.5",
     "chroma-js": "2.4.2",
     "click-outside-vue3": "4.0.1",
@@ -105,7 +104,6 @@
     "http-proxy-middleware": "2.0.6",
     "i18next": "25.8.5",
     "jquery": "3.7.1",
-    "jsdom": "27.4.0",
     "lodash.clonedeep": "4.5.0",
     "lodash.debounce": "4.0.8",
     "lodash.throttle": "4.1.1",
@@ -168,7 +166,6 @@
     "@types/google.maps": "3.65.1",
     "@types/istanbul-lib-report": "3.0.3",
     "@types/jquery": "3.5.33",
-    "@types/jsdom": "21.1.6",
     "@types/lodash.clonedeep": "4.5.9",
     "@types/mssql": "9.1.9",
     "@types/multer": "1.4.11",
@@ -207,6 +204,7 @@
     "imports-loader": "5.0.0",
     "jest-image-snapshot": "6.5.1",
     "js-base64": "3.7.8",
+    "jsdom": "27.4.0",
     "jsdom-global": "3.0.2",
     "lint-staged": "15.2.0",
     "mini-css-extract-plugin": "2.10.0",