@designcrowd/library.brand-page 5.15.12 → 5.15.13

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

@@ -0,0 +1,118 @@
+import {
+  DEFAULT_LOGO_HEIGHT,
+  DEFAULT_LOGO_WIDTH,
+  BRAND_PAGE_TYPES,
+} from '../..';
+import { FabricRenderClient } from '../../../clients/fabric-render-client';
+import type { MigrationData } from '../migration.util';
+import { isLogoContent } from '../model.util';
+import type { LogoContent } from '../../models/logo.model';
+import {
+  calculateLogoDimensions,
+  safeGetLogoImageFromLogoImageUrl,
+} from '../logo.util';
+
+export const migration08 = async (
+  migrationResult: MigrationData,
+  options: {
+    isServerRender: boolean;
+    isUserDraft?: boolean;
+  },
+): Promise<MigrationData> => {
+  const { brandPageModel } = migrationResult;
+
+  if (
+    brandPageModel.brandPageType !== BRAND_PAGE_TYPES.default &&
+    brandPageModel.brandPageType !== BRAND_PAGE_TYPES.brandContact
+  ) {
+    return migrationResult;
+  }
+
+  if (options.isUserDraft !== undefined && !options.isUserDraft) {
+    return migrationResult;
+  }
+
+  if (options.isServerRender !== undefined && options.isServerRender) {
+    migrationResult.useOldLogoRenderSize = true;
+
+    return migrationResult;
+  }
+
+  try {
+    const fabricClient = FabricRenderClient.getInstance();
+
+    const logoContents: {
+      content: LogoContent;
+      pageIndex: number;
+      contentIndex: number;
+    }[] = [];
+
+    brandPageModel.pages.forEach((page, pageIndex) => {
+      page.contents.forEach((content, contentIndex) => {
+        if (isLogoContent(content)) {
+          logoContents.push({ content, pageIndex, contentIndex });
+        }
+      });
+    });
+
+    const logoDataPromises = logoContents.map(async ({ content }) => {
+      if (content.logoTemplateImage?.logoTemplateToken) {
+        const logoData =
+          await fabricClient.getLogoSvgUrlByLogoTemplateImageAsync(
+            content.logoTemplateImage,
+          );
+
+        return { content, logoData };
+      }
+
+      if (content.logoImage?.logoDraftToken) {
+        const logoData = await fabricClient.getLogoSvgUrlByLogoImageAsync({
+          logoDraftToken: content.logoImage.logoDraftToken,
+          logoVariation: content.logoImage.logoVariation,
+        });
+
+        return { content, logoData };
+      }
+
+      return { content, logoData: null };
+    });
+
+    const results = await Promise.all(logoDataPromises);
+
+    // Apply dimensions to each logo content
+    results.forEach(({ content, logoData }) => {
+      if (logoData && logoData.width && logoData.height) {
+        const currentMaxWidth = content.logoImageWidth || DEFAULT_LOGO_WIDTH;
+        const currentMaxHeight = content.logoImageHeight || DEFAULT_LOGO_HEIGHT;
+
+        const dimensions = calculateLogoDimensions(
+          logoData,
+          currentMaxWidth,
+          currentMaxHeight,
+        );
+
+        content.logoImageHeight = dimensions.height;
+        content.logoImageWidth = dimensions.width;
+      }
+      // else if (!logoData) {
+      //   // Fallback logic when no logo data is available
+      //   const currentMaxHeight = content.logoImageHeight || DEFAULT_LOGO_HEIGHT;
+      //   const heightValue = parseFloat(currentMaxHeight);
+      //   const newHeight =
+      //     heightValue >= 7
+      //       ? Math.round(heightValue * 0.7)
+      //       : Math.round(heightValue * 0.8);
+
+      //   content.logoImageHeight = `${newHeight}rem`;
+      //   content.logoImageWidth = `${newHeight}rem`;
+      // }
+    });
+  } catch (error) {
+    console.warn('Migration 08: Failed to fetch logo dimensions:', error);
+    migrationResult.useOldLogoRenderSize = true;
+
+    return migrationResult;
+  }
+
+  return migrationResult;
+};

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

@@ -10,6 +10,7 @@ import { migration06 } from './migration/migration-06';
 import { migration05_1 } from './migration/migration-05_1';
 import { migration05_2 } from './migration/migration-05_2';
 import { migration07 } from './migration/migration-07';
+import { migration08 } from './migration/migration-08';
 export interface MigrationData {
   brandPageModel: BrandPageModel;
   useOldLogoRenderSize: boolean;
@@ -83,6 +84,11 @@ const MIGRATION_TABLE = [
     description:
       'Migrating logo render sizes for logo content, header and footer sections',
   },
+  {
+    version: 8,
+    migrateFn: migration08,
+    description: 'Migrating logo content sizes for brandPage and brandContact',
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

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

@@ -91,6 +91,7 @@ import { getAiContentIndexByTemplateTokenAndNumberOfVariations } from '../../uti
 import {
   applyLogoTemplateImageToBrandPageTemplateModel,
   getOptimalLogoSize,
+  recalculateLogoContentDimensions,
 } from '../../../brand-page/utils/logo.util';
 import type { ShopConfigData } from '../../../brand-page/models/shop.model';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
@@ -816,6 +817,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           });
         }
 
+        const pageSettingsStore = useUiPageSettingsStore();
+
         if (brandPageContainerStore.isPrePurchase) {
           await editableLogoStore.setStateAsync({
             defaultPrimaryText: businessName,
@@ -844,8 +847,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           });
         }
 
-        const pageSettingsStore = useUiPageSettingsStore();
-
         if (
           !brandPageContainerStore.designDraftToken &&
           !userStore.isAdmin &&
@@ -883,6 +884,14 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
               VIEWPORTS.desktop
             ].logoImageHeight = newLogoSize;
           }
+        } else if (
+          this.isBrandPageOrIsBrandContact &&
+          brandPageContainerStore.isPrePurchase
+        ) {
+          recalculateLogoContentDimensions(
+            pageSettingsStore,
+            editableLogoStore.editableLogoVariations,
+          );
         }
 
         const backgroundStyles = new BackgroundStyles(

package/src/clients/fabric-render-client.ts

@@ -120,7 +120,7 @@ export class FabricRenderClient {
     },
     outputFormat: LogoOutputFormat = 'base64svgjson',
   ) {
-    return `${this.baseUrl}/asset/logotemplate/brand-page/${logoTemplateImage.logoTemplateToken}?dimensionsType=preview_image_transparent_no_buffer&outputFormat=${outputFormat}&logoTemplateVersion=${logoTemplateImage.logoTemplateVersion}&text=${encodeURIComponent(logoTemplateImage.logoTemplateText)}`;
+    return `${this.baseUrl}/asset/logotemplate/brand-page/${logoTemplateImage.logoTemplateToken}?dimensionsType=preview_image_transparent_no_buffer&outputFormat=${outputFormat}&logoTemplateVersion=${logoTemplateImage.logoTemplateVersion}&text=${encodeURIComponent(logoTemplateImage.logoTemplateText)}&applyAutoLayout=true`;
   }
 
   public getLogoVariationUrlByLogoVariationIndex(

package/src/lib.ts

@@ -57,7 +57,10 @@ export {
 } from './brand-page/utils';
 export * as brandPageUtils from './brand-page/utils';
 export type { CriticalResourceURLs } from './brand-page/utils/view-model.util';
-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';