@designcrowd/library.brand-page 5.17.17 → 5.17.18-ast-layout

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

@@ -149,7 +149,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page").PageModel[];
             sections: import("../../../page-settings/store").PageSettingsStateSections;

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

@@ -665,7 +665,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page").PageModel[];
             sections: import("../../../page-settings/store").PageSettingsStateSections;

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

@@ -612,7 +612,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page").PageModel[];
             sections: import("../../../page-settings/store").PageSettingsStateSections;

package/lib/src/shared/font-family-selector/FontFamilySelector.mixin.js

@@ -37,7 +37,8 @@ export default defineComponent({
     },
     methods: {
         getCategoryForFont(fontName) {
-            const fontConfig = Object.values(FONT_FAMILY_CONFIGS).find((config) => config.name === fontName);
+            const strippedFontName = fontName?.replace(/^['"]|['"]$/g, '');
+            const fontConfig = Object.values(FONT_FAMILY_CONFIGS).find((config) => config.name === strippedFontName);
             return fontConfig?.categories[0] || null;
         },
         onFontFamilyButtonClick(fontFamilyOption) {

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

@@ -98,6 +98,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setStateAsync(payload: {
             newState: import("../store/editable-logo-store").SetStateAsyncPayload;
             defaultPrimaryText?: string | undefined;
+            defaultLayout?: string | undefined;
         }): Promise<void>;
         resetLogoEdits(): void;
         setLogoDraftToken(logoDraftToken: string): void;
@@ -108,9 +109,9 @@ declare const _default: import("vue").DefineComponent<{}, {
         updateLogoEdit(templateMetaString: string, draftMetaString: string | null): void;
         getEditableLogoVariationByVariationId(id: number): any;
         getEditableLogoVariationByBase64(base64: string): any;
-        updateEditableLogoImageUrlAsync(defaultPrimaryText?: string | undefined, overrideLogoVariation?: number | undefined): Promise<void>;
-        updateMetadataAsync(defaultPrimaryText?: string | undefined, resetLogoTemplateMetadata?: boolean): Promise<void>;
-        updateEditableLogoImageByVariationAsync(editableLogoVariation: import("../store/editable-logo-store").EditableLogoVariation, defaultPrimaryText?: string | undefined): Promise<import("../../../clients/fabric-render-client").ModifyLogoDataResponse | null>;
+        updateEditableLogoImageUrlAsync(defaultPrimaryText?: string | undefined, overrideLogoVariation?: number | undefined, layout?: string | undefined): Promise<void>;
+        updateMetadataAsync(defaultPrimaryText?: string | undefined, resetLogoTemplateMetadata?: boolean, layout?: string | undefined): Promise<void>;
+        updateEditableLogoImageByVariationAsync(editableLogoVariation: import("../store/editable-logo-store").EditableLogoVariation, defaultPrimaryText?: string | undefined, layout?: string | undefined): Promise<import("../../../clients/fabric-render-client").ModifyLogoDataResponse | null>;
         getDraftMetadata(logoDraftToken: string): string | undefined;
         upsertDraftMetadata(metadata: string): void;
         isS3TokenExpired(expiryDate: string | undefined): boolean;
@@ -120,6 +121,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             dimensionType: string;
             variationType: string;
             defaultPrimaryText?: string | undefined;
+            layout?: string | undefined;
         }): Promise<import("../../../clients/fabric-render-client").ModifyLogoDataResponse | null>;
     }>;
     logoStore: import("pinia").Store<"uiLogoSettings", import("../store/logo-settings-store").LogoSettingsState, {

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

@@ -139,7 +139,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("../../../brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("../../../brand-page").PageModel[];
             sections: import("@shared/page-settings/store").PageSettingsStateSections;
@@ -282,6 +282,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setStateAsync(payload: {
             newState: import("../store").SetStateAsyncPayload;
             defaultPrimaryText?: string | undefined;
+            defaultLayout?: string | undefined;
         }): Promise<void>;
         resetLogoEdits(): void;
         setLogoDraftToken(logoDraftToken: string): void;
@@ -292,9 +293,9 @@ declare const _default: import("vue").DefineComponent<{}, {
         updateLogoEdit(templateMetaString: string, draftMetaString: string | null): void;
         getEditableLogoVariationByVariationId(id: number): any;
         getEditableLogoVariationByBase64(base64: string): any;
-        updateEditableLogoImageUrlAsync(defaultPrimaryText?: string | undefined, overrideLogoVariation?: number | undefined): Promise<void>;
-        updateMetadataAsync(defaultPrimaryText?: string | undefined, resetLogoTemplateMetadata?: boolean): Promise<void>;
-        updateEditableLogoImageByVariationAsync(editableLogoVariation: import("../store").EditableLogoVariation, defaultPrimaryText?: string | undefined): Promise<import("../../../clients/fabric-render-client").ModifyLogoDataResponse | null>;
+        updateEditableLogoImageUrlAsync(defaultPrimaryText?: string | undefined, overrideLogoVariation?: number | undefined, layout?: string | undefined): Promise<void>;
+        updateMetadataAsync(defaultPrimaryText?: string | undefined, resetLogoTemplateMetadata?: boolean, layout?: string | undefined): Promise<void>;
+        updateEditableLogoImageByVariationAsync(editableLogoVariation: import("../store").EditableLogoVariation, defaultPrimaryText?: string | undefined, layout?: string | undefined): Promise<import("../../../clients/fabric-render-client").ModifyLogoDataResponse | null>;
         getDraftMetadata(logoDraftToken: string): string | undefined;
         upsertDraftMetadata(metadata: string): void;
         isS3TokenExpired(expiryDate: string | undefined): boolean;
@@ -304,6 +305,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             dimensionType: string;
             variationType: string;
             defaultPrimaryText?: string | undefined;
+            layout?: string | undefined;
         }): Promise<import("../../../clients/fabric-render-client").ModifyLogoDataResponse | null>;
     }>;
     containerStore: import("pinia").Store<"brandPageContainer", import("@brand-page-maker/stores").BrandPageContainerState, {

package/lib/src/shared/logo-settings/store/editable-logo-store.d.ts

@@ -172,6 +172,7 @@ export declare const useUiEditableLogoStore: import("pinia").StoreDefinition<"ui
     setStateAsync(payload: {
         newState: SetStateAsyncPayload;
         defaultPrimaryText?: string;
+        defaultLayout?: string;
     }): Promise<void>;
     resetLogoEdits(): void;
     setLogoDraftToken(logoDraftToken: string): void;
@@ -182,9 +183,9 @@ export declare const useUiEditableLogoStore: import("pinia").StoreDefinition<"ui
     updateLogoEdit(templateMetaString: string, draftMetaString: string | null): void;
     getEditableLogoVariationByVariationId(id: number): any;
     getEditableLogoVariationByBase64(base64: string): any;
-    updateEditableLogoImageUrlAsync(defaultPrimaryText?: string, overrideLogoVariation?: number | undefined): Promise<void>;
-    updateMetadataAsync(defaultPrimaryText?: string, resetLogoTemplateMetadata?: boolean): Promise<void>;
-    updateEditableLogoImageByVariationAsync(editableLogoVariation: EditableLogoVariation, defaultPrimaryText?: string): Promise<ModifyLogoDataResponse | null>;
+    updateEditableLogoImageUrlAsync(defaultPrimaryText?: string, overrideLogoVariation?: number | undefined, layout?: string): Promise<void>;
+    updateMetadataAsync(defaultPrimaryText?: string, resetLogoTemplateMetadata?: boolean, layout?: string): Promise<void>;
+    updateEditableLogoImageByVariationAsync(editableLogoVariation: EditableLogoVariation, defaultPrimaryText?: string, layout?: string): Promise<ModifyLogoDataResponse | null>;
     getDraftMetadata(logoDraftToken: string): string | undefined;
     upsertDraftMetadata(metadata: string): void;
     isS3TokenExpired(expiryDate: string | undefined): boolean;
@@ -194,6 +195,7 @@ export declare const useUiEditableLogoStore: import("pinia").StoreDefinition<"ui
         dimensionType: string;
         variationType: string;
         defaultPrimaryText?: string;
+        layout?: string;
     }): Promise<ModifyLogoDataResponse | null>;
 }>;
 export {};

package/lib/src/shared/logo-settings/store/editable-logo-store.js

@@ -83,6 +83,7 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
             const templateMetaResult = await this.postEditableLogoRequestAsync({
                 returnJson: true,
                 defaultPrimaryText: payload?.defaultPrimaryText,
+                layout: payload?.defaultLayout,
             });
             this.logoTemplateMetadata = templateMetaResult.metadata;
             const logoStore = useLogoStore();
@@ -100,8 +101,9 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
             const objects = JSON.parse(logoDraft?.metadata || this.logoTemplateMetadata).objects;
             this.isTextOnlyLogo = !objects.find((x) => x.role === 'logo');
             this.updateLogoEdit(this.logoTemplateMetadata, logoDraft?.metadata);
-            await this.updateEditableLogoImageUrlAsync(defaultPrimaryText);
-            await this.updateMetadataAsync(defaultPrimaryText);
+            const defaultLayout = !logoDraft ? payload?.defaultLayout : undefined;
+            await this.updateEditableLogoImageUrlAsync(defaultPrimaryText, undefined, defaultLayout);
+            await this.updateMetadataAsync(defaultPrimaryText, false, defaultLayout);
             // updated logoDraft can be found at this point
             logoDraft = logoStore.getLogoDraftAssetByToken(this.logoDraftToken);
             if (!logoDraft?.isByo) {
@@ -212,8 +214,8 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
             return (this.editableLogoVariations.find((x) => x.base64 === base64) ||
                 this.editableLogoVariations[0]);
         },
-        async updateEditableLogoImageUrlAsync(defaultPrimaryText, overrideLogoVariation) {
-            const tasks = this.editableLogoVariations.map((x) => this.updateEditableLogoImageByVariationAsync(x, defaultPrimaryText));
+        async updateEditableLogoImageUrlAsync(defaultPrimaryText, overrideLogoVariation, layout) {
+            const tasks = this.editableLogoVariations.map((x) => this.updateEditableLogoImageByVariationAsync(x, defaultPrimaryText, layout));
             await Promise.all(tasks);
             const pageSettingStore = useUiPageSettingsStore();
             [PAGE_SECTIONS.header, PAGE_SECTIONS.footer].forEach((section) => {
@@ -241,10 +243,11 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                 });
             });
         },
