@designcrowd/library.brand-page 5.18.4 → 5.18.5

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

@@ -0,0 +1,319 @@
+import { describe, test, expect } from 'vitest';
+import { migration16 } from './migration-16';
+import type { MigrationData, MigrationOptions } from '../migration.util';
+import { STYLE_THEME_KEYS, NAVIGATION_DISPLAY } from '../../constants';
+import { NavigationDesktop } from '../../models';
+
+const createMigrationData = (brandPageModel: any): MigrationData => ({
+  brandPageModel,
+  useOldLogoRenderSize: false,
+});
+
+// The sub nav default is applied when content is first materialised — a template
+// load, the create-draft flow, or the admin maker (isUserDraft === false). An
+// existing user draft already carries its resolved value, so it is skipped.
+const APPLY_DEFAULTS: MigrationOptions = {
+  isUserDraft: false,
+  isServerRender: false,
+};
+const EXISTING_DRAFT_SKIP: MigrationOptions = {
+  isUserDraft: true,
+  isServerRender: false,
+};
+
+const desktopNav = (displayType: string, overrides: any = {}) => ({
+  pageHeaderDesktop: {
+    navigation: {
+      displayType,
+      defaultButtonStyle: {},
+      hamburgerMenuStyle: { defaultButtonStyle: {} },
+      ...overrides,
+    },
+  },
+});
+
+describe('migration16', () => {
+  test('sets color matched sub nav bg for TAB_2 using the top-level styles', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.TAB_2, {
+      defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.subNavBackgroundColor,
+    ).toBe(STYLE_THEME_KEYS.LogoBackgroundColor);
+  });
+
+  test('sets color matched sub nav bg on hamburgerMenuStyle when unset (vice versa: logo bg text -> logo text sub nav)', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_1, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoBackgroundColor },
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    const nav = result.brandPageModel.pageHeaderDesktop.navigation;
+
+    expect(nav.hamburgerMenuStyle.subNavBackgroundColor).toBe(
+      STYLE_THEME_KEYS.LogoTextColor,
+    );
+    // top-level value untouched for hamburger
+    expect(nav.subNavBackgroundColor).toBeUndefined();
+  });
+
+  test('preserves an explicit hex hamburger sub nav even when the text is color matched (admin choice)', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_1, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+        subNavBackgroundColor: 'rgb(10,20,30)',
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBe('rgb(10,20,30)');
+  });
+
+  test('color matches an empty-string hamburger sub nav when the text is color matched', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_1, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+        subNavBackgroundColor: '',
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBe(STYLE_THEME_KEYS.LogoBackgroundColor);
+  });
+
+  test('color matches a transparent hamburger sub nav when the text is color matched', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_1, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+        subNavBackgroundColor: 'transparent',
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBe(STYLE_THEME_KEYS.LogoBackgroundColor);
+  });
+
+  test('leaves an empty hamburger sub nav untouched when text color is not color matched', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_1, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: 'rgb(50,50,50)' },
+        subNavBackgroundColor: '',
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBe('');
+  });
+
+  test('leaves hamburger sub nav unset when default text color is not color matched', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_2, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: 'rgb(50,50,50)' },
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBeUndefined();
+  });
+
+  test('keeps an already color matched value', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_1, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+        subNavBackgroundColor: STYLE_THEME_KEYS.LogoBackgroundColor,
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBe(STYLE_THEME_KEYS.LogoBackgroundColor);
+  });
+
+  test('applies to all display types: TAB_1 color matches when unset', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.TAB_1, {
+      defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.subNavBackgroundColor,
+    ).toBe(STYLE_THEME_KEYS.LogoBackgroundColor);
+  });
+
+  test('existing user draft is left untouched, even when the font is matched and the sub nav is unset', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_1, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      EXISTING_DRAFT_SKIP,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBeUndefined();
+  });
+
+  test('existing user draft keeps a deliberate transparent sub nav (not re-matched on load)', async () => {
+    const model = desktopNav(NAVIGATION_DISPLAY.HAMBURGER_1, {
+      hamburgerMenuStyle: {
+        defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+        subNavBackgroundColor: 'transparent',
+      },
+    });
+
+    const result = await migration16(
+      createMigrationData(model),
+      EXISTING_DRAFT_SKIP,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBe('transparent');
+  });
+
+  test('migrates mobile navigation as well', async () => {
+    const model = {
+      pageHeaderMobile: {
+        navigation: {
+          displayType: NAVIGATION_DISPLAY.HAMBURGER_3,
+          hamburgerMenuStyle: {
+            defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+          },
+        },
+      },
+    };
+
+    const result = await migration16(
+      createMigrationData(model),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderMobile.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBe(STYLE_THEME_KEYS.LogoBackgroundColor);
+  });
+
+  test('handles missing navigation gracefully', async () => {
+    const result = await migration16(createMigrationData({}), APPLY_DEFAULTS);
+
+    expect(result.brandPageModel).toEqual({});
+  });
+
+  // Materialisation path (create-draft / server render): NavigationDesktop is
+  // constructed WITH a theme. The constructor must leave the sub nav unset, else the
+  // baked hex would defeat the migration when the default is applied.
+  const theme = {
+    primaryColor: 'rgb(0,0,0)',
+    secondaryColor: 'rgb(255,255,255)',
+  };
+
+  test('materialised hamburger content (colour-matched font, theme passed) colour-matches the sub nav', async () => {
+    const navigation = new NavigationDesktop(
+      {
+        displayType: NAVIGATION_DISPLAY.HAMBURGER_1,
+        hamburgerMenuStyle: {
+          defaultButtonStyle: { color: STYLE_THEME_KEYS.LogoTextColor },
+        },
+      },
+      theme,
+    );
+
+    expect(navigation.hamburgerMenuStyle.subNavBackgroundColor).toBeUndefined();
+
+    const result = await migration16(
+      createMigrationData({ pageHeaderDesktop: { navigation } }),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBe(STYLE_THEME_KEYS.LogoBackgroundColor);
+  });
+
+  test('leaves the sub nav untoggled when the default text color is not colour matched', async () => {
+    const navigation = new NavigationDesktop(
+      {
+        displayType: NAVIGATION_DISPLAY.HAMBURGER_1,
+        hamburgerMenuStyle: {
+          defaultButtonStyle: { color: 'rgb(50,50,50)' },
+        },
+      },
+      theme,
+    );
+
+    const result = await migration16(
+      createMigrationData({ pageHeaderDesktop: { navigation } }),
+      APPLY_DEFAULTS,
+    );
+
+    expect(
+      result.brandPageModel.pageHeaderDesktop.navigation.hamburgerMenuStyle
+        .subNavBackgroundColor,
+    ).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,75 @@
+import type { MigrationData, MigrationOptions } from '../migration.util';
+import {
+  getDefaultSubNavBackgroundColor,
+  isUnsetOrTransparentColor,
+} from '../../models';
+import type {
+  NavigationDesktop,
+  NavigationMobile,
+  NavigationMenuStyles,
+} from '../../models';
+
+/**
+ * Migration 16: default the sub nav background colour to "colour matched" (the opposite
+ * logo colour) when the menu font is itself colour matched and the sub nav has no
+ * deliberate value. The default is applied ONCE, when content is first materialised — a
+ * template load, the create-draft flow, or the admin maker (isUserDraft === false). An
+ * existing user draft already carries its resolved value (including a deliberate
+ * transparent/explicit choice), so it is left untouched.
+ */
+
+// Hamburger keeps its styles on hamburgerMenuStyle; every other nav type uses the
+// top-level navigation styles. (This only locates the styles - the rule itself is uniform.)
+const isHamburger = (displayType: string): boolean =>
+  displayType.includes('hamburger');
+
+const applyDefaultSubNavColorMatch = (
+  navigation: NavigationDesktop | NavigationMobile | undefined,
+): void => {
+  if (!navigation?.displayType) {
+    return;
+  }
+
+  let menuStyles: NavigationMenuStyles | NavigationDesktop | NavigationMobile;
+
+  if (isHamburger(navigation.displayType)) {
+    navigation.hamburgerMenuStyle =
+      navigation.hamburgerMenuStyle ?? ({} as NavigationMenuStyles);
+    menuStyles = navigation.hamburgerMenuStyle;
+  } else {
+    menuStyles = navigation;
+  }
+
+  // Leave a deliberately-set colour (an explicit hex or an already colour-matched key).
+  if (!isUnsetOrTransparentColor(menuStyles.subNavBackgroundColor)) {
+    return;
+  }
+
+  // Only when the menu font is itself colour matched: take the opposite logo colour
+  // (the helper returns undefined when the font is not colour matched).
+  const colorMatchedSubNav = getDefaultSubNavBackgroundColor(
+    menuStyles.defaultButtonStyle?.color,
+  );
+
+  if (colorMatchedSubNav) {
+    menuStyles.subNavBackgroundColor = colorMatchedSubNav;
+  }
+};
+
+export const migration16 = async (
+  migrationResult: MigrationData,
+  options: MigrationOptions,
+): Promise<MigrationData> => {
+  // Skip user drafts (isUserDraft === true) — they already have their value. Only
+  // templates (isUserDraft === false) get the sub nav default.
+  if (options.isUserDraft) {
+    return migrationResult;
+  }
+
+  const { brandPageModel } = migrationResult;
+
+  applyDefaultSubNavColorMatch(brandPageModel.pageHeaderDesktop?.navigation);
+  applyDefaultSubNavColorMatch(brandPageModel.pageHeaderMobile?.navigation);
+
+  return migrationResult;
+};

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

@@ -18,6 +18,7 @@ import { migration12_1 } from './migration/migration-12_1';
 import { migration13 } from './migration/migration-13';
 import { migration14 } from './migration/migration-14';
 import { migration15 } from './migration/migration-15';
+import { migration16 } from './migration/migration-16';
 
 export interface MigrationData {
   brandPageModel: BrandPageModel;
@@ -141,6 +142,13 @@ const MIGRATION_TABLE = [
     migrateFn: migration15,
     description: 'Adding default mediaOverlayStyle to background styles',
   },
+  {
+    version: 16,
+    migrateFn: migration16,
+    runAlways: true,
+    description:
+      'Default sub nav background color to color match on for TAB_2 and hamburger navs depending on font color only on first load flow',
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.ts

@@ -35,6 +35,8 @@ import {
   useSnapshotStore,
   useVideoStore,
 } from '@brand-page-maker/stores';
+import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
+import { useUndoRedoFlag } from '@brand-page-maker/composables/useUndoRedoFlag';
 import type { AdminPreviewLogoTemplateModel } from '@brand-page-maker/stores/admin-logo-settings';
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
@@ -283,6 +285,13 @@ export default defineComponent({
     // Mark brand page as fully loaded
     this.brandPageMakerStore.setIsBrandPageLoaded(true);
 
+    // Capture baseline for undo/redo when the feature is active for this
+    // session — see useUndoRedoFlag.ts for the gate (LaunchDarkly flag +
+    // brand-site + non-admin maker).
+    if (useUndoRedoFlag().value) {
+      useHistoryStore().captureBaseline();
+    }
+
     this.$emit(EVENTS.Initialised);
   },
   mounted() {

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.vue

@@ -23,7 +23,6 @@
     >
       <div class="tw-flex tw-flex-col tw-w-full tw-h-full">
         <QuickLinkBar
-          v-if="isPublished && !isAdmin"
           class="c-quick-link-bar"
           :brand-page-base-url="brandPageBaseUrl"
           :slug="brandPageSlug"
@@ -87,8 +86,8 @@
             v-if="isBrandPageLoaded"
             :is-mobile-device="isMobileDevice"
             :is-design-com="isDesignCom"
-            :has-quick-links="isPublished"
             :container="previewContainer"
+            :has-quick-links="isPublished"
           >
             <div ref="previewContent" class="tw-h-full">
               <PreviewWithState :device-mode="deviceMode" />
@@ -123,9 +122,9 @@
       </div>
 
       <SideBar
-        :has-quick-links="isPublished"
         :mobile-tab-name="SideBarTabNames.PREVIEW"
         :is-mobile-screen-size="isMobileScreenSize"
+        :has-quick-links="isPublished"
       >
         <template #tab>
           <component

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.ts

@@ -90,6 +90,7 @@ export const userFeatures: UserFeatures = {
   canUseGettyVideos: false,
   canUseGoogleAdsense: false,
   googleAdsenseEnabled: false,
+  canUseUndoRedo: false,
 };
 
 export const BRAND_PAGE: BrandPageData = {

package/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.ts

@@ -36,6 +36,7 @@ import {
 import { useExternalRichTextEditor } from '@brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import { useUiStyleSettingsStore } from '@shared/style-settings/store';
 import { STYLE_THEME_KEYS } from '@brand-page/constants';
+import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 
 export default defineComponent({
   mixins: [PageMixin],
@@ -51,6 +52,7 @@ export default defineComponent({
     const eventTracker = useEventTracker();
     const { externalEditor } = useExternalRichTextEditor();
     const styleSettingsStore = useUiStyleSettingsStore();
+    const historyStore = useHistoryStore();
 
     return {
       items: computed(() => contentSettingsStore.items),
@@ -84,6 +86,7 @@ export default defineComponent({
       eventTracker,
       externalEditor,
       styleSettingsStore,
+      historyStore,
     };
   },
   data() {
@@ -301,6 +304,8 @@ export default defineComponent({
           }
         }
 
+        // RTE rewrap on section selection — fold into current head.
+        this.historyStore.mergeNextMutation();
         transformToRTE(
           this.pageSettingsStore,
           this.externalEditor,

package/src/brand-page-maker/components/color-palette/BpColorPalette.vue

@@ -27,8 +27,9 @@
           </div>
           <button
             v-else
-            :style="generateStyle(color)"
+            :style="color === 'transparent' ? undefined : generateStyle(color)"
             class="c-color tw-bg-transparent tw-block tw-w-full tw-h-full tw-border-none tw-rounded tw-cursor-pointer tw-transition-all tw-duration-300 tw-ease-out"
+            :class="{ 'c-transparent': color === 'transparent' }"
             @click="onClick"
           />
         </div>
@@ -197,12 +198,13 @@ const clickOutside = (event: MouseEvent): void => {
   box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
   transform: scale(1.025);
 }
-.c-color {
-  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
-}
-.c-color:hover {
-  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
-  transform: scale(1.025);
+.c-transparent {
+  background: linear-gradient(
+    135deg,
+    transparent calc(50% - 1.5px),
+    red 50%,
+    transparent calc(50% + 1.5px)
+  );
 }
 .maker-color-palette__popup {
   position: absolute;

package/src/brand-page-maker/components/cookie-collection/CookieSettings.vue

@@ -20,14 +20,14 @@
           </div>
           <Toggle
             id="show-cookie-banner"
-            :model-value="data.isToggled"
+            :model-value="isToggled"
             class="tw-pointer-events-none tw-touch-none"
             color="primary"
             @update:model-value="onShowCookieBanner()"
           />
         </div>
       </div>
-      <div v-if="data.isToggled" class="tw-flex-none tw-mt-4">
+      <div v-if="isToggled" class="tw-flex-none tw-mt-4">
         <div
           class="tw-flex tw-items-center tw-justify-between tw-cursor-pointer"
           @click="onShowPreviewCookieBanner"
@@ -41,7 +41,7 @@
           </div>
           <Toggle
             id="show-preview-cookie-banner"
-            :model-value="data.isPreviewToggled"
+            :model-value="isPreviewToggled"
             class="tw-pointer-events-none tw-touch-none"
             color="primary"
             @update:model-value="onShowPreviewCookieBanner()"
@@ -55,10 +55,10 @@
 import { Toggle } from '@designcrowd/fe-shared-lib';
 import { cookieSettingTr } from '@src/composables/useTranslate';
 import type { CookieOptions } from '@brand-page/models';
-import { reactive, type PropType } from 'vue';
+import { computed, type PropType } from 'vue';
 import { useBrandPageMakerStore } from '@brand-page-maker/stores';
 
-const props = defineProps({
+defineProps({
   viewModel: {
     type: Object as PropType<CookieOptions>,
     required: true,
@@ -67,25 +67,26 @@ const props = defineProps({
 
 const brandPageMakerStore = useBrandPageMakerStore();
 
-const data = reactive({
-  isToggled: props.viewModel.isCookieEnabled,
-  isPreviewToggled: props.viewModel.isCookiePreviewEnabled,
-});
+// Read directly from the store so undo/redo (and any other external
+// mutation of cookieOptions) is reflected in the toggles.
+const isToggled = computed(
+  () => brandPageMakerStore.cookieOptions.isCookieEnabled,
+);
+const isPreviewToggled = computed(
+  () => brandPageMakerStore.cookieOptions.isCookiePreviewEnabled,
+);
 
 const onShowCookieBanner = () => {
-  data.isToggled = !data.isToggled;
-  brandPageMakerStore.setCookieEnabled({
-    isCookieEnabled: data.isToggled,
-  });
-  data.isPreviewToggled = data.isToggled;
+  const next = !isToggled.value;
+
+  brandPageMakerStore.setCookieEnabled({ isCookieEnabled: next });
   brandPageMakerStore.setCookiePreviewEnabled({
-    isCookiePreviewEnabled: data.isPreviewToggled,
+    isCookiePreviewEnabled: next,
   });
 };
 const onShowPreviewCookieBanner = () => {
-  data.isPreviewToggled = !data.isPreviewToggled;
   brandPageMakerStore.setCookiePreviewEnabled({
-    isCookiePreviewEnabled: data.isPreviewToggled,
+    isCookiePreviewEnabled: !isPreviewToggled.value,
   });
 };
 </script>

package/src/brand-page-maker/components/quick-link-bar/QuickLinkBar.mixin.ts

@@ -4,6 +4,7 @@ import {
   useBrandPageContainerStore,
   useEventManagerStore,
 } from '@brand-page-maker/stores';
+import { useUndoRedoFlag } from '@brand-page-maker/composables/useUndoRedoFlag';
 import { quickLinkBarTr } from '@src/composables/useTranslate';
 
 export default defineComponent({
@@ -21,6 +22,7 @@ export default defineComponent({
     return {
       brandPageContainerStore: useBrandPageContainerStore(),
       eventManagerStore: useEventManagerStore(),
+      undoRedoEnabled: useUndoRedoFlag(),
     };
   },
   data() {
@@ -29,6 +31,17 @@ export default defineComponent({
     };
   },
   computed: {
+    isPublished(): boolean {
+      return this.brandPageContainerStore.isPublished;
+    },
+
+    // Only render the bar when at least one inner cluster has something to
+    // show. Otherwise we'd render an empty white strip — e.g. on an
+    // unpublished page with the undo flag off.
+    shouldShowBar(): boolean {
+      return Boolean(this.undoRedoEnabled) || this.isPublished;
+    },
+
     brandPageUrl(): string {
       if (
         this.brandPageContainerStore.isCustomDomainEnabled &&