@designcrowd/library.brand-page 5.15.1-ast-color-bug-3 → 5.15.2

package/lib/src/{CreatedOnBrandCrowd-de-de-ynS-2K9E.js → CreatedOnBrandCrowd-de-de-CC0IFuTS.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-BnJe87v-.js → CreatedOnBrandCrowd-en-us-DHSPJreq.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-DaY0886t.js → CreatedOnBrandCrowd-es-es-D0Z2Ftc8.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-BFH_pox0.js → CreatedOnBrandCrowd-fr-ca-B5m-vPKs.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-BFH_pox0.js → CreatedOnBrandCrowd-fr-fr-B5m-vPKs.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-DhFx90_M.js → CreatedOnBrandCrowd-pt-br-BUldaocW.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-DhFx90_M.js → CreatedOnBrandCrowd-pt-pt-BUldaocW.js}

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

package/lib/src/{CreatedOnDcom-de-de-7WsH6h_7.js → CreatedOnDcom-de-de-FfVsOpHR.js}

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

package/lib/src/{CreatedOnDcom-en-us-B6OM5-ww.js → CreatedOnDcom-en-us-D-MPmkgN.js}

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

package/lib/src/{CreatedOnDcom-es-es-BBUndE0w.js → CreatedOnDcom-es-es-CNC_3nv0.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-CHkGzcHQ.js → CreatedOnDcom-fr-ca-DzqdFn7y.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-D81mM4O9.js → CreatedOnDcom-fr-fr-rBYGR5It.js}

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

package/lib/src/{CreatedOnDcom-pt-br-EmLu1Dd6.js → CreatedOnDcom-pt-br-CDu8WIMK.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-BF_SPv8p.js → CreatedOnDcom-pt-pt-Dx-OKM33.js}

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

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

@@ -51,7 +51,6 @@ export declare class PageStyles {
     logoStyles: LogoStyles;
     textStyles: TextStyles;
     galleryStyles: GalleryStyles;
-    newColors: string[];
     constructor(option?: Partial<Omit<PageStyles, 'logoStyles' | 'buttonStyles' | 'backgroundStyles' | 'textStyles'>> & {
         logoStyles?: Partial<LogoStyles>;
         buttonStyles?: Partial<ButtonStyles>;

package/lib/src/brand-page/models/index.js

@@ -80,7 +80,6 @@ export class PageStyles {
     logoStyles;
     textStyles;
     galleryStyles;
-    newColors;
     constructor(option = {}) {
         this.backgroundStyles = new BackgroundStyles(option.backgroundStyles || {
             backgroundImageUrl: '',
@@ -105,7 +104,6 @@ export class PageStyles {
             ? new TextStyles(option.textStyles)
             : TextStyles.GetDefaultTextStyle();
         this.galleryStyles = new GalleryStyles(option.galleryStyles);
-        this.newColors = option.newColors || [];
     }
 }
 export const ASPECT_RATIOS = {
@@ -397,18 +395,7 @@ export class BrandPageModel {
     paymentConfig;
     constructor(options) {
         this.v = options.v || 0;
-        // Migration: Ensure newColors exists for backward compatibility
-        if (options.styles && !options.styles.hasOwnProperty('newColors')) {
-            options.styles.newColors = [];
-        }
-        // Extract newColors directly from options if it exists at the top level
-        const newColors = options.styles?.newColors || options.newColors || [];
-        // Ensure newColors is passed to PageStyles constructor
-        const stylesWithNewColors = {
-            ...options.styles,
-            newColors: newColors,
-        };
-        this.styles = new PageStyles(stylesWithNewColors);
+        this.styles = new PageStyles(options.styles);
         const theme = {
             primaryColor: this.styles.textStyles.style.color || '',
             secondaryColor: this.styles.backgroundStyles.style.background || '',

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

@@ -175,9 +175,9 @@ export const getOptimalLogoSize = (width, height, currentSize) => {
     if (!parseFloat(`${aspectRatio}`) || aspectRatio <= 1) {
         return currentSize;
     }
-    const newSize = parseFloat(currentSize) + (aspectRatio - 1) * 10;
-    if (newSize > 16) {
-        return '16rem';
+    const newSize = parseFloat(currentSize) + (aspectRatio - 1) * 4.5;
+    if (newSize > 11) {
+        return '11rem';
     }
     else {
         return `${Math.round(newSize)}rem`;

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

@@ -48,6 +48,17 @@ export const migration07 = async (migrationResult, options) => {
                 const currentMaxHeight = config.logoImageHeight || DEFAULT_LOGO_HEIGHT;
                 const dimensions = calculateConstrainedDimensions(logoData, currentMaxWidth, currentMaxHeight);
                 config.logoImageHeight = dimensions.height;
+                config.logoImageWidth = dimensions.width;
+            }
+            else if (!logoData &&
+                (sectionName === 'pageFooterDesktop' ||
+                    sectionName === 'pageFooterMobile' ||
+                    sectionName === 'pageHeaderMobile')) {
+                const currentMaxHeight = config.logoImageHeight || DEFAULT_LOGO_HEIGHT;
+                const heightValue = parseFloat(currentMaxHeight);
+                const newHeight = heightValue >= 13 ? heightValue - 4 : heightValue - 1;
+                config.logoImageHeight = `${newHeight}rem`;
+                config.logoImageWidth = `${newHeight}rem`;
             }
         });
     }

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

@@ -6,11 +6,10 @@ import { migration02 } from './migration/migration-02';
 import { migration03 } from './migration/migration-03';
 import { migration04 } from './migration/migration-04';
 import { migration05 } from './migration/migration-05';
+import { migration06 } from './migration/migration-06';
 import { migration05_1 } from './migration/migration-05_1';
 import { migration05_2 } from './migration/migration-05_2';
-import { migration06 } from './migration/migration-06';
 import { migration07 } from './migration/migration-07';
-import { migration08 } from './migration/migration-08';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -63,11 +62,6 @@ const MIGRATION_TABLE = [
         migrateFn: migration07,
         description: 'Migrating logo render sizes for logo content, header and footer sections',
     },
-    {
-        version: 8,
-        migrateFn: migration08,
-        description: 'Adding newColors property for color picker persistence',
-    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

package/lib/src/brand-page-maker/components/admin-background-settings/AdminBackgroundSettings.mixin.d.ts

@@ -214,9 +214,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         triggerLockedContentClickedEvent(payload: {
             type: string;
         }): Promise<void>;
-        onTemplateSelected(payload: {
-            templateId: string;
-        }): Promise<void>;
+        onTemplateSelected(payload: import("../../stores").OnTemplateSelectedPayload): Promise<void>;
         showUpgradeModalAndSaveAsync(): Promise<void>;
         setIsPersonalisationEnabled({ isPersonalisationEnabled, }: {
             isPersonalisationEnabled: boolean;

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

@@ -877,9 +877,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         triggerLockedContentClickedEvent(payload: {
             type: string;
         }): Promise<void>;
-        onTemplateSelected(payload: {
-            templateId: string;
-        }): Promise<void>;
+        onTemplateSelected(payload: import("../../stores").OnTemplateSelectedPayload): Promise<void>;
         showUpgradeModalAndSaveAsync(): Promise<void>;
         setIsPersonalisationEnabled({ isPersonalisationEnabled, }: {
             isPersonalisationEnabled: boolean;
@@ -997,6 +995,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         loadPageNo({ pageNo }: {
             pageNo: number;
         }): Promise<void>;
+        getCachedTemplateByTokenAsync(token: string): Promise<import("../../../shared/template-settings/models").TemplateSettingsTemplate | undefined>;
         onTemplateSelected(payload: import("../../../shared/template-settings/models").OnTemplateSelectedPayload): Promise<void>;
         onCategorySelected(payload: import("../../../shared/template-settings/models").OnCategorySelectedPayload): Promise<void>;
         onSearch(payload: import("../../../shared/template-settings/models").OnSearchPayload): Promise<void>;
@@ -1105,9 +1104,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             paymentConfig: import("../../../brand-page").BrandPagePaymentConfig | undefined;
             pages: import("../../../brand-page").PageModel[];
         }): void;
-        setPaymentConfig(payload: {
-            paymentConfig: import("../../../brand-page").BrandPagePaymentConfig | undefined;
-        }): void;
+        setPaymentConfig(value: import("../../../brand-page").BrandPagePaymentConfig): void;
         getProductById(id: string): import("../../../brand-page/models/shop.model").ProductModel | undefined;
         addProduct(product: import("../../../brand-page/models/shop.model").ProductModel): void;
         updateProduct(id: string, updatedProduct: import("../../../brand-page/models/shop.model").ProductModel): void;

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

@@ -1065,13 +1065,6 @@ declare const _default: import("vue").DefineComponent<{}, {
             fontFamily: "lato" | "roboto" | "notoSans" | "openSans" | "arvo" | "bebasNeue" | "ptSerif" | "oswald" | "inter" | "montserrat" | "raleway" | "anton" | "antonSc" | "quicksand" | "pacifico" | "bioRhyme" | "playfairDisplay" | "mulish" | "telex" | "pridi" | "hindMadurai" | "kanit" | "libreBaskerville" | "amiko" | "neuton" | "tenorSans" | "jacquesFrancois" | "varela" | "quattrocentoSans" | "workSans" | "titilliumWeb" | "amaticSc" | "poiretOne" | "shantellSans" | "dancingScript" | "tangerine" | "cinzel" | "jost" | "exo2" | "ebGaramond" | "ubuntu" | "cabin" | "josefinSans" | "lobsterTwo" | "sacramento" | "nunito" | "aboreto" | "aleo" | "abhayaLibre" | "caladea" | "rokkitt" | "rubik" | "frankRuhlLibre" | "spectral" | "abrilFatface" | "courgette" | "kiteOne" | "amarante" | "satisfy" | "lilitaOne" | "lobster" | "titanOne" | "cookie" | "bungee" | "poppins" | "staatliches" | "patuaOne" | "calistoga" | "suezOne" | "caprasimo" | "rubikMonoOne" | "silkscreen" | "alfaSlabOne" | "orelegaOne" | "audiowide" | "redRose" | "kalnia" | "imbue" | "climateCrisis" | "gluten" | "madimiOne" | "anta" | "trykker" | "moul" | "bevan" | "wendyOne" | "lexendDeca" | "vinaSans" | "chango" | "changaOne" | "protestGuerrilla" | "londrinaShadow" | "candal" | "borel" | "rockNRollOne" | "bungeeInline" | "rampartOne" | "manrope" | "yuseiMagic" | "patrickHandSC" | "farsan" | "handlee" | "lemonada" | "arsenal" | "bakbakOne" | "belleza" | "blackHanSans" | "bowlbyOne" | "brunoAceSC" | "castoroTitling" | "contrailOne" | "delaGothicOne" | "dotGothic16" | "fahkwang" | "francoisOne" | "gloock" | "graduate" | "jersey10" | "kavoon" | "kronaOne" | "notable" | "pavanam" | "phudu" | "poetsenOne" | "pollerOne" | "questrial" | "racingSansOne" | "rammettoOne" | "rubikGlitch" | "shrikhand" | "spicyRice" | "syncopate" | "urbanist" | "yesevaOne" | "zenDots";
         }): Promise<void>;
         toggleLogoBackground(): Promise<any>;
-        addNewColor({ color }: {
-            color: string;
-        }): void;
-        setNewColors({ newColors }: {
-            newColors: string[];
-        }): void;
-        removeDuplicateNewColors(): void;
     }>;
 }, {
     isDraggingContent: boolean;

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

@@ -303,7 +303,7 @@ export default defineComponent({
                     eventProps: {
                         content_category: this.contentSettingsStore.getContentCategory(currentlySelectedItem.type),
                         content_type: currentlySelectedItem.type,
-                        select_location: SELECT_LOCATIONS.MAKER_PREVIEW,
+                        select_location: SELECT_LOCATIONS.SIDEBAR,
                     },
                 });
             }

package/lib/src/brand-page-maker/composables/useEventTracker.d.ts

@@ -40,6 +40,8 @@ export declare const EVENTS: {
     WEBSITE_MAKER_CALENDLY_LINK_CLICKED: string;
     WEBSITE_MAKER_UPSELL_OFFER: string;
     WEBSITE_MAKER_UPSELL_ACTION: string;
+    WEBSITE_MAKER_SWITCH_LOGO: string;
+    WEBSITE_MAKER_SWITCH_LOGO_MODAL: string;
 };
 export declare const SELECT_LOCATIONS: {
     MAKER_PREVIEW: string;

package/lib/src/brand-page-maker/composables/useEventTracker.js

@@ -23,6 +23,8 @@ export const EVENTS = {
     WEBSITE_MAKER_CALENDLY_LINK_CLICKED: 'website_maker_calendly_link_clicked',
     WEBSITE_MAKER_UPSELL_OFFER: 'website_maker_upsell_offer',
     WEBSITE_MAKER_UPSELL_ACTION: 'website_maker_upsell_action',
+    WEBSITE_MAKER_SWITCH_LOGO: 'website_maker_switch_logo',
+    WEBSITE_MAKER_SWITCH_LOGO_MODAL: 'website_maker_switch_logo_modal',
 };
 export const SELECT_LOCATIONS = {
     MAKER_PREVIEW: 'maker_preview',

package/lib/src/brand-page-maker/constants/config-settings-constant.js

@@ -2525,7 +2525,7 @@ export const SHOP_SECTION_SETTINGS_CONFIG = () => ({
             shouldRender: false,
         },
         paymentConfig: {
-            type: 'payment-config',
+            type: 'shop-payment-config',
             groupId: REQUEST_PAYMENT_GROUPS.settings,
             overrideValueFieldName: 'shopPaymentConfig',
         },

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

@@ -71,6 +71,7 @@ export interface SetIsModifiedPayload {
 }
 export interface OnTemplateSelectedPayload {
     templateId: string;
+    forceApply?: boolean;
 }
 export interface IsApplyingTemplatePayload {
     isApplying: boolean;

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

@@ -234,14 +234,13 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                 reset: true,
                 brandPageType: this.brandPageType,
             });
-            const { buttonStyles, logoStyles, textStyles, galleryStyles, newColors } = brandPageModel.styles;
+            const { buttonStyles, logoStyles, textStyles, galleryStyles } = brandPageModel.styles;
             styleSettingsStore.setState({
                 newState: {
                     buttonStyles,
                     logoStyles,
                     textStyles,
                     galleryStyles,
-                    newColors: newColors || [], // Use saved newColors or empty array if not available
                 },
             });
             this.initialisePages({
@@ -265,9 +264,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             styleSettingsStore.setButtonStyles(brandPageModel.styles.buttonStyles);
             styleSettingsStore.setTextStyles(brandPageModel.styles.textStyles);
             styleSettingsStore.setGalleryStyles(brandPageModel.styles.galleryStyles);
-            styleSettingsStore.setNewColors({
-                newColors: brandPageModel.styles.newColors || [],
-            });
             if (!userStore.isAdmin) {
                 containerStore.setDesignTemplateToken({
                     designTemplateToken: this.selectedTemplateId,
@@ -344,7 +340,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             this.setSelectedTemplateId({
                 templateId: payload.templateId,
             });
-            if (this.isModifiedAfterTemplateApplied) {
+            if (this.isModifiedAfterTemplateApplied && !payload.forceApply) {
                 this.setIsChangeTemplateConfirmModalVisible({
                     isVisible: true,
                 });
@@ -433,38 +429,17 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                     : undefined;
                 if (!this.isUserDraft && userPersonalisation) {
                     const { model } = await applyUserPersonalisationToBrandPageModelAsync(userPersonalisation, new BrandPageModel(brandPageModel));
-                    // Preserve newColors before overwriting styles
-                    const originalNewColors = brandPageModel.styles.newColors;
                     brandPageModel.styles = model.styles;
                     brandPageModel.pages = model.pages;
-                    // Restore newColors if they were lost in the transformation
-                    if (originalNewColors &&
-                        (!brandPageModel.styles.newColors ||
-                            (Array.isArray(brandPageModel.styles.newColors) &&
-                                brandPageModel.styles.newColors.length === 0))) {
-                        brandPageModel.styles.newColors = originalNewColors;
-                    }
                 }
                 if (!userStore.isAdmin) {
                     const { model } = applyLogoThemeToBrandPageModel(logoTheme, new BrandPageModel(brandPageModel));
-                    // Preserve newColors before overwriting styles
-                    const originalNewColors = brandPageModel.styles.newColors;
                     brandPageModel.styles = model.styles;
                     brandPageModel.pageHeaderMobile = model.pageHeaderMobile;
                     brandPageModel.pageHeaderDesktop = model.pageHeaderDesktop;
                     brandPageModel.pageFooterMobile = model.pageFooterMobile;
                     brandPageModel.pageFooterDesktop = model.pageFooterDesktop;
                     brandPageModel.pages = model.pages;
-                    // Restore newColors if they were lost in the transformation
-                    if (originalNewColors &&
-                        (!brandPageModel.styles.newColors ||
-                            (Array.isArray(brandPageModel.styles.newColors) &&
-                                brandPageModel.styles.newColors.length === 0) ||
-                            (typeof brandPageModel.styles.newColors === 'object' &&
-                                !Array.isArray(brandPageModel.styles.newColors) &&
-                                Object.keys(brandPageModel.styles.newColors).length === 0))) {
-                        brandPageModel.styles.newColors = originalNewColors;
-                    }
                 }
                 styleSettingsStore.initialise({
                     reset: false,
@@ -574,14 +549,13 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                     },
                 };
                 backgroundSettingsStore.setState(backgroundSetStatePayload);
-                const { buttonStyles, logoStyles, textStyles, galleryStyles, newColors, } = brandPageModel.styles;
+                const { buttonStyles, logoStyles, textStyles, galleryStyles } = brandPageModel.styles;
                 styleSettingsStore.setState({
                     newState: {
                         buttonStyles,
                         logoStyles,
                         textStyles,
                         galleryStyles,
-                        newColors: Array.isArray(newColors) ? newColors : [],
                     },
                 });
                 navigationStyleSettingsStore.setState({
@@ -790,7 +764,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             const buttonStyles = styleSettingsStore.buttonStyles;
             const textStyles = styleSettingsStore.textStyles;
             const galleryStyles = styleSettingsStore.galleryStyles;
-            const newColors = styleSettingsStore.newColors;
             const navigation = navigationStyleSettingsStore.navigation;
             return {
                 v: GetLatestModelVersion(),
@@ -801,7 +774,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                     backgroundStyles,
                     textStyles,
                     galleryStyles,
-                    newColors,
                 },
                 pageHeaderDesktop: Object.assign({}, pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.desktop], { navigation: navigation[PAGE_SECTIONS.header][VIEWPORTS.desktop] }),
                 pageHeaderMobile: Object.assign({}, pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.mobile], { navigation: navigation[PAGE_SECTIONS.header][VIEWPORTS.mobile] }),
@@ -847,7 +819,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
             const buttonStyles = styleSettingsStore.buttonStyles;
             const textStyles = styleSettingsStore.textStyles;
             const galleryStyles = styleSettingsStore.galleryStyles;
-            const newColors = styleSettingsStore.newColors;
             const navigation = navigationStyleSettingsStore.navigation;
             return {
                 v: GetLatestModelVersion(),
@@ -857,7 +828,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                     backgroundStyles,
                     textStyles,
                     galleryStyles,
-                    newColors,
                 },
                 pageHeaderMobile: Object.assign({}, pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.mobile], {
                     navigation: navigation[PAGE_SECTIONS.header][VIEWPORTS.mobile],

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

@@ -1,3 +1,4 @@
+import type { LogoTemplate } from '../../../clients/brand-page-client';
 export interface LogoTemplateAsset {
     token: string;
     version: number;
@@ -13,6 +14,15 @@ export interface LogoDraftAsset {
 export interface LogoStoreState {
     logoTemplateAsset?: LogoTemplateAsset;
     logoDraftAssets: LogoDraftAsset[];
+    logoSearchState: {
+        primaryText: string;
+        searchText: string;
+        currentPage: number;
+        isSearching: boolean;
+        logoTemplates: LogoTemplate[];
+        totalResultCount: number;
+        hasMore: boolean;
+    };
 }
 export declare const useLogoStore: import("pinia").StoreDefinition<"logoStore", LogoStoreState, {}, {
     initialise(payload: {
@@ -24,4 +34,10 @@ export declare const useLogoStore: import("pinia").StoreDefinition<"logoStore",
         logoDraftAsset: LogoDraftAsset;
     }): void;
     getLogoDraftAssetByToken(token: string): LogoDraftAsset | undefined;
+    resetLogoTemplateSearchResults(): void;
+    searchLogoTemplatesAsync(payload: {
+        searchText: string;
+        primaryText: string;
+        page: number;
+    }): Promise<void>;
 }>;

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

@@ -1,8 +1,18 @@
 import { defineStore } from 'pinia';
+import brandPageClient from '../../../clients/brand-page-client';
 export const useLogoStore = defineStore('logoStore', {
     state: () => ({
         logoTemplateAsset: undefined,
         logoDraftAssets: [],
+        logoSearchState: {
+            primaryText: '',
+            searchText: '',
+            currentPage: 1,
+            isSearching: false,
+            logoTemplates: [],
+            totalResultCount: 0,
+            hasMore: false,
+        },
     }),
     actions: {
         initialise(payload) {
@@ -21,5 +31,39 @@ export const useLogoStore = defineStore('logoStore', {
         getLogoDraftAssetByToken(token) {
             return this.logoDraftAssets.find((x) => x.token === token);
         },
+        resetLogoTemplateSearchResults() {
+            this.logoSearchState.logoTemplates = [];
+            this.logoSearchState.currentPage = 1;
+            this.logoSearchState.totalResultCount = 0;
+            this.logoSearchState.hasMore = false;
+        },
+        async searchLogoTemplatesAsync(payload) {
+            this.logoSearchState.isSearching = true;
+            try {
+                const response = await brandPageClient.searchLogoTemplatesAsync({
+                    businessName: payload.primaryText,
+                    query: payload.searchText,
+                    page: payload.page,
+                    pageSize: 20,
+                });
+                this.logoSearchState.logoTemplates = [
+                    ...this.logoSearchState.logoTemplates,
+                    ...(response?.paginatedItems || []),
+                ];
+                this.logoSearchState.primaryText = payload.primaryText;
+                this.logoSearchState.searchText = payload.searchText;
+                this.logoSearchState.currentPage = payload.page;
+                this.logoSearchState.totalResultCount = response?.totalResultCount || 0;
+            }
+            catch (e) {
+                console.error('Error searching logo templates:', e);
+            }
+            finally {
+                this.logoSearchState.hasMore =
+                    this.logoSearchState.totalResultCount >
+                        this.logoSearchState.logoTemplates.length;
+                this.logoSearchState.isSearching = false;
+            }
+        },
     },
 });

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

@@ -1,4 +1,5 @@
 import type { Endpoints, UiDeviceMode, UIRootState, UIRootStateThirdPartySettings, UiScreenSizeMode } from '../../../shared/models';
+import { type OnTemplateSelectedPayload } from '../brandpage-maker';
 import type { LogoTheme, UserPersonalisationContent } from '../../../brand-page';
 export declare const useUiStore: import("pinia").StoreDefinition<"ui", UIRootState, {
     endpoints: () => Endpoints;
@@ -35,9 +36,7 @@ export declare const useUiStore: import("pinia").StoreDefinition<"ui", UIRootSta
     /**
      * Proxy method to propagate template selection event to style settings store module
      */
-    onTemplateSelected(payload: {
-        templateId: string;
-    }): Promise<void>;
+    onTemplateSelected(payload: OnTemplateSelectedPayload): Promise<void>;
     showUpgradeModalAndSaveAsync(): Promise<void>;
     setIsPersonalisationEnabled({ isPersonalisationEnabled, }: {
         isPersonalisationEnabled: boolean;

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

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import { UI_DEVICE_MODES, UI_SCREENSIZE_MODES } from '../../../shared/models';
 import { DEFAULT_LOGO_BACKGROUND_COLOR_RGB, DEFAULT_LOGO_TEXT_COLOR_RGB, } from '../../../brand-page/constants';
-import { useBrandPageMakerStore } from '../brandpage-maker';
+import { useBrandPageMakerStore, } from '../brandpage-maker';
 import { useBrandPageMakerUserStore } from '../user';
 import { useBrandPageContainerStore } from '../brandpage-container';
 import { DEFAULT_ADMIN_ENDPOINTS, DEFAULT_USER_ENDPOINTS, } from '../../constants';