@designcrowd/library.brand-page 5.13.5 → 5.13.6-flacky-nav-12

package/lib/src/{CreatedOnBrandCrowd-de-de-BkWIskLx.js → CreatedOnBrandCrowd-de-de-aCiBdDxv.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-Di3Bscjn.js → CreatedOnBrandCrowd-en-us-BPgeTfh8.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-BouDPfN1.js → CreatedOnBrandCrowd-es-es-DMbQhRwF.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-ex-VCVjf.js → CreatedOnBrandCrowd-fr-fr-Co7HnCCh.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-BnxPrMQQ.js → CreatedOnBrandCrowd-pt-pt-CUfwZY_0.js}

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

package/lib/src/{CreatedOnDcom-de-de-Bwxloguf.js → CreatedOnDcom-de-de-BKFAgXuQ.js}

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

package/lib/src/{CreatedOnDcom-en-us-CbiXSOCF.js → CreatedOnDcom-en-us-JoPkBvCX.js}

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

package/lib/src/{CreatedOnDcom-es-es-CbkeqCK4.js → CreatedOnDcom-es-es-FrxFKf7g.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-BrkRGyPq.js → CreatedOnDcom-fr-fr-BV8sZ9a3.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-Q-46uDXU.js → CreatedOnDcom-pt-pt-LYSFhF61.js}

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

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

@@ -5,3 +5,4 @@ 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,3 +5,5 @@ 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/migration/migration-01.d.ts

@@ -20,4 +20,4 @@ export declare const migrateConvertLineHeightOnFooterStyles: (brandPageModel: Br
 export declare const migration01: (brandPageModel: BrandPageModel, options: {
     logoImage?: LogoImageModel;
     isUserDraft: boolean;
-}) => BrandPageModel;
+}) => Promise<BrandPageModel>;

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

@@ -857,7 +857,7 @@ export const migrateConvertLineHeightOnFooterStyles = (brandPageModel) => {
         };
     }
 };
-export const migration01 = (brandPageModel, options) => {
+export const migration01 = async (brandPageModel, options) => {
     if (!brandPageModel.brandPageType) {
         brandPageModel.brandPageType = BRAND_PAGE_TYPES.default;
     }

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

@@ -3,4 +3,4 @@ export declare const convertLetterSpacingRemToEm: (fontSizeInEmOrRem: string | u
 export declare const migration02: (brandPageModel: BrandPageModel, options: {
     logoImage?: LogoImageModel;
     isUserDraft: boolean;
-}) => BrandPageModel;
+}) => Promise<BrandPageModel>;

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

@@ -31,7 +31,7 @@ const handleConversion = (style) => {
     }
     style.letterSpacing = convertLetterSpacingRemToEm(style.fontSize, style.letterSpacing);
 };
-export const migration02 = (brandPageModel, options) => {
+export const migration02 = async (brandPageModel, options) => {
     handleConversion(brandPageModel.pageHeaderDesktop?.navigation?.defaultButtonStyle);
     handleConversion(brandPageModel.pageHeaderMobile?.navigation?.defaultButtonStyle);
     handleConversion(brandPageModel.pageFooterDesktop?.copyrightStyle);

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

@@ -2,4 +2,4 @@ import { type BrandPageModel, type LogoImageModel } from '../..';
 export declare const migration03: (brandPageModel: BrandPageModel, options: {
     logoImage?: LogoImageModel;
     isUserDraft: boolean;
-}) => BrandPageModel;
+}) => Promise<BrandPageModel>;

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

@@ -28,7 +28,7 @@ const migrateApplyAutoScaleProperty = (brandPageType, textStyle) => {
     textStyle.applyAutoScale =
         brandPageType && brandPageType === BRAND_PAGE_TYPES.brandSite;
 };
-export const migration03 = (brandPageModel, options) => {
+export const migration03 = async (brandPageModel, options) => {
     handleRecursiveFontSizeMigration(brandPageModel.pageHeaderDesktop);
     handleRecursiveFontSizeMigration(brandPageModel.pageHeaderMobile);
     handleRecursiveFontSizeMigration(brandPageModel.pageFooterDesktop);

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

@@ -2,4 +2,4 @@ import { type BrandPageModel, type LogoImageModel } from '../..';
 export declare const migration04: (brandPageModel: BrandPageModel, options: {
     logoImage?: LogoImageModel;
     isUserDraft: boolean;
-}) => BrandPageModel;
+}) => Promise<BrandPageModel>;

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

