@designcrowd/library.brand-page 5.15.12 → 5.15.13

package/lib/src/lib.js

@@ -26,7 +26,7 @@ export { default as SensitiveContentModal } from './brand-page/components/sensit
 // functions
 export { getBrandPageViewModelFromBrandPageModel, migrateBrandPageModel, } from './brand-page/utils';
 export * as brandPageUtils from './brand-page/utils';
-export { getOptimalLogoSize } from './brand-page/utils/logo.util';
+export { getOptimalLogoSize, calculateOptimizedLogoDimensions, } from './brand-page/utils/logo.util';
 export { sanitizeRTEHtml } from './brand-page-maker/utils';
 export { getPageSlugFromPageTitle } from './brand-page-maker/utils/slug.util';
 // stores

package/package.json

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

package/src/brand-page/components/logo/LogoRender.vue

@@ -15,7 +15,8 @@
     >
       <div
         :style="{
-          ...(props.isBrandPageOrIsBrandContact
+          ...(props.isBrandPageOrIsBrandContact &&
+          !props.viewModel?.useOldLogoRenderSize
             ? {
                 margin: 'var(--logo-spacing) auto',
                 height: `${viewModel?.logoImageHeight || DEFAULT_LOGO_HEIGHT}`,

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -427,7 +427,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "v": 7,
+    "v": 8,
   },
   "useOldLogoRenderSize": true,
 }
@@ -843,7 +843,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 7,
+    "v": 8,
   },
   "useOldLogoRenderSize": true,
 }
@@ -1266,7 +1266,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 7,
+    "v": 8,
   },
   "useOldLogoRenderSize": true,
 }

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

@@ -1,4 +1,9 @@
-import { DEFAULT_LOGO_VARIATION, LOGO_VARIATION } from '../constants';
+import {
+  DEFAULT_LOGO_VARIATION,
+  LOGO_VARIATION,
+  DEFAULT_LOGO_WIDTH,
+  DEFAULT_LOGO_HEIGHT,
+} from '../constants';
 import type {
   AbstractPageFooterStyles,
   AbstractPageHeaderStyles,
@@ -334,3 +339,127 @@ export const getOptimalLogoSize = (
     return `${Math.round(newSize)}rem`;
   }
 };
+
+export const calculateLogoDimensions = (
+  logoData: { width: number; height: number },
+  maxWidth: string,
+  maxHeight: string,
+) => {
+  const maxWidthRem = parseFloat(maxWidth);
+  const maxHeightRem = parseFloat(maxHeight);
+
+  const logoAspectRatio = logoData.width / logoData.height;
+
+  let actualHeight: number;
+
+  if (logoAspectRatio >= 1) {
+    actualHeight = maxWidthRem / logoAspectRatio;
+  } else {
+    actualHeight = maxHeightRem;
+  }
+
+  const actualHeightRem = `${Math.ceil(actualHeight)}rem`;
+
+  return { width: actualHeightRem, height: actualHeightRem };
+};
+
+export const calculateOptimizedLogoDimensions = (
+  logoData: { width: number; height: number } | null,
+  currentWidth: string,
+  currentHeight: string,
+) => {
+  const currentHeightRem = parseFloat(currentHeight);
+
+  if (logoData && logoData.width && logoData.height) {
+    const logoAspectRatio = logoData.width / logoData.height;
+    let newsize = currentHeightRem;
+
+    // Width-dominant logo (wider than tall)
+    if (logoAspectRatio >= 1.75 && logoAspectRatio <= 2) {
+      const ratioDiff = 2 - logoAspectRatio;
+
+      newsize = currentHeightRem - Math.round(ratioDiff * 10);
+
+      return {
+        width: `${newsize}rem`,
+        height: `${newsize}rem`,
+      };
+    } else if (logoAspectRatio > 2) {
+      return {
+        width: `4rem`,
+        height: `4rem`,
+      };
+    }
+  }
+
+  return { width: currentWidth, height: currentHeight };
+};
+
+export const recalculateLogoContentDimensions = async (
+  pageData: any,
+  editableLogoVariations?: {
+    variationId: number;
+    width: number;
+    height: number;
+  }[],
+) => {
+  try {
+    const logoContents: {
+      content: any;
+      pageIndex: number;
+      contentIndex: number;
+    }[] = [];
+
+    pageData.pages.forEach((page: any, pageIndex: number) => {
+      page.contents.forEach((contentItem: any, contentIndex: number) => {
+        const content = contentItem.settings.content;
+
+        if (isLogoContent(content)) {
+          logoContents.push({ content, pageIndex, contentIndex });
+        }
+      });
+    });
+
+    if (logoContents.length === 0) {
+      return;
+    }
+
+    logoContents.forEach(({ content }) => {
+      let logoData: { width: number; height: number } | null = null;
+
+      // First priority: Use editableLogoVariations if available
+      if (
+        editableLogoVariations &&
+        content.logoImage?.logoVariation !== undefined
+      ) {
+        const matchingVariation = editableLogoVariations.find(
+          (variation) =>
+            variation.variationId === content.logoImage.logoVariation,
+        );
+
+        if (matchingVariation) {
+          logoData = {
+            width: matchingVariation.width,
+            height: matchingVariation.height,
+          };
+        }
+      }
+
+      // Apply dimensions or fallback logic
+      if (logoData && logoData.width && logoData.height) {
+        const currentMaxWidth = content.logoImageWidth || DEFAULT_LOGO_WIDTH;
+        const currentMaxHeight = content.logoImageHeight || DEFAULT_LOGO_HEIGHT;
+        const dimensions = calculateOptimizedLogoDimensions(
+          logoData,
+          currentMaxWidth,
+          currentMaxHeight,
+        );
+
+        content.logoImageHeight = dimensions.height;
+        content.logoImageWidth = dimensions.width;
+      }
+    });
+  } catch (error) {
+    console.warn('Failed to recalculate prepurchase logo dimensions:', error);
+  }
+};

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

