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

package/src/shared/page-settings/store/page-settings-store.test.ts

@@ -3,13 +3,14 @@ import type Vue from 'vue';
 import { createApp } from 'vue';
 import { createPinia, setActivePinia } from 'pinia';
 import type { ContentPage } from '../models';
-import type { TextContent } from '@brand-page';
+import type { Content, TextContent } from '@brand-page';
 import type { ContentItem } from '../../content-settings/models';
 import {
   UNLIMITED_MAX_NUM_OF_PAGES,
   useBrandPageContainerStore,
   useBrandPageMakerStore,
   useBrandPageMakerUserStore,
+  useUiStore,
 } from '@brand-page-maker/stores';
 import {
   INITIALISE_PAYLOAD,
@@ -19,6 +20,9 @@ import { useUiPageSettingsStore } from './index';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { setLocaleAsync } from '@src/composables/useTranslate';
 import { usePageNavigationStore } from '@src/shared/page-navigation/store/page-navigation-store';
+import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
+import { useEventTracker } from '@brand-page-maker/composables/useEventTracker';
+import { toPageModels } from '../utils';
 
 vi.mock('../../../clients/brand-page-client', () => ({
   default: {
@@ -371,3 +375,439 @@ describe('page store module', () => {
     });
   });
 });
+
+describe('duplicatePage', () => {
+  const initialiseAsync = async () => {
+    const store = useBrandPageMakerStore();
+    const userStore = useBrandPageMakerUserStore();
+    const pageSettingsStore = useUiPageSettingsStore();
+
+    userStore.setUserState({
+      features: {
+        ...USER_FEATURES,
+        maxNumOfPages: UNLIMITED_MAX_NUM_OF_PAGES,
+      },
+    });
+
+    // No setPages here: injecting route-less pages would leave `pages` and
+    // `nav.orders` describing different sites, and duplicatePage re-derives
+    // one from the other.
+    await store.initialise(INITIALISE_PAYLOAD);
+
+    return {
+      pageSettingsStore,
+      pageNavigationStore: usePageNavigationStore(),
+      userStore,
+    };
+  };
+
+  beforeAll(async () => {
+    FabricRenderClient.setInstance({ baseUrl: 'http://localhost:3000' });
+
+    setActivePinia(createPinia());
+
+    await setLocaleAsync('en-US');
+  });
+
+  test('inserts the copy directly below the source page', async () => {
+    const { pageSettingsStore } = await initialiseAsync();
+
+    const source = pageSettingsStore.addNewPage({ title: 'About' });
+
+    const copy = await pageSettingsStore.duplicatePage({ pageId: source.id });
+
+    const ids = pageSettingsStore.pages.map((p) => p.id);
+
+    expect(ids.indexOf(copy!.id)).toEqual(ids.indexOf(source.id) + 1);
+  });
+
+  test('inserts the copy directly below the source route in orders', async () => {
+    const { pageSettingsStore, pageNavigationStore } = await initialiseAsync();
+
+    const source = pageSettingsStore.addNewPage({ title: 'About' });
+    const sourceRoute = pageNavigationStore.routes.find(
+      (r) => r.pageId === source.id,
+    );
+
+    const copy = await pageSettingsStore.duplicatePage({ pageId: source.id });
+
+    const copyRoute = pageNavigationStore.routes.find(
+      (r) => r.pageId === copy?.id,
+    );
+    const sourceOrderIndex = pageNavigationStore.orders.findIndex(
+      (o) => o.routeId === sourceRoute?.id,
+    );
+
+    expect(pageNavigationStore.orders[sourceOrderIndex + 1].routeId).toEqual(
+      copyRoute?.id,
+    );
+  });
+
+  test('names the copy after the source and derives its slug', async () => {
+    const { pageSettingsStore, pageNavigationStore } = await initialiseAsync();
+
+    const source = pageSettingsStore.addNewPage({ title: 'About' });
+
+    const copy = await pageSettingsStore.duplicatePage({ pageId: source.id });
+
+    expect(copy?.title).toEqual('About Copy');
+    expect(
+      pageNavigationStore.routes.find((r) => r.pageId === copy?.id)?.pageSlug,
+    ).toEqual('about-copy');
+  });
+
+  test('indexes the title when the same page is duplicated twice', async () => {
+    const { pageSettingsStore } = await initialiseAsync();
+
+    const source = pageSettingsStore.addNewPage({ title: 'About' });
+
+    await pageSettingsStore.duplicatePage({ pageId: source.id });
+
+    const second = await pageSettingsStore.duplicatePage({
+      pageId: source.id,
+    });
+
+    expect(second?.title).toEqual('About Copy 2');
+  });
+
+  test('deep clones contents with fresh ids', async () => {
+    const { pageSettingsStore } = await initialiseAsync();
+
+    const source = pageSettingsStore.addNewPage({ title: 'About' });
+
+    pageSettingsStore.setPageContents({
+      pageId: source.id,
+      contents: [
+        {
+          id: 'content-1',
+          type: 'text',
+          settings: { content: { id: 'content-1', text: 'hello' } },
+        } as unknown as ContentItem<TextContent>,
+      ],
+    });
+
+    const copy = await pageSettingsStore.duplicatePage({ pageId: source.id });
+
+    expect(copy?.contents).toHaveLength(1);
+    expect(copy?.contents[0].id).not.toEqual('content-1');
+    expect(copy?.contents[0].id).toEqual(copy?.contents[0].settings.content.id);
+
+    const sourcePage = pageSettingsStore.pages.find((p) => p.id === source.id);
+
+    expect(sourcePage?.contents[0].id).toEqual('content-1');
+  });
+
+  test('keeps a duplicated sub-page under the same parent', async () => {
+    const { pageSettingsStore, pageNavigationStore } = await initialiseAsync();
+
+    const parent = pageSettingsStore.addNewPage({ title: 'Portfolio' });
+    const child = pageSettingsStore.addNewPage({
+      title: 'Portfolio 1',
+      newPageParentId: parent.id,
+    });
+
+    const copy = await pageSettingsStore.duplicatePage({ pageId: child.id });
+
+    expect(copy?.title).toEqual('Portfolio 1 Copy');
+    expect(
+      pageNavigationStore.getParentRouteIdForPage(copy?.id as string),
+    ).toEqual(pageNavigationStore.getParentRouteIdForPage(child.id));
+  });
+
+  test('duplicating a parent copies only the parent', async () => {
+    const { pageSettingsStore, pageNavigationStore } = await initialiseAsync();
+
+    const parent = pageSettingsStore.addNewPage({ title: 'Portfolio' });
+
+    pageSettingsStore.addNewPage({
+      title: 'Portfolio 1',
+      newPageParentId: parent.id,
+    });
+
+    const copy = await pageSettingsStore.duplicatePage({ pageId: parent.id });
+
+    const copyRoute = pageNavigationStore.routes.find(
+      (r) => r.pageId === copy?.id,
+    );
+    const copyOrder = pageNavigationStore.orders.find(
+      (o) => o.routeId === copyRoute?.id,
+    );
+
+    expect(copyOrder?.subRoutes).toEqual([]);
+  });
+
+  test("a parent copy is the source's next sibling in orders", async () => {
+    const { pageSettingsStore, pageNavigationStore } = await initialiseAsync();
+
+    const parent = pageSettingsStore.addNewPage({ title: 'Portfolio' });
+
+    pageSettingsStore.addNewPage({
+      title: 'Portfolio 1',
+      newPageParentId: parent.id,
+    });
+
+    const parentRoute = pageNavigationStore.routes.find(
+      (r) => r.pageId === parent.id,
+    );
+    const copy = await pageSettingsStore.duplicatePage({ pageId: parent.id });
+    const copyRoute = pageNavigationStore.routes.find(
+      (r) => r.pageId === copy?.id,
+    );
+
+    const parentOrderIndex = pageNavigationStore.orders.findIndex(
+      (o) => o.routeId === parentRoute?.id,
+    );
+
+    expect(pageNavigationStore.orders[parentOrderIndex + 1].routeId).toEqual(
+      copyRoute?.id,
+    );
+
+    // pages is flat and must stay depth-first with orders, so the copy sits
+    // after the source's sub-tree - not between the parent and its children.
+    const titles = pageSettingsStore.pages.map((p) => p.title);
+
+    expect(titles.indexOf('Portfolio Copy')).toEqual(
+      titles.indexOf('Portfolio 1') + 1,
+    );
+  });
+
+  test('a hidden page yields a hidden copy that stays beside it', async () => {
+    const { pageSettingsStore, pageNavigationStore } = await initialiseAsync();
+
+    const source = pageSettingsStore.addNewPage({ title: 'About' });
+    const sourceRoute = pageNavigationStore.routes.find(
+      (r) => r.pageId === source.id,
+    );
+
+    pageSettingsStore.setPageVisibility({ isHidden: true, pageId: source.id });
+    pageNavigationStore.updateRouteVisibility(sourceRoute?.id as string, true);
+
+    const copy = await pageSettingsStore.duplicatePage({ pageId: source.id });
+
+    const copyRoute = pageNavigationStore.routes.find(
+      (r) => r.pageId === copy?.id,
+    );
+
+    expect(copy?.isHidden).toBe(true);
+    expect(copyRoute?.isHidden).toBe(true);
+
+    // reorderVisibleAndHiddenRoutes partitions root orders by visibility, so a
+    // visible copy of a hidden page would be pulled away from its source.
+    const sourceOrderIndex = pageNavigationStore.orders.findIndex(
+      (o) => o.routeId === sourceRoute?.id,
+    );
+
+    expect(pageNavigationStore.orders[sourceOrderIndex + 1].routeId).toEqual(
+      copyRoute?.id,
+    );
+  });
+
+  test('makes the copy the active page', async () => {
+    const { pageSettingsStore, pageNavigationStore } = await initialiseAsync();
+
+    const source = pageSettingsStore.addNewPage({ title: 'About' });
+
+    const copy = await pageSettingsStore.duplicatePage({ pageId: source.id });
+
+    expect(pageNavigationStore.activePageId).toEqual(copy?.id);
+  });
+
+  test('at the page limit adds nothing and attributes the upsell to duplicate_page', async () => {
+    const { pageSettingsStore, userStore } = await initialiseAsync();
+
+    userStore.setUserState({
+      features: {
+        ...USER_FEATURES,
+        maxNumOfPages: pageSettingsStore.pages.length,
+      },
+    });
+
+    const pageCount = pageSettingsStore.pages.length;
+
+    const uiStore = useUiStore();
+    const modalSpy = vi
+      .spyOn(uiStore, 'showUpgradeModalAndSaveAsync')
+      .mockResolvedValue(undefined as never);
+
+    const copy = await pageSettingsStore.duplicatePage({
+      pageId: pageSettingsStore.pages[0].id,
+    });
+
+    expect(copy).toBeUndefined();
+    expect(pageSettingsStore.pages).toHaveLength(pageCount);
+    expect(modalSpy).toHaveBeenCalled();
+
+    // Attribution is the reason DUPLICATE_PAGE exists - without this the funnel
+    // can silently regress to add_new_page and still look fine. The bridge
+    // state is module-level, so it is read back through a published event.
+    const eventTracker = useEventTracker();
+    const events: { eventProps: { cta_location?: string } }[] = [];
+
+    eventTracker.subscribe((e) => events.push(e));
+    // sendUpsellOpenEvent would overwrite cta_location with its own optional arg.
+    eventTracker.sendUpsellContinuationEvent('exit');
+
+    expect(events[events.length - 1]?.eventProps.cta_location).toEqual(
+      'duplicate_page',
+    );
+
+    modalSpy.mockRestore();
+  });
+
+  test("the copy's page and nav route both live in brandPageData", async () => {
+    // Undo restores brandPageData wholesale, so anything not in it survives an
+    // undo. Both halves of a duplicate have to be in there or undo would drop
+    // the page and strand its nav entry.
+    const { pageSettingsStore } = await initialiseAsync();
+    const makerStore = useBrandPageMakerStore();
+
+    const source = pageSettingsStore.addNewPage({ title: 'About' });
+    const copy = await pageSettingsStore.duplicatePage({ pageId: source.id });
+
+    const snapshot = makerStore.brandPageData;
+
+    expect(snapshot.pages.some((p) => p.id === copy?.id)).toBe(true);
+    expect(snapshot.nav.routes.some((r) => r.pageId === copy?.id)).toBe(true);
+    expect(
+      snapshot.nav.orders.some((o) =>
+        snapshot.nav.routes.some(
+          (r) => r.id === o.routeId && r.pageId === copy?.id,
+        ),
+      ),
+    ).toBe(true);
+  });
+
+  test('adds the copy shop products to the site-wide catalogue', async () => {
+    // The catalogue is derived from the shop blocks and is what the save
+    // upserts. Without a re-derive the copy's fresh product ids never reach the
+    // backend and checkout cannot resolve them on the copied page.
+    const { pageSettingsStore } = await initialiseAsync();
+    const shopConfigStore = useShopConfigStore();
+
+    const source = pageSettingsStore.addNewPage({ title: 'Shop' });
+
+    pageSettingsStore.setPageContents({
+      pageId: source.id,
+      contents: [
+        {
+          id: 'shop-1',
+          type: 'shop-section',
+          settings: {
+            content: {
+              id: 'shop-1',
+              type: 'shop-section',
+              products: [
+                { id: 'product-1', name: 'Latte', variant: [], skus: [] },
+              ],
+              shopPaymentConfig: { paymentConfig: { id: 'stripe-1' } },
+            },
+          },
+        } as unknown as ContentItem<Content>,
+      ],
+    });
+
+    shopConfigStore.initialiseShopStore({
+      paymentConfig: { id: 'stripe-1' } as never,
+      pages: toPageModels(pageSettingsStore.pages) as never,
+    });
+
+    expect(shopConfigStore.products).toHaveLength(1);
+
+    await pageSettingsStore.duplicatePage({ pageId: source.id });
+
+    expect(shopConfigStore.products).toHaveLength(2);
+
+    const ids = shopConfigStore.products.map((p) => p.id);
+
+    expect(new Set(ids).size).toBe(2);
+    expect(shopConfigStore.paymentConfig?.id).toEqual('stripe-1');
+  });
+
+  test('is a no-op for an unknown page id', async () => {
+    const { pageSettingsStore } = await initialiseAsync();
+
+    const pageCount = pageSettingsStore.pages.length;
+
+    const copy = await pageSettingsStore.duplicatePage({
+      pageId: 'does-not-exist',
+    });
+
+    expect(copy).toBeUndefined();
+    expect(pageSettingsStore.pages).toHaveLength(pageCount);
+  });
+});
+
+describe('syncPagesWithOrders', () => {
+  const initialiseAsync = async () => {
+    const store = useBrandPageMakerStore();
+    const userStore = useBrandPageMakerUserStore();
+    const pageSettingsStore = useUiPageSettingsStore();
+
+    userStore.setUserState({
+      features: {
+        ...USER_FEATURES,
+        maxNumOfPages: UNLIMITED_MAX_NUM_OF_PAGES,
+      },
+    });
+
+    await store.initialise(INITIALISE_PAYLOAD);
+
+    return { pageSettingsStore, pageNavigationStore: usePageNavigationStore() };
+  };
+
+  beforeAll(async () => {
+    FabricRenderClient.setInstance({ baseUrl: 'http://localhost:3000' });
+
+    setActivePinia(createPinia());
+
+    await setLocaleAsync('en-US');
+  });
+
+  test('reorders pages to match the order of their routes', async () => {
+    const { pageSettingsStore, pageNavigationStore } = await initialiseAsync();
+
+    pageSettingsStore.addNewPage({ title: 'About' });
+    pageSettingsStore.addNewPage({ title: 'Contact' });
+
+    pageNavigationStore.orders.reverse();
+
+    pageSettingsStore.syncPagesWithOrders();
+
+    const orderedPageIds = pageNavigationStore.orders.map(
+      (order) =>
+        pageNavigationStore.routes.find((r) => r.id === order.routeId)?.pageId,
+    );
+
+    expect(pageSettingsStore.pages.map((p) => p.id)).toEqual(orderedPageIds);
+  });
+
+  test('keeps a page that has no route yet', async () => {
+    const { pageSettingsStore } = await initialiseAsync();
+
+    const orphan = { ...pageSettingsStore.pages[0], id: 'no-route-yet' };
+
+    pageSettingsStore.setPages({
+      pages: [...pageSettingsStore.pages, orphan],
+    });
+
+    pageSettingsStore.syncPagesWithOrders();
+
+    expect(pageSettingsStore.pages.map((p) => p.id)).toContain('no-route-yet');
+  });
+
+  test('leaves pages untouched when no route resolves to a page', async () => {
+    const { pageSettingsStore, pageNavigationStore } = await initialiseAsync();
+
+    pageSettingsStore.addNewPage({ title: 'About' });
+
+    const before = pageSettingsStore.pages.map((p) => p.id);
+
+    // Mid-flight state: orders exist but none of them names a page yet.
+    // Re-deriving from that would wipe the site.
+    pageNavigationStore.routes = [];
+
+    pageSettingsStore.syncPagesWithOrders();
+
+    expect(pageSettingsStore.pages.map((p) => p.id)).toEqual(before);
+  });
+});

package/src/shared/page-settings/store/page-settings-store.ts

@@ -20,11 +20,17 @@ import type {
   LogoTemplateImageModel,
   BrandPagePaymentConfig,
   BrandPagePaymentConfigCurrency,
+  NavOrder,
   NavRoute,
 } from '@brand-page';
 import { v4 as uuid } from 'uuid';
 import type { ContentPage } from '../models';
 import { PAGE_SECTIONS } from '../models';
+import { toPageModels } from '../utils';
+import {
+  duplicatePageContents,
+  getDuplicatePageTitle,
+} from '../duplicate-page.util';
 import { navigateToPageByPageId } from '@brand-page-maker/routing';
 import { getPageSlugFromPageTitle } from '@brand-page-maker/utils';
 import { useUiContentSettingsStore } from '../../content-settings/store';
@@ -163,6 +169,71 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
     setPages({ pages }: { pages: ContentPage[] }): void {
       this.pages = pages;
     },
+    // `orders` is the hierarchy; `pages` is a flat list that has to match it
+    // depth-first, because row indexes drive the home check and the hide/delete
+    // gating. Anything reshaping orders should re-derive pages after - except
+    // addNewPage, which predates this and appends by visibility instead; the
+    // next drag-end catches it up.
+    syncPagesWithOrders(): void {
+      const pageNavigationStore = usePageNavigationStore();
+      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?.length) {
+            collectPageIds(order.subRoutes);
+          }
+        }
+      };
+
+      collectPageIds(pageNavigationStore.orders);
+
+      if (!pageIdOrder.length) {
+        return;
+      }
+
+      const pageMap = new Map<string, ContentPage>(
+        this.pages.map((page) => [page.id, page]),
+      );
+
+      const orderedPages: ContentPage[] = [];
+
+      for (const pageId of pageIdOrder) {
+        const page = pageMap.get(pageId);
+
+        if (page) {
+          orderedPages.push(page);
+          pageMap.delete(pageId);
+        }
+      }
+
+      // A page with no route would otherwise vanish.
+      orderedPages.push(...pageMap.values());
+
+      this.setPages({ pages: orderedPages });
+    },
+    async showPageLimitUpgradeModalAsync(ctaLocation: string): Promise<void> {
+      const uiStore = useUiStore();
+      const eventTracker = useEventTracker();
+
+      eventTracker.setUpsellBridgeState({
+        cta_location: ctaLocation,
+        trigger_type: TRIGGER_TYPE.AUTOMATIC,
+        content_type: null,
+      });
+
+      await uiStore.showUpgradeModalAndSaveAsync(
+        WEBSITE_UPGRADE_CONTEXT_TYPES.AddPage,
+      );
+    },
     async setNewPageModalVisibilityAsync({
       isNewPageModalVisible,
       parentPageId,
@@ -170,18 +241,9 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
       isNewPageModalVisible: boolean;
       parentPageId?: string;
     }) {
-      const uiStore = useUiStore();
-      const eventTracker = useEventTracker();
-
       if (isNewPageModalVisible && !this.canAddPage) {
-        eventTracker.setUpsellBridgeState({
-          cta_location: UPGRADE_CTA_LOCATIONS.ADD_NEW_PAGE,
-          trigger_type: TRIGGER_TYPE.AUTOMATIC,
-          content_type: null,
-        });
-
-        await uiStore.showUpgradeModalAndSaveAsync(
-          WEBSITE_UPGRADE_CONTEXT_TYPES.AddPage,
+        await this.showPageLimitUpgradeModalAsync(
+          UPGRADE_CTA_LOCATIONS.ADD_NEW_PAGE,
         );
 
         return;
@@ -477,6 +539,78 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
 
       return newPage;
     },
+    async duplicatePage({
+      pageId,
+    }: {
+      pageId: string;
+    }): Promise<ContentPage | undefined> {
+      const pageNavigationStore = usePageNavigationStore();
+
+      // Gate first: a paywalled duplicate must not leave a half-created page.
+      if (!this.canAddPage) {
+        await this.showPageLimitUpgradeModalAsync(
+          UPGRADE_CTA_LOCATIONS.DUPLICATE_PAGE,
+        );
+
+        return undefined;
+      }
+
+      const sourcePage = this.pages.find((page) => page.id === pageId);
+
+      const sourceRoute = pageNavigationStore.routes.find(
+        (route) => route.pageId === pageId,
+      );
+
+      if (!sourcePage || !sourceRoute) {
+        return undefined;
+      }
+
+      const parentRouteId = pageNavigationStore.getParentRouteIdForPage(pageId);
+
+      const title = getDuplicatePageTitle(
+        sourcePage.title,
+        pageNavigationStore.getDisplayNamesForDepth(parentRouteId),
+        Boolean(parentRouteId),
+      );
+
+      const newPage: ContentPage = {
+        id: uuid(),
+        title,
+        contents: duplicatePageContents(sourcePage.contents),
+        // A copy of a hidden page stays hidden, or it publishes into the nav.
+        isHidden: sourcePage.isHidden,
+      };
+
+      // addNavRoute navigates to the copy and reads its contents, so the page
+      // has to exist before the route does. syncPagesWithOrders places it.
+      this.setPages({ pages: [...this.pages, newPage] });
+
+      const newRoute: NavRoute = {
+        id: uuid(),
+        pageId: newPage.id,
+        pageSlug: getPageSlugFromPageTitle(
+          title,
+          pageNavigationStore.getPageSlugsForDepth(parentRouteId),
+        ),
+        isHidden: Boolean(sourceRoute.isHidden),
+        displayName: title,
+      };
+
+      pageNavigationStore.addNavRoute(newRoute, parentRouteId, sourceRoute.id);
+
+      this.syncPagesWithOrders();
+
+      // shopConfig.products is DERIVED from the shop blocks, not updated with
+      // them - without this the copy's fresh product ids never reach the save.
+      const shopConfigStore = useShopConfigStore();
+
+      shopConfigStore.initialiseShopStore({
+        paymentConfig: shopConfigStore.paymentConfig,
+        pages: toPageModels(this.pages),
+      });
+
+      return newPage;
+    },
     setSelectedSectionName({
       sectionName,
     }: {

package/src/shared/page-settings/utils.ts

@@ -1,8 +1,18 @@
+import type { PageModel } from '@brand-page';
 import { errorTr } from '@src/composables/useTranslate';
+import type { ContentPage } from './models';
 
 export const MAX_PAGE_TITLE_LENGTH = 30;
 export const MAX_SUBPAGE_TITLE_LENGTH = 20;
 
+// The maker holds a page's sections as ContentItems (settings wrapper + content);
+// everything that consumes a BrandPageModel wants the bare content.
+export const toPageModels = (pages: ContentPage[]): PageModel[] =>
+  pages.map((page) => ({
+    ...page,
+    contents: page.contents.map((item) => item.settings.content),
+  })) as PageModel[];
+
 export const getPageTitleError = (
   pageTitle: string,
   isSubPage: boolean,