@designcrowd/library.brand-page 6.0.3 → 6.0.4

package/src/brand-page/models/index.ts

@@ -234,6 +234,13 @@ export interface ImageContent extends Content {
 }
 
 export interface ImageItem {
+  /**
+   * Stable per-item identifier. Mirrors the section-level `Content.id` one
+   * level deeper so AI tool calls can reference items by id rather than by
+   * positional index. Optional for backward compatibility with persisted data
+   * that predates item ids — backfilled on load (see ensureItemIds).
+   */
+  id?: string;
   imageUrl: string;
   imageTitle: string;
   width: number;
@@ -466,6 +473,8 @@ export interface ShapeItem extends ImageItem {
 }
 
 export interface TestimonialItems {
+  /** Stable per-item identifier. See ImageItem.id. */
+  id?: string;
   imageUrl: string;
   name: string;
   position: string;
@@ -483,6 +492,8 @@ export interface TestimonialItems {
 }
 
 export interface TextItem {
+  /** Stable per-item identifier. See ImageItem.id. */
+  id?: string;
   text: string;
   textStyle: TextStyleDeclaration;
 
@@ -552,6 +563,7 @@ export interface AboutSectionContent extends Content {
 }
 
 export interface LinksItem {
+  id?: string;
   imageUrl: string;
   url: string;
   size?: string;
@@ -929,10 +941,6 @@ export class BrandPageModel {
   // Model version
   v: number;
 
-  // AI personalisation key persisted with the draft so previews survive login/checkout-back/
-  // refresh - content is retrieved by this token (user-agnostic), not regenerated (bp-5742).
-  userPromptContentKey?: string;
-
   styles: PageStyles;
 
   /** @deprecated */

package/src/brand-page/models/payment.model.ts

@@ -44,8 +44,7 @@ export const isStripePaymentIntent = (
   );
 };
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export interface CreateCartResult<T = unknown> {
+export interface CreateCartResult<T> {
   cartId: string;
   paymentProviderName: string;
   paymentProviderExternalId: string;

package/src/brand-page/models/shop.model.ts

@@ -1,3 +1,5 @@
+import type { PaymentConfig } from './payment.model';
+
 export interface VariantOptionModel {
   id: string;
   name: string;

package/src/brand-page/models/user-personalisation.model.ts

@@ -84,7 +84,8 @@ export type ContentPersonalisationMapping<T extends Content> = {
     | keyof UserPersonalisationSection
     | keyof UserPersonalisationItem]?: (keyof T)[];
 };
-export interface UserPersonalisationSectionWithIndices extends UserPersonalisationSection {
+export interface UserPersonalisationSectionWithIndices
+  extends UserPersonalisationSection {
   imageIndex: number;
   shapeIndex: number;
   itemTitleIndex: number;

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

@@ -456,7 +456,6 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "userPromptContentKey": undefined,
     "v": 17,
   },
   "useOldLogoRenderSize": true,
@@ -902,7 +901,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "userPromptContentKey": undefined,
     "v": 17,
   },
   "useOldLogoRenderSize": true,
@@ -1355,7 +1353,6 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "userPromptContentKey": undefined,
     "v": 17,
   },
   "useOldLogoRenderSize": true,

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

@@ -472,7 +472,6 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         },
       },
     },
-    "userPromptContentKey": undefined,
     "v": 0,
   },
   "useOldLogoRenderSize": false,

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

@@ -446,7 +446,6 @@ BrandPageModel {
       },
     },
   },
-  "userPromptContentKey": undefined,
   "v": 0,
 }
 `;
@@ -912,7 +911,6 @@ BrandPageModel {
       },
     },
   },
-  "userPromptContentKey": undefined,
   "v": 0,
 }
 `;

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

@@ -1,4 +1,4 @@
-import type { LogoImageModel } from '../..';
+import type { BrandPageModel, LogoImageModel } from '../..';
 import type { MigrationData } from '../migration.util';
 
 import { migrateLogoImage } from './logo/logo.migration.util';

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

