@designcrowd/library.brand-page 6.0.15 → 6.0.16

package/package.json

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

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

package/src/bundles/bundled-translations.de-DE.json

@@ -1457,7 +1457,7 @@
     "testimonialDisplayName": "Testimonial",
     "imageDisplayName": "Bild",
     "imageSectionDisplayName": "Bilder",
-    "imageGalleryDisplayName": "Bildergalerie",
+    "imageGalleryDisplayName": "Galerie",
     "videoDisplayName": "Video",
     "mapDisplayName": "Karte",
     "mailingListDisplayName": "Mailingliste",
@@ -1471,7 +1471,7 @@
     "tiktokDisplayName": "Tiktok",
     "supportMeDisplayName": "Trinkgeld",
     "requestPaymentDisplayName": "Zahlungen",
-    "contactFormDisplayName": "Kontaktformular",
+    "contactFormDisplayName": "Kontakt",
     "bannerSectionDisplayName": "Banner",
     "testimonialSectionDisplayName": "Testimonials",
     "aboutSectionDisplayName": "Über",

package/src/bundles/bundled-translations.es-ES.json

@@ -1457,7 +1457,7 @@
     "testimonialDisplayName": "Testimonio",
     "imageDisplayName": "Imagen",
     "imageSectionDisplayName": "Imágenes",
-    "imageGalleryDisplayName": "Galería de imágenes",
+    "imageGalleryDisplayName": "Galería",
     "videoDisplayName": "Vídeo",
     "mapDisplayName": "Mapa",
     "mailingListDisplayName": "Lista de correo",
@@ -1471,7 +1471,7 @@
     "tiktokDisplayName": "Tiktok",
     "supportMeDisplayName": "Propinas",
     "requestPaymentDisplayName": "Pagos",
-    "contactFormDisplayName": "Formulario de contacto",
+    "contactFormDisplayName": "Contacto",
     "bannerSectionDisplayName": "Banner",
     "testimonialSectionDisplayName": "Testimonios",
     "aboutSectionDisplayName": "Acerca de",

package/src/bundles/bundled-translations.fr-CA.json

@@ -1457,7 +1457,7 @@
     "testimonialDisplayName": "Témoignage",
     "imageDisplayName": "Image",
     "imageSectionDisplayName": "Images",
-    "imageGalleryDisplayName": "Galerie d’images",
+    "imageGalleryDisplayName": "Galerie",
     "videoDisplayName": "Vidéo",
     "mapDisplayName": "Carte",
     "mailingListDisplayName": "Liste de diffusion",
@@ -1471,7 +1471,7 @@
     "tiktokDisplayName": "Tiktok",
     "supportMeDisplayName": "Don",
     "requestPaymentDisplayName": "Paiements",
-    "contactFormDisplayName": "Formulaire de contact",
+    "contactFormDisplayName": "Contact",
     "bannerSectionDisplayName": "Bannière",
     "testimonialSectionDisplayName": "Témoignages",
     "aboutSectionDisplayName": "À propos",

package/src/bundles/bundled-translations.fr-FR.json

@@ -1457,7 +1457,7 @@
     "testimonialDisplayName": "Témoignage",
     "imageDisplayName": "Image",
     "imageSectionDisplayName": "Images",
-    "imageGalleryDisplayName": "Galerie d’images",
+    "imageGalleryDisplayName": "Galerie",
     "videoDisplayName": "Vidéo",
     "mapDisplayName": "Carte",
     "mailingListDisplayName": "Liste de diffusion",
@@ -1471,7 +1471,7 @@
     "tiktokDisplayName": "Tiktok",
     "supportMeDisplayName": "Don",
     "requestPaymentDisplayName": "Paiements",
-    "contactFormDisplayName": "Formulaire de contact",
+    "contactFormDisplayName": "Contact",
     "bannerSectionDisplayName": "Bannière",
     "testimonialSectionDisplayName": "Témoignages",
     "aboutSectionDisplayName": "À propos",

package/src/bundles/bundled-translations.json

@@ -1457,7 +1457,7 @@
     "testimonialDisplayName": "Testimonial",
     "imageDisplayName": "Image",
     "imageSectionDisplayName": "Images",
-    "imageGalleryDisplayName": "Image Gallery",
+    "imageGalleryDisplayName": "Gallery",
     "videoDisplayName": "Video",
     "mapDisplayName": "Map",
     "mailingListDisplayName": "Mailing list",
@@ -1471,7 +1471,7 @@
     "tiktokDisplayName": "Tiktok",
     "supportMeDisplayName": "Tipping",
     "requestPaymentDisplayName": "Payments",
-    "contactFormDisplayName": "Contact Form",
+    "contactFormDisplayName": "Contact",
     "bannerSectionDisplayName": "Banner",
     "testimonialSectionDisplayName": "Testimonials",
     "aboutSectionDisplayName": "About",

package/src/bundles/bundled-translations.pt-BR.json

@@ -1457,7 +1457,7 @@
     "testimonialDisplayName": "Depoimento",
     "imageDisplayName": "Imagem",
     "imageSectionDisplayName": "Imagens",
