@designcrowd/library.brand-page 5.17.6 → 5.17.7

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

@@ -0,0 +1,160 @@
+import { type BrandPageModel, type Content } from '../../../brand-page/models';
+import type { Logger } from '../../logger';
+import {
+  BaseMetadataBuilder,
+  type BuilderResult,
+  type MetadataBuilderRequest,
+} from '../../models';
+import type {
+  SectionToolArguments,
+  SectionType,
+} from '../../parsers/section-tool-arguments';
+import { createDefaultSectionContent } from '../section-content-factory';
+
+export interface SectionBuilderPayload {
+  sectionType: SectionType;
+  arguments: SectionToolArguments;
+  /** Only required for update operations. */
+  contentId?: string;
+  /** Target page ID — used for create operations to place the new section on the correct page. */
+  pageId?: string;
+}
+
+/**
+ * Abstract base for per-section builders.
+ *
+ * Concrete builders implement `buildAsync` directly, using
+ * `resolveContent()` to obtain the content object to mutate.
+ */
+export abstract class BaseSectionBuilder<
+  C extends Content = Content,
+> extends BaseMetadataBuilder<SectionBuilderPayload> {
+  constructor(
+    request: MetadataBuilderRequest<SectionBuilderPayload>,
+    logger?: Logger,
+  ) {
+    super(request, logger);
+  }
+
+  protected get sectionType(): SectionType {
+    return this.request.payload!.sectionType;
+  }
+
+  protected get mode(): 'create' | 'update' {
+    return this.request.type.startsWith('create-') ? 'create' : 'update';
+  }
+
+  protected get args(): SectionToolArguments {
+    return this.request.payload!.arguments;
+  }
+
+  /** Override in subclasses for per-section validation. */
+  protected validateSection(): string[] {
+    return [];
+  }
+
+  async validateAsync(): Promise<{ errors: string[] }> {
+    const errors: string[] = [];
+    const payload = this.request.payload!;
+
+    if (this.mode === 'create') {
+      if (!createDefaultSectionContent(payload.sectionType)) {
+        errors.push(`Unsupported section type: "${payload.sectionType}"`);
+      }
+    }
+
+    if (this.mode === 'update') {
+      if (!payload.contentId) {
+        errors.push('contentId is required for update operations');
+      }
+    }
+
+    errors.push(...this.validateSection());
+
+    return { errors };
+  }
+
+  /**
+   * Validates the request, then creates or finds the target content.
+   * Returns `{ content }` on success, or `{ error }` with a BuilderResult on failure.
+   */
+  protected resolveContent(
+    model: BrandPageModel,
+  ): { content: C } | { error: BuilderResult } {
+    if (this.mode === 'create') {
+      return this.createContent(model);
+    }
+
+    return this.findContent(model);
+  }
+
+  private createContent(
+    model: BrandPageModel,
+  ): { content: C } | { error: BuilderResult } {
+    const payload = this.request.payload!;
+    const { pageId } = payload;
+
+    const content = createDefaultSectionContent(this.sectionType);
+
+    if (!content) {
+      return {
+        error: {
+          request: this.request,
+          model,
+          errors: [
+            `Failed to create default content for section type: "${this.sectionType}"`,
+          ],
+        },
+      };
+    }
+
+    const targetPage = pageId
+      ? model.pages.find((p) => p.id === pageId)
+      : model.pages[0];
+
+    if (!targetPage) {
+      return {
+        error: {
+          request: this.request,
+          model,
+          errors: [
+            pageId
+              ? `Page with ID "${pageId}" not found`
+              : 'No pages found in model',
+          ],
+        },
+      };
+    }
+
+    targetPage.contents.push(content);
+
+    this.log({
+      message: `Created ${this.sectionType} section on page ${targetPage.id}`,
+      contentId: content.id,
+    });
+
+    return { content: content as C };
+  }
+
+  private findContent(
+    model: BrandPageModel,
+  ): { content: C } | { error: BuilderResult } {
+    const { contentId } = this.request.payload!;
+
+    for (const page of model.pages) {
+      for (const content of page.contents) {
+        if (content.id === contentId) {
+          return { content: content as C };
+        }
+      }
+    }
+
+    return {
+      error: {
+        request: this.request,
+        model,
+        errors: [`Content with ID "${contentId}" not found`],
+      },
+    };
+  }
+}

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

