@designcrowd/library.brand-page 6.0.18 → 6.0.19-ast-btns-2

package/src/brand-page/utils/migration/migration-19.test.ts

@@ -0,0 +1,120 @@
+import { describe, test, expect } from 'vitest';
+import { migration19 } from './migration-19';
+import type { MigrationData } from '../migration.util';
+import { BRAND_PAGE_TYPES } from '../../models';
+
+const BUTTON_FILL = 'rgb(255, 222, 89)';
+
+const createMigrationData = (brandPageModel: any): MigrationData => ({
+  brandPageModel,
+  useOldLogoRenderSize: false,
+});
+
+const modelWith = (
+  contents: any[],
+  buttonFill: string | undefined = BUTTON_FILL,
+  brandPageType: string = BRAND_PAGE_TYPES.default,
+) => ({
+  brandPageType,
+  styles: { buttonStyles: { style: { backgroundColor: buttonFill } } },
+  pages: [{ contents }],
+});
+
+describe('migration19', () => {
+  test('seeds backgroundColor from the button fill for each container-backed block when unset', async () => {
+    const model = modelWith([
+      { type: 'contact-form' },
+      { type: 'mailing-list' },
+      { type: 'request-payment' },
+      { type: 'support-me' },
+    ]);
+
+    const result = await migration19(createMigrationData(model));
+
+    (result.brandPageModel as any).pages[0].contents.forEach((c: any) => {
+      expect(c.backgroundStyle.backgroundColor).toBe(BUTTON_FILL);
+    });
+  });
+
+  test('does not override a backgroundColor that is already set', async () => {
+    const model = modelWith([
+      {
+        type: 'mailing-list',
+        backgroundStyle: { backgroundColor: 'rgb(1, 2, 3)' },
+      },
+    ]);
+
+    const result = await migration19(createMigrationData(model));
+
+    expect(
+      (result.brandPageModel as any).pages[0].contents[0].backgroundStyle
+        .backgroundColor,
+    ).toBe('rgb(1, 2, 3)');
+  });
+
+  test('does NOT seed contact-form on brand-site (its own backgroundStyle already applies there)', async () => {
+    const model = modelWith(
+      [{ type: 'contact-form' }],
+      BUTTON_FILL,
+      BRAND_PAGE_TYPES.brandSite,
+    );
+
+    const result = await migration19(createMigrationData(model));
+
+    expect(
+      (result.brandPageModel as any).pages[0].contents[0].backgroundStyle,
+    ).toBeUndefined();
+  });
+
+  test('still seeds mailing-list on brand-site (button-fill container on every type)', async () => {
+    const model = modelWith(
+      [{ type: 'mailing-list' }],
+      BUTTON_FILL,
+      BRAND_PAGE_TYPES.brandSite,
+    );
+
+    const result = await migration19(createMigrationData(model));
+
+    expect(
+      (result.brandPageModel as any).pages[0].contents[0].backgroundStyle
+        .backgroundColor,
+    ).toBe(BUTTON_FILL);
+  });
+
+  test('leaves out-of-scope content types untouched', async () => {
+    const model = modelWith([{ type: 'banner-section' }, { type: 'text' }]);
+
+    const result = await migration19(createMigrationData(model));
+
+    (result.brandPageModel as any).pages[0].contents.forEach((c: any) => {
+      expect(c.backgroundStyle).toBeUndefined();
+    });
+  });
+
+  test('is a no-op when the button fill colour is undefined', async () => {
+    const model = {
+      styles: { buttonStyles: { style: {} } },
+      pages: [{ contents: [{ type: 'mailing-list' }] }],
+    };
+
+    const result = await migration19(createMigrationData(model));
+
+    expect(
+      (result.brandPageModel as any).pages[0].contents[0].backgroundStyle,
+    ).toBeUndefined();
+  });
+
+  test('preserves other backgroundStyle keys when seeding', async () => {
+    const model = modelWith([
+      { type: 'mailing-list', backgroundStyle: { opacity: '0.5' } },
+    ]);
+
+    const result = await migration19(createMigrationData(model));
+
+    const bg = (result.brandPageModel as any).pages[0].contents[0]
+      .backgroundStyle;
+
+    expect(bg.backgroundColor).toBe(BUTTON_FILL);
+    expect(bg.opacity).toBe('0.5');
+  });
+});

