@designcrowd/library.brand-page 6.0.21 → 6.0.23-ast-remove

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/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.ts

@@ -1819,7 +1819,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
       const shopStore = useShopConfigStore();
       const pageNavigationStore = usePageNavigationStore();
-      const uiStore = useUiStore();
 
       const pages = pageSettingsStore.pages.map((p) => ({
         ...p,
@@ -1837,7 +1836,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
 
       return {
         v: GetLatestModelVersion(),
-        userPromptContentKey: uiStore.userPromptContentKey,
         pages,
         styles: {
           logoStyles,

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/src/shared/template-settings/store/template-settings-store.ts

@@ -50,6 +50,7 @@ const POST_PURCHASE_PAGE_SECTION_BY_TAB: Record<string, string> = {
 
 const PRE_PURCHASE_PAGE_SECTION_BY_TAB: Record<string, string> = {
   [TEMPLATE_TABS.all]: 'MakerPrePurchaseSidebarTemplatesAllTab',
+  [TEMPLATE_TABS.AI]: 'MakerPrePurchaseSidebarTemplatesAiTab',
   [TEMPLATE_TABS.categories]: 'MakerPrePurchaseSidebarTemplatesCategoryTab',
 };
 const LOAD_PAGE_RETRY_DELAY = 250;
@@ -421,9 +422,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                   contentKey =
                     uiStore.personalisationData[personalisationContentIndex]
                       .contentKey;
-                } else if (item.isPersonalisable) {
-                  // Pre-purchase has no personalisationData; personalise AI
-                  // template previews with the prompt content key (bp-5742).
+                } else if (item.isPersonalisable && !this.searchTerm) {
                   contentKey = uiStore.userPromptContentKey;
                 }
 
@@ -435,7 +434,8 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                   // in the userPrompt bucket (post- or pre-purchase). The preview must
                   // then resolve via userPromptContentKey, not the regular bucket which
                   // holds placeholders post-purchase (bp-5454).
-                  usesUserPromptContentKey: !!uiStore.userPromptContentKey,
+                  usesUserPromptContentKey:
+                    !!uiStore.userPromptContentKey && !this.searchTerm,
                   previewImageUrl: item.previewImageUrl,
                 } as TemplateSettingsTemplate;
               }
@@ -529,6 +529,8 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
         searchTerm: payload.searchTerm,
       });
 
+      this.aiTemplateKeywords = payload.searchTerm ?? '';
+
       this.onSearchTermChanged?.(payload.searchTerm);
 
       await this._setPageNo({ pageNo: 1 });

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>;
-}

package/lib/src/metadata-builder/builders/reorder-pages-builder.js

@@ -1,49 +0,0 @@
-import { BaseMetadataBuilder, } from '../models';
-export class ReorderPagesBuilder extends BaseMetadataBuilder {
-    constructor(request, logger) {
-        super(request, logger);
-    }
-    async validateAsync() {
-        const errors = [];
-        const payload = this.request.payload;
-        if (!payload?.pageOrder?.length) {
-            errors.push('page_order is required for reorder_pages');
-        }
-        return { errors };
-    }
-    async buildAsync(model) {
-        this.log('Build called');
-        const validation = await this.validateAsync();
-        if (validation.errors.length) {
-            return { request: this.request, model, errors: validation.errors };
-        }
-        const { pageOrder } = this.request.payload;
-        // Build pageId → routeId lookup from nav.routes
-        const pageIdToRouteId = new Map();
-        for (const route of model.nav.routes) {
-            pageIdToRouteId.set(route.pageId, route.id);
-        }
-        // Build new nav.orders from the flat page_order (array of pageIds)
-        const newOrders = [];
-        const seenRouteIds = new Set();
-        for (const pageId of pageOrder) {
-            const routeId = pageIdToRouteId.get(pageId);
-            if (!routeId)
-                continue;
-            newOrders.push({ routeId, subRoutes: [] });
-            seenRouteIds.add(routeId);
-        }
-        // Safety: append any routes not mentioned (don't lose pages)
-        for (const route of model.nav.routes) {
-            const routeId = pageIdToRouteId.get(route.pageId);
-            if (routeId && !seenRouteIds.has(routeId)) {
-                newOrders.push({ routeId, subRoutes: [] });
-            }
-        }
-        model.nav.orders = newOrders;
-        this.log({
-            message: `Reordered pages: ${pageOrder.join(', ')}`,
-        });
-        return { request: this.request, model };
-    }
-}

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

@@ -1,80 +0,0 @@
-import type { BrandPageModel, NavOrder } from '../../brand-page/models';
-import {
-  BaseMetadataBuilder,
-  type BuilderResult,
-  type MetadataBuilderRequest,
-} from '../models';
-import type { Logger } from '../logger';
-
-export interface ReorderPagesPayload {
-  pageOrder: string[];
-}
-
-export class ReorderPagesBuilder extends BaseMetadataBuilder<ReorderPagesPayload> {
-  constructor(
-    request: MetadataBuilderRequest<ReorderPagesPayload>,
-    logger?: Logger,
-  ) {
-    super(request, logger);
-  }
-
-  async validateAsync(): Promise<{ errors: string[] }> {
-    const errors: string[] = [];
-    const payload = this.request.payload;
-
-    if (!payload?.pageOrder?.length) {
-      errors.push('page_order is required for reorder_pages');
-    }
-
-    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 { pageOrder } = this.request.payload!;
-
-    // Build pageId → routeId lookup from nav.routes
-    const pageIdToRouteId = new Map<string, string>();
-
-    for (const route of model.nav.routes) {
-      pageIdToRouteId.set(route.pageId, route.id);
-    }
-
-    // Build new nav.orders from the flat page_order (array of pageIds)
-    const newOrders: NavOrder[] = [];
-    const seenRouteIds = new Set<string>();
-
-    for (const pageId of pageOrder) {
-      const routeId = pageIdToRouteId.get(pageId);
-
-      if (!routeId) continue;
-
-      newOrders.push({ routeId, subRoutes: [] });
-      seenRouteIds.add(routeId);
-    }
-
-    // Safety: append any routes not mentioned (don't lose pages)
-    for (const route of model.nav.routes) {
-      const routeId = pageIdToRouteId.get(route.pageId);
-
-      if (routeId && !seenRouteIds.has(routeId)) {
-        newOrders.push({ routeId, subRoutes: [] });
-      }
-    }
-
-    model.nav.orders = newOrders;
-
-    this.log({
-      message: `Reordered pages: ${pageOrder.join(', ')}`,
-    });
-
-    return { request: this.request, model };
-  }
-}