@@ -0,0 +1,24 @@
+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';
+
+export class ButtonSectionBuilder extends BaseSectionBuilder<ButtonContent> {
+  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.resolveContent(model);
+
+    if ('error' in resolved) return resolved.error;
+
+    applyScalarFields(resolved.content, this.args, this.sectionType);
+
+    return { request: this.request, model };
+  }
+}

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

@@ -0,0 +1,43 @@
+import type {
+  ContactFormContent,
+  BrandPageModel,
+} from '../../../brand-page/models';
+import type { ContactFormSectionArguments } from '../../parsers/section-tool-arguments';
+import type { BuilderResult } from '../../models';
+import { applyScalarFields, applyStyleFields } from '../section-field-utils';
+import { BaseSectionBuilder } from './base-section-builder';
+
+export class ContactFormBuilder extends BaseSectionBuilder<ContactFormContent> {
+  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.resolveContent(model);
+
+    if ('error' in resolved) return resolved.error;
+
+    const content = resolved.content;
+
+    applyScalarFields(content, this.args, this.sectionType);
+    applyStyleFields(content, this.args, this.sectionType);
+
+    const args = this.args as ContactFormSectionArguments;
+
+    if (args.fields && Array.isArray(args.fields) && content.fields) {
+      for (const toggle of args.fields) {
+        const field = content.fields.find((f) => f.id === toggle.field_id);
+
+        if (field) {
+          field.enabled = toggle.enabled;
+        }
+      }
+    }
+
+    return { request: this.request, model };
+  }
+}

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

@@ -0,0 +1,63 @@
+import type { BrandPageModel } from '../../../brand-page/models';
+import {
+  BaseMetadataBuilder,
+  type BuilderResult,
+  type MetadataBuilderRequest,
+} from '../../models';
+import type { Logger } from '../../logger';
+
+export interface DeleteSectionPayload {
+  contentId: string;
+}
+
+export class DeleteSectionBuilder extends BaseMetadataBuilder<DeleteSectionPayload> {
+  constructor(
+    request: MetadataBuilderRequest<DeleteSectionPayload>,
+    logger?: Logger,
+  ) {
+    super(request, logger);
+  }
+
+  async validateAsync(): Promise<{ errors: string[] }> {
+    const errors: string[] = [];
+    const payload = this.request.payload;
+
+    if (!payload?.contentId) {
+      errors.push('contentId is required for delete_section');
+    }
+
+    return { errors };
+  }
+
+  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 { contentId } = this.request.payload!;
+
+    for (const page of model.pages) {
+      const index = page.contents.findIndex((c) => c.id === contentId);
+
+      if (index !== -1) {
+        page.contents.splice(index, 1);
+
+        this.log({
+          message: `Deleted section ${contentId} from page ${page.id}`,
+        });
+
+        return { request: this.request, model };
+      }
+    }
+
+    return {
+      request: this.request,
+      model,
+      errors: [`Section with ID "${contentId}" not found`],
+    };
+  }
+}

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

@@ -0,0 +1,27 @@
+import type {
+  DividerSectionContent,
+  BrandPageModel,
+} from '../../../brand-page/models';
+import type { BuilderResult } from '../../models';
+import { applyScalarFields } from '../section-field-utils';
+import { BaseSectionBuilder } from './base-section-builder';
+
+export class DividerSectionBuilder extends BaseSectionBuilder<DividerSectionContent> {
+  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.resolveContent(model);
+
+    if ('error' in resolved) return resolved.error;
+
+    applyScalarFields(resolved.content, this.args, this.sectionType);
+
+    return { request: this.request, model };
+  }
+}

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