package/src/brand-page/utils/migration/migration-19.ts

@@ -0,0 +1,67 @@
+import type { MigrationData } from '../migration.util';
+import { BRAND_PAGE_TYPES } from '../../models';
+
+/**
+ * BP-5800 — decouple the section container background from the global button fill.
+ *
+ * These blocks' outer container historically took its background from the button
+ * fill colour (`containerStyle = { ...buttonStyles }`). They now own a
+ * `backgroundStyle`; seed its `backgroundColor` from the current button fill so
+ * existing sites render identically while the colour becomes independently editable.
+ *
+ * runAlways + idempotent: only seeds when the colour is unset, so it never overrides
+ * a colour the user has set.
+ */
+const CONTAINER_BACKGROUND_TYPES = new Set<string>([
+  'contact-form',
+  'mailing-list',
+  'request-payment',
+  'support-me',
+]);
+
+type WithBackgroundStyle = {
+  backgroundStyle?: { backgroundColor?: string };
+};
+
+export const migration19 = async (
+  migrationResult: MigrationData,
+): Promise<MigrationData> => {
+  const { brandPageModel } = migrationResult;
+  const buttonFill =
+    brandPageModel.styles?.buttonStyles?.style?.backgroundColor;
+
+  if (buttonFill === undefined) {
+    return migrationResult;
+  }
+
+  const isBrandSite =
+    brandPageModel.brandPageType === BRAND_PAGE_TYPES.brandSite;
+
+  brandPageModel.pages.forEach((page) => {
+    page.contents.forEach((content) => {
+      if (!CONTAINER_BACKGROUND_TYPES.has(content.type)) {
+        return;
+      }
+
+      // contact-form already paints its own backgroundStyle on brand-site (default
+      // transparent); only its BP/BC container takes the button fill. mailing-list /
+      // payment use the button-fill container on every type, so they always seed.
+      if (content.type === 'contact-form' && isBrandSite) {
+        return;
+      }
+
+      const block = content as WithBackgroundStyle;
+
+      if (block.backgroundStyle?.backgroundColor !== undefined) {
+        return;
+      }
+
+      block.backgroundStyle = {
+        ...block.backgroundStyle,
+        backgroundColor: buttonFill,
+      };
+    });
+  });
+
+  return migrationResult;
+};

package/src/brand-page/utils/migration.util.ts

@@ -21,6 +21,7 @@ import { migration15 } from './migration/migration-15';
 import { migration16 } from './migration/migration-16';
 import { migration17 } from './migration/migration-17';
 import { migration18 } from './migration/migration-18';
