@designcrowd/library.brand-page 5.18.5 → 5.18.6-ast-padding-1

package/src/brand-page-maker/models/content-settings.ts

@@ -24,6 +24,7 @@ import {
   EMPTY_LOGO_IMAGE_MODEL,
   BRAND_PAGE_TYPES,
   SENSITIVE_CONTENT_TYPES,
+  CONTACT_FORM_LAYOUT_DEFAULT_PADDING,
 } from '@brand-page';
 import type {
   ButtonContent,
@@ -171,6 +172,8 @@ export const createInitialImageGalleryContent = (): ImageGalleryContent => {
     galleryStyles: {
       galleryType: 'grid',
     },
+    topPadding: 0,
+    bottomPadding: 0,
   };
 };
 
@@ -182,6 +185,8 @@ export const createInitialVideoContent = (): VideoContent => {
     displayStyle: DISPLAY_STYLE_PREVIEW,
     mute: false,
     videoUrl: '',
+    topPadding: 0,
+    bottomPadding: 0,
   };
 };
 
@@ -239,6 +244,8 @@ export const createInitialTextContent = (
           ]
         : undefined,
     type: 'text',
+    topPadding: 12,
+    bottomPadding: 12,
     textSize: {
       fontSize: FONT_SIZE_BODY,
       lineHeight: LINE_HEIGHT_BODY,
@@ -282,6 +289,8 @@ export const createInitialMapContent = (): MapContent => {
       formattedAddress: '',
       placeId: '',
     },
+    topPadding: 0,
+    bottomPadding: 0,
   };
 };
 
