@designcrowd/library.brand-page 5.16.32 → 5.16.33

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, calculateOptimizedLogoDimensions, applyLogoImageBase64UrlToBrandPageTemplateModel, } from './brand-page/utils/logo.util';
+export { getOptimalLogoSize, calculateOptimizedLogoDimensions, applyLogoImageBase64UrlToBrandPageTemplateModel, recalculateLogoContentDimensions, recalculateHeaderLogoSizes, } from './brand-page/utils/logo.util';
 export { sanitizeRTEHtml } from './brand-page-maker/utils';
 export { getPageSlugFromPageTitle } from './brand-page-maker/utils/slug.util';
 // stores

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

@@ -117,6 +117,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setSelectedTemplateId(payload: {
             templateId: string | false;
         }): void;
+        recalculateLogoSizes(forceRecalculate?: boolean): Promise<void>;
         applySelectedTemplate(): Promise<void>;
         enqueueErrorMessage(): Promise<void>;
         enqueueSaveSuccessMessage(payload?: {

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

@@ -637,6 +637,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setSelectedTemplateId(payload: {
             templateId: string | false;
         }): void;
+        recalculateLogoSizes(forceRecalculate?: boolean): Promise<void>;
         applySelectedTemplate(): Promise<void>;
         enqueueErrorMessage(): Promise<void>;
         enqueueSaveSuccessMessage(payload?: {

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

@@ -580,6 +580,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setSelectedTemplateId(payload: {
             templateId: string | false;
         }): void;
+        recalculateLogoSizes(forceRecalculate?: boolean): Promise<void>;
         applySelectedTemplate(): Promise<void>;
         enqueueErrorMessage(): Promise<void>;
         enqueueSaveSuccessMessage(payload?: {

package/lib/src/shared/logo-settings/components/LogoSettings.mixin.d.ts

@@ -107,6 +107,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setSelectedTemplateId(payload: {
             templateId: string | false;
         }): void;
+        recalculateLogoSizes(forceRecalculate?: boolean): Promise<void>;
         applySelectedTemplate(): Promise<void>;
         enqueueErrorMessage(): Promise<void>;
         enqueueSaveSuccessMessage(payload?: {

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -3795,6 +3795,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setSelectedTemplateId(payload: {
             templateId: string | false;
         }): void;
+        recalculateLogoSizes(forceRecalculate?: boolean): Promise<void>;
         applySelectedTemplate(): Promise<void>;
         enqueueErrorMessage(): Promise<void>;
         enqueueSaveSuccessMessage(payload?: {

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -4315,6 +4315,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setSelectedTemplateId(payload: {
             templateId: string | false;
         }): void;
+        recalculateLogoSizes(forceRecalculate?: boolean): Promise<void>;
         applySelectedTemplate(): Promise<void>;
         enqueueErrorMessage(): Promise<void>;
         enqueueSaveSuccessMessage(payload?: {

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts

@@ -141,6 +141,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setSelectedTemplateId(payload: {
             templateId: string | false;
         }): void;
+        recalculateLogoSizes(forceRecalculate?: boolean): Promise<void>;
         applySelectedTemplate(): Promise<void>;
         enqueueErrorMessage(): Promise<void>;
         enqueueSaveSuccessMessage(payload?: {

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -550,6 +550,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setSelectedTemplateId(payload: {
             templateId: string | false;
         }): void;
+        recalculateLogoSizes(forceRecalculate?: boolean): Promise<void>;
         applySelectedTemplate(): Promise<void>;
         enqueueErrorMessage(): Promise<void>;
         enqueueSaveSuccessMessage(payload?: {

package/package.json

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

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

@@ -396,67 +396,99 @@ export const calculateOptimizedLogoDimensions = (
 
 export const recalculateLogoContentDimensions = async (
   pageData: any,
-  editableLogoVariations?: {
+  editableLogoVariations: {
     variationId: number;
     width: number;
     height: number;
   }[],
+  logoImage: LogoImageModel,
+  isPrePurchase: boolean,
 ) => {
   try {
-    const logoContents: {
-      content: any;
-      pageIndex: number;
-      contentIndex: number;
-    }[] = [];
-
-    pageData.pages.forEach((page: any, pageIndex: number) => {
-      page.contents.forEach((contentItem: any, contentIndex: number) => {
+    let logoData: { width: number; height: number } | undefined;
+
+    // For prepurchase, use editableLogoVariations
+    if (isPrePurchase && logoImage.logoVariation !== undefined) {
+      logoData = editableLogoVariations.find(
+        (v) => v.variationId === logoImage.logoVariation,
+      );
+    }
+
+    // For post-purchase or fallback, fetch from Fabric
+    if (!logoData || logoData.width <= 0 || logoData.height <= 0) {
+      logoData =
+        await FabricRenderClient.getInstance().getLogoSvgUrlByLogoImageAsync(
+          logoImage,
+        );
+    }
+
+    if (!logoData || logoData.width <= 0 || logoData.height <= 0) {
+      return;
+    }
+
+    const dimensions = getOptimalLogoSize(
+      BRAND_PAGE_TYPES.default,
+      logoData.width,
+      logoData.height,
+    );
+
+    pageData.pages.forEach((page: any) => {
+      page.contents.forEach((contentItem: any) => {
         const content = contentItem.settings.content;
 
         if (isLogoContent(content)) {
-          logoContents.push({ content, pageIndex, contentIndex });
+          content.logoImageHeight = dimensions.newLogoSize;
+          content.logoImageWidth = dimensions.newLogoSize;
         }
       });
     });
+  } catch (error) {
+    console.warn('Failed to recalculate logo dimensions:', error);
+  }
+};
 
-    if (logoContents.length === 0) {
-      return;
-    }
+export const recalculateHeaderLogoSizes = async (
+  pageSettingsStore: any,
+  logoSettingsStore: any,
+  editableLogoVariations: {
+    variationId: number;
+    width: number;
+    height: number;
+  }[],
+  brandPageType: BrandPageType,
+  isPrePurchase: boolean,
+  forceRecalculate = false,
+) => {
+  try {
+    const logoImageHeight =
+      pageSettingsStore.sections.header.desktop.logoImageHeight;
+    const logoVariation =
+      pageSettingsStore.sections.header.desktop.logoVariation;
 
-    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,
-        );
+    const logoPrePurchase = editableLogoVariations.find(
+      (logo) => logo.variationId === logoVariation,
+    );
 
-        if (matchingVariation) {
-          logoData = {
-            width: matchingVariation.width,
-            height: matchingVariation.height,
-          };
-        }
-      }
+    const logoPostPurchase =
+      await FabricRenderClient.getInstance().getLogoSvgUrlByLogoImageAsync(
+        logoSettingsStore.selectedLogoImage,
+      );
 
-      // Apply dimensions or fallback logic
-      if (logoData && logoData.width && logoData.height) {
-        const dimensions = getOptimalLogoSize(
-          BRAND_PAGE_TYPES.default,
-          logoData.width,
-          logoData.height,
-        );
+    const logo = isPrePurchase ? logoPrePurchase : logoPostPurchase;
 
-        content.logoImageHeight = dimensions.newLogoSize;
-        content.logoImageWidth = dimensions.newLogoSize;
-      }
-    });
+    if (logo && (logoImageHeight || forceRecalculate)) {
+      const optimalSize = getOptimalLogoSize(
+        brandPageType,
+        logo.width,
+        logo.height,
+      );
+
+      pageSettingsStore.sections.header.desktop.logoImageWidth =
+        optimalSize.newLogoSize;
+      pageSettingsStore.sections.header.desktop.logoImageHeight =
+        optimalSize.newLogoSize;
+    }
   } catch (error) {
-    console.warn('Failed to recalculate prepurchase logo dimensions:', error);
+    console.warn('Failed to recalculate header logo dimensions:', error);
   }
 };

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

@@ -92,6 +92,7 @@ import {
   applyLogoTemplateImageToBrandPageTemplateModel,
   getOptimalLogoSize,
   recalculateLogoContentDimensions,
+  recalculateHeaderLogoSizes,
 } from '../../../brand-page/utils/logo.util';
 import type { ShopConfigData } from '../../../brand-page/models/shop.model';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
@@ -349,6 +350,31 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
     setSelectedTemplateId(payload: { templateId: string | false }): void {
       this.selectedTemplateId = payload.templateId;
     },
+    async recalculateLogoSizes(forceRecalculate = false) {
+      const brandPageContainerStore = useBrandPageContainerStore();
+      const userStore = useBrandPageMakerUserStore();
+      const pageSettingsStore = useUiPageSettingsStore();
+      const logoSettingsStore = useUiLogoSettingsStore();
+      const editableLogoStore = useUiEditableLogoStore();
+
+      if (!userStore.isAdmin && this.isBrandSite) {
+        await recalculateHeaderLogoSizes(
+          pageSettingsStore,
+          logoSettingsStore,
+          editableLogoStore.editableLogoVariations,
+          this.brandPageType,
+          brandPageContainerStore.isPrePurchase,
+          forceRecalculate,
+        );
+      } else if (!userStore.isAdmin && this.isBrandPageOrIsBrandContact) {
+        await recalculateLogoContentDimensions(
+          pageSettingsStore,
+          editableLogoStore.editableLogoVariations,
+          logoSettingsStore.selectedLogoImage,
+          brandPageContainerStore.isPrePurchase,
+        );
+      }
+    },
     async applySelectedTemplate() {
       const uiStore = useUiStore();
       const logoSettingsStore = useUiLogoSettingsStore();
@@ -567,6 +593,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
         backgroundStyles: brandPageModel.styles.backgroundStyles,
       });
 
+      await this.recalculateLogoSizes(true);
+
       this.setIsModifiedAfterTemplateApplied({
         isModified: false,
       });
@@ -901,52 +929,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           });
         }
 
-        if (
-          !brandPageContainerStore.designDraftToken &&
-          !userStore.isAdmin &&
-          this.isBrandSite
-        ) {
-          const logoImageHeight =
-            pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.desktop]
-              .logoImageHeight;
-          const logoVariation =
-            pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.desktop]
-              .logoVariation;
-          const logoPrePurchase = editableLogoStore.editableLogoVariations.find(
-            (logo) => logo.variationId === logoVariation,
-          );
-          const logoPostPurchase =
-            await FabricRenderClient.getInstance().getLogoSvgUrlByLogoImageAsync(
-              logoSettingsStore.selectedLogoImage,
-            );
-
-          const logo = brandPageContainerStore.isPrePurchase
-            ? logoPrePurchase
-            : logoPostPurchase;
-
-          if (logo && logoImageHeight) {
-            const optimalSize = getOptimalLogoSize(
-              this.brandPageType,
-              logo.width,
-              logo.height,
-            );
-
-            pageSettingsStore.sections[PAGE_SECTIONS.header][
-              VIEWPORTS.desktop
-            ].logoImageWidth = optimalSize.newLogoSize;
-            pageSettingsStore.sections[PAGE_SECTIONS.header][
-              VIEWPORTS.desktop
-            ].logoImageHeight = optimalSize.newLogoSize;
-          }
-        } else if (
-          !brandPageContainerStore.designDraftToken &&
-          !userStore.isAdmin &&
-          this.isBrandPageOrIsBrandContact
-        ) {
-          recalculateLogoContentDimensions(
-            pageSettingsStore,
-            editableLogoStore.editableLogoVariations,
-          );
+        if (!brandPageContainerStore.designDraftToken) {
+          await this.recalculateLogoSizes();
         }
 
         const backgroundStyles = new BackgroundStyles(

package/src/lib.ts

@@ -62,6 +62,8 @@ export {
   getOptimalLogoSize,
   calculateOptimizedLogoDimensions,
   applyLogoImageBase64UrlToBrandPageTemplateModel,
+  recalculateLogoContentDimensions,
+  recalculateHeaderLogoSizes,
 } from './brand-page/utils/logo.util';
 export { sanitizeRTEHtml } from './brand-page-maker/utils';
 export { getPageSlugFromPageTitle } from './brand-page-maker/utils/slug.util';