@designcrowd/library.brand-page 6.0.21 → 6.0.22

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

@@ -0,0 +1,172 @@
+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 USER_CARD = 'rgb(1, 2, 3)';
+
+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: '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('seeds contact-form via cardStyle (not backgroundStyle) so its container colour is detached from the button', async () => {
+    const model = modelWith([{ type: 'contact-form' }]);
+
+    const result = await migration19(createMigrationData(model));
+
+    const block = (result.brandPageModel as any).pages[0].contents[0];
+
+    expect(block.backgroundStyle).toBeUndefined();
+    expect(block.cardStyle.backgroundColor).toBe(BUTTON_FILL);
+  });
+
+  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');
+  });
+
+  test('seeds contact-form cardStyle from the button fill on brand-contact', async () => {
+    const model = modelWith(
+      [{ type: 'contact-form' }],
+      BUTTON_FILL,
+      BRAND_PAGE_TYPES.brandContact,
+    );
+
+    const result = await migration19(createMigrationData(model));
+
+    expect(
+      (result.brandPageModel as any).pages[0].contents[0].cardStyle
+        .backgroundColor,
+    ).toBe(BUTTON_FILL);
+  });
+
+  test('is idempotent — does NOT overwrite a contact-form cardStyle colour that is already set', async () => {
+    const model = modelWith([
+      { type: 'contact-form', cardStyle: { backgroundColor: USER_CARD } },
+    ]);
+
+    const result = await migration19(createMigrationData(model));
+
+    expect(
+      (result.brandPageModel as any).pages[0].contents[0].cardStyle
+        .backgroundColor,
+    ).toBe(USER_CARD);
+  });
+
+  test('preserves other cardStyle keys while seeding the contact-form colour', async () => {
+    const model = modelWith([
+      { type: 'contact-form', cardStyle: { borderRadius: '8px' } },
+    ]);
+
+    const result = await migration19(createMigrationData(model));
+
+    const card = (result.brandPageModel as any).pages[0].contents[0].cardStyle;
+
+    expect(card.backgroundColor).toBe(BUTTON_FILL);
+    expect(card.borderRadius).toBe('8px');
+  });
+
+  test('does NOT touch contact forms on brand-site (keeps its own layout/card behaviour)', 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].cardStyle,
+    ).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,65 @@
+import type { MigrationData } from '../migration.util';
+import { BRAND_PAGE_TYPES } from '../../models';
+
+const CONTAINER_BACKGROUND_TYPES = new Set<string>([
+  'mailing-list',
+  'request-payment',
+  'support-me',
+]);
+
+type WithBackgroundStyle = {
+  backgroundStyle?: { backgroundColor?: string };
+};
+
+type WithCardStyle = {
+  cardStyle?: { 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) => {
+      // Container-backed blocks: seed their own backgroundStyle on every type.
+      if (CONTAINER_BACKGROUND_TYPES.has(content.type)) {
+        const block = content as WithBackgroundStyle;
+
+        if (block.backgroundStyle?.backgroundColor === undefined) {
+          block.backgroundStyle = {
+            ...block.backgroundStyle,
+            backgroundColor: buttonFill,
+          };
+        }
+
+        return;
+      }
+
+      // Contact form: colour moves to cardStyle — skip on brand-site, which
+      // keeps its own layout/card behaviour.
+      if (content.type === 'contact-form' && !isBrandSite) {
+        const block = content as WithCardStyle;
+
+        if (block.cardStyle?.backgroundColor === undefined) {
+          block.cardStyle = {
+            ...block.cardStyle,
+            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,17 @@ 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 a colour when unset, so a user
+    // colour is never clobbered. Single pass over the model seeds both container types
+    // and the contact form.
+    runAlways: true,
+    description:
+      'BP-5800: seed the button fill colour as each block’s own container colour so it is independent of the site button (existing sites render unchanged) — backgroundStyle for mailing-list, request-payment and support-me (all types); cardStyle for the BP/BC contact form (skipped on brand-site)',
+  },
 ] 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/assessors/contact-form-visibility.assessor.ts

@@ -11,50 +11,58 @@ import {
 
 export const contactCardDisplayTypeVisibilityAssessor: VisibilityAssessor<
   ContactFormContent | undefined
+> = (content, context) => {
+  return Boolean(
+    content?.layoutStyle &&
+    [
+      ALIGN_CARD_CENTER_IMAGE,
+      ALIGN_CARD_CENTER,
+      ALIGN_LEFT_FULL_IMAGE,
+      ALIGN_RIGHT_FULL_IMAGE,
+    ].includes(content?.layoutStyle) &&
+    context?.isBrandSite,
+  );
+};
+
+// Card colour picker: on brand-page/brand-contact it's the collapsible container
+// colour (shown for every layout); on brand-site it's the card in card layouts.
+export const contactCardColorVisibilityAssessor: VisibilityAssessor<
+  ContactFormContent | undefined
 > = (content, context) => {
   return (
-    Boolean(
-      content?.layoutStyle &&
-      [
-        ALIGN_CARD_CENTER_IMAGE,
-        ALIGN_CARD_CENTER,
-        ALIGN_LEFT_FULL_IMAGE,
-        ALIGN_RIGHT_FULL_IMAGE,
-      ].includes(content?.layoutStyle),
-    ) && context!.isBrandSite
+    !context?.isBrandSite ||
+    contactCardDisplayTypeVisibilityAssessor(content, context)
   );
 };
 
 export const displayTypeVisibilityAssessor: VisibilityAssessor<
   ContactFormContent | undefined
 > = (content, context) => {
-  return Boolean(content?.layoutStyle === '' || context!.isBrandPage);
+  return Boolean(content?.layoutStyle === '' || context?.isBrandPage);
 };
 
 export const imageUrlVisibilityAssessor: VisibilityAssessor<
   ContactFormContent | undefined
 > = (content, context) => {
-  return (
-    Boolean(
-      content?.layoutStyle &&
-      [
-        ALIGN_CARD_CENTER_IMAGE,
-        ALIGN_LEFT_FULL_IMAGE,
-        ALIGN_RIGHT_FULL_IMAGE,
-      ].includes(content?.layoutStyle),
-    ) && context!.isBrandSite
+  return Boolean(
+    content?.layoutStyle &&
+    [
+      ALIGN_CARD_CENTER_IMAGE,
+      ALIGN_LEFT_FULL_IMAGE,
+      ALIGN_RIGHT_FULL_IMAGE,
+    ].includes(content?.layoutStyle) &&
+    context?.isBrandSite,
   );
 };
 
 export const contactBackgroundDisplayTypeVisibilityAssessor: VisibilityAssessor<
   ContactFormContent | undefined
 > = (content, context) => {
-  return (
-    Boolean(
-      content?.layoutStyle &&
-      [ALIGN_CARD_CENTER, ALIGN_CENTERED, TEXT_ONLY].includes(
-        content?.layoutStyle,
-      ),
-    ) && context!.isBrandSite
+  return Boolean(
+    content?.layoutStyle &&
+    [ALIGN_CARD_CENTER, ALIGN_CENTERED, TEXT_ONLY].includes(
+      content?.layoutStyle,
+    ) &&
+    context?.isBrandSite,
   );
 };

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

@@ -129,7 +129,7 @@ import {
   colorReplacementProfileVisibilityTypeAssessor,
   colorReplacementIconVisibilityTypeAssessor,
   imagesSectionCardStyleVisibilityAssessor,
-  contactCardDisplayTypeVisibilityAssessor,
+  contactCardColorVisibilityAssessor,
   imageUrlVisibilityAssessor,
   displayTypeVisibilityAssessor,
   logoFieldVisibilityAssessor,
@@ -139,6 +139,7 @@ import {
   personalisationOverrideVisibility,
 } from '../assessors';
 import {
+  contactFormCardColorDefaultGetter,
   logoBackgroundColorDefaultGetter,
   paymentFillColorFieldDefaultGetter,
   paymentTextAndBorderColorFieldDefaultGetter,
@@ -716,6 +717,10 @@ const testimonialReplaceImageSettings =
     mediaType: MEDIA_TYPES.image,
   });
 
+const disableTransparentOffBrandSite = (
+  brandPageType: BrandPageType,
+): boolean => brandPageType !== BRAND_PAGE_TYPES.brandSite;
+
 export const LOGO_SETTINGS_CONFIG = (): ContentSettingsConfig<
   Omit<
     LogoContent,
@@ -1824,6 +1829,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: true,
+        valueConvertor: backgroundColorConvertor,
+        defaultGetter: paymentFillColorFieldDefaultGetter,
+      },
     },
     isEnabled: true,
     isLocked: false,
@@ -2009,6 +2025,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: true,
+        valueConvertor: backgroundColorConvertor,
+        defaultGetter: paymentFillColorFieldDefaultGetter,
+      },
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -2077,6 +2104,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: true,
+        valueConvertor: backgroundColorConvertor,
+        defaultGetter: paymentFillColorFieldDefaultGetter,
+      },
     },
     isEnabled: (features) => features.canAddRequestPaymentContents,
     isLocked: false,
@@ -2222,7 +2260,8 @@ export const CONTACT_FORM_SETTINGS_CONFIG =
         disableTransparent: true,
         title: contentSettingsTr(`cardColorTitle`),
         valueConvertor: backgroundColorConvertor,
-        visibilityAssessor: contactCardDisplayTypeVisibilityAssessor,
+        visibilityAssessor: contactCardColorVisibilityAssessor,
+        defaultGetter: contactFormCardColorDefaultGetter,
       },
       backgroundStyle: {
         type: 'color',
@@ -2231,7 +2270,9 @@ export const CONTACT_FORM_SETTINGS_CONFIG =
         isInline: true,
         showToggle: false,
         title: contentSettingsTr(`backgroundColorTitle`),
+        disableTransparent: disableTransparentOffBrandSite,
         valueConvertor: backgroundColorConvertor,
+        visibilityAssessor: brandSiteTypeVisibilityAssessor,
       },
     },
     isEnabled: true,

