@designcrowd/library.brand-page 6.2.10 → 6.2.11

package/lib/src/shared/content-settings/components/content-settings/ContentSettings.mixin.d.ts

@@ -552,6 +552,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             logoImageWidth: string | undefined;
         }): void;
         updatePaymentConfigCurrency(updatedPaymentConfig: import("@brand-page").BrandPagePaymentConfig, newCurrency: import("@brand-page").BrandPagePaymentConfigCurrency): void;
+        resetStalePageLinks(): void;
         setPageTitle({ pageTitle, pageId, }: {
             pageTitle: string;
             pageId: string;

package/lib/src/shared/content-settings/components/content-settings/ReplaceImageSettingsForContent.mixin.d.ts

@@ -559,6 +559,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             logoImageWidth: string | undefined;
         }): void;
         updatePaymentConfigCurrency(updatedPaymentConfig: import("@brand-page").BrandPagePaymentConfig, newCurrency: import("@brand-page").BrandPagePaymentConfigCurrency): void;
+        resetStalePageLinks(): void;
         setPageTitle({ pageTitle, pageId, }: {
             pageTitle: string;
             pageId: string;

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.d.ts

@@ -781,6 +781,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             logoImageWidth: string | undefined;
         }): void;
         updatePaymentConfigCurrency(updatedPaymentConfig: import("@brand-page").BrandPagePaymentConfig, newCurrency: import("@brand-page").BrandPagePaymentConfigCurrency): void;
+        resetStalePageLinks(): void;
         setPageTitle({ pageTitle, pageId, }: {
             pageTitle: string;
             pageId: string;

package/lib/src/shared/content-settings/components/payment-config-field/PaymentConfigField.mixin.d.ts

@@ -563,6 +563,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             logoImageWidth: string | undefined;
         }): void;
         updatePaymentConfigCurrency(updatedPaymentConfig: BrandPagePaymentConfig, newCurrency: BrandPagePaymentConfigCurrency): void;
+        resetStalePageLinks(): void;
         setPageTitle({ pageTitle, pageId, }: {
             pageTitle: string;
             pageId: string;

package/lib/src/shared/logo-settings/components/LogoSettings.mixin.d.ts

@@ -730,6 +730,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             logoImageWidth: string | undefined;
         }): void;
         updatePaymentConfigCurrency(updatedPaymentConfig: import("../../../brand-page").BrandPagePaymentConfig, newCurrency: import("../../../brand-page").BrandPagePaymentConfigCurrency): void;
+        resetStalePageLinks(): void;
         setPageTitle({ pageTitle, pageId, }: {
             pageTitle: string;
             pageId: string;

package/lib/src/shared/page-settings/components/new-page-modal/NewPageModal.mixin.d.ts

@@ -60,6 +60,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             logoImageWidth: string | undefined;
         }): void;
         updatePaymentConfigCurrency(updatedPaymentConfig: import("../../../../brand-page").BrandPagePaymentConfig, newCurrency: import("../../../../brand-page").BrandPagePaymentConfigCurrency): void;
+        resetStalePageLinks(): void;
         setPageTitle({ pageTitle, pageId, }: {
             pageTitle: string;
             pageId: string;

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -4195,6 +4195,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             logoImageWidth: string | undefined;
         }): void;
         updatePaymentConfigCurrency(updatedPaymentConfig: import("@brand-page").BrandPagePaymentConfig, newCurrency: import("@brand-page").BrandPagePaymentConfigCurrency): void;
