@designcrowd/library.brand-page 6.2.3 → 6.2.4

package/src/utils/minify-brand-page-metadata.test.ts

@@ -1,4 +1,4 @@
-import { describe, test, expect } from 'vitest';
+import { describe, it, test, expect } from 'vitest';
 import { BRAND_SITE } from '@brand-page-maker/components/brand-page-maker/__fixtures__';
 import { BrandPageModel, PageHeaderDesktop } from '@brand-page';
 import { minifyBrandPageMetadata } from './minify-brand-page-metadata';
@@ -71,6 +71,64 @@ describe('minifyBrandPageMetadata — header backgroundOpacity (BP-5851)', () =>
   });
 });
 
+/**
+ * The AI builder can now create/update `support-me` sections, so the minified
+ * model it reads on update must surface the fields it can edit — otherwise it
+ * can't see the current `displayStyle` / `successMessage` when deciding what to
+ * change. `request-payment` (not AI-editable) must keep its original shape.
+ */
+
+const makeModel = (contents: unknown[]): BrandPageModel =>
+  ({
+    brandPageType: 'brandSite',
+    v: 1,
+    styles: {},
+    nav: { routes: [{ pageId: 'page-1', pageSlug: 'home' }] },
+    pages: [{ id: 'page-1', title: 'Home', contents }],
+  }) as unknown as BrandPageModel;
+
+const supportMe = {
+  id: 'sm-1',
+  type: 'support-me',
+  title: 'Buy me a coffee',
+  description: 'Support my work',
+  successMessage: 'Thanks so much!',
+  displayStyle: 'collapsed',
+};
+
+const requestPayment = {
+  id: 'rp-1',
+  type: 'request-payment',
+  title: 'Pay now',
+  description: 'Invoice',
+  successMessage: 'Paid',
+  displayStyle: 'preview',
+};
+
+describe('minifyBrandPageMetadata — support-me', () => {
+  it('surfaces title, description, successMessage and displayStyle', () => {
+    const out = minifyBrandPageMetadata(makeModel([supportMe]));
+    const minified = out.pages[0].contents[0];
+
+    expect(minified.type).toBe('support-me');
+    expect(minified.title).toBe('Buy me a coffee');
+    expect(minified.description).toBe('Support my work');
+    expect(minified.successMessage).toBe('Thanks so much!');
+    expect(minified.displayStyle).toBe('collapsed');
+  });
+
+  it('leaves request-payment shape unchanged (no successMessage / displayStyle)', () => {
+    const out = minifyBrandPageMetadata(makeModel([requestPayment]));
+    const minified = out.pages[0].contents[0];
+
+    expect(minified.type).toBe('request-payment');
+    expect(minified.title).toBe('Pay now');
+    expect(minified.description).toBe('Invoice');
+    expect(minified.successMessage).toBeUndefined();
+    expect(minified.displayStyle).toBeUndefined();
+  });
+});
+
 /**
  * BP-5886 — the outbound half of the AI colour bridge (review blocker B8).
  *
@@ -169,3 +227,110 @@ describe('minifyBrandPageMetadata — palette resolution', () => {
     expect(sut.styles.colors).toHaveLength(3);
   });
 });
+
+/**
+ * BP-6081: the AI reads colours as values and floors text against the band it
+ * sits on. The footer shipped with no colours at all and a text section's band
+ * lives on the flat `backgroundColor` key, so both bands were invisible to it.
+ */
+describe('minifyBrandPageMetadata — bands the AI must see (BP-6081)', () => {
+  const withFooter = (footer: Record<string, unknown>): BrandPageModel =>
+    ({
+      ...makeModel([]),
+      pageFooterDesktop: footer,
+      pageFooterMobile: footer,
+    }) as unknown as BrandPageModel;
+
+  it('surfaces the footer band, copyright ink and icon fill', () => {
+    const out = minifyBrandPageMetadata(
+      withFooter({
+        displayStyle: 'centered-menu',
+        copyrightText: '© 2026',
+        backgroundStyle: { backgroundColor: '#24749c' },
+        copyrightStyle: { color: '#e4f0f5', fontSize: '1.1em' },
+        iconStyle: { fill: '#e4f0f5' },
+      }),
+    );
+
+    expect(out.footer?.desktop?.backgroundStyle).toEqual({
+      backgroundColor: '#24749c',
+    });
+    expect(out.footer?.desktop?.copyrightStyle).toEqual({ color: '#e4f0f5' });
+    expect(out.footer?.desktop?.iconStyle).toEqual({ fill: '#e4f0f5' });
+    expect(out.footer?.mobile?.backgroundStyle).toEqual({
+      backgroundColor: '#24749c',
+    });
+  });
+
+  it('omits footer colour keys that are absent or empty', () => {
+    const out = minifyBrandPageMetadata(
+      withFooter({
+        displayStyle: 'centered-menu',
+        backgroundStyle: { backgroundColor: '' },
+      }),
+    );
+
+    expect(out.footer?.desktop?.backgroundStyle).toBeUndefined();
+    expect(out.footer?.desktop?.copyrightStyle).toBeUndefined();
+    expect(out.footer?.desktop?.iconStyle).toBeUndefined();
+  });
+
+  it('surfaces a text section band stored as a flat backgroundColor object', () => {
+    const out = minifyBrandPageMetadata(
+      makeModel([
+        {
+          id: 't-1',
+          type: 'text',
+          text: 'Hours',
+          textItems: [],
+          backgroundColor: { backgroundColor: '#254250' },
+        },
+      ]),
+    );
+
+    expect(out.pages[0].contents[0].backgroundStyle).toEqual({
+      backgroundColor: '#254250',
+    });
+  });
+
+  it('surfaces a text section band stored as a bare string', () => {
+    const out = minifyBrandPageMetadata(
+      makeModel([
+        {
+          id: 't-2',
+          type: 'text',
+          text: 'Hours',
+          textItems: [],
+          backgroundColor: '#254250',
+        },
+      ]),
+    );
+
+    expect(out.pages[0].contents[0].backgroundStyle).toEqual({
+      backgroundColor: '#254250',
+    });
+  });
+
+  it('emits no band for a text section without one', () => {
+    const out = minifyBrandPageMetadata(
+      makeModel([{ id: 't-3', type: 'text', text: 'Hours', textItems: [] }]),
+    );
+
+    expect(out.pages[0].contents[0].backgroundStyle).toBeUndefined();
+  });
+
+  it('resolves a palette reference on the footer band to its value', () => {
+    const model = withFooter({
+      backgroundStyle: { backgroundColor: 'var(--palette-1)' },
+    });
+
+    (model as any).styles = {
+      colors: [{ id: 'palette-1', value: '#24749c', type: 'brand' }],
+    };
+    const out = minifyBrandPageMetadata(model);
+
+    expect(out.footer?.desktop?.backgroundStyle).toEqual({
+      backgroundColor: '#24749c',
+    });
+  });
+});

