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

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

@@ -1,7 +1,7 @@
 import { TEMPLATE_TABS } from '../models';
 import * as DesignTemplateClient from '../../../clients/design-template-client';
 import {} from '../../../clients/models';
-import { BP_DEFAULT_TEMPLATE_TYPE_NAME, SIDE_BAR_TAB_NAMES, } from '@brand-page-maker/constants';
+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';
 import { useBrandPageContainerStore, useBrandPageMakerStore, useBrandPageMakerUserStore, useLogoStore, useUiStore, } from '@brand-page-maker/stores';
 import { useUiSideBarStore } from '../../side-bar/store';
@@ -9,9 +9,19 @@ 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';
+import { useEventTracker } from '@brand-page-maker/composables/useEventTracker';
 import { templateSettingsTr, getCurrentLocale, } from '@src/composables/useTranslate';
 import { watch } from 'vue';
 export const DEFAULT_PAGE_SIZE = 6;
+const POST_PURCHASE_PAGE_SECTION_BY_TAB = {
+    [TEMPLATE_TABS.all]: 'MakerPostPurchaseSidebarTemplatesAllTab',
+    [TEMPLATE_TABS.AI]: 'MakerPostPurchaseSidebarTemplatesAiTab',
+    [TEMPLATE_TABS.categories]: 'MakerPostPurchaseSidebarTemplatesCategoryTab',
+};
+const PRE_PURCHASE_PAGE_SECTION_BY_TAB = {
+    [TEMPLATE_TABS.all]: 'MakerPrePurchaseSidebarTemplatesAllTab',
+    [TEMPLATE_TABS.categories]: 'MakerPrePurchaseSidebarTemplatesCategoryTab',
+};
 const LOAD_PAGE_RETRY_DELAY = 250;
 export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
     state: () => {
@@ -47,6 +57,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             cachedTemplates: {},
             logoChangeWatcherInitialized: false,
             initialSearchTerm: undefined,
+            aiTemplateKeywords: undefined,
             onSearchTermChanged: undefined,
         };
     },
@@ -187,27 +198,65 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                     }
                 }
                 const editableLogoVariation = editableLogoStore.editableLogoVariations[logoVariation];
-                const result = await designTemplateClient.getTemplateItemsByTemplateType(this.templateType, {
+                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,
-                    pageSize: DEFAULT_PAGE_SIZE,
                     categoryName: this.selectedCategory,
-                    searchTerm: this.searchTerm,
+                    searchTerm: effectiveSearchTerm,
+                    keywords: this.aiTemplateKeywords,
                     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,
+                    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, {
+                    ...baseParams,
+                    pageSize: DEFAULT_PAGE_SIZE,
+                    personalisable: this.selectedTab.key === TEMPLATE_TABS.AI,
                 });
                 if (!result) {
                     return;
                 }
                 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);
                             return this.safeMapToTemplateSettingsTemplate(template);
                         }
@@ -217,14 +266,24 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                             if (uiStore.personalisationData?.length) {
                                 personalisationContentIndex =
                                     await getAiContentIndexByTemplateTokenAndNumberOfVariations(item.designTemplateToken, 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,
                             };
                         }
@@ -235,7 +294,13 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                 }));
                 // Filter out null templates before adding
                 const validTemplates = templates.filter((t) => 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 {
@@ -339,6 +404,9 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             this.initialSearchTerm = payload.initialSearchTerm;
             this.onSearchTermChanged = payload.onSearchTermChanged;
         },
+        setAiTemplateKeywords(payload) {
+            this.aiTemplateKeywords = payload.aiTemplateKeywords;
+        },
         notifySearchTermChanged(searchTerm) {
             this.onSearchTermChanged?.(searchTerm);
         },

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

@@ -1,4 +1,3 @@
-/// <reference types="types/lodash-shims" />
 import UnsplashClient from '../../clients/unsplash-client';
 import { type DebounceHandle } from 'lodash.debounce';
 interface PreviewUrls {
@@ -30,14 +29,20 @@ declare const _default: import("vue").DefineComponent<{}, {
             thirdPartySettings: import("../models").UIRootStateThirdPartySettings;
         }): void;
         setDeviceMode({ mode }: {
-            mode: "desktop" | "mobile";
+            mode: import("../models").UiDeviceMode;
         }): void;
         setScreenSizeMode({ mode }: {
-            mode: "desktop" | "mobile";
+            mode: import("../models").UiScreenSizeMode;
         }): void;
         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;
@@ -50,7 +55,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             type: string;
         }): Promise<void>;
         onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
