@designcrowd/library.brand-page 6.1.14 → 6.1.16

package/lib/src/shared/content-settings/components/content-settings/ContentSettings.mixin.d.ts

@@ -637,6 +637,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     }>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/shared/content-settings/components/content-settings/ReplaceImageSettingsForContent.mixin.d.ts

@@ -757,6 +757,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     }>;
     bpEventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItem.mixin.d.ts

@@ -489,6 +489,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/shared/logo-settings/components/EditLogoSettings.mixin.d.ts

@@ -256,6 +256,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     }>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -1277,6 +1277,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 backgroundStyle: {
+                    backgroundOpacity?: number | undefined;
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
                     background?: string | undefined;
@@ -2569,6 +2570,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 backgroundStyle: {
+                    backgroundOpacity?: number | undefined;
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
                     background?: string | undefined;
@@ -4935,6 +4937,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     onDraggingEnd: (ev?: any, routeId?: string, previousParentRouteId?: string) => void;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -1235,6 +1235,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 backgroundStyle: {
+                    backgroundOpacity?: number | undefined;
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
                     background?: string | undefined;
@@ -2527,6 +2528,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 backgroundStyle: {
+                    backgroundOpacity?: number | undefined;
                     aspectRatio?: string | undefined;
                     backgroundAttachment?: string | undefined;
                     background?: string | undefined;
@@ -4638,6 +4640,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     logoSliderMax(): number;
     backgroundColor(): string;
     isBackgroundColorEnabled(): boolean;
+    backgroundOpacity(): number;
+    showBackgroundOpacity(): boolean;
     copyrightPlaceholder(): string;
     copyrightText: {
         get(): string;
@@ -4689,6 +4693,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         logoImageBase64Url?: string;
     }): void;
     onSelectColor(selectedColor: UpdateItemValuePayload<string>): void;
+    onBackgroundOpacityChange(value: number | string): void;
     onBackgroundEnable(enabled: UpdateItemValuePayload<boolean>): void;
     onLogoVisibleChanged(showLogo: boolean): void;
     onLogoVariationSelected(selectedLogoVariationIndex: number): void;

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.js

@@ -3,6 +3,7 @@ import { PAGE_SECTION_STYLE_OPTIONS } from '@brand-page-maker/models/page-sectio
 import { PAGE_SECTIONS } from '../../models';
 import { LOGO_SLIDER_DESKTOP_MAX, LOGO_SLIDER_DESKTOP_MIN, LOGO_SLIDER_MOBILE_MAX, LOGO_SLIDER_MOBILE_MIN, VIEWPORTS, getNavigationType, NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE, } from '@brand-page';
 import { UI_DEVICE_MODES, UI_EVENT_SOURCES } from '../../../models';
+import { isTransparentColour } from '@brand-page/utils/color.util';
 import { useUiPageSettingsStore } from '../../store';
 import { useUiNavigationStyleSettingsStore } from '../../../navigation-style-settings/store';
 import { useUiStyleSettingsStore } from '../../../style-settings/store';
@@ -141,6 +142,15 @@ export default defineComponent({
             return this.sections[this.sectionName][this.viewport]
                 .backgroundColorEnabled;
         },
+        backgroundOpacity() {
+            // Real default: an un-constructed (JSON.parse'd) header never saw the constructor's default.
+            return (this.sections[this.sectionName][this.viewport].backgroundStyle
+                ?.backgroundOpacity ?? 100);
+        },
+        showBackgroundOpacity() {
+            // isTransparentColour('') is false, so an unset color needs its own check.
+            return (!!this.backgroundColor && !isTransparentColour(this.backgroundColor));
+        },
         copyrightPlaceholder() {
             return commonTr(`copyrightTextPlaceholder`);
         },
@@ -394,6 +404,21 @@ export default defineComponent({
                 viewport: this.viewport,
             });
         },
+        onBackgroundOpacityChange(value) {
+            // Clamped here: the Slider's text field can emit an out-of-range value mid-typing.
+            const clamped = Math.min(100, Math.max(0, Number(value) || 0));
+            // A variable, not an inline literal — backgroundOpacity isn't on BrandPageCssStyle.
+            const backgroundStyle = {
+                backgroundOpacity: clamped,
+            };
+            this.pageSettingsStore.setPageSettingsSectionValue({
+                sectionName: this.sectionName,
+                propName: 'backgroundStyle',
+                value: backgroundStyle,
+                merge: true,
+                viewport: this.viewport,
+            });
+        },
         onBackgroundEnable(enabled) {
             this.pageSettingsStore.setPageSettingsSectionValue({
                 sectionName: this.sectionName,

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts

@@ -607,6 +607,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/shared/side-bar/components/SideBarTabButton.mixin.d.ts

@@ -17,6 +17,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isDesignCom: import("vue").ComputedRef<boolean>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -948,6 +948,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     }>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/shared/template-settings/components/TemplatesSettings.mixin.d.ts

@@ -132,6 +132,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isDesignCom: import("vue").ComputedRef<boolean>;
     eventTracker: {
         sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
         sendUndoEvent: (props: {
             entries_count: number;
             actor: string | undefined;

package/lib/src/tracker.d.ts

@@ -1,2 +1,2 @@
-export { useEventTracker, EVENTS, SELECT_LOCATIONS, UPGRADE_CTA_LOCATIONS, AI_CTA_LOCATIONS, TRIGGER_TYPE, PUBLISH_MODAL_CONTINUATION_EVENTS, GENERATE_TEXT_CONTINUATION_EVENTS, PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS, } from './brand-page-maker/composables/useEventTracker';
+export { useEventTracker, EVENTS, SELECT_LOCATIONS, UPGRADE_CTA_LOCATIONS, AI_CTA_LOCATIONS, TRIGGER_TYPE, PUBLISH_MODAL_CONTINUATION_EVENTS, GENERATE_TEXT_CONTINUATION_EVENTS, PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS, PREVIEW_CTA_LOCATIONS, PREVIEW_MODAL_CONTINUATION_EVENTS, } from './brand-page-maker/composables/useEventTracker';
 export type { EventTracker, BpEventTrackerEvent, BpGlobalEventProps, BpUpsellEventProps, } from './brand-page-maker/composables/useEventTracker';

package/lib/src/tracker.js

@@ -9,4 +9,4 @@
 // entry and the root `.` entry, or subscribers registered here won't receive
 // events published via the root. The multi-entry build hoists it into a shared
 // chunk (both `index` and `tracker` import it) — verified at build time.
-export { useEventTracker, EVENTS, SELECT_LOCATIONS, UPGRADE_CTA_LOCATIONS, AI_CTA_LOCATIONS, TRIGGER_TYPE, PUBLISH_MODAL_CONTINUATION_EVENTS, GENERATE_TEXT_CONTINUATION_EVENTS, PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS, } from './brand-page-maker/composables/useEventTracker';
+export { useEventTracker, EVENTS, SELECT_LOCATIONS, UPGRADE_CTA_LOCATIONS, AI_CTA_LOCATIONS, TRIGGER_TYPE, PUBLISH_MODAL_CONTINUATION_EVENTS, GENERATE_TEXT_CONTINUATION_EVENTS, PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS, PREVIEW_CTA_LOCATIONS, PREVIEW_MODAL_CONTINUATION_EVENTS, } from './brand-page-maker/composables/useEventTracker';

package/lib/src/tracker.mjs

@@ -1,12 +1,14 @@
-import { A as N, E as O, G as _, P as A, a as I, S as a, T as S, U as s, u as C } from "./useEventTracker-Dmc2jFdN.js";
+import { A as N, E as O, G as _, P as I, a as A, b as a, c as S, S as s, T as C, U as L, u as P } from "./useEventTracker-C5Ql5p7u.js";
 export {
   N as AI_CTA_LOCATIONS,
   O as EVENTS,
   _ as GENERATE_TEXT_CONTINUATION_EVENTS,
-  A as PUBLISH_MODAL_CONTINUATION_EVENTS,
-  I as PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS,
-  a as SELECT_LOCATIONS,
-  S as TRIGGER_TYPE,
-  s as UPGRADE_CTA_LOCATIONS,
-  C as useEventTracker
+  I as PREVIEW_CTA_LOCATIONS,
+  A as PREVIEW_MODAL_CONTINUATION_EVENTS,
+  a as PUBLISH_MODAL_CONTINUATION_EVENTS,
+  S as PUBLISH_OPTION_MODAL_CONTINUATION_EVENTS,
+  s as SELECT_LOCATIONS,
+  C as TRIGGER_TYPE,
+  L as UPGRADE_CTA_LOCATIONS,
+  P as useEventTracker
 };

package/lib/src/{useEventTracker-Dmc2jFdN.js → useEventTracker-C5Ql5p7u.js}

@@ -38,11 +38,23 @@ const E = {
   WEBSITE_MAKER_UNDO: "website_maker_undo",
   WEBSITE_MAKER_REDO: "website_maker_redo",
   WEBSITE_MAKER_HISTORY_CAPPED: "website_maker_history_capped",
-  WEBSITE_MAKER_HISTORY_OVERSIZED: "website_maker_history_oversized"
-}, R = {
+  WEBSITE_MAKER_HISTORY_OVERSIZED: "website_maker_history_oversized",
+  WEBSITE_MAKER_LIVE_PREVIEW_CLICK: "website_maker_live_preview_click",
+  WEBSITE_MAKER_LIVE_PREVIEW_MODAL: "website_maker_live_preview_modal"
+}, r = {
+  MAKER: "maker",
+  MANAGE_WEBSITE: "manage_website"
+}, p = {
+  EXIT: "exit",
+  // The same button reads "Back to Editor" on the editor and "Edit" on other
+  // surfaces — the continuation mirrors the label the user actually clicked.
+  BACK_TO_EDITOR: "back_to_editor",
+  EDIT: "edit",
+  PUBLISH: "publish"
+}, O = {
   MAKER_PREVIEW: "maker_preview",
   SIDEBAR: "sidebar"
-}, p = {
+}, M = {
   MANAGE_WEBSITE: "manage_website",
   MANAGE_WEBSITE_PUBLISH: "manage_website_publish",
   MANAGE_WEBSITE_UPGRADE: "manage_website_upgrade",
@@ -61,14 +73,14 @@ const E = {
   SAVE_CONTACT_SETTINGS: "save_contact_settings",
   NAV_TOP: "nav_top",
   NAV_BOTTOM: "nav_bottom"
-}, O = {
+}, d = {
   AI_BUILDER_TAB: "ai_builder_tab",
   AI_BUILDER_CHAT_UPSELL: "ai_builder_chat_upsell"
 }, S = {
   AUTOMATIC: "automatic",
   USER_TRIGGERED: "user_triggered",
   AI_BUILDER: "ai_builder"
-}, d = {
+}, P = {
   PUBLISH: "publish",
   EXIT: "exit",
   BUY_A_DOMAIN: "buy_a_domain",
@@ -76,14 +88,14 @@ const E = {
   COPY_LINK: "copy_link",
   VIEW_WEBSITE: "view_website",
   USE_EXISTING_DOMAIN: "use_existing_domain"
-}, M = {
+}, L = {
   USE_TEXT: "use_text",
   EXIT: "exit"
-}, T = {
+}, i = {
   PREMIUM: "premium",
   EXIT: "exit",
   FREEMIUM: "freemium"
-}, i = I(), n = I({
+}, T = I(), n = I({
   upsellOpenEventProps: {},
   domainUpsellOpenEventProps: {},
   publishOpenEventProps: {}
@@ -93,12 +105,12 @@ const E = {
       scope: t,
       eventName: o,
       eventProps: {
-        ...e ? {} : i.value,
+        ...e ? {} : T.value,
         ...A
       }
     });
   });
-}, P = () => ({
+}, B = () => ({
   sendExperimentStartedEvent: (e, t) => {
     _(
       E.EXPERIMENT_STARTED,
@@ -116,10 +128,10 @@ const E = {
       location: "post_purchase",
       domain_type: "Free"
     };
-    i.value = { ...t, ...e };
+    T.value = { ...t, ...e };
   },
   setCustomGlobalEventProps: (e) => {
-    i.value = e;
+    T.value = e;
   },
   setUpsellBridgeState: (e) => {
     n.value.upsellOpenEventProps = e;
@@ -206,17 +218,17 @@ const E = {
   },
   sendPublishOptionsForFreeEvent: () => {
     _(E.WEBSITE_MAKER_PUBLISH_UPSELL_OPTION_MODAL, {
-      upsell_option_continuation: T.FREEMIUM
+      upsell_option_continuation: i.FREEMIUM
     });
   },
   sendPublishOptionsForPremiumEvent: () => {
     _(E.WEBSITE_MAKER_PUBLISH_UPSELL_OPTION_MODAL, {
-      upsell_option_continuation: T.PREMIUM
+      upsell_option_continuation: i.PREMIUM
     });
   },
   sendPublishOptionsForExitEvent: () => {
     _(E.WEBSITE_MAKER_PUBLISH_UPSELL_OPTION_MODAL, {
-      upsell_option_continuation: T.EXIT
+      upsell_option_continuation: i.EXIT
     });
   },
   // Template sidebar events
@@ -330,6 +342,26 @@ const E = {
       is_enabled: e
     });
   },
+  // Live preview: the click is tracked separately from the modal opening —
+  // sign-in/save gating means a click doesn't always open the modal, and the
+  // post-sign-in return trip opens it without a click.
+  sendPreviewClickEvent: (e) => {
+    _(E.WEBSITE_MAKER_LIVE_PREVIEW_CLICK, {
+      cta_location: e
+    });
+  },
+  sendPreviewModalOpenEvent: (e) => {
+    _(E.WEBSITE_MAKER_LIVE_PREVIEW_MODAL, {
+      cta_location: e,
+      continuation: null
+    });
+  },
+  sendPreviewModalContinuationEvent: (e, t) => {
+    _(E.WEBSITE_MAKER_LIVE_PREVIEW_MODAL, {
+      cta_location: t,
+      continuation: e
+    });
+  },
   // Undo / Redo (BP-5506)
   sendUndoEvent: (e) => {
     _(E.WEBSITE_MAKER_UNDO, e);
@@ -345,13 +377,15 @@ const E = {
   }
 });
 export {
-  O as A,
+  d as A,
   E,
-  M as G,
-  d as P,
-  R as S,
+  L as G,
+  r as P,
+  O as S,
   S as T,
-  p as U,
-  T as a,
-  P as u
+  M as U,
+  p as a,
+  P as b,
+  i as c,
+  B as u
 };

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

@@ -24,6 +24,7 @@ type MinifiedHeader = {
     logoAssetKey?: string;
     backgroundStyle?: {
         backgroundColor?: string;
+        backgroundOpacity?: number;
     };
     navigation?: {
         displayType?: string;

package/lib/src/utils/minify-brand-page-metadata.js

@@ -389,6 +389,18 @@ const minifyFooter = (footer, logoAssetKey) => {
             : undefined,
     };
 };
+// Fully opaque (100) is the default, so it's omitted to keep the AI payload small.
+const minifyHeaderBackgroundStyle = (backgroundStyle) => {
+    const backgroundColor = backgroundStyle?.backgroundColor;
+    if (!backgroundColor)
+        return undefined;
+    const backgroundOpacity = backgroundStyle.backgroundOpacity;
+    return {
+        backgroundColor,
+        ...(backgroundOpacity !== undefined &&
+            backgroundOpacity < 100 && { backgroundOpacity }),
+    };
+};
 const minifyHeader = (header, logoAssetKey) => {
     if (!header)
         return undefined;
@@ -399,9 +411,7 @@ const minifyHeader = (header, logoAssetKey) => {
         logoImageHeight: header.logoImageHeight || undefined,
         logoImageWidth: header.logoImageWidth || undefined,
         ...(logoAssetKey && { logoAssetKey }),
-        backgroundStyle: header.backgroundStyle?.backgroundColor
-            ? { backgroundColor: header.backgroundStyle.backgroundColor }
-            : undefined,
+        backgroundStyle: minifyHeaderBackgroundStyle(header.backgroundStyle),
         navigation: nav
             ? {
                 displayType: nav.displayType || undefined,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.1.14",
+  "version": "6.1.16",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/models/index.ts

@@ -90,6 +90,10 @@ export type BackgroundStyle = Partial<
   Omit<BrandPageCssStyle, 'backgroundColor'>
 >;
 
+export interface BackgroundColorStyle extends BrandPageCssStyle {
+  backgroundOpacity?: number;
+}
+
 /**
  * The complete default for a page's background media overlay. Seeded into
  * metadata (constructor for new models, migration-20.5 for persisted partials) so
@@ -734,7 +738,7 @@ export abstract class AbstractPageHeaderStyles {
   logoImage: LogoImageModel;
   logoTemplateImage: LogoTemplateImageModel | undefined;
   logoImageBase64Url?: string;
-  backgroundStyle: BrandPageCssStyle;
+  backgroundStyle: BackgroundColorStyle;
   style: BrandPageCssStyle;
   viewport: ViewportsType;
 
@@ -771,7 +775,10 @@ export abstract class AbstractPageHeaderStyles {
     this.logoVariation = options.logoVariation || 0;
 
     this.style = options.style || {};
-    this.backgroundStyle = options.backgroundStyle || {};
+    this.backgroundStyle = {
+      ...(options.backgroundStyle || {}),
+      backgroundOpacity: options.backgroundStyle?.backgroundOpacity ?? 100,
+    };
   }
 }
 

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -152,7 +152,9 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
       "viewport": "mobile",
     },
     "pageHeaderDesktop": PageHeaderDesktop {
-      "backgroundStyle": {},
+      "backgroundStyle": {
+        "backgroundOpacity": 100,
+      },
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -225,7 +227,9 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
       "viewport": "desktop",
     },
     "pageHeaderMobile": PageHeaderMobile {
-      "backgroundStyle": {},
+      "backgroundStyle": {
+        "backgroundOpacity": 100,
+      },
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -645,7 +649,9 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "viewport": "mobile",
     },
     "pageHeaderDesktop": PageHeaderDesktop {
-      "backgroundStyle": {},
+      "backgroundStyle": {
+        "backgroundOpacity": 100,
+      },
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -718,7 +724,9 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "viewport": "desktop",
     },
     "pageHeaderMobile": PageHeaderMobile {
-      "backgroundStyle": {},
+      "backgroundStyle": {
+        "backgroundOpacity": 100,
+      },
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -1122,7 +1130,9 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "viewport": "mobile",
     },
     "pageHeaderDesktop": PageHeaderDesktop {
-      "backgroundStyle": {},
+      "backgroundStyle": {
+        "backgroundOpacity": 100,
+      },
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -1195,7 +1205,9 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "viewport": "desktop",
     },
     "pageHeaderMobile": PageHeaderMobile {
-      "backgroundStyle": {},
+      "backgroundStyle": {
+        "backgroundOpacity": 100,
+      },
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -137,7 +137,9 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
       "viewport": "mobile",
     },
     "pageHeaderDesktop": PageHeaderDesktop {
-      "backgroundStyle": {},
+      "backgroundStyle": {
+        "backgroundOpacity": 100,
+      },
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,
@@ -211,7 +213,9 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
       "viewport": "desktop",
     },
     "pageHeaderMobile": PageHeaderMobile {
-      "backgroundStyle": {},
+      "backgroundStyle": {
+        "backgroundOpacity": 100,
+      },
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
       "isLogoVisible": true,

package/src/brand-page/utils/__snapshots__/model.util.test.ts.snap

@@ -136,7 +136,9 @@ BrandPageModel {
     "viewport": "mobile",
   },
   "pageHeaderDesktop": PageHeaderDesktop {
-    "backgroundStyle": {},
+    "backgroundStyle": {
+      "backgroundOpacity": 100,
+    },
     "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
     "isLogoOptional": false,
     "isLogoVisible": true,
@@ -210,7 +212,9 @@ BrandPageModel {
     "viewport": "desktop",
   },
   "pageHeaderMobile": PageHeaderMobile {
-    "backgroundStyle": {},
+    "backgroundStyle": {
+      "backgroundOpacity": 100,
+    },
     "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
     "isLogoOptional": false,
     "isLogoVisible": true,
@@ -593,7 +597,9 @@ BrandPageModel {
     "viewport": "mobile",
   },
   "pageHeaderDesktop": PageHeaderDesktop {
-    "backgroundStyle": {},
+    "backgroundStyle": {
+      "backgroundOpacity": 100,
+    },
     "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
     "isLogoOptional": false,
     "isLogoVisible": true,
@@ -667,7 +673,9 @@ BrandPageModel {
     "viewport": "desktop",
   },
   "pageHeaderMobile": PageHeaderMobile {
-    "backgroundStyle": {},
+    "backgroundStyle": {
+      "backgroundOpacity": 100,
+    },
     "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
     "isLogoOptional": false,
     "isLogoVisible": true,