+import { migration19 } from './migration/migration-19';
 
 export interface MigrationData {
   brandPageModel: BrandPageModel;
@@ -167,6 +168,15 @@ const MIGRATION_TABLE = [
     description:
       'BP-5603: backfill stable item ids on all nested items (gallery/section/testimonial/text items, section + footer social links) — the item id is now non-nullable',
   },
+  {
+    version: 19,
+    migrateFn: migration19,
+    // runAlways: re-apply on every load so already-published sites pick up the seed
+    // without a version bump. Idempotent — only seeds backgroundColor when unset.
+    runAlways: true,
+    description:
+      'BP-5800: seed own container backgroundStyle from the button fill colour for contact-form, mailing-list, request-payment and support-me so the container background is independent of the site button (existing sites render unchanged)',
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

package/src/brand-page/utils/view-model.util.ts

@@ -887,6 +887,7 @@ const mapToShopViewModel = (
   styles: PageStyles,
 ): ShopViewModel => {
   const buttonStyles = new ButtonStyles({
+    selectedButtonStyleId: styles.buttonStyles.selectedButtonStyleId,
     style: {
       ...styles.buttonStyles.style,
     },

package/src/brand-page-maker/constants/config-settings-constant.ts

@@ -139,6 +139,7 @@ import {
   personalisationOverrideVisibility,
 } from '../assessors';
 import {
+  contactFormBackgroundColorDefaultGetter,
   logoBackgroundColorDefaultGetter,
   paymentFillColorFieldDefaultGetter,
   paymentTextAndBorderColorFieldDefaultGetter,
@@ -716,6 +717,13 @@ const testimonialReplaceImageSettings =
     mediaType: MEDIA_TYPES.image,
   });
 
+// Transparent bg is disallowed on the single-page side (brand-page /
+// brand-contact) so the added background colour stays a solid backdrop for the
+// decorative button styles (BP-5800); brand-site sections keep transparent.
+const disableTransparentOffBrandSite = (
+  brandPageType: BrandPageType,
+): boolean => brandPageType !== BRAND_PAGE_TYPES.brandSite;
+
 export const LOGO_SETTINGS_CONFIG = (): ContentSettingsConfig<
   Omit<
     LogoContent,
@@ -1824,6 +1832,17 @@ export const MAILING_LIST_CONTENT_SETTINGS_CONFIG =
       titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
       buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
       ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
+      backgroundStyle: {
+        type: 'color',
+        groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+        defaultValue: {},
+        isInline: true,
+        showToggle: false,
+        title: contentSettingsTr(`backgroundColorTitle`),
+        disableTransparent: disableTransparentOffBrandSite,
+        valueConvertor: backgroundColorConvertor,
+        defaultGetter: paymentFillColorFieldDefaultGetter,
+      },
     },
     isEnabled: true,
     isLocked: false,
@@ -2009,6 +2028,17 @@ export const REQUEST_PAYMENT_CONTENT_SETTINGS_CONFIG =
         label: contentSettingsTr(`buttonTextStyleLabel`),
       },
       ...PADDING_CONTROL_FIELDS(REQUEST_PAYMENT_GROUPS.style),
+      backgroundStyle: {
+        type: 'color',
+        groupId: REQUEST_PAYMENT_GROUPS.style,
+        defaultValue: {},
+        isInline: true,
+        showToggle: false,
+        title: contentSettingsTr(`backgroundColorTitle`),
+        disableTransparent: disableTransparentOffBrandSite,
+        valueConvertor: backgroundColorConvertor,
+        defaultGetter: paymentFillColorFieldDefaultGetter,
+      },
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -2077,6 +2107,17 @@ export const SUPPORT_ME_CONTENT_SETTINGS_CONFIG =
       },
       buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
       ...PADDING_CONTROL_FIELDS(SETTINGS_STYLE_FIELD_GROUP_IDS.style),
+      backgroundStyle: {
+        type: 'color',
+        groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+        defaultValue: {},
+        isInline: true,
+        showToggle: false,
+        title: contentSettingsTr(`backgroundColorTitle`),
+        disableTransparent: disableTransparentOffBrandSite,
+        valueConvertor: backgroundColorConvertor,
+        defaultGetter: paymentFillColorFieldDefaultGetter,
+      },
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -2231,7 +2272,9 @@ export const CONTACT_FORM_SETTINGS_CONFIG =
         isInline: true,
         showToggle: false,
         title: contentSettingsTr(`backgroundColorTitle`),
+        disableTransparent: disableTransparentOffBrandSite,
         valueConvertor: backgroundColorConvertor,
+        defaultGetter: contactFormBackgroundColorDefaultGetter,
       },
     },
     isEnabled: true,
