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

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-live-preview-1",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/models/brand-page-context.model.ts

@@ -48,17 +48,10 @@ export interface AbTestResult {
 
 const AB_TEST_KEYS = {
   BP_3926_FREEMIUM_WATERMARK: 'bc-bp-3926-freemium-cta-in-website-editor',
-  // Two separate live-preview experiments — bc-net sends only the one for the
-  // current purchase state, and a user's value on each side is independent
-  // (BP-5873). Keys must match `CampaignNames.LivePreview*Test` in bc-net.
-  BP_5873_LIVE_PREVIEW_PREPURCHASE: 'bc-bp-5873-live-preview-prepurchase',
-  BP_5873_LIVE_PREVIEW_POSTPURCHASE: 'bc-bp-5873-live-preview-postpurchase',
 };
 
 export interface AbTest {
   bp_3926_freemium_watermark?: AbTestResult;
-  bp_5873_live_preview_prepurchase?: AbTestResult;
-  bp_5873_live_preview_postpurchase?: AbTestResult;
 }
 
 export const MEDIA_SIZES = {
@@ -139,21 +132,5 @@ export const getAbTestResults = (abtestKeyValues: AbTest): AbTest => {
     );
   }
 
-  // AB Test for BP-5873 - Live preview (pre- and post-purchase run separately)
-
-  if (abtestKeyValues[AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_PREPURCHASE]) {
-    abTests.bp_5873_live_preview_prepurchase = getValueType(
-      AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_PREPURCHASE,
-      abtestKeyValues[AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_PREPURCHASE],
-    );
-  }
-
-  if (abtestKeyValues[AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_POSTPURCHASE]) {
-    abTests.bp_5873_live_preview_postpurchase = getValueType(
-      AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_POSTPURCHASE,
-      abtestKeyValues[AB_TEST_KEYS.BP_5873_LIVE_PREVIEW_POSTPURCHASE],
-    );
-  }
-
   return abTests;
 };

package/src/brand-page-maker/components/action-bar/ActionBar.mixin.ts