-    "imageGalleryDisplayName": "Galeria de imagens",
+    "imageGalleryDisplayName": "Galeria",
     "videoDisplayName": "Vídeo",
     "mapDisplayName": "Mapa",
     "mailingListDisplayName": "Lista de e-mails",
@@ -1471,7 +1471,7 @@
     "tiktokDisplayName": "TikTok",
     "supportMeDisplayName": "Dar gorjeta",
     "requestPaymentDisplayName": "Pagamentos",
-    "contactFormDisplayName": "Formulário de contato",
+    "contactFormDisplayName": "Contato",
     "bannerSectionDisplayName": "Banner",
     "testimonialSectionDisplayName": "Depoimentos",
     "aboutSectionDisplayName": "Sobre",

package/src/bundles/bundled-translations.pt-PT.json

@@ -1457,7 +1457,7 @@
     "testimonialDisplayName": "Testemunho",
     "imageDisplayName": "Imagem",
     "imageSectionDisplayName": "Imagens",
-    "imageGalleryDisplayName": "Galeria de Imagens",
+    "imageGalleryDisplayName": "Galeria",
     "videoDisplayName": "Vídeo",
     "mapDisplayName": "Mapa",
     "mailingListDisplayName": "Lista de correio",
@@ -1471,7 +1471,7 @@
     "tiktokDisplayName": "TikTok",
     "supportMeDisplayName": "Dar gorjeta",
     "requestPaymentDisplayName": "Pagamentos",
-    "contactFormDisplayName": "Formulário de Contacto",
+    "contactFormDisplayName": "Contacto",
     "bannerSectionDisplayName": "Banner",
     "testimonialSectionDisplayName": "Testemunhos",
     "aboutSectionDisplayName": "Sobre",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.de-DE.json

@@ -17,7 +17,7 @@
     "testimonialDisplayName": "Testimonial",
     "imageDisplayName": "Bild",
     "imageSectionDisplayName": "Bilder",
-    "imageGalleryDisplayName": "Bildergalerie",
+    "imageGalleryDisplayName": "Galerie",
     "videoDisplayName": "Video",
     "mapDisplayName": "Karte",
     "mailingListDisplayName": "Mailingliste",
@@ -31,7 +31,7 @@
     "tiktokDisplayName": "Tiktok",
     "supportMeDisplayName": "Trinkgeld",
     "requestPaymentDisplayName": "Zahlungen",
-    "contactFormDisplayName": "Kontaktformular",
+    "contactFormDisplayName": "Kontakt",
     "bannerSectionDisplayName": "Banner",
     "testimonialSectionDisplayName": "Testimonials",
     "aboutSectionDisplayName": "Über",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.es-ES.json

@@ -17,7 +17,7 @@
     "testimonialDisplayName": "Testimonio",
     "imageDisplayName": "Imagen",
     "imageSectionDisplayName": "Imágenes",
-    "imageGalleryDisplayName": "Galería de imágenes",
+    "imageGalleryDisplayName": "Galería",
     "videoDisplayName": "Vídeo",
     "mapDisplayName": "Mapa",
     "mailingListDisplayName": "Lista de correo",
@@ -31,7 +31,7 @@
     "tiktokDisplayName": "Tiktok",
     "supportMeDisplayName": "Propinas",
     "requestPaymentDisplayName": "Pagos",
-    "contactFormDisplayName": "Formulario de contacto",
+    "contactFormDisplayName": "Contacto",
     "bannerSectionDisplayName": "Banner",
     "testimonialSectionDisplayName": "Testimonios",
     "aboutSectionDisplayName": "Acerca de",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.fr-CA.json

@@ -17,7 +17,7 @@
     "testimonialDisplayName": "Témoignage",
     "imageDisplayName": "Image",
     "imageSectionDisplayName": "Images",
-    "imageGalleryDisplayName": "Galerie d’images",
+    "imageGalleryDisplayName": "Galerie",
     "videoDisplayName": "Vidéo",
     "mapDisplayName": "Carte",
     "mailingListDisplayName": "Liste de diffusion",
@@ -31,7 +31,7 @@
     "tiktokDisplayName": "Tiktok",
     "supportMeDisplayName": "Don",
     "requestPaymentDisplayName": "Paiements",
-    "contactFormDisplayName": "Formulaire de contact",
+    "contactFormDisplayName": "Contact",
     "bannerSectionDisplayName": "Bannière",
     "testimonialSectionDisplayName": "Témoignages",
     "aboutSectionDisplayName": "À propos",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.fr-FR.json

@@ -17,7 +17,7 @@
     "testimonialDisplayName": "Témoignage",
     "imageDisplayName": "Image",
     "imageSectionDisplayName": "Images",
-    "imageGalleryDisplayName": "Galerie d’images",
+    "imageGalleryDisplayName": "Galerie",
     "videoDisplayName": "Vidéo",
     "mapDisplayName": "Carte",
     "mailingListDisplayName": "Liste de diffusion",