@@ -17,6 +17,7 @@ const createTestBrandPageData = (
     pageHeaderMobile: defaultLogoConfig,
     pageFooterDesktop: defaultLogoConfig,
     pageFooterMobile: defaultLogoConfig,
+    brandPageType: 'brandSite',
     ...overrides,
   } as BrandPageData;
 };
@@ -25,6 +26,7 @@ const createTestBrandPageData = (
 const createMigrationData = (brandPageData: BrandPageData): MigrationData => {
   return {
     brandPageModel: new BrandPageModel(brandPageData),
+    useOldLogoRenderSize: false,
   } as MigrationData;
 };
 

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

@@ -1,4 +1,5 @@
 import {
+  BRAND_PAGE_TYPES,
   DEFAULT_LOGO_HEIGHT,
   DEFAULT_LOGO_WIDTH,
   PageFooterDesktop,
@@ -7,37 +8,19 @@ import {
   PageHeaderMobile,
 } from '../..';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
+import { calculateLogoDimensions } from '../logo.util';
 import type { MigrationData } from '../migration.util';
 
-const calculateConstrainedDimensions = (
-  logoData: { width: number; height: number },
-  maxWidth: string,
-  maxHeight: string,
-) => {
-  const maxWidthRem = parseFloat(maxWidth);
-  const maxHeightRem = parseFloat(maxHeight);
-
-  const logoAspectRatio = logoData.width / logoData.height;
-
-  let actualHeight: number;
-
-  if (logoAspectRatio >= 1) {
-    actualHeight = maxWidthRem / logoAspectRatio;
-  } else {
-    actualHeight = maxHeightRem;
-  }
-
-  const actualHeightRem = `${Math.ceil(actualHeight)}rem`;
-
-  return { width: actualHeightRem, height: actualHeightRem };
-};
-
 export const migration07 = async (
   migrationResult: MigrationData,
   options: { isServerRender: boolean },
 ): Promise<MigrationData> => {
   const { brandPageModel } = migrationResult;
 
+  if (brandPageModel.brandPageType !== BRAND_PAGE_TYPES.brandSite) {
+    return migrationResult;
+  }
+
   if (options.isServerRender !== undefined && options.isServerRender) {
     migrationResult.useOldLogoRenderSize = true;
 
@@ -87,7 +70,7 @@ export const migration07 = async (
         const currentMaxWidth = config.logoImageWidth || DEFAULT_LOGO_WIDTH;
         const currentMaxHeight = config.logoImageHeight || DEFAULT_LOGO_HEIGHT;
 
-        const dimensions = calculateConstrainedDimensions(
+        const dimensions = calculateLogoDimensions(
           logoData,
           currentMaxWidth,
           currentMaxHeight,
@@ -111,7 +94,7 @@ export const migration07 = async (
       }
     });
   } catch (error) {
-    console.warn('Migration 06: Failed to fetch logo dimensions:', error);
+    console.warn('Migration 07: Failed to fetch logo dimensions:', error);
     migrationResult.useOldLogoRenderSize = true;
 
     return migrationResult;

package/src/brand-page/utils/migration/migration-08.test.ts

@@ -0,0 +1,398 @@
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import { migration08 } from './migration-08';
+import type { MigrationData } from '../migration.util';
+import { BRAND_PAGE_TYPES, type LogoContent } from '../../models';
+import { FabricRenderClient } from '../../../clients/fabric-render-client';
+
+// Create a mock instance that will be reused
+const mockFabricClientInstance = {
+  getLogoSvgUrlByLogoImageAsync: vi.fn(),
+  getLogoSvgUrlByLogoTemplateImageAsync: vi.fn(),
+};
+
+// Mock FabricRenderClient
+vi.mock('../../../clients/fabric-render-client', () => ({
+  FabricRenderClient: {
+    getInstance: vi.fn(() => mockFabricClientInstance),
+  },
+}));
+
+const createTestBrandPageData = (overrides: any = {}) => ({
+  v: 7,
+  brandPageType: BRAND_PAGE_TYPES.default,
+  pages: [
+    {
+      title: 'Home',
+      slug: 'home',
+      contents: [
+        {
+          id: '1',
+          type: 'logo',
+          logoImage: { logoDraftToken: '', logoVariation: 0 },
+          logoImageHeight: '9rem',
+          logoImageWidth: '9rem',
+          isLogoVisible: true,
+          backgroundStyle: {},
+        },
+      ],
+    },
+  ],
+  styles: {
+    logoStyles: {
+      imageStyle: { height: '9rem', width: '9rem' },
+      backgroundStyle: {},
+    },
+    textStyles: { style: { color: '#000' } },
+    buttonStyles: {},
+    backgroundStyles: { style: { background: '#fff' } },
+    galleryStyles: {},
+  },
+  ...overrides,
+});
+
+const createMigrationData = (brandPageData: any): MigrationData => ({
+  brandPageModel: brandPageData,
+  useOldLogoRenderSize: false,
+});
+
+describe('migration08', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('should skip migration when isServerRender is true', async () => {
+    const brandPageData = createTestBrandPageData();
+    const migrationData = createMigrationData(brandPageData);
+
+    const result = await migration08(migrationData, { isServerRender: true });
+
+    expect(result.useOldLogoRenderSize).toBe(true);
+    expect(
+      (result.brandPageModel.pages[0].contents[0] as LogoContent)
+        .logoImageHeight,
+    ).toBe('9rem');
+  });
+
+  test('should handle brandPage type with logo content', async () => {
+    const brandPageData = createTestBrandPageData({
+      brandPageType: BRAND_PAGE_TYPES.default,
+      pages: [
+        {
+          title: 'Home',
+          slug: 'home',
+          contents: [
+            {
+              id: '1',
+              type: 'logo',
+              logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
+              logoImageHeight: '9rem',
+              logoImageWidth: '9rem',
+              isLogoVisible: true,
+              backgroundStyle: {},
+            },
+          ],
+        },
+      ],
+    });
+    const migrationData = createMigrationData(brandPageData);
+
+    // Mock the fabric client response
+    mockFabricClientInstance.getLogoSvgUrlByLogoImageAsync.mockResolvedValue({
+      width: 120,
+      height: 80,
+      data: 'test-svg-data',
+    });
+
+    const result = await migration08(migrationData, { isServerRender: false });
+
+    expect(result.useOldLogoRenderSize).toBe(false);
+    expect(
+      mockFabricClientInstance.getLogoSvgUrlByLogoImageAsync,
+    ).toHaveBeenCalledWith({
+      logoDraftToken: 'test-token',
+      logoVariation: 0,
+    });
+  });
+
+  test('should skip brandSite type (brandSite does not have logo content)', async () => {
+    const brandPageData = createTestBrandPageData({
+      brandPageType: BRAND_PAGE_TYPES.brandSite,
+      pages: [
+        {
+          title: 'Home',
+          slug: 'home',
+          contents: [
+            {
+              id: '1',
+              type: 'logo',
+              logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
+              logoImageHeight: '10rem',
+              logoImageWidth: '10rem',
+              isLogoVisible: true,
+              backgroundStyle: {},
+            },
+          ],
+        },
+      ],
+    });
+    const migrationData = createMigrationData(brandPageData);
+    const originalLogoHeight = (
+      migrationData.brandPageModel.pages[0].contents[0] as LogoContent
+    ).logoImageHeight;
+    const originalLogoWidth = (
+      migrationData.brandPageModel.pages[0].contents[0] as LogoContent
+    ).logoImageWidth;
+
+    const result = await migration08(migrationData, { isServerRender: false });
+
+    // Migration should complete successfully but skip processing brandSite
+    expect(result.useOldLogoRenderSize).toBe(false);
+
+    // Logo dimensions should remain unchanged since brandSite is skipped
+    expect(
+      (result.brandPageModel.pages[0].contents[0] as LogoContent)
+        .logoImageHeight,
+    ).toBe(originalLogoHeight);
+    expect(
+      (result.brandPageModel.pages[0].contents[0] as LogoContent)
+        .logoImageWidth,
+    ).toBe(originalLogoWidth);
+
+    // Fabric client should not have been called
+    expect(
+      mockFabricClientInstance.getLogoSvgUrlByLogoImageAsync,
+    ).not.toHaveBeenCalled();
+    expect(
+      mockFabricClientInstance.getLogoSvgUrlByLogoTemplateImageAsync,
+    ).not.toHaveBeenCalled();
+  });
+
+  test('should handle brandContact type with logo content', async () => {
+    const brandPageData = createTestBrandPageData({
+      brandPageType: BRAND_PAGE_TYPES.brandContact,
+      pages: [
+        {
+          title: 'Contact',
+          slug: 'contact',
+          contents: [
+            {
+              id: '1',
+              type: 'logo',
+              logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
+              logoImageHeight: '8rem',
+              logoImageWidth: '8rem',
+              isLogoVisible: true,
+              backgroundStyle: {},
+            },
+          ],
+        },
+      ],
+    });
+    const migrationData = createMigrationData(brandPageData);
+
+    const result = await migration08(migrationData, { isServerRender: false });
+
+    expect(result.useOldLogoRenderSize).toBe(false);
+  });
+
+  test('should handle multiple pages with logo content', async () => {
+    const brandPageData = createTestBrandPageData({
+      brandPageType: BRAND_PAGE_TYPES.default,
+      pages: [
+        {
+          title: 'Home',
+          slug: 'home',
+          contents: [
+            {
+              id: '1',
+              type: 'logo',
+              logoImage: { logoDraftToken: 'test-token-1', logoVariation: 0 },
+              logoImageHeight: '9rem',
+              logoImageWidth: '9rem',
+              isLogoVisible: true,
+              backgroundStyle: {},
+            },
+          ],
+        },
+        {
+          title: 'About',
+          slug: 'about',
+          contents: [
+            {
+              id: '2',
+              type: 'logo',
+              logoImage: { logoDraftToken: 'test-token-2', logoVariation: 0 },
+              logoImageHeight: '10rem',
+              logoImageWidth: '10rem',
+              isLogoVisible: true,
+              backgroundStyle: {},
+            },
+          ],
+        },
+      ],
+    });
+    const migrationData = createMigrationData(brandPageData);
+
+    // Mock the fabric client response
+    const mockFabricClient = FabricRenderClient.getInstance();
+
+    vi.mocked(mockFabricClient.getLogoSvgUrlByLogoImageAsync).mockResolvedValue(
+      {
+        width: 120,
+        height: 80,
+        data: 'test-svg-data',
+      },
+    );
+
+    const result = await migration08(migrationData, { isServerRender: false });
+
+    expect(result.useOldLogoRenderSize).toBe(false);
+    expect(
+      mockFabricClient.getLogoSvgUrlByLogoImageAsync,
+    ).toHaveBeenCalledTimes(2);
+  });
+
+  test('should handle logo content without logo tokens', async () => {
+    const brandPageData = createTestBrandPageData({
+      brandPageType: BRAND_PAGE_TYPES.default,
+      pages: [
+        {
+          title: 'Home',
+          slug: 'home',
+          contents: [
+            {
+              id: '1',
+              type: 'logo',
+              logoImage: { logoDraftToken: '', logoVariation: 0 },
+              logoImageHeight: '15rem',
+              logoImageWidth: '15rem',
+              isLogoVisible: true,
+              backgroundStyle: {},
+            },
+          ],
+        },
+      ],
+    });
+    const migrationData = createMigrationData(brandPageData);
+
+    const result = await migration08(migrationData, { isServerRender: false });
+
+    // Should apply fallback logic
+    expect(
+      (result.brandPageModel.pages[0].contents[0] as LogoContent)
+        .logoImageHeight,
+    ).toBe('15rem');
+    expect(
+      (result.brandPageModel.pages[0].contents[0] as LogoContent)
+        .logoImageWidth,
+    ).toBe('15rem');
+  });
+
+  test('should handle logo template images', async () => {
+    const brandPageData = createTestBrandPageData({
+      brandPageType: BRAND_PAGE_TYPES.default,
+      pages: [
+        {
+          title: 'Home',
+          slug: 'home',
+          contents: [
+            {
+              id: '1',
+              type: 'logo',
+              logoTemplateImage: { logoTemplateToken: 'template-token' },
+              logoImageHeight: '9rem',
+              logoImageWidth: '9rem',
+              isLogoVisible: true,
+              backgroundStyle: {},
+            },
+          ],
+        },
+      ],
+    });
+    const migrationData = createMigrationData(brandPageData);
+
+    // Mock the fabric client response
+    const mockFabricClient = FabricRenderClient.getInstance();
+
+    vi.mocked(
+      mockFabricClient.getLogoSvgUrlByLogoTemplateImageAsync,
+    ).mockResolvedValue({
+      width: 200,
+      height: 100,
+      data: 'test-template-svg-data',
+    });
+
+    const result = await migration08(migrationData, { isServerRender: false });
+
+    expect(
+      mockFabricClient.getLogoSvgUrlByLogoTemplateImageAsync,
+    ).toHaveBeenCalledWith({
+      logoTemplateToken: 'template-token',
+    });
+  });
+
+  test('should handle error gracefully', async () => {
+    const brandPageData = createTestBrandPageData({
+      brandPageType: BRAND_PAGE_TYPES.default,
+      pages: [
+        {
+          title: 'Home',
+          slug: 'home',
+          contents: [
+            {
+              id: '1',
+              type: 'logo',
+              logoImage: { logoDraftToken: 'test-token', logoVariation: 0 },
+              logoImageHeight: '9rem',
+              logoImageWidth: '9rem',
+              isLogoVisible: true,
+              backgroundStyle: {},
+            },
+          ],
+        },
+      ],
+    });
+    const migrationData = createMigrationData(brandPageData);
+
+    // Mock the fabric client to throw an error
+    const mockFabricClient = FabricRenderClient.getInstance();
+
+    vi.mocked(mockFabricClient.getLogoSvgUrlByLogoImageAsync).mockRejectedValue(
+      new Error('API Error'),
+    );
+
+    const result = await migration08(migrationData, { isServerRender: false });
+
+    expect(result.useOldLogoRenderSize).toBe(true);
+  });
+
+  test('should ignore non-logo content', async () => {
+    const brandPageData = createTestBrandPageData({
+      brandPageType: BRAND_PAGE_TYPES.default,
+      pages: [
+        {
+          title: 'Home',
+          slug: 'home',
+          contents: [
+            {
+              id: '1',
+              type: 'text',
+              text: 'Hello World',
+            },
+            {
+              id: '2',
+              type: 'image',
+              imageUrl: 'test-image.jpg',
+            },
+          ],
+        },
+      ],
+    });
+    const migrationData = createMigrationData(brandPageData);
+
+    const result = await migration08(migrationData, { isServerRender: false });
+
+    expect(result.useOldLogoRenderSize).toBe(false);
+    expect(result.brandPageModel.pages[0].contents.length).toBe(2);
+  });
+});