@@ -0,0 +1,111 @@
+import type {
+  ImageGalleryContent,
+  BrandPageModel,
+} from '../../../brand-page/models';
+import type {
+  ImageGalleryItem,
+  ImageGallerySectionArguments,
+} from '../../parsers/section-tool-arguments';
+import type { BuilderResult } from '../../models';
+import { applyScalarFields } from '../section-field-utils';
+import { BaseSectionBuilder } from './base-section-builder';
+
+const applyGalleryType = (
+  content: ImageGalleryContent,
+  galleryType: string,
+): void => {
+  content.galleryStyles = {
+    ...(content.galleryStyles || {}),
+    galleryType: galleryType as 'grid' | 'carousel' | 'masonry',
+  };
+};
+
+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: '',
+    }));
+};
+
+const mergeGalleryImages = (
+  content: ImageGalleryContent,
+  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) => ({
+      imageUrl: img.imageUrl ?? '',
+      imageTitle: img.imageTitle ?? '',
+      width: img.width ?? 0,
+      height: img.height ?? 0,
+      mediaType: img.mediaType ?? ('image' as const),
+      imageLink: img.imageLink ?? '',
+    }));
+
+    updatedImages.push(...extras);
+  }
+
+  content.images = updatedImages;
+};
+
+export class ImageGalleryBuilder extends BaseSectionBuilder<ImageGalleryContent> {
+  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.resolveContent(model);
+
+    if ('error' in resolved) return resolved.error;
+
+    const content = resolved.content;
+
+    applyScalarFields(content, this.args, this.sectionType);
+
+    const args = this.args as ImageGallerySectionArguments;
+
+    if (args.gallery_type) {
+      applyGalleryType(content, args.gallery_type);
+    }
+
+    if (args.images && Array.isArray(args.images)) {
+      if (this.mode === 'create') {
+        applyGalleryImages(content, args.images);
+      } else {
+        mergeGalleryImages(content, args.images, !!args._replace_items);
+      }
+    }
+
+    return { request: this.request, model };
+  }
+}

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

@@ -0,0 +1,24 @@
+import type { ImageContent, BrandPageModel } from '../../../brand-page/models';
+import type { BuilderResult } from '../../models';
+import { applyScalarFields } from '../section-field-utils';
+import { BaseSectionBuilder } from './base-section-builder';
+
+export class ImageSectionBuilder extends BaseSectionBuilder<ImageContent> {
+  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.resolveContent(model);
+
+    if ('error' in resolved) return resolved.error;
+
+    applyScalarFields(resolved.content, this.args, this.sectionType);
+
+    return { request: this.request, model };
+  }
+}

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

