@designcrowd/library.brand-page 6.2.1 → 6.2.2

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,