@designcrowd/library.brand-page 5.17.28 → 5.18.0

package/src/metadata-builder/builders/section-builders/testimonial-section-builder.ts

@@ -1,85 +1,167 @@
 import type {
+  ColorReplacement,
   TestimonialSectionContent,
   BrandPageModel,
+  TextStyleDeclaration,
 } from '../../../brand-page/models';
-import type {
-  TestimonialItem,
-  TestimonialSectionArguments,
+import { tiptapJsonToHtml } from '../../helpers/rte.helpers';
+import {
+  isTiptapDocument,
+  type TestimonialItem,
+  type TestimonialSectionArguments,
 } from '../../parsers/section-tool-arguments';
 import type { BuilderResult } from '../../models';
-import { applyScalarFields, applyStyleFields } from '../section-field-utils';
+import {
+  applyScalarFields,
+  applyStyleFields,
+  resolveGlobalPresetIntoStyle,
+} from '../section-field-utils';
+import {
+  applyColorThemeToReplacements,
+  resolveShapeColorReplacementsAsync,
+} from '../shape-color-utils';
 import { BaseSectionBuilder } from './base-section-builder';
+import {
+  validateTestimonialSection,
+  TESTIMONIAL_ITEM_CAP,
+} from '../section-rules/testimonial-section.rules';
+
+const resolveItemColorsAsync = async (
+  item: TestimonialItem,
+  existing: ColorReplacement[] | undefined,
+  prevImageUrl: string | undefined,
+): Promise<ColorReplacement[]> => {
+  let colors = existing ?? [];
+
+  if (item.avatar_shape_url && item.avatar_shape_url !== prevImageUrl) {
+    colors = await resolveShapeColorReplacementsAsync(item.avatar_shape_url);
+  }
+
+  if (item.color_theme) {
+    colors = applyColorThemeToReplacements(colors, item.color_theme);
+  }
+
+  return colors;
+};
 
-const applyTestimonialItems = (
+const applyTestimonialItemsAsync = async (
   content: TestimonialSectionContent,
   items: TestimonialItem[],
-): void => {
-  content.items = items.map((item) => ({
-    imageUrl: item.avatar_image_url || '',
-    name: item.name || '',
-    position: item.position || '',
-    testimonials: item.testimonial || '',
-    colorReplacements: [],
-    mediaType: 'image',
-  }));
+): Promise<void> => {
+  content.items = await Promise.all(
+    items.map(async (item) => ({
+      imageUrl: item.avatar_shape_url || item.avatar_image_url || '',
+      name: item.name || '',
+      position: item.position || '',
+      testimonials: item.testimonial || '',
+      colorReplacements: await resolveItemColorsAsync(item, [], undefined),
+      mediaType: item.avatar_shape_url ? 'shape' : 'image',
+    })),
+  );
 };
 
-const mergeTestimonialItems = (
+const mergeTestimonialItemsAsync = async (
   content: TestimonialSectionContent,
   items: TestimonialItem[],
   replaceAll: boolean,
-): void => {
+): Promise<void> => {
   const hasIndexedItems = items.some((item) => item.item_index !== undefined);
 
   if (hasIndexedItems) {
-    for (const item of items) {
-      const targetIndex = item.item_index;
-
-      if (
-        targetIndex === undefined ||
-        targetIndex < 0 ||
-        !content.items?.[targetIndex]
-      )
-        continue;
-
-      const existing = content.items[targetIndex];
+    await Promise.all(
+      items.map(async (item) => {
+        const targetIndex = item.item_index;
+
+        if (
+          targetIndex === undefined ||
+          targetIndex < 0 ||
+          !content.items?.[targetIndex]
+        )
+          return;
+
+        const existing = content.items[targetIndex];
+        const prevImageUrl = existing.imageUrl;
+
+        if (item.avatar_shape_url !== undefined) {
+          existing.imageUrl = item.avatar_shape_url;
+          existing.mediaType = 'shape';
+        } else if (item.avatar_image_url !== undefined) {
+          existing.imageUrl = item.avatar_image_url;
+          existing.mediaType = 'image';
+        }
 
-      if (item.avatar_image_url !== undefined)
-        existing.imageUrl = item.avatar_image_url;
+        if (item.name !== undefined) existing.name = item.name;
 
-      if (item.name !== undefined) existing.name = item.name;
+        if (item.position !== undefined) existing.position = item.position;
 
-      if (item.position !== undefined) existing.position = item.position;
+        if (item.testimonial !== undefined)
+          existing.testimonials = item.testimonial;
 
-      if (item.testimonial !== undefined)
-        existing.testimonials = item.testimonial;
-    }
+        if (
+          item.avatar_shape_url !== undefined ||
+          item.color_theme !== undefined
+        ) {
+          existing.colorReplacements = await resolveItemColorsAsync(
+            item,
+            existing.colorReplacements,
+            prevImageUrl,
+          );
+        }
+      }),
+    );
 
     return;
   }
 
-  const updatedItems = items.map((item, index) => {
-    const existing = content.items?.[index];
-
-    return {
-      ...(existing || {}),
-      imageUrl: item.avatar_image_url ?? existing?.imageUrl ?? '',
-      name: item.name ?? existing?.name ?? '',
-      position: item.position ?? existing?.position ?? '',
-      testimonials: item.testimonial ?? existing?.testimonials ?? '',
-      colorReplacements: existing?.colorReplacements ?? [],
-      mediaType: existing?.mediaType ?? 'image',
-    };
-  });
-
-  if (!replaceAll && content.items && content.items.length > items.length) {
-    updatedItems.push(...content.items.slice(items.length));
+  const itemsToMerge = items.filter((item) => item.insert_at === undefined);
+
+  const updatedItems = await Promise.all(
+    itemsToMerge.map(async (item, index) => {
+      const existing = content.items?.[index];
+
+      const imageUrl =
+        item.avatar_shape_url ??
+        item.avatar_image_url ??
+        existing?.imageUrl ??
+        '';
+      const mediaType = item.avatar_shape_url
+        ? 'shape'
+        : item.avatar_image_url
+          ? 'image'
+          : existing?.mediaType ?? 'image';
+
+      return {
+        ...(existing || {}),
+        imageUrl,
+        name: item.name ?? existing?.name ?? '',
+        position: item.position ?? existing?.position ?? '',
+        testimonials: item.testimonial ?? existing?.testimonials ?? '',
+        colorReplacements: await resolveItemColorsAsync(
+          item,
+          existing?.colorReplacements,
+          existing?.imageUrl,
+        ),
+        mediaType,
+      };
+    }),
+  );
+
+  if (
+    !replaceAll &&
+    content.items &&
+    content.items.length > itemsToMerge.length
+  ) {
+    updatedItems.push(...content.items.slice(itemsToMerge.length));
   }
 
   content.items = updatedItems;
 };
 
 export class TestimonialSectionBuilder extends BaseSectionBuilder<TestimonialSectionContent> {
+  protected get sectionValidate() {
+    return validateTestimonialSection;
+  }
+
   async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
     this.log('Build called');
 
@@ -89,16 +171,34 @@ export class TestimonialSectionBuilder extends BaseSectionBuilder<TestimonialSec
       return { request: this.request, model, errors: validation.errors };
     }
 
-    const resolved = this.resolveContent(model);
+    const resolved = this.resolveAndRepositionContent(model);
 
     if ('error' in resolved) return resolved.error;
 
     const content = resolved.content;
 
     applyScalarFields(content, this.args, this.sectionType);
-    applyStyleFields(content, this.args, this.sectionType);
+    applyStyleFields(
+      content,
+      this.args,
+      this.sectionType,
+      this.getGlobalTextStyles(model),
+    );
 
     const args = this.args as TestimonialSectionArguments;
+    const textStyleOptions = model.styles?.textStyles?.textStyleOptions;
+
+    if (args.title !== undefined) {
+      if (isTiptapDocument(args.title)) {
+        content.title = tiptapJsonToHtml(args.title);
+        content.titleStyle = resolveGlobalPresetIntoStyle(
+          content.titleStyle,
+          textStyleOptions,
+        ) as TextStyleDeclaration;
+      } else {
+        content.title = args.title;
+      }
+    }
 
     if (args.background_style && typeof args.background_style === 'object') {
       const existing = content.backgroundStyle || {};
@@ -130,9 +230,13 @@ export class TestimonialSectionBuilder extends BaseSectionBuilder<TestimonialSec
 
     if (args.items && Array.isArray(args.items)) {
       if (this.mode === 'create') {
-        applyTestimonialItems(content, args.items);
+        await applyTestimonialItemsAsync(content, args.items);
       } else {
-        mergeTestimonialItems(content, args.items, !!args._replace_items);
+        await mergeTestimonialItemsAsync(
+          content,
+          args.items,
+          !!args._replace_items,
+        );
       }
     }
 
@@ -161,12 +265,12 @@ export class TestimonialSectionBuilder extends BaseSectionBuilder<TestimonialSec
           Math.min(item.insert_at ?? 0, content.items?.length ?? 0),
         );
         const newItem = {
-          imageUrl: item.avatar_image_url ?? '',
+          imageUrl: item.avatar_shape_url ?? item.avatar_image_url ?? '',
           name: item.name ?? '',
           position: item.position ?? '',
           testimonials: item.testimonial ?? '',
-          colorReplacements: [],
-          mediaType: 'image',
+          colorReplacements: await resolveItemColorsAsync(item, [], undefined),
+          mediaType: item.avatar_shape_url ? 'shape' : 'image',
         };
 
         content.items = content.items ?? [];
@@ -189,6 +293,23 @@ export class TestimonialSectionBuilder extends BaseSectionBuilder<TestimonialSec
       }
     }
 
+    // Post-merge cap check. itemCapCheck only fires for create / update with
+    // _replace_items, so insert_at on an already-full section silently bloats
+    // the array. Surface as an error so the AI retry loop gets a signal and
+    // can reissue with _remove_item_indices or fewer inserts.
+    // brandSite key mirrors base-section-builder's hardcoded brandPageType.
+    const cap = TESTIMONIAL_ITEM_CAP.brandSite;
+
+    if (content.items && content.items.length > cap) {
+      return {
+        request: this.request,
+        model,
+        errors: [
+          `"${TESTIMONIAL_ITEM_CAP.arrayField}" has ${content.items.length} items but "testimonial-section" supports a maximum of ${cap}`,
+        ],
+      };
+    }
+
     return { request: this.request, model };
   }
 }