-        showUpgradeModalAndSaveAsync(contextualUpgradeType?: string | number | symbol | undefined): Promise<void>;
+        showUpgradeModalAndSaveAsync(contextualUpgradeType?: import("@brand-page-maker/stores").WebsiteContextUpgradeType): Promise<void>;
         setIsPersonalisationEnabled({ isPersonalisationEnabled, }: {
             isPersonalisationEnabled: boolean;
         }): void;

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

@@ -87,7 +87,17 @@ const findAssetKey = (assets, data) => {
     return assets.find((a) => a.data === data)?.key;
 };
 const minifyContent = (content, editor, assets) => {
-    const base = { id: content.id, type: content.type };
+    const base = {
+        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;
     // Helper: include imageUrl and its asset key if available
     const includeImageWithKey = (url, urlField = 'imageUrl', keyField = 'imageAssetKey') => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.19.0",
+  "version": "5.19.1-error-html2canvas-2",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -55,9 +55,9 @@
     "pre-push": "npm run test"
   },
   "dependencies": {
-    "@ckpack/vue-color": "1.4.1",
-    "@designcrowd/fe-shared-lib": "1.8.14",
-    "@pinia/nuxt": "0.11.0",
+    "@ckpack/vue-color": "1.6.0",
+    "@designcrowd/fe-shared-lib": "2.0.0",
+    "@pinia/nuxt": "0.11.3",
     "@storybook/react": "9.0.4",
     "@tiptap/extension-bubble-menu": "^2.14.0",
     "@tiptap/extension-character-count": "2.11.7",
@@ -72,41 +72,42 @@
     "@tiptap/extension-underline": "2.11.5",
     "@tiptap/starter-kit": "2.11.5",
     "@tiptap/vue-3": "2.11.5",
-    "axios": "1.6.7",
+    "axios": "1.13.5",
     "chroma-js": "2.4.2",
     "click-outside-vue3": "4.0.1",
-    "color": "5.0.0",
+    "color": "5.0.3",
     "config": "3.3.10",
-    "core-js": "3.35.1",
+    "core-js": "3.48.0",
     "css-color-names": "1.0.1",
     "date-utils": "1.2.21",
     "deepmerge": "4.3.1",
-    "dompurify": "3.2.6",
+    "dompurify": "3.3.1",
     "dropzone-vue3": "1.0.2",
     "express": "4.18.2",
-    "fs-extra": "11.2.0",
-    "http-errors": "2.0.0",
+    "fs-extra": "11.3.3",
+    "http-errors": "2.0.1",
     "http-proxy-middleware": "2.0.6",
-    "i18next": "25.2.1",
+    "i18next": "25.8.5",
     "jquery": "3.7.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.debounce": "4.0.8",
     "lodash.throttle": "4.1.1",
     "lodash.uniq": "4.5.0",
-    "nuxt": "3.17.4",
-    "pinia": "3.0.2",
+    "nuxt": "4.4.5",
+    "pinia": "3.0.4",
     "portal-vue": "3.0.0",
     "raygun": "0.13.2",
-    "raygun4js": "3.0.0",
+    "raygun4js": "3.1.4",
     "regenerator-runtime": "0.14.1",
     "slugify": "1.6.6",
     "svg-parser": "2.0.4",
     "uuid": "9.0.1",
-    "validator": "13.11.0",
-    "vue": "3.5.15",
+    "validator": "13.15.26",
+    "vue": "3.5.35",
     "vue-cropperjs": "5.0.0",
-    "vue-router": "4.5.0",
+    "vue-router": "5.1.0",
     "vue-select": "4.0.0-beta.6",
+    "unstorage": "^1.17.5",
     "vue3-lazy-hydration": "1.2.1",
     "vue3-shortkey": "4.0.0",
     "vuedraggable": "4.1.0",
@@ -123,49 +124,49 @@
   "optionalDependencies": {
     "@esbuild/darwin-arm64": "0.27.1",
     "@esbuild/linux-x64": "0.27.1",
-    "@rollup/rollup-linux-arm64-gnu": "4.12.0",
-    "@rollup/rollup-linux-x64-gnu": "4.12.0"
+    "@rollup/rollup-linux-arm64-gnu": "4.43.0",
+    "@rollup/rollup-linux-x64-gnu": "4.43.0"
   },
   "devDependencies": {
     "@faker-js/faker": "8.4.0",
     "@frsource/cypress-plugin-visual-regression-diff": "3.3.10",
-    "@nuxt/test-utils": "3.19.1",
-    "@nuxt/types": "2.17.3",
+    "@nuxt/test-utils": "4.0.0",
+    "@nuxt/types": "2.18.1",
     "@nuxt/typescript-build": "3.0.2",
     "@storybook/addon-themes": "9.0.4",
     "@storybook/vue3": "9.0.4",
     "@storybook/vue3-vite": "9.0.4",
     "@stylistic/eslint-plugin": "1.5.4",
     "@types/axios-mock-adapter": "1.10.0",
-    "@types/braces": "3.0.4",
+    "@types/braces": "3.0.5",
     "@types/dompurify": "3.2.0",
     "@types/express": "4.17.21",
     "@types/faker": "6.6.8",
     "@types/google.maps": "3.65.1",
     "@types/istanbul-lib-report": "3.0.3",
-    "@types/jquery": "3.5.30",
+    "@types/jquery": "3.5.33",
     "@types/lodash.clonedeep": "4.5.9",
-    "@types/mssql": "9.1.4",
+    "@types/mssql": "9.1.9",
     "@types/multer": "1.4.11",
     "@types/raygun4js": "3.0.0",
     "@types/react": "18.2.48",
     "@types/resize-observer-browser": "0.1.11",
-    "@types/stripe-v3": "3.1.32",
+    "@types/stripe-v3": "3.1.33",
     "@types/svg-parser": "2.0.6",
-    "@types/uglify-js": "3.17.4",
-    "@types/unist": "3.0.2",
+    "@types/uglify-js": "3.17.5",
+    "@types/unist": "3.0.3",
     "@types/uuid": "9.0.8",
-    "@types/validator": "13.11.8",
+    "@types/validator": "13.15.10",
     "@types/yargs-parser": "21.0.3",
     "@typescript-eslint/eslint-plugin": "6.20.0",
     "@typescript-eslint/parser": "6.20.0",
-    "@vitejs/plugin-vue": "5.2.4",
+    "@vitejs/plugin-vue": "6.0.7",
     "@vue/eslint-config-typescript": "12.0.0",
-    "@vue/test-utils": "2.4.4",
-    "autoprefixer": "10.4.17",
+    "@vue/test-utils": "2.4.6",
+    "autoprefixer": "10.4.24",
     "axios-mock-adapter": "1.22.0",
     "copyfiles": "2.4.1",
-    "cors": "2.8.5",
+    "cors": "2.8.6",
     "cross-env": "7.0.3",
     "css-loader": "6.9.1",
     "cypress": "13.6.3",
@@ -173,50 +174,50 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-friendly-formatter": "4.0.1",
     "eslint-plugin-cypress": "2.15.1",
-    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-prettier": "5.5.5",
     "eslint-plugin-vue": "9.21.1",
     "file-loader": "6.2.0",
-    "happy-dom": "14.12.3",
-    "html-loader": "5.0.0",
-    "husky": "9.0.7",
+    "happy-dom": "20.6.1",
+    "html-loader": "5.1.0",
+    "husky": "9.1.7",
     "imports-loader": "5.0.0",
-    "jest-image-snapshot": "6.4.0",
-    "js-base64": "3.7.6",
-    "jsdom": "24.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.7.7",
-    "msw": "2.3.1",
-    "msw-storybook-addon": "2.0.3",
+    "mini-css-extract-plugin": "2.10.0",
+    "msw": "2.12.10",
+    "msw-storybook-addon": "2.0.6",
     "multer": "1.4.3",
-    "nodemon": "3.0.3",
+    "nodemon": "3.1.11",
     "npm-run-all": "4.1.5",
     "nyc": "15.1.0",
     "performance-now": "2.1.0",
-    "picocolors": "1.0.0",
-    "playwright-core": "1.47.0",
-    "postcss": "8.4.38",
-    "postcss-cli": "11.0.0",
-    "postcss-loader": "8.0.0",
+    "picocolors": "1.1.1",
+    "playwright-core": "1.58.2",
+    "postcss": "8.5.6",
+    "postcss-cli": "11.0.1",
+    "postcss-loader": "8.2.0",
     "postcss-nested": "6.0.1",
     "postcss-prefix-selector": "1.16.0",
-    "prettier": "3.2.4",
+    "prettier": "3.8.1",
     "request": "2.88.2",
     "rimraf": "5.0.5",
-    "rollup-plugin-visualizer": "5.12.0",
+    "rollup-plugin-visualizer": "6.0.11",
     "run-func": "3.0.0",
     "shx": "0.3.4",
     "storybook": "9.0.4",
     "style-loader": "3.3.4",
     "tailwindcss": "3.4.1",
     "timsort": "0.3.0",
-    "ts-loader": "9.5.1",
+    "ts-loader": "9.5.4",
     "ts-node": "10.9.2",
-    "typescript": "5.3.3",
-    "vite": "6.3.5",
+    "typescript": "5.9.3",
+    "vite": "7.3.5",
     "vite-plugin-commonjs": "0.10.4",
-    "vite-plugin-node-polyfills": "0.23.0",
-    "vitest": "3.1.4",
+    "vite-plugin-node-polyfills": "0.25.0",
+    "vitest": "4.0.18",
     "vue-eslint-parser": "9.4.2",
     "vue-loader": "17.4.2",
     "vue-style-loader": "4.1.3",
@@ -225,7 +226,10 @@
   "overrides": {
     "@achrinza/node-ipc": "10.1.10",
     "@parcel/watcher": "2.1.0",
-    "rollup-plugin-visualizer": "5.12.0",
+    "@storybook/vue3-vite": {
+      "vite": "$vite"
+    },
+    "rollup-plugin-visualizer": "6.0.11",
     "vite": {
       "rollup": "npm:@rollup/wasm-node"
     }
@@ -244,4 +248,4 @@
       "public"
     ]
   }
-}
+}

