@designcrowd/library.brand-page 5.17.28 → 5.18.0

package/src/metadata-builder/builders/footer-builder.ts

@@ -0,0 +1,226 @@
+import {
+  type BrandPageModel,
+  type AbstractPageFooterStyles,
+} from '../../brand-page/models';
+import {
+  BaseMetadataBuilder,
+  type BuilderResult,
+  type MetadataBuilderRequest,
+} from '../models';
+import type {
+  UpdateFooterArguments,
+  ViewportFooterOverrides,
+  FooterSocialLinkItem,
+} from '../parsers/ai-toolcall-parser';
+import type { Logger } from '../logger';
+import type { TextStyleOptions } from '../../brand-page/models/styles.model';
+import { FOOTER_CHECKS } from './section-rules/footer.rules';
+import { applyDetachedStyleOverride } from './section-field-utils';
+
+const normaliseSocialUrl = (url: string): string => {
+  for (const prefix of ['mailto:', 'tel:']) {
+    if (url.startsWith(prefix)) return url.slice(prefix.length);
+  }
+
+  return url;
+};
+
+const applyGlobalFooterChanges = (
+  footer: AbstractPageFooterStyles,
+  args: UpdateFooterArguments,
+  textStyleOptions: TextStyleOptions | undefined,
+): void => {
+  if (args.copyright_text !== undefined)
+    footer.copyrightText = args.copyright_text;
+
+  if (args.copyright_text_font_family !== undefined)
+    footer.copyrightStyle = applyDetachedStyleOverride(
+      footer.copyrightStyle,
+      { fontFamily: args.copyright_text_font_family },
+      textStyleOptions,
+    );
+
+  const links = args.social_links;
+
+  // _replace_social_links: replace entire list (empty/absent social_links = clear all).
+  // When replacing, all other social link mutations (remove, insert, reorder) are skipped —
+  // they are superseded by the replacement and running them would cause duplicates.
+  if (args._replace_social_links) {
+    footer.socialLinks = (links ?? []).map((l) => ({
+      imageUrl: l.social_link_icon || '',
+      url: normaliseSocialUrl(l.url || ''),
+      imageTitle: '',
+      width: 0,
+      height: 0,
+      imageLink: '',
+    }));
+  } else {
+    // Targeted mutations — only run when NOT replacing the entire list.
+
+    // item_index-based updates for existing links
+    if (links?.length) {
+      for (const link of links) {
+        if (link.item_index === undefined) continue;
+
+        const existing = footer.socialLinks?.[link.item_index];
+
+        if (!existing) continue;
+
+        if (link.social_link_icon !== undefined)
+          existing.imageUrl = link.social_link_icon;
+
+        if (link.url !== undefined) existing.url = normaliseSocialUrl(link.url);
+      }
+    }
+
+    // Remove by index (descending order to preserve indices during splice)
+    if (args._remove_social_link_indices?.length && footer.socialLinks) {
+      const sorted = [...args._remove_social_link_indices].sort(
+        (a, b) => b - a,
+      );
+
+      for (const idx of sorted) {
+        if (idx >= 0 && idx < footer.socialLinks.length)
+          footer.socialLinks.splice(idx, 1);
+      }
+    }
+
+    // Insert new links (descending insert_at order to preserve positions during splice)
+    const insertLinks = (links ?? []).filter(
+      (l): l is FooterSocialLinkItem & { insert_at: number } =>
+        l.insert_at !== undefined && l.item_index === undefined,
+    );
+    const sortedInserts = [...insertLinks].sort(
+      (a, b) => b.insert_at - a.insert_at,
+    );
+
+    for (const link of sortedInserts) {
+      const pos = Math.max(
+        0,
+        Math.min(link.insert_at, footer.socialLinks?.length ?? 0),
+      );
+
+      footer.socialLinks = footer.socialLinks ?? [];
+      footer.socialLinks.splice(pos, 0, {
+        imageUrl: link.social_link_icon || '',
+        url: normaliseSocialUrl(link.url || ''),
+        imageTitle: '',
+        width: 0,
+        height: 0,
+        imageLink: '',
+      });
+    }
+
+    // Reorder (requires ALL indices — partial reorder is not supported)
+    if (args._reorder_social_links?.length && footer.socialLinks) {
+      const newOrder = args._reorder_social_links;
+      const unique = new Set(newOrder);
+
+      if (
+        unique.size === newOrder.length &&
+        newOrder.every((idx) => idx >= 0 && idx < footer.socialLinks!.length)
+      ) {
+        const reordered = newOrder.map((idx) => footer.socialLinks![idx]);
+
+        if (reordered.length === footer.socialLinks.length)
+          footer.socialLinks = reordered;
+      }
+    }
+  }
+};
+
+const applyViewportFooterChanges = (
+  footer: AbstractPageFooterStyles,
+  overrides: ViewportFooterOverrides,
+): void => {
+  if (overrides.display_style !== undefined)
+    footer.displayStyle = overrides.display_style;
+
+  if (overrides.background_color !== undefined) {
+    footer.backgroundStyle = {
+      ...footer.backgroundStyle,
+      backgroundColor: overrides.background_color ?? '',
+    };
+  }
+
+  if (overrides.icon_color !== undefined)
+    footer.iconStyle = {
+      ...footer.iconStyle,
+      color: overrides.icon_color,
+      fill: overrides.icon_color,
+    };
+
+  if (overrides.copyright_text_color !== undefined)
+    footer.copyrightStyle = {
+      ...footer.copyrightStyle,
+      color: overrides.copyright_text_color,
+    };
+
+  if (overrides.is_logo_visible !== undefined)
+    footer.isLogoVisible = overrides.is_logo_visible;
+
+  if (overrides.logo_image_height !== undefined)
+    footer.logoImageHeight = overrides.logo_image_height;
+
+  if (overrides.logo_image_width !== undefined)
+    footer.logoImageWidth = overrides.logo_image_width;
+};
+
+export class FooterBuilder extends BaseMetadataBuilder<UpdateFooterArguments> {
+  constructor(
+    request: MetadataBuilderRequest<UpdateFooterArguments>,
+    logger?: Logger,
+  ) {
+    super(request, logger);
+  }
+
+  async validateAsync(): Promise<{ errors: string[] }> {
+    const args = this.request.payload ?? {};
+
+    try {
+      const errors = FOOTER_CHECKS.flatMap((check) => {
+        const err = check(args);
+
+        return err ? [err] : [];
+      });
+
+      return { errors };
+    } catch (error) {
+      this.log({
+        message: 'Footer validation failed unexpectedly — skipping',
+        error,
+      });
+
+      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 args = this.request.payload ?? {};
+    const textStyleOptions = model.styles?.textStyles?.textStyleOptions;
+
+    // Global fields (copyright_text, social links) always apply to both viewports.
+    if (model.pageFooterDesktop)
+      applyGlobalFooterChanges(model.pageFooterDesktop, args, textStyleOptions);
+
+    if (model.pageFooterMobile)
+      applyGlobalFooterChanges(model.pageFooterMobile, args, textStyleOptions);
+
+    // Viewport-specific styling via explicit sub-objects.
+    if (args.desktop && model.pageFooterDesktop)
+      applyViewportFooterChanges(model.pageFooterDesktop, args.desktop);
+
+    if (args.mobile && model.pageFooterMobile)
+      applyViewportFooterChanges(model.pageFooterMobile, args.mobile);
+
+    return { request: this.request, model };
+  }
+}

package/src/metadata-builder/builders/global-styles-builder.ts

@@ -0,0 +1,187 @@
+import { type BrandPageModel } from '../../brand-page/models';
+import {
+  BaseMetadataBuilder,
+  type BuilderResult,
+  type MetadataBuilderRequest,
+} from '../models';
+import type {
+  UpdateGlobalStylesArguments,
+  TextStyleOptionStyle,
+} from '../parsers/ai-toolcall-parser';
+import type { Logger } from '../logger';
+import type { GlobalTextStyleDeclaration } from '../../brand-page/models/styles.model';
+import {
+  GLOBAL_STYLE_CHECKS,
+  TEXT_STYLE_OPTION_KEYS,
+} from './section-rules/global-styles.rules';
+
+export class GlobalStylesBuilder extends BaseMetadataBuilder<UpdateGlobalStylesArguments> {
+  constructor(
+    request: MetadataBuilderRequest<UpdateGlobalStylesArguments>,
+    logger?: Logger,
+  ) {
+    super(request, logger);
+  }
+
+  async validateAsync(): Promise<{ errors: string[] }> {
+    const args = this.request.payload ?? {};
+
+    try {
+      const errors = GLOBAL_STYLE_CHECKS.flatMap((check) => {
+        const err = check(args);
+
+        return err ? [err] : [];
+      });
+
+      return { errors };
+    } catch (error) {
+      this.log({
+        message: 'Global styles validation failed unexpectedly — skipping',
+        error,
+      });
+
+      return { errors: [] };
+    }
+  }
+
+  async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
+    this.log('Build called');
+    const args = this.request.payload ?? {};
+
+    if (args.backgroundStyles) {
+      this.applyBackgroundStyles(model, args.backgroundStyles);
+    }
+
+    if (args.textStyles) {
+      this.applyTextStyles(model, args.textStyles);
+    }
+
+    if (args.buttonStyles) {
+      this.applyButtonStyles(model, args.buttonStyles);
+    }
+
+    return { request: this.request, model };
+  }
+
+  private applyTextStyles(
+    model: BrandPageModel,
+    textStyles: NonNullable<UpdateGlobalStylesArguments['textStyles']>,
+  ): void {
+    const ts = model.styles.textStyles;
+
+    // Deep-merge style (color)
+    if (textStyles.style) {
+      ts.style = { ...ts.style, ...textStyles.style };
+    }
+
+    // Merge textFontFamily
+    if (textStyles.textFontFamily !== undefined) {
+      ts.textFontFamily = textStyles.textFontFamily as typeof ts.textFontFamily;
+    }
+
+    // Deep-merge textStyleOptions per category
+    if (textStyles.textStyleOptions) {
+      for (const key of TEXT_STYLE_OPTION_KEYS) {
+        const optionArgs = textStyles.textStyleOptions[key];
+
+        if (!optionArgs) continue;
+
+        const existing = ts.textStyleOptions[key];
+
+        if (!existing) continue;
+
+        if (optionArgs.style) {
+          this.mergeStyleOptionStyle(existing.style, optionArgs.style);
+          // Mark as modified when style properties change
+          existing.isModified = true;
+        }
+
+        if (optionArgs.isModified !== undefined) {
+          existing.isModified = optionArgs.isModified;
+        }
+      }
+    }
+  }
+
+  private applyButtonStyles(
+    model: BrandPageModel,
+    buttonStyles: NonNullable<UpdateGlobalStylesArguments['buttonStyles']>,
+  ): void {
+    const bs = model.styles.buttonStyles;
+
+    // Deep-merge style (color, borderColor, backgroundColor)
+    if (buttonStyles.style) {
+      bs.style = { ...bs.style, ...buttonStyles.style };
+    }
+
+    // Deep-merge iconStyle (fill)
+    if (buttonStyles.iconStyle) {
+      bs.iconStyle = { ...bs.iconStyle, ...buttonStyles.iconStyle };
+    }
+
+    // Merge selectedButtonStyleId
+    if (buttonStyles.selectedButtonStyleId !== undefined) {
+      bs.selectedButtonStyleId = buttonStyles.selectedButtonStyleId;
+    }
+  }
+
+  private applyBackgroundStyles(
+    model: BrandPageModel,
+    backgroundStyles: NonNullable<
+      UpdateGlobalStylesArguments['backgroundStyles']
+    >,
+  ): void {
+    const bs = model.styles.backgroundStyles;
+
+    if (backgroundStyles.style) {
+      bs.style = { ...bs.style, ...backgroundStyles.style };
+    }
+
+    if (backgroundStyles.backgroundColor !== undefined) {
+      bs.style = { ...bs.style, background: backgroundStyles.backgroundColor };
+    }
+
+    if (backgroundStyles.shapeColor !== undefined) {
+      bs.backgroundShapeStyle = {
+        ...bs.backgroundShapeStyle,
+        color: backgroundStyles.shapeColor,
+      };
+
+      if (bs.backgroundShapes?.length) {
+        bs.backgroundShapes = bs.backgroundShapes.map((shape) => ({
+          ...shape,
+          style: { ...shape.style, color: backgroundStyles.shapeColor! },
+        }));
+      }
+    }
+
+    if (backgroundStyles.backgroundImageUrl !== undefined) {
+      bs.backgroundImageUrl = backgroundStyles.backgroundImageUrl;
+    }
+
+    if (backgroundStyles.backgroundShapeUrl !== undefined) {
+      if (backgroundStyles.backgroundShapeUrl === '') {
+        bs.backgroundShapes = [];
+      } else if (bs.backgroundShapes?.length) {
+        // Only update when shapes already exist — never add shapes to a site that has none.
+        // Update ALL shapes so every positional instance switches to the new shape type.
+        bs.backgroundShapes = bs.backgroundShapes.map((shape) => ({
+          ...shape,
+          name: backgroundStyles.backgroundShapeUrl!,
+        }));
+      }
+      // If backgroundShapes is empty/absent: intentional no-op
+    }
+  }
+
+  private mergeStyleOptionStyle(
+    existing: GlobalTextStyleDeclaration,
+    incoming: TextStyleOptionStyle,
+  ): void {
+    for (const [key, value] of Object.entries(incoming)) {
+      if (value !== undefined) {
+        (existing as unknown as Record<string, unknown>)[key] = value;
+      }
+    }
+  }
+}