@@ -17,16 +17,6 @@ export default defineComponent({
 
     return {
       isAdminMaker: computed(() => containerStore.isAdminMaker),
-      // BP-5873: the Preview button is behind an AB test, and pre/post purchase are
-      // two separate experiments. Pick the one for the current purchase state — a
-      // user's value on the other side is independent and must not leak across.
-      isLivePreviewEnabled: computed(() => {
-        const experiment = containerStore.isPrePurchase
-          ? containerStore.abTests.bp_5873_live_preview_prepurchase
-          : containerStore.abTests.bp_5873_live_preview_postpurchase;
-
-        return !!experiment?.isVariation;
-      }),
       isSaving: computed(() => brandPageMakerStore.isSaving),
       isPublished: computed(() => brandPageMakerStore.isPublished),
       isPublishButtonEnabled: computed(

package/src/brand-page-maker/components/action-bar/ActionBarNavigation.test.ts

@@ -3,31 +3,13 @@ import { createPinia, setActivePinia } from 'pinia';
 import { shallowMount } from '@vue/test-utils';
 import ActionBarNavigation from './ActionBarNavigation.vue';
 import { useBrandPageContainerStore } from '@brand-page-maker/stores';
-import { getAbTestResults } from '@brand-page/models/brand-page-context.model';
-
-// Must match `CampaignNames.LivePreview*` in bc-net. The two experiments share
-// one set of variation values — they're told apart by campaign key, not value.
-const PREPURCHASE = 'bc-bp-5873-live-preview-prepurchase';
-const POSTPURCHASE = 'bc-bp-5873-live-preview-postpurchase';
-const VARIATION_1 = 'bp-5873-variation-1';
-const CONTROL = 'bp-5873-control';
 
 const mountBar = () => shallowMount(ActionBarNavigation);
 
 const hasPreviewButton = (wrapper: ReturnType<typeof mountBar>) =>
   wrapper.find('[data-test-preview-button]').exists();
 
-// The AB value arrives as the raw bc-net campaign string, so go through the real
-// parser rather than hand-building an AbTestResult — that's the contract under test.
-const setAbTest = (
-  store: ReturnType<typeof useBrandPageContainerStore>,
-  key: string,
-  value: string,
-) => {
-  store.abTests = getAbTestResults({ [key]: value } as never);
-};
-
-describe('ActionBarNavigation — BP-5873 preview AB test', () => {
+describe('ActionBarNavigation — Preview button', () => {
   let containerStore: ReturnType<typeof useBrandPageContainerStore>;
 
   beforeEach(() => {
@@ -35,39 +17,18 @@ describe('ActionBarNavigation — BP-5873 preview AB test', () => {
     containerStore = useBrandPageContainerStore();
   });
 
-  test('hides Preview when no AB value has been sent', () => {
-    expect(hasPreviewButton(mountBar())).toBe(false);
-  });
-
-  test('post-purchase: shows Preview on variation-1, hides it on control', () => {
-    containerStore.isPrePurchase = false;
-
-    setAbTest(containerStore, POSTPURCHASE, VARIATION_1);
-    expect(hasPreviewButton(mountBar())).toBe(true);
-
-    setAbTest(containerStore, POSTPURCHASE, CONTROL);
-    expect(hasPreviewButton(mountBar())).toBe(false);
-  });
-
-  test('pre-purchase: shows Preview on variation-1, hides it on control', () => {
-    containerStore.isPrePurchase = true;
+  test.each([
+    ['pre-purchase', true],
+    ['post-purchase', false],
+  ])('shows Preview to the customer %s', (_, isPrePurchase) => {
+    containerStore.isPrePurchase = isPrePurchase;
 
-    setAbTest(containerStore, PREPURCHASE, VARIATION_1);
     expect(hasPreviewButton(mountBar())).toBe(true);
-
-    setAbTest(containerStore, PREPURCHASE, CONTROL);
-    expect(hasPreviewButton(mountBar())).toBe(false);
   });
 
-  // Two separate experiments, so a value on one side must never satisfy the other —
-  // otherwise a post-purchase variation would leak the button into pre-purchase.
-  test('the two experiments never read each other', () => {
-    containerStore.isPrePurchase = true;
-    setAbTest(containerStore, POSTPURCHASE, VARIATION_1);
-    expect(hasPreviewButton(mountBar())).toBe(false);
+  test('hides Preview in the admin maker', () => {
+    containerStore.isAdminMaker = true;
 
-    containerStore.isPrePurchase = false;
-    setAbTest(containerStore, PREPURCHASE, VARIATION_1);
     expect(hasPreviewButton(mountBar())).toBe(false);
   });
 
@@ -75,8 +36,6 @@ describe('ActionBarNavigation — BP-5873 preview AB test', () => {
   // Save drops out. Preview must be a real column like the rest — while it was content
   // width, Publish ate the whole remaining row on a published site.
   test('Preview shares the mobile row equally with the other buttons', () => {
-    containerStore.isPrePurchase = false;
-    setAbTest(containerStore, POSTPURCHASE, VARIATION_1);
     containerStore.brandPageStatus = 'Published';
 
     const wrapper = mountBar();

package/src/brand-page-maker/components/action-bar/ActionBarNavigation.vue

@@ -4,7 +4,7 @@
     class="tw-flex tw-items-center tw-border-t tw-border-solid tw-border-grayscale-600 tw-h-12 tw-px-2 lg:tw-px-0 lg:tw-h-auto lg:tw-border-none tw-gap-3 lg:tw-gap-5 tw-w-full lg:tw-justify-end tw-box-border"
   >
     <Button
-      v-if="!isAdminMaker && isLivePreviewEnabled"
+      v-if="!isAdminMaker"
       :label="constantsTr('previewDisplayName')"
       variant="no-border"
       :white="true"

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);

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>();