@@ -0,0 +1,223 @@
+import type {
+  ImagesSectionContent,
+  BrandPageModel,
+} from '../../../brand-page/models';
+import type {
+  ImagesSectionArguments,
+  ImagesSectionItem,
+} from '../../parsers/section-tool-arguments';
+import type { BuilderResult } from '../../models';
+import {
+  applyScalarFields,
+  applyStyleFields,
+  applyRTEStyles,
+} from '../section-field-utils';
+import { BaseSectionBuilder } from './base-section-builder';
+
+const applyImageItems = (
+  content: ImagesSectionContent,
+  items: ImagesSectionItem[],
+): void => {
+  content.items = items
+    .filter((item) => !!item.image_url)
+    .map((item, index) => ({
+      imageUrl: item.image_url || '',
+      imageTitle: '',
+      width: 0,
+      height: 0,
+      mediaType: 'image',
+      imageLink: '',
+      title: item.heading || '',
+      paragraph: item.text || '',
+      itemsId: index,
+      colorReplacements: [],
+    }));
+};
+
+const mergeImageItems = (
+  content: ImagesSectionContent,
+  items: ImagesSectionItem[],
+  replaceAll: boolean,
+): 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];
+
+      if (item.image_url !== undefined) existing.imageUrl = item.image_url;
+
+      if (item.heading !== undefined) existing.title = item.heading;
+
+      if (item.text !== undefined) existing.paragraph = item.text;
+    }
+
+    return;
+  }
+
+  const updatedItems = items
+    .map((item, index) => {
+      const existing = content.items?.[index];
+
+      return {
+        ...(existing || {}),
+        imageUrl: item.image_url ?? existing?.imageUrl ?? '',
+        imageTitle: existing?.imageTitle ?? '',
+        width: existing?.width ?? 0,
+        height: existing?.height ?? 0,
+        mediaType: existing?.mediaType ?? 'image',
+        imageLink: existing?.imageLink ?? '',
+        title: item.heading ?? existing?.title ?? '',
+        paragraph: item.text ?? existing?.paragraph ?? '',
+        itemsId: existing?.itemsId ?? index,
+        colorReplacements: existing?.colorReplacements ?? [],
+      };
+    })
+    .filter((item) => !!item.imageUrl);
+
+  if (!replaceAll && content.items && content.items.length > items.length) {
+    const remaining = content.items.slice(items.length) as typeof updatedItems;
+
+    updatedItems.push(...remaining);
+  }
+
+  content.items = updatedItems;
+};
+
+export class ImagesSectionBuilder extends BaseSectionBuilder<ImagesSectionContent> {
+  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.resolveContent(model);
+
+    if ('error' in resolved) return resolved.error;
+
+    const content = resolved.content;
+
+    applyScalarFields(content, this.args, this.sectionType);
+    applyStyleFields(content, this.args, this.sectionType);
+    applyRTEStyles(content, this.args, this.sectionType);
+
+    const args = this.args as ImagesSectionArguments;
+
+    if (args.background_style && typeof args.background_style === 'object') {
+      const existing = content.backgroundStyle || {};
+
+      content.backgroundStyle = {
+        ...existing,
+        ...Object.fromEntries(
+          Object.entries(args.background_style).map(([k, v]) => [
+            k,
+            v === null ? '' : v,
+          ]),
+        ),
+      };
+    }
+
+    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,
+          ]),
+        ),
+      };
+    }
+
+    if (args.items && Array.isArray(args.items)) {
+      if (this.mode === 'create') {
+        applyImageItems(content, args.items);
+      } else {
+        mergeImageItems(content, args.items, !!args._replace_items);
+      }
+    }
+
+    // Phase 2: Item operations (remove, insert, reorder)
+    if (args._remove_item_indices?.length && content.items) {
+      const sorted = [...args._remove_item_indices].sort((a, b) => b - a);
+
+      for (const idx of sorted) {
+        if (idx >= 0 && idx < content.items.length) {
+          content.items.splice(idx, 1);
+        }
+      }
+    }
+
+    if (args.items && Array.isArray(args.items)) {
+      const insertItems = args.items.filter(
+        (item) => item.insert_at !== undefined && item.item_index === undefined,
+      );
+      // Process inserts in reverse order of insert_at to preserve indices
+      const sortedInserts = [...insertItems].sort(
+        (a, b) => (b.insert_at ?? 0) - (a.insert_at ?? 0),
+      );
+
+      for (const item of sortedInserts) {
+        if (!item.image_url) continue;
+
+        const pos = Math.max(
+          0,
+          Math.min(item.insert_at ?? 0, content.items?.length ?? 0),
+        );
+        const newItem = {
+          imageUrl: item.image_url,
+          imageTitle: '',
+          width: 0,
+          height: 0,
+          mediaType: 'image',
+          imageLink: '',
+          title: item.heading ?? '',
+          paragraph: item.text ?? '',
+          itemsId: pos,
+          colorReplacements: [],
+        };
+
+        content.items = content.items ?? [];
+        content.items.splice(pos, 0, newItem as any);
+      }
+    }
+
+    if (args._reorder_items?.length && content.items) {
+      const newOrder = args._reorder_items;
+      const unique = new Set(newOrder);
+
+      if (unique.size === newOrder.length) {
+        const reordered = newOrder
+          .filter((idx) => idx >= 0 && idx < content.items!.length)
+          .map((idx) => content.items![idx]);
+
+        if (reordered.length === content.items.length) {
+          content.items = reordered;
+        }
+      }
+    }
+
+    // Re-index itemsId after any item operations
+    if (content.items) {
+      content.items.forEach((item, i) => {
+        item.itemsId = i;
+      });
+    }
+
+    return { request: this.request, model };
+  }
+}

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

@@ -0,0 +1,21 @@
+export {
+  BaseSectionBuilder,
+  type SectionBuilderPayload,
+} from './base-section-builder';
+
+export { BannerSectionBuilder } from './banner-section-builder';
+export { AboutSectionBuilder } from './about-section-builder';
+export { ContactFormBuilder } from './contact-form-builder';
+export { DividerSectionBuilder } from './divider-section-builder';
+export { TextSectionBuilder } from './text-section-builder';
+export { TestimonialSectionBuilder } from './testimonial-section-builder';
+export { ImagesSectionBuilder } from './images-section-builder';
+export { ShapesSectionBuilder } from './shapes-section-builder';
+export { SocialLinksBuilder } from './social-links-builder';
+export { ImageGalleryBuilder } from './image-gallery-builder';
+export { ProfileSectionBuilder } from './profile-section-builder';
+export { MailingListSectionBuilder } from './mailing-list-section-builder';
+export { ImageSectionBuilder } from './image-section-builder';
+export { ButtonSectionBuilder } from './button-section-builder';
+export { DeleteSectionBuilder } from './delete-section-builder';
+export { MoveSectionBuilder } from './move-section-builder';