+        resetStalePageLinks(): void;
         setPageTitle({ pageTitle, pageId, }: {
             pageTitle: string;
             pageId: string;

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.js

@@ -281,6 +281,7 @@ export default defineComponent({
                 this.pageNavigationStore.removeNavRoute(navRouteId);
             }
             this.updatePages(this.pageFields);
+            this.pageSettingsStore.resetStalePageLinks();
             // The deleted page's sections may have held the only references to palette
             // customs — reclaim them now.
             this.brandPageMakerStore.pruneUnusedPaletteCustoms();

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -3473,6 +3473,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             logoImageWidth: string | undefined;
         }): void;
         updatePaymentConfigCurrency(updatedPaymentConfig: import("@brand-page").BrandPagePaymentConfig, newCurrency: import("@brand-page").BrandPagePaymentConfigCurrency): void;
+        resetStalePageLinks(): void;
         setPageTitle({ pageTitle, pageId, }: {
             pageTitle: string;
             pageId: string;

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

@@ -97,6 +97,7 @@ export declare const useUiPageSettingsStore: import("pinia").StoreDefinition<"ui
         logoImageWidth: string | undefined;
     }): void;
     updatePaymentConfigCurrency(updatedPaymentConfig: BrandPagePaymentConfig, newCurrency: BrandPagePaymentConfigCurrency): void;
+    resetStalePageLinks(): void;
     setPageTitle({ pageTitle, pageId, }: {
         pageTitle: string;
         pageId: string;

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

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { PageHeaderDesktop, PageHeaderMobile, PageFooterDesktop, PageFooterMobile, VIEWPORTS, getNavigationType, } from '@brand-page';
+import { BUTTON_LINK_TYPE, PageHeaderDesktop, PageHeaderMobile, PageFooterDesktop, PageFooterMobile, VIEWPORTS, getNavigationType, } from '@brand-page';
 import { v4 as uuid } from 'uuid';
 import { PAGE_SECTIONS } from '../models';
 import { toPageModels } from '../utils';
@@ -225,6 +225,33 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
                 Object.assign(shopConfigStore.paymentConfig, currencyUpdate);
             }
         },
+        resetStalePageLinks() {
+            const pageIds = new Set(this.pages.map(({ id }) => id));
+            const isSinglePage = this.pages.length === 1;
+            const reset = (link) => {
+                if (link.buttonLinkType !== BUTTON_LINK_TYPE.page ||
+                    pageIds.has(link.buttonPageId ?? '')) {
+                    return;
+                }
+                // The Page link option is not offered once one page is left, so the link falls back
+                // to a URL link, keeping its stored address.
+                if (isSinglePage)
+                    link.buttonLinkType = BUTTON_LINK_TYPE.url;
+                link.buttonPageId = '';
+            };
+            this.pages.forEach(({ contents }) => {
+                contents.forEach(({ settings: { content } }) => {
+                    const holder = content;
+                    reset(holder);
+                    holder.items?.forEach(reset);
+                });
+            });
+            [VIEWPORTS.desktop, VIEWPORTS.mobile].forEach((viewport) => {
+                const { headerButton } = this.sections[PAGE_SECTIONS.header][viewport];
+                if (headerButton)
+                    reset(headerButton);
+            });
+        },
         setPageTitle({ pageTitle, pageId, }) {
             const currentPageId = pageId;
             const pageNavigationStore = usePageNavigationStore();

package/package.json

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

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

@@ -1057,6 +1057,29 @@ describe('brand page maker store module', () => {
     ).toBe(true);
   });
 
+  test('initialiseStoresByBrandPageModelAsync clears a button link to a page the AI removed', async () => {
+    const makerStore = useBrandPageMakerStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    const model: typeof makerStore.brandPageData = JSON.parse(
+      JSON.stringify(makerStore.brandPageData),
+    );
+    const [firstPage] = model.pages;
+
+    Object.assign(firstPage.contents[0], {
+      buttonLinkType: 'page',
+      buttonPageId: 'page-removed-by-ai',
+    });
+    model.pages = [firstPage, { ...firstPage, id: 'page-kept', contents: [] }];
+
+    await makerStore.initialiseStoresByBrandPageModelAsync(model);
+
+    expect(
+      useUiPageSettingsStore().pages[0].contents[0].settings.content,
+    ).toMatchObject({ buttonLinkType: 'page', buttonPageId: '' });
+  });
+
   test('applyHistorySnapshot restores styles.colors (undo of a palette edit is no longer a no-op)', async () => {
     const makerStore = useBrandPageMakerStore();
     const paletteStore = useUiColorPaletteStore();

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

@@ -1206,6 +1206,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const backgroundSettingsStore = useUiBackgroundSettingsStore();
       const styleSettingsStore = useUiStyleSettingsStore();
       const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
+      const pageSettingsStore = useUiPageSettingsStore();
 
       pageNavigationStore.setNav({ nav: brandPageModel.nav });
 
@@ -1222,6 +1223,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           },
         },
       });
+      // An AI changeset can remove a page that buttons still link to.
+      pageSettingsStore.resetStalePageLinks();
 
       navigationStyleSettingsStore.setState({
         newState: {
@@ -1268,7 +1271,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
         });
       }
 
-      const pageSettingsStore = useUiPageSettingsStore();
       const { externalEditor } = useExternalRichTextEditor();
 
       transformToRTE(

package/src/shared/page-settings/components/page-settings/PageSettings.mixin.test.ts

@@ -69,6 +69,7 @@ describe('PageSettings.mixin onConfirmDeletePage GCs orphaned palette customs',
           pages: pageFields.map((pf) => pf.page) as never[],
         });
       },
