@designcrowd/library.brand-page 5.19.1-error-html2canvas-3 → 5.19.1-id-based-items-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, BP_BRAND_SITE_TEMPLATE_TYPE_NAME, SIDE_BAR_TAB_NAMES, } from '@brand-page-maker/constants';
+import { BP_DEFAULT_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,19 +9,9 @@ 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: () => {
@@ -57,7 +47,6 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
             cachedTemplates: {},
             logoChangeWatcherInitialized: false,
             initialSearchTerm: undefined,
-            aiTemplateKeywords: undefined,
             onSearchTermChanged: undefined,
         };
     },
@@ -198,65 +187,27 @@ 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 = {
+                const result = await designTemplateClient.getTemplateItemsByTemplateType(this.templateType, {
                     page: pageNo,
+                    pageSize: DEFAULT_PAGE_SIZE,
                     categoryName: this.selectedCategory,
-                    searchTerm: effectiveSearchTerm,
-                    keywords: this.aiTemplateKeywords,
+                    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,
-                    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);
                         }
@@ -266,24 +217,14 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                             if (uiStore.personalisationData?.length) {
                                 personalisationContentIndex =
                                     await getAiContentIndexByTemplateTokenAndNumberOfVariations(item.designTemplateToken, uiStore.personalisationData.length);
-                                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;
+                                // 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;
                             }
                             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,
                             };
                         }
@@ -294,13 +235,7 @@ 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;
-                this._addTemplates({ templates: displayTemplates });
+                this._addTemplates({ templates: validTemplates });
                 this._setPageNoLoaded({ pageNoLoaded: pageNo });
             }
             finally {
@@ -404,9 +339,6 @@ 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,3 +1,4 @@
+/// <reference types="types/lodash-shims" />
 import UnsplashClient from '../../clients/unsplash-client';
 import { type DebounceHandle } from 'lodash.debounce';
 interface PreviewUrls {
@@ -29,20 +30,14 @@ declare const _default: import("vue").DefineComponent<{}, {
             thirdPartySettings: import("../models").UIRootStateThirdPartySettings;
         }): void;
         setDeviceMode({ mode }: {
-            mode: import("../models").UiDeviceMode;
+            mode: "desktop" | "mobile";
         }): void;
         setScreenSizeMode({ mode }: {
-            mode: import("../models").UiScreenSizeMode;
+            mode: "desktop" | "mobile";
         }): 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;
@@ -55,7 +50,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             type: string;
         }): Promise<void>;
         onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
-        showUpgradeModalAndSaveAsync(contextualUpgradeType?: import("@brand-page-maker/stores").WebsiteContextUpgradeType): Promise<void>;
+        showUpgradeModalAndSaveAsync(contextualUpgradeType?: string | number | symbol | undefined): Promise<void>;
         setIsPersonalisationEnabled({ isPersonalisationEnabled, }: {
             isPersonalisationEnabled: boolean;
         }): void;

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