@@ -3142,6 +3185,7 @@ export const SHOP_SECTION_SETTINGS_CONFIG = (): ContentSettingsConfig<
       isInline: true,
       showToggle: false,
       title: contentSettingsTr(`backgroundColorTitle`),
+      disableTransparent: disableTransparentOffBrandSite,
       valueConvertor: backgroundColorConvertor,
     },
   },

package/src/brand-page-maker/default-getters/contact-form-background-color.default-getter.ts

@@ -0,0 +1,23 @@
+import { RGBAtoHex } from '@utils/helpers';
+import { BRAND_PAGE_TYPES } from '@brand-page';
+import type { DefaultGetter } from '../models';
+
+/**
+ * Contact-form "Background color" default (BP-5800). On brand-page/brand-contact the
+ * collapsible container takes the button fill, so default the picker to it. On
+ * brand-site the field is the section background behind the card (its own "Card color"),
+ * which stays transparent — so no default there.
+ */
+export const contactFormBackgroundColorDefaultGetter: DefaultGetter<
+  BrandPageCssStyle
+> = (brandPage): BrandPageCssStyle => {
+  if (brandPage.brandPageType === BRAND_PAGE_TYPES.brandSite) {
+    return {};
+  }
+
+  return {
+    backgroundColor: RGBAtoHex(
+      brandPage.styles.buttonStyles.style.backgroundColor,
+    ),
+  };
+};

package/src/brand-page-maker/default-getters/index.ts

@@ -2,3 +2,4 @@ export * from './text-color.default-getter';
 export * from './payment-fill-color.default-getter';
 export * from './payment-text-and-border-color.default-getter';
 export * from './logo-background-fill.default-getter';
+export * from './contact-form-background-color.default-getter';

package/src/brand-page-maker/models/button-styles-config.ts

@@ -379,7 +379,11 @@ export const availableButtonStyleConfigs: ButtonStyleConfig[] = [
     iconName: 'button-brushstroke',
     iconViewBox: '0 0 60 20',
     options: ['buttonFillColor', 'buttonIconColor'],
-    brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+    brandPageType: [
+      BRAND_PAGE_TYPES.default,
+      BRAND_PAGE_TYPES.brandContact,
+      BRAND_PAGE_TYPES.brandSite,
+    ],
   },
   {
     id: 'BUTTON_STYLE_20',
@@ -396,7 +400,11 @@ export const availableButtonStyleConfigs: ButtonStyleConfig[] = [
     iconName: 'button-arrow',
     iconViewBox: '0 0 60 20',
     options: ['buttonFillColor', 'buttonIconColor'],
-    brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+    brandPageType: [
+      BRAND_PAGE_TYPES.default,
+      BRAND_PAGE_TYPES.brandContact,
+      BRAND_PAGE_TYPES.brandSite,
+    ],
   },
   {
     id: 'BUTTON_STYLE_21',
@@ -413,6 +421,10 @@ export const availableButtonStyleConfigs: ButtonStyleConfig[] = [
     iconName: 'button-paper',
     iconViewBox: '0 0 60 20',
     options: ['buttonFillColor', 'buttonIconColor'],
-    brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+    brandPageType: [
+      BRAND_PAGE_TYPES.default,
+      BRAND_PAGE_TYPES.brandContact,
+      BRAND_PAGE_TYPES.brandSite,
+    ],
   },
 ];

package/src/brand-page-maker/models/content-settings-configs.ts

@@ -137,7 +137,7 @@ export interface ContentSettingsField<TContent> {
     | ((brandPageType: BrandPageType) => VariantDisplayModes);
   replaceImageSettings?: ContentReplaceImageSettings<TContent>;
   showToggle?: boolean;
-  disableTransparent?: boolean;
+  disableTransparent?: boolean | ((brandPageType: BrandPageType) => boolean);
   valueConvertor?: ValueConvertor<any, any>;
   canReplace?: boolean;
   placeholderAssessor?: PlaceholderTypeAssessor<TContent>;

package/src/brand-page-maker/models/content-settings.ts

@@ -319,6 +319,7 @@ export const createInitialMailingListContent = (
       textStyleType: TEXT_STYLE_TYPES.buttons,
       textAlign: 'center',
     },
+    backgroundStyle: {},
   };
 };
 
