@designcrowd/library.brand-page 6.0.12 → 6.0.13

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -57,6 +57,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
       "socialLinks": [
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000004",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "facebook",
@@ -66,6 +67,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000005",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "instagram",
@@ -75,6 +77,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000006",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "x",
@@ -112,6 +115,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
       "socialLinks": [
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000001",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "facebook",
@@ -121,6 +125,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000002",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "instagram",
@@ -130,6 +135,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000003",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "x",
@@ -457,7 +463,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
       },
     },
     "userPromptContentKey": undefined,
-    "v": 17,
+    "v": 18,
   },
   "useOldLogoRenderSize": true,
 }
@@ -520,6 +526,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "socialLinks": [
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000004",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "facebook",
@@ -529,6 +536,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000005",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "instagram",
@@ -538,6 +546,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000006",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "x",
@@ -575,6 +584,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "socialLinks": [
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000001",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "facebook",
@@ -584,6 +594,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000002",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "instagram",
@@ -593,6 +604,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000003",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "x",
@@ -760,6 +772,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
             "textColor": {},
             "textItems": [
               {
+                "id": "00000000-0000-4000-8000-000000000007",
                 "text": "Christmas",
                 "textStyle": {
                   "applyAutoScale": true,
@@ -903,7 +916,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       },
     },
     "userPromptContentKey": undefined,
-    "v": 17,
+    "v": 18,
   },
   "useOldLogoRenderSize": true,
 }
@@ -966,6 +979,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "socialLinks": [
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000004",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "facebook",
@@ -975,6 +989,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000005",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "instagram",
@@ -984,6 +999,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000006",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "x",
@@ -1021,6 +1037,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "socialLinks": [
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000001",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "facebook",
@@ -1030,6 +1047,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000002",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "instagram",
@@ -1039,6 +1057,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000003",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "x",
@@ -1206,6 +1225,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
             "textColor": {},
             "textItems": [
               {
+                "id": "00000000-0000-4000-8000-000000000007",
                 "text": "Christmas",
                 "textStyle": {
                   "applyAutoScale": true,
@@ -1356,7 +1376,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       },
     },
     "userPromptContentKey": undefined,
-    "v": 17,
+    "v": 18,
   },
   "useOldLogoRenderSize": true,
 }

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -45,6 +45,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
       "socialLinks": [
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000004",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "facebook",
@@ -54,6 +55,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000005",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "instagram",
@@ -63,6 +65,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000006",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "x",
@@ -101,6 +104,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
       "socialLinks": [
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000001",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "facebook",
@@ -110,6 +114,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000002",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "instagram",
@@ -119,6 +124,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000003",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "x",

package/src/brand-page/utils/__snapshots__/model.util.test.ts.snap

@@ -44,6 +44,7 @@ BrandPageModel {
     "socialLinks": [
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000004",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "facebook",
@@ -53,6 +54,7 @@ BrandPageModel {
       },
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000005",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "instagram",
@@ -62,6 +64,7 @@ BrandPageModel {
       },
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000006",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "x",
@@ -100,6 +103,7 @@ BrandPageModel {
     "socialLinks": [
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000001",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "facebook",
@@ -109,6 +113,7 @@ BrandPageModel {
       },
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000002",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "instagram",
@@ -118,6 +123,7 @@ BrandPageModel {
       },
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000003",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "x",
@@ -495,6 +501,7 @@ BrandPageModel {
     "socialLinks": [
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000004",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "facebook",
@@ -504,6 +511,7 @@ BrandPageModel {
       },
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000005",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "instagram",
@@ -513,6 +521,7 @@ BrandPageModel {
       },
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000006",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "x",
@@ -551,6 +560,7 @@ BrandPageModel {
     "socialLinks": [
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000001",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "facebook",
@@ -560,6 +570,7 @@ BrandPageModel {
       },
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000002",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "instagram",
@@ -569,6 +580,7 @@ BrandPageModel {
       },
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000003",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "x",

package/src/brand-page/utils/migration/migration-01.ts

@@ -1,3 +1,4 @@
+import * as uuid from 'uuid';
 import {
   getLogoVariationIndexFromLogoImageUrl,
   getLogoDraftTokenFromLogoImageUrl,
@@ -101,6 +102,7 @@ export const applyTextContentTextToTextItemsMigration = (
         }
 
         const textItem: TextItem = {
+          id: uuid.v4(),
           text: item.text,
           textStyle,
         };

package/src/brand-page/utils/migration/migration-18.test.ts

@@ -0,0 +1,131 @@
+import { describe, test, expect } from 'vitest';
+import { migration18 } from './migration-18';
+import type { MigrationData } from '../migration.util';
+
+const createMigrationData = (brandPageModel: any): MigrationData => ({
+  brandPageModel,
+  useOldLogoRenderSize: false,
+});
+
+const createModel = (overrides: any = {}) => ({
+  v: 17,
+  pages: [
+    {
+      title: 'Home',
+      slug: 'home',
+      contents: [
+        {
+          id: 'gallery-1',
+          type: 'image-gallery',
+          images: [
+            { imageUrl: 'a.jpg', imageTitle: 'A' },
+            { imageUrl: 'b.jpg', imageTitle: 'B' },
+          ],
+        },
+        {
+          id: 'testimonials-1',
+          type: 'testimonial-section',
+          items: [
+            { name: 'Ada', testimonials: 'Great' },
+            { name: 'Grace', testimonials: 'Superb' },
+          ],
+        },
+        {
+          id: 'text-1',
+          type: 'text',
+          textItems: [{ text: 'Hello' }, { text: 'World' }],
+        },
+        {
+          id: 'social-1',
+          type: 'social-links',
+          links: [
+            { imageUrl: 'facebook', url: 'https://facebook.com' },
+            { imageUrl: 'x', url: 'https://x.com' },
+          ],
+        },
+      ],
+    },
+  ],
+  pageFooterDesktop: {
+    socialLinks: [
+      { imageUrl: 'facebook', url: 'https://facebook.com' },
+      { imageUrl: 'instagram', url: 'https://instagram.com' },
+    ],
+  },
+  pageFooterMobile: {
+    socialLinks: [{ imageUrl: 'x', url: 'https://x.com' }],
+  },
+  ...overrides,
+});
+
+const allNestedItems = (model: any): any[] => {
+  const [gallery, testimonials, text, social] = model.pages[0].contents;
+
+  return [
+    ...gallery.images,
+    ...testimonials.items,
+    ...text.textItems,
+    ...social.links,
+    ...model.pageFooterDesktop.socialLinks,
+    ...model.pageFooterMobile.socialLinks,
+  ];
+};
+
+describe('migration18', () => {
+  test('backfills a stable id onto every nested item that lacks one', async () => {
+    const model = createModel();
+
+    const result = await migration18(createMigrationData(model));
+
+    const items = allNestedItems(result.brandPageModel);
+
+    expect(items).toHaveLength(11);
+    items.forEach((item) => expect(item.id).toBeTruthy());
+  });
+
+  test('generates unique ids across all nested items', async () => {
+    const model = createModel();
+
+    const result = await migration18(createMigrationData(model));
+
+    const ids = allNestedItems(result.brandPageModel).map((i) => i.id);
+
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+
+  test('preserves ids that already exist', async () => {
+    const model = createModel();
+
+    model.pages[0].contents[0].images[0].id = 'keep-me';
+    model.pageFooterMobile.socialLinks[0].id = 'keep-footer';
+
+    // migration mutates in place, so assert against the same (any-typed) model.
+    await migration18(createMigrationData(model));
+
+    expect(model.pages[0].contents[0].images[0].id).toBe('keep-me');
+    expect(model.pageFooterMobile.socialLinks[0].id).toBe('keep-footer');
+  });
+
+  test('is idempotent — a second run does not change any id', async () => {
+    const model = createModel();
+
+    await migration18(createMigrationData(model));
+    const firstPass = allNestedItems(model).map((i) => i.id);
+
+    await migration18(createMigrationData(model));
+    const secondPass = allNestedItems(model).map((i) => i.id);
+
+    expect(secondPass).toEqual(firstPass);
+  });
+
+  test('handles a model with no footers and empty pages without throwing', async () => {
+    const model = {
+      v: 17,
+      pages: [{ title: 'Home', slug: 'home', contents: [] }],
+    };
+
+    const result = await migration18(createMigrationData(model));
+
+    expect(result.brandPageModel).toBe(model);
+  });
+});

package/src/brand-page/utils/migration/migration-18.ts

@@ -0,0 +1,22 @@
+import type { MigrationData } from '../migration.util';
+import { ensureBrandPageItemIds } from '../../../metadata-builder/builders/item-id-utils';
+
+/**
+ * BP-5603: backfill a stable uuid `id` onto every nested item (gallery images,
+ * images/shapes/testimonial items, text items, section + footer social links)
+ * that predates the id-based edit model.
+ *
+ * The item `id` field is now non-nullable in the model, so every load path must
+ * guarantee it — not just the AI chat flow, which already stamps ids before
+ * minifying (see ensureBrandPageItemIds in useAiWebsiteBuilderChat). This
+ * migration is that guarantee for persisted data. Idempotent — existing ids are
+ * preserved, so re-running (e.g. render-only sites that never re-save) is a
+ * no-op beyond generating ids for items that still lack one.
+ */
+export const migration18 = async (
+  migrationResult: MigrationData,
+): Promise<MigrationData> => {
+  ensureBrandPageItemIds(migrationResult.brandPageModel);
+
+  return migrationResult;
+};

package/src/brand-page/utils/migration.util.ts

@@ -20,6 +20,7 @@ import { migration14 } from './migration/migration-14';
 import { migration15 } from './migration/migration-15';
 import { migration16 } from './migration/migration-16';
 import { migration17 } from './migration/migration-17';
+import { migration18 } from './migration/migration-18';
 
 export interface MigrationData {
   brandPageModel: BrandPageModel;
@@ -160,6 +161,12 @@ const MIGRATION_TABLE = [
     description:
       'Padding Control backfill (BP-5699 Tier 2 + BP-5700 Store): backfill existing top/bottom spacing as explicit padding for text (12px), images/social links/shapes/booking (32px), store (16px), contact form (per layout), banner and about (per display style)',
   },
+  {
+    version: 18,
+    migrateFn: migration18,
+    description:
+      'BP-5603: backfill stable item ids on all nested items (gallery/section/testimonial/text items, section + footer social links) — the item id is now non-nullable',
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

package/src/brand-page/utils/personalisation.util.test.ts

@@ -432,6 +432,7 @@ describe('personalisation.util', async () => {
       personalisationRole: 'profile',
       items: [
         {
+          id: 'shapes-item-1',
           colorReplacements: [],
           height: -1,
           imageUrl: 'shape-1.svg',
@@ -986,6 +987,7 @@ describe('personalisation.util', async () => {
       personalisationRole: 'media',
       items: [
         {
+          id: 'shapes-item-1',
           colorReplacements: [],
           height: -1,
           imageUrl: 'shape-1.svg',
@@ -1052,6 +1054,7 @@ describe('personalisation.util', async () => {
       personalisationRole: 'media',
       items: [
         {
+          id: 'shapes-item-1',
           colorReplacements: [],
           height: -1,
           imageUrl: 'https://bcassetcdn.com/shapes/prod/original-shape.svg',
@@ -1141,6 +1144,7 @@ describe('personalisation.util', async () => {
       personalisationRole: 'media',
       items: [
         {
+          id: 'shapes-item-1',
           colorReplacements: [],
           height: -1,
           imageUrl: 'https://bcassetcdn.com/shapes/prod/original-shape.svg',

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.ts

@@ -1498,6 +1498,7 @@ export const SampleImageGallery = (): any => {
     const width = 300;
     const height = 300;
     imageGalleryContent.images!.push({
+      id: `gallery-item-${i}`,
       width,
       height,
       imageUrl: `https://images.unsplash.com/photo-1659535915214-e7cbac112038?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjQzOTV8MXwxfHNlYXJjaHw4fHxnYW1pbmd8ZW58MHx8fHwxNjY5MDc4ODE1&ixlib=rb-4.0.3&q=80&w=1080`,

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.ts

@@ -2314,6 +2314,7 @@ export const BRAND_PAGE_PERSONALISED: BrandPageData = {
           displayStyle: 'centered',
           items: [
             {
+              id: 'shapes-section-item-1',
               colorReplacements: [],
               height: -1,
               imageUrl:

package/src/brand-page-maker/composables/ai-chat/useAiWebsiteBuilderChat.ts

@@ -18,6 +18,7 @@ import {
   type PlanItem,
 } from '../../../clients/websocket-gateway-client';
 import { minifyBrandPageMetadata } from '../../../utils/minify-brand-page-metadata';
+import { ensureBrandPageItemIds } from '../../../metadata-builder/builders/item-id-utils';
 import { buildAssetManifest } from '../../../utils/build-asset-manifest';
 import cloneDeep from 'lodash.clonedeep';
 import { usePageNavigationStore } from '../../../shared/page-navigation/store/page-navigation-store';
@@ -259,6 +260,11 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
 
   const buildMessagePayload = async (userPrompt: string) => {
     const brandPageData = brandPageMakerStore.brandPageData;
+
+    // BP-5603: stamp stable uuid ids onto every nested item BEFORE minifying,
+    // so the id the AI is shown (and returns as `item_id`) is the exact id the
+    // executor matches when applying tool calls to this same live model.
+    ensureBrandPageItemIds(brandPageData);
     const headerLogoDraftToken =
       brandPageData.pageHeaderDesktop?.logoImage?.logoDraftToken ??
       uiStore.logoDraftToken;

package/src/brand-page-maker/constants/config-settings-constant.ts

@@ -85,6 +85,7 @@ import {
   createInitialShopContent,
   createInitialBookingSectionContent,
 } from '../models';
+import * as uuid from 'uuid';
 import type {
   ContentReplaceImageSettings,
   SetContentMediaPayload,
@@ -353,6 +354,7 @@ const imageGalleryReplaceImageSettings =
         }
 
         content.images.push({
+          id: uuid.v4(),
           imageUrl: value.imageUrl,
           imageTitle: value.imageTitle,
           height: value.height!,
@@ -614,6 +616,7 @@ const shapesImageReplaceImageSettings =
     ) => {
       if (index === undefined || index === null) {
         content.items?.push({
+          id: uuid.v4(),
           imageUrl: value.imageUrl,
           imageTitle: '',
           paragraph: '',
@@ -652,6 +655,7 @@ const textImageReplaceImageSettings =
     ) => {
       if (index === undefined || index === null) {
         content.items?.push({
+          id: uuid.v4(),
           imageUrl: value.imageUrl,
           imageTitle: value.imageTitle,
           paragraph: '',

package/src/brand-page-maker/models/content-settings.ts

@@ -233,6 +233,7 @@ export const createInitialTextContent = (
       options?.brandPageType === 'brandSite'
         ? [
             {
+              id: uuid.v4(),
               text: contentSettingsTr(`defaultTextValue`),
               textStyle: {
                 applyAutoScale:
@@ -835,6 +836,7 @@ export const createInitialSocialLinksContent = (
     title: contentSettingsTr(`followUsOnTitle`),
     links: [
       {
+        id: uuid.v4(),
         imageUrl: 'facebook',
         url: 'https://www.facebook.com',
         imageTitle: '',
@@ -845,6 +847,7 @@ export const createInitialSocialLinksContent = (
         imageLink: '',
       },
       {
+        id: uuid.v4(),
         imageUrl: 'instagram',
         url: 'https://www.instagram.com',
         imageTitle: '',
@@ -855,6 +858,7 @@ export const createInitialSocialLinksContent = (
         imageLink: '',
       },
       {
+        id: uuid.v4(),
         imageUrl: 'x',
         url: 'https://www.x.com',
         imageTitle: '',