@@ -31,7 +31,7 @@
     "tiktokDisplayName": "Tiktok",
     "supportMeDisplayName": "Don",
     "requestPaymentDisplayName": "Paiements",
-    "contactFormDisplayName": "Formulaire de contact",
+    "contactFormDisplayName": "Contact",
     "bannerSectionDisplayName": "Bannière",
     "testimonialSectionDisplayName": "Témoignages",
     "aboutSectionDisplayName": "À propos",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.json

@@ -17,7 +17,7 @@
     "testimonialDisplayName": "Testimonial",
     "imageDisplayName": "Image",
     "imageSectionDisplayName": "Images",
-    "imageGalleryDisplayName": "Image Gallery",
+    "imageGalleryDisplayName": "Gallery",
     "videoDisplayName": "Video",
     "mapDisplayName": "Map",
     "mailingListDisplayName": "Mailing list",
@@ -31,7 +31,7 @@
     "tiktokDisplayName": "Tiktok",
     "supportMeDisplayName": "Tipping",
     "requestPaymentDisplayName": "Payments",
-    "contactFormDisplayName": "Contact Form",
+    "contactFormDisplayName": "Contact",
     "bannerSectionDisplayName": "Banner",
     "testimonialSectionDisplayName": "Testimonials",
     "aboutSectionDisplayName": "About",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.pt-BR.json

@@ -17,7 +17,7 @@
     "testimonialDisplayName": "Depoimento",
     "imageDisplayName": "Imagem",
     "imageSectionDisplayName": "Imagens",
-    "imageGalleryDisplayName": "Galeria de imagens",
+    "imageGalleryDisplayName": "Galeria",
     "videoDisplayName": "Vídeo",
     "mapDisplayName": "Mapa",
     "mailingListDisplayName": "Lista de e-mails",
@@ -31,7 +31,7 @@
     "tiktokDisplayName": "TikTok",
     "supportMeDisplayName": "Dar gorjeta",
     "requestPaymentDisplayName": "Pagamentos",
-    "contactFormDisplayName": "Formulário de contato",
+    "contactFormDisplayName": "Contato",
     "bannerSectionDisplayName": "Banner",
     "testimonialSectionDisplayName": "Depoimentos",
     "aboutSectionDisplayName": "Sobre",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.pt-PT.json

@@ -17,7 +17,7 @@
     "testimonialDisplayName": "Testemunho",
     "imageDisplayName": "Imagem",
     "imageSectionDisplayName": "Imagens",
-    "imageGalleryDisplayName": "Galeria de Imagens",
+    "imageGalleryDisplayName": "Galeria",
     "videoDisplayName": "Vídeo",
     "mapDisplayName": "Mapa",
     "mailingListDisplayName": "Lista de correio",
@@ -31,7 +31,7 @@
     "tiktokDisplayName": "TikTok",
     "supportMeDisplayName": "Dar gorjeta",
     "requestPaymentDisplayName": "Pagamentos",
-    "contactFormDisplayName": "Formulário de Contacto",
+    "contactFormDisplayName": "Contacto",
     "bannerSectionDisplayName": "Banner",
     "testimonialSectionDisplayName": "Testemunhos",
     "aboutSectionDisplayName": "Sobre",

package/src/shared/page-settings/components/page-settings/PageElement.vue

@@ -2,6 +2,7 @@
   <div
     :key="`page-item-${index}`"
     data-component="page-element"
+    :data-test-tag="`page-element-${index}`"
     :class="['tw-mb-3 tw-text-secondary-500', { 'tw-ml-6': !isRootPage }]"
   >
     <div class="tw-flex tw-items-center">

package/src/shared/page-settings/components/page-settings/PageSettingMenu.vue

@@ -7,6 +7,7 @@
     <Icon
       name="ellipsis"
       size="sm"
+      data-test-tag="page-menu-trigger"
       :class="'tw-rounded tw-cursor-pointer tw-text-grayscale-600 tw-pt-1'"
       :should-display-title="false"
       @click="toggleMenu"
@@ -19,6 +20,7 @@
     >
       <li
         v-if="isRootPage"
+        data-test-tag="add-subpage"
         class="tw-cursor-pointer tw-flex tw-gap-2 tw-items-center tw-px-5 hover:tw-bg-grayscale-400"
         @click="onAddSubPageClick"
       >
@@ -29,6 +31,7 @@
       </li>
       <li
         v-if="props.index !== 0"
+        data-test-tag="toggle-page-visibility"
         class="tw-cursor-pointer tw-flex tw-gap-2 tw-items-center tw-px-5 hover:tw-bg-grayscale-400 tw-mt-3"
         @click="onChangePageVisibility"
       >
@@ -43,6 +46,7 @@
 
       <li
         v-if="!props.hasSubPages && totalPages > 1 && props.index !== 0"
+        data-test-tag="delete-page"
         class="tw-cursor-pointer tw-flex tw-gap-2 tw-items-center tw-px-5 hover:tw-bg-grayscale-400 tw-mt-3"
         @click="onDeleteClick"
       >