@designcrowd/library.brand-page 5.16.24 → 5.16.25-2

package/package.json

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

package/src/brand-page/components/page-header/HeaderLayout.vue

@@ -31,6 +31,7 @@ withDefaults(
 <style scoped>
 .root {
   --logo-width: v-bind('logoWidth');
+  --logo-max-width: 20rem;
   --tab-nav-height: 56px;
   --hamburger-nav-height: 32px;
   --hamburger-nav-width: 32px;
@@ -76,8 +77,8 @@ withDefaults(
 .desktop-tab-horizontal-stack-left-logo-centered-menu {
   @apply tw-grid;
   grid-template-columns:
-    [logo-start] var(--logo-width) [logo-end nav-start] 1fr [nav-end] var(
-      --logo-width
+    [logo-start] var(--logo-max-width) [logo-end nav-start] 1fr [nav-end] var(
+      --logo-max-width
     )
     [cols-end];
   @apply tw-gap-x-4;
@@ -86,6 +87,7 @@ withDefaults(
 }
 .desktop-tab-horizontal-stack-left-logo-centered-menu .logo-container {
   grid-column: logo-start / logo-end;
+  justify-self: start;
 }
 .desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container {
   grid-column: nav-start / nav-end;
@@ -103,7 +105,7 @@ withDefaults(
 .desktop-tab-horizontal-stack-centered-logo-right-menu {
   @apply tw-grid;
   @apply tw-gap-x-4;
-  grid-template-columns: [col-start] 1fr [logo-start] var(--logo-width) [logo-end nav-start] 1fr [nav-end];
+  grid-template-columns: [col-start] 1fr [logo-start] var(--logo-max-width) [logo-end nav-start] 1fr [nav-end];
 }
 .desktop-tab-horizontal-stack-centered-logo-right-menu .logo-container {
   grid-column: logo-start / logo-end;

package/src/brand-page/constants/logo.constants.ts

@@ -7,6 +7,3 @@ export const LOGO_VARIATION = {
 
 export const DEFAULT_LOGO_VARIATION =
   LOGO_VARIATION.LOGO_WITH_TRANSPARENT_BACKGROUND;
-
-// migrating logo images to a fixed height
-export const LOGO_MIGRATION_VERSION = 6;

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

@@ -208,41 +208,4 @@ describe('logo-util', () => {
       logoImage.logoDraftToken,
     );
   });
-
-  test('getOptimalLogoSize should scale up the logo', async () => {
-    // Should return same as the current size
-    const result = logoUtil.getOptimalLogoSize(100, 100, '12rem');
-
-    expect(result).toBe('12rem');
-
-    // should return max size
-    const result2 = logoUtil.getOptimalLogoSize(100, 50, '12rem');
-
-    expect(result2).toBe('11rem');
-
-    // should return new size
-    const result3 = logoUtil.getOptimalLogoSize(100, 80, '12rem');
-
-    expect(result3).toBe('11rem');
-
-    // should return current size because height is bigger than width
-    const result4 = logoUtil.getOptimalLogoSize(100, 120, '12rem');
-
-    expect(result4).toBe('12rem');
-
-    // should return new size
-    const result5 = logoUtil.getOptimalLogoSize(100, 60, '12rem');
-
-    expect(result5).toBe('11rem');
-
-    // should return current size because our max logic is 16rem
-    const result6 = logoUtil.getOptimalLogoSize(100, 60, '18rem');
-
-    expect(result6).toBe('18rem');
-
-    // should return current size because our max logic is 16rem
-    const result7 = logoUtil.getOptimalLogoSize(100, 60, '16rem');
-
-    expect(result7).toBe('16rem');
-  });
 });

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

@@ -1,12 +1,8 @@
-import {
-  DEFAULT_LOGO_VARIATION,
-  LOGO_VARIATION,
-  DEFAULT_LOGO_WIDTH,
-  DEFAULT_LOGO_HEIGHT,
-} from '../constants';
+import { DEFAULT_LOGO_VARIATION, LOGO_VARIATION } from '../constants';
 import type {
   AbstractPageFooterStyles,
   AbstractPageHeaderStyles,
+  BrandPageType,
 } from '../models';
 import {
   BRAND_PAGE_TYPES,
@@ -317,27 +313,30 @@ export const getLogoTemplateUrlByLogoTemplateImage = (
 };
 
 export const getOptimalLogoSize = (
+  brandPageType: BrandPageType,
   width: number,
   height: number,
-  currentSize: string,
-): string => {
-  if (parseFloat(currentSize) >= 16) {
-    return currentSize;
-  }
-
-  const aspectRatio = width / height;
-
-  if (!parseFloat(`${aspectRatio}`) || aspectRatio <= 1) {
-    return currentSize;
-  }
-
-  const newSize = parseFloat(currentSize) + (aspectRatio - 1) * 4.5;
-
-  if (newSize > 11) {
-    return '11rem';
+): { newLogoSize: string } => {
+  const ratio = width / height;
+
+  let newLogoSize = '11rem'; // default size
+
+  if (brandPageType === BRAND_PAGE_TYPES.brandSite) {
+    if (ratio < 0.95) {
+      // tall logos
+      newLogoSize = '10rem';
+    } else if (ratio >= 1.65) {
+      // wide logos
+      newLogoSize = '10rem';
+    }
   } else {
-    return `${Math.round(newSize)}rem`;
+    // BP and BC default
+    newLogoSize = '8rem';
   }
+
+  return {
+    newLogoSize,
+  };
 };
 
 export const calculateLogoDimensions = (
@@ -447,16 +446,14 @@ export const recalculateLogoContentDimensions = async (
 
       // 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,
+        const dimensions = getOptimalLogoSize(
+          BRAND_PAGE_TYPES.default,
+          logoData.width,
+          logoData.height,
         );
 
-        content.logoImageHeight = dimensions.height;
-        content.logoImageWidth = dimensions.width;
+        content.logoImageHeight = dimensions.newLogoSize;
+        content.logoImageWidth = dimensions.newLogoSize;
       }
     });
   } catch (error) {

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

@@ -85,7 +85,10 @@ describe('migration07', () => {
     const migrationData = createMigrationData(brandPageData);
     const originalDimensions = captureOriginalDimensions(migrationData);
 
-    const result = await migration07(migrationData, { isServerRender: true });
+    const result = await migration07(migrationData, {
+      isServerRender: true,
+      isUserDraft: false,
+    });
 
     // Should set useOldLogoRenderSize flag and return early
     expect(result.useOldLogoRenderSize).toBe(true);
@@ -119,7 +122,10 @@ describe('migration07', () => {
     const migrationData = createMigrationData(brandPageData);
     const originalDimensions = captureOriginalDimensions(migrationData);
 
-    const result = await migration07(migrationData, { isServerRender: false });
+    const result = await migration07(migrationData, {
+      isServerRender: false,
+      isUserDraft: false,
+    });
 
     // Dimensions should remain unchanged when no logo token
     expect(result.brandPageModel.pageHeaderDesktop?.logoImageWidth).toBe(
@@ -148,7 +154,10 @@ describe('migration07', () => {
     });
 
     const migrationData = createMigrationData(brandPageData);
-    const result = await migration07(migrationData, { isServerRender: false });
+    const result = await migration07(migrationData, {
+      isServerRender: false,
+      isUserDraft: false,
+    });
 
     // Should not crash and return the migrationData unchanged since no logo token
     expect(result).toBeDefined();
@@ -167,7 +176,10 @@ describe('migration07', () => {
 
     // Should not crash when pageHeaderDesktop is missing
     await expect(
-      migration07(migrationData, { isServerRender: false }),
+      migration07(migrationData, {
+        isServerRender: false,
+        isUserDraft: false,
+      }),
     ).resolves.toBeDefined();
   });
 
@@ -196,7 +208,10 @@ describe('migration07', () => {
     });
 
     const migrationData = createMigrationData(brandPageData);
-    const result = await migration07(migrationData, { isServerRender: true });
+    const result = await migration07(migrationData, {
+      isServerRender: true,
+      isUserDraft: false,
+    });
 
     // Should return the exact same migrationData instance
     expect(result).toBe(migrationData);
@@ -235,7 +250,10 @@ describe('migration07', () => {
 
     // The migration should attempt to process the template image
     // Since we can't mock the API call, we expect it to either succeed or fail gracefully
-    const result = await migration07(migrationData, { isServerRender: false });
+    const result = await migration07(migrationData, {
+      isServerRender: false,
+      isUserDraft: false,
+    });
 
     expect(result).toBeDefined();
     expect(result.brandPageModel.pageHeaderDesktop).toBeDefined();
@@ -276,7 +294,10 @@ describe('migration07', () => {
     });
 
     const migrationData = createMigrationData(brandPageData);
-    const result = await migration07(migrationData, { isServerRender: false });
+    const result = await migration07(migrationData, {
+      isServerRender: false,
+      isUserDraft: false,
+    });
 
     const { brandPageModel } = result;
 
@@ -330,7 +351,10 @@ describe('migration07', () => {
     });
 
     const migrationData = createMigrationData(brandPageData);
-    const result = await migration07(migrationData, { isServerRender: false });
+    const result = await migration07(migrationData, {
+      isServerRender: false,
+      isUserDraft: false,
+    });
 
     const { brandPageModel } = result;
 

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

@@ -11,11 +11,11 @@ import {
 } from '../..';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { calculateLogoDimensions } from '../logo.util';
-import type { MigrationData } from '../migration.util';
+import type { MigrationData, MigrationOptions } from '../migration.util';
 
 export const migration07 = async (
   migrationResult: MigrationData,
-  options: { isServerRender: boolean },
+  options: MigrationOptions,
 ): Promise<MigrationData> => {
   const { brandPageModel } = migrationResult;
 
@@ -23,7 +23,7 @@ export const migration07 = async (
     return migrationResult;
   }
 
-  if (options.isServerRender !== undefined && options.isServerRender) {
+  if (options.disableLogoSizeMigration) {
     migrationResult.useOldLogoRenderSize = true;
 
     return migrationResult;

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

@@ -60,11 +60,15 @@ describe('migration08', () => {
     vi.clearAllMocks();
   });
 
-  test('should skip migration when isServerRender is true', async () => {
+  test('should skip migration when disableLogoSizeMigration is true', async () => {
     const brandPageData = createTestBrandPageData();
     const migrationData = createMigrationData(brandPageData);
 
-    const result = await migration08(migrationData, { isServerRender: true });
+    const result = await migration08(migrationData, {
+      isServerRender: true,
+      isUserDraft: false,
+      disableLogoSizeMigration: true,
+    });
 
     expect(result.useOldLogoRenderSize).toBe(true);
     expect(
@@ -103,7 +107,10 @@ describe('migration08', () => {
       data: 'test-svg-data',
     });
 
-    const result = await migration08(migrationData, { isServerRender: false });
+    const result = await migration08(migrationData, {
+      isServerRender: false,
+      isUserDraft: false,
+    });
 
     expect(result.useOldLogoRenderSize).toBe(false);
     expect(
@@ -143,7 +150,10 @@ describe('migration08', () => {
       migrationData.brandPageModel.pages[0].contents[0] as LogoContent
     ).logoImageWidth;
 
-    const result = await migration08(migrationData, { isServerRender: false });
+    const result = await migration08(migrationData, {
+      isServerRender: false,
+      isUserDraft: false,
+    });
 
     // Migration should complete successfully but skip processing brandSite
     expect(result.useOldLogoRenderSize).toBe(false);
@@ -190,7 +200,10 @@ describe('migration08', () => {
     });
     const migrationData = createMigrationData(brandPageData);
 
-    const result = await migration08(migrationData, { isServerRender: false });
+    const result = await migration08(migrationData, {
+      isServerRender: false,
+      isUserDraft: false,
+    });
 
     expect(result.useOldLogoRenderSize).toBe(false);
   });
@@ -244,7 +257,10 @@ describe('migration08', () => {
       },
     );
 
-    const result = await migration08(migrationData, { isServerRender: false });
+    const result = await migration08(migrationData, {
+      isServerRender: false,
+      isUserDraft: false,
+    });
 
     expect(result.useOldLogoRenderSize).toBe(false);
     expect(
@@ -275,7 +291,10 @@ describe('migration08', () => {
     });
     const migrationData = createMigrationData(brandPageData);
 
-    const result = await migration08(migrationData, { isServerRender: false });
+    const result = await migration08(migrationData, {
+      isServerRender: false,
+      isUserDraft: false,
+    });
 
     // Should apply fallback logic
     expect(
@@ -322,7 +341,10 @@ describe('migration08', () => {
       data: 'test-template-svg-data',
     });
 
-    const result = await migration08(migrationData, { isServerRender: false });
+    const result = await migration08(migrationData, {
+      isServerRender: false,
+      isUserDraft: false,
+    });
 
     expect(
       mockFabricClient.getLogoSvgUrlByLogoTemplateImageAsync,
@@ -361,7 +383,10 @@ describe('migration08', () => {
       new Error('API Error'),
     );
 
-    const result = await migration08(migrationData, { isServerRender: false });
+    const result = await migration08(migrationData, {
+      isServerRender: false,
+      isUserDraft: false,
+    });
 
     expect(result.useOldLogoRenderSize).toBe(true);
   });
@@ -390,7 +415,10 @@ describe('migration08', () => {
     });
     const migrationData = createMigrationData(brandPageData);
 
-    const result = await migration08(migrationData, { isServerRender: false });
+    const result = await migration08(migrationData, {
+      isServerRender: false,
+      isUserDraft: false,
+    });
 
     expect(result.useOldLogoRenderSize).toBe(false);
     expect(result.brandPageModel.pages[0].contents.length).toBe(2);

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

@@ -4,20 +4,14 @@ import {
   BRAND_PAGE_TYPES,
 } from '../..';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
-import type { MigrationData } from '../migration.util';
+import type { MigrationData, MigrationOptions } from '../migration.util';
 import { isLogoContent } from '../model.util';
 import type { LogoContent } from '../../models/logo.model';
-import {
-  calculateLogoDimensions,
-  safeGetLogoImageFromLogoImageUrl,
-} from '../logo.util';
+import { calculateLogoDimensions } from '../logo.util';
 
 export const migration08 = async (
   migrationResult: MigrationData,
-  options: {
-    isServerRender: boolean;
-    isUserDraft?: boolean;
-  },
+  options: MigrationOptions,
 ): Promise<MigrationData> => {
   const { brandPageModel } = migrationResult;
 
@@ -28,11 +22,7 @@ export const migration08 = async (
     return migrationResult;
   }
 
-  if (options.isUserDraft !== undefined && !options.isUserDraft) {
-    return migrationResult;
-  }
-
-  if (options.isServerRender !== undefined && options.isServerRender) {
+  if (options.disableLogoSizeMigration) {
     migrationResult.useOldLogoRenderSize = true;
 
     return migrationResult;

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

@@ -1,4 +1,3 @@
-import { LOGO_MIGRATION_VERSION } from '../constants';
 import { type BrandPageModel, type LogoImageModel } from '../models';
 import { migration01 } from './migration/migration-01';
 import { migration01_1 } from './migration/migration-01_1';
@@ -14,20 +13,24 @@ import { migration08 } from './migration/migration-08';
 import { migration09 } from './migration/migration-09';
 import { migration10 } from './migration/migration-10';
 import { migration11 } from './migration/migration-11';
+
 export interface MigrationData {
   brandPageModel: BrandPageModel;
   useOldLogoRenderSize: boolean;
 }
 
+export interface MigrationOptions {
+  logoImage?: LogoImageModel;
+  isUserDraft: boolean;
+  isServerRender: boolean;
+  disableLogoSizeMigration?: boolean;
+}
+
 interface MigrationTableItem {
   version: number;
   migrateFn: (
     migrationResult: MigrationData,
-    options: {
-      logoImage?: LogoImageModel;
-      isUserDraft: boolean;
-      isServerRender: boolean;
-    },
+    options: MigrationOptions,
   ) => Promise<MigrationData>;
   description: string;
   runAlways?: boolean;
@@ -114,11 +117,7 @@ export const GetLatestModelVersion = () =>
 
 export const migrateBrandPageModel = async (
   brandPageModel: BrandPageModel,
-  options: {
-    logoImage?: LogoImageModel;
-    isUserDraft: boolean;
-    isServerRender: boolean;
-  },
+  options: MigrationOptions,
 ): Promise<MigrationData> => {
   let modelVersion = brandPageModel.v;
 

package/src/brand-page-maker/components/brand-page-maker/BrandPageMakerTemplateSettings.mixin.ts

@@ -4,16 +4,22 @@ import {
   DESKTOP_WIDTH,
   MOBILE_HEIGHT,
   MOBILE_WIDTH,
+  MOBILE_HEIGHT_POST_PURCHASE,
 } from '../../constants';
-import { useBrandPageMakerStore } from '../../../lib';
+import {
+  useBrandPageMakerStore,
+  useBrandPageContainerStore,
+} from '../../../lib';
 
 export default defineComponent({
   setup() {
     const brandPageMakerStore = useBrandPageMakerStore();
+    const brandPageContainerStore = useBrandPageContainerStore();
 
     return {
       brandPageType: computed(() => brandPageMakerStore.brandPageType),
       isBrandSite: computed(() => brandPageMakerStore.isBrandSite),
+      isPrePurchase: computed(() => brandPageContainerStore.isPrePurchase),
       isBrandPageOrIsBrandContact: computed(
         () => brandPageMakerStore.isBrandPageOrIsBrandContact,
       ),
@@ -30,7 +36,11 @@ export default defineComponent({
     },
 
     height(): number {
-      return this.isBrandSite ? DESKTOP_HEIGHT : MOBILE_HEIGHT;
+      if (this.isBrandSite) {
+        return DESKTOP_HEIGHT;
+      }
+
+      return this.isPrePurchase ? MOBILE_HEIGHT : MOBILE_HEIGHT_POST_PURCHASE;
     },
   },
 });

package/src/brand-page-maker/constants/template-constants.ts

@@ -1,4 +1,5 @@
 export const MOBILE_HEIGHT = 734;
+export const MOBILE_HEIGHT_POST_PURCHASE = 636;
 export const MOBILE_WIDTH = 358;
 
 export const DESKTOP_HEIGHT = 600;

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

@@ -901,22 +901,23 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             : logoPostPurchase;
 
           if (logo && logoImageHeight) {
-            const newLogoSize = getOptimalLogoSize(
+            const optimalSize = getOptimalLogoSize(
+              this.brandPageType,
               logo.width,
               logo.height,
-              logoImageHeight,
             );
 
             pageSettingsStore.sections[PAGE_SECTIONS.header][
               VIEWPORTS.desktop
-            ].logoImageWidth = newLogoSize;
+            ].logoImageWidth = optimalSize.newLogoSize;
             pageSettingsStore.sections[PAGE_SECTIONS.header][
               VIEWPORTS.desktop
-            ].logoImageHeight = newLogoSize;
+            ].logoImageHeight = optimalSize.newLogoSize;
           }
         } else if (
-          this.isBrandPageOrIsBrandContact &&
-          brandPageContainerStore.isPrePurchase
+          !brandPageContainerStore.designDraftToken &&
+          !userStore.isAdmin &&
+          this.isBrandPageOrIsBrandContact
         ) {
           recalculateLogoContentDimensions(
             pageSettingsStore,