@designcrowd/library.brand-page 6.2.0 → 6.2.2-live-preview-1

package/src/shared/page-settings/components/header-settings-panel/HeaderSettingsPanel.vue

@@ -64,6 +64,7 @@
         :on-select="handleHeaderDisplayStyleChange"
         :viewport="viewport"
         :is-logo-visible="isLogoVisible"
+        :show-header-button="isHeaderButtonVisible"
       />
 
       <NavigationStyleSettings
@@ -144,27 +145,63 @@
       </div>
     </CollapsiblePanel>
 
-    <!-- Button section hidden for now (BP-5854) — re-enable once BP-5852 implements
-         the header button. Left commented rather than removed since the shell
-         (CollapsiblePanel + collapsedSections.button state) is already wired up.
-    <CollapsiblePanel
-      data-component="collapsible-panel"
-      :title="pageSettingsTr('buttonSectionTitle')"
-      :is-collapsed="collapsedSections.button"
-      @changed="toggleSectionCollapsed('button')"
-    />
-    -->
+    <div
+      v-if="isBrandSite"
+      data-test-header-button-section
+      class="tw-bg-white tw-border tw-border-grayscale-500 tw-border-solid tw-flex tw-flex-col tw-mb-4 tw-p-4 tw-rounded-md"
+    >
+      <div
+        data-test-header-button-section-header
+        class="tw-cursor-pointer tw-text-secondary-500 tw-flex tw-items-center tw-select-none"
+        :class="{
+          'tw-mb-2': !collapsedSections.button && isHeaderButtonVisible,
+        }"
+        @click="onButtonSectionChanged"
+      >
+        <div
+          class="tw-grow tw-text-md tw-font-sans tw-font-bold tw-text-secondary-800"
+        >
+          {{ pageSettingsTr('buttonSectionTitle') }}
+        </div>
+        <div class="tw-ml-2" @click.stop>
+          <Toggle
+            id="header-button-visible"
+            data-test-header-button-toggle
+            color="primary"
+            :model-value="isHeaderButtonVisible"
+            @update:model-value="onHeaderButtonToggle"
+          />
+        </div>
+        <Icon
+          class="tw-ml-2 tw-text-grayscale-600"
+          :name="collapsedSections.button ? 'chevron-down' : 'chevron-up'"
+          size="sm"
+        />
+      </div>
+      <HeaderButtonSettings
+        v-if="!collapsedSections.button && isHeaderButtonVisible"
+        :value="headerButton"
+        :is-admin-maker="isAdminMaker"
+        :logo-theme="logoTheme"
+        @on-change="onHeaderButtonChange"
+      />
+    </div>
+
+    <!-- The Page dropdown's ADD PAGE opens this; every panel hosting a PageDropdownField mounts its own. -->
+    <NewPageModal />
   </div>
 </template>
 <script>
 import {
   CollapsiblePanel,
   HelloBar,
+  Icon,
   Slider,
   TabMenu,
   Toggle,
 } from '@designcrowd/fe-shared-lib';
 import PageSettingsSectionStyleMixin from '../page-settings-section-styles/PageSettingsSectionStyles.mixin.ts';
+import HeaderButtonSettings from '../page-settings-section-styles/HeaderButtonSettings.vue';
 import HeaderDisplayStyle from '../page-settings-section-styles/HeaderDisplayStyle.vue';
 import HeaderNavigationType from '../page-settings-section-styles/HeaderNavigationType.vue';
 import HeaderNavigationStyle from '../page-settings-section-styles/HeaderNavigationStyle.vue';
@@ -173,16 +210,20 @@ import ColorField from '../../../content-settings/components/color-field/ColorFi
 import LogoSelection from '@shared/content-settings/components/logo-selection-field/LogoSelection.vue';
 import LogoSizeSlider from '@shared/content-settings/components/logo-size-field/LogoSizeSlider.vue';
 import SideBarSettingsHeader from '../../../common/SideBarSettingsHeader.vue';
