@designcrowd/library.brand-page 6.2.1 → 6.2.2

package/src/shared/page-settings/duplicate-page.util.test.ts

@@ -0,0 +1,382 @@
+import { describe, it, expect, beforeAll } from 'vitest';
+
+import { setLocaleAsync } from '@src/composables/useTranslate';
+import {
+  getDuplicatePageTitle,
+  duplicatePageContents,
+} from './duplicate-page.util';
+import {
+  getPageTitleError,
+  MAX_PAGE_TITLE_LENGTH,
+  MAX_SUBPAGE_TITLE_LENGTH,
+} from './utils';
+import type { ContentItem } from '../content-settings/models';
+import type { Content } from '@brand-page';
+
+const createContentItem = (
+  id: string,
+  type = 'text-section',
+  content: Record<string, unknown> = {},
+): ContentItem<Content> =>
+  ({
+    id,
+    type,
+    settings: {
+      content: { id, type, ...content },
+      fields: {},
+    },
+  }) as unknown as ContentItem<Content>;
+
+// The title is composed through i18next, so the real locale has to be loaded -
+// stubbing the affix would stop these tests covering the length arithmetic.
+beforeAll(async () => {
+  await setLocaleAsync('en-US');
+});
+
+describe('getDuplicatePageTitle', () => {
+  it('suffixes a root page title with Copy', () => {
+    expect(getDuplicatePageTitle('About', [], false)).toBe('About Copy');
+  });
+
+  it('leaves punctuation in the title alone', () => {
+    // The title is user content going through i18next interpolation, which
+    // escapes by default - a page called "Tom & Jerry" would come back as
+    // "Tom &amp; Jerry".
+    expect(getDuplicatePageTitle("Tom & Jerry's", [], false)).toBe(
+      "Tom & Jerry's Copy",
+    );
+  });
+
+  it('keeps a number that belongs to the original title', () => {
+    // "Portfolio 1 Copy" in the design - the 1 is part of the source name, not
+    // a duplicate index.
+    expect(getDuplicatePageTitle('Portfolio 1', [], true)).toBe(
+      'Portfolio 1 Copy',
+    );
+  });
+
+  it('indexes only when a sibling already holds the title', () => {
+    expect(getDuplicatePageTitle('About', ['About', 'About Copy'], false)).toBe(
+      'About Copy 2',
+    );
+
+    expect(
+      getDuplicatePageTitle(
+        'About',
+        ['About', 'About Copy', 'About Copy 2'],
+        false,
+      ),
+    ).toBe('About Copy 3');
+  });
+
+  it('stacks rather than re-indexing when duplicating a copy', () => {
+    // Stripping a trailing "Copy" would mangle a page genuinely named
+    // "Copy Writing".
+    expect(getDuplicatePageTitle('About Copy', ['About Copy'], false)).toBe(
+      'About Copy Copy',
+    );
+  });
+
+  it('keeps truncated copies distinct so the index is never lost', () => {
+    // Truncation trims the base, never the finished title - slicing the tail
+    // would cut the index and let two copies collapse to the same name.
+    const sourceTitle = 'B'.repeat(MAX_SUBPAGE_TITLE_LENGTH);
+    const siblings: string[] = [];
+
+    for (let i = 0; i < 5; i += 1) {
+      const next = getDuplicatePageTitle(sourceTitle, siblings, true);
+
+      expect(siblings).not.toContain(next);
+      expect(getPageTitleError(next, true)).toBeNull();
+
+      siblings.push(next);
+    }
+  });
+
+  it('truncates the base so a long root title stays within the limit', () => {
+    const sourceTitle = 'A'.repeat(MAX_PAGE_TITLE_LENGTH);
+
+    const result = getDuplicatePageTitle(sourceTitle, [], false);
+
+    expect(result.length).toBeLessThanOrEqual(MAX_PAGE_TITLE_LENGTH);
+    expect(result.endsWith('Copy')).toBe(true);
+    expect(result).not.toContain('  ');
+  });
+
+  it('applies the shorter sub-page limit', () => {
+    const sourceTitle = 'B'.repeat(MAX_SUBPAGE_TITLE_LENGTH);
+
+    const result = getDuplicatePageTitle(sourceTitle, [], true);
+
+    expect(result.length).toBeLessThanOrEqual(MAX_SUBPAGE_TITLE_LENGTH);
+    expect(result.endsWith('Copy')).toBe(true);
+  });
+
+  it('handles a source that already exceeds the limit', () => {
+    const sourceTitle = 'C'.repeat(MAX_PAGE_TITLE_LENGTH + 20);
+
+    const result = getDuplicatePageTitle(sourceTitle, [], false);
+
+    expect(result.length).toBeLessThanOrEqual(MAX_PAGE_TITLE_LENGTH);
+  });
+
+  it.each([
+    ['About', false],
+    ['Portfolio 1', true],
+    ['A'.repeat(MAX_PAGE_TITLE_LENGTH), false],
+    ['B'.repeat(MAX_SUBPAGE_TITLE_LENGTH), true],
+    ['C'.repeat(MAX_PAGE_TITLE_LENGTH + 20), false],
+    ['Contact Us Today Please', true],
+  ])(
+    'never produces a title the editor would flag: %s (isSubPage: %s)',
+    (sourceTitle, isSubPage) => {
+      const result = getDuplicatePageTitle(
+        sourceTitle as string,
+        [],
+        isSubPage as boolean,
+      );
+
+      expect(getPageTitleError(result, isSubPage as boolean)).toBeNull();
+    },
+  );
+
+  it('always returns a title no sibling already holds', () => {
+    // N siblings can block at most N candidates, so the search is bounded at
+    // N+1 and can never fall back onto a name that is already in use.
+    const taken = Array.from(
+      { length: 200 },
+      (_, i) => `About Copy${i === 0 ? '' : ` ${i + 1}`}`,
+    );
+
+    const result = getDuplicatePageTitle('About', taken, false);
+
+    expect(taken).not.toContain(result);
+    expect(getPageTitleError(result, false)).toBeNull();
+  });
+});
+
+describe('duplicatePageContents', () => {
+  it('mints a fresh id and keeps item.id and content.id in step', () => {
+    const contents = [createContentItem('a'), createContentItem('b')];
+
+    const result = duplicatePageContents(contents);
+
+    result.forEach((item, index) => {
+      expect(item.id).not.toBe(contents[index].id);
+      expect(item.id).toBe(item.settings.content.id);
+    });
+
+    expect(result[0].id).not.toBe(result[1].id);
+  });
+
+  it('deep clones so the source is untouched', () => {
+    const contents = [
+      createContentItem('a', 'text-section', { text: 'original' }),
+    ];
+
+    const result = duplicatePageContents(contents);
+
+    (result[0].settings.content as unknown as { text: string }).text =
+      'changed';
+
+    expect(
+      (contents[0].settings.content as unknown as { text: string }).text,
+    ).toBe('original');
+    expect(contents[0].id).toBe('a');
+  });
+
+  it('rotates every shop id the api keys a global row on', () => {
+    // sku_key is globally unique in the brand-page-api, and SKUs cross-reference
+    // product options by id - so product/variant/option/sku ids AND skuKey all
+    // have to rotate together or the copy collides with its source on upsert.
+    const contents = [
+      createContentItem('shop', 'shop-section', {
+        products: [
+          {
+            id: 'product-1',
+            name: 'Tee',
+            variant: [
+              {
+                id: 'variant-1',
+                name: 'Size',
+                options: [{ id: 'option-1', name: 'S', price: 10 }],
+              },
+            ],
+            skus: [
+              {
+                id: 'sku-1',
+                skuKey: 'tee-option-1-abc',
+                price: 10,
+                variant: [
+                  {
+                    id: 'skuvariant-1',
+                    name: 'Size',
+                    option: { id: 'option-1', name: 'S', price: 10 },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      }),
+    ];
+
+    const result = duplicatePageContents(contents);
+
+    const product = (
+      result[0].settings.content as unknown as {
+        products: {
+          id: string;
+          variant: { id: string; options: { id: string }[] }[];
+          skus: {
+            id: string;
+            skuKey: string;
+            variant: { id: string; option: { id: string } }[];
+          }[];
+        }[];
+      }
+    ).products[0];
+
+    expect(product.id).not.toBe('product-1');
+    expect(product.variant[0].id).not.toBe('variant-1');
+    expect(product.skus[0].id).not.toBe('sku-1');
+    expect(product.skus[0].skuKey).not.toBe('tee-option-1-abc');
+
+    // The option id is cross-referenced: the sku must point at the product's
+    // NEW option id, not a second freshly-minted one.
+    const newOptionId = product.variant[0].options[0].id;
+
+    expect(newOptionId).not.toBe('option-1');
+    expect(product.skus[0].variant[0].option.id).toBe(newOptionId);
+  });
+
+  it('rotates payment-option ids on request-payment content', () => {
+    // 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.
+    const contents = [
+      createContentItem('pay', 'request-payment', {
+        requestPaymentConfig: {
+          paymentOptions: [{ id: 'option-1' }, { id: 'option-2' }],
+          paymentConfig: { id: 'stripe-connect-1' },
+        },
+      }),
+    ];
+
+    const result = duplicatePageContents(contents);
+
+    const config = (
+      result[0].settings.content as unknown as {
+        requestPaymentConfig: {
+          paymentOptions: { id: string }[];
+          paymentConfig: { id: string };
+        };
+      }
+    ).requestPaymentConfig;
+
+    expect(config.paymentOptions.map((o) => o.id)).not.toContain('option-1');
+    expect(config.paymentOptions[0].id).not.toBe(config.paymentOptions[1].id);
+
+    // Same owner, so the copy keeps taking payments - unlike site duplication,
+    // which drops the connection because the owner changes.
+    expect(config.paymentConfig.id).toBe('stripe-connect-1');
+  });
+
+  it('rotates payment-option ids on support-me content', () => {
+    const contents = [
+      createContentItem('tip', 'support-me', {
+        supportMeConfig: {
+          paymentOptions: [{ id: 'option-1' }],
+          paymentConfig: { id: 'stripe-connect-1' },
+        },
+      }),
+    ];
+
+    const result = duplicatePageContents(contents);
+
+    const config = (
+      result[0].settings.content as unknown as {
+        supportMeConfig: {
+          paymentOptions: { id: string }[];
+          paymentConfig: { id: string };
+        };
+      }
+    ).supportMeConfig;
+
+    expect(config.paymentOptions[0].id).not.toBe('option-1');
+    expect(config.paymentConfig.id).toBe('stripe-connect-1');
+  });
+
+  it('does NOT re-mint paymentConfig.id', () => {
+    // A backend Stripe Connect linkage, not a client id - minting a new one
+    // yields a section that can never take payment.
+    const contents = [
+      createContentItem('shop', 'shop-section', {
+        products: [],
+        shopPaymentConfig: { paymentConfig: { id: 'stripe-connect-1' } },
+      }),
+    ];
+
+    const result = duplicatePageContents(contents);
+
+    expect(
+      (
+        result[0].settings.content as unknown as {
+          shopPaymentConfig: { paymentConfig: { id: string } };
+        }
+      ).shopPaymentConfig.paymentConfig.id,
+    ).toBe('stripe-connect-1');
+  });
+
+  it('renews nested list item ids', () => {
+    const contents = [
+      createContentItem('links', 'links-section', {
+        items: [{ id: 'link-1' }, { id: 'link-2' }],
+      }),
+    ];
+
+    const result = duplicatePageContents(contents);
+
+    const ids = (
+      result[0].settings.content as unknown as { items: { id: string }[] }
+    ).items.map((item) => item.id);
+
+    // The AI builder is shown these ids and its executor matches on them, so a
+    // copy must not repeat the source's.
+    expect(ids).not.toContain('link-1');
+    expect(ids).not.toContain('link-2');
+    expect(ids[0]).not.toEqual(ids[1]);
+  });
+
+  it('renews item ids across every field the AI is shown', () => {
+    const contents = [
+      createContentItem('gallery', 'image-gallery', {
+        images: [{ id: 'image-1' }],
+        textItems: [{ id: 'text-1' }],
+      }),
+    ];
+
+    const result = duplicatePageContents(contents);
+    const content = result[0].settings.content as unknown as {
+      images: { id: string }[];
+      textItems: { id: string }[];
+    };
+
+    expect(content.images[0].id).not.toEqual('image-1');
+    expect(content.textItems[0].id).not.toEqual('text-1');
+  });
+
+  it('leaves an item without an id alone', () => {
+    const contents = [
+      createContentItem('links', 'links-section', {
+        items: [{ url: 'https://example.com' }],
+      }),
+    ];
+
+    const result = duplicatePageContents(contents);
+
+    expect(
+      (result[0].settings.content as unknown as { items: { id?: string }[] })
+        .items[0].id,
+    ).toBeUndefined();
+  });
+});

package/src/shared/page-settings/duplicate-page.util.ts

@@ -0,0 +1,124 @@
+import cloneDeep from 'lodash.clonedeep';
+import { v4 as uuid } from 'uuid';
+
+import type { Content } from '@brand-page';
+import { rotateMonetizationIds } from '../ecommerce-settings/util/refreshDuplicatedMetadata';
+import {
+  generateItemId,
+  ITEM_ID_BEARING_FIELDS,
+} from '@src/metadata-builder/builders/item-id-utils';
+import type { ContentItem } from '../content-settings/models';
+import { pageSettingsTr } from '@src/composables/useTranslate';
+import { MAX_PAGE_TITLE_LENGTH, MAX_SUBPAGE_TITLE_LENGTH } from './utils';
+
+const composeTitle = (baseTitle: string, index: number): string => {
+  const copyTitle = pageSettingsTr('duplicatePageTitle', {
+    title: baseTitle,
+    // A page title is text, not markup, and i18next escapes interpolated values
+    // by default - "Tom & Jerry" would come back as "Tom & Jerry".
+    interpolation: { escapeValue: false },
+  }).trim();
+
+  return index > 1 ? `${copyTitle} ${index}` : copyTitle;
+};
+
+// The localised affix may sit either side of the title and is not a fixed
+// length, so fit by trimming the base and re-composing rather than by slicing
+// the finished string - that would cut the affix off in some locales.
+const composeTitleWithinLimit = (
+  baseTitle: string,
+  index: number,
+  maxLength: number,
+): string => {
+  const candidate = composeTitle(baseTitle, index);
+  const overflow = candidate.length - maxLength;
+
+  if (overflow <= 0) {
+    return candidate;
+  }
+
+  const trimmedBase = baseTitle
+    .slice(0, Math.max(0, baseTitle.length - overflow))
+    .trimEnd();
+  const trimmedCandidate = composeTitle(trimmedBase, index);
+
+  if (trimmedCandidate.length <= maxLength) {
+    return trimmedCandidate;
+  }
+
+  // A locale whose affix alone exceeds the limit: keep trimming the base rather
+  // than slicing the finished title, which would cut the trailing index and let
+  // two indexes collapse to the same name.
+  const affixLength = composeTitle('', index).length;
+
+  return composeTitle(
+    baseTitle.slice(0, Math.max(0, maxLength - affixLength)).trimEnd(),
+    index,
+  );
+};
+
+export const getDuplicatePageTitle = (
+  sourceTitle: string,
+  siblingTitles: string[],
+  isSubPage: boolean,
+): string => {
+  const maxLength = isSubPage
+    ? MAX_SUBPAGE_TITLE_LENGTH
+    : MAX_PAGE_TITLE_LENGTH;
+
+  const takenTitles = new Set(siblingTitles);
+
+  // N siblings block at most N candidates, so one of the first N+1 is free.
+  const lastIndex = siblingTitles.length + 1;
+
+  for (let index = 1; index < lastIndex; index += 1) {
+    const candidate = composeTitleWithinLimit(sourceTitle, index, maxLength);
+
+    if (!takenTitles.has(candidate)) {
+      return candidate;
+    }
+  }
+
+  return composeTitleWithinLimit(sourceTitle, lastIndex, maxLength);
+};
+
+// These ids are what the AI builder is shown and what its executor matches on
+// (see ensureBrandPageItemIds), so a copy sharing them would put two identical
+// ids in front of it.
+const renewItemIds = (content: Content): void => {
+  const fields = content as unknown as Record<string, unknown>;
+
+  for (const field of ITEM_ID_BEARING_FIELDS) {
+    const items = fields[field];
+
+    if (!Array.isArray(items)) {
+      continue;
+    }
+
+    for (const item of items as { id?: string }[]) {
+      if (item.id) {
+        item.id = generateItemId();
+      }
+    }
+  }
+};
+
+export const duplicatePageContents = (
+  contents: ContentItem<Content>[],
+): ContentItem<Content>[] =>
+  cloneDeep(contents).map((item) => {
+    // ContentItem.id is re-derived from content.id on every reload
+    // (content-settings.util: mapBrandPageContentToContentSettingsItem), so the
+    // two must be minted together or itemStates drifts until the next load.
+    const newId = uuid();
+
+    item.id = newId;
+    item.settings.content.id = newId;
+
+    // Ids only. The copy keeps the source's payment connection - same owner, so it should carry on
+    // taking payments; it is website duplication that disconnects.
+    rotateMonetizationIds(item.settings.content);
+    renewItemIds(item.settings.content);
+
+    return item;
+  });

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

@@ -7,6 +7,7 @@ export interface ContentPage {
   id: string;
   title: string;
   contents: ContentItem<Content>[];
+  isHidden?: boolean;
 }
 
 export const PAGE_SECTIONS = {