@designcrowd/library.brand-page 5.17.18 → 5.17.19-ast-btn-styles

package/lib/src/{CreatedOnBrandCrowd-de-de-DB6k-SCt.js → CreatedOnBrandCrowd-de-de-BVNCHu2U.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-DjMace5m.js → CreatedOnBrandCrowd-en-us-p5JGPJZK.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-BefD6S7_.js → CreatedOnBrandCrowd-es-es-B3rvehGG.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CCgATay-.js → CreatedOnBrandCrowd-fr-ca-Bysd3HDa.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-CCgATay-.js → CreatedOnBrandCrowd-fr-fr-Bysd3HDa.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-Bk5rXo11.js → CreatedOnBrandCrowd-pt-br-BS23K4jd.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-Bk5rXo11.js → CreatedOnBrandCrowd-pt-pt-BS23K4jd.js}

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

package/lib/src/{CreatedOnDcom-de-de-Cc-kh38q.js → CreatedOnDcom-de-de-DIjn2Z4g.js}

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

package/lib/src/{CreatedOnDcom-en-us-SCsgAQlO.js → CreatedOnDcom-en-us-0gCGoi3k.js}

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

package/lib/src/{CreatedOnDcom-es-es-CljIh2tr.js → CreatedOnDcom-es-es-BhNHcidB.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-BxsoG_MD.js → CreatedOnDcom-fr-ca-a4_OqwIb.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-BSllWBS4.js → CreatedOnDcom-fr-fr-85rgy0k0.js}

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

package/lib/src/{CreatedOnDcom-pt-br-BoFJhKBu.js → CreatedOnDcom-pt-br-B2o0Anb9.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-8iLU3IhZ.js → CreatedOnDcom-pt-pt-DVZg9JdE.js}

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

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

@@ -18,6 +18,7 @@ export interface LogoTemplateImageModel {
     logoTemplateToken: string;
     logoTemplateText: string;
     logoTemplateVersion: number;
+    layout?: string;
 }
 export declare const EMPTY_LOGO_IMAGE_MODEL: Readonly<LogoImageModel>;
 export interface LogoContent extends Content, EditableLogo {

package/lib/src/brand-page-maker/components/action-bar/ActionBar.mixin.d.ts

@@ -122,7 +122,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             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("../../../shared/page-settings/store").PageSettingsStateSections;

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

@@ -23,6 +23,7 @@ export interface BrandPageMakerViewModel {
     brandPageType?: BrandPageType;
     businessName?: string;
     industry?: string;
+    layout?: string;
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     viewModel: {
@@ -166,7 +167,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("@shared/page-settings/store").PageSettingsStateSections;

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

@@ -151,6 +151,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/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMakerTemplateSettings.mixin.d.ts

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

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

@@ -617,7 +617,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;

package/lib/src/brand-page-maker/components/brandpage-settings/ReplaceImageSettingsForBrandPageSettings.mixin.d.ts

@@ -117,7 +117,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("../../../shared/page-settings/store").PageSettingsStateSections;

package/lib/src/brand-page-maker/components/seo-settings/SeoPageSettings.mixin.d.ts

@@ -423,7 +423,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("../../../shared/page-settings/store").PageSettingsStateSections;

package/lib/src/brand-page-maker/components/seo-settings/UrlSettings.mixin.d.ts

@@ -424,7 +424,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("../../../shared/page-settings/store").PageSettingsStateSections;

package/lib/src/brand-page-maker/components/social-share/SocialShare.mixin.d.ts

@@ -127,7 +127,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("../../../shared/page-settings/store").PageSettingsStateSections;

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

@@ -475,7 +475,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("../../../shared/page-settings/store").PageSettingsStateSections;

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

@@ -204,6 +204,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/lib/src/brand-page-maker/models/button-styles-config.js

@@ -1,4 +1,3 @@
-import { BRAND_PAGE_TYPES } from '@brand-page';
 import { ButtonBoxShadowSize, ButtonSoftBoxShadowSize } from '@brand-page';
 export const ButtonStyleConfigOptions = [
     'buttonBorderColor',
@@ -57,7 +56,7 @@ export const availableButtonStyleConfigs = [
         iconName: undefined,
         iconViewBox: undefined,
         options: ['buttonFillColor', 'buttonIconColor'],
-        brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+        brandPageType: undefined,
     },
     {
         id: 'BUTTON_STYLE_4',
@@ -108,7 +107,7 @@ export const availableButtonStyleConfigs = [
         iconName: undefined,
         iconViewBox: undefined,
         options: ['buttonFillColor', 'buttonBorderColor', 'buttonIconColor'],
-        brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+        brandPageType: undefined,
     },
     {
         id: 'BUTTON_STYLE_7',
@@ -131,7 +130,7 @@ export const availableButtonStyleConfigs = [
             'buttonShadowColor',
             'buttonIconColor',
         ],
-        brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+        brandPageType: undefined,
     },
     {
         id: 'BUTTON_STYLE_8',
@@ -154,7 +153,7 @@ export const availableButtonStyleConfigs = [
             'buttonShadowColor',
             'buttonIconColor',
         ],
-        brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+        brandPageType: undefined,
     },
     {
         id: 'BUTTON_STYLE_9',
@@ -177,7 +176,7 @@ export const availableButtonStyleConfigs = [
             'buttonShadowColor',
             'buttonIconColor',
         ],
-        brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+        brandPageType: undefined,
     },
     {
         id: 'BUTTON_STYLE_10',
@@ -228,7 +227,7 @@ export const availableButtonStyleConfigs = [
         iconName: 'button-dashed-oval',
         iconViewBox: '0 0 60 20',
         options: ['buttonFillColor', 'buttonBorderColor', 'buttonIconColor'],
-        brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+        brandPageType: undefined,
     },
     {
         id: 'BUTTON_STYLE_13',
@@ -279,7 +278,7 @@ export const availableButtonStyleConfigs = [
         iconName: 'button-doubleline-oval',
         iconViewBox: '0 0 60 20',
         options: ['buttonFillColor', 'buttonBorderColor', 'buttonIconColor'],
-        brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+        brandPageType: undefined,
     },
     {
         id: 'BUTTON_STYLE_16',
@@ -336,7 +335,7 @@ export const availableButtonStyleConfigs = [
         iconName: 'button-softshadow-oval',
         iconViewBox: '0 0 60 20',
         options: ['buttonFillColor', 'buttonSoftShadowColor', 'buttonIconColor'],
-        brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+        brandPageType: undefined,
     },
     {
         id: 'BUTTON_STYLE_19',
@@ -353,7 +352,7 @@ export const availableButtonStyleConfigs = [
         iconName: 'button-brushstroke',
         iconViewBox: '0 0 60 20',
         options: ['buttonFillColor', 'buttonIconColor'],
-        brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+        brandPageType: undefined,
     },
     {
         id: 'BUTTON_STYLE_20',
@@ -370,7 +369,7 @@ export const availableButtonStyleConfigs = [
         iconName: 'button-arrow',
         iconViewBox: '0 0 60 20',
         options: ['buttonFillColor', 'buttonIconColor'],
-        brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+        brandPageType: undefined,
     },
     {
         id: 'BUTTON_STYLE_21',
@@ -387,6 +386,6 @@ export const availableButtonStyleConfigs = [
         iconName: 'button-paper',
         iconViewBox: '0 0 60 20',
         options: ['buttonFillColor', 'buttonIconColor'],
-        brandPageType: [BRAND_PAGE_TYPES.default, BRAND_PAGE_TYPES.brandContact],
+        brandPageType: undefined,
     },
 ];

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

@@ -22,6 +22,7 @@ export interface InitialisePayload {
     isPersonalisationEnabled: boolean;
     businessName: string | undefined;
     industry: string | undefined;
+    layout?: string;
     logoVariationImageUrls: string[];
     shopConfigData: string | ShopConfigData;
     isServerRenderOverride?: boolean;
@@ -191,7 +192,7 @@ export declare const useBrandPageMakerStore: import("pinia").StoreDefinition<"br
         brandPageType: BrandPageType;
     }): void;
     initialiseStoresByBrandPageModelAsync(brandPageModel: BrandPageModel): Promise<void>;
-    initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: InitialisePayload): Promise<void>;
+    initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: InitialisePayload): Promise<void>;
     initialisePages({ pages, sections, }: {
         pages: PageModel[];
         sections: PageSettingsStateSections;

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

@@ -482,7 +482,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                 },
             });
         },
-        async initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, logoVariationImageUrls, shopConfigData, isServerRenderOverride = false, }) {
+        async initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride = false, }) {
             const brandPageContainerStore = useBrandPageContainerStore();
             const userStore = useBrandPageMakerUserStore();
             const uiStore = useUiStore();
@@ -586,6 +586,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                 if (brandPageContainerStore.isPrePurchase) {
                     await editableLogoStore.setStateAsync({
                         defaultPrimaryText: businessName,
+                        defaultLayout: layout,
                         newState: {
                             isTextOnlyLogo: false,
                             logoTemplateMetadata: '',

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

@@ -31,6 +31,10 @@ export interface ModifyLogoDataRequest {
         template: {
             token: string;
             version: number;
+            placeholder?: {
+                primaryText?: string;
+            };
+            layout?: string;
         };
         draft: {
             token: string;
@@ -43,6 +47,7 @@ export interface ModifyLogoDataRequest {
             removed: boolean;
             updates: Updates;
         }>;
+        layout?: string;
     };
 }
 export interface ModifyLogoDataResponse {
@@ -82,6 +87,7 @@ export declare class FabricRenderClient {
         logoTemplateToken: string;
         logoTemplateVersion: number;
         logoTemplateText: string;
+        layout?: string;
     }, outputFormat?: LogoOutputFormat, logoColorPalette?: string | undefined): string;
     getLogoVariationUrlByLogoVariationIndex(logoDraftToken: string, tick: string | number | undefined, variationIndex: number, outputFormat?: LogoOutputFormat): string;
     private getModifyLogoPostEndpoint;
@@ -99,6 +105,7 @@ export declare class FabricRenderClient {
         logoTemplateToken: string;
         logoTemplateText: string;
         logoTemplateVersion: number;
+        layout?: string;
     }): Promise<{
         data: string;
         width: number;

package/lib/src/clients/fabric-render-client.js

@@ -41,11 +41,14 @@ export class FabricRenderClient {
         return FabricRenderClient._staticClient;
     }
     getLogoTemplateUrlByLogoTemplateImage(logoTemplateImage, outputFormat = 'base64svgjson', logoColorPalette = 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 logoTemplateUrl = `${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) {
+            logoTemplateUrl = `${logoTemplateUrl}&layout=${logoTemplateImage.layout}`;
+        }
         if (logoColorPalette) {
-            url = `${url}&colorpalette=${logoColorPalette}`;
+            logoTemplateUrl = `${logoTemplateUrl}&colorpalette=${logoColorPalette}`;
         }
-        return url;
+        return logoTemplateUrl;
     }
     getLogoVariationUrlByLogoVariationIndex(logoDraftToken, tick, variationIndex, outputFormat = 'png') {
         let thisVariationIndex = variationIndex;

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

@@ -1406,21 +1406,6 @@ a.maker-anchor {
     -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
             transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
-.tw-translate-x-\[-4\%\] {
-    --tw-translate-x: -4%;
-    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
-.tw-translate-x-\[-99\%\] {
-    --tw-translate-x: -99%;
-    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
-.tw-translate-x-\[101\%\] {
-    --tw-translate-x: 101%;
-    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
 .tw-translate-y-0 {
     --tw-translate-y: 0px;
     -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -5671,11 +5656,46 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   max-height: 45vh;
 }
 
+.bp-button-paper-top[data-v-075a9270] {
+  --tw-translate-y: -10%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  color: var(--icon-color);
+}
+.bp-button-paper-bottom[data-v-075a9270] {
+  --tw-translate-y: -4%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  color: var(--icon-color);
+}
+.bp-button-paper-top[data-v-075a9270] svg,
+.bp-button-paper-bottom[data-v-075a9270] svg {
+  width: 100%;
+  height: auto;
+}
+.bp-icon-brush-left[data-v-075a9270] svg {
+  -webkit-transform: translateX(-99%);
+          transform: translateX(-99%);
+  width: auto;
+}
+.bp-icon-brush-right[data-v-075a9270] svg {
+  width: auto;
+}
+.bp-button-arrow[data-v-075a9270],
+.device-wrapper--mobile .bp-button-arrow[data-v-075a9270] {
+  clip-path: polygon(5% 100%, 0% 50%, 5% 0%, 95% 0%, 100% 50%, 95% 100%);
+}
+@media (min-width: 767px) {
+.bp-button-arrow[data-v-075a9270] {
+    clip-path: polygon(3% 100%, 0% 50%, 3% 0%, 97% 0%, 100% 50%, 97% 100%);
+}
+}
+
 .empty-para[data-v-5a056a60] p:empty::after {
   content: '\00A0';
 }
 
-.c-button[data-v-e08f0a53] {
+.c-button[data-v-8a478ded] {
   --icon-h: 1.5rem;
   --icon-m-r: 2rem;
   --icon-m-icon: 0.5rem;
@@ -5686,7 +5706,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   text-align: center;
   text-decoration: none;
 }
-.bp-button[data-v-e08f0a53] .c-button__icon-img img {
+.bp-button[data-v-8a478ded] .c-button__icon-img img {
   max-width: none;
   -o-object-fit: cover;
      object-fit: cover;
@@ -5698,91 +5718,49 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   width: var(--icon-img-size);
   height: var(--icon-img-size);
 }
-.c-button--disabled[data-v-e08f0a53] {
+.c-button--disabled[data-v-8a478ded] {
   pointer-events: none;
 }
-.c-button:hover .c-button__label[data-v-e08f0a53] {
+.c-button:hover .c-button__label[data-v-8a478ded] {
   text-decoration: underline;
 }
-.c-button__icon[data-v-e08f0a53] {
+.c-button__icon[data-v-8a478ded] {
   margin-right: var(--icon-m-r);
 }
-.bp-button[data-v-e08f0a53] .c-button__icon-img {
+.bp-button[data-v-8a478ded] .c-button__icon-img {
   margin-right: var(--icon-m-r);
   width: var(--icon-w);
   height: var(--icon-h);
 }
-.c-button__label[data-v-e08f0a53] {
+.c-button__label[data-v-8a478ded] {
   margin: 0 auto;
   word-break: break-word;
   overflow-wrap: anywhere;
   width: auto;
 }
-.c-button__label--offset-sm[data-v-e08f0a53] {
+.c-button__label--offset-sm[data-v-8a478ded] {
   -webkit-transform: translateX(-1.5rem);
           transform: translateX(-1.5rem);
 }
-.c-button__label--offset-md[data-v-e08f0a53] {
+.c-button__label--offset-md[data-v-8a478ded] {
   -webkit-transform: translateX(-1.75rem);
           transform: translateX(-1.75rem);
 }
-.c-button__label--offset-lg[data-v-e08f0a53] {
+.c-button__label--offset-lg[data-v-8a478ded] {
   -webkit-transform: translateX(-1.5rem);
           transform: translateX(-1.5rem);
 }
-.c-button__no-icon[data-v-e08f0a53] {
+.c-button__no-icon[data-v-8a478ded] {
   margin-right: var(--icon-m-r);
   width: var(--icon-w);
   height: var(--icon-h);
 }
-.bp-button-paper-bottom[data-v-e08f0a53] {
-  --tw-translate-y: -4%;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  color: var(--icon-color);
-}
-.bp-button-paper-top[data-v-e08f0a53] {
-  --tw-translate-y: -10%;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  color: var(--icon-color);
-}
-.bp-icon-brush-left[data-v-e08f0a53] {
-  width: 2rem;
-  --tw-translate-x: 101%;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  color: var(--icon-color);
-}
-.bp-icon-brush-right[data-v-e08f0a53] {
-  width: 2rem;
-  --tw-translate-x: -4%;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  color: var(--icon-color);
-}
-.bp-icon-brush-left[data-v-e08f0a53] svg {
-  width: auto;
-  --tw-translate-x: -99%;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.bp-icon-brush-right[data-v-e08f0a53] svg {
-  width: auto;
-}
-.bp-button-arrow[data-v-e08f0a53],
-.device-wrapper--mobile .bp-button-arrow[data-v-e08f0a53] {
-  clip-path: polygon(5% 100%, 0% 50%, 5% 0%, 95% 0%, 100% 50%, 95% 100%);
-}
-.device-wrapper--mobile .c-button__icon[data-v-e08f0a53] {
+.device-wrapper--mobile .c-button__icon[data-v-8a478ded] {
   margin: 0;
   margin-right: var(--icon-m-r);
 }
 @media (min-width: 767px) {
-.bp-button-arrow[data-v-e08f0a53] {
-    clip-path: polygon(3% 100%, 0% 50%, 3% 0%, 97% 0%, 100% 50%, 97% 100%);
-}
-.c-button__icon[data-v-e08f0a53] {
+.c-button__icon[data-v-8a478ded] {
     margin: 0 var(--icon-m-icon);
 }
 }