@designcrowd/library.brand-page 6.2.5 → 6.2.6

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

@@ -185,8 +185,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     index: number;
     settings: ContentItemFieldSettings;
-    styles: Record<string, any>;
     value: string | false | undefined;
+    styles: Record<string, any>;
     role: string;
     placeholder: string;
     minLength: number;

package/lib/src/shared/content-settings/components/email-field/EmailField.mixin.d.ts

@@ -182,8 +182,8 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
 }>, {
     index: number;
     settings: import("../../models").ContentItemFieldSettings;
-    styles: Record<string, any>;
     value: string | false | undefined;
+    styles: Record<string, any>;
     role: string;
     placeholder: string;
     minLength: number;

package/lib/src/shared/content-settings/components/tel-field/TelField.mixin.d.ts

@@ -182,8 +182,8 @@ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import
 }>, {
     index: number;
     settings: import("../../models").ContentItemFieldSettings;
-    styles: Record<string, any>;
     value: string | false | undefined;
+    styles: Record<string, any>;
     role: string;
     placeholder: string;
     minLength: number;

package/lib/src/shared/content-settings/components/text-field/TextField.mixin.d.ts

@@ -187,8 +187,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     index: number;
     settings: import("../../models").ContentItemFieldSettings;
-    styles: Record<string, any>;
     value: string | false | undefined;
+    styles: Record<string, any>;
     role: string;
     placeholder: string;
     minLength: number;

package/lib/src/shared/content-settings/components/textarea-field/TextareaField.mixin.d.ts

@@ -196,8 +196,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     index: number;
     settings: import("../../models").ContentItemFieldSettings;
-    styles: Record<string, any>;
     value: string | false | undefined;
+    styles: Record<string, any>;
     role: string;
     placeholder: string;
     minLength: number;

package/lib/src/shared/content-settings/components/url-field/UrlField.mixin.d.ts

@@ -189,8 +189,8 @@ declare const _default: import("vue").DefineComponent<{}, {}, Record<string, any
 }>, {
     index: number;
     settings: import("../../models").ContentItemFieldSettings;
-    styles: Record<string, any>;
     value: string | false | undefined;
+    styles: Record<string, any>;
     role: string;
     placeholder: string;
     minLength: number;

package/lib/src/shared/content-settings/components/youtube-video-field/YoutubeVideoField.mixin.d.ts

@@ -185,8 +185,8 @@ declare const _default: import("vue").DefineComponent<{}, {}, Record<string, any
 }>, {
     index: number;
     settings: import("../../models").ContentItemFieldSettings;
-    styles: Record<string, any>;
     value: string | false | undefined;
+    styles: Record<string, any>;
     role: string;
     placeholder: string;
     minLength: number;

package/package.json

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

package/src/brand-page/utils/logo.util.recalculate.test.ts

@@ -0,0 +1,204 @@
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
+import { BRAND_PAGE_TYPES } from '../models';
+import { FabricRenderClient } from '../../clients/fabric-render-client';
+import {
+  recalculateHeaderLogoSizes,
+  recalculateLogoContentDimensions,
+} from './logo.util';
+
+const LOGO_IMAGE = {
+  logoDraftToken: 'draft-token',
+  logoVariation: 1 as const,
+  logoLastUpdate: '99',
+};
+
+const createClient = () => ({
+  getLogoSvgUrlByLogoImageAsync: vi.fn(),
+  getLogoDimensionsByLogoImageAsync: vi.fn(),
+});
+
+let client: ReturnType<typeof createClient>;
+
+const createHeaderStores = () => ({
+  pageSettingsStore: {
+    sections: {
+      header: {
+        desktop: {
+          logoImageHeight: '9rem',
+          logoImageWidth: '9rem',
+          logoVariation: 1,
+        },
+      },
+    },
+  },
+  logoSettingsStore: { selectedLogoImage: LOGO_IMAGE },
+});
+
+const logoContent = () => ({
+  settings: {
+    content: {
+      type: 'logo',
+      logoImage: LOGO_IMAGE,
+      logoImageHeight: '12rem',
+      logoImageWidth: '12rem',
+    },
+  },
+});
+
+const createPageData = () => ({
+  pages: [
+    { contents: [logoContent(), { settings: { content: { type: 'text' } } }] },
+    { contents: [logoContent()] },
+  ],
+});
+
+const contentSizes = (pageData: ReturnType<typeof createPageData>) =>
+  pageData.pages.flatMap((page) =>
+    page.contents
+      .filter((item) => item.settings.content.type === 'logo')
+      .map((item) => {
+        const { logoImageWidth, logoImageHeight } = item.settings
+          .content as ReturnType<typeof logoContent>['settings']['content'];
+
+        return [logoImageWidth, logoImageHeight];
+      }),
+  );
+
+describe('logo.util resize lookups', () => {
+  beforeEach(() => {
+    client = createClient();
+    FabricRenderClient.overrideInstance(client);
+  });
+
+  afterEach(() => {
+    FabricRenderClient.overrideInstance(undefined);
+  });
+
+  test('header: a post-purchase brand site sizes from a size-only lookup', async () => {
+    client.getLogoDimensionsByLogoImageAsync.mockResolvedValue({
+      width: 300,
+      height: 100,
+    });
+    const { pageSettingsStore, logoSettingsStore } = createHeaderStores();
+
+    await recalculateHeaderLogoSizes(
+      pageSettingsStore,
+      logoSettingsStore,
+      [],
+      BRAND_PAGE_TYPES.brandSite,
+      false,
+      true,
+    );
+
+    expect(client.getLogoDimensionsByLogoImageAsync).toHaveBeenCalledTimes(1);
+    expect(client.getLogoDimensionsByLogoImageAsync).toHaveBeenCalledWith(
+      LOGO_IMAGE,
+    );
+    expect(client.getLogoSvgUrlByLogoImageAsync).not.toHaveBeenCalled();
+    expect(pageSettingsStore.sections.header.desktop.logoImageWidth).toBe(
+      '10rem',
+    );
+    expect(pageSettingsStore.sections.header.desktop.logoImageHeight).toBe(
+      '10rem',
+    );
+  });
+
+  test('pre-purchase header: sizes from the editable variation, the size-only reply unused', async () => {
+    client.getLogoDimensionsByLogoImageAsync.mockResolvedValue({
+      width: 300,
+      height: 100,
+    });
+    const { pageSettingsStore, logoSettingsStore } = createHeaderStores();
+
+    await recalculateHeaderLogoSizes(
+      pageSettingsStore,
+      logoSettingsStore,
+      [{ variationId: 1, width: 100, height: 100 }],
+      BRAND_PAGE_TYPES.brandSite,
+      true,
+    );
+
+    expect(client.getLogoDimensionsByLogoImageAsync).toHaveBeenCalledTimes(1);
+    expect(client.getLogoSvgUrlByLogoImageAsync).not.toHaveBeenCalled();
+    expect(pageSettingsStore.sections.header.desktop.logoImageWidth).toBe(
+      '11rem',
+    );
+    expect(pageSettingsStore.sections.header.desktop.logoImageHeight).toBe(
+      '11rem',
+    );
+  });
+
+  test('logo content: a post-purchase brand page sizes every logo content from a size-only lookup', async () => {
+    client.getLogoDimensionsByLogoImageAsync.mockResolvedValue({
+      width: 300,
+      height: 100,
+    });
+    const pageData = createPageData();
+
+    await recalculateLogoContentDimensions(pageData, [], LOGO_IMAGE, false);
+
+    expect(client.getLogoDimensionsByLogoImageAsync).toHaveBeenCalledTimes(1);
+    expect(client.getLogoDimensionsByLogoImageAsync).toHaveBeenCalledWith(
+      LOGO_IMAGE,
+    );
+    expect(client.getLogoSvgUrlByLogoImageAsync).not.toHaveBeenCalled();
+    expect(contentSizes(pageData)).toEqual([
+      ['8rem', '8rem'],
+      ['8rem', '8rem'],
+    ]);
+  });
+
+  test('known variation: a pre-purchase brand page makes no lookup', async () => {
+    const pageData = createPageData();
+
+    await recalculateLogoContentDimensions(
+      pageData,
+      [{ variationId: 1, width: 300, height: 100 }],
+      LOGO_IMAGE,
+      true,
+    );
+
+    expect(client.getLogoDimensionsByLogoImageAsync).not.toHaveBeenCalled();
+    expect(client.getLogoSvgUrlByLogoImageAsync).not.toHaveBeenCalled();
+    expect(contentSizes(pageData)).toEqual([
+      ['8rem', '8rem'],
+      ['8rem', '8rem'],
+    ]);
+  });
+
+  test.each([
+    ['rejects', () => Promise.reject(new Error('fetch failed'))],
+    ['answers nothing', () => Promise.resolve(undefined)],
+  ])(
+    'lookup fails: when the lookup %s, header and content sizes are unchanged',
+    async (_case, answer) => {
+      client.getLogoDimensionsByLogoImageAsync.mockImplementation(answer);
+      client.getLogoSvgUrlByLogoImageAsync.mockImplementation(answer);
+      const { pageSettingsStore, logoSettingsStore } = createHeaderStores();
+      const pageData = createPageData();
+
+      await expect(
+        recalculateHeaderLogoSizes(
+          pageSettingsStore,
+          logoSettingsStore,
+          [],
+          BRAND_PAGE_TYPES.brandSite,
+          false,
+          true,
+        ),
+      ).resolves.toBeUndefined();
+      await expect(
+        recalculateLogoContentDimensions(pageData, [], LOGO_IMAGE, false),
+      ).resolves.toBeUndefined();
+
+      expect(pageSettingsStore.sections.header.desktop).toMatchObject({
+        logoImageWidth: '9rem',
+        logoImageHeight: '9rem',
+      });
+      expect(contentSizes(pageData)).toEqual([
+        ['12rem', '12rem'],
+        ['12rem', '12rem'],
+      ]);
+    },
+  );
+});

package/src/brand-page/utils/logo.util.ts

@@ -440,7 +440,7 @@ export const recalculateLogoContentDimensions = async (
     // For post-purchase or fallback, fetch from Fabric
     if (!logoData || logoData.width <= 0 || logoData.height <= 0) {
       logoData =
-        await FabricRenderClient.getInstance().getLogoSvgUrlByLogoImageAsync(
+        await FabricRenderClient.getInstance().getLogoDimensionsByLogoImageAsync(
           logoImage,
         );
     }
@@ -493,7 +493,7 @@ export const recalculateHeaderLogoSizes = async (
     );
 
     const logoPostPurchase =
-      await FabricRenderClient.getInstance().getLogoSvgUrlByLogoImageAsync(
+      await FabricRenderClient.getInstance().getLogoDimensionsByLogoImageAsync(
         logoSettingsStore.selectedLogoImage,
       );
 

package/src/brand-page/utils/migration/migration-07.dimension.test.ts

@@ -0,0 +1,274 @@
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
+import { BrandPageModel, type BrandPageData } from '@brand-page/models';
+import { migration07 } from './migration-07';
+import {
+  GetLatestModelVersion,
+  migrateBrandPageModel,
+  type MigrationData,
+} from '../migration.util';
+import { FabricRenderClient } from '../../../clients/fabric-render-client';
+
+// Kept apart from migration-07.test.ts, whose cases set no client instance and rely on the catch path.
+
+type Size = { width?: number; height?: number } | undefined;
+
+const templateImage = (token: string) => ({
+  logoTemplateToken: token,
+  logoTemplateText: 'Acme & Co',
+  logoTemplateVersion: 3,
+  layout: 'stacked',
+});
+
+const draftImage = (token: string) => ({
+  logoDraftToken: token,
+  logoVariation: 2,
+  logoLastUpdate: '99',
+});
+
+// Two template sections and two draft sections; the footer desktop keeps the default 9rem sizes.
+const createBrandSiteData = (): BrandPageData =>
+  ({
+    v: 6,
+    brandPageType: 'brandSite',
+    pageHeaderDesktop: {
+      logoImageWidth: '16rem',
+      logoImageHeight: '14rem',
+      logoTemplateImage: templateImage('template-wide'),
+    },
+    pageHeaderMobile: {
+      logoImageWidth: '8rem',
+      logoImageHeight: '7rem',
+      logoTemplateImage: templateImage('template-tall'),
+    },
+    pageFooterDesktop: {
+      logoImage: draftImage('draft-wide'),
+    },
+    pageFooterMobile: {
+      logoImageWidth: '6rem',
+      logoImageHeight: '9rem',
+      logoImage: draftImage('draft-tall'),
+    },
+  }) as unknown as BrandPageData;
+
+const createMigrationData = (): MigrationData => ({
+  brandPageModel: new BrandPageModel(createBrandSiteData()),
+  useOldLogoRenderSize: false,
+});
+
+const sizeFor = (token: string): Size =>
+  token.endsWith('-wide')
+    ? { width: 300, height: 100 }
+    : { width: 100, height: 300 };
+
+const createClient = () => ({
+  getLogoSvgUrlByLogoTemplateImageAsync: vi.fn(),
+  getLogoSvgUrlByLogoImageAsync: vi.fn(),
+  getLogoDimensionsByLogoTemplateImageAsync: vi.fn(),
+  getLogoDimensionsByLogoImageAsync: vi.fn(),
+});
+
+let client: ReturnType<typeof createClient>;
+
+// The drawing and size-only lookups answer alike, so these pins hold before and after the switch (R3).
+const answerBoth = (
+  template: (token: string) => Size | Promise<Size>,
+  draft: (token: string) => Size | Promise<Size>,
+) => {
+  client.getLogoDimensionsByLogoTemplateImageAsync.mockImplementation(
+    async ({ logoTemplateToken }) => template(logoTemplateToken),
+  );
+  client.getLogoDimensionsByLogoImageAsync.mockImplementation(
+    async ({ logoDraftToken }) => draft(logoDraftToken),
+  );
+  client.getLogoSvgUrlByLogoTemplateImageAsync.mockImplementation(
+    async ({ logoTemplateToken }) => {
+      const size = await template(logoTemplateToken);
+
+      return size && { data: 'data:image/svg+xml;base64,', ...size };
+    },
+  );
+  client.getLogoSvgUrlByLogoImageAsync.mockImplementation(
+    async ({ logoDraftToken }) => {
+      const size = await draft(logoDraftToken);
+
+      return size && { data: 'data:image/svg+xml;base64,', ...size };
+    },
+  );
+};
+
+const sizesOf = (result: MigrationData) => {
+  const model = result.brandPageModel;
+
+  return {
+    headerDesktop: [
+      model.pageHeaderDesktop.logoImageWidth,
+      model.pageHeaderDesktop.logoImageHeight,
+    ],
+    headerMobile: [
+      model.pageHeaderMobile.logoImageWidth,
+      model.pageHeaderMobile.logoImageHeight,
+    ],
+    footerDesktop: [
+      model.pageFooterDesktop.logoImageWidth,
+      model.pageFooterDesktop.logoImageHeight,
+    ],
+    footerMobile: [
+      model.pageFooterMobile.logoImageWidth,
+      model.pageFooterMobile.logoImageHeight,
+    ],
+  };
+};
+
+const ORIGINAL_SIZES = {
+  headerDesktop: ['16rem', '14rem'],
+  headerMobile: ['8rem', '7rem'],
+  footerDesktop: ['9rem', '9rem'],
+  footerMobile: ['6rem', '9rem'],
+};
+
+const OPTIONS = { isServerRender: false, isUserDraft: false };
+
+describe('migration07 — size lookups', () => {
+  beforeEach(() => {
+    client = createClient();
+    FabricRenderClient.overrideInstance(client);
+  });
+
+  afterEach(() => {
+    FabricRenderClient.overrideInstance(undefined);
+  });
+
+  test('asks for size only, passing each section its own logo reference', async () => {
+    answerBoth(sizeFor, sizeFor);
+    const migrationData = createMigrationData();
+    const model = migrationData.brandPageModel;
+
+    await migration07(migrationData, OPTIONS);
+
+    expect(
+      client.getLogoDimensionsByLogoTemplateImageAsync,
+    ).toHaveBeenCalledTimes(2);
+    expect(
+      client.getLogoDimensionsByLogoTemplateImageAsync,
+    ).toHaveBeenCalledWith(model.pageHeaderDesktop.logoTemplateImage);
+    expect(
+      client.getLogoDimensionsByLogoTemplateImageAsync,
+    ).toHaveBeenCalledWith(model.pageHeaderMobile.logoTemplateImage);
+    expect(client.getLogoDimensionsByLogoImageAsync).toHaveBeenCalledTimes(2);
+    expect(client.getLogoDimensionsByLogoImageAsync).toHaveBeenCalledWith(
+      model.pageFooterDesktop.logoImage,
+    );
+    expect(client.getLogoDimensionsByLogoImageAsync).toHaveBeenCalledWith(
+      model.pageFooterMobile.logoImage,
+    );
+    expect(client.getLogoSvgUrlByLogoTemplateImageAsync).not.toHaveBeenCalled();
+    expect(client.getLogoSvgUrlByLogoImageAsync).not.toHaveBeenCalled();
+  });
+
+  test('same sizes: pins each section from the reply', async () => {
+    answerBoth(sizeFor, sizeFor);
+
+    const result = await migration07(createMigrationData(), OPTIONS);
+
+    expect(result.useOldLogoRenderSize).toBe(false);
+    expect(sizesOf(result)).toEqual({
+      headerDesktop: ['6rem', '6rem'],
+      headerMobile: ['7rem', '7rem'],
+      footerDesktop: ['3rem', '3rem'],
+      footerMobile: ['9rem', '9rem'],
+    });
+  });
+
+  test('not OK: an empty reply shrinks every section by the fallback step', async () => {
+    answerBoth(
+      () => undefined,
+      () => undefined,
+    );
+
+    const result = await migration07(createMigrationData(), OPTIONS);
+
+    expect(result.useOldLogoRenderSize).toBe(false);
+    expect(sizesOf(result)).toEqual({
+      headerDesktop: ['10rem', '10rem'],
+      headerMobile: ['6rem', '6rem'],
+      footerDesktop: ['8rem', '8rem'],
+      footerMobile: ['8rem', '8rem'],
+    });
+  });
+
+  test('request fails: leaves every size and flags the old render size', async () => {
+    answerBoth((token) => {
+      if (token === 'template-wide') {
+        throw new Error('fetch failed');
+      }
+
+      return sizeFor(token);
+    }, sizeFor);
+
+    const result = await migration07(createMigrationData(), OPTIONS);
+
+    expect(result.useOldLogoRenderSize).toBe(true);
+    expect(sizesOf(result)).toEqual(ORIGINAL_SIZES);
+  });
+
+  test('missing size: a zero or absent dimension changes nothing and does not shrink', async () => {
+    answerBoth(
+      () => ({ width: 0, height: 100 }),
+      () => ({ width: 120 }),
+    );
+
+    const result = await migration07(createMigrationData(), OPTIONS);
+
+    expect(result.useOldLogoRenderSize).toBe(false);
+    expect(sizesOf(result)).toEqual(ORIGINAL_SIZES);
+  });
+
+  test.each([
+    ['brandSite', { ...createBrandSiteData() }],
+    [
+      'default',
+      {
+        brandPageType: 'default',
+        pages: [
+          {
+            title: 'Home',
+            slug: 'home',
+            contents: [
+              {
+                id: '1',
+                type: 'logo',
+                logoImage: draftImage('draft-wide'),
+                logoImageHeight: '9rem',
+                logoImageWidth: '9rem',
+                isLogoVisible: true,
+                backgroundStyle: {},
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  ])(
+    'already upgraded: a %s model at the latest version makes no lookup',
+    async (_type, data) => {
+      answerBoth(sizeFor, sizeFor);
+
+      await migrateBrandPageModel(
+        new BrandPageModel({
+          ...(data as unknown as BrandPageData),
+          v: GetLatestModelVersion(),
+        }),
+        OPTIONS,
+      );
+
+      expect(
+        client.getLogoDimensionsByLogoTemplateImageAsync,
+      ).not.toHaveBeenCalled();
+      expect(client.getLogoDimensionsByLogoImageAsync).not.toHaveBeenCalled();
+      expect(
+        client.getLogoSvgUrlByLogoTemplateImageAsync,
+      ).not.toHaveBeenCalled();
+      expect(client.getLogoSvgUrlByLogoImageAsync).not.toHaveBeenCalled();
+    },
+  );
+});

package/src/brand-page/utils/migration/migration-07.ts

@@ -48,12 +48,13 @@ export const migration07 = async (
     ].filter((section) => section.config);
 
     // Fetch logo data for all sections in parallel
+    // Size-only lookups, by recorded exception: 0031-released-logo-size-migrations-may-use-a-size-only-address.md
     const logoDataPromises = sections.map(async (section) => {
       const logoData = section.config?.logoTemplateImage?.logoTemplateToken
-        ? await fabricClient.getLogoSvgUrlByLogoTemplateImageAsync(
+        ? await fabricClient.getLogoDimensionsByLogoTemplateImageAsync(
             section.config.logoTemplateImage,
           )
-        : await fabricClient.getLogoSvgUrlByLogoImageAsync(
+        : await fabricClient.getLogoDimensionsByLogoImageAsync(
             section.config.logoImage,
           );