@designcrowd/library.brand-page 6.2.1 → 6.2.2

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

@@ -54,6 +54,8 @@ export declare const useUiPageSettingsStore: import("pinia").StoreDefinition<"ui
     setPages({ pages }: {
         pages: ContentPage[];
     }): void;
+    syncPagesWithOrders(): void;
+    showPageLimitUpgradeModalAsync(ctaLocation: string): Promise<void>;
     setNewPageModalVisibilityAsync({ isNewPageModalVisible, parentPageId, }: {
         isNewPageModalVisible: boolean;
         parentPageId?: string;
@@ -103,6 +105,9 @@ export declare const useUiPageSettingsStore: import("pinia").StoreDefinition<"ui
         title: string;
         newPageParentId?: string;
     }): ContentPage;
+    duplicatePage({ pageId, }: {
+        pageId: string;
+    }): Promise<ContentPage | undefined>;
     setSelectedSectionName({ sectionName, }: {
         sectionName?: PageSettingsSection;
     }): void;

package/lib/src/shared/page-settings/store/page-settings-store.js

@@ -2,6 +2,8 @@ import { defineStore } from 'pinia';
 import { PageHeaderDesktop, PageHeaderMobile, PageFooterDesktop, PageFooterMobile, VIEWPORTS, getNavigationType, } from '@brand-page';
 import { v4 as uuid } from 'uuid';
 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';
@@ -78,16 +80,55 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
         setPages({ pages }) {
             this.pages = pages;
         },
-        async setNewPageModalVisibilityAsync({ isNewPageModalVisible, parentPageId, }) {
+        // `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() {
+            const pageNavigationStore = usePageNavigationStore();
+            const pageIdOrder = [];
+            const collectPageIds = (orders) => {
+                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(this.pages.map((page) => [page.id, page]));
+            const orderedPages = [];
+            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) {
             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, }) {
             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;
             }
             this.isNewPageModalVisible = isNewPageModalVisible;
@@ -231,6 +272,48 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
             }
             return newPage;
         },
