@designcrowd/library.brand-page 5.19.0 → 5.19.1-error-html2canvas-2

package/src/shared/page-settings/store/page-settings-store.test.ts

@@ -3,7 +3,7 @@ import type Vue from 'vue';
 import { createApp } from 'vue';
 import { createPinia, setActivePinia } from 'pinia';
 import type { ContentPage } from '../models';
-import type { PageModel, TextContent } from '@brand-page';
+import type { TextContent } from '@brand-page';
 import type { ContentItem } from '../../content-settings/models';
 import {
   UNLIMITED_MAX_NUM_OF_PAGES,
@@ -13,15 +13,11 @@ import {
 import {
   INITIALISE_PAYLOAD,
   USER_FEATURES,
-  brandPageEmpty,
 } from '@brand-page-maker/components/brand-page-maker/__fixtures__';
 import { useUiPageSettingsStore } from './index';
-import { useUiContentSettingsStore } from '../../content-settings/store';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { setLocaleAsync } from '@src/composables/useTranslate';
 import { usePageNavigationStore } from '@src/shared/page-navigation/store/page-navigation-store';
-import { getPageSlugFromPageTitle } from '@src/lib';
-import { v4 as uuid } from 'uuid';
 
 vi.mock('../../../clients/brand-page-client', () => ({
   default: {
@@ -50,7 +46,7 @@ const PAGE_TWO = createPage(2);
 const PAGE_THREE = createPage(3);
 
 describe('page store module', () => {
-  let app: Vue.App;
+  let _app: Vue.App;
 
   beforeAll(async () => {
     FabricRenderClient.setInstance({ baseUrl: 'http://localhost:3000' });
@@ -63,7 +59,7 @@ describe('page store module', () => {
 
     await setLocaleAsync('en-US');
 
-    app = createApp({
+    _app = createApp({
       pinia,
       router,
     });
@@ -166,7 +162,7 @@ describe('page store module', () => {
       pages: [PAGE_ONE, PAGE_TWO],
     });
 
-    const firstPage = pageSettingsStore.addNewPage({
+    pageSettingsStore.addNewPage({
       title: 'Page 3',
     });
 

package/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.ts

@@ -17,7 +17,6 @@ import {
   useEventTracker,
 } from '@brand-page-maker/composables/useEventTracker';
 import { publishBrandPageModalWithStateTr } from '@src/composables/useTranslate';
-import { BRAND_PAGE_TYPES } from '@brand-page/models';
 
 export default defineComponent({
   props: {

package/src/shared/shape-library/ShapeLibrary.vue

@@ -203,8 +203,8 @@ const makerMode = computed(() =>
     ? `admin_${makerStore.brandPageType.toLocaleLowerCase()}`
     : makerStore.brandPageType.toLocaleLowerCase(),
 );
-const endpoints = computed(() => uiStore.endpoints);
-const thirdPartySettings = computed(() => uiStore.thirdPartySettings);
+const _endpoints = computed(() => uiStore.endpoints);
+const _thirdPartySettings = computed(() => uiStore.thirdPartySettings);
 const isDesignCom = computed(() => containerStore.isDesignCom);
 
 const tabsWithTranslations = [

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

@@ -230,7 +230,7 @@ export const useUiStyleSettingsStore = defineStore('uiStyleSettings', {
       type: TextStyleType;
       style: TextStyleDeclaration;
     }) {
-      const { textAlign, textStyleType, ...style } = payload.style;
+      const { ...style } = payload.style;
 
       this.$patch((state) => {
         state.textStyles.textStyleOptions[payload.type].isModified = true;

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;
 }
 

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);
     },

package/src/shared/unsplash-library/UnsplashLibrary.vue

@@ -103,7 +103,7 @@
     </div>
     <p class="tw-mt-4 tw-text-xs tw-text-grayscale-600">
       {{ tr('poweredBy') }}
-      <a
+        <a
 href="https://unsplash.com"
 class="maker-anchor tw-no-underline"
         >Unsplash</a
@@ -114,11 +114,7 @@ class="maker-anchor tw-no-underline"
 <script>
 import UnsplashLibraryMixin from './UnsplashLibrary.mixin.ts';
 import { Button, Loader, TextInput } from '@designcrowd/fe-shared-lib';
-import {
-  tr,
-  commonTr,
-  unsplashImageCategoriesTr,
-} from '@src/composables/useTranslate';
+import { tr, commonTr } from '@src/composables/useTranslate';
 
 export default {
   components: {

package/src/shared/video-library/VideoLibrary.vue

@@ -151,7 +151,7 @@ interface Props {
   isMobile?: boolean;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   isMobile: false,
 });
 

package/src/utils/minify-brand-page-metadata.ts

@@ -205,7 +205,17 @@ const minifyContent = (
   editor: Editor,
   assets?: AssetEntry[],
 ): MinifiedContent => {
-  const base: MinifiedContent = { id: content.id, type: content.type };
+  const base: MinifiedContent = {
+    id: content.id,
+    type: content.type,
+    // Padding Control (BP-5687) — shared across every block, persist when set.
+    ...(typeof content.topPadding === 'number' && {
+      topPadding: content.topPadding,
+    }),
+    ...(typeof content.bottomPadding === 'number' && {
+      bottomPadding: content.bottomPadding,
+    }),
+  };
   const c = content as any;
 
   // Helper: include imageUrl and its asset key if available

package/lib/src/brand-page/components/testimonial-section/TestimonialSection.mixin.js

@@ -1,112 +0,0 @@
-import { defineComponent } from 'vue';
-import ComponentCommonMixin from '../mixins/component-common.mixin';
-import { getRenderText } from '@brand-page/utils';
-import debounce from 'lodash.debounce';
-import { DEVICE_CSS_TRANSITION_DELAY } from '@brand-page-maker/constants';
-const DEBOUNCE_WAIT_MS = 100;
-export default defineComponent({
-    mixins: [ComponentCommonMixin],
-    props: {
-        viewModel: {
-            type: Object,
-            required: true,
-        },
-        isPreview: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-        context: {
-            type: Object,
-            required: true,
-        },
-        contentIndex: {
-            type: Number,
-            required: false,
-            default: undefined,
-        },
-    },
-    data() {
-        return {
-            debouncedForceCarouselUpdate: undefined,
-            carouselRef: 'testimonial-carousel',
-        };
-    },
-    created() {
-        this.debouncedForceCarouselUpdate = debounce(() => {
-            this.forceCarouselUpdate();
-        }, DEBOUNCE_WAIT_MS);
-    },
-    computed: {
-        textAlignClass() {
-            return {
-                'c_testimonial-big-image-text-item': this.viewModel.displayStyle === 'big-image',
-                'tw-mb-2': this.viewModel.displayStyle !== 'big-image',
-            };
-        },
-        navigationUniqueIndexer() {
-            return `testimonial-${this.viewModel.id}`;
-        },
-        swiperOptions() {
-            return {
-                autoHeight: true,
-                navigation: {
-                    prevEl: `.carousel__button-prev--${this.navigationUniqueIndexer}`,
-                    nextEl: `.carousel__button-next--${this.navigationUniqueIndexer}`,
-                },
-                pagination: {
-                    el: `.pagination--${this.navigationUniqueIndexer}`,
-                    clickable: true,
-                },
-            };
-        },
-    },
-    methods: {
-        renderText(val) {
-            if (val) {
-                return getRenderText(val);
-            }
-            return '';
-        },
-        forceCarouselUpdate() {
-            const shouldUpdateCarousel = Boolean(this.isPreview &&
-                (this.viewModel.items.length > 1 ||
-                    this.viewModel.displayStyle === 'big-image') &&
-                this.$refs[this.carouselRef]);
-            if (shouldUpdateCarousel) {
-                this.$refs[this.carouselRef].update();
-                return true;
-            }
-            return false;
-        },
-        forceCarouselUpdateSlideWidth() {
-            if (this.forceCarouselUpdate()) {
-                try {
-                    const width = this.$refs[this.carouselRef].swiper.slidesEl.scrollWidth;
-                    this.$refs[this.carouselRef].swiper.slidesEl.children.forEach((slide) => {
-                        const slideWidth = parseFloat(slide.style.width);
-                        if (slideWidth !== width) {
-                            slide.style.width = width + 'px';
-                        }
-                    });
-                }
-                catch (error) {
-                    console.warn('Testimonial: Unable to auto update slide width');
-                }
-            }
-        },
-    },
-    watch: {
-        viewModel: {
-            handler() {
-                this.debouncedForceCarouselUpdate();
-            },
-            deep: true,
-        },
-        isMobileDevice(next, old) {
-            if (next !== old) {
-                setTimeout(this.forceCarouselUpdateSlideWidth, DEVICE_CSS_TRANSITION_DELAY + 1);
-            }
-        },
-    },
-});

package/src/brand-page/components/testimonial-section/TestimonialSection.mixin.ts

@@ -1,132 +0,0 @@
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-import ComponentCommonMixin from '../mixins/component-common.mixin';
-import type { TestimonialSectionViewModel } from '@brand-page/view-models';
-import type { BrandPageContext } from '@brand-page/models';
-import { getRenderText } from '@brand-page/utils';
-import type { DebounceHandle } from 'lodash.debounce';
-import debounce from 'lodash.debounce';
-import { DEVICE_CSS_TRANSITION_DELAY } from '@brand-page-maker/constants';
-
-const DEBOUNCE_WAIT_MS = 100;
-
-export default defineComponent({
-  mixins: [ComponentCommonMixin],
-  props: {
-    viewModel: {
-      type: Object as PropType<TestimonialSectionViewModel>,
-      required: true,
-    },
-    isPreview: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    context: {
-      type: Object as PropType<BrandPageContext>,
-      required: true,
-    },
-    contentIndex: {
-      type: Number,
-      required: false,
-      default: undefined,
-    },
-  },
-  data() {
-    return {
-      debouncedForceCarouselUpdate: undefined as DebounceHandle | undefined,
-      carouselRef: 'testimonial-carousel',
-    };
-  },
-  created() {
-    this.debouncedForceCarouselUpdate = debounce(() => {
-      this.forceCarouselUpdate();
-    }, DEBOUNCE_WAIT_MS);
-  },
-  computed: {
-    textAlignClass() {
-      return {
-        'c_testimonial-big-image-text-item':
-          this.viewModel.displayStyle === 'big-image',
-        'tw-mb-2': this.viewModel.displayStyle !== 'big-image',
-      };
-    },
-    navigationUniqueIndexer() {
-      return `testimonial-${this.viewModel.id}`;
-    },
-    swiperOptions() {
-      return {
-        autoHeight: true,
-        navigation: {
-          prevEl: `.carousel__button-prev--${this.navigationUniqueIndexer}`,
-          nextEl: `.carousel__button-next--${this.navigationUniqueIndexer}`,
-        },
-        pagination: {
-          el: `.pagination--${this.navigationUniqueIndexer}`,
-          clickable: true,
-        },
-      };
-    },
-  },
-  methods: {
-    renderText(val: string): string {
-      if (val) {
-        return getRenderText(val);
-      }
-
-      return '';
-    },
-    forceCarouselUpdate() {
-      const shouldUpdateCarousel = Boolean(
-        this.isPreview &&
-          (this.viewModel.items.length > 1 ||
-            this.viewModel.displayStyle === 'big-image') &&
-          this.$refs[this.carouselRef],
-      );
-
-      if (shouldUpdateCarousel) {
-        this.$refs[this.carouselRef].update();
-
-        return true;
-      }
-
-      return false;
-    },
-    forceCarouselUpdateSlideWidth() {
-      if (this.forceCarouselUpdate()) {
-        try {
-          const width =
-            this.$refs[this.carouselRef].swiper.slidesEl.scrollWidth;
-
-          this.$refs[this.carouselRef].swiper.slidesEl.children.forEach(
-            (slide: HTMLElement) => {
-              const slideWidth = parseFloat(slide.style.width);
-
-              if (slideWidth !== width) {
-                slide.style.width = width + 'px';
-              }
-            },
-          );
-        } catch (error) {
-          console.warn('Testimonial: Unable to auto update slide width');
-        }
-      }
-    },
-  },
-  watch: {
-    viewModel: {
-      handler() {
-        this.debouncedForceCarouselUpdate();
-      },
-      deep: true,
-    },
-    isMobileDevice(next, old) {
-      if (next !== old) {
-        setTimeout(
-          this.forceCarouselUpdateSlideWidth,
-          DEVICE_CSS_TRANSITION_DELAY + 1,
-        );
-      }
-    },
-  },
-});