@designcrowd/library.brand-page 5.17.28 → 5.18.0

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

@@ -1,4 +1,13 @@
-import { type BrandPageModel, type Content } from '../../../brand-page/models';
+import {
+  BRAND_PAGE_TYPES,
+  type BrandPageModel,
+  type Content,
+} from '../../../brand-page/models';
+import type { TextStyleOptions } from '../../../brand-page/models/styles.model';
+import {
+  type EventTracker,
+  TRIGGER_TYPE,
+} from '../../../brand-page-maker/composables/useEventTracker';
 import type { Logger } from '../../logger';
 import {
   BaseMetadataBuilder,
@@ -9,6 +18,7 @@ import type {
   SectionToolArguments,
   SectionType,
 } from '../../parsers/section-tool-arguments';
+import type { ValidationContext } from '../../sanitizers/section-args-validator';
 import { createDefaultSectionContent } from '../section-content-factory';
 
 export interface SectionBuilderPayload {
@@ -18,22 +28,38 @@ export interface SectionBuilderPayload {
   contentId?: string;
   /** Target page ID — used for create operations to place the new section on the correct page. */
   pageId?: string;
+  /** Insert/move before this existing content ID (create: position on insert; update: reposition). */
+  moveBeforeContentId?: string;
 }
 
 /**
  * Abstract base for per-section builders.
  *
  * Concrete builders implement `buildAsync` directly, using
- * `resolveContent()` to obtain the content object to mutate.
+ * `resolveAndRepositionContent()` to obtain the content object to mutate.
  */
 export abstract class BaseSectionBuilder<
   C extends Content = Content,
 > extends BaseMetadataBuilder<SectionBuilderPayload> {
+  /**
+   * Content ID resolved during `resolveAndRepositionContent` (CREATE: the
+   * id of the freshly-created content; UPDATE: the id of the located target).
+   * `MetadataExecutor` reads this via `getResolvedContentId()` to surface it
+   * on the returned BuilderResult, so callers can anchor follow-up operations
+   * (notably the AI retry vacant-slot tracker) to the section we just touched.
+   */
+  protected resolvedContentId?: string;
+
   constructor(
     request: MetadataBuilderRequest<SectionBuilderPayload>,
     logger?: Logger,
+    eventTracker?: EventTracker,
   ) {
-    super(request, logger);
+    super(request, logger, eventTracker);
+  }
+
+  public getResolvedContentId(): string | undefined {
+    return this.resolvedContentId;
   }
 
   protected get sectionType(): SectionType {
@@ -48,9 +74,44 @@ export abstract class BaseSectionBuilder<
     return this.request.payload!.arguments;
   }
 
-  /** Override in subclasses for per-section validation. */
+  /**
+   * Returns the explicit validate function for this section's AI arguments.
+   * Override in concrete builders to return the colocated validate function.
+   * Return undefined (default) to skip validation — used by structural
+   * builders (delete, move) that have no argument constraints.
+   */
+  protected get sectionValidate():
+    | ((args: Record<string, unknown>, ctx: ValidationContext) => string[])
+    | undefined {
+    return undefined;
+  }
+
+  /**
+   * Returns the model's global text style options. Used by `applyStyleFields`
+   * to resolve an existing style's `textStyleType` preset into concrete
+   * values before clearing the preset reference when applying an AI override.
+   */
+  protected getGlobalTextStyles(
+    model: BrandPageModel,
+  ): TextStyleOptions | undefined {
+    return model.styles?.textStyles?.textStyleOptions;
+  }
+
+  /**
+   * Returns validation errors for the section's AI arguments.
+   * Override in subclasses to add section-specific checks — call super.validateSection()
+   * to inherit the base rule enforcement.
+   */
   protected validateSection(): string[] {
-    return [];
+    const validate = this.sectionValidate;
+
+    if (!validate) return [];
+
+    // TODO(KP): Pass brandPageType from the request when available, to enforce item caps correctly.
+    return validate(this.args as Record<string, unknown>, {
+      brandPageType: BRAND_PAGE_TYPES.brandSite,
+      mode: this.mode,
+    });
   }
 
   async validateAsync(): Promise<{ errors: string[] }> {
@@ -69,7 +130,16 @@ export abstract class BaseSectionBuilder<
       }
     }
 
-    errors.push(...this.validateSection());
+    try {
+      errors.push(...this.validateSection());
+    } catch (error) {
+      // Validation is a background concern — never let a validator bug break the build.
+      this.log({
+        message:
+          'validateSection failed unexpectedly — skipping arg validation',
+        error,
+      });
+    }
 
     return { errors };
   }
@@ -78,14 +148,32 @@ export abstract class BaseSectionBuilder<
    * Validates the request, then creates or finds the target content.
    * Returns `{ content }` on success, or `{ error }` with a BuilderResult on failure.
    */
-  protected resolveContent(
+  protected resolveAndRepositionContent(
     model: BrandPageModel,
   ): { content: C } | { error: BuilderResult } {
     if (this.mode === 'create') {
-      return this.createContent(model);
+      const created = this.createContent(model);
+
+      if ('content' in created) {
+        this.resolvedContentId = created.content.id;
+      }
+
+      return created;
+    }
+
+    const result = this.findContent(model);
+
+    if ('error' in result) return result;
+
+    this.resolvedContentId = result.content.id;
+
+    const { moveBeforeContentId } = this.request.payload!;
+
+    if (moveBeforeContentId) {
+      this.moveContent(model, result.content, moveBeforeContentId);
     }
 
-    return this.findContent(model);
+    return result;
   }
 
   private createContent(
@@ -94,7 +182,10 @@ export abstract class BaseSectionBuilder<
     const payload = this.request.payload!;
     const { pageId } = payload;
 
-    const content = createDefaultSectionContent(this.sectionType);
+    const content = createDefaultSectionContent(
+      this.sectionType,
+      model.brandPageType,
+    );
 
     if (!content) {
       return {
@@ -126,7 +217,28 @@ export abstract class BaseSectionBuilder<
       };
     }
 
-    targetPage.contents.push(content);
+    const { moveBeforeContentId } = payload;
+
+    if (moveBeforeContentId) {
+      const anchorIndex = targetPage.contents.findIndex(
+        (c) => c.id === moveBeforeContentId,
+      );
+
+      if (anchorIndex !== -1) {
+        targetPage.contents.splice(anchorIndex, 0, content);
+      } else {
+        targetPage.contents.push(content);
+      }
+    } else {
+      targetPage.contents.push(content);
+    }
+
+    this.eventTracker?.sendAddContentEvent(
+      this.sectionType,
+      undefined,
+      undefined,
+      TRIGGER_TYPE.AI_BUILDER,
+    );
 
     this.log({
       message: `Created ${this.sectionType} section on page ${targetPage.id}`,
@@ -136,6 +248,32 @@ export abstract class BaseSectionBuilder<
     return { content: content as C };
   }
 
+  private moveContent(
+    model: BrandPageModel,
+    content: C,
+    beforeContentId: string,
+  ): void {
+    for (const page of model.pages) {
+      const currentIndex = page.contents.findIndex((c) => c.id === content.id);
+
+      if (currentIndex === -1) continue;
+
+      page.contents.splice(currentIndex, 1);
+
+      const anchorIndex = page.contents.findIndex(
+        (c) => c.id === beforeContentId,
+      );
+
+      if (anchorIndex !== -1) {
+        page.contents.splice(anchorIndex, 0, content);
+      } else {
+        page.contents.push(content);
+      }
+
+      return;
+    }
+  }
+
   private findContent(
     model: BrandPageModel,
   ): { content: C } | { error: BuilderResult } {

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

@@ -0,0 +1,87 @@
+import type {
+  BookingSectionContent,
+  BrandPageModel,
+  TextStyleDeclaration,
+} from '../../../brand-page/models';
+import { tiptapJsonToHtml } from '../../helpers/rte.helpers';
+import type { BuilderResult } from '../../models';
+import {
+  isTiptapDocument,
+  type BookingSectionArguments,
+} from '../../parsers/section-tool-arguments';
+import {
+  applyButtonLink,
+  applyScalarFields,
+  applyStyleFields,
+  resolveGlobalPresetIntoStyle,
+} from '../section-field-utils';
+import { BaseSectionBuilder } from './base-section-builder';
+import { validateBookingSection } from '../section-rules/booking-section.rules';
+
+export class BookingSectionBuilder extends BaseSectionBuilder<BookingSectionContent> {
+  protected get sectionValidate() {
+    return validateBookingSection;
+  }
+
+  async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
+    this.log('Build called');
+
+    const validation = await this.validateAsync();
+
+    if (validation.errors.length) {
+      return { request: this.request, model, errors: validation.errors };
+    }
+
+    const resolved = this.resolveAndRepositionContent(model);
+
+    if ('error' in resolved) return resolved.error;
+
+    const bookingArgs = this.args as BookingSectionArguments;
+
+    applyScalarFields(resolved.content, this.args, this.sectionType);
+    applyButtonLink(resolved.content, bookingArgs);
+    applyStyleFields(
+      resolved.content,
+      this.args,
+      this.sectionType,
+      this.getGlobalTextStyles(model),
+    );
+
+    const textStyleOptions = model.styles?.textStyles?.textStyleOptions;
+
+    if (bookingArgs.title !== undefined) {
+      if (isTiptapDocument(bookingArgs.title)) {
+        resolved.content.title = tiptapJsonToHtml(bookingArgs.title);
+        resolved.content.titleStyle = resolveGlobalPresetIntoStyle(
+          resolved.content.titleStyle,
+          textStyleOptions,
+        ) as TextStyleDeclaration;
+      } else {
+        resolved.content.title = bookingArgs.title;
+      }
+    }
+
+    if (bookingArgs.description !== undefined) {
+      if (isTiptapDocument(bookingArgs.description)) {
+        resolved.content.description = tiptapJsonToHtml(
+          bookingArgs.description,
+        );
+        resolved.content.descriptionStyle = resolveGlobalPresetIntoStyle(
+          resolved.content.descriptionStyle,
+          textStyleOptions,
+        ) as TextStyleDeclaration;
+      } else {
+        resolved.content.description = bookingArgs.description;
+      }
+    }
+
+    if (bookingArgs.background_color !== undefined) {
+      resolved.content.backgroundStyle = {
+        ...resolved.content.backgroundStyle,
+        backgroundColor: bookingArgs.background_color ?? '',
+      };
+    }
+
+    return { request: this.request, model };
+  }
+}

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

@@ -2,8 +2,13 @@ import type { ButtonContent, BrandPageModel } from '../../../brand-page/models';
 import type { BuilderResult } from '../../models';
 import { applyScalarFields } from '../section-field-utils';
 import { BaseSectionBuilder } from './base-section-builder';
+import { validateButtonSection } from '../section-rules/button-section.rules';
 
 export class ButtonSectionBuilder extends BaseSectionBuilder<ButtonContent> {
+  protected get sectionValidate() {
+    return validateButtonSection;
+  }
+
   async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
     this.log('Build called');
 
@@ -13,7 +18,7 @@ export class ButtonSectionBuilder extends BaseSectionBuilder<ButtonContent> {
       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;
 

package/src/metadata-builder/builders/section-builders/contact-form-builder.ts

@@ -1,13 +1,27 @@
 import type {
   ContactFormContent,
   BrandPageModel,
+  TextStyleDeclaration,
 } from '../../../brand-page/models';
-import type { ContactFormSectionArguments } from '../../parsers/section-tool-arguments';
+import { tiptapJsonToHtml } from '../../helpers/rte.helpers';
+import {
+  isTiptapDocument,
+  type ContactFormSectionArguments,
+} 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 { BaseSectionBuilder } from './base-section-builder';
+import { validateContactForm } from '../section-rules/contact-form.rules';
 
 export class ContactFormBuilder extends BaseSectionBuilder<ContactFormContent> {
+  protected get sectionValidate() {
+    return validateContactForm;
+  }
+
   async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
     this.log('Build called');
 
@@ -17,16 +31,58 @@ export class ContactFormBuilder extends BaseSectionBuilder<ContactFormContent> {
       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 ContactFormSectionArguments;
+    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.description !== undefined) {
+      if (isTiptapDocument(args.description)) {
+        content.description = tiptapJsonToHtml(args.description);
+        content.descriptionStyle = resolveGlobalPresetIntoStyle(
+          content.descriptionStyle,
+          textStyleOptions,
+        ) as TextStyleDeclaration;
+      } else {
+        content.description = args.description;
+      }
+    }
+
+    if (args.success_message !== undefined) {
+      if (isTiptapDocument(args.success_message)) {
+        content.successMessage = tiptapJsonToHtml(args.success_message);
+        content.successMessageStyle = resolveGlobalPresetIntoStyle(
+          content.successMessageStyle,
+          textStyleOptions,
+        ) as TextStyleDeclaration;
+      } else {
+        content.successMessage = args.success_message;
+      }
+    }
 
     if (args.fields && Array.isArray(args.fields) && content.fields) {
       for (const toggle of args.fields) {
@@ -45,6 +101,20 @@ export class ContactFormBuilder extends BaseSectionBuilder<ContactFormContent> {
       };
     }
 
+    if (args.card_style && typeof args.card_style === 'object') {
+      const existing = content.cardStyle || {};
+
+      content.cardStyle = {
+        ...existing,
+        ...Object.fromEntries(
+          Object.entries(args.card_style).map(([k, v]) => [
+            k,
+            v === null ? '' : v,
+          ]),
+        ),
+      };
+    }
+
     return { request: this.request, model };
   }
 }

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

@@ -1,4 +1,8 @@
 import type { BrandPageModel } from '../../../brand-page/models';
+import {
+  type EventTracker,
+  TRIGGER_TYPE,
+} from '../../../brand-page-maker/composables/useEventTracker';
 import {
   BaseMetadataBuilder,
   type BuilderResult,
@@ -14,8 +18,9 @@ export class DeleteSectionBuilder extends BaseMetadataBuilder<DeleteSectionPaylo
   constructor(
     request: MetadataBuilderRequest<DeleteSectionPayload>,
     logger?: Logger,
+    eventTracker?: EventTracker,
   ) {
-    super(request, logger);
+    super(request, logger, eventTracker);
   }
 
   async validateAsync(): Promise<{ errors: string[] }> {
@@ -44,8 +49,17 @@ export class DeleteSectionBuilder extends BaseMetadataBuilder<DeleteSectionPaylo
       const index = page.contents.findIndex((c) => c.id === contentId);
 
       if (index !== -1) {
+        const deletedContentType = page.contents[index].type;
+
         page.contents.splice(index, 1);
 
+        this.eventTracker?.sendRemoveContentEvent(
+          deletedContentType,
+          undefined,
+          undefined,
+          TRIGGER_TYPE.AI_BUILDER,
+        );
+
         this.log({
           message: `Deleted section ${contentId} from page ${page.id}`,
         });

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

@@ -6,8 +6,13 @@ import type { BuilderResult } from '../../models';
 import type { DividerSectionArguments } from '../../parsers/section-tool-arguments';
 import { applyScalarFields } from '../section-field-utils';
 import { BaseSectionBuilder } from './base-section-builder';
+import { validateDividerSection } from '../section-rules/divider-section.rules';
 
 export class DividerSectionBuilder extends BaseSectionBuilder<DividerSectionContent> {
+  protected get sectionValidate() {
+    return validateDividerSection;
+  }
+
   async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
     this.log('Build called');
 
@@ -17,7 +22,7 @@ export class DividerSectionBuilder extends BaseSectionBuilder<DividerSectionCont
       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;
 
@@ -32,6 +37,13 @@ export class DividerSectionBuilder extends BaseSectionBuilder<DividerSectionCont
       };
     }
 
+    if (dividerArgs.divider_color !== undefined) {
+      resolved.content.dividerColor = {
+        ...resolved.content.dividerColor,
+        backgroundColor: dividerArgs.divider_color ?? '',
+      };
+    }
+
     return { request: this.request, model };
   }
 }

package/src/metadata-builder/builders/section-builders/image-gallery-builder.ts

@@ -7,8 +7,9 @@ import type {
   ImageGallerySectionArguments,
 } from '../../parsers/section-tool-arguments';
 import type { BuilderResult } from '../../models';
-import { applyScalarFields } from '../section-field-utils';
+import { applyScalarFields, isValidUrl } from '../section-field-utils';
 import { BaseSectionBuilder } from './base-section-builder';
+import { validateImageGallery } from '../section-rules/image-gallery.rules';
 
 const applyGalleryType = (
   content: ImageGalleryContent,
@@ -24,16 +25,14 @@ const applyGalleryImages = (
   content: ImageGalleryContent,
   images: ImageGalleryItem[],
 ): void => {
-  content.images = images
-    .filter((img) => !!img.image_url)
-    .map((img) => ({
-      imageUrl: img.image_url || '',
-      imageTitle: img.caption || '',
-      width: 0,
-      height: 0,
-      mediaType: 'image' as const,
-      imageLink: '',
-    }));
+  content.images = images.map((img) => ({
+    imageUrl: isValidUrl(img.image_url) ? img.image_url! : '',
+    imageTitle: img.caption || '',
+    width: 0,
+    height: 0,
+    mediaType: 'image' as const,
+    imageLink: '',
+  }));
 };
 
 const mergeGalleryImages = (
@@ -41,25 +40,31 @@ const mergeGalleryImages = (
   images: ImageGalleryItem[],
   replaceAll: boolean,
 ): void => {
-  const updatedImages = images
-    .map((img, index) => {
-      const existing = content.images?.[index];
-      const imageUrl = img.image_url ?? existing?.imageUrl ?? '';
-
-      return {
-        ...(existing || {}),
-        imageUrl,
-        imageTitle: img.caption ?? existing?.imageTitle ?? '',
-        width: existing?.width ?? 0,
-        height: existing?.height ?? 0,
-        mediaType: existing?.mediaType ?? 'image',
-        imageLink: existing?.imageLink ?? '',
-      };
-    })
-    .filter((item) => !!item.imageUrl);
-
-  if (!replaceAll && content.images && content.images.length > images.length) {
-    const extras = content.images.slice(images.length).map((img) => ({
+  const itemsToMerge = images.filter((img) => img.insert_at === undefined);
+
+  const updatedImages = itemsToMerge.map((img, index) => {
+    const existing = content.images?.[index];
+    const imageUrl = isValidUrl(img.image_url)
+      ? img.image_url!
+      : existing?.imageUrl ?? '';
+
+    return {
+      ...(existing || {}),
+      imageUrl,
+      imageTitle: img.caption ?? existing?.imageTitle ?? '',
+      width: existing?.width ?? 0,
+      height: existing?.height ?? 0,
+      mediaType: existing?.mediaType ?? 'image',
+      imageLink: existing?.imageLink ?? '',
+    };
+  });
+
+  if (
+    !replaceAll &&
+    content.images &&
+    content.images.length > itemsToMerge.length
+  ) {
+    const extras = content.images.slice(itemsToMerge.length).map((img) => ({
       imageUrl: img.imageUrl ?? '',
       imageTitle: img.imageTitle ?? '',
       width: img.width ?? 0,
@@ -74,7 +79,48 @@ const mergeGalleryImages = (
   content.images = updatedImages;
 };
 
+const insertGalleryImages = (
+  content: ImageGalleryContent,
+  images: ImageGalleryItem[],
+): void => {
+  const inserts = images.filter((img) => img.insert_at !== undefined);
+
+  if (!inserts.length) return;
+
+  const sorted = [...inserts].sort(
+    (a, b) => (b.insert_at ?? 0) - (a.insert_at ?? 0),
+  );
+
+  for (const img of sorted) {
+    if (!isValidUrl(img.image_url)) continue;
+
+    if (content.images?.some((existing) => existing.imageUrl === img.image_url))
+      continue;
+
+    content.images = content.images ?? [];
+
+    const pos = Math.max(
+      0,
+      Math.min(img.insert_at ?? 0, content.images.length),
+    );
+
+    content.images.splice(pos, 0, {
+      imageUrl: img.image_url!,
+      imageTitle: img.caption ?? '',
+      width: 0,
+      height: 0,
+      mediaType: 'image',
+      imageLink: '',
+      colorReplacements: [],
+    });
+  }
+};
+
 export class ImageGalleryBuilder extends BaseSectionBuilder<ImageGalleryContent> {
+  protected get sectionValidate() {
+    return validateImageGallery;
+  }
+
   async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
     this.log('Build called');
 
@@ -84,7 +130,7 @@ export class ImageGalleryBuilder extends BaseSectionBuilder<ImageGalleryContent>
       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;
 
@@ -106,6 +152,20 @@ export class ImageGalleryBuilder extends BaseSectionBuilder<ImageGalleryContent>
       }
     }
 
+    if (args._remove_item_indices?.length && content.images) {
+      const sorted = [...args._remove_item_indices].sort((a, b) => b - a);
+
+      for (const idx of sorted) {
+        if (idx >= 0 && idx < content.images.length) {
+          content.images.splice(idx, 1);
+        }
+      }
+    }
+
+    if (args.images && Array.isArray(args.images) && this.mode === 'update') {
+      insertGalleryImages(content, args.images);
+    }
+
     return { request: this.request, model };
   }
 }