package/src/brand-page/components/about-section/AboutSection.vue

@@ -7,9 +7,10 @@
     <div
       :class="{
         'about-container': context.isBrandSite,
-        'about-container--padding tw-py-10': !isFullImage,
+        'about-container--padding': !isFullImage,
         'mobile-about-container--padding': isFullImage,
       }"
+      :style="contentPaddingStyle"
     >
       <Media
         v-if="
@@ -103,7 +104,10 @@
 import { computed } from 'vue';
 import type { AboutSectionViewModel } from '@brand-page/view-models';
 import type { BrandPageContext } from '@brand-page/models';
-import { getRenderText } from '@brand-page/utils';
+import {
+  getRenderText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import Media from '../media/Media.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
@@ -123,6 +127,10 @@ const props = withDefaults(
   },
 );
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const isFullImage = computed(
   () =>
     props.viewModel.displayStyle === 'right-aligned-full-image' ||
@@ -201,7 +209,6 @@ const renderText = computed((): string => {
 .device-wrapper--mobile .mobile-about-container--padding {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
-  @apply tw-py-10;
 }
 .device-wrapper--mobile .text-grid-column {
   @apply container-grid-columns;
@@ -275,7 +282,6 @@ const renderText = computed((): string => {
   .mobile-about-container--padding {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
-    @apply tw-py-10;
   }
   .about-container :deep(.container-image) {
     aspect-ratio: 1/1;

package/src/brand-page/components/about-section/AboutSection.vue.test.ts

@@ -10,11 +10,13 @@ import {
 } from '@brand-page/models';
 import type { AboutSectionViewModel } from '@brand-page/view-models';
 
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}));
+global.ResizeObserver = vi.fn(function () {
+  return {
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  } as unknown as ResizeObserver;
+});
 
 const createTestBrandPageContext = (): BrandPageContext => ({
   brandPageSlug: faker.person.firstName(),