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

package/lib/src/{CreatedOnBrandCrowd-de-de-BXPCJxUB.js → CreatedOnBrandCrowd-de-de-Ch0n753P.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CrdwMib8.js";
+import { _ as t } from "./lib-CtPHohpu.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-CvZgqD0_.js → CreatedOnBrandCrowd-en-us-B48UACQl.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CrdwMib8.js";
+import { _ as t } from "./lib-CtPHohpu.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-CH1AwQm4.js → CreatedOnBrandCrowd-es-es-BUFUO_0v.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CrdwMib8.js";
+import { _ as t } from "./lib-CtPHohpu.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-kMRKllNk.js → CreatedOnBrandCrowd-fr-ca-DkM45w95.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CrdwMib8.js";
+import { _ as t } from "./lib-CtPHohpu.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-kMRKllNk.js → CreatedOnBrandCrowd-fr-fr-DkM45w95.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CrdwMib8.js";
+import { _ as t } from "./lib-CtPHohpu.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-DhzhLbLV.js → CreatedOnBrandCrowd-pt-br-BrfXhDcV.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CrdwMib8.js";
+import { _ as t } from "./lib-CtPHohpu.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-DhzhLbLV.js → CreatedOnBrandCrowd-pt-pt-BrfXhDcV.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-CrdwMib8.js";
+import { _ as t } from "./lib-CtPHohpu.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-CTWeVBI1.js → CreatedOnDcom-de-de-BXtSjuuW.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CrdwMib8.js";
+import { _ as e } from "./lib-CtPHohpu.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-DNJO48Gt.js → CreatedOnDcom-en-us-0YJL5DzN.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CrdwMib8.js";
+import { _ as e } from "./lib-CtPHohpu.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-BhxPOXSv.js → CreatedOnDcom-es-es-DL_QwZzN.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CrdwMib8.js";
+import { _ as e } from "./lib-CtPHohpu.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-D5tOLgVL.js → CreatedOnDcom-fr-ca-Bv3VkWWL.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CrdwMib8.js";
+import { _ as e } from "./lib-CtPHohpu.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-DwUUlEvf.js → CreatedOnDcom-fr-fr-BT5nAd3W.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-CrdwMib8.js";
+import { _ as e } from "./lib-CtPHohpu.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-DTxNAcvO.js → CreatedOnDcom-pt-br-O4Y_UNoK.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-CrdwMib8.js";
+import { _ as M } from "./lib-CtPHohpu.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-Lj4Dmg1_.js → CreatedOnDcom-pt-pt-D06bNEGa.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-CrdwMib8.js";
+import { _ as M } from "./lib-CtPHohpu.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

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

@@ -5,4 +5,3 @@ export declare const LOGO_VARIATION: {
     TEXT_ONLY_WITH_TRANSPARENT_BACKGROUND: number;
 };
 export declare const DEFAULT_LOGO_VARIATION: number;
-export declare const LOGO_MIGRATION_VERSION = 6;

package/lib/src/brand-page/constants/logo.constants.js

@@ -5,5 +5,3 @@ export const LOGO_VARIATION = {
     TEXT_ONLY_WITH_TRANSPARENT_BACKGROUND: 3,
 };
 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/lib/src/brand-page/utils/logo.util.d.ts

@@ -1,3 +1,4 @@
+import type { BrandPageType } from '../models';
 import { type BrandPageModel, type LogoImageModel, type LogoTemplateImageModel, type LogoVariation } from '../models';
 import { type LogoOutputFormat } from '../../clients/fabric-render-client';
 export declare const getLogoDraftTokenFromLogoImageUrl: (variationUrl?: string) => string;
@@ -12,7 +13,9 @@ export declare const applyLogoImageBase64UrlToBrandPageTemplateModel: (model: Br
 export declare const applyLogoTemplateImageToBrandPageTemplateModel: (model: BrandPageModel, logoTemplateImage: LogoTemplateImageModel) => BrandPageModel;
 export declare const getLogoVariationUrlByLogoImage: (logoImage: LogoImageModel) => string | undefined;
 export declare const getLogoTemplateUrlByLogoTemplateImage: (logoTemplateImage: LogoTemplateImageModel) => string;
-export declare const getOptimalLogoSize: (width: number, height: number, currentSize: string) => string;
+export declare const getOptimalLogoSize: (brandPageType: BrandPageType, width: number, height: number) => {
+    newLogoSize: string;
+};
 export declare const calculateLogoDimensions: (logoData: {
     width: number;
     height: number;

package/lib/src/brand-page/utils/logo.util.js

@@ -1,4 +1,4 @@
-import { DEFAULT_LOGO_VARIATION, LOGO_VARIATION, DEFAULT_LOGO_WIDTH, DEFAULT_LOGO_HEIGHT, } from '../constants';
+import { DEFAULT_LOGO_VARIATION, LOGO_VARIATION } from '../constants';
 import { BRAND_PAGE_TYPES, } from '../models';
 import { FabricRenderClient, LogoVariationDefinitions, } from '../../clients/fabric-render-client';
 import { isLogoContent } from './model.util';
@@ -167,21 +167,26 @@ export const getLogoVariationUrlByLogoImage = (logoImage) => {
 export const getLogoTemplateUrlByLogoTemplateImage = (logoTemplateImage) => {
     return FabricRenderClient.getInstance().getLogoTemplateUrlByLogoTemplateImage(logoTemplateImage);
 };
-export const getOptimalLogoSize = (width, height, currentSize) => {
-    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';
+export const getOptimalLogoSize = (brandPageType, width, height) => {
+    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 = (logoData, maxWidth, maxHeight) => {
     const maxWidthRem = parseFloat(maxWidth);
@@ -249,11 +254,9 @@ export const recalculateLogoContentDimensions = async (pageData, editableLogoVar
             }
             // 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;
+                const dimensions = getOptimalLogoSize(BRAND_PAGE_TYPES.default, logoData.width, logoData.height);
+                content.logoImageHeight = dimensions.newLogoSize;
+                content.logoImageWidth = dimensions.newLogoSize;
             }
         });
     }

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

@@ -1,4 +1,2 @@
-import type { MigrationData } from '../migration.util';
-export declare const migration07: (migrationResult: MigrationData, options: {
-    isServerRender: boolean;
-}) => Promise<MigrationData>;
+import type { MigrationData, MigrationOptions } from '../migration.util';
+export declare const migration07: (migrationResult: MigrationData, options: MigrationOptions) => Promise<MigrationData>;

package/lib/src/brand-page/utils/migration/migration-07.js

@@ -6,7 +6,7 @@ export const migration07 = async (migrationResult, options) => {
     if (brandPageModel.brandPageType !== BRAND_PAGE_TYPES.brandSite) {
         return migrationResult;
     }
-    if (options.isServerRender !== undefined && options.isServerRender) {
+    if (options.disableLogoSizeMigration) {
         migrationResult.useOldLogoRenderSize = true;
         return migrationResult;
     }

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

@@ -1,5 +1,2 @@
-import type { MigrationData } from '../migration.util';
-export declare const migration08: (migrationResult: MigrationData, options: {
-    isServerRender: boolean;
-    isUserDraft?: boolean;
-}) => Promise<MigrationData>;
+import type { MigrationData, MigrationOptions } from '../migration.util';
+export declare const migration08: (migrationResult: MigrationData, options: MigrationOptions) => Promise<MigrationData>;

package/lib/src/brand-page/utils/migration/migration-08.js

@@ -1,17 +1,14 @@
 import { DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, BRAND_PAGE_TYPES, } from '../..';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { isLogoContent } from '../model.util';
-import { calculateLogoDimensions, safeGetLogoImageFromLogoImageUrl, } from '../logo.util';
+import { calculateLogoDimensions } from '../logo.util';
 export const migration08 = async (migrationResult, options) => {
     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) {
+    if (options.disableLogoSizeMigration) {
         migrationResult.useOldLogoRenderSize = true;
         return migrationResult;
     }

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

@@ -3,9 +3,11 @@ export interface MigrationData {
     brandPageModel: BrandPageModel;
     useOldLogoRenderSize: boolean;
 }
-export declare const GetLatestModelVersion: () => number;
-export declare const migrateBrandPageModel: (brandPageModel: BrandPageModel, options: {
+export interface MigrationOptions {
     logoImage?: LogoImageModel;
     isUserDraft: boolean;
     isServerRender: boolean;
-}) => Promise<MigrationData>;
+    disableLogoSizeMigration?: boolean;
+}
+export declare const GetLatestModelVersion: () => number;
+export declare const migrateBrandPageModel: (brandPageModel: BrandPageModel, options: MigrationOptions) => Promise<MigrationData>;

package/lib/src/brand-page/utils/migration.util.js

@@ -1,4 +1,3 @@
-import { LOGO_MIGRATION_VERSION } from '../constants';
 import {} from '../models';
 import { migration01 } from './migration/migration-01';
 import { migration01_1 } from './migration/migration-01_1';

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

@@ -1,6 +1,7 @@
 declare const _default: import("vue").DefineComponent<{}, {
     brandPageType: import("vue").ComputedRef<"default" | "brandSite" | "brandContact">;
     isBrandSite: import("vue").ComputedRef<boolean>;
+    isPrePurchase: import("vue").ComputedRef<boolean>;
     isBrandPageOrIsBrandContact: import("vue").ComputedRef<boolean>;
     brandPageMakerStore: import("pinia").Store<"brandPageMaker", import("../../stores").BrandPageMakerState, {
         contentErrorCount(): number;

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMakerTemplateSettings.mixin.js

@@ -1,12 +1,14 @@
 import { computed, defineComponent } from 'vue';
-import { DESKTOP_HEIGHT, DESKTOP_WIDTH, MOBILE_HEIGHT, MOBILE_WIDTH, } from '../../constants';
-import { useBrandPageMakerStore } from '../../../lib';
+import { DESKTOP_HEIGHT, DESKTOP_WIDTH, MOBILE_HEIGHT, MOBILE_WIDTH, MOBILE_HEIGHT_POST_PURCHASE, } from '../../constants';
+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),
             brandPageMakerStore,
         };
@@ -19,7 +21,10 @@ export default defineComponent({
             return this.isBrandSite ? DESKTOP_WIDTH : MOBILE_WIDTH;
         },
         height() {
-            return this.isBrandSite ? DESKTOP_HEIGHT : MOBILE_HEIGHT;
+            if (this.isBrandSite) {
+                return DESKTOP_HEIGHT;
+            }
+            return this.isPrePurchase ? MOBILE_HEIGHT : MOBILE_HEIGHT_POST_PURCHASE;
         },
     },
 });

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

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

package/lib/src/brand-page-maker/constants/template-constants.js

@@ -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;
 export const DESKTOP_WIDTH = 1000;

package/lib/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.js

@@ -552,13 +552,14 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                         ? logoPrePurchase
                         : logoPostPurchase;
                     if (logo && logoImageHeight) {
-                        const newLogoSize = getOptimalLogoSize(logo.width, logo.height, logoImageHeight);
-                        pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.desktop].logoImageWidth = newLogoSize;
-                        pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.desktop].logoImageHeight = newLogoSize;
+                        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 (this.isBrandPageOrIsBrandContact &&
-                    brandPageContainerStore.isPrePurchase) {
+                else if (!brandPageContainerStore.designDraftToken &&
+                    !userStore.isAdmin &&
+                    this.isBrandPageOrIsBrandContact) {
                     recalculateLogoContentDimensions(pageSettingsStore, editableLogoStore.editableLogoVariations);
                 }
                 const backgroundStyles = new BackgroundStyles(brandPageModel.styles.backgroundStyles);