+import NewPageModal from '../new-page-modal/NewPageModal.vue';
 import { tr, commonTr, pageSettingsTr } from '@src/composables/useTranslate';
 
 export default {
   components: {
+    NewPageModal,
     CollapsiblePanel,
     ColorField,
     HelloBar,
+    Icon,
     Slider,
     TabMenu,
     Toggle,
+    HeaderButtonSettings,
     HeaderDisplayStyle,
     HeaderNavigationType,
     HeaderNavigationStyle,
@@ -222,6 +263,20 @@ export default {
     toggleSectionCollapsed(section) {
       this.collapsedSections[section] = !this.collapsedSections[section];
     },
+    onHeaderButtonToggle(isVisible) {
+      this.onHeaderButtonChange({ isVisible });
+
+      this.collapsedSections.button = !isVisible;
+    },
+    onButtonSectionChanged() {
+      const isExpanding = this.collapsedSections.button;
+
+      this.toggleSectionCollapsed('button');
+
+      if (isExpanding && !this.isHeaderButtonVisible) {
+        this.onHeaderButtonChange({ isVisible: true });
+      }
+    },
   },
 };
 </script>

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

@@ -28,6 +28,7 @@
           :delete-page-selected="onDeletePageSelected"
           :change-page-visibility="onChangePageVisibility"
           :on-add-sub-page-selected="onAddSubPageSelected"
+          :on-duplicate-page-selected="onDuplicatePageSelected"
           :total-pages="totalPages"
           :visible-page-count="visiblePageCount"
         />
@@ -41,6 +42,7 @@
           :on-delete-page-selected="onDeletePageSelected"
           :on-change-page-visibility="onChangePageVisibility"
           :on-add-sub-page-selected="onAddSubPageSelected"
+          :on-duplicate-page-selected="onDuplicatePageSelected"
           :move="handleMove"
           @drag-start="handleStart"
           @drag-end="handleEnd"
@@ -92,6 +94,7 @@ interface Props {
   onDeletePageSelected: (pageId: string) => void;
   onChangePageVisibility: (pageId: string) => void;
   onAddSubPageSelected: (pageId: string) => void;
+  onDuplicatePageSelected: (pageId: string) => void;
 }
 
 const props = defineProps<Props>();

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

@@ -45,6 +45,7 @@
           :on-delete-page-selected="deletePageSelected"
           :on-change-page-visibility="changePageVisibility"
           :on-add-sub-page-selected="onAddSubPageSelected"
+          :on-duplicate-page-selected="onDuplicatePageSelected"
           :is-root-page="isRootPage"
           :total-pages="totalPages"
           :visible-page-count="visiblePageCount"
@@ -80,6 +81,7 @@ interface Props {
   deletePageSelected: (pageId: string) => void;
   changePageVisibility: (pageId: string) => void;
   onAddSubPageSelected: (pageId: string) => void;
+  onDuplicatePageSelected: (pageId: string) => void;
 }
 
 defineProps<Props>();

package/src/shared/page-settings/components/page-settings/PageSettingMenu.test.ts

@@ -0,0 +1,105 @@
+import { describe, test, expect, beforeAll, vi } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { mount } from '@vue/test-utils';
+
+import { setLocaleAsync } from '@src/composables/useTranslate';
+import PageSettingMenu from './PageSettingMenu.vue';
+
+// Menu order is a product requirement, so it is asserted rather than just
+// membership.
+const ITEM_TAGS = [
+  'add-subpage',
+  'duplicate-page',
+  'toggle-page-visibility',
+  'delete-page',
+];
+
+const mountMenu = (overrides = {}) =>
+  mount(PageSettingMenu, {
+    props: {
+      index: 1,
+      pageId: 'page-1',
+      isHidden: false,
+      isDesignCom: false,
+      isRootPage: true,
+      hasSubPages: false,
+      totalPages: 3,
+      visiblePageCount: 3,
+      onDeletePageSelected: vi.fn(),
+      onChangePageVisibility: vi.fn(),
+      onAddSubPageSelected: vi.fn(),
+      onDuplicatePageSelected: vi.fn(),
+      ...overrides,
+    },
+  });
+
+const openMenu = async (wrapper: ReturnType<typeof mountMenu>) => {
+  await wrapper.find('[data-test-tag="page-menu-trigger"]').trigger('click');
+
+  return wrapper;
+};
+
+const renderedTags = (wrapper: ReturnType<typeof mountMenu>) =>
+  wrapper
+    .findAll('li')
+    .map((li) => li.attributes('data-test-tag'))
+    .filter((tag): tag is string => Boolean(tag));
+
+describe('PageSettingMenu', () => {
+  beforeAll(async () => {
+    setActivePinia(createPinia());
+
+    await setLocaleAsync('en-US');
+  });
+
+  test('a root page shows every action in order', async () => {
+    const wrapper = await openMenu(mountMenu());
+
+    expect(renderedTags(wrapper)).toEqual(ITEM_TAGS);
+  });
+
+  test('a sub-page shows duplicate but not add-subpage', async () => {
+    const wrapper = await openMenu(mountMenu({ isRootPage: false }));
+
+    expect(renderedTags(wrapper)).toEqual([
+      'duplicate-page',
+      'toggle-page-visibility',
+      'delete-page',
+    ]);
+  });
+
+  test('the home page can be duplicated but not hidden or deleted', async () => {
+    const wrapper = await openMenu(mountMenu({ index: 0 }));
+
+    expect(renderedTags(wrapper)).toEqual(['add-subpage', 'duplicate-page']);
+  });
+
+  test('a parent page can be duplicated even though it cannot be deleted', async () => {
+    const wrapper = await openMenu(mountMenu({ hasSubPages: true }));
+
+    expect(renderedTags(wrapper)).toContain('duplicate-page');
+    expect(renderedTags(wrapper)).not.toContain('delete-page');
+  });
+
+  test('clicking duplicate calls back with the page id and closes the menu', async () => {
+    const onDuplicatePageSelected = vi.fn();
+
+    const wrapper = await openMenu(mountMenu({ onDuplicatePageSelected }));
+
+    await wrapper.find('[data-test-tag="duplicate-page"]').trigger('click');
+
+    expect(onDuplicatePageSelected).toHaveBeenCalledTimes(1);
+    expect(onDuplicatePageSelected).toHaveBeenCalledWith('page-1');
+    expect(wrapper.find('[data-test-tag="duplicate-page"]').exists()).toBe(
+      false,
+    );
+  });
+
+  test('the duplicate row is labelled from the translation bundle', async () => {
+    const wrapper = await openMenu(mountMenu());
+
+    expect(wrapper.find('[data-test-tag="duplicate-page"]').text()).toEqual(
+      'Duplicate page',
+    );
+  });
+});

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

@@ -29,6 +29,16 @@
           pageSettingsTr('addSubPage')
         }}</span>
       </li>
