@designcrowd/library.brand-page 5.19.1-error-html2canvas-1 → 5.19.1-error-html2canvas-3

package/src/brand-page/components/text-wrapper/TextWrapper.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <div v-if="sanitizeText" class="tw-w-full" :style="data.wrapperStyle">
     <div
@@ -39,6 +40,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   element: 'p',
   textStyle: {} as any,
+  slug: undefined,
 });
 
 const data = reactive<{
@@ -60,7 +62,7 @@ const textStyles = computed(() => {
 });
 
 const style = computed<any>(() => {
-  const { backgroundColor, ...textStyle } = props.textStyle;
+  const { backgroundColor: _backgroundColor, ...textStyle } = props.textStyle;
 
   return textStyle;
 });

package/src/brand-page/constants/sections/footer-display.constants.ts

@@ -1,6 +1,6 @@
 import { ALIGN_CENTERED, ALIGN_JUSTIFIED } from '../misc.constants';
 import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
-import { tr, commonTr } from '@src/composables/useTranslate';
+import { commonTr } from '@src/composables/useTranslate';
 
 export const FOOTER_DISPLAY = {
   /** @deprecated */

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

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

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

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

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

@@ -84,8 +84,7 @@ 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,6 +456,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
+    "userPromptContentKey": undefined,
     "v": 17,
   },
   "useOldLogoRenderSize": true,
@@ -901,6 +902,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
+    "userPromptContentKey": undefined,
     "v": 17,
   },
   "useOldLogoRenderSize": true,
@@ -1353,6 +1355,7 @@ 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,6 +472,7 @@ 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,6 +446,7 @@ BrandPageModel {
       },
     },
   },
+  "userPromptContentKey": undefined,
   "v": 0,
 }
 `;
@@ -911,6 +912,7 @@ BrandPageModel {
       },
     },
   },
+  "userPromptContentKey": undefined,
   "v": 0,
 }
 `;

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

@@ -1,4 +1,4 @@
-import type { BrandPageModel, LogoImageModel } from '../..';
+import type { 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,7 +3,6 @@ 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,7 +2,6 @@ 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,7 +1,6 @@
 import {
   type AboutSectionContent,
   type BannerSectionContent,
-  type BrandPageModel,
   type ButtonContent,
   type ContactFormContent,
   type Content,

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

@@ -1,8 +1,4 @@
-import {
-  type BrandPageModel,
-  type TextContent,
-  type LogoImageModel,
-} from '../..';
+import { 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 BrandPageModel, type ButtonContent } from '../..';
+import { 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,6 +701,41 @@ 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,6 +326,84 @@ 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,
@@ -342,16 +420,6 @@ 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]) =>
@@ -372,20 +440,48 @@ const getPersonalisationValueFromPropertyAsync = async (
       typeof propertyValue === 'string' && propertyValue.endsWith('.svg'),
   });
 
-  const {
-    value,
-    section: updatedSection,
-    valuesToUpdate,
-  } = await getPersonalisationValueAsync(section, property);
+  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,
-      [`${personalisationRole}Section`]: updatedSection,
-    },
-    valuesToUpdate,
-  };
+    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;
+    }
+  }
+
+  return { value: undefined, personalisation };
 };
 
 type ContentProperty = Record<string, string | any>;

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

@@ -1,5 +1,4 @@
 import type {
-  PageStyles,
   ButtonWithModalContent,
   ProfileContent,
   TextContent,
@@ -32,11 +31,9 @@ import type {
   TextShapeItem,
   TextStyleDeclaration,
   AspectRatio,
-  LogoVariation,
   LogoImageModel,
   LogoTemplateImageModel,
   CookieOptions,
-  SensitiveContent,
   BookingSectionContent,
   MediaTypes,
   TextStyles,
@@ -84,8 +81,7 @@ 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;
@@ -95,7 +91,8 @@ export interface ButtonViewModel
 export type ImageViewModel = ContentViewModel & Omit<ImageContent, 'type'>;
 
 export interface ImageGalleryViewModel
-  extends ContentViewModel,
+  extends
+    ContentViewModel,
     Omit<ImageGalleryContent, 'type' | 'galleryStyles'> {
   styles: GalleryStyles;
 }
@@ -114,14 +111,12 @@ 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;
 }
@@ -140,41 +135,35 @@ 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;
@@ -225,64 +214,57 @@ 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',
   );
 };