+        async duplicatePage({ pageId, }) {
+            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 = {
+                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 = {
+                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, }) {
             this.selectedSectionName = sectionName;
             if (!sectionName) {

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

@@ -1,3 +1,6 @@
+import type { PageModel } from '@brand-page';
+import type { ContentPage } from './models';
 export declare const MAX_PAGE_TITLE_LENGTH = 30;
 export declare const MAX_SUBPAGE_TITLE_LENGTH = 20;
+export declare const toPageModels: (pages: ContentPage[]) => PageModel[];
 export declare const getPageTitleError: (pageTitle: string, isSubPage: boolean) => string | null;

package/lib/src/shared/page-settings/utils.js

@@ -1,6 +1,12 @@
 import { errorTr } from '@src/composables/useTranslate';
 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) => pages.map((page) => ({
+    ...page,
+    contents: page.contents.map((item) => item.settings.content),
+}));
 export const getPageTitleError = (pageTitle, isSubPage) => {
     if (!pageTitle) {
         return errorTr('pageTitleError');

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts

@@ -650,6 +650,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         sendWebsiteManageAddPageEvent: (pageName: string, isSubPageMode?: boolean) => void;
         sendWebsiteManageRemovePageEvent: (pageName: string, isRouteNested?: boolean) => void;
         sendWebsiteManageReorderPageEvent: (pageName: string) => void;
+        sendWebsiteManageDuplicatePageEvent: (sourcePageName: string, isSubPage?: boolean) => void;
         sendPublishOptionsForFreeEvent: () => void;
         sendPublishOptionsForPremiumEvent: () => void;
         sendPublishOptionsForExitEvent: () => void;

package/lib/src/shared/side-bar/components/SideBarTabButton.mixin.d.ts

@@ -60,6 +60,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         sendWebsiteManageAddPageEvent: (pageName: string, isSubPageMode?: boolean) => void;
         sendWebsiteManageRemovePageEvent: (pageName: string, isRouteNested?: boolean) => void;
         sendWebsiteManageReorderPageEvent: (pageName: string) => void;
+        sendWebsiteManageDuplicatePageEvent: (sourcePageName: string, isSubPage?: boolean) => void;
         sendPublishOptionsForFreeEvent: () => void;
         sendPublishOptionsForPremiumEvent: () => void;
         sendPublishOptionsForExitEvent: () => void;

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -994,6 +994,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         sendWebsiteManageAddPageEvent: (pageName: string, isSubPageMode?: boolean) => void;
         sendWebsiteManageRemovePageEvent: (pageName: string, isRouteNested?: boolean) => void;
         sendWebsiteManageReorderPageEvent: (pageName: string) => void;
+        sendWebsiteManageDuplicatePageEvent: (sourcePageName: string, isSubPage?: boolean) => void;
         sendPublishOptionsForFreeEvent: () => void;
         sendPublishOptionsForPremiumEvent: () => void;
         sendPublishOptionsForExitEvent: () => void;

package/lib/src/shared/template-settings/components/TemplatesSettings.mixin.d.ts

@@ -175,6 +175,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         sendWebsiteManageAddPageEvent: (pageName: string, isSubPageMode?: boolean) => void;
         sendWebsiteManageRemovePageEvent: (pageName: string, isRouteNested?: boolean) => void;
         sendWebsiteManageReorderPageEvent: (pageName: string) => void;
+        sendWebsiteManageDuplicatePageEvent: (sourcePageName: string, isSubPage?: boolean) => void;
         sendPublishOptionsForFreeEvent: () => void;
         sendPublishOptionsForPremiumEvent: () => void;
         sendPublishOptionsForExitEvent: () => void;

package/lib/src/tracker.mjs

@@ -1,4 +1,4 @@
-import { A as N, E as O, G as _, P as I, a as A, b as a, c as S, S as s, T as C, U as L, u as P } from "./useEventTracker-C5Ql5p7u.js";
+import { A as N, E as O, G as _, P as I, a as A, b as a, c as S, S as s, T as C, U as L, u as P } from "./useEventTracker-DwPTmzpa.js";
 export {
   N as AI_CTA_LOCATIONS,
   O as EVENTS,

package/lib/src/{useEventTracker-C5Ql5p7u.js → useEventTracker-DwPTmzpa.js}

@@ -9,6 +9,7 @@ const E = {
   WEBSITE_MAKER_ADD_PAGE: "website_maker_add_page",
   WEBSITE_MAKER_REMOVE_PAGE: "website_maker_remove_page",
   WEBSITE_MAKER_REORDER_PAGE: "website_maker_reorder_page",
+  WEBSITE_MAKER_DUPLICATE_PAGE: "website_maker_duplicate_page",
   WEBSITE_MAKER_OPEN: "website_maker_open",
   WEBSITE_MAKER_PUBLISH_UPSELL_OPTION_MODAL: "website_maker_publish_upsell_option_modal",
   WEBSITE_MAKER_TEMPLATE_SEARCH: "website_maker_template_search",
@@ -62,6 +63,7 @@ const E = {
   REMOVE_WATERMARK_FOOTER_SETTINGS: "remove_watermark_footer_settings",
   PREVIEW_WATERMARK: "preview_watermark",
   ADD_NEW_PAGE: "add_new_page",
+  DUPLICATE_PAGE: "duplicate_page",
   ADD_CONTENT: "add_content",
   EDITOR_PUBLISH_TOP: "editor_publish_top",
   EDITOR_PUBLISH_BOTTOM: "editor_publish_bottom",
@@ -99,14 +101,14 @@ const E = {
   upsellOpenEventProps: {},
   domainUpsellOpenEventProps: {},
   publishOpenEventProps: {}
-}), l = I([]), _ = (o, A, e = !1, t = "maker_editor") => {
+}), l = I([]), _ = (A, o, e = !1, t = "maker_editor") => {
   l.value.forEach((s) => {
     s({
       scope: t,
-      eventName: o,
+      eventName: A,
       eventProps: {
         ...e ? {} : T.value,
-        ...A
+        ...o
       }
     });
   });
@@ -216,6 +218,14 @@ const E = {
       page_name: e
     });
   },
+  // The SOURCE page, not the copy: tracking the copy would fragment the
+  // dimension across "About Copy", "About Copy 2".
+  sendWebsiteManageDuplicatePageEvent: (e, t) => {
+    _(E.WEBSITE_MAKER_DUPLICATE_PAGE, {
+      page_name: e,
+      is_sub_page: !!t
+    });
+  },
   sendPublishOptionsForFreeEvent: () => {
     _(E.WEBSITE_MAKER_PUBLISH_UPSELL_OPTION_MODAL, {
       upsell_option_continuation: i.FREEMIUM

package/package.json

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

package/src/brand-page-maker/composables/useEventTracker.ts

@@ -39,6 +39,7 @@ export const EVENTS = {
   WEBSITE_MAKER_ADD_PAGE: 'website_maker_add_page',
   WEBSITE_MAKER_REMOVE_PAGE: 'website_maker_remove_page',
   WEBSITE_MAKER_REORDER_PAGE: 'website_maker_reorder_page',
+  WEBSITE_MAKER_DUPLICATE_PAGE: 'website_maker_duplicate_page',
   WEBSITE_MAKER_OPEN: 'website_maker_open',
   WEBSITE_MAKER_PUBLISH_UPSELL_OPTION_MODAL:
     'website_maker_publish_upsell_option_modal',
@@ -107,6 +108,7 @@ export const UPGRADE_CTA_LOCATIONS = {
   REMOVE_WATERMARK_FOOTER_SETTINGS: 'remove_watermark_footer_settings',
   PREVIEW_WATERMARK: 'preview_watermark',
   ADD_NEW_PAGE: 'add_new_page',
+  DUPLICATE_PAGE: 'duplicate_page',
   ADD_CONTENT: 'add_content',
   EDITOR_PUBLISH_TOP: 'editor_publish_top',
   EDITOR_PUBLISH_BOTTOM: 'editor_publish_bottom',
@@ -346,6 +348,17 @@ const useEventTracker = () => {
         page_name: pageName,
       });
     },
+    // The SOURCE page, not the copy: tracking the copy would fragment the
+    // dimension across "About Copy", "About Copy 2".
+    sendWebsiteManageDuplicatePageEvent: (
+      sourcePageName: string,
+      isSubPage?: boolean,
+    ) => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_DUPLICATE_PAGE, {
+        page_name: sourcePageName,
+        is_sub_page: Boolean(isSubPage),
+      });
+    },
     sendPublishOptionsForFreeEvent: () => {
       _publishEvent(EVENTS.WEBSITE_MAKER_PUBLISH_UPSELL_OPTION_MODAL, {
         upsell_option_continuation:

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.ts

@@ -93,6 +93,7 @@ import {
   UI_SCREENSIZE_MODES,
 } from '@shared/models';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
+import { toPageModels } from '@shared/page-settings/utils';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
 import { useBrandPageContainerStore } from '../brandpage-container';
 import { useLocalisedRouteStore } from '../route/localised-route-store';
@@ -1924,10 +1925,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const pageNavigationStore = usePageNavigationStore();
       const paletteStore = useUiColorPaletteStore();
 
-      const pages = pageSettingsStore.pages.map((p) => ({
-        ...p,
-        contents: p.contents.map((c) => c.settings.content),
-      })) as PageModel[];
+      const pages = toPageModels(pageSettingsStore.pages);
 
       const backgroundStyles = backgroundSettingsStore.backgroundStyles;
       const logoStyles = styleSettingsStore.logoStyles;

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

@@ -1856,7 +1856,9 @@
     "showPage": "Seite anzeigen",
     "hidePage": "Seite ausblenden",
     "delete": "Seite löschen",
-    "addSubPage": "Unterseite hinzufügen"
+    "addSubPage": "Unterseite hinzufügen",
+    "duplicatePage": "Seite duplizieren",
+    "duplicatePageTitle": "{{title}} Kopieren"
   },
   "pageSettingsSection": {
     "showNavigationBelow": "Navigation unter dem Logo anzeigen",

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

@@ -1856,7 +1856,9 @@
     "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"
   },
   "pageSettingsSection": {
     "showNavigationBelow": "Muestra la navegación debajo del logo",

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

@@ -1856,7 +1856,9 @@
     "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"
   },
   "pageSettingsSection": {
     "showNavigationBelow": "Afficher la navigation sous le logo",

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

@@ -1856,7 +1856,9 @@
     "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}}"
   },
   "pageSettingsSection": {
     "showNavigationBelow": "Afficher la navigation sous le logo",

package/src/bundles/bundled-translations.json

@@ -1856,7 +1856,9 @@
     "showPage": "Show page",
     "hidePage": "Hide page",
     "delete": "Delete page",
-    "addSubPage": "Add subpage"
+    "addSubPage": "Add subpage",
+    "duplicatePage": "Duplicate page",
+    "duplicatePageTitle": "{{title}} Copy"
   },
   "pageSettingsSection": {
     "showNavigationBelow": "Show navigation below logo",

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

@@ -1856,7 +1856,9 @@
     "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"
   },
   "pageSettingsSection": {
     "showNavigationBelow": "Mostrar navegação abaixo do logotipo",

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

@@ -1856,7 +1856,9 @@
     "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"
   },
   "pageSettingsSection": {
     "showNavigationBelow": "Mostrar a navegação por baixo do logótipo",

package/src/composables/useTranslate.ts

@@ -142,7 +142,8 @@ const productConfigOptionTr = (key) => tr(`productConfigOption.${key}`);
 const editLogoSettingsTr = (key) => tr(`editLogoSettings.${key}`);
 const myUploadSettingsTr = (key, valuesToInterpolate = {}) =>
   tr(`myUploadSettings.${key}`, valuesToInterpolate);
-const pageSettingsTr = (key) => tr(`pageSettings.${key}`);
+const pageSettingsTr = (key, valuesToInterpolate = {}) =>
+  tr(`pageSettings.${key}`, valuesToInterpolate);
 const pageSettingsSectionTr = (key) => tr(`pageSettingsSection.${key}`);
 const templateSettingsTr = (key) => tr(`templateSettings.${key}`);
 const unsplashLibraryTr = (key) => tr(`unsplashLibrary.${key}`);

package/src/metadata-builder/builders/item-id-utils.ts

@@ -10,6 +10,14 @@ export const END_ITEM_ANCHOR = '__end__';
 /** Generate a stable item id. Mirrors section-level `uuid.v4()` id generation. */
 export const generateItemId = (): string => uuidv4();
 
+/** Every array field the minifier surfaces to the AI as a list of items. */
+export const ITEM_ID_BEARING_FIELDS = [
+  'images',
+  'items',
+  'textItems',
+  'links',
+] as const;
+
 /**
  * Walk an entire BrandPageModel and backfill a stable uuid `id` onto every
  * nested array item that lacks one (gallery images, images/shapes/testimonial
@@ -23,8 +31,7 @@ export const generateItemId = (): string => uuidv4();
  */
 export const ensureBrandPageItemIds = (model: BrandPageModel): void => {
   const ensureContentItemIds = (content: Record<string, unknown>): void => {
-    // Every array field that the minifier surfaces as a list of items.
-    for (const field of ['images', 'items', 'textItems', 'links'] as const) {
+    for (const field of ITEM_ID_BEARING_FIELDS) {
       const arr = content[field];
 
       if (Array.isArray(arr)) ensureItemIds(arr as { id?: string }[]);

package/src/shared/ecommerce-settings/components/product-config-field/ProductConfigOption.vue

@@ -96,7 +96,6 @@ const onEditProduct = (index: number) => {
     product.enableNotes,
   );
   const tempProduct = cloneDeep(shopSettingStore.getProductById(product.id));
-  console.log(tempProduct, 'tempProduct');
   productSettingStore.openModal(tempProduct);
 };
 
@@ -147,7 +146,6 @@ const onSaveProductModal = (event: {
   onItemsChange(newProductArray);
   // Update shop store
   if (event.isNewProduct) {
-    console.log(event.product, 'new product');
     shopSettingStore.addProduct(event.product);
   } else {
     shopSettingStore.updateProduct(event.product.id, event.product);

package/src/shared/ecommerce-settings/util/refreshDuplicatedMetadata.ts

@@ -24,10 +24,9 @@ export function refreshDuplicatedMetadata(
 
   model.pages.forEach((page) =>
     page.contents.forEach((content) => {
+      rotateMonetizationIds(content);
+
       if (isShopContent(content)) {
-        // Shop products collide on the global product / sku_key tables. The shop's payment-config
-        // link is written with throwaway ids (not the content id), so only the product ids rotate.
-        content.products.forEach(rotateProductIds);
         disconnectPayment(content.shopPaymentConfig);
       } else if (isPayment(content)) {
         resetPaymentBlock(content, content.requestPaymentConfig);
@@ -40,6 +39,25 @@ export function refreshDuplicatedMetadata(
   return model;
 }
 
+/**
+ * Rotate the client-minted ids the brand-page-api keys a **global** row on — shop product / sku_key
+ * and payment-option ids. A verbatim copy collides with its source on those tables.
+ *
+ * Shared with page duplication, which wants only this half: that copy keeps the same owner, so it
+ * keeps its payment connection.
+ */
+export function rotateMonetizationIds(content: Content): void {
+  if (isShopContent(content)) {
+    // The shop's payment-config link is written with throwaway ids (not the content id), so only
+    // the product ids rotate here.
+    content.products.forEach(rotateProductIds);
+  } else if (isPayment(content)) {
+    rotatePaymentOptionIds(content.requestPaymentConfig);
+  } else if (isSupportMe(content)) {
+    rotatePaymentOptionIds(content.supportMeConfig);
+  }
+}
+
 function rotateProductIds(product: ProductModel): void {
   product.id = uuid();
 
@@ -72,19 +90,23 @@ function rotateProductIds(product: ProductModel): void {
   });
 }
 
+// `brand_page_product` is keyed on the payment-option id, so a verbatim copy would adopt the
+// source's product rows on its next payment upsert.
+function rotatePaymentOptionIds(config: PaymentConfig): void {
+  config.paymentOptions.forEach((option) => {
+    option.id = uuid();
+  });
+}
+
 /**
  * request-payment / support-me content. The api keys `content_block_payment_config` on the content
- * id (PK) and `brand_page_product` on the payment-option id (PK), both global. A verbatim copy
- * would, on its next payment upsert, repoint the source's config link and adopt its product rows —
- * so rotate both to make the copy independent, then drop the connection.
+ * id (PK), so a verbatim copy would repoint the source's config link on its next payment upsert -
+ * re-mint it, then drop the connection. (The option ids are rotated upstream, for both kinds of
+ * duplication.)
  */
 function resetPaymentBlock(content: Content, config: PaymentConfig): void {
   content.id = uuid();
 
-  config.paymentOptions.forEach((option) => {
-    option.id = uuid();
-  });
-
   disconnectPayment(config);
 }
 

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

@@ -38,13 +38,13 @@ const findParentRouteIdForRouteId = (
   return undefined;
 };
 
-// This function will find all the page slugs that exist at the depth that we're modifying, this way, we can avoid duplication of page slugs
-// This will help support the use of similar named routes, e.g /home/home-1 and /my-home/home-1
-const getPageSlugsForCurrentDepth = (
+// Routes at one depth. Slugs and titles only need to be unique among siblings,
+// so /home/home-1 and /my-home/home-1 can coexist.
+const getRoutesForCurrentDepth = (
   navModel: NavModel,
   parentRouteId?: string,
   excludeRouteId?: string,
-): string[] => {
+): NavRoute[] => {
   let ordersAtDepth: NavOrder[];
 
   if (!parentRouteId) {
@@ -60,14 +60,21 @@ const getPageSlugsForCurrentDepth = (
 
   const routeIdsAtDepth = ordersAtDepth.map((order) => order.routeId);
 
-  return navModel.routes
-    .filter(
-      (route) =>
-        routeIdsAtDepth.includes(route.id) && route.id !== excludeRouteId,
-    )
-    .map((route) => route.pageSlug);
+  return navModel.routes.filter(
+    (route) =>
+      routeIdsAtDepth.includes(route.id) && route.id !== excludeRouteId,
+  );
 };
 
+const getPageSlugsForCurrentDepth = (
+  navModel: NavModel,
+  parentRouteId?: string,
+  excludeRouteId?: string,
+): string[] =>
+  getRoutesForCurrentDepth(navModel, parentRouteId, excludeRouteId).map(
+    (route) => route.pageSlug,
+  );
+
 export const usePageNavigationStore = defineStore('pageNavigation', {
   state: (): PageNavigationState => ({
     routes: [],
@@ -102,6 +109,11 @@ export const usePageNavigationStore = defineStore('pageNavigation', {
     getPageSlugsForDepth(parentRouteId?: string): string[] {
       return getPageSlugsForCurrentDepth(this.nav, parentRouteId);
     },
+    getDisplayNamesForDepth(parentRouteId?: string): string[] {
+      return getRoutesForCurrentDepth(this.nav, parentRouteId).map(
+        (route) => route.displayName,
+      );
+    },
     getParentRouteIdForPage(pageId: string): string | undefined {
       const route = this.routes.find((r) => r.pageId === pageId);
 
@@ -143,12 +155,28 @@ export const usePageNavigationStore = defineStore('pageNavigation', {
       this.routes = nav.routes;
       this.orders = nav.orders;
     },
-    addNavRoute(newRoute: NavRoute, parentRouteId?: string): void {
+    addNavRoute(
+      newRoute: NavRoute,
+      parentRouteId?: string,
+      insertAfterRouteId?: string,
+    ): void {
       const newOrder: NavOrder = {
         routeId: newRoute.id,
         subRoutes: [],
       };
 
+      const addToSiblings = (siblings: NavOrder[]): void => {
+        const afterIndex = insertAfterRouteId
+          ? siblings.findIndex((order) => order.routeId === insertAfterRouteId)
+          : -1;
+
+        if (afterIndex === -1) {
+          siblings.push(newOrder);
+        } else {
+          siblings.splice(afterIndex + 1, 0, newOrder);
+        }
+      };
+
       if (parentRouteId) {
         // Find where to insert the new route into order
         const parentOrder = findParentOrderByRouteId(
@@ -157,7 +185,7 @@ export const usePageNavigationStore = defineStore('pageNavigation', {
         );
 
         if (parentOrder) {
-          parentOrder.subRoutes.push(newOrder);
+          addToSiblings(parentOrder.subRoutes);
         } else {
           console.error(
             `Parent route with id ${parentRouteId} not found in nav orders.`,
@@ -165,7 +193,7 @@ export const usePageNavigationStore = defineStore('pageNavigation', {
         }
       } else {
         // Push to root of orders object as this is not a nested route
-        this.orders.push(newOrder);
+        addToSiblings(this.orders);
       }
 
       this.routes.push(newRoute);