@designcrowd/library.brand-page 5.17.28 → 5.18.0

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

@@ -0,0 +1,254 @@
+import {
+  type BrandPageModel,
+  type AbstractPageHeaderStyles,
+} from '../../brand-page/models';
+import {
+  BaseMetadataBuilder,
+  type BuilderResult,
+  type MetadataBuilderRequest,
+} from '../models';
+import type {
+  UpdateHeaderArguments,
+  ViewportHeaderOverrides,
+  UpdateHeaderNavRoute,
+} from '../parsers/ai-toolcall-parser';
+import type { Logger } from '../logger';
+import type { TextStyleOptions } from '../../brand-page/models/styles.model';
+import { getPageSlugFromPageTitle } from '../../brand-page-maker/utils/slug.util';
+import { HEADER_CHECKS } from './section-rules/header.rules';
+import { applyDetachedStyleOverride } from './section-field-utils';
+
+const applyViewportHeaderChanges = (
+  header: AbstractPageHeaderStyles,
+  overrides: ViewportHeaderOverrides,
+  textStyleOptions: TextStyleOptions | undefined,
+): void => {
+  if (overrides.display_style !== undefined) {
+    header.displayStyle = overrides.display_style;
+  }
+
+  if (overrides.background_color !== undefined) {
+    header.backgroundStyle = {
+      ...header.backgroundStyle,
+      backgroundColor: overrides.background_color ?? '',
+    };
+  }
+
+  if (overrides.is_logo_visible !== undefined) {
+    header.isLogoVisible = overrides.is_logo_visible;
+  }
+
+  if (overrides.logo_image_height !== undefined) {
+    header.logoImageHeight = overrides.logo_image_height;
+  }
+
+  if (overrides.logo_image_width !== undefined) {
+    header.logoImageWidth = overrides.logo_image_width;
+  }
+
+  if (overrides.nav_display_type !== undefined && header.navigation) {
+    header.navigation.displayType = overrides.nav_display_type;
+  }
+
+  if (overrides.link_text_color !== undefined && header.navigation) {
+    header.navigation.defaultButtonStyle = {
+      ...header.navigation.defaultButtonStyle,
+      color: overrides.link_text_color,
+    };
+  }
+
+  if (overrides.link_text_font !== undefined && header.navigation) {
+    header.navigation.defaultButtonStyle = applyDetachedStyleOverride(
+      header.navigation.defaultButtonStyle,
+      { fontFamily: overrides.link_text_font },
+      textStyleOptions,
+    );
+  }
+
+  if (overrides.link_bg_color !== undefined && header.navigation) {
+    header.navigation.defaultButtonStyle = {
+      ...header.navigation.defaultButtonStyle,
+      backgroundColor: overrides.link_bg_color ?? '',
+    };
+  }
+
+  if (overrides.link_selected_color !== undefined && header.navigation) {
+    header.navigation.selectedButtonStyle = {
+      ...header.navigation.selectedButtonStyle,
+      color: overrides.link_selected_color,
+    };
+  }
+
+  if (overrides.link_selected_bg_color !== undefined && header.navigation) {
+    header.navigation.selectedButtonStyle = {
+      ...header.navigation.selectedButtonStyle,
+      backgroundColor: overrides.link_selected_bg_color ?? '',
+    };
+  }
+
+  if (overrides.link_selected_border_color !== undefined && header.navigation) {
+    header.navigation.selectedButtonStyle = {
+      ...header.navigation.selectedButtonStyle,
+      borderColor: overrides.link_selected_border_color,
+    };
+  }
+
+  if (overrides.link_default_border_color !== undefined && header.navigation) {
+    header.navigation.defaultButtonStyle = {
+      ...header.navigation.defaultButtonStyle,
+      borderColor: overrides.link_default_border_color ?? '',
+    };
+  }
+
+  if (
+    overrides.hamburger_icon_color !== undefined &&
+    header.navigation?.hamburgerMenuStyle
+  ) {
+    header.navigation.hamburgerMenuStyle.iconStyle = {
+      ...header.navigation.hamburgerMenuStyle.iconStyle,
+      color: overrides.hamburger_icon_color,
+    };
+  }
+
+  if (
+    overrides.hamburger_icon_bg_color !== undefined &&
+    header.navigation?.hamburgerMenuStyle
+  ) {
+    header.navigation.hamburgerMenuStyle.iconStyle = {
+      ...header.navigation.hamburgerMenuStyle.iconStyle,
+      backgroundColor: overrides.hamburger_icon_bg_color ?? '',
+    };
+  }
+
+  if (
+    overrides.overlay_default_text_color !== undefined &&
+    header.navigation?.hamburgerMenuStyle
+  ) {
+    header.navigation.hamburgerMenuStyle.defaultButtonStyle = {
+      ...header.navigation.hamburgerMenuStyle.defaultButtonStyle,
+      color: overrides.overlay_default_text_color ?? '',
+    };
+  }
+
+  if (
+    overrides.overlay_default_bg_color !== undefined &&
+    header.navigation?.hamburgerMenuStyle
+  ) {
+    header.navigation.hamburgerMenuStyle.defaultButtonStyle = {
+      ...header.navigation.hamburgerMenuStyle.defaultButtonStyle,
+      backgroundColor: overrides.overlay_default_bg_color ?? '',
+    };
+  }
+
+  if (
+    overrides.overlay_selected_text_color !== undefined &&
+    header.navigation?.hamburgerMenuStyle
+  ) {
+    header.navigation.hamburgerMenuStyle.selectedButtonStyle = {
+      ...header.navigation.hamburgerMenuStyle.selectedButtonStyle,
+      color: overrides.overlay_selected_text_color ?? '',
+    };
+  }
+
+  if (
+    overrides.overlay_selected_bg_color !== undefined &&
+    header.navigation?.hamburgerMenuStyle
+  ) {
+    header.navigation.hamburgerMenuStyle.selectedButtonStyle = {
+      ...header.navigation.hamburgerMenuStyle.selectedButtonStyle,
+      backgroundColor: overrides.overlay_selected_bg_color ?? '',
+    };
+  }
+};
+
+const applyNavRouteChanges = (
+  model: BrandPageModel,
+  routes: UpdateHeaderNavRoute[],
+): void => {
+  for (const routeUpdate of routes) {
+    if (routeUpdate.route_index === undefined) continue;
+
+    const target = model.nav?.routes?.[routeUpdate.route_index];
+
+    if (!target) continue;
+
+    if (routeUpdate.display_name !== undefined) {
+      target.displayName = routeUpdate.display_name;
+
+      // Recalculate pageSlug based on new display name
+      const existingSlugs = (model.nav?.routes ?? []).map((r) => r.pageSlug);
+
+      target.pageSlug = getPageSlugFromPageTitle(
+        routeUpdate.display_name,
+        existingSlugs,
+      );
+    }
+  }
+};
+
+export class HeaderBuilder extends BaseMetadataBuilder<UpdateHeaderArguments> {
+  constructor(
+    request: MetadataBuilderRequest<UpdateHeaderArguments>,
+    logger?: Logger,
+  ) {
+    super(request, logger);
+  }
+
+  async validateAsync(): Promise<{ errors: string[] }> {
+    const args = this.request.payload ?? {};
+
+    try {
+      const errors = HEADER_CHECKS.flatMap((check) => {
+        const err = check(args);
+
+        return err ? [err] : [];
+      });
+
+      return { errors };
+    } catch (error) {
+      this.log({
+        message: 'Header 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;
+
+    // Apply nav route changes first
+    if (args.nav_routes) {
+      applyNavRouteChanges(model, args.nav_routes);
+    }
+
+    // Apply viewport-specific styling via explicit sub-objects
+    if (args.desktop && model.pageHeaderDesktop) {
+      applyViewportHeaderChanges(
+        model.pageHeaderDesktop,
+        args.desktop,
+        textStyleOptions,
+      );
+    }
+
+    if (args.mobile && model.pageHeaderMobile) {
+      applyViewportHeaderChanges(
+        model.pageHeaderMobile,
+        args.mobile,
+        textStyleOptions,
+      );
+    }
+
+    return { request: this.request, model };
+  }
+}

package/src/metadata-builder/builders/rename-page-builder.ts

@@ -0,0 +1,79 @@
+import { type BrandPageModel } from '../../brand-page/models';
+import { getPageSlugFromPageTitle } from '../../brand-page-maker/utils/slug.util';
+import {
+  BaseMetadataBuilder,
+  type BuilderResult,
+  type MetadataBuilderRequest,
+} from '../models';
+import type { Logger } from '../logger';
+import {
+  RENAME_PAGE_CHECKS,
+  type RenamePagePayload,
+} from './section-rules/rename-page.rules';
+
+export type { RenamePagePayload };
+
+export class RenamePageBuilder extends BaseMetadataBuilder<RenamePagePayload> {
+  constructor(
+    request: MetadataBuilderRequest<RenamePagePayload>,
+    logger?: Logger,
+  ) {
+    super(request, logger);
+  }
+
+  async validateAsync(): Promise<{ errors: string[] }> {
+    const errors = RENAME_PAGE_CHECKS.flatMap((check) => {
+      const err = check(this.request.payload);
+
+      return err ? [err] : [];
+    });
+
+    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 { pageId, pageName } = this.request.payload!;
+
+    const page = model.pages.find((p) => p.id === pageId);
+
+    if (!page) {
+      return {
+        request: this.request,
+        model,
+        errors: [`Page with ID "${pageId}" not found`],
+      };
+    }
+
+    const previousTitle = page.title;
+
+    page.title = pageName;
+
+    // Update the matching nav route's display name and recompute its slug.
+    // Slug uniqueness is computed against sibling routes (excluding the route
+    // being renamed) so we don't collide with our own previous slug.
+    const route = model.nav.routes.find((r) => r.pageId === pageId);
+
+    if (route) {
+      const siblingSlugs = model.nav.routes
+        .filter((r) => r.id !== route.id)
+        .map((r) => r.pageSlug);
+
+      route.displayName = pageName;
+      route.pageSlug = getPageSlugFromPageTitle(pageName, siblingSlugs);
+    }
+
+    this.log({
+      message: `Renamed page "${previousTitle}" → "${pageName}" (${pageId})`,
+    });
+
+    return { request: this.request, model };
+  }
+}

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

@@ -1,13 +1,31 @@
 import type {
   AboutSectionContent,
   BrandPageModel,
+  TextStyleDeclaration,
 } from '../../../brand-page/models';
+import { tiptapJsonToHtml } from '../../helpers/rte.helpers';
 import type { BuilderResult } from '../../models';
-import type { AboutSectionArguments } from '../../parsers/section-tool-arguments';
-import { applyScalarFields, applyStyleFields } from '../section-field-utils';
+import {
+  isTiptapDocument,
+  type AboutSectionArguments,
+} from '../../parsers/section-tool-arguments';
+import {
+  applyScalarFields,
+  applyStyleFields,
+  resolveGlobalPresetIntoStyle,
+} from '../section-field-utils';
+import {
+  applyColorThemeToReplacements,
+  resolveShapeColorReplacementsAsync,
+} from '../shape-color-utils';
 import { BaseSectionBuilder } from './base-section-builder';
+import { validateAboutSection } from '../section-rules/about-section.rules';
 
 export class AboutSectionBuilder extends BaseSectionBuilder<AboutSectionContent> {
+  protected get sectionValidate() {
+    return validateAboutSection;
+  }
+
   async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
     this.log('Build called');
 
@@ -17,14 +35,64 @@ export class AboutSectionBuilder extends BaseSectionBuilder<AboutSectionContent>
       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 aboutArgs = this.args as AboutSectionArguments;
+    const prevImageUrl = resolved.content.imageUrl;
+
     applyScalarFields(resolved.content, this.args, this.sectionType);
-    applyStyleFields(resolved.content, this.args, this.sectionType);
+    applyStyleFields(
+      resolved.content,
+      this.args,
+      this.sectionType,
+      this.getGlobalTextStyles(model),
+    );
 
-    const aboutArgs = this.args as AboutSectionArguments;
+    const textStyleOptions = model.styles?.textStyles?.textStyleOptions;
+
+    if (aboutArgs.title !== undefined) {
+      if (isTiptapDocument(aboutArgs.title)) {
+        resolved.content.title = tiptapJsonToHtml(aboutArgs.title);
+        resolved.content.titleStyle = resolveGlobalPresetIntoStyle(
+          resolved.content.titleStyle,
+          textStyleOptions,
+        ) as TextStyleDeclaration;
+      } else {
+        resolved.content.title = aboutArgs.title;
+      }
+    }
+
+    if (aboutArgs.paragraph !== undefined) {
+      if (isTiptapDocument(aboutArgs.paragraph)) {
+        resolved.content.paragraph = tiptapJsonToHtml(aboutArgs.paragraph);
+        resolved.content.paragraphStyle = resolveGlobalPresetIntoStyle(
+          resolved.content.paragraphStyle,
+          textStyleOptions,
+        ) as TextStyleDeclaration;
+      } else {
+        resolved.content.paragraph = aboutArgs.paragraph;
+      }
+    }
+
+    if (aboutArgs.about_shape_url) {
+      resolved.content.mediaType = 'shape';
+
+      if (aboutArgs.about_shape_url !== prevImageUrl) {
+        resolved.content.colorReplacements =
+          await resolveShapeColorReplacementsAsync(aboutArgs.about_shape_url);
+      }
+    } else if (aboutArgs.about_image_url) {
+      resolved.content.mediaType = 'image';
+    }
+
+    if (aboutArgs.color_theme) {
+      resolved.content.colorReplacements = applyColorThemeToReplacements(
+        resolved.content.colorReplacements ?? [],
+        aboutArgs.color_theme,
+      );
+    }
 
     if (aboutArgs.background_color !== undefined) {
       resolved.content.backgroundStyle = {

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

@@ -1,15 +1,26 @@
 import type {
   BannerSectionContent,
   BrandPageModel,
+  TextStyleDeclaration,
 } from '../../../brand-page/models';
+import { tiptapJsonToHtml } from '../../helpers/rte.helpers';
 import type { BuilderResult } from '../../models';
-import type { BannerSectionArguments } from '../../parsers/section-tool-arguments';
 import {
+  isTiptapDocument,
+  type BannerSectionArguments,
+} from '../../parsers/section-tool-arguments';
+import {
+  applyButtonLink,
   applyScalarFields,
   applyStyleFields,
-  applyRTEStyles,
+  resolveGlobalPresetIntoStyle,
 } from '../section-field-utils';
+import {
+  applyColorThemeToReplacements,
+  resolveShapeColorReplacementsAsync,
+} from '../shape-color-utils';
 import { BaseSectionBuilder } from './base-section-builder';
+import { validateBannerSection } from '../section-rules/banner-section.rules';
 
 const applyBackgroundImage = (
   content: BannerSectionContent,
@@ -21,7 +32,36 @@ const applyBackgroundImage = (
   }
 };
 
+const applyBackgroundShapeAsync = async (
+  content: BannerSectionContent,
+  args: BannerSectionArguments,
+  prevImageUrl: string | undefined,
+): Promise<void> => {
+  if (args.background_shape_url) {
+    content.media = undefined;
+    content.mediaType = 'shape';
+    content.size = '100%';
+
+    if (args.background_shape_url !== prevImageUrl) {
+      content.colorReplacements = await resolveShapeColorReplacementsAsync(
+        args.background_shape_url,
+      );
+    }
+  }
+
+  if (args.color_theme) {
+    content.colorReplacements = applyColorThemeToReplacements(
+      content.colorReplacements ?? [],
+      args.color_theme,
+    );
+  }
+};
+
 export class BannerSectionBuilder extends BaseSectionBuilder<BannerSectionContent> {
+  protected get sectionValidate() {
+    return validateBannerSection;
+  }
+
   async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
     this.log('Build called');
 
@@ -31,16 +71,67 @@ export class BannerSectionBuilder extends BaseSectionBuilder<BannerSectionConten
       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;
 
-    applyScalarFields(resolved.content, this.args, this.sectionType);
-    applyStyleFields(resolved.content, this.args, this.sectionType);
-    applyRTEStyles(resolved.content, this.args, this.sectionType);
-    applyBackgroundImage(resolved.content, this.args as BannerSectionArguments);
+    // FOR TESTING PURPOSE: If the generated content contains "@test", return an error message to replace it with "@dev-test"
+    // LETS KEEP THIS FOR NOW TO TEST THE EVEN LOOPING OF THE BUILD PROCESS, SINCE WE HAVE SEEN SOME ISSUES WITH IT DURING TESTING
+    const strrr = JSON.stringify(
+      (this.request.payload?.arguments as any).title?.content || {},
+    );
+
+    if (strrr.includes('@test')) {
+      return {
+        request: this.request,
+        model,
+        errors: [
+          'When there is generated text contain "@test", should return as "@dev-test" instead',
+        ],
+      };
+    }
+    // TEST END
 
     const bannerArgs = this.args as BannerSectionArguments;
+    const prevImageUrl = resolved.content.imageUrl;
+
+    applyScalarFields(resolved.content, this.args, this.sectionType);
+    applyButtonLink(resolved.content, bannerArgs);
+    applyStyleFields(
+      resolved.content,
+      this.args,
+      this.sectionType,
+      this.getGlobalTextStyles(model),
+    );
+
+    const textStyleOptions = model.styles?.textStyles?.textStyleOptions;
+
+    if (bannerArgs.title !== undefined) {
+      if (isTiptapDocument(bannerArgs.title)) {
+        resolved.content.title = tiptapJsonToHtml(bannerArgs.title);
+        resolved.content.titleStyle = resolveGlobalPresetIntoStyle(
+          resolved.content.titleStyle,
+          textStyleOptions,
+        ) as TextStyleDeclaration;
+      } else {
+        resolved.content.title = bannerArgs.title;
+      }
+    }
+
+    if (bannerArgs.description !== undefined) {
+      if (isTiptapDocument(bannerArgs.description)) {
+        resolved.content.description = tiptapJsonToHtml(bannerArgs.description);
+        resolved.content.descriptionStyle = resolveGlobalPresetIntoStyle(
+          resolved.content.descriptionStyle,
+          textStyleOptions,
+        ) as TextStyleDeclaration;
+      } else {
+        resolved.content.description = bannerArgs.description;
+      }
+    }
+
+    applyBackgroundImage(resolved.content, bannerArgs);
+    await applyBackgroundShapeAsync(resolved.content, bannerArgs, prevImageUrl);
 
     if (bannerArgs.background_color !== undefined) {
       resolved.content.backgroundStyle = {
@@ -49,6 +140,20 @@ export class BannerSectionBuilder extends BaseSectionBuilder<BannerSectionConten
       };
     }
 
+    if (bannerArgs.card_style && typeof bannerArgs.card_style === 'object') {
+      const existing = resolved.content.cardStyle || {};
+
+      resolved.content.cardStyle = {
+        ...existing,
+        ...Object.fromEntries(
+          Object.entries(bannerArgs.card_style).map(([k, v]) => [
+            k,
+            v === null ? '' : v,
+          ]),
+        ),
+      };
+    }
+
     return { request: this.request, model };
   }
 }