@@ -291,6 +300,8 @@ export const createInitialMailingListContent = (
   return {
     id: uuid.v4(),
     type: 'mailing-list',
+    topPadding: 0,
+    bottomPadding: 0,
     title: contentSettingsTr(`mailingListTitle`),
     buttonText: contentSettingsTr(`subscribePlaceholder`),
     acceptedFields: 'emailOnly',
@@ -324,6 +335,8 @@ export const createInitialRequestPaymentContent = (
     successMessage: '',
     title: contentSettingsTr(`buyNowTitle`),
     type: 'request-payment',
+    topPadding: 0,
+    bottomPadding: 0,
     fillColor: {},
     defaultBorderColor: {},
     selectedBorderColor: {},
@@ -356,6 +369,8 @@ export const createInitialShopContent = (
   return {
     id: uuid.v4(),
     description: '',
+    topPadding: 16,
+    bottomPadding: 16,
     products: [],
     displayStyle: PAYMENT_OPTION_DISPLAY_TYPES.thumbnail,
     aspectRatio: PAYMENT_OPTION_IMAGE_TYPES.auto,
@@ -415,6 +430,8 @@ export const createInitialSupportMeContent = (
     successMessage: contentSettingsTr(`successSupportPlaceholder`),
     description: contentSettingsTr(`makeADonationDescription`),
     type: 'support-me',
+    topPadding: 0,
+    bottomPadding: 0,
     titleStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
       textStyleType: TEXT_STYLE_TYPES.headings,
@@ -453,14 +470,21 @@ export const createInitialContactFormContent: CreateInitialContentFunction<
     console.error('userState.emailAddress should not be undefined');
   }
 
+  // New blocks inherit the padding their initial layout previously had
+  // hard-coded — same source as the migration backfill for existing pages.
+  const layoutStyle =
+    options?.brandPageType === 'brandSite' ? 'center-card-aligned' : '';
+  const padding = CONTACT_FORM_LAYOUT_DEFAULT_PADDING[layoutStyle] ?? 0;
+
   return {
     id: uuid.v4(),
     title: contentSettingsTr(`contactUsTitle`),
     description: '',
     buttonText: contentSettingsTr(`sendPlaceholder`),
     displayStyle: DISPLAY_STYLE_PREVIEW,
-    layoutStyle:
-      options?.brandPageType === 'brandSite' ? 'center-card-aligned' : '',
+    layoutStyle,
+    topPadding: padding,
+    bottomPadding: padding,
     imageUrl: '',
     fields: [
       {
@@ -553,6 +577,8 @@ export const createInitialBannerSectionContent: CreateInitialContentFunction<
 > = (options?: CreateInitialContentOptions) => {
   return {
     id: uuid.v4(),
+    topPadding: 32,
+    bottomPadding: 32,
     imageUrl: '',
     title: contentSettingsTr(`thisIsABannerTitle`),
     description: '',
@@ -599,6 +625,8 @@ export const createInitialBookingSectionContent: CreateInitialContentFunction<
     buttonText: contentSettingsTr(`bookNowLabel`),
     url: '',
     type: 'booking-section',
+    topPadding: 32,
+    bottomPadding: 32,
     descriptionStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
       textStyleType: TEXT_STYLE_TYPES.paragraphs,
@@ -628,6 +656,8 @@ export const createInitialImagesSectionContent: CreateInitialContentFunction<
     title: contentSettingsTr(`imagesTitle`),
     description: '',
     type: 'images-section',
+    topPadding: 32,
+    bottomPadding: 32,
     displayStyle: 'centered',
     aspectRatio: 'Default',
     areImagesFullWidth: false,
@@ -731,6 +761,8 @@ export const createInitialAboutSectionContent: CreateInitialContentFunction<
       textAlign: 'center',
     },
     backgroundStyle: {},
+    topPadding: 32,
+    bottomPadding: 32,
   };
 };
 
@@ -793,6 +825,8 @@ export const createInitialSocialLinksContent = (
   return {
     id: uuid.v4(),
     type: 'social-links',
+    topPadding: 32,
+    bottomPadding: 32,
     title: contentSettingsTr(`followUsOnTitle`),
     links: [
       {
@@ -846,6 +880,8 @@ export const createInitialShapesSectionContent: CreateInitialContentFunction<
     title: contentSettingsTr(`shapesTitle`),
     description: '',
     type: 'shapes-section',
+    topPadding: 32,
+    bottomPadding: 32,
     displayStyle: 'centered',
     items: [
       {

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

@@ -44,13 +44,6 @@ import { useUiBackgroundSettingsStore } from '@shared/background-settings/store'
 import { useBrandPageMakerUserStore } from '../user';
 import { useBrandPageContainerStore } from '../brandpage-container';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
-import {
-  CONTENT_SETTINGS_MODES,
-  useUiContentSettingsStore,
-} from '@shared/content-settings/store';
-import { useUiSideBarStore } from '@shared/side-bar/store';
-import { useUiEditableLogoStore } from '@shared/logo-settings/store/editable-logo-store';
-import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { setLocaleAsync } from '@src/composables/useTranslate';
@@ -610,331 +603,4 @@ describe('brand page maker store module', () => {
     // Assert
     expect(setDesignTemplateTokenSpy).not.toHaveBeenCalled();
   });
-
-  // BP-5506 regression: applyHistorySnapshot must replace nested navigation
-  // style refs as a whole, not deep-merge them. The previous bug was that
-  // object-form $patch would leave keys present in the live state but absent
-  // from the snapshot in place — e.g. switching nav button styles then
-  // undoing would leave the new style's borderColor / borderRadius applied.
-  test('applyHistorySnapshot replaces navigation styles wholesale (no key bleed across undo)', async () => {
-    // Arrange — initialise the maker so `applyHistorySnapshot` has a
-    // populated set of dependent stores to write into.
-    const makerStore = useBrandPageMakerStore();
-    const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
-
-    await makerStore.initialise(INITIALISE_PAYLOAD);
-
-    // Build snapshot A — the "older" state we'll undo back to. Keep the
-    // navigation simple: only borderRadius is set on selectedButtonStyle.
-    const snapshotA = {
-      ...makerStore.brandPageData,
-      pageHeaderDesktop: {
-        ...makerStore.brandPageData.pageHeaderDesktop,
-        navigation: {
-          ...makerStore.brandPageData.pageHeaderDesktop?.navigation,
-          selectedButtonStyle: {
-            borderRadius: '0px',
-          },
-        },
-      },
-    } as BrandPageModel;
-
-    // Build snapshot B — the "newer" state with extra keys that the
-    // older snapshot does NOT have. If $patch deep-merged, these would
-    // survive an undo back to A.
-    const snapshotB = {
-      ...snapshotA,
-      pageHeaderDesktop: {
-        ...snapshotA.pageHeaderDesktop,
-        navigation: {
-          ...snapshotA.pageHeaderDesktop?.navigation,
-          selectedButtonStyle: {
-            borderRadius: '12px',
-            borderColor: 'rgb(255, 0, 0)',
-            borderStyle: 'dashed',
-            borderWidth: '4px',
-          },
-        },
-      },
-    } as BrandPageModel;
-
-    // Act — apply newer first (simulates the user making the edit), then
-    // older (simulates the undo). NavigationDesktop's constructor folds
-    // its input over a defaults object, so we read the resulting state
-    // and assert against the keys that came from snapshotB but NOT from
-    // snapshotA.
-    await makerStore.applyHistorySnapshot(snapshotB);
-    await makerStore.applyHistorySnapshot(snapshotA);
-
-    // Assert — after the undo, no keys from B should bleed through onto
-    // A's selectedButtonStyle. Specifically the values that are unique to
-    // B (red dashed border) must not be present.
-    const restored =
-      navigationStyleSettingsStore.navigation[PAGE_SECTIONS.header][
-        VIEWPORTS.desktop
-      ];
-    const restoredSelected = restored.selectedButtonStyle;
-
-    expect(restoredSelected.borderRadius).toBe('0px');
-    // The B-only values must not survive the undo. NavigationStyles'
-    // constructor seeds defaults for selectedButtonStyle, so we assert
-    // the *exact* B-only values are gone rather than a strict superset.
-    expect(restoredSelected.borderColor).not.toBe('rgb(255, 0, 0)');
-    expect(restoredSelected.borderStyle).not.toBe('dashed');
-    expect(restoredSelected.borderWidth).not.toBe('4px');
-  });
-
-  // BP-5506 regression: undoing a page-add must clear the URL/active-page
-  // back to a page that exists in the restored snapshot. The page-tabs
-  // carousel keys "selected" off the route URL; after `setNav` removes the
-  // added route, no nav item matches the URL slug and the highlight
-  // disappears. `applyHistorySnapshot` accepts an `activePageId` and writes
-  // it through `pageNavigationStore.setCurrentActivePage` so the routeStore
-  // and `currentPage` getter realign.
-  test('applyHistorySnapshot updates pageNavigation.activePageId when given a valid id', async () => {
-    const makerStore = useBrandPageMakerStore();
-    const pageNavigationStore = usePageNavigationStore();
-
-    await makerStore.initialise(INITIALISE_PAYLOAD);
-
-    const restoredPageId = pageNavigationStore.routes[0]?.pageId;
-
-    expect(restoredPageId).toBeDefined();
-
-    pageNavigationStore.activePageId = '';
-
-    await makerStore.applyHistorySnapshot(
-      makerStore.brandPageData,
-      restoredPageId,
-    );
-
-    expect(pageNavigationStore.activePageId).toBe(restoredPageId);
-  });
-
-  test('applyHistorySnapshot falls back to first/default route when no activePageId is provided', async () => {
-    const makerStore = useBrandPageMakerStore();
-    const pageNavigationStore = usePageNavigationStore();
-
-    await makerStore.initialise(INITIALISE_PAYLOAD);
-
-    const expectedFirstId =
-      pageNavigationStore.getFirstOrDefaultRoute()?.pageId;
-
-    expect(expectedFirstId).toBeDefined();
-
-    pageNavigationStore.activePageId = 'stale-page-id-not-in-nav';
-
-    await makerStore.applyHistorySnapshot(makerStore.brandPageData);
-
-    expect(pageNavigationStore.activePageId).toBe(expectedFirstId);
-  });
-
-  // BP-5506 follow-up: undoing a non-page-structural edit (e.g. a title
-  // change) must NOT push a new route. The router push fires
-  // `router.afterEach`, and BrandPageMaker.mixin's afterEach hook resets
-  // the content-settings modeStack — which would snap the sidebar back
-  // to the default Content tab on every undo, even when the user was
-  // deep-editing a content item. Same-page navigation MUST be skipped.
-  test('applyHistorySnapshot does NOT touch modeStack when active page is unchanged', async () => {
-    const makerStore = useBrandPageMakerStore();
-    const pageNavigationStore = usePageNavigationStore();
-    const contentSettingsStore = useUiContentSettingsStore();
-
-    await makerStore.initialise(INITIALISE_PAYLOAD);
-
-    const activePageId = pageNavigationStore.routes[0]?.pageId;
-
-    expect(activePageId).toBeDefined();
-
-    pageNavigationStore.activePageId = activePageId!;
-
-    // User is deep-editing a content item — focused mode pushed onto the stack.
-    const realItemId = contentSettingsStore.items[0]?.id;
-
-    expect(realItemId).toBeDefined();
-
-    contentSettingsStore.pushMode({
-      mode: CONTENT_SETTINGS_MODES.focusedContentItem,
-      selectedItemId: realItemId,
-    });
-    contentSettingsStore.selectedItemId = realItemId;
-
-    expect(contentSettingsStore.mode).toBe(
-      CONTENT_SETTINGS_MODES.focusedContentItem,
-    );
-
-    // Apply a snapshot whose activePageId equals the current page (i.e.
-    // a non-structural edit that didn't change pages — title edit, color
-    // change, etc.).
-    await makerStore.applyHistorySnapshot(
-      makerStore.brandPageData,
-      activePageId,
-    );
-
-    // Mode stack is preserved — no router.afterEach was triggered.
-    expect(contentSettingsStore.mode).toBe(
-      CONTENT_SETTINGS_MODES.focusedContentItem,
-    );
-    expect(contentSettingsStore.selectedItemId).toBe(realItemId);
-  });
-
-  // BP-5506 regression: when undoing a content add, the selected item
-  // disappears. The fallback must restore the Content tab's natural
-  // landing state (mode = edit, selectedItemId = null), not just switch
-  // tabs — otherwise `<FocusedContentItemSettings>` keeps rendering for
-  // a missing item and paints a blank panel.
-  test('applyHistorySnapshot resets sidebar to default Content tab when selected item is gone', async () => {
-    const makerStore = useBrandPageMakerStore();
-    const contentSettingsStore = useUiContentSettingsStore();
-    const sideBarStore = useUiSideBarStore();
-
-    await makerStore.initialise(INITIALISE_PAYLOAD);
-
-    // Simulate the user opening a content item's focused settings.
-    const orphanItemId = 'orphan-content-id-not-in-snapshot';
-
-    contentSettingsStore.pushMode({
-      mode: CONTENT_SETTINGS_MODES.focusedContentItem,
-      selectedItemId: orphanItemId,
-    });
-    contentSettingsStore.selectedItemId = orphanItemId;
-    sideBarStore.setSelectedTabName({
-      tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
-    });
-
-    // Pre-condition: panel is showing the focused content item.
-    expect(contentSettingsStore.mode).toBe(
-      CONTENT_SETTINGS_MODES.focusedContentItem,
-    );
-    expect(contentSettingsStore.selectedItemId).toBe(orphanItemId);
-
-    // Snapshot does NOT contain orphanItemId — simulates undo of an add.
-    await makerStore.applyHistorySnapshot(makerStore.brandPageData);
-
-    // Post-condition: same shape as a fresh Content tab click.
-    expect(contentSettingsStore.mode).toBe(CONTENT_SETTINGS_MODES.edit);
-    expect(contentSettingsStore.selectedItemId).toBeNull();
-    expect(sideBarStore.selectedTabName).toBe(
-      SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
-    );
-  });
-
-  // BP-5506 follow-up: applyHistorySnapshot accepts a `logoEdits` JSON
-  // string (sidecar to brandPageData; pre-purchase logo-tab form-field
-  // state). On undo it must wholesale-replace `editableLogoStore.logoEdits`
-  // so the form fields reflect the pre-edit state. Wholesale replacement
-  // matters because a previous entry's textObjects/colors must NOT leak
-  // through (e.g. switching template A→B then undoing must NOT keep B's
-  // textObject ids in A's restored state).
-  test('applyHistorySnapshot restores editableLogoStore.logoEdits from sidecar', async () => {
-    const makerStore = useBrandPageMakerStore();
-    const editableLogoStore = useUiEditableLogoStore();
-
-    await makerStore.initialise(INITIALISE_PAYLOAD);
-
-    // User has typed "AcmeCo" — current logoEdits state.
-    editableLogoStore.logoEdits.textObjects = [
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      {
-        id: 't1',
-        role: 'primary-text',
-        text: 'AcmeCo',
-        textEnabled: true,
-      } as any,
-    ];
-
-    // The history entry the user is undoing TO captured "Acme".
-    const sidecar = JSON.stringify({
-      backgroundObject: { id: 'bg', type: 'rect', role: 'background' },
-      logoObject: {
-        id: 'lg',
-        type: 'group',
-        role: 'logo',
-        logoColors: [],
-        logoStrokeColors: [],
-      },
-      textObjects: [
-        { id: 't1', role: 'primary-text', text: 'Acme', textEnabled: true },
-      ],
-    });
-
-    await makerStore.applyHistorySnapshot(
-      makerStore.brandPageData,
-      undefined,
-      sidecar,
-    );
-
-    expect(editableLogoStore.logoEdits.textObjects).toEqual([
-      { id: 't1', role: 'primary-text', text: 'Acme', textEnabled: true },
-    ]);
-  });
-
-  test('applyHistorySnapshot wholesale-replaces logoEdits (no leak from prior state)', async () => {
-    const makerStore = useBrandPageMakerStore();
-    const editableLogoStore = useUiEditableLogoStore();
-
-    await makerStore.initialise(INITIALISE_PAYLOAD);
-
-    // Current state has TWO textObjects (e.g. user is on template B with a
-    // logo + tagline).
-    editableLogoStore.logoEdits.textObjects = [
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      {
-        id: 'b-1',
-        role: 'primary-text',
-        text: 'Brand B',
-        textEnabled: true,
-      } as any,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      { id: 'b-2', role: 'tagline', text: 'tagline', textEnabled: true } as any,
-    ];
-
-    // Undo target captured template A — only ONE textObject with a
-    // different id. After restore, b-1 / b-2 must be gone.
-    const sidecar = JSON.stringify({
-      backgroundObject: { id: 'bg', type: 'rect', role: 'background' },
-      logoObject: {
-        id: 'lg',
-        type: 'group',
-        role: 'logo',
-        logoColors: [],
-        logoStrokeColors: [],
-      },
-      textObjects: [
-        { id: 'a-1', role: 'primary-text', text: 'Brand A', textEnabled: true },
-      ],
-    });
-
-    await makerStore.applyHistorySnapshot(
-      makerStore.brandPageData,
-      undefined,
-      sidecar,
-    );
-
-    expect(editableLogoStore.logoEdits.textObjects).toHaveLength(1);
-    expect(editableLogoStore.logoEdits.textObjects[0].id).toBe('a-1');
-  });
-
-  test('applyHistorySnapshot leaves logoEdits untouched when sidecar is undefined', async () => {
-    const makerStore = useBrandPageMakerStore();
-    const editableLogoStore = useUiEditableLogoStore();
-
-    await makerStore.initialise(INITIALISE_PAYLOAD);
-
-    editableLogoStore.logoEdits.textObjects = [
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      {
-        id: 't1',
-        role: 'primary-text',
-        text: 'Acme',
-        textEnabled: true,
-      } as any,
-    ];
-
-    // No third arg — pre-existing entries from before this feature shipped.
-    await makerStore.applyHistorySnapshot(makerStore.brandPageData);
-
-    // Still 'Acme' — no restore attempted.
-    expect(editableLogoStore.logoEdits.textObjects[0].text).toBe('Acme');
-  });
 });