+      <li
+        data-test-tag="duplicate-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="onDuplicateClick"
+      >
+        <Icon name="duplicate" :class="{ 'tw-pt-1': !isDesignCom }" />
+        <span class="tw-whitespace-nowrap">{{
+          pageSettingsTr('duplicatePage')
+        }}</span>
+      </li>
       <li
         v-if="props.index !== 0"
         data-test-tag="toggle-page-visibility"
@@ -74,6 +84,7 @@ interface Props {
   onDeletePageSelected: (pageId: string) => void;
   onChangePageVisibility: (pageId: string) => void;
   onAddSubPageSelected: (pageId: string) => void;
+  onDuplicatePageSelected: (pageId: string) => void;
 }
 
 const props = defineProps<Props>();
@@ -100,6 +111,11 @@ const onAddSubPageClick = () => {
   closeMenu();
 };
 
+const onDuplicateClick = () => {
+  props.onDuplicatePageSelected(props.pageId);
+  closeMenu();
+};
+
 const onChangePageVisibility = () => {
   props.onChangePageVisibility(props.pageId);
   closeMenu();

package/src/shared/page-settings/components/page-settings/PageSettings.duplicate.test.ts

@@ -0,0 +1,108 @@
+import { describe, test, expect, beforeAll, vi } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { shallowMount } from '@vue/test-utils';
+
+import { setLocaleAsync } from '@src/composables/useTranslate';
+import {
+  INITIALISE_PAYLOAD,
+  USER_FEATURES,
+} from '@brand-page-maker/components/brand-page-maker/__fixtures__';
+import {
+  UNLIMITED_MAX_NUM_OF_PAGES,
+  useBrandPageMakerStore,
+  useBrandPageMakerUserStore,
+} from '@brand-page-maker/stores';
+import { FabricRenderClient } from '../../../../clients/fabric-render-client';
+import { useUiPageSettingsStore } from '../../store';
+import { usePageNavigationStore } from '../../../page-navigation/store/page-navigation-store';
+import PageSettings from './PageSettings.vue';
+
+vi.mock('../../../../clients/brand-page-client', () => ({
+  default: {
+    getWebsiteContextualUpgradeTestBucketAsync: vi
+      .fn()
+      .mockResolvedValue(undefined),
+  },
+}));
+
+// The analytics contract lives in the mixin, not the store: the store returns
+// the copy, the mixin decides what gets tracked. Nothing else covers it.
+describe('PageSettings - duplicate page handler', () => {
+  const setupAsync = async () => {
+    const makerStore = useBrandPageMakerStore();
+    const userStore = useBrandPageMakerUserStore();
+
+    userStore.setUserState({
+      features: { ...USER_FEATURES, maxNumOfPages: UNLIMITED_MAX_NUM_OF_PAGES },
+    });
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    const wrapper = shallowMount(PageSettings);
+
+    return {
+      wrapper,
+      pageSettingsStore: useUiPageSettingsStore(),
+      pageNavigationStore: usePageNavigationStore(),
+      spy: vi.spyOn(
+        wrapper.vm.eventTracker,
+        'sendWebsiteManageDuplicatePageEvent',
+      ),
+    };
+  };
+
+  beforeAll(async () => {
+    FabricRenderClient.setInstance({ baseUrl: 'http://localhost:3000' });
+    setActivePinia(createPinia());
+
+    await setLocaleAsync('en-US');
+  });
+
+  test('tracks the source page title, not the copy', async () => {
+    const { wrapper, pageSettingsStore, spy } = await setupAsync();
+
+    const source = pageSettingsStore.addNewPage({ title: 'About' });
+
+    await wrapper.vm.onDuplicatePageSelected(source.id);
+
+    expect(spy).toHaveBeenCalledWith('About', false);
+  });
+
+  test('flags a duplicated sub-page', async () => {
+    const { wrapper, pageSettingsStore, spy } = await setupAsync();
+
+    const parent = pageSettingsStore.addNewPage({ title: 'Portfolio' });
+    const child = pageSettingsStore.addNewPage({
+      title: 'Portfolio 1',
+      newPageParentId: parent.id,
+    });
+
+    await wrapper.vm.onDuplicatePageSelected(child.id);
+
+    expect(spy).toHaveBeenCalledWith('Portfolio 1', true);
+  });
+
+  test('tracks nothing when the page limit blocked the duplicate', async () => {
+    const { wrapper, pageSettingsStore, spy } = await setupAsync();
+    const userStore = useBrandPageMakerUserStore();
+
+    userStore.setUserState({
+      features: {
+        ...USER_FEATURES,
+        maxNumOfPages: pageSettingsStore.pages.length,
+      },
+    });
+
+    await wrapper.vm.onDuplicatePageSelected(pageSettingsStore.pages[0].id);
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  test('tracks nothing for an unknown page id', async () => {
+    const { wrapper, spy } = await setupAsync();
+
+    await wrapper.vm.onDuplicatePageSelected('does-not-exist');
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+});

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

@@ -124,55 +124,6 @@ export default defineComponent({
 
     const isDraggingPage = ref(false);
 
-    const syncPagesWithOrders = (): void => {
-      const pageIdOrder: string[] = [];
-
-      const collectPageIds = (orders: NavOrder[]): void => {
-        for (const order of orders) {
-          const route = pageNavigationStore.routes.find(
-            (r) => r.id === order.routeId,
-          );
-
-          if (route?.pageId) {
-            pageIdOrder.push(route.pageId);
-          }
-
-          if (order.subRoutes && order.subRoutes.length > 0) {
-            collectPageIds(order.subRoutes);
-          }
-        }
-      };
-
-      collectPageIds(pageNavigationStore.orders);
-
-      if (!pageIdOrder.length) {
-        return;
-      }
-
-      const pageMap = new Map<string, ContentPage>();
-
-      for (const page of pageSettingsStore.pages) {
-        pageMap.set(page.id, page);
-      }
-
-      const orderedPages: ContentPage[] = [];
-
-      for (const pageId of pageIdOrder) {
-        const page = pageMap.get(pageId);
-
-        if (page) {
-          orderedPages.push(page);
-          pageMap.delete(pageId);
-        }
-      }
-
-      for (const remainingPage of pageMap.values()) {
-        orderedPages.push(remainingPage);
-      }
-
-      pageSettingsStore.setPages({ pages: orderedPages });
-    };
-
     const onDraggingStart = (): void => {
       isDraggingPage.value = true;
     };
@@ -200,7 +151,7 @@ export default defineComponent({
         }
       }
 
-      syncPagesWithOrders();
+      pageSettingsStore.syncPagesWithOrders();
 
       // Recalc the moved route's slug to ensure uniqueness at its new depth
       if (routeId) {
@@ -371,6 +322,27 @@ export default defineComponent({
         isNewPageModalVisible: true,
       });
     },
+    async onDuplicatePageSelected(pageId: string) {
+      const sourcePage = this.pageSettingsStore.pages.find(
+        (p) => p.id === pageId,
+      );
+      const isSubPage = Boolean(
+        this.pageNavigationStore.getParentRouteIdForPage(pageId),
+      );
+
+      const newPage = await this.pageSettingsStore.duplicatePage({ pageId });
+
+      // Nothing was created - paywalled, or the page is gone. The upsell is
+      // already tracked through the bridge's cta_location.
+      if (!newPage || !sourcePage) {
+        return;
+      }
+
+      this.eventTracker.sendWebsiteManageDuplicatePageEvent(
+        sourcePage.title,
+        isSubPage,
+      );
+    },
     onChangePageVisibility(pageId: string) {
       const page = this.pageSettingsStore.pages.find((p) => p.id === pageId);
 

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

@@ -38,6 +38,7 @@
             :on-delete-page-selected="onDeletePageSelected"
             :on-change-page-visibility="onChangePageVisibility"
             :on-add-sub-page-selected="onAddSubPageSelected"
+            :on-duplicate-page-selected="onDuplicatePageSelected"
             @drag-start="onDraggingStart"
             @drag-end="onDraggingEnd"
           />

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

@@ -19,6 +19,8 @@
     "showPage": "Seite anzeigen",
     "hidePage": "Seite ausblenden",
     "delete": "Seite löschen",
-    "addSubPage": "Unterseite hinzufügen"
+    "addSubPage": "Unterseite hinzufügen",
+    "duplicatePage": "Seite duplizieren",
+    "duplicatePageTitle": "{{title}} Kopieren"
   }
 }

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

@@ -19,6 +19,8 @@
     "showPage": "Mostrar página",
     "hidePage": "Ocultar página",
     "delete": "Eliminar página",
-    "addSubPage": "Añadir subpágina"
+    "addSubPage": "Añadir subpágina",
+    "duplicatePage": "Duplicar página",
+    "duplicatePageTitle": "{{title}} copia"
   }
 }

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

@@ -19,6 +19,8 @@
     "showPage": "Afficher la page",
     "hidePage": "Masquez la page",
     "delete": "Supprimer la page",
-    "addSubPage": "Ajouter une sous-page"
+    "addSubPage": "Ajouter une sous-page",
+    "duplicatePage": "Dupliquer la page",
+    "duplicatePageTitle": "{{title}} Copie"
   }
 }

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

@@ -19,6 +19,8 @@
     "showPage": "Afficher la page",
     "hidePage": "Masquez la page",
     "delete": "Supprimer la page",
-    "addSubPage": "Ajouter une sous-page"
+    "addSubPage": "Ajouter une sous-page",
+    "duplicatePage": "Dupliquer la page",
+    "duplicatePageTitle": "Copie de {{title}}"
   }
 }

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

@@ -19,6 +19,8 @@
     "showPage": "Show page",
     "hidePage": "Hide page",
     "delete": "Delete page",
-    "addSubPage": "Add subpage"
+    "addSubPage": "Add subpage",
+    "duplicatePage": "Duplicate page",
+    "duplicatePageTitle": "{{title}} Copy"
   }
 }

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

@@ -19,6 +19,8 @@
     "showPage": "Mostrar página",
     "hidePage": "Ocultar página",
     "delete": "Eliminar página",
-    "addSubPage": "Adicionar subpágina"
+    "addSubPage": "Adicionar subpágina",
+    "duplicatePage": "Duplicar página",
+    "duplicatePageTitle": "{{title}} Copiar"
   }
 }

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

@@ -19,6 +19,8 @@
     "showPage": "Mostrar página",
     "hidePage": "Ocultar página",
     "delete": "Eliminar página",
-    "addSubPage": "Adicionar subpágina"
+    "addSubPage": "Adicionar subpágina",
+    "duplicatePage": "Duplicar página",
+    "duplicatePageTitle": "{{title}} Cópia"
   }
 }