@@ -3,6 +3,7 @@ import {
   FONT_SIZE_HEADINGS,
   type AboutSectionContent,
   type BannerSectionContent,
+  type BrandPageModel,
   type ButtonContent,
   type ContactFormContent,
   type GlobalTextStyleDeclaration,

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

@@ -2,6 +2,7 @@ import {
   BRAND_PAGE_TYPES,
   type AboutSectionContent,
   type BannerSectionContent,
+  type BrandPageModel,
   type BrandPageType,
   type ButtonContent,
   type ContactFormContent,

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

@@ -1,6 +1,7 @@
 import {
   type AboutSectionContent,
   type BannerSectionContent,
+  type BrandPageModel,
   type ButtonContent,
   type ContactFormContent,
   type Content,

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

@@ -1,4 +1,8 @@
-import { type TextContent, type LogoImageModel } from '../..';
+import {
+  type BrandPageModel,
+  type TextContent,
+  type LogoImageModel,
+} from '../..';
 import type { MigrationData } from '../migration.util';
 import { isTextContent } from '../model.util';
 

package/src/brand-page/utils/migration/migration-05_2.ts

@@ -1,4 +1,4 @@
-import { type ButtonContent } from '../..';
+import { type BrandPageModel, type ButtonContent } from '../..';
 import type { MigrationData } from '../migration.util';
 
 export const migration05_2 = (

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

@@ -341,7 +341,7 @@ describe('migration08', () => {
       data: 'test-template-svg-data',
     });
 
-    const _result = await migration08(migrationData, {
+    const result = await migration08(migrationData, {
       isServerRender: false,
       isUserDraft: false,
     });

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

@@ -701,41 +701,6 @@ describe('personalisation.util', async () => {
     ).toBe(title);
   });
 
-  test('applyUserPersonalisationToBrandPageModelAsync should fall back to a populated section when the block section was not generated', async () => {
-    // Arrange - simulate userPrompt AI content that only generated the core sections
-    // (profile/about/information/media); email/website/phone are never generated.
-    const personalisation = {
-      ...PERSONALISATION,
-      websiteSection: undefined,
-      emailSection: undefined,
-      phoneSection: undefined,
-    } as unknown as typeof PERSONALISATION;
-
-    // A block whose role points at the ungenerated website section - without the fallback
-    // this renders the designer's placeholder instead of personalised content.
-    const model = new BrandPageModel({
-      brandPageType: BRAND_PAGE_TYPES.brandSite,
-      styles: {
-        backgroundStyles: {
-          backgroundImageUrl: faker.internet.url(),
-          personalisationRole: 'website',
-        },
-      },
-    });
-
-    // Act
-    const result = await applyUserPersonalisationToBrandPageModelAsync(
-      personalisation,
-      model,
-    );
-
-    // Assert - it borrowed the first populated fallback section (profile).
-    expect(result.isModified).toBe(true);
-    expect(result.model.styles.backgroundStyles.backgroundImageUrl).toBe(
-      PERSONALISATION.profileSection.imageUrls?.[0].imageUrl,
-    );
-  });
-
   test('applyUserPersonalisationToBrandPageModelAsync should return modified text items when input has text with multiple items', async () => {
     // Arrange
     const textContent = {

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

@@ -326,84 +326,6 @@ const getPersonalisationValueAsync = async (
   return { value: propertyValue, section };
 };
 
-// The userPrompt AI content generation only populates these content-bearing sections
-// (see GenerateAiDesignMakerContentService / GenerateWebsiteContentService - About,
-// Information, Profile, Media). Sections like email/website/phone are never generated, so
-// blocks whose role points at an ungenerated section fall back to this pool.
-const PERSONALISATION_FALLBACK_ROLES: PersonalisationRole[] = [
-  'profile',
-  'about',
-  'information',
-  'media',
-];
-
-// "Effectively empty" = no renderable content (ungenerated userPrompt sections like
-// email/website/phone). A section that has data but lacks one property is NOT empty - it
-// intentionally keeps its original content.
-const isSectionEffectivelyEmpty = (
-  section: UserPersonalisationSectionWithIndices | undefined,
-): boolean => {
-  if (!section) {
-    return true;
-  }
-
-  return (
-    !section.title &&
-    !section.name &&
-    !section.url &&
-    !section.description &&
-    !section.descriptionShort &&
-    !section.ctaTitle &&
-    !section.imageUrls?.length &&
-    !section.shapes?.length &&
-    !section.items?.length &&
-    !section.mainShapesCollection?.tall?.length &&
-    !section.mainShapesCollection?.square?.length &&
-    !section.mainShapesCollection?.wide?.length
-  );
-};
-
-// Resolve a property from a specific role's section. Returns null when that section is
-// ungenerated (effectively empty) or cannot supply the property, so the caller can try the
-// next role.
-const resolvePersonalisationValueForRoleAsync = async (
-  role: PersonalisationRole,
-  property: keyof UserPersonalisationSection | keyof UserPersonalisationItem,
-  personalisation: UserPersonalisationWithIndices,
-): Promise<{
-  value: any;
-  personalisation: UserPersonalisationWithIndices;
-  valuesToUpdate?: Record<string, any>;
-} | null> => {
-  const key = `${role}Section` as keyof UserPersonalisationWithIndices;
-  const section = personalisation[key] as
-    | UserPersonalisationSectionWithIndices
-    | undefined;
-
-  if (isSectionEffectivelyEmpty(section)) {
-    return null;
-  }
-
-  const {
-    value,
-    section: updatedSection,
-    valuesToUpdate,
-  } = await getPersonalisationValueAsync(
-    section as UserPersonalisationSectionWithIndices,
-    property,
-  );
-
-  if (value === undefined || value === null) {
-    return null;
-  }
-
-  return {
-    value,
-    personalisation: { ...personalisation, [key]: updatedSection },
-    valuesToUpdate,
-  };
-};
-
 const getPersonalisationValueFromPropertyAsync = async (
   propertyKey: string,
   propertyValue: any,
@@ -420,6 +342,16 @@ const getPersonalisationValueFromPropertyAsync = async (
     return { value: undefined, personalisation };
   }
 
+  const matchingValue = Object.entries(personalisation).find(
+    ([key]) => key === `${personalisationRole}Section`,
+  );
+
+  if (!matchingValue) {
+    return { value: undefined, personalisation };
+  }
+
+  const section = matchingValue[1] as UserPersonalisationSectionWithIndices;
+
   const mapping = getPersonalisationMappingForContentType(contentType);
 
   const matchingProperty = Object.entries(mapping).find(([, value]) =>
@@ -440,48 +372,20 @@ const getPersonalisationValueFromPropertyAsync = async (
       typeof propertyValue === 'string' && propertyValue.endsWith('.svg'),
   });
 
-  const primaryKey =
-    `${personalisationRole}Section` as keyof UserPersonalisationWithIndices;
-  const primarySection = personalisation[primaryKey] as
-    | UserPersonalisationSectionWithIndices
-    | undefined;
-
-  // When the block's own section has content, use it as-is - this preserves existing
-  // behaviour, including legitimately keeping the original when that section lacks a
-  // specific property (e.g. no items, or an invalid shape).
-  if (!isSectionEffectivelyEmpty(primarySection)) {
-    const {
-      value,
-      section: updatedSection,
-      valuesToUpdate,
-    } = await getPersonalisationValueAsync(
-      primarySection as UserPersonalisationSectionWithIndices,
-      property,
-    );
-
-    return {
-      value,
-      personalisation: { ...personalisation, [primaryKey]: updatedSection },
-      valuesToUpdate,
-    };
-  }
-
-  // The block's section was never generated - fall back to the first populated section that
-  // can supply this property, so it doesn't render the "should be AI generated" placeholder.
-  // Never reached when the section exists (above) or all are populated (AI Website Builder).
-  for (const role of PERSONALISATION_FALLBACK_ROLES) {
-    const resolved = await resolvePersonalisationValueForRoleAsync(
-      role,
-      property,
-      personalisation,
-    );
-
-    if (resolved) {
-      return resolved;
-    }
-  }
+  const {
+    value,
+    section: updatedSection,
+    valuesToUpdate,
+  } = await getPersonalisationValueAsync(section, property);
 
-  return { value: undefined, personalisation };
+  return {
+    value,
+    personalisation: {
+      ...personalisation,
+      [`${personalisationRole}Section`]: updatedSection,
+    },
+    valuesToUpdate,
+  };
 };
 
 type ContentProperty = Record<string, string | any>;

package/src/brand-page/view-models.ts

@@ -1,4 +1,5 @@
 import type {
+  PageStyles,
   ButtonWithModalContent,
   ProfileContent,
   TextContent,
@@ -31,9 +32,11 @@ import type {
   TextShapeItem,
   TextStyleDeclaration,
   AspectRatio,
+  LogoVariation,
   LogoImageModel,
   LogoTemplateImageModel,
   CookieOptions,
+  SensitiveContent,
   BookingSectionContent,
   MediaTypes,
   TextStyles,
@@ -81,7 +84,8 @@ export interface PageViewModel {
 }
 
 export interface ButtonViewModel
-  extends ContentViewModel, Omit<ButtonWithModalContent, 'type'> {
+  extends ContentViewModel,
+    Omit<ButtonWithModalContent, 'type'> {
   styles: Omit<ButtonStyles, 'templates'>;
   onClicked: (vm: ButtonViewModel) => void;
   buttonLinkType: ButtonLinkType;
@@ -91,8 +95,7 @@ export interface ButtonViewModel
 export type ImageViewModel = ContentViewModel & Omit<ImageContent, 'type'>;
 
 export interface ImageGalleryViewModel
-  extends
-    ContentViewModel,
+  extends ContentViewModel,
     Omit<ImageGalleryContent, 'type' | 'galleryStyles'> {
   styles: GalleryStyles;
 }
@@ -111,12 +114,14 @@ export interface LogoViewModel extends ContentViewModel {
 }
 
 export interface ProfileViewModel
-  extends ContentViewModel, Omit<ProfileContent, 'type'> {
+  extends ContentViewModel,
+    Omit<ProfileContent, 'type'> {
   containerStyle?: BrandPageCssStyle;
 }
 
 export interface ShapesSectionViewModel
-  extends ContentViewModel, Omit<ShapesSectionContent, 'type' | 'items'> {
+  extends ContentViewModel,
+    Omit<ShapesSectionContent, 'type' | 'items'> {
   items: TextShapeItem[];
   isFullWidth: boolean;
 }
@@ -135,35 +140,41 @@ export type VideoViewModel = ContentViewModel &
 export type MapViewModel = ContentViewModel & Omit<MapContent, 'type'>;
 
 export interface MailingListViewModel
-  extends ContentViewModel, Omit<MailingListContent, 'type'> {
+  extends ContentViewModel,
+    Omit<MailingListContent, 'type'> {
   styles: Omit<ButtonStyles, 'templates'>;
 }
 
 export interface SupportMeViewModel
-  extends ContentViewModel, Omit<SupportMeContent, 'type'> {
+  extends ContentViewModel,
+    Omit<SupportMeContent, 'type'> {
   buttonStyles: ButtonStyles;
 }
 
 export interface RequestPaymentViewModel
-  extends ContentViewModel, Omit<RequestPaymentContent, 'type'> {
+  extends ContentViewModel,
+    Omit<RequestPaymentContent, 'type'> {
   buttonStyles: ButtonStyles;
 }
 
 export interface ShopViewModel
-  extends ContentViewModel, Omit<ShopContent, 'type'> {
+  extends ContentViewModel,
+    Omit<ShopContent, 'type'> {
   buttonStyles: ButtonStyles;
   isFullWidth: boolean;
   isShippingEnabled: boolean;
 }
 
 export interface ContactFormViewModel
-  extends ContentViewModel, Omit<ContactFormContent, 'type'> {
+  extends ContentViewModel,
+    Omit<ContactFormContent, 'type'> {
   buttonStyles: ButtonStyles;
   isFullWidth: boolean;
 }
 
 export interface BannerSectionViewModel
-  extends ContentViewModel, Omit<BannerSectionContent, 'type'> {
+  extends ContentViewModel,
+    Omit<BannerSectionContent, 'type'> {
   buttonViewModel: ButtonViewModel;
   isFullWidth: boolean;
   isBigImageType: boolean;
@@ -214,57 +225,64 @@ export interface TextImageSectionViewModel {
 }
 
 export interface TestimonialSectionViewModel
-  extends ContentViewModel, Omit<TestimonialSectionContent, 'type'> {
+  extends ContentViewModel,
+    Omit<TestimonialSectionContent, 'type'> {
   isFullWidth: boolean;
 }
 
 export interface AboutSectionViewModel
-  extends ContentViewModel, Omit<AboutSectionContent, 'type'> {
+  extends ContentViewModel,
+    Omit<AboutSectionContent, 'type'> {
   isFullWidth: boolean;
 }
 
 export interface SocialLinksViewModel
-  extends ContentViewModel, Omit<SocialLinksContent, 'type'> {
+  extends ContentViewModel,
+    Omit<SocialLinksContent, 'type'> {
   isFullWidth: boolean;
 }
 
 export interface DividerSectionViewModel
-  extends ContentViewModel, Omit<DividerSectionContent, 'type'> {
+  extends ContentViewModel,
+    Omit<DividerSectionContent, 'type'> {
   isFullWidth: boolean;
 }
 
 export interface BookingSectionViewModel
-  extends ContentViewModel, Omit<BookingSectionContent, 'type'> {
+  extends ContentViewModel,
+    Omit<BookingSectionContent, 'type'> {
   buttonViewModel: ButtonViewModel;
   isFullWidth: boolean;
 }
 
-export interface PageHeaderViewModel extends Omit<
-  PageHeaderDesktop | PageHeaderMobile,
-  | 'logoImage'
-  | 'logoImageStyle'
-  | 'isLogoOptional'
-  | 'viewport'
-  | 'isLogoVisible'
-  | 'logoTemplateImage'
-  | 'logoImageHeight'
-  | 'logoImageWidth'
-> {
+export interface PageHeaderViewModel
+  extends Omit<
+    PageHeaderDesktop | PageHeaderMobile,
+    | 'logoImage'
+    | 'logoImageStyle'
+    | 'isLogoOptional'
+    | 'viewport'
+    | 'isLogoVisible'
+    | 'logoTemplateImage'
+    | 'logoImageHeight'
+    | 'logoImageWidth'
+  > {
   logo: LogoViewModel;
   pages: PageViewModel[];
 }
 
-export interface PageFooterViewModel extends Omit<
-  PageFooterDesktop | PageFooterMobile,
-  | 'logoImage'
-  | 'logoImageStyle'
-  | 'isLogoOptional'
-  | 'viewport'
-  | 'isLogoVisible'
-  | 'logoTemplateImage'
-  | 'logoImageHeight'
-  | 'logoImageWidth'
-> {
+export interface PageFooterViewModel
+  extends Omit<
+    PageFooterDesktop | PageFooterMobile,
+    | 'logoImage'
+    | 'logoImageStyle'
+    | 'isLogoOptional'
+    | 'viewport'
+    | 'isLogoVisible'
+    | 'logoTemplateImage'
+    | 'logoImageHeight'
+    | 'logoImageWidth'
+  > {
   logo: LogoViewModel;
 }
 

package/src/brand-page-maker/assessors/banner-section-description-visibility.assessor.ts

@@ -48,11 +48,11 @@ export const bannerOverlayOptionsVisibilityAssessor: VisibilityAssessor<
 > = (content) => {
   return Boolean(
     (content.media?.type === 'getty-video' || content.imageUrl) &&
-    [
-      ALIGN_CARD_CENTER_IMAGE,
-      ALIGN_CARD_LEFT_IMAGE,
-      BIG_IMAGE,
-      ALIGN_LEFT_BIG_IMAGE,
-    ].includes(content.displayStyle),
+      [
+        ALIGN_CARD_CENTER_IMAGE,
+        ALIGN_CARD_LEFT_IMAGE,
+        BIG_IMAGE,
+        ALIGN_LEFT_BIG_IMAGE,
+      ].includes(content.displayStyle),
   );
 };

package/src/brand-page-maker/assessors/color-replacement-icon-visibility.assessor.ts

@@ -6,7 +6,7 @@ export const colorReplacementIconVisibilityTypeAssessor: VisibilityAssessor<
 > = (content) => {
   return Boolean(
     content?.colorReplacements &&
-    content?.iconUrl &&
-    content?.mediaType === 'shape',
+      content?.iconUrl &&
+      content?.mediaType === 'shape',
   );
 };

package/src/brand-page-maker/assessors/color-replacement-profile-visibility.assessor.ts

@@ -6,7 +6,7 @@ export const colorReplacementProfileVisibilityTypeAssessor: VisibilityAssessor<
 > = (content) => {
   return Boolean(
     content?.colorReplacements &&
-    content?.avatarImageUrl &&
-    content?.mediaType === 'shape',
+      content?.avatarImageUrl &&
+      content?.mediaType === 'shape',
   );
 };

package/src/brand-page-maker/assessors/color-replacement-visibility.assessor.ts

@@ -10,7 +10,7 @@ export const colorReplacementVisibilityTypeAssessor: VisibilityAssessor<
 > = (content) => {
   return Boolean(
     content?.colorReplacements &&
-    content?.imageUrl &&
-    content?.mediaType === 'shape',
+      content?.imageUrl &&
+      content?.mediaType === 'shape',
   );
 };