package/src/brand-page-maker/default-getters/contact-form-card-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 "Card color" default (BP-5800). On brand-page/brand-contact the
+ * collapsible container takes the button fill, so default the Card color picker to
+ * it. On brand-site the Card color applies to the card in card layouts and keeps its
+ * own seeded default — so no default here.
+ */
+export const contactFormCardColorDefaultGetter: 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-card-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>;
@@ -179,6 +179,9 @@ export interface MultiFieldOption {
 export interface CreateInitialContentOptions {
   userState: UserState;
   brandPageType: BrandPageType;
+  // Current global button fill — copied into a new block's own container colour
+  // so it renders like the button fill but is detached from it (BP-5800).
+  buttonFillColor?: string;
 }
 
 export type CreateInitialContentFunction<TContent> = (

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

@@ -319,6 +319,9 @@ export const createInitialMailingListContent = (
       textStyleType: TEXT_STYLE_TYPES.buttons,
       textAlign: 'center',
     },
+    // Detach the container background from the button fill by copying the current
+    // fill as this block's own colour at creation (BP-5800; matches migration-19).
+    backgroundStyle: { backgroundColor: options?.buttonFillColor },
   };
 };
 
@@ -364,6 +367,9 @@ export const createInitialRequestPaymentContent = (
       textStyleType: TEXT_STYLE_TYPES.buttons,
       textAlign: 'center',
     },