package/src/metadata-builder/builders/header-builder.test.ts

@@ -0,0 +1,106 @@
+import { describe, it, expect } from 'vitest';
+import type { BrandPageModel } from '../../brand-page/models';
+import type { TextStyleOptions } from '../../brand-page/models/styles.model';
+import type { UpdateHeaderArguments } from '../parsers/ai-toolcall-parser';
+import { BUILDER_TYPES } from '../models';
+import { HeaderBuilder } from './header-builder';
+
+/**
+ * BP-5420: changing the nav menu font had no effect when the nav button style
+ * was bound to the global `buttons` preset (`textStyleType: 'buttons'`). The
+ * renderer (`getTextStyleByContentTextStyle`) overlays the preset font over the
+ * per-element style, discarding the font the builder wrote.
+ *
+ * The fix routes nav button style writes through `applyDetachedStyleOverride`,
+ * which resolves the preset in and clears `textStyleType`.
+ */
+
+const textStyleOptions = {
+  titles: { type: 'titles', title: 'Titles', style: { fontFamily: 'Poppins' } },
+  headings: {
+    type: 'headings',
+    title: 'Headings',
+    style: { fontFamily: 'Poppins' },
+  },
+  paragraphs: {
+    type: 'paragraphs',
+    title: 'Paragraphs',
+    style: { fontFamily: 'Inter' },
+  },
+  buttons: {
+    type: 'buttons',
+    title: 'Buttons',
+    style: { fontFamily: 'Poppins', fontSize: '1em', color: '#ffffff' },
+  },
+} as unknown as TextStyleOptions;
+
+const makeModel = (
+  defaultButtonStyle: Record<string, unknown>,
+): BrandPageModel =>
+  ({
+    styles: { textStyles: { textStyleOptions } },
+    pageHeaderDesktop: {
+      navigation: { defaultButtonStyle: { ...defaultButtonStyle } },
+    },
+    pageHeaderMobile: {
+      navigation: { defaultButtonStyle: { ...defaultButtonStyle } },
+    },
+  }) as unknown as BrandPageModel;
+
+const run = (args: UpdateHeaderArguments, model: BrandPageModel) =>
+  new HeaderBuilder({
+    id: 'h1',
+    type: BUILDER_TYPES.UPDATE_HEADER,
+    payload: args,
+  }).buildAsync(model);
+
+describe('HeaderBuilder — nav menu font vs global style', () => {
+  it('clears textStyleType so the new menu font sticks when bound to a preset', async () => {
+    const model = makeModel({ textStyleType: 'buttons' });
+
+    const { model: out, errors } = await run(
+      { desktop: { link_text_font: 'Oswald' } },
+      model,
+    );
+
+    const style = out.pageHeaderDesktop!.navigation
+      .defaultButtonStyle as Record<string, unknown>;
+
+    expect(errors ?? []).toEqual([]);
+    expect(style.fontFamily).toBe('Oswald');
+    expect(style.textStyleType).toBeUndefined();
+    // preset values resolved in; only the font is overridden
+    expect(style.fontSize).toBe('1em');
+    expect(style.color).toBe('#ffffff');
+  });
+
+  it('applies the override to the targeted viewport only', async () => {
+    const model = makeModel({
+      textStyleType: 'buttons',
+      fontFamily: 'Poppins',
+    });
+
+    const { model: out } = await run(
+      { mobile: { link_text_font: 'Oswald' } },
+      model,
+    );
+
+    expect(
+      (
+        out.pageHeaderMobile!.navigation.defaultButtonStyle as Record<
+          string,
+          unknown
+        >
+      ).fontFamily,
+    ).toBe('Oswald');
+    // desktop untouched (still bound to the preset)
+    expect(
+      (
+        out.pageHeaderDesktop!.navigation.defaultButtonStyle as Record<
+          string,
+          unknown
+        >
+      ).textStyleType,
+    ).toBe('buttons');
+  });
+});