@designcrowd/library.brand-page 5.16.21-jj-2 → 5.16.21

package/package.json

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

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

@@ -31,7 +31,6 @@ 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;
@@ -77,8 +76,8 @@ withDefaults(
 .desktop-tab-horizontal-stack-left-logo-centered-menu {
   @apply tw-grid;
   grid-template-columns:
-    [logo-start] var(--logo-max-width) [logo-end nav-start] 1fr [nav-end] var(
-      --logo-max-width
+    [logo-start] var(--logo-width) [logo-end nav-start] 1fr [nav-end] var(
+      --logo-width
     )
     [cols-end];
   @apply tw-gap-x-4;
@@ -87,7 +86,6 @@ 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;
@@ -105,7 +103,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-max-width) [logo-end nav-start] 1fr [nav-end];
+  grid-template-columns: [col-start] 1fr [logo-start] var(--logo-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,3 +7,6 @@ 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,4 +208,41 @@ 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

@@ -7,7 +7,6 @@ import {
 import type {
   AbstractPageFooterStyles,
   AbstractPageHeaderStyles,
-  BrandPageType,
 } from '../models';
 import {
   BRAND_PAGE_TYPES,
@@ -318,50 +317,27 @@ export const getLogoTemplateUrlByLogoTemplateImage = (
 };
 
 export const getOptimalLogoSize = (
-  brandPageType: BrandPageType,
   width: number,
   height: number,
   currentSize: string,
-): { newLogoSize: string } => {
-  // //OLD logic
-  // if (parseFloat(currentSize) >= 16) {
-  //   return { newLogoSize: currentSize };
-  // }
-
-  // const aspectRatio = width / height;
-
-  // if (!parseFloat(`${aspectRatio}`) || aspectRatio <= 1) {
-  //   return { newLogoSize: currentSize };
-  // }
-
-  // const newSize = parseFloat(currentSize) + (aspectRatio - 1) * 4.5;
+): string => {
+  if (parseFloat(currentSize) >= 16) {
+    return currentSize;
+  }
 
-  // if (newSize > 11) {
-  //   return { newLogoSize: '11rem' };
-  // } else {
-  //   return { newLogoSize: `${Math.round(newSize)}rem` };
-  // }
+  const aspectRatio = width / height;
 
-  const ratio = width / height;
+  if (!parseFloat(`${aspectRatio}`) || aspectRatio <= 1) {
+    return currentSize;
+  }
 
-  let newLogoSize = '11rem'; // default size
+  const newSize = parseFloat(currentSize) + (aspectRatio - 1) * 4.5;
 
-  if (brandPageType === BRAND_PAGE_TYPES.brandSite) {
-    if (ratio < 0.95) {
-      // tall logos
-      newLogoSize = '10rem';
-    } else if (ratio >= 1.65) {
-      // wide logos
-      newLogoSize = '10rem';
-    }
+  if (newSize > 11) {
+    return '11rem';
   } else {
-    // BP and BC default
-    newLogoSize = '8rem';
+    return `${Math.round(newSize)}rem`;
   }
-
-  return {
-    newLogoSize,
-  };
 };
 
 export const calculateLogoDimensions = (
@@ -471,15 +447,16 @@ export const recalculateLogoContentDimensions = async (
 
       // Apply dimensions or fallback logic
       if (logoData && logoData.width && logoData.height) {
-        const dimensions = getOptimalLogoSize(
-          BRAND_PAGE_TYPES.default,
-          logoData.width,
-          logoData.height,
-          content.logoImageHeight,
+        const currentMaxWidth = content.logoImageWidth || DEFAULT_LOGO_WIDTH;
+        const currentMaxHeight = content.logoImageHeight || DEFAULT_LOGO_HEIGHT;
+        const dimensions = calculateOptimizedLogoDimensions(
+          logoData,
+          currentMaxWidth,
+          currentMaxHeight,
         );
 
-        content.logoImageHeight = dimensions.newLogoSize;
-        content.logoImageWidth = dimensions.newLogoSize;
+        content.logoImageHeight = dimensions.height;
+        content.logoImageWidth = dimensions.width;
       }
     });
   } catch (error) {

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

@@ -85,10 +85,7 @@ describe('migration07', () => {
     const migrationData = createMigrationData(brandPageData);
     const originalDimensions = captureOriginalDimensions(migrationData);
 
-    const result = await migration07(migrationData, {
-      isServerRender: true,
-      isUserDraft: false,
-    });
+    const result = await migration07(migrationData, { isServerRender: true });
 
     // Should set useOldLogoRenderSize flag and return early
     expect(result.useOldLogoRenderSize).toBe(true);
@@ -122,10 +119,7 @@ describe('migration07', () => {
     const migrationData = createMigrationData(brandPageData);
     const originalDimensions = captureOriginalDimensions(migrationData);
 
-    const result = await migration07(migrationData, {
-      isServerRender: false,
-      isUserDraft: false,
-    });
+    const result = await migration07(migrationData, { isServerRender: false });
 
     // Dimensions should remain unchanged when no logo token
     expect(result.brandPageModel.pageHeaderDesktop?.logoImageWidth).toBe(
@@ -154,10 +148,7 @@ describe('migration07', () => {
     });
 
     const migrationData = createMigrationData(brandPageData);
-    const result = await migration07(migrationData, {
-      isServerRender: false,
-      isUserDraft: false,
-    });
+    const result = await migration07(migrationData, { isServerRender: false });
 
     // Should not crash and return the migrationData unchanged since no logo token
     expect(result).toBeDefined();
@@ -176,10 +167,7 @@ describe('migration07', () => {
 
     // Should not crash when pageHeaderDesktop is missing
     await expect(
-      migration07(migrationData, {
-        isServerRender: false,
-        isUserDraft: false,
-      }),
+      migration07(migrationData, { isServerRender: false }),
     ).resolves.toBeDefined();
   });
 
@@ -208,10 +196,7 @@ describe('migration07', () => {
     });
 
     const migrationData = createMigrationData(brandPageData);
-    const result = await migration07(migrationData, {
-      isServerRender: true,
-      isUserDraft: false,
-    });
+    const result = await migration07(migrationData, { isServerRender: true });
 
     // Should return the exact same migrationData instance
     expect(result).toBe(migrationData);
@@ -250,10 +235,7 @@ 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,
-      isUserDraft: false,
-    });
+    const result = await migration07(migrationData, { isServerRender: false });
 
     expect(result).toBeDefined();
     expect(result.brandPageModel.pageHeaderDesktop).toBeDefined();
@@ -294,10 +276,7 @@ describe('migration07', () => {
     });
 
     const migrationData = createMigrationData(brandPageData);
-    const result = await migration07(migrationData, {
-      isServerRender: false,
-      isUserDraft: false,
-    });
+    const result = await migration07(migrationData, { isServerRender: false });
 
     const { brandPageModel } = result;
 
@@ -351,10 +330,7 @@ describe('migration07', () => {
     });
 
     const migrationData = createMigrationData(brandPageData);
-    const result = await migration07(migrationData, {
-      isServerRender: false,
-      isUserDraft: false,
-    });
+    const result = await migration07(migrationData, { isServerRender: 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, MigrationOptions } from '../migration.util';
+import type { MigrationData } from '../migration.util';
 
 export const migration07 = async (
   migrationResult: MigrationData,
-  options: MigrationOptions,
+  options: { isServerRender: boolean },
 ): Promise<MigrationData> => {
   const { brandPageModel } = migrationResult;
 
@@ -23,7 +23,7 @@ export const migration07 = async (
     return migrationResult;
   }
 
-  if (options.disableLogoSizeMigration) {
+  if (options.isServerRender !== undefined && options.isServerRender) {
     migrationResult.useOldLogoRenderSize = true;
 
     return migrationResult;

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

@@ -60,15 +60,11 @@ describe('migration08', () => {
     vi.clearAllMocks();
   });
 
-  test('should skip migration when disableLogoSizeMigration is true', async () => {
+  test('should skip migration when isServerRender is true', async () => {
     const brandPageData = createTestBrandPageData();
     const migrationData = createMigrationData(brandPageData);
 
-    const result = await migration08(migrationData, {
-      isServerRender: true,
-      isUserDraft: false,
-      disableLogoSizeMigration: true,
-    });
+    const result = await migration08(migrationData, { isServerRender: true });
 
     expect(result.useOldLogoRenderSize).toBe(true);
     expect(
@@ -107,10 +103,7 @@ describe('migration08', () => {
       data: 'test-svg-data',
     });
 
-    const result = await migration08(migrationData, {
-      isServerRender: false,
-      isUserDraft: false,
-    });
+    const result = await migration08(migrationData, { isServerRender: false });
 
     expect(result.useOldLogoRenderSize).toBe(false);
     expect(
@@ -150,10 +143,7 @@ describe('migration08', () => {
       migrationData.brandPageModel.pages[0].contents[0] as LogoContent
     ).logoImageWidth;
 
-    const result = await migration08(migrationData, {
-      isServerRender: false,
-      isUserDraft: false,
-    });
+    const result = await migration08(migrationData, { isServerRender: false });
 
     // Migration should complete successfully but skip processing brandSite
     expect(result.useOldLogoRenderSize).toBe(false);
@@ -200,10 +190,7 @@ describe('migration08', () => {
     });
     const migrationData = createMigrationData(brandPageData);
 
-    const result = await migration08(migrationData, {
-      isServerRender: false,
-      isUserDraft: false,
-    });
+    const result = await migration08(migrationData, { isServerRender: false });
 
     expect(result.useOldLogoRenderSize).toBe(false);
   });
@@ -257,10 +244,7 @@ describe('migration08', () => {
       },
     );
 
-    const result = await migration08(migrationData, {
-      isServerRender: false,
-      isUserDraft: false,
-    });
+    const result = await migration08(migrationData, { isServerRender: false });
 
     expect(result.useOldLogoRenderSize).toBe(false);
     expect(
@@ -291,10 +275,7 @@ describe('migration08', () => {
     });
     const migrationData = createMigrationData(brandPageData);
 
-    const result = await migration08(migrationData, {
-      isServerRender: false,
-      isUserDraft: false,
-    });
+    const result = await migration08(migrationData, { isServerRender: false });
 
     // Should apply fallback logic
     expect(
@@ -341,10 +322,7 @@ describe('migration08', () => {
       data: 'test-template-svg-data',
     });
 
-    const result = await migration08(migrationData, {
-      isServerRender: false,
-      isUserDraft: false,
-    });
+    const result = await migration08(migrationData, { isServerRender: false });
 
     expect(
       mockFabricClient.getLogoSvgUrlByLogoTemplateImageAsync,
@@ -383,10 +361,7 @@ describe('migration08', () => {
       new Error('API Error'),
     );
 
-    const result = await migration08(migrationData, {
-      isServerRender: false,
-      isUserDraft: false,
-    });
+    const result = await migration08(migrationData, { isServerRender: false });
 
     expect(result.useOldLogoRenderSize).toBe(true);
   });
@@ -415,10 +390,7 @@ describe('migration08', () => {
     });
     const migrationData = createMigrationData(brandPageData);
 
-    const result = await migration08(migrationData, {
-      isServerRender: false,
-      isUserDraft: false,
-    });
+    const result = await migration08(migrationData, { isServerRender: 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,14 +4,20 @@ import {
   BRAND_PAGE_TYPES,
 } from '../..';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
-import type { MigrationData, MigrationOptions } from '../migration.util';
+import type { MigrationData } from '../migration.util';
 import { isLogoContent } from '../model.util';
 import type { LogoContent } from '../../models/logo.model';
-import { calculateLogoDimensions } from '../logo.util';
+import {
+  calculateLogoDimensions,
+  safeGetLogoImageFromLogoImageUrl,
+} from '../logo.util';
 
 export const migration08 = async (
   migrationResult: MigrationData,
-  options: MigrationOptions,
+  options: {
+    isServerRender: boolean;
+    isUserDraft?: boolean;
+  },
 ): Promise<MigrationData> => {
   const { brandPageModel } = migrationResult;
 
@@ -22,7 +28,11 @@ export const migration08 = async (
     return migrationResult;
   }
 
-  if (options.disableLogoSizeMigration) {
+  if (options.isUserDraft !== undefined && !options.isUserDraft) {
+    return migrationResult;
+  }
+
+  if (options.isServerRender !== undefined && options.isServerRender) {
     migrationResult.useOldLogoRenderSize = true;
 
     return migrationResult;

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

@@ -1,3 +1,4 @@
+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';
@@ -12,24 +13,20 @@ import { migration07 } from './migration/migration-07';
 import { migration08 } from './migration/migration-08';
 import { migration09 } from './migration/migration-09';
 import { migration10 } from './migration/migration-10';
-
 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: MigrationOptions,
+    options: {
+      logoImage?: LogoImageModel;
+      isUserDraft: boolean;
+      isServerRender: boolean;
+    },
   ) => Promise<MigrationData>;
   description: string;
   runAlways?: boolean;
@@ -111,7 +108,11 @@ export const GetLatestModelVersion = () =>
 
 export const migrateBrandPageModel = async (
   brandPageModel: BrandPageModel,
-  options: MigrationOptions,
+  options: {
+    logoImage?: LogoImageModel;
+    isUserDraft: boolean;
+    isServerRender: boolean;
+  },
 ): Promise<MigrationData> => {
   let modelVersion = brandPageModel.v;
 

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

@@ -4,22 +4,16 @@ import {
   DESKTOP_WIDTH,
   MOBILE_HEIGHT,
   MOBILE_WIDTH,
-  MOBILE_HEIGHT_POST_PURCHASE,
 } from '../../constants';
-import {
-  useBrandPageMakerStore,
-  useBrandPageContainerStore,
-} from '../../../lib';
+import { useBrandPageMakerStore } 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,
       ),
@@ -36,11 +30,7 @@ export default defineComponent({
     },
 
     height(): number {
-      if (this.isBrandSite) {
-        return DESKTOP_HEIGHT;
-      }
-
-      return this.isPrePurchase ? MOBILE_HEIGHT : MOBILE_HEIGHT_POST_PURCHASE;
+      return this.isBrandSite ? DESKTOP_HEIGHT : MOBILE_HEIGHT;
     },
   },
 });

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

@@ -1,5 +1,4 @@
 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,8 +901,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             : logoPostPurchase;
 
           if (logo && logoImageHeight) {
-            const optimalSize = getOptimalLogoSize(
-              this.brandPageType,
+            const newLogoSize = getOptimalLogoSize(
               logo.width,
               logo.height,
               logoImageHeight,
@@ -910,15 +909,14 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
 
             pageSettingsStore.sections[PAGE_SECTIONS.header][
               VIEWPORTS.desktop
-            ].logoImageWidth = optimalSize.newLogoSize;
+            ].logoImageWidth = newLogoSize;
             pageSettingsStore.sections[PAGE_SECTIONS.header][
               VIEWPORTS.desktop
-            ].logoImageHeight = optimalSize.newLogoSize;
+            ].logoImageHeight = newLogoSize;
           }
         } else if (
-          !brandPageContainerStore.designDraftToken &&
-          !userStore.isAdmin &&
-          this.isBrandPageOrIsBrandContact
+          this.isBrandPageOrIsBrandContact &&
+          brandPageContainerStore.isPrePurchase
         ) {
           recalculateLogoContentDimensions(
             pageSettingsStore,