package/src/metadata-builder/builders/section-builders/text-section-builder.ts

@@ -5,34 +5,69 @@ import type {
   TextStyleDeclaration,
   BrandPageModel,
 } from '../../../brand-page/models';
-import { updateRTEText } from '../../helpers/rte.helpers';
-import type {
-  TextSectionArguments,
-  TextSectionItem,
+import type { TextStyleOptions } from '../../../brand-page/models/styles.model';
+import { tiptapJsonToHtml } from '../../helpers/rte.helpers';
+import {
+  isTiptapDocument,
+  type TextSectionArguments,
+  type TextSectionItem,
 } from '../../parsers/section-tool-arguments';
-import { applyScalarFields, applyStyleFields } from '../section-field-utils';
+import {
+  applyScalarFields,
+  applyStyleFields,
+  resolveGlobalPresetIntoStyle,
+} from '../section-field-utils';
 import { BaseSectionBuilder } from './base-section-builder';
+import { validateTextSection } from '../section-rules/text-section.rules';
+
+/** Resolve a RichTextField (string or TiptapDocument) to a plain HTML string. */
+const resolveText = (value: unknown): { html: string; wasTiptap: boolean } => {
+  if (isTiptapDocument(value))
+    return { html: tiptapJsonToHtml(value), wasTiptap: true };
+
+  return { html: typeof value === 'string' ? value : '', wasTiptap: false };
+};
+
+const clearTextStyleTypeIfTiptap = (
+  style: TextStyleDeclaration,
+  wasTiptap: boolean,
+  textStyleOptions: TextStyleOptions | undefined,
+): TextStyleDeclaration =>
+  wasTiptap
+    ? (resolveGlobalPresetIntoStyle(
+        style,
+        textStyleOptions,
+      ) as TextStyleDeclaration)
+    : style;
 
 const createTextItem = (
   item: TextSectionItem,
   baseStyle: TextStyleDeclaration,
+  textStyleOptions: TextStyleOptions | undefined,
 ): TextItem => {
   const textStyle = (
     item.text_style ? { ...baseStyle, ...item.text_style } : { ...baseStyle }
   ) as TextStyleDeclaration;
 
+  const { html, wasTiptap } = resolveText(item.text);
+
   return {
-    text: item.text || '',
-    textStyle,
+    text: html,
+    textStyle: clearTextStyleTypeIfTiptap(
+      textStyle,
+      wasTiptap,
+      textStyleOptions,
+    ),
   };
 };
 
 const applyTextItems = (
   content: TextContent,
   items: TextSectionItem[],
+  textStyleOptions: TextStyleOptions | undefined,
 ): void => {
   content.textItems = items.map((item) =>
-    createTextItem(item, content.textStyle || {}),
+    createTextItem(item, content.textStyle || {}, textStyleOptions),
   );
 };
 
@@ -40,6 +75,7 @@ const mergeTextItems = (
   content: TextContent,
   items: TextSectionItem[],
   replaceAll: boolean,
+  textStyleOptions: TextStyleOptions | undefined,
 ): void => {
   const hasIndexedItems = items.some((item) => item.item_index !== undefined);
 
@@ -56,7 +92,16 @@ const mergeTextItems = (
 
       const existing = content.textItems[targetIndex];
 
-      if (item.text !== undefined) existing.text = item.text;
+      if (item.text !== undefined) {
+        const { html, wasTiptap } = resolveText(item.text);
+
+        existing.text = html;
+        existing.textStyle = clearTextStyleTypeIfTiptap(
+          existing.textStyle || {},
+          wasTiptap,
+          textStyleOptions,
+        );
+      }
 
       if (item.text_style && typeof item.text_style === 'object') {
         const mergedStyle = (
@@ -66,14 +111,15 @@ const mergeTextItems = (
         ) as TextStyleDeclaration;
 
         existing.textStyle = mergedStyle;
-        existing.text = updateRTEText(existing.text, mergedStyle);
       }
     }
 
     return;
   }
 
-  const updatedItems = items.map((item, index) => {
+  const itemsToMerge = items.filter((item) => item.insert_at === undefined);
+
+  const updatedItems = itemsToMerge.map((item, index) => {
     const existing = content.textItems?.[index];
     const baseStyle = existing?.textStyle || content.textStyle || {};
 
@@ -81,20 +127,25 @@ const mergeTextItems = (
       item.text_style ? { ...baseStyle, ...item.text_style } : baseStyle
     ) as TextStyleDeclaration;
 
-    const text = item.text ?? existing?.text ?? '';
+    const resolved = item.text !== undefined ? resolveText(item.text) : null;
+    const text = resolved ? resolved.html : existing?.text ?? '';
 
     return {
-      text: item.text_style ? updateRTEText(text, mergedStyle) : text,
-      textStyle: mergedStyle,
+      text,
+      textStyle: clearTextStyleTypeIfTiptap(
+        mergedStyle,
+        resolved?.wasTiptap ?? false,
+        textStyleOptions,
+      ),
     };
   });
 
   if (
     !replaceAll &&
     content.textItems &&
-    content.textItems.length > items.length
+    content.textItems.length > itemsToMerge.length
   ) {
-    updatedItems.push(...content.textItems.slice(items.length));
+    updatedItems.push(...content.textItems.slice(itemsToMerge.length));
   }
 
   content.textItems = updatedItems;
@@ -107,18 +158,30 @@ const mergeTextItems = (
 const applySingleTextField = (
   content: TextContent,
   args: TextSectionArguments,
+  textStyleOptions: TextStyleOptions | undefined,
 ): void => {
-  if (typeof args.text === 'string') {
+  if (args.text !== undefined) {
+    const { html, wasTiptap } = resolveText(args.text);
+
     if (Array.isArray(content.textItems) && content.textItems.length > 0) {
       content.textItems[0] = {
         ...content.textItems[0],
-        text: args.text,
+        text: html,
+        textStyle: clearTextStyleTypeIfTiptap(
+          content.textItems[0].textStyle || {},
+          wasTiptap,
+          textStyleOptions,
+        ),
       };
     } else {
       content.textItems = [
         {
-          text: args.text,
-          textStyle: { ...(content.textStyle || {}) },
+          text: html,
+          textStyle: clearTextStyleTypeIfTiptap(
+            { ...(content.textStyle || {}) },
+            wasTiptap,
+            textStyleOptions,
+          ),
         },
       ];
     }
@@ -132,18 +195,21 @@ const applySingleTextField = (
   ) {
     const mergedStyle = {
       ...(content.textItems[0].textStyle || {}),
-      ...(content.textStyle || {}),
-    };
+      ...args.text_style,
+    } as TextStyleDeclaration;
 
     content.textItems[0] = {
       ...content.textItems[0],
       textStyle: mergedStyle,
-      text: updateRTEText(content.textItems[0].text, mergedStyle),
     };
   }
 };
 
 export class TextSectionBuilder extends BaseSectionBuilder<TextContent> {
+  protected get sectionValidate() {
+    return validateTextSection;
+  }
+
   async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
     this.log('Build called');
 
@@ -153,25 +219,36 @@ export class TextSectionBuilder extends BaseSectionBuilder<TextContent> {
       return { request: this.request, model, errors: validation.errors };
     }
 
-    const resolved = this.resolveContent(model);
+    const resolved = this.resolveAndRepositionContent(model);
 
     if ('error' in resolved) return resolved.error;
 
     const content = resolved.content;
+    const textStyleOptions = model.styles?.textStyles?.textStyleOptions;
 
     applyScalarFields(content, this.args, this.sectionType);
-    applyStyleFields(content, this.args, this.sectionType);
+    applyStyleFields(
+      content,
+      this.args,
+      this.sectionType,
+      this.getGlobalTextStyles(model),
+    );
 
     const args = this.args as TextSectionArguments;
 
     if (args.items && Array.isArray(args.items)) {
       if (this.mode === 'create') {
-        applyTextItems(content, args.items);
+        applyTextItems(content, args.items, textStyleOptions);
       } else {
-        mergeTextItems(content, args.items, !!args._replace_items);
+        mergeTextItems(
+          content,
+          args.items,
+          !!args._replace_items,
+          textStyleOptions,
+        );
       }
     } else {
-      applySingleTextField(content, args);
+      applySingleTextField(content, args, textStyleOptions);
     }
 
     // Phase 2: Item operations (remove, insert, reorder)
@@ -204,9 +281,15 @@ export class TextSectionBuilder extends BaseSectionBuilder<TextContent> {
             ? { ...baseStyle, ...item.text_style }
             : { ...baseStyle }
         ) as TextStyleDeclaration;
+
+        const { html, wasTiptap } = resolveText(item.text);
         const newItem: TextItem = {
-          text: item.text ?? '',
-          textStyle,
+          text: html,
+          textStyle: clearTextStyleTypeIfTiptap(
+            textStyle,
+            wasTiptap,
+            textStyleOptions,
+          ),
         };
 
         content.textItems = content.textItems ?? [];
@@ -236,6 +319,23 @@ export class TextSectionBuilder extends BaseSectionBuilder<TextContent> {
       };
     }
 
+    // CREATE-mode: the editor's `createInitialTextContent` factory seeds
+    // `content.text` with the i18n placeholder "This is a sample text" as a
+    // click-to-add affordance for the manual maker UI. That placeholder
+    // must not survive an AI-driven create. The AI flow writes resolved
+    // copy into `content.textItems` only — never to the legacy single-text
+    // `content.text` field — so when the renderer reads `content.text`
+    // (non-brandSite path in Text.vue, or any fallback for empty
+    // textItems), it falls back to the placeholder.
+    //
+    // Mirror the resolved first item's text into the legacy field so both
+    // renderer paths agree. Same pattern as yesterday's about-section /
+    // contact-form / testimonial RTE fix — clear the factory default and
+    // align both fields with the AI's actual output.
+    if (this.mode === 'create') {
+      content.text = content.textItems?.[0]?.text ?? '';
+    }
+
     return { request: this.request, model };
   }
 }

package/src/metadata-builder/builders/section-content-factory.ts

@@ -3,11 +3,17 @@
  * Used by BaseSectionBuilder when adding a new section to a page.
  */
 import { CONTENT_SETTINGS_CONFIGS } from '../../brand-page-maker/constants/config-settings-constant';
-import type { Content, ContentType } from '../../brand-page/models';
+import type { CreateInitialContentOptions } from '../../brand-page-maker/models/content-settings-configs';
+import type {
+  BrandPageType,
+  Content,
+  ContentType,
+} from '../../brand-page/models';
 import type { SectionType } from '../parsers/section-tool-arguments';
 
 export const createDefaultSectionContent = (
   sectionType: SectionType,
+  brandPageType?: BrandPageType,
 ): Content | null => {
   const configs = CONTENT_SETTINGS_CONFIGS();
   const config = configs[sectionType as ContentType];
@@ -16,5 +22,12 @@ export const createDefaultSectionContent = (
     return null;
   }
 
-  return config.createInitialContent() as Content;
+  const options = brandPageType
+    ? ({
+        brandPageType,
+        userState: { emailAddress: '' },
+      } as CreateInitialContentOptions)
+    : undefined;
+
+  return config.createInitialContent(options) as Content;
 };