+      pageSettingsStore,
       brandPageMakerStore: useBrandPageMakerStore(),
       eventTracker: { sendWebsiteManageRemovePageEvent: vi.fn() },
       deleteModalPageTitle: 'page-2',
@@ -108,6 +109,31 @@ describe('PageSettings.mixin onConfirmDeletePage GCs orphaned palette customs',
     ]);
   });
 
+  test('deleting down to one page turns a page-linked button into a url link, in the same update as the delete', () => {
+    const context = setup();
+
+    Object.assign(context.pageFields[0].page.contents[0].settings.content, {
+      buttonLinkType: 'page',
+      buttonPageId: 'page-2',
+      url: 'https://example.com',
+    });
+
+    onConfirmDeletePage.call(context, 'page-2');
+
+    const pageSettingsStore = useUiPageSettingsStore();
+
+    // One synchronous call did both: the page is gone and the link already
+    // reset, so a single undo-history flush captures both.
+    expect(pageSettingsStore.pages).toHaveLength(1);
+    expect(
+      pageSettingsStore.pages[0].contents[0].settings.content,
+    ).toMatchObject({
+      buttonLinkType: 'url',
+      buttonPageId: '',
+      url: 'https://example.com',
+    });
+  });
+
   test('a page with a nav route removes the route before the pages write, then prunes', () => {
     const context = setup({ routes: [{ id: 'route-2', pageId: 'page-2' }] });
 

package/src/shared/page-settings/components/page-settings/PageSettings.mixin.ts

@@ -423,6 +423,7 @@ export default defineComponent({
       }
 
       this.updatePages(this.pageFields);
+      this.pageSettingsStore.resetStalePageLinks();
 
       // The deleted page's sections may have held the only references to palette
       // customs — reclaim them now.

package/src/shared/page-settings/store/page-settings-store.test.ts

@@ -3,7 +3,13 @@ import type Vue from 'vue';
 import { createApp } from 'vue';
 import { createPinia, setActivePinia } from 'pinia';
 import type { ContentPage } from '../models';
-import type { Content, TextContent } from '@brand-page';
+import type {
+  BannerSectionContent,
+  Content,
+  HeaderButton,
+  ImagesSectionContent,
+  TextContent,
+} from '@brand-page';
 import type { ContentItem } from '../../content-settings/models';
 import {
   UNLIMITED_MAX_NUM_OF_PAGES,
@@ -278,6 +284,141 @@ describe('page store module', () => {
     expect(pageSettingsStore.currentPage.id).toEqual(PAGE_TWO.id);
   });
 
+  describe('resetStalePageLinks', () => {
+    type PageLink = Pick<
+      HeaderButton,
+      'buttonLinkType' | 'buttonPageId' | 'url'
+    >;
+
+    const linkTo = (pageId: string): PageLink => ({
+      buttonLinkType: 'page',
+      buttonPageId: pageId,
+      url: 'https://example.com',
+    });
+
+    const setUp = (
+      pages: ContentPage[],
+      pageId: string,
+    ): ReturnType<typeof useUiPageSettingsStore> => {
+      const pageSettingsStore = useUiPageSettingsStore();
+
+      pageSettingsStore.setPages({ pages });
+      (['desktop', 'mobile'] as const).forEach((viewport) => {
+        pageSettingsStore.sections.header[viewport].headerButton = {
+          isVisible: true,
+          text: 'Contact',
+          ...linkTo(pageId),
+        };
+      });
+
+      return pageSettingsStore;
+    };
+
+    const homeWithLinksTo = (pageId: string): ContentPage => ({
+      ...PAGE_ONE,
+      contents: [
+        {
+          id: 'banner',
+          type: 'banner-section',
+          settings: { content: linkTo(pageId) },
+        } as ContentItem<BannerSectionContent>,
+        {
+          id: 'images',
+          type: 'images-section',
+          settings: { content: { items: [linkTo(pageId)] } },
+        } as ContentItem<ImagesSectionContent>,
+      ],
+    });
+
+    const linksOf = (
+      pageSettingsStore: ReturnType<typeof useUiPageSettingsStore>,
+    ): (Partial<PageLink> | undefined)[] => {
+      const [banner, images] = pageSettingsStore.pages[0].contents;
+
+      return [
+        banner.settings.content as BannerSectionContent,
+        (images.settings.content as ImagesSectionContent).items[0],
+        pageSettingsStore.sections.header.desktop.headerButton,
+        pageSettingsStore.sections.header.mobile.headerButton,
+      ];
+    };
+
+    test('with 2+ pages left, a link to a deleted page keeps Page and clears its page', () => {
+      const pageSettingsStore = setUp(
+        [homeWithLinksTo('page-deleted'), PAGE_TWO],
+        'page-deleted',
+      );
+
+      pageSettingsStore.resetStalePageLinks();
+
+      linksOf(pageSettingsStore).forEach((link) =>
+        expect(link).toMatchObject({
+          buttonLinkType: 'page',
+          buttonPageId: '',
+        }),
+      );
+    });
+
+    test('at one page, a link to a deleted page becomes a url link keeping its url', () => {
+      const pageSettingsStore = setUp(
+        [homeWithLinksTo('page-deleted')],
+        'page-deleted',
+      );
+
+      pageSettingsStore.resetStalePageLinks();
+
+      linksOf(pageSettingsStore).forEach((link) =>
+        expect(link).toMatchObject({
+          buttonLinkType: 'url',
+          buttonPageId: '',
+          url: 'https://example.com',
+        }),
+      );
+    });
+
+    test('a link to a page that still exists is untouched, even at one page', () => {
+      const pageSettingsStore = setUp(
+        [homeWithLinksTo(PAGE_ONE.id)],
+        PAGE_ONE.id,
+      );
+
+      pageSettingsStore.resetStalePageLinks();
+
+      linksOf(pageSettingsStore).forEach((link) =>
+        expect(link).toMatchObject(linkTo(PAGE_ONE.id)),
+      );
+    });
+
+    test('a non-page link is untouched', () => {
+      const emailLink: PageLink = {
+        buttonLinkType: 'mailTo',
+        buttonPageId: '',
+        url: 'jane@example.com',
+      };
+      const pageSettingsStore = setUp(
+        [
+          {
+            ...PAGE_ONE,
+            contents: [
+              {
+                id: 'banner',
+                type: 'banner-section',
+                settings: { content: { ...emailLink } },
+              } as ContentItem<BannerSectionContent>,
+            ],
+          },
+        ],
+        PAGE_ONE.id,
+      );
+
+      pageSettingsStore.resetStalePageLinks();
+
+      expect(
+        pageSettingsStore.pages[0].contents[0].settings.content,
+      ).toMatchObject(emailLink);
+    });
+  });
+
   describe('setPreviousSelectedNavigationDisplayType', () => {
     beforeEach(() => {
       useUiPageSettingsStore().$patch(($state) => {

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

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import type { ContentItem } from '../../content-settings/models';
 
 import {
+  BUTTON_LINK_TYPE,
   PageHeaderDesktop,
   PageHeaderMobile,
   PageFooterDesktop,
@@ -11,6 +12,7 @@ import {
 } from '@brand-page';
 import type { NavigationType } from '@brand-page';
 import type {
+  ButtonLinkType,
   Content,
   HeaderButton,
   ImageGalleryItem,
@@ -456,6 +458,45 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
         Object.assign(shopConfigStore.paymentConfig, currencyUpdate);
       }
     },
+    resetStalePageLinks(): void {
+      const pageIds = new Set(this.pages.map(({ id }) => id));
+      const isSinglePage = this.pages.length === 1;
+
+      type ButtonLink = {
+        buttonLinkType?: ButtonLinkType;
+        buttonPageId?: string;
+      };
+
+      const reset = (link: ButtonLink): void => {
+        if (
+          link.buttonLinkType !== BUTTON_LINK_TYPE.page ||
+          pageIds.has(link.buttonPageId ?? '')
+        ) {
+          return;
+        }
+
+        // The Page link option is not offered once one page is left, so the link falls back
+        // to a URL link, keeping its stored address.
+        if (isSinglePage) link.buttonLinkType = BUTTON_LINK_TYPE.url;
+
+        link.buttonPageId = '';
+      };
+
+      this.pages.forEach(({ contents }) => {
+        contents.forEach(({ settings: { content } }) => {
+          const holder = content as ButtonLink & { items?: ButtonLink[] };
+
+          reset(holder);
+          holder.items?.forEach(reset);
+        });
+      });
+
+      [VIEWPORTS.desktop, VIEWPORTS.mobile].forEach((viewport) => {
+        const { headerButton } = this.sections[PAGE_SECTIONS.header][viewport];
+
+        if (headerButton) reset(headerButton);
+      });
+    },
     setPageTitle({
       pageTitle,
       pageId,