package/src/utils/minify-brand-page-metadata.ts

@@ -35,6 +35,11 @@ type MinifiedFooter = {
   logoImageWidth?: string;
   logoAssetKey?: string;
   socialLinks?: MinifiedFooterSocialLink[];
+  // BP-6081: the footer's colours, so the AI can judge and recolour the copyright
+  // line and icons against the band they sit on (the header already carries its bg).
+  backgroundStyle?: { backgroundColor?: string };
+  copyrightStyle?: { color?: string };
+  iconStyle?: { fill?: string };
 };
 
 type MinifiedHeader = {
@@ -364,7 +369,15 @@ const minifyContent = (
           })),
         }),
         ...(includeStyle(c.textStyle) && { textStyle: c.textStyle }),
-        ...includeBackgroundStyle(c.backgroundStyle),
+        // A text section keeps its band on the flat `backgroundColor` key — as a
+        // `{ backgroundColor }` object or a bare string — not on `backgroundStyle`,
+        // so the shared helper saw nothing and the AI never knew the band (BP-6081).
+        ...includeBackgroundStyle(
+          c.backgroundStyle ??
+            (typeof c.backgroundColor === 'string'
+              ? { backgroundColor: c.backgroundColor }
+              : c.backgroundColor),
+        ),
       };
 
     case 'profile':
@@ -516,11 +529,19 @@ const minifyContent = (
       return base;
 
     case 'request-payment':
+      return {
+        ...base,
+        ...st('title', c.title, editor),
+        ...st('description', c.description, editor),
+      };
+
     case 'support-me':
       return {
         ...base,
         ...st('title', c.title, editor),
         ...st('description', c.description, editor),
+        ...st('successMessage', c.successMessage, editor),
+        ...(includeString(c.displayStyle) && { displayStyle: c.displayStyle }),
       };
 
     default:
@@ -549,6 +570,15 @@ const minifyFooter = (
           url: l.url || '',
         }))
       : undefined,
+    backgroundStyle: footer.backgroundStyle?.backgroundColor
+      ? { backgroundColor: footer.backgroundStyle.backgroundColor as string }
+      : undefined,
+    copyrightStyle: footer.copyrightStyle?.color
+      ? { color: footer.copyrightStyle.color }
+      : undefined,
+    iconStyle: (footer.iconStyle as { fill?: string } | undefined)?.fill
+      ? { fill: (footer.iconStyle as { fill?: string }).fill as string }
+      : undefined,
   };
 };