@designcrowd/library.brand-page 6.0.11 → 6.0.13

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: '',

package/src/metadata-builder/ai-metadata-executor.ts

@@ -22,6 +22,8 @@ import {
   type AddPageArguments,
   type RemovePageArguments,
   type RenamePageArguments,
+  type MovePageArguments,
+  type SetPageVisibilityArguments,
   type UpdateFooterArguments,
   type UpdateGlobalStylesArguments,
   type UpdateHeaderArguments,
@@ -101,7 +103,7 @@ export const executeToolCallsAsync = async (
             type: BUILDER_TYPES.MOVE_SECTION as BuilderType,
             payload: {
               contentId: arg.content_id,
-              position: arg.position,
+              moveBeforeContentId: arg.move_before_content_id,
               targetPageId: arg.target_page_id,
             },
           };
@@ -145,6 +147,34 @@ export const executeToolCallsAsync = async (
           };
         }
 
+        case AI_ASSISTANT_TOOL_NAMES.MOVE_PAGE: {
+          const arg = toolcall.arguments as unknown as MovePageArguments;
+
+          return {
+            id: toolcall.toolId,
+            type: BUILDER_TYPES.MOVE_PAGE as BuilderType,
+            payload: {
+              pageId: arg.page_id,
+              parentPageId: arg.parent_page_id,
+              moveBeforePageId: arg.move_before_page_id,
+            },
+          };
+        }
+
+        case AI_ASSISTANT_TOOL_NAMES.SET_PAGE_VISIBILITY: {
+          const arg =
+            toolcall.arguments as unknown as SetPageVisibilityArguments;
+
+          return {
+            id: toolcall.toolId,
+            type: BUILDER_TYPES.SET_PAGE_VISIBILITY as BuilderType,
+            payload: {
+              pageId: arg.page_id,
+              isHidden: arg.is_hidden,
+            },
+          };
+        }
+
         case AI_ASSISTANT_TOOL_NAMES.UPDATE_FOOTER: {
           const arg = toolcall.arguments as unknown as UpdateFooterArguments;