+    // Detach the container background from the button fill by copying the current
+    // fill as this block's own colour at creation (BP-5800; matches migration-19).
+    backgroundStyle: { backgroundColor: options?.buttonFillColor },
   };
 };
 
@@ -461,6 +467,9 @@ export const createInitialSupportMeContent = (
       textStyleType: TEXT_STYLE_TYPES.buttons,
       textAlign: 'center',
     },
+    // Detach the container background from the button fill by copying the current
+    // fill as this block's own colour at creation (BP-5800; matches migration-19).
+    backgroundStyle: { backgroundColor: options?.buttonFillColor },
   };
 };
 
@@ -551,9 +560,13 @@ export const createInitialContactFormContent: CreateInitialContentFunction<
     successMessage: contentSettingsTr(`formSuccessMessage`),
     responseEmail: options?.userState.emailAddress || '',
     type: 'contact-form',
-    cardStyle: {
-      backgroundColor: DEFAULT_LOGO_BACKGROUND_COLOR_RGB,
-    },
+    // brand-site: card layouts default to the logo bg. brand-page/brand-contact:
+    // copy the current button fill as the container's own colour so it renders
+    // like the button fill but is detached from it (BP-5800; matches migration-19).
+    cardStyle:
+      options?.brandPageType === BRAND_PAGE_TYPES.brandSite
+        ? { backgroundColor: DEFAULT_LOGO_BACKGROUND_COLOR_RGB }
+        : { backgroundColor: options?.buttonFillColor },
     backgroundStyle: {},
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,

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/content-settings/models.ts

@@ -102,6 +102,9 @@ export type FieldGroup = ContentSettingsFieldGroup & {
 export interface CreateInitialContentOptions {
   userState: UserState;
   brandPageType: BrandPageType;
+  // Current global button fill — copied into a new block's own container colour
+  // so it renders like the button fill but is detached from it (BP-5800).
+  buttonFillColor?: string;
 }
 
 export interface AddContentOption<TContent> {

package/src/shared/content-settings/store/content-settings-store.ts

@@ -37,6 +37,7 @@ import {
   useVideoStore,
 } from '@brand-page-maker/stores';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
+import { useUiStyleSettingsStore } from '@shared/style-settings/store';
 import { useUiSideBarStore } from '../../side-bar/store';
 import {
   createDefaultContentItemGroupState,
@@ -653,6 +654,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
     }): ContentItem<Content> | undefined {
       const userStore = useBrandPageMakerUserStore();
       const brandPageMakerStore = useBrandPageMakerStore();
+      const styleSettingsStore = useUiStyleSettingsStore();
 
       const option = this.addContentOptions.find((o) => o.type === type) as
         | ContentSettingsConfig<any>
@@ -667,6 +669,7 @@ export const useUiContentSettingsStore = defineStore('uiContentSettings', {
       const content = option.createInitialContent({
         userState: userStore.$state,
         brandPageType: brandPageMakerStore.brandPageType,
+        buttonFillColor: styleSettingsStore.buttonFillColor,
       });
       const settingsConfig = CONTENT_SETTINGS_CONFIGS()[content.type];
 

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':

package/lib/src/metadata-builder/builders/reorder-pages-builder.d.ts

@@ -1,13 +0,0 @@
-import type { BrandPageModel } from '../../brand-page/models';
-import { BaseMetadataBuilder, type BuilderResult, type MetadataBuilderRequest } from '../models';
-import type { Logger } from '../logger';
-export interface ReorderPagesPayload {
-    pageOrder: string[];
-}
-export declare class ReorderPagesBuilder extends BaseMetadataBuilder<ReorderPagesPayload> {
-    constructor(request: MetadataBuilderRequest<ReorderPagesPayload>, logger?: Logger);
-    validateAsync(): Promise<{
-        errors: string[];
-    }>;
-    buildAsync(model: BrandPageModel): Promise<BuilderResult>;
-}