@designcrowd/library.brand-page 6.2.1 → 6.2.2

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,10 @@ 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 { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
+import { toPageModels } from '../utils';
 
 vi.mock('../../../clients/brand-page-client', () => ({
   default: {
@@ -371,3 +376,509 @@ 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("deleting the copy's product leaves the source's product alone", async () => {
+    // The consequence the id rotation exists to prevent. `deleteProduct` filters
+    // the site-wide catalogue BY ID, so a copy that kept the source's ids would
+    // take the original's row down with it - silently, until the next save.
+    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,
+    });
+
+    const copy = await pageSettingsStore.duplicatePage({ pageId: source.id });
+
+    const copyProductId = (
+      copy?.contents[0].settings.content as unknown as {
+        products: { id: string }[];
+      }
+    ).products[0].id;
+
+    shopConfigStore.deleteProduct(copyProductId);
+
+    expect(shopConfigStore.products.map((p) => p.id)).toEqual(['product-1']);
+  });
+
+  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('undo removes both halves of a duplicate', async () => {
+    // duplicatePage writes to two stores - the page into page-settings, the
+    // route into page-navigation. A snapshot that caught only one would leave
+    // an orphan behind on undo.
+    const { pageSettingsStore, pageNavigationStore } = await initialiseAsync();
+    const historyStore = useHistoryStore();
+
+    const source = pageSettingsStore.addNewPage({ title: 'About' });
+
+    historyStore.captureBaseline();
+
+    const copy = await pageSettingsStore.duplicatePage({ pageId: source.id });
+
+    historyStore.capture({ source: 'manual_edit', actor: 'user' });
+
+    await historyStore.undo();
+
+    expect(pageSettingsStore.pages.map((p) => p.id)).not.toContain(copy?.id);
+    expect(pageNavigationStore.routes.some((r) => r.pageId === copy?.id)).toBe(
+      false,
+    );
+  });
+
+  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);
+  });
+});