@@ -86,7 +86,7 @@ const updateUserUploadedImageUrls = (content) => {
         });
     }
 };
-export const migration04 = (brandPageModel, options) => {
+export const migration04 = async (brandPageModel, options) => {
     if (brandPageModel.faviconUrl &&
         isUserUploadedImage(brandPageModel.faviconUrl)) {
         brandPageModel.faviconUrl = removeUserImageExtension(brandPageModel.faviconUrl);

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

@@ -1,2 +1,5 @@
-import { type BrandPageModel } from '../..';
-export declare const migration05: (brandPageModel: BrandPageModel) => BrandPageModel;
+import { type BrandPageModel, type LogoImageModel } from '../..';
+export declare const migration05: (brandPageModel: BrandPageModel, options: {
+    logoImage?: LogoImageModel;
+    isUserDraft: boolean;
+}) => Promise<BrandPageModel>;

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

@@ -1,6 +1,6 @@
 import {} from '../..';
 import { isTextContent } from '../model.util';
-export const migration05 = (brandPageModel) => {
+export const migration05 = async (brandPageModel, options) => {
     brandPageModel.pages.forEach((page) => {
         page.contents.forEach((content) => {
             if (isTextContent(content)) {

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

@@ -0,0 +1,4 @@
+import { type BrandPageModel } from '../..';
+export declare const migration06: (brandPageModel: BrandPageModel, options: {
+    skipMigration06?: boolean;
+}) => Promise<BrandPageModel>;

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

@@ -0,0 +1,75 @@
+import { DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, } from '../..';
+import { FabricRenderClient } from '../../../clients/fabric-render-client';
+import { emToPx } from '../../../brand-page-maker/utils/text.util';
+const REM_TO_PIXELS_RATIO = 16;
+export const migration06 = async (brandPageModel, options) => {
+    if (options.skipMigration06 !== undefined && options.skipMigration06) {
+        return brandPageModel;
+    }
+    try {
+        const headerLogo = brandPageModel.pageHeaderDesktop;
+        const fabricClient = FabricRenderClient.getInstance();
+        const logoData = headerLogo?.logoTemplateImage?.logoTemplateToken
+            ? await fabricClient.getLogoSvgUrlByLogoTemplateImageAsync(headerLogo.logoTemplateImage)
+            : await fabricClient.getLogoSvgUrlByLogoImageAsync(headerLogo.logoImage);
+        if (logoData && logoData.width && logoData.height) {
+            const remToPixels = (remValue) => {
+                return parseFloat(emToPx(remValue));
+            };
+            const calculateConstrainedDimensions = (maxWidth, maxHeight) => {
+                const maxWidthPx = remToPixels(maxWidth);
+                const maxHeightPx = remToPixels(maxHeight);
+                // Calculate the actual displayed dimensions considering max-width and max-height constraints
+                const logoAspectRatio = logoData.width / logoData.height;
+                const maxAspectRatio = maxWidthPx / maxHeightPx;
+                let actualWidth;
+                let actualHeight;
+                if (logoAspectRatio > maxAspectRatio) {
+                    // Logo is wider relative to max dimensions, constrain by width
+                    actualWidth = Math.min(logoData.width, maxWidthPx);
+                    actualHeight = actualWidth / logoAspectRatio;
+                }
+                else {
+                    // Logo is taller relative to max dimensions, constrain by height
+                    actualHeight = Math.min(logoData.height, maxHeightPx);
+                    actualWidth = actualHeight * logoAspectRatio;
+                }
+                const actualWidthRem = `${Math.round(actualWidth / REM_TO_PIXELS_RATIO)}rem`;
+                const actualHeightRem = `${Math.ceil(actualHeight / REM_TO_PIXELS_RATIO)}rem`;
+                return { width: actualWidthRem, height: actualHeightRem };
+            };
+            if (brandPageModel.pageHeaderDesktop) {
+                const currentMaxWidth = brandPageModel.pageHeaderDesktop.logoImageWidth || DEFAULT_LOGO_WIDTH;
+                const currentMaxHeight = brandPageModel.pageHeaderDesktop.logoImageHeight ||
+                    DEFAULT_LOGO_HEIGHT;
+                const dimensions = calculateConstrainedDimensions(currentMaxWidth, currentMaxHeight);
+                brandPageModel.pageHeaderDesktop.logoImageHeight = dimensions.height;
+            }
+            if (brandPageModel.pageHeaderMobile) {
+                const currentMaxWidth = brandPageModel.pageHeaderMobile.logoImageWidth || DEFAULT_LOGO_WIDTH;
+                const currentMaxHeight = brandPageModel.pageHeaderMobile.logoImageHeight ||
+                    DEFAULT_LOGO_HEIGHT;
+                const dimensions = calculateConstrainedDimensions(currentMaxWidth, currentMaxHeight);
+                brandPageModel.pageHeaderMobile.logoImageHeight = dimensions.height;
+            }
+            if (brandPageModel.pageFooterDesktop) {
+                const currentMaxWidth = brandPageModel.pageFooterDesktop.logoImageWidth || DEFAULT_LOGO_WIDTH;
+                const currentMaxHeight = brandPageModel.pageFooterDesktop.logoImageHeight ||
+                    DEFAULT_LOGO_HEIGHT;
+                const dimensions = calculateConstrainedDimensions(currentMaxWidth, currentMaxHeight);
+                brandPageModel.pageFooterDesktop.logoImageHeight = dimensions.height;
+            }
+            if (brandPageModel.pageFooterMobile) {
+                const currentMaxWidth = brandPageModel.pageFooterMobile.logoImageWidth || DEFAULT_LOGO_WIDTH;
+                const currentMaxHeight = brandPageModel.pageFooterMobile.logoImageHeight ||
+                    DEFAULT_LOGO_HEIGHT;
+                const dimensions = calculateConstrainedDimensions(currentMaxWidth, currentMaxHeight);
+                brandPageModel.pageFooterMobile.logoImageHeight = dimensions.height;
+            }
+        }
+    }
+    catch (error) {
+        console.warn('Migration 06: Failed to fetch logo dimensions:', error);
+    }
+    return brandPageModel;
+};

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

@@ -3,4 +3,8 @@ export declare const GetLatestModelVersion: () => number;
 export declare const migrateBrandPageModel: (brandPageModel: BrandPageModel, options: {
     logoImage?: LogoImageModel;
     isUserDraft: boolean;
-}) => BrandPageModel;
+    isServerRender: boolean;
+}) => Promise<{
+    brandPageModel: BrandPageModel;
+    useOldLogoRenderSize: boolean;
+}>;

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

@@ -1,3 +1,4 @@
+import { LOGO_MIGRATION_VERSION } from '../constants';
 import {} from '../models';
 import { migration01 } from './migration/migration-01';
 import { migration02 } from './migration/migration-02';
@@ -5,6 +6,7 @@ import { migration03 } from './migration/migration-03';
 import { migration04 } from './migration/migration-04';
 import { migration05 } from './migration/migration-05';
 import { migration051 } from './migration/migration-051';
+import { migration06 } from './migration/migration-06';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -30,19 +32,29 @@ const MIGRATION_TABLE = [
         version: 5.1,
         migrateFn: migration051,
     },
+    {
+        version: 6,
+        migrateFn: migration06,
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
-export const migrateBrandPageModel = (brandPageModel, options) => {
+export const migrateBrandPageModel = async (brandPageModel, options) => {
     let modelVersion = brandPageModel.v;
+    let useOldLogoRenderSize = false;
     if (!modelVersion) {
         modelVersion = 0;
     }
-    MIGRATION_TABLE.forEach((x) => {
+    for (const x of MIGRATION_TABLE) {
         if (modelVersion < x.version) {
-            brandPageModel = x.migrateFn(brandPageModel, options);
+            if (options.isServerRender && x.version === LOGO_MIGRATION_VERSION) {
+                useOldLogoRenderSize = true;
+            }
+            else {
+                brandPageModel = await x.migrateFn(brandPageModel, options);
+            }
         }
-    });
+    }
     // Set the model to latest version
     brandPageModel.v = GetLatestModelVersion();
-    return brandPageModel;
+    return { brandPageModel, useOldLogoRenderSize };
 };

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

@@ -8,10 +8,10 @@ export declare const mapToTextViewModel: (content: TextContent, styles: PageStyl
 export declare const mapToBannerSectionViewModel: (content: BannerSectionContent, styles: PageStyles) => BannerSectionViewModel;
 export declare const mapToImagesSectionViewModel: (content: ImagesSectionContent, styles: PageStyles, brandPageType: BrandPageType) => TextImageSectionViewModel;
 export declare const mapToBookingSectionViewModel: (content: BookingSectionContent, styles: PageStyles) => BookingSectionViewModel;
-export declare const mapToPageHeaderViewModel: (pageHeader: PageHeaderDesktop | PageHeaderMobile, pageStyles: PageStyles, pages: PageViewModel[]) => PageHeaderViewModel;
-export declare const mapToPageFooterViewModel: (pageFooter: PageFooterDesktop | PageFooterMobile, pageStyles: PageStyles) => PageFooterViewModel;
+export declare const mapToPageHeaderViewModel: (pageHeader: PageHeaderDesktop | PageHeaderMobile, pageStyles: PageStyles, pages: PageViewModel[], useOldLogoRenderSize?: boolean) => PageHeaderViewModel;
+export declare const mapToPageFooterViewModel: (pageFooter: PageFooterDesktop | PageFooterMobile, pageStyles: PageStyles, useOldLogoRenderSize?: boolean) => PageFooterViewModel;
 export declare const mapToViewModel: (styles: PageStyles, brandPageType: BrandPageType) => (content: Content) => ContentViewModel | undefined;
-export declare const getBrandPageViewModelFromBrandPageModel: (model: BrandPageModel, brandPageToken: string | undefined, showBrandCrowdLogo?: boolean) => BrandPageViewModel;
+export declare const getBrandPageViewModelFromBrandPageModel: (model: BrandPageModel, brandPageToken: string | undefined, showBrandCrowdLogo?: boolean, useOldLogoRenderSize?: boolean) => BrandPageViewModel;
 export declare const isLogoViewModel: (viewModel: ContentViewModel) => viewModel is LogoViewModel;
 /** for service.brand-page website preview by logo draft token */
 export declare const applyLogoImageToBrandPageViewModel: (viewModel: BrandPageViewModel, logoImage: LogoImageModel) => BrandPageViewModel;

package/lib/src/brand-page/utils/view-model.util.js

@@ -115,7 +115,7 @@ export const mapToImageGalleryViewModel = (content, globalStyles) => {
         styles: galleryStyles?.galleryType ? galleryStyles : globalStyles,
     };
 };
-const mapToLogoViewModel = (content, globalStyles, options) => {
+const mapToLogoViewModel = (content, globalStyles, useOldLogoRenderSize, options) => {
     let background;
     if (content.backgroundStyle?.background &&
         isHexTransparent(content.backgroundStyle.background)) {
@@ -158,6 +158,7 @@ const mapToLogoViewModel = (content, globalStyles, options) => {
             },
         },
         isVisible: content.isLogoVisible,
+        useOldLogoRenderSize,
     });
 };
 const mapToVideoViewModel = (content, styles) => {
@@ -525,7 +526,7 @@ export const mapToBookingSectionViewModel = (content, styles) => {
         isFullWidth: true,
     }, styles);
 };
-export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages) => {
+export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages, useOldLogoRenderSize = false) => {
     const viewport = pageHeader.viewport;
     const logoContent = {
         id: 'page-header-logo',
@@ -554,7 +555,7 @@ export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages) => {
     }), {});
     return {
         displayStyle: pageHeader.displayStyle,
-        logo: mapToLogoViewModel(logoContent, logoStyles),
+        logo: mapToLogoViewModel(logoContent, logoStyles, useOldLogoRenderSize),
         pages: pages.filter((p) => !p.isHidden),
         navigation: viewport === VIEWPORTS.mobile
             ? new NavigationMobile({
@@ -574,7 +575,7 @@ export const mapToPageHeaderViewModel = (pageHeader, pageStyles, pages) => {
         backgroundColorEnabled: pageHeader.backgroundColorEnabled,
     };
 };
-export const mapToPageFooterViewModel = (pageFooter, pageStyles) => {
+export const mapToPageFooterViewModel = (pageFooter, pageStyles, useOldLogoRenderSize = false) => {
     const { logoImageBase64Url, logoImage, logoTemplateImage, logoImageHeight, logoImageWidth, isLogoVisible, } = pageFooter;
     const logoContent = {
         id: 'page-header-logo',
@@ -598,7 +599,7 @@ export const mapToPageFooterViewModel = (pageFooter, pageStyles) => {
         copyrightStyle,
         displayStyle: pageFooter.displayStyle,
         iconStyle: Object.assign({ fill: pageStyles.textStyles?.style.color }, pageFooter.iconStyle),
-        logo: mapToLogoViewModel(logoContent, logoStyles),
+        logo: mapToLogoViewModel(logoContent, logoStyles, useOldLogoRenderSize),
         socialLinks: pageFooter.socialLinks,
         textFontFamily: pageFooter.textFontFamily,
     };
@@ -613,7 +614,7 @@ export const mapToViewModel = (styles, brandPageType) => (content) => {
             if (brandPageType === BRAND_PAGE_TYPES.brandSite) {
                 return undefined;
             }
-            return mapToLogoViewModel(content, styles.logoStyles, {
+            return mapToLogoViewModel(content, styles.logoStyles, false, {
                 height: DEFAULT_LOGO_HEIGHT,
                 width: DEFAULT_LOGO_WIDTH,
             });
@@ -670,7 +671,7 @@ export const mapToViewModel = (styles, brandPageType) => (content) => {
             assertUnreachable();
     }
 };
-export const getBrandPageViewModelFromBrandPageModel = (model, brandPageToken, showBrandCrowdLogo = true) => {
+export const getBrandPageViewModelFromBrandPageModel = (model, brandPageToken, showBrandCrowdLogo = true, useOldLogoRenderSize = false) => {
     const pages = model.pages.map((p) => {
         const contents = p.contents
             .map(mapToViewModel(model.styles, model.brandPageType || BRAND_PAGE_TYPES.default))
@@ -687,10 +688,10 @@ export const getBrandPageViewModelFromBrandPageModel = (model, brandPageToken, s
         pages,
         showBrandCrowdLogo,
         styles: model.styles,
-        headerViewModelDesktop: mapToPageHeaderViewModel(model.pageHeaderDesktop, model.styles, pages),
-        headerViewModelMobile: mapToPageHeaderViewModel(model.pageHeaderMobile, model.styles, pages),
-        footerViewModelDesktop: mapToPageFooterViewModel(model.pageFooterDesktop, model.styles),
-        footerViewModelMobile: mapToPageFooterViewModel(model.pageFooterMobile, model.styles),
+        headerViewModelDesktop: mapToPageHeaderViewModel(model.pageHeaderDesktop, model.styles, pages, useOldLogoRenderSize),
+        headerViewModelMobile: mapToPageHeaderViewModel(model.pageHeaderMobile, model.styles, pages, useOldLogoRenderSize),
+        footerViewModelDesktop: mapToPageFooterViewModel(model.pageFooterDesktop, model.styles, useOldLogoRenderSize),
+        footerViewModelMobile: mapToPageFooterViewModel(model.pageFooterMobile, model.styles, useOldLogoRenderSize),
         brandPageType: model.brandPageType || BRAND_PAGE_TYPES.default,
         faviconUrl: model.faviconUrl,
         ogImageUrl: model.ogImageUrl,

package/lib/src/brand-page/view-models.d.ts

@@ -32,6 +32,7 @@ export interface LogoViewModel extends ContentViewModel {
     logoImageWidth: string | undefined;
     /** @deprecated */
     imageStyle?: LogoStyles['imageStyle'];
+    useOldLogoRenderSize?: boolean;
 }
 export interface ProfileViewModel extends ContentViewModel, Omit<ProfileContent, 'type'> {
     containerStyle?: BrandPageCssStyle;

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

@@ -418,9 +418,10 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                 if (!logoImage?.logoDraftToken) {
                     logoImage = logoUtil.safeGetLogoImageFromLogoImageUrl(logoVariationImageUrls[0]);
                 }
-                migrateBrandPageModel(brandPageModel, {
+                await migrateBrandPageModel(brandPageModel, {
                     logoImage,
                     isUserDraft: this.isUserDraft,
+                    isServerRender: false,
                 });
                 const userPersonalisation = personalisationData && personalisationData.length > 0
                     ? personalisationData[await getAiContentIndexByTemplateTokenAndNumberOfVariations(this.selectedTemplateId, personalisationData.length)].userPersonalisation

package/lib/src/css/library.brand-page-brandCrowd.min.css

@@ -5332,21 +5332,18 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 }
 }
 
-.logo__container[data-v-d24cdbe3] {
+.logo__container[data-v-810d4098] {
   border: 0.125rem solid var(--logo-border-colour);
   border-radius: 0.75rem;
 }
-.logo__image[data-v-d24cdbe3] {
+.logo__image[data-v-810d4098] {
   display: block;
   -o-object-fit: contain;
      object-fit: contain;
   height: 6rem;
-}
-.brand-page .logo__image[data-v-d24cdbe3] {
-  margin: var(--logo-spacing) auto;
 }
 
-.logo[data-v-0de93a73] {
+.logo[data-v-b263e6e9] {
   --logo-border-colour: #00000000;
   --logo-size: 8rem;
   --logo-spacing: 0.75rem;

package/lib/src/css/library.brand-page-brandPage.min.css

@@ -5660,21 +5660,18 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 }
 }
 
-.logo__container[data-v-d24cdbe3] {
+.logo__container[data-v-810d4098] {
   border: 0.125rem solid var(--logo-border-colour);
   border-radius: 0.75rem;
 }
-.logo__image[data-v-d24cdbe3] {
+.logo__image[data-v-810d4098] {
   display: block;
   -o-object-fit: contain;
      object-fit: contain;
   height: 6rem;
-}
-.brand-page .logo__image[data-v-d24cdbe3] {
-  margin: var(--logo-spacing) auto;
 }
 
-.logo[data-v-0de93a73] {
+.logo[data-v-b263e6e9] {
   --logo-border-colour: #00000000;
   --logo-size: 8rem;
   --logo-spacing: 0.75rem;

package/lib/src/css/library.brand-page-designCom.min.css

@@ -5350,21 +5350,18 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 }
 }
 
-.logo__container[data-v-d24cdbe3] {
+.logo__container[data-v-810d4098] {
   border: 0.125rem solid var(--logo-border-colour);
   border-radius: 0.75rem;
 }
-.logo__image[data-v-d24cdbe3] {
+.logo__image[data-v-810d4098] {
   display: block;
   -o-object-fit: contain;
      object-fit: contain;
   height: 6rem;
-}
-.brand-page .logo__image[data-v-d24cdbe3] {
-  margin: var(--logo-spacing) auto;
 }
 
-.logo[data-v-0de93a73] {
+.logo[data-v-b263e6e9] {
   --logo-border-colour: #00000000;
   --logo-size: 8rem;
   --logo-spacing: 0.75rem;

package/lib/src/css/library.brand-page-preview.min.css

@@ -5092,21 +5092,18 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 }
 }
 
-.bp .logo__container[data-v-d24cdbe3] {
+.bp .logo__container[data-v-810d4098] {
   border: 0.125rem solid var(--logo-border-colour);
   border-radius: 0.75rem;
 }
-.bp .logo__image[data-v-d24cdbe3] {
+.bp .logo__image[data-v-810d4098] {
   display: block;
   -o-object-fit: contain;
      object-fit: contain;
   height: 6rem;
-}
-.bp .brand-page .logo__image[data-v-d24cdbe3] {
-  margin: var(--logo-spacing) auto;
 }
 
-.bp .logo[data-v-0de93a73] {
+.bp .logo[data-v-b263e6e9] {
   --logo-border-colour: #00000000;
   --logo-size: 8rem;
   --logo-spacing: 0.75rem;

package/lib/src/index.mjs

@@ -1,4 +1,4 @@
-import { by as E, an as T, aP as I, a3 as N, ag as S, ad as s, bo as A, bF as O, c6 as e, c5 as G, c4 as C, b_ as D, aZ as P, aY as R, bK as t, bL as L, bS as M, bH as o, bJ as b, bI as r, bM as F, bN as n, bZ as B, bX as g, am as l, bY as i, a6 as Y, aU as U, aW as c, aV as d, e as H, f as u, B as y, Y as K, d as p, Z as k, j as V, aj as X, X as m, bn as v, bG as h, at as W, aR as x, aN as f, bV as Z, bU as w, C as z, b0 as Q, D as j, b as q, a as J, bQ as $, a$ as aa, aS as _a, aO as Ea, c2 as Ta, c3 as Ia, bT as Na, bC as Sa, ab as sa, bW as Aa, b$ as Oa, b5 as ea, aF as Ga, bb as Ca, F as Da, a5 as Pa, a4 as Ra, h as ta, $ as La, b2 as Ma, aQ as oa, aM as ba, a1 as ra, G as Fa, I as na, H as Ba, a7 as ga, bz as la, b6 as ia, b7 as Ya, bx as Ua, bd as ca, bf as da, b1 as Ha, L as ua, aE as ya, bk as Ka, aK as pa, bj as ka, ao as Va, a9 as Xa, bR as ma, c0 as va, c1 as ha, aT as Wa, N as xa, aw as fa, av as Za, ax as wa, ar as za, as as Qa, au as ja, b9 as qa, bg as Ja, b3 as $a, n as a_, ah as __, ai as E_, ae as T_, af as I_, ac as N_, a2 as S_, l as s_, bl as A_, al as O_, bD as e_, bE as G_, bP as C_, aa as D_, bB as P_, bm as R_, m as t_, S as L_, P as M_, aD as o_, bA as b_, ba as r_, bs as F_, br as n_, bu as B_, bp as g_, bv as l_, bw as i_, bq as Y_, bt as U_, ay as c_, az as d_, bi as H_, bh as u_, aB as y_, aC as K_, aH as p_, aX as k_, aG as V_, aI as X_, U as m_, a8 as v_, aL as h_, k as W_, b8 as x_, ak as f_, b4 as Z_, bc as w_, be as z_, a_ as Q_, M as j_, a0 as q_, g as J_, bO as $_, q as aE, J as _E, W as EE, aA as TE, aJ as IE, ap as NE, o as SE, T as sE, r as AE, u as OE, i as eE, aq as GE, c as CE, p as DE, t as PE, R as RE, K as tE, s as LE, V as ME, y as oE, v as bE, w as rE, Q as FE, z as nE, O as BE, A as gE, E as lE, x as iE } from "./lib-DQfmtI-m.js";
+import { by as E, an as T, aP as I, a3 as N, ag as S, ad as s, bo as A, bF as O, c6 as e, c5 as G, c4 as C, b_ as D, aZ as P, aY as R, bK as t, bL as L, bS as M, bH as o, bJ as b, bI as r, bM as F, bN as n, bZ as B, bX as g, am as l, bY as i, a6 as Y, aU as U, aW as c, aV as d, e as H, f as u, B as y, Y as K, d as p, Z as k, j as V, aj as X, X as m, bn as v, bG as h, at as W, aR as x, aN as f, bV as Z, bU as w, C as z, b0 as Q, D as j, b as q, a as J, bQ as $, a$ as aa, aS as _a, aO as Ea, c2 as Ta, c3 as Ia, bT as Na, bC as Sa, ab as sa, bW as Aa, b$ as Oa, b5 as ea, aF as Ga, bb as Ca, F as Da, a5 as Pa, a4 as Ra, h as ta, $ as La, b2 as Ma, aQ as oa, aM as ba, a1 as ra, G as Fa, I as na, H as Ba, a7 as ga, bz as la, b6 as ia, b7 as Ya, bx as Ua, bd as ca, bf as da, b1 as Ha, L as ua, aE as ya, bk as Ka, aK as pa, bj as ka, ao as Va, a9 as Xa, bR as ma, c0 as va, c1 as ha, aT as Wa, N as xa, aw as fa, av as Za, ax as wa, ar as za, as as Qa, au as ja, b9 as qa, bg as Ja, b3 as $a, n as a_, ah as __, ai as E_, ae as T_, af as I_, ac as N_, a2 as S_, l as s_, bl as A_, al as O_, bD as e_, bE as G_, bP as C_, aa as D_, bB as P_, bm as R_, m as t_, S as L_, P as M_, aD as o_, bA as b_, ba as r_, bs as F_, br as n_, bu as B_, bp as g_, bv as l_, bw as i_, bq as Y_, bt as U_, ay as c_, az as d_, bi as H_, bh as u_, aB as y_, aC as K_, aH as p_, aX as k_, aG as V_, aI as X_, U as m_, a8 as v_, aL as h_, k as W_, b8 as x_, ak as f_, b4 as Z_, bc as w_, be as z_, a_ as Q_, M as j_, a0 as q_, g as J_, bO as $_, q as aE, J as _E, W as EE, aA as TE, aJ as IE, ap as NE, o as SE, T as sE, r as AE, u as OE, i as eE, aq as GE, c as CE, p as DE, t as PE, R as RE, K as tE, s as LE, V as ME, y as oE, v as bE, w as rE, Q as FE, z as nE, O as BE, A as gE, E as lE, x as iE } from "./lib-uIEOdQjT.js";
 import { createPinia as UE, setActivePinia as cE } from "pinia";
 export {
   E as ABOUT_SECTION_SETTINGS_CONFIG,