@@ -2,6 +2,8 @@ import { type BrandPageModel, type BrandPageType, type NavModel, type PageStyles
 import type { ContentType } from '../brand-page/models/content.model';
 import { type AssetEntry } from './build-asset-manifest';
 type MinifiedFooterSocialLink = {
+    position: number;
+    id?: string;
     imageUrl: string;
     url: string;
 };

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

@@ -164,6 +164,7 @@ const minifyContent = (content, editor, assets) => {
                 ...(Array.isArray(c.items) && {
                     items: c.items.map((item, index) => ({
                         position: index + 1,
+                        ...(item.id && { id: item.id }),
                         ...st('name', item.name, editor),
                         ...st('jobTitle', item.position, editor),
                         ...st('testimonials', item.testimonials, editor),
@@ -191,6 +192,7 @@ const minifyContent = (content, editor, assets) => {
                 ...(Array.isArray(c.items) && {
                     items: c.items.map((item, index) => ({
                         position: index + 1,
+                        ...(item.id && { id: item.id }),
                         ...includeImageWithKey(item.imageUrl),
                         ...st('title', item.title, editor),
                         ...st('paragraph', item.paragraph, editor),
@@ -220,6 +222,7 @@ const minifyContent = (content, editor, assets) => {
                 ...(Array.isArray(c.textItems) && {
                     textItems: c.textItems.map((item, index) => ({
                         position: index + 1,
+                        ...(item.id && { id: item.id }),
                         ...st('text', item.text, editor),
                         ...(includeStyle(item.textStyle) && { textStyle: item.textStyle }),
                     })),
@@ -300,6 +303,7 @@ const minifyContent = (content, editor, assets) => {
                 ...(Array.isArray(c.links) && {
                     links: c.links.map((link, index) => ({
                         position: index + 1,
+                        ...(link.id && { id: link.id }),
                         ...(includeString(link.url) && { url: link.url }),
                         ...includeImageWithKey(link.imageUrl),
                     })),
@@ -339,6 +343,7 @@ const minifyContent = (content, editor, assets) => {
                 ...(Array.isArray(c.images) && {
                     images: c.images.map((img, index) => ({
                         position: index + 1,
+                        ...(img.id && { id: img.id }),
                         ...includeImageWithKey(img.imageUrl),
                         ...st('imageTitle', img.imageTitle, editor),
                     })),
@@ -379,7 +384,9 @@ const minifyFooter = (footer, logoAssetKey) => {
         logoImageWidth: footer.logoImageWidth || undefined,
         ...(logoAssetKey && { logoAssetKey }),
         socialLinks: footer.socialLinks?.length
-            ? footer.socialLinks.map((l) => ({
+            ? footer.socialLinks.map((l, index) => ({
+                position: index + 1,
+                ...(l.id && { id: l.id }),
                 imageUrl: l.imageUrl || '',
                 url: l.url || '',
             }))

package/package.json

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

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

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

package/src/brand-page/components/brand-page-footer/BrandPageFooter.vue

@@ -32,7 +32,7 @@
   </footer>
 </template>
 <script setup lang="ts">
-import { computed, onMounted, reactive, watch, shallowRef } from 'vue';
+import { computed, onMounted, reactive, ref, watch, shallowRef } from 'vue';
 import { BRAND_PAGE_TYPES, type BrandPageContext } from '@brand-page/models';
 import {
   Icon,

package/src/brand-page/components/image/Image.mixin.ts

@@ -52,7 +52,7 @@ export default defineComponent({
     shouldFitImage(): boolean {
       return Boolean(
         this.viewModel.aspectRatio &&
-        ASPECT_RATIOS[this.viewModel.aspectRatio as string],
+          ASPECT_RATIOS[this.viewModel.aspectRatio as string],
       );
     },
     altText(): string {

package/src/brand-page/components/image/Image.test.ts

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import { faker } from '@faker-js/faker';
 import Image from './Image.vue';
 import {

package/src/brand-page/components/image-gallery/masonry/MasonryGallery.mixin.ts

@@ -7,7 +7,8 @@ import type { ImageGalleryImageClickPayload } from '../models';
 import type { BrandPageContext, ImageGalleryItem } from '../../../models';
 import { getImageAltText } from '../../../utils';
 
-interface IndexedImageGalleryItem extends ImageGalleryItem {
+interface IndexedImageGalleryItem extends Omit<ImageGalleryItem, 'id'> {
+  // Local rendering index, distinct from the stable string `id` on ImageItem.
   id: number;
 }
 

package/src/brand-page/components/images-section/ImagesSection.vue

@@ -57,6 +57,7 @@
 </template>
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue';
+import type { PropType } from 'vue';
 import TextMediaSection from '../text-media-section/TextMediaSection.vue';
 import ImageGalleryModal from '../image-gallery/ImageGalleryModal.vue';
 import BpImage from '../image/Image.vue';