-        async updateMetadataAsync(defaultPrimaryText, resetLogoTemplateMetadata = false) {
+        async updateMetadataAsync(defaultPrimaryText, resetLogoTemplateMetadata = false, layout) {
             const result = await this.postEditableLogoRequestAsync({
                 returnJson: true,
                 defaultPrimaryText,
+                layout,
             });
             if (resetLogoTemplateMetadata) {
                 this.logoTemplateMetadata = result.metadata;
@@ -252,12 +255,13 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
             this.upsertDraftMetadata(result.metadata);
             this.updateLogoEdit(this.logoTemplateMetadata, result.metadata);
         },
-        async updateEditableLogoImageByVariationAsync(editableLogoVariation, defaultPrimaryText) {
+        async updateEditableLogoImageByVariationAsync(editableLogoVariation, defaultPrimaryText, layout) {
             const result = await this.postEditableLogoRequestAsync({
                 returnJson: false,
                 dimensionType: editableLogoVariation.dimensionType,
                 variationType: editableLogoVariation.variationType,
                 defaultPrimaryText,
+                layout,
             });
             if (result.base64 === 'data:,') {
                 // broken base64 image data
@@ -318,6 +322,13 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                     }
                     return false;
                 }
+                // Don't refresh while setStateAsync is still initializing —
+                // it resets textObjects to [] before repopulating them, so a
+                // refresh at that point sends empty changeRequest objects to
+                // the server, which returns placeholder text ("LOGO TEXT HERE").
+                if (this.logoEdits.textObjects.length === 0) {
+                    return false;
+                }
                 await this.updateEditableLogoImageUrlAsync();
                 return true;
             }
@@ -325,12 +336,12 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
         },
         async postEditableLogoRequestAsync(payload) {
             const logoStore = useLogoStore();
+            const hasLayout = !!payload?.layout;
             const body = {
                 returnJson: payload?.returnJson || false,
                 generateS3Url: true,
                 dimensionsType: payload?.dimensionType,
                 variation: payload?.variationType,
-                primaryText: payload?.defaultPrimaryText,
                 logo: {
                     template: {
                         token: logoStore.logoTemplateAsset.token,
@@ -358,26 +369,46 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
                     },
                 },
             };
+            if (hasLayout) {
+                // template.placeholder + template.layout tell fabric-render's
+                // loadCanvasAsync to replace placeholder text and apply the 2-line
+                // split. These must be sent on EVERY call — without them the template
+                // loads with its original single-line structure.
+                //
+                // IMPORTANT: Do NOT set body.primaryText here. It goes through a
+                // separate code path (applyPrimaryText in applyChangeRequestAsync)
+                // that overrides the split result with the full business name.
+                body.logo.template.placeholder = {
+                    primaryText: payload.defaultPrimaryText,
+                };
+                body.logo.template.layout = payload.layout;
+                body.changeRequest.layout = payload.layout;
+            }
+            else {
+                // No layout (standard logos): send primaryText normally.
+                body.primaryText = payload?.defaultPrimaryText;
+            }
             // mapping ui object to fabric compatible objects
             this.logoEdits.textObjects.forEach((o) => {
+                const updates = {
+                    fontFamily: o.fontFamily,
+                    fill: o.fill,
+                    stroke: o.outlineColor,
+                    strokeWidth: o.outlineEnabled ? o.outlineWidth : 0,
+                    isUppercase: o.isUppercase,
+                    shadow: {
+                        ...o.shadow,
+                        blur: o.shadowEnabled ? o.shadow.blur : 0,
+                        offsetX: o.shadowEnabled ? o.shadow.offsetX : 0,
+                        offsetY: o.shadowEnabled ? o.shadow.offsetY : 0,
+                    },
+                };
+                updates.textOriginal = o.text;
                 body.changeRequest.objects[o.id] = {
                     type: o.type,
                     role: o.role,
                     removed: !o.textEnabled || !o.text,
-                    updates: {
-                        fontFamily: o.fontFamily,
-                        fill: o.fill,
-                        textOriginal: o.text,
-                        stroke: o.outlineColor,
-                        strokeWidth: o.outlineEnabled ? o.outlineWidth : 0,
-                        isUppercase: o.isUppercase,
-                        shadow: {
-                            ...o.shadow,
-                            blur: o.shadowEnabled ? o.shadow.blur : 0,
-                            offsetX: o.shadowEnabled ? o.shadow.offsetX : 0,
-                            offsetY: o.shadowEnabled ? o.shadow.offsetY : 0,
-                        },
-                    },
+                    updates,
                 };
             });
             const client = FabricRenderClient.getInstance();

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

@@ -1261,6 +1261,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                     logoTemplateToken: string;
                     logoTemplateText: string;
                     logoTemplateVersion: number;
+                    layout?: string | undefined;
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 backgroundStyle: {
@@ -2544,6 +2545,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                     logoTemplateToken: string;
                     logoTemplateText: string;
                     logoTemplateVersion: number;
+                    layout?: string | undefined;
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 backgroundStyle: {
@@ -2839,6 +2841,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                     logoTemplateToken: string;
                     logoTemplateText: string;
                     logoTemplateVersion: number;
+                    layout?: string | undefined;
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
@@ -3062,6 +3065,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                     logoTemplateToken: string;
                     logoTemplateText: string;
                     logoTemplateVersion: number;
+                    layout?: string | undefined;
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
@@ -3827,7 +3831,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page").PageModel[];
             sections: import("../../store").PageSettingsStateSections;

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

@@ -1223,6 +1223,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     logoTemplateToken: string;
                     logoTemplateText: string;
                     logoTemplateVersion: number;
+                    layout?: string | undefined;
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 backgroundStyle: {
@@ -2506,6 +2507,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     logoTemplateToken: string;
                     logoTemplateText: string;
                     logoTemplateVersion: number;
+                    layout?: string | undefined;
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 backgroundStyle: {
@@ -2801,6 +2803,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     logoTemplateToken: string;
                     logoTemplateText: string;
                     logoTemplateVersion: number;
+                    layout?: string | undefined;
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
@@ -3024,6 +3027,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     logoTemplateToken: string;
                     logoTemplateText: string;
                     logoTemplateVersion: number;
+                    layout?: string | undefined;
                 } | undefined;
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
@@ -4275,6 +4279,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setStateAsync(payload: {
             newState: import("@shared/logo-settings/store").SetStateAsyncPayload;
             defaultPrimaryText?: string | undefined;
+            defaultLayout?: string | undefined;
         }): Promise<void>;
         resetLogoEdits(): void;
         setLogoDraftToken(logoDraftToken: string): void;
@@ -4285,9 +4290,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         updateLogoEdit(templateMetaString: string, draftMetaString: string | null): void;
         getEditableLogoVariationByVariationId(id: number): any;
         getEditableLogoVariationByBase64(base64: string): any;
-        updateEditableLogoImageUrlAsync(defaultPrimaryText?: string | undefined, overrideLogoVariation?: number | undefined): Promise<void>;
-        updateMetadataAsync(defaultPrimaryText?: string | undefined, resetLogoTemplateMetadata?: boolean): Promise<void>;
-        updateEditableLogoImageByVariationAsync(editableLogoVariation: import("@shared/logo-settings/store").EditableLogoVariation, defaultPrimaryText?: string | undefined): Promise<import("../../../../clients/fabric-render-client").ModifyLogoDataResponse | null>;
+        updateEditableLogoImageUrlAsync(defaultPrimaryText?: string | undefined, overrideLogoVariation?: number | undefined, layout?: string | undefined): Promise<void>;
+        updateMetadataAsync(defaultPrimaryText?: string | undefined, resetLogoTemplateMetadata?: boolean, layout?: string | undefined): Promise<void>;
+        updateEditableLogoImageByVariationAsync(editableLogoVariation: import("@shared/logo-settings/store").EditableLogoVariation, defaultPrimaryText?: string | undefined, layout?: string | undefined): Promise<import("../../../../clients/fabric-render-client").ModifyLogoDataResponse | null>;
         getDraftMetadata(logoDraftToken: string): string | undefined;
         upsertDraftMetadata(metadata: string): void;
         isS3TokenExpired(expiryDate: string | undefined): boolean;
@@ -4297,6 +4302,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             dimensionType: string;
             variationType: string;
             defaultPrimaryText?: string | undefined;
+            layout?: string | undefined;
         }): Promise<import("../../../../clients/fabric-render-client").ModifyLogoDataResponse | null>;
     }>;
     brandPageMakerStore: import("pinia").Store<"brandPageMaker", import("@brand-page-maker/stores").BrandPageMakerState, {
@@ -4407,7 +4413,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page").PageModel[];
             sections: import("../../store").PageSettingsStateSections;

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

@@ -202,7 +202,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page/models").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page/models").PageModel[];
             sections: import("../page-settings/store").PageSettingsStateSections;

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

@@ -580,7 +580,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             brandPageType: "default" | "brandSite" | "brandContact";
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page").PageModel[];
             sections: import("../../page-settings/store").PageSettingsStateSections;

package/package.json

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

package/src/brand-page/components/shop/ProductDetailModal.vue

@@ -103,7 +103,9 @@
               }"
             >
               <div>
-                <p class="tw-text-left tw-text-md tw-text-grayscale-800">
+                <p
+                  class="tw-text-left tw-text-md tw-text-grayscale-800 tw-whitespace-pre-line"
+                >
                   {{ currentProduct.description }}
                 </p>
               </div>

package/src/brand-page/constants/font.constants.ts

@@ -1409,7 +1409,7 @@ export const FONT_FAMILY_CONFIGS: Record<
     categories: [FONT_FAMILY_CATEGORIES().unique.key],
   },
   playwriteOsterreich: {
-    name: 'Playwrite Österreich',
+    name: 'Playwrite AT',
     family: 'Playwrite AT',
     isPremiumFont: false,
     type: 'google',

package/src/brand-page/models/logo.model.ts

@@ -30,6 +30,7 @@ export interface LogoTemplateImageModel {
   logoTemplateToken: string;
   logoTemplateText: string;
   logoTemplateVersion: number;
+  layout?: string;
 }
 
 export const EMPTY_LOGO_IMAGE_MODEL: Readonly<LogoImageModel> = {

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

@@ -71,6 +71,7 @@ export interface BrandPageMakerViewModel {
   brandPageType?: BrandPageType;
   businessName?: string;
   industry?: string;
+  layout?: string;
 }
 
 const RESIZE_DEBOUNCE_WAIT_IN_MS = 100;
@@ -227,6 +228,7 @@ export default defineComponent({
       brandPageType: this.viewModel.brandPageType,
       businessName: this.viewModel.businessName,
       industry: this.viewModel.industry,
+      layout: this.viewModel.layout,
       logoVariationImageUrls: this.viewModel.logoVariationImageUrls,
       shopConfigData,
     });

package/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.ts

@@ -274,6 +274,11 @@ export default defineComponent({
       },
       deep: true,
     },
+    logoImageBase64Url() {
+      if (this.isAdmin) {
+        this.updateViewModel();
+      }
+    },
     previewImageUrl() {
       // Reset loading state whenever the preview URL changes
       if (!this.isAdmin) {

package/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.ts

@@ -508,8 +508,10 @@ export const useRichTextEditor = (
     // retainStyleOnEmptyLine(editor, selection);
 
     if (textStyleAttributes && textStyleAttributes.fontFamily) {
-      selectedFont.value = textStyleAttributes.fontFamily;
-      fontSettings.selectedFont = textStyleAttributes.fontFamily;
+      const font = textStyleAttributes.fontFamily.replace(/^['"]|['"]$/g, '');
+
+      selectedFont.value = font;
+      fontSettings.selectedFont = font;
     } else {
       selectedFont.value = 'Lato';
       fontSettings.selectedFont = 'Lato';

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

@@ -121,6 +121,7 @@ export interface InitialisePayload {
   isPersonalisationEnabled: boolean;
   businessName: string | undefined;
   industry: string | undefined;
+  layout?: string;
   logoVariationImageUrls: string[];
   shopConfigData: string | ShopConfigData;
   isServerRenderOverride?: boolean;
@@ -788,6 +789,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       isPersonalisationEnabled,
       businessName,
       industry,
+      layout,
       logoVariationImageUrls,
       shopConfigData,
       isServerRenderOverride = false,
@@ -948,6 +950,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
         if (brandPageContainerStore.isPrePurchase) {
           await editableLogoStore.setStateAsync({
             defaultPrimaryText: businessName,
+            defaultLayout: layout,
             newState: {
               isTextOnlyLogo: false,
               logoTemplateMetadata: '',

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

@@ -36,6 +36,10 @@ export interface ModifyLogoDataRequest {
     template: {
       token: string;
       version: number;
+      placeholder?: {
+        primaryText?: string;
+      };
+      layout?: string;
     };
     draft: {
       token: string;
@@ -51,6 +55,7 @@ export interface ModifyLogoDataRequest {
         updates: Updates;
       }
     >;
+    layout?: string;
   };
 }
 
@@ -120,11 +125,16 @@ export class FabricRenderClient {
       logoTemplateToken: string;
       logoTemplateVersion: number;
       logoTemplateText: string;
+      layout?: string;
     },
     outputFormat: LogoOutputFormat = 'base64svgjson',
     logoColorPalette: string | undefined = undefined,
   ) {
-    let url = `${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`;
+    let url = `${this.baseUrl}/asset/logotemplate/brand-page/${logoTemplateImage.logoTemplateToken}?dimensionsType=preview_image_transparent_no_buffer&outputFormat=${outputFormat}&logoTemplateVersion=${logoTemplateImage.logoTemplateVersion}&text=${encodeURIComponent(logoTemplateImage.logoTemplateText)}`;
+
+    if (logoTemplateImage.layout) {
+      url = `${url}&layout=${logoTemplateImage.layout}`;
+    }
 
     if (logoColorPalette) {
       url = `${url}&colorpalette=${logoColorPalette}`;
@@ -256,6 +266,7 @@ export class FabricRenderClient {
     logoTemplateToken: string;
     logoTemplateText: string;
     logoTemplateVersion: number;
+    layout?: string;
   }): Promise<{ data: string; width: number; height: number } | undefined> {
     const logoSvgUrl = this.getLogoTemplateUrlByLogoTemplateImage(
       logoTemplateImage,

package/src/shared/font-family-selector/FontFamilySelector.mixin.ts

@@ -45,8 +45,12 @@ export default defineComponent({
   },
   methods: {
     getCategoryForFont(fontName: FontFamilyName): FontFamilyCategory | null {
+      const strippedFontName = fontName?.replace(
+        /^['"]|['"]$/g,
+        '',
+      ) as FontFamilyName;
       const fontConfig = Object.values(FONT_FAMILY_CONFIGS).find(
-        (config) => config.name === fontName,
+        (config) => config.name === strippedFontName,
       );
 
       return fontConfig?.categories[0] || null;

package/src/shared/font-family-selector/FontPicker.vue

@@ -10,7 +10,7 @@
       @click="togglePanel"
     >
       <div class="tw-py-3 tw-pl-3 tw-flex-auto tw-text-left tw-truncate">
-        {{ value }}
+        {{ stripQuotes(value) }}
       </div>
       <Icon
         :name="isPanelOpen ? 'chevron-up' : 'chevron-down'"
@@ -130,7 +130,7 @@ const selectedCategoryLabel = computed(() => {
 });
 
 function isSelectedFont(option: StyleTextFontFamilyOption): boolean {
-  return FONT_FAMILY_CONFIGS[option.key].name === props.value;
+  return FONT_FAMILY_CONFIGS[option.key].name === stripQuotes(props.value);
 }
 
 function togglePanel(): void {
@@ -158,7 +158,7 @@ function scrollToSelectedFont(): void {
   nextTick(() => {
     if (!fontListRef.value) return;
     const selectedKey = filteredFontOptions.value.find(
-      (o) => FONT_FAMILY_CONFIGS[o.key].name === props.value,
+      (o) => FONT_FAMILY_CONFIGS[o.key].name === stripQuotes(props.value),
     )?.key;
     if (!selectedKey) return;
     const el = fontListRef.value.querySelector(
@@ -201,6 +201,7 @@ function handleClickOutside(): void {
 function onSelectCategory(category: FontFamilyCategory | null): void {
   selectedCategory.value = category;
   categoryDropdownRef.value?.hideMenu();
+  scrollToSelectedFont();
 }
 
 function onFontClick(option: StyleTextFontFamilyOption): void {