@@ -364,6 +365,7 @@ export const createInitialRequestPaymentContent = (
       textStyleType: TEXT_STYLE_TYPES.buttons,
       textAlign: 'center',
     },
+    backgroundStyle: {},
   };
 };
 
@@ -461,6 +463,7 @@ export const createInitialSupportMeContent = (
       textStyleType: TEXT_STYLE_TYPES.buttons,
       textAlign: 'center',
     },
+    backgroundStyle: {},
   };
 };
 

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

@@ -31,6 +31,12 @@ const CHECKS: SectionCheck[] = [
       'left-aligned-full-image',
       'center-card-aligned-image',
       'left-card-aligned-image',
+      'top-card-aligned-image',
+      'bottom-card-aligned-image',
+      'middle-card-aligned-image',
+      'top-aligned-full-image',
+      'bottom-aligned-full-image',
+      'middle-aligned-full-image',
     ],
     'banner-section',
   ),

package/src/metadata-builder/parsers/section-tool-arguments.ts

@@ -363,7 +363,13 @@ export interface BannerSectionArguments {
     | 'right-aligned-full-image'
     | 'left-aligned-full-image'
     | 'center-card-aligned-image'
-    | 'left-card-aligned-image';
+    | 'left-card-aligned-image'
+    | 'top-card-aligned-image'
+    | 'bottom-card-aligned-image'
+    | 'middle-card-aligned-image'
+    | 'top-aligned-full-image'
+    | 'bottom-aligned-full-image'
+    | 'middle-aligned-full-image';
   title_style?: TextStyleArguments;
   description_style?: TextStyleArguments;
   button_text_style?: ButtonTextStyleArguments;

package/src/metadata-builder/sanitizers/__tests__/section-args-validator.test.ts

@@ -148,6 +148,19 @@ describe('field enum validation', () => {
     expect(errors).toHaveLength(0);
   });
 
+  it.each([
+    'top-card-aligned-image',
+    'bottom-card-aligned-image',
+    'middle-card-aligned-image',
+    'top-aligned-full-image',
+    'bottom-aligned-full-image',
+    'middle-aligned-full-image',
+  ])('passes on new stacked banner display_style %s (BP-5724)', (style) => {
+    const errors = validateBannerSection({ display_style: style } as any, {});
+
+    expect(errors).toHaveLength(0);
+  });
+
   it('validates icon_style for social-links', () => {
     const errors = validateSocialLinks(
       { icon_style: 'not-a-real-style' } as any,

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.ts

@@ -212,6 +212,12 @@ export default defineComponent({
       return this.field.showToggle;
     },
     disableTransparent(): boolean {
+      // Supports a function of brandPageType (like variant/min/maxLength) so a
+      // field can disable transparent only on some website types.
+      if (typeof this.field.disableTransparent === 'function') {
+        return this.field.disableTransparent(this.brandPageType);
+      }
+
       return this.field.disableTransparent || false;
     },
     plainTextValue(): string {

package/src/shared/style-settings/components/StyleSettings.vue

@@ -165,6 +165,7 @@
             <button
               v-for="(buttonStyleConfig, index) in availableButtonStyleConfigs"
               :key="index"
+              :data-test-button-style="buttonStyleConfig.id"
               class="c-button-style tw-cursor-pointer tw-border-0 tw-bg-white tw-px-3 tw-rounded tw-transition-all tw-duration-300 tw-transform hover:tw-bg-grayscale-200 tw-h-14"
               :class="{
                 'c-button-style--selected !tw-shadow-[0_0_0_2px] !tw-shadow-info-500':