@designcrowd/library.brand-page 6.0.13 → 6.0.14-5804-1

package/package.json

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

package/src/brand-page/components/button/Button.vue

@@ -12,6 +12,7 @@
           class="tw-no-underline"
           :to="{ name: routes.name, params: routes.routeParams }"
           :class="{ 'tw-w-full': isBrushStrokeIcon }"
+          @click="onPageLinkClick"
         >
           <div
             :title="viewModel.title"
@@ -101,6 +102,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { HashRouteModal } from '@designcrowd/fe-shared-lib';
 import { isEmail, isTel, isURL } from '../../../utils/validator.util';
 import type { BrandPageContext } from '@brand-page/models';
@@ -231,6 +233,24 @@ const buttonStateClass = computed(() => ({
   'tw-w-full': isBrushStrokeIcon.value,
 }));
 
+const router = useRouter();
+
+const onPageLinkClick = (): void => {
+  // A page-link pointing to its own page (e.g. a "back to top" button) resolves
+  // to the current route. Vue Router dedupes that as a redundant navigation and
+  // never runs the global guard that scrolls to top, so trigger it explicitly.
+  if (!router) return;
+
+  const target = router.resolve({
+    name: routes.value.name,
+    params: routes.value.routeParams,
+  });
+
+  if (target.fullPath === router.currentRoute.value.fullPath) {
+    window.scrollTo(0, 0);
+  }
+};
+
 const onClick = (): void => {
   if (isModalUrl.value && isModalImageUrlValid.value) {
     isModalVisible.value = true;

package/src/brand-page/components/button/Button.vue.test.ts

@@ -0,0 +1,175 @@
+import { vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createRouter, createMemoryHistory, RouterLink } from 'vue-router';
+import { createPinia, setActivePinia } from 'pinia';
+import Button from './Button.vue';
+import {
+  BRAND_PAGE_TYPES,
+  MEDIA_SIZES,
+  type BrandPageContext,
+} from '@brand-page/models';
+import type {
+  ButtonViewModel,
+  NavItemViewModel,
+} from '@brand-page/view-models';
+
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+const LINKED_PAGE_ID = 'page-2';
+const LINKED_PAGE_PATH = '/my-brand/second-page';
+const OTHER_PAGE_PATH = '/my-brand';
+
+const createTestNavItem = (): NavItemViewModel => ({
+  pageId: LINKED_PAGE_ID,
+  slug: 'my-brand',
+  displayName: 'Second Page',
+  routeName: 'page-route',
+  routeParams: { slug: 'my-brand', pageSlug: 'second-page' },
+  isRoot: false,
+  isHidden: false,
+  relativePath: 'second-page',
+  nestedNavItems: [],
+});
+
+const createTestBrandPageContext = (): BrandPageContext => ({
+  brandPageSlug: 'my-brand',
+  brandPageToken: '',
+  isMobile: false,
+  isPreview: true,
+  isProduction: false,
+  isServerRender: false,
+  options: {
+    mediaSizes: MEDIA_SIZES.sizeThumb,
+  },
+  isTemplate: false,
+  isDesignCom: false,
+  pageTitle: 'My Brand',
+  runtimeEnvironment: '',
+  stripePublishableKey: undefined,
+  customDomain: undefined,
+  brandPageType: BRAND_PAGE_TYPES.brandSite,
+  isBrandPage: false,
+  isBrandPageOrIsBrandContact: false,
+  isBrandSite: true,
+  isBrandContact: false,
+  pages: [],
+  isCapturingPreview: false,
+  recaptchaSiteKey: undefined,
+  nav: {
+    navItems: [createTestNavItem()],
+  },
+});
+
+const textStyle = {
+  fontSize: '1rem',
+  lineHeight: '1.5rem',
+  fontFamily: 'Lato',
+  textAlign: 'center',
+  overflowWrap: 'anywhere',
+  wordBreak: 'normal',
+};
+
+const createTestButtonViewModel = (
+  overrides: Partial<ButtonViewModel> = {},
+): ButtonViewModel =>
+  ({
+    id: 'button-1',
+    type: 'button',
+    role: 'banner-section',
+    title: 'Go to top',
+    url: '',
+    page: LINKED_PAGE_ID,
+    pageSlug: '',
+    buttonLinkType: 'page',
+    clickActionField: 'url',
+    iconUrl: '',
+    modalImageUrl: '',
+    titleStyle: textStyle,
+    styles: { selectedButtonStyleId: 'BUTTON_STYLE_1', style: {} },
+    onClicked: vi.fn(),
+    ...overrides,
+  }) as ButtonViewModel;
+
+const createTestRouter = () =>
+  createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      {
+        path: '/:slug/:pageSlug',
+        name: 'page-route',
+        component: { template: '<div />' },
+      },
+      {
+        path: '/:slug',
+        name: 'home-route',
+        component: { template: '<div />' },
+      },
+    ],
+  });
+
+const mountButton = async (currentPath: string) => {
+  const router = createTestRouter();
+
+  router.push(currentPath);
+  await router.isReady();
+
+  const wrapper = mount(Button, {
+    propsData: {
+      context: createTestBrandPageContext(),
+      viewModel: createTestButtonViewModel(),
+    },
+    global: {
+      plugins: [router],
+    },
+  });
+
+  return { wrapper, router };
+};
+
+describe('Button - page link "back to top" behaviour (BP-5834)', () => {
+  let scrollToSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    scrollToSpy = vi
+      .spyOn(window, 'scrollTo')
+      .mockImplementation(() => undefined);
+  });
+
+  afterEach(() => {
+    scrollToSpy.mockRestore();
+  });
+
+  test('scrolls to top when the page-link target is the current route (duplicated navigation is skipped by the router)', async () => {
+    // A banner "back to top" button points to the page it lives on. Vue Router
+    // dedupes the navigation to the current location and never runs the guard
+    // that scrolls to top, so the button must scroll explicitly.
+    const { wrapper } = await mountButton(LINKED_PAGE_PATH);
+
+    const link = wrapper.findComponent(RouterLink);
+
+    expect(link.exists()).toBe(true);
+
+    await link.get('a').trigger('click');
+
+    expect(scrollToSpy).toHaveBeenCalledWith(0, 0);
+  });
+
+  test('does not scroll to top when the page-link target is a different page', async () => {
+    // A page-link to another page is a real navigation; the router guard owns
+    // scroll-to-top there, so the button must not scroll on its own.
+    const { wrapper } = await mountButton(OTHER_PAGE_PATH);
+
+    const link = wrapper.findComponent(RouterLink);
+
+    expect(link.exists()).toBe(true);
+
+    await link.get('a').trigger('click');
+
+    expect(scrollToSpy).not.toHaveBeenCalled();
+  });
+});

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

@@ -37,6 +37,7 @@ import {
 } from '@brand-page-maker/stores';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { useUndoRedoFlag } from '@brand-page-maker/composables/useUndoRedoFlag';
+import { useQuickLinkBarVisibility } from '@brand-page-maker/composables/useQuickLinkBarVisibility';
 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';
@@ -137,6 +138,10 @@ export default defineComponent({
       isSaving: computed(() => brandPageMakerStore.isSaving),
       isPublishing: computed(() => brandPageMakerStore.isPublishing),
       isPublished: computed(() => brandPageMakerStore.isPublished),
+      // Whether the QuickLinkBar renders — used to offset the preview (Device)
+      // and SideBar clear of the fixed bar on mobile. Must match the bar's own
+      // render condition, so it shares the same predicate.
+      shouldShowQuickLinkBar: useQuickLinkBarVisibility(),
       isBrandPageOrIsBrandContact: computed(
         () => brandPageMakerStore.isBrandPageOrIsBrandContact,
       ),

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

@@ -90,7 +90,7 @@
             :is-mobile-device="isMobileDevice"
             :is-design-com="isDesignCom"
             :container="previewContainer"
-            :has-quick-links="isPublished"
+            :has-quick-links="shouldShowQuickLinkBar"
           >
             <div ref="previewContent" class="tw-h-full">
               <PreviewWithState :device-mode="deviceMode" />
@@ -127,7 +127,7 @@
       <SideBar
         :mobile-tab-name="SideBarTabNames.PREVIEW"
         :is-mobile-screen-size="isMobileScreenSize"
-        :has-quick-links="isPublished"
+        :has-quick-links="shouldShowQuickLinkBar"
       >
         <template #tab>
           <component

package/src/brand-page-maker/components/device/Device.vue

@@ -11,7 +11,6 @@
       'tw-opacity-0': !visible,
       'tw-pt-8': !hasQuickLinks && isMobileDevice,
       'tw-pt-20 lg:tw-pt-8': hasQuickLinks && isMobileDevice,
-      'tw-pt-10': hasQuickLinks && isMobileDevice,
     }"
     tabindex="0"
   >

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

@@ -5,6 +5,7 @@ import {
   useEventManagerStore,
 } from '@brand-page-maker/stores';
 import { useUndoRedoFlag } from '@brand-page-maker/composables/useUndoRedoFlag';
+import { useQuickLinkBarVisibility } from '@brand-page-maker/composables/useQuickLinkBarVisibility';
 import { quickLinkBarTr } from '@src/composables/useTranslate';
 
 export default defineComponent({
@@ -23,6 +24,9 @@ export default defineComponent({
       brandPageContainerStore: useBrandPageContainerStore(),
       eventManagerStore: useEventManagerStore(),
       undoRedoEnabled: useUndoRedoFlag(),
+      // Single source of truth for whether the bar renders — shared with the
+      // layout components (Device, SideBar) that offset content clear of it.
+      shouldShowBar: useQuickLinkBarVisibility(),
     };
   },
   data() {
@@ -35,13 +39,6 @@ export default defineComponent({
       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 &&

package/src/brand-page-maker/composables/useQuickLinkBarVisibility.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useQuickLinkBarVisibility } from './useQuickLinkBarVisibility';
+
+// The QuickLinkBar renders when it has something to show — the undo/redo
+// controls (flag on, non-admin) OR the published-URL cluster. This predicate
+// is the single source of truth shared by the bar and the layout components
+// (Device, SideBar) that offset content clear of the fixed bar on mobile.
+//
+// The regression it guards: an unpublished page with the undo/redo flag on
+// still shows the bar, so the offset must treat it as visible — otherwise the
+// fixed bar overlaps the mobile preview.
+//
+// The real useUndoRedoFlag is exercised (only its underlying stores are
+// mocked) so admin gating is covered end-to-end.
+
+const containerStoreMock = { isPublished: false };
+
+vi.mock('@brand-page-maker/stores', () => ({
+  useBrandPageContainerStore: vi.fn(() => containerStoreMock),
+}));
+
+const userStoreMock = {
+  features: { canUseUndoRedo: false },
+  isAdmin: false,
+};
+
+vi.mock('@brand-page-maker/stores/user', () => ({
+  useBrandPageMakerUserStore: vi.fn(() => userStoreMock),
+}));
+
+beforeEach(() => {
+  containerStoreMock.isPublished = false;
+  userStoreMock.features.canUseUndoRedo = false;
+  userStoreMock.isAdmin = false;
+});
+
+describe('useQuickLinkBarVisibility', () => {
+  it('is visible when unpublished but the undo/redo flag is on (the overlap regression)', () => {
+    containerStoreMock.isPublished = false;
+    userStoreMock.features.canUseUndoRedo = true;
+
+    expect(useQuickLinkBarVisibility().value).toBe(true);
+  });
+
+  it('is hidden when unpublished and the undo/redo flag is off', () => {
+    containerStoreMock.isPublished = false;
+    userStoreMock.features.canUseUndoRedo = false;
+
+    expect(useQuickLinkBarVisibility().value).toBe(false);
+  });
+
+  it('is visible when published even with the undo/redo flag off', () => {
+    containerStoreMock.isPublished = true;
+    userStoreMock.features.canUseUndoRedo = false;
+
+    expect(useQuickLinkBarVisibility().value).toBe(true);
+  });
+
+  it('is visible when both published and the undo/redo flag is on', () => {
+    containerStoreMock.isPublished = true;
+    userStoreMock.features.canUseUndoRedo = true;
+
+    expect(useQuickLinkBarVisibility().value).toBe(true);
+  });
+
+  it('gates the undo/redo reason for admins: unpublished admin stays hidden despite the flag', () => {
+    containerStoreMock.isPublished = false;
+    userStoreMock.features.canUseUndoRedo = true;
+    userStoreMock.isAdmin = true;
+
+    expect(useQuickLinkBarVisibility().value).toBe(false);
+  });
+
+  it('stays visible for a published admin (published cluster is not admin-gated)', () => {
+    containerStoreMock.isPublished = true;
+    userStoreMock.features.canUseUndoRedo = true;
+    userStoreMock.isAdmin = true;
+
+    expect(useQuickLinkBarVisibility().value).toBe(true);
+  });
+});

package/src/brand-page-maker/composables/useQuickLinkBarVisibility.ts

@@ -0,0 +1,25 @@
+import { computed, type ComputedRef } from 'vue';
+import { useBrandPageContainerStore } from '@brand-page-maker/stores';
+import { useUndoRedoFlag } from './useUndoRedoFlag';
+
+/**
+ * Whether the QuickLinkBar is rendered in the maker.
+ *
+ * The bar shows when at least one of its inner clusters has something to
+ * display: the undo/redo controls (flag on, non-admin — see
+ * {@link useUndoRedoFlag}) OR the published-URL cluster (page published).
+ *
+ * This is the single source of truth shared by the bar itself
+ * (`QuickLinkBar`) and the layout components that offset their content to sit
+ * clear of the fixed bar on mobile (`Device`, `SideBar`). Keeping the offset
+ * bound to the same predicate the bar renders on prevents the two from
+ * drifting — a drift where the bar showed for the undo/redo reason but the
+ * offset only accounted for the published reason caused the bar to overlap
+ * the mobile preview.
+ */
+export function useQuickLinkBarVisibility(): ComputedRef<boolean> {
+  const containerStore = useBrandPageContainerStore();
+  const undoRedoEnabled = useUndoRedoFlag();
+
+  return computed(() => undoRedoEnabled.value || containerStore.isPublished);
+}