@designcrowd/library.brand-page 6.2.16 → 6.2.17-header-logo-2

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

@@ -32,13 +32,77 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: true;
     };
 }>, {
+    eventTracker: {
+        sendShippingToggleEvent: (isEnabled: boolean) => void;
+        sendPreviewClickEvent: (ctaLocation: string) => void;
+        sendPreviewModalOpenEvent: (ctaLocation: string) => void;
+        sendPreviewModalContinuationEvent: (continuation: string, ctaLocation: string) => void;
+        sendUndoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendRedoEvent: (props: {
+            entries_count: number;
+            actor: string | undefined;
+        }) => void;
+        sendHistoryCappedEvent: (props: {
+            entries_count: number;
+            size_bytes: number;
+        }) => void;
+        sendHistoryOversizedEvent: (props: {
+            attempted_bytes: number;
+            source: string;
+        }) => void;
+        sendWebsiteMakerUpdateHeaderLogoEvent: (props: {
+            setting: string;
+            viewport: string;
+        }) => void;
+        sendSaveContactEvent: () => void;
+        sendStartForFreeEvent: () => void;
+        sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;
+        sendGettyVideoAddEvent: () => void;
+        sendGettyVideoReplaceEvent: () => void;
+        sendGettyVideoRemoveEvent: () => void;
+        sendExperimentStartedEvent: (abTestKey: string, abTestValue: string) => void;
+        setGlobalEventProps: (props: Omit<import("@brand-page-maker/composables/useEventTracker").BpGlobalEventProps, "template_category">) => void;
+        setCustomGlobalEventProps: (props: any) => void;
+        setUpsellBridgeState: (props: import("@brand-page-maker/composables/useEventTracker").BpUpsellEventProps) => void;
+        setDomainUpsellBridgeState: (props: import("@brand-page-maker/composables/useEventTracker").BpUpsellEventProps) => void;
+        subscribe: (callbackFn: (event: import("@brand-page-maker/composables/useEventTracker").BpEventTrackerEvent) => void) => void;
+        sendWebsiteEvent: (event: import("@brand-page-maker/composables/useEventTracker").BpEventTrackerEvent) => void;
+        sendWebsiteMakerOpenEvent: (location: string) => void;
+        sendUpsellOpenEvent: (cta_location?: string) => void;
+        sendDomainUpsellOpenEvent: () => void;
+        sendDomainUpsellContinuationEvent: (continuation: string) => void;
+        sendUpsellContinuationEvent: (continuation: string) => void;
+        sendPublishOpenEvent: () => void;
+        appendPublishBridgeState: (props: any) => void;
+        sendPublishContinuationEvent: (continuation: string, domain: string | null) => void;
+        sendWebsiteManageAddPageEvent: (pageName: string, isSubPageMode?: boolean) => void;
+        sendWebsiteManageRemovePageEvent: (pageName: string, isRouteNested?: boolean) => void;
+        sendWebsiteManageReorderPageEvent: (pageName: string) => void;
+        sendWebsiteManageDuplicatePageEvent: (sourcePageName: string, isSubPage?: boolean) => void;
+        sendPublishOptionsForFreeEvent: () => void;
+        sendPublishOptionsForPremiumEvent: () => void;
+        sendPublishOptionsForExitEvent: () => void;
+        sendTemplateSearchEvent: (searchString: string) => void;
+        sendTemplateSelectEvent: (templateId: string) => void;
+        sendTemplateCategorySelectEvent: (category: string) => void;
+        sendSidebarCategoryClickedEvent: (tabName: string) => void;
+        sendAddContentEvent: (contentType: string, selectLocation?: string, contentCategory?: string, triggerType?: string) => void;
+        sendRemoveContentEvent: (contentType: string, selectLocation?: string, contentCategory?: string, triggerType?: string) => void;
+        sendAddContentContinuationEvent: (continuation: string) => void;
+        sendUpsellOfferEvent: (upsellType: string) => void;
+        sendUpsellOfferActionEvent: (upsellType: string, action: string) => void;
+        sendAiSendPromptEvent: (ctaLocation: string) => void;
+        sendAiStopGenerationEvent: (ctaLocation: string) => void;
+    };
     sections: import("vue").ComputedRef<{
         header: {
             desktop: {
                 displayStyle: HeaderDisplayStyle;
                 navigationStyles?: {
                     displayType: NavigationDisplayType;
-                    renderAfterLogo: boolean;
                     defaultButtonStyle: {
                         aspectRatio?: string | undefined;
                         backgroundAttachment?: string | undefined;
@@ -327,7 +391,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     viewport: ViewportsType;
                 } | {
                     displayType: NavigationDisplayType;
-                    renderAfterLogo: boolean;
                     defaultButtonStyle: {
                         aspectRatio?: string | undefined;
                         backgroundAttachment?: string | undefined;
@@ -617,7 +680,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 } | undefined;
                 navigation: {
                     displayType: NavigationDisplayType;
-                    renderAfterLogo: boolean;
                     defaultButtonStyle: {
                         aspectRatio?: string | undefined;
                         backgroundAttachment?: string | undefined;
@@ -906,7 +968,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     viewport: ViewportsType;
                 } | {
                     displayType: NavigationDisplayType;
-                    renderAfterLogo: boolean;
                     defaultButtonStyle: {
                         aspectRatio?: string | undefined;
                         backgroundAttachment?: string | undefined;
@@ -1410,12 +1471,57 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     fillColor?: string | undefined;
                     borderColor?: string | undefined;
                 } | undefined;
+                logoBackgroundStyle?: {
+                    aspectRatio?: string | undefined;
+                    backgroundAttachment?: string | undefined;
+                    background?: string | undefined;
+                    backgroundColor?: string | undefined;
+                    backgroundImage?: string | undefined;
+                    backgroundPosition?: string | undefined;
+                    backgroundRepeat?: string | undefined;
+                    backgroundSize?: string | undefined;
+                    border?: string | undefined;
+                    borderBottomWidth?: string | undefined;
+                    borderColor?: string | undefined;
+                    borderLeftWidth?: string | undefined;
+                    borderRadius?: string | undefined;
+                    borderRightWidth?: string | undefined;
+                    borderStyle?: string | undefined;
+                    borderTopWidth?: string | undefined;
+                    borderWidth?: string | undefined;
+                    boxShadow?: string | undefined;
+                    color?: string | undefined;
+                    fill?: string | undefined;
+                    fontFamily?: string | undefined;
+                    fontStyle?: string | undefined;
+                    fontSize?: string | undefined;
+                    fontWeight?: string | undefined;
+                    height?: string | undefined;
+                    left?: string | undefined;
+                    letterSpacing?: string | undefined;
+                    lineHeight?: string | undefined;
+                    marginBottom?: string | undefined;
+                    maxWidth?: string | undefined;
+                    opacity?: string | undefined;
+                    overflow?: string | undefined;
+                    overflowWrap?: string | undefined;
+                    paddingTop?: string | undefined;
+                    position?: string | undefined;
+                    textAlign?: string | undefined;
+                    textAlignLast?: string | undefined;
+                    textDecoration?: string | undefined;
+                    top?: string | undefined;
+                    transform?: string | undefined;
+                    transformOrigin?: string | undefined;
+                    transition?: string | undefined;
+                    width?: string | undefined;
+                    wordBreak?: string | undefined;
+                } | undefined;
             };
             mobile: {
                 displayStyle: HeaderDisplayStyle;
                 navigationStyles?: {
                     displayType: NavigationDisplayType;
-                    renderAfterLogo: boolean;
                     defaultButtonStyle: {
                         aspectRatio?: string | undefined;
                         backgroundAttachment?: string | undefined;
@@ -1704,7 +1810,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     viewport: ViewportsType;
                 } | {
                     displayType: NavigationDisplayType;
-                    renderAfterLogo: boolean;
                     defaultButtonStyle: {
                         aspectRatio?: string | undefined;
                         backgroundAttachment?: string | undefined;
@@ -1994,7 +2099,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 } | undefined;
                 navigation: {
                     displayType: NavigationDisplayType;
-                    renderAfterLogo: boolean;
                     defaultButtonStyle: {
                         aspectRatio?: string | undefined;
                         backgroundAttachment?: string | undefined;
@@ -2283,7 +2387,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     viewport: ViewportsType;
                 } | {
                     displayType: NavigationDisplayType;
-                    renderAfterLogo: boolean;
                     defaultButtonStyle: {
                         aspectRatio?: string | undefined;
                         backgroundAttachment?: string | undefined;
@@ -2787,6 +2890,52 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     fillColor?: string | undefined;
                     borderColor?: string | undefined;
                 } | undefined;
+                logoBackgroundStyle?: {
+                    aspectRatio?: string | undefined;
+                    backgroundAttachment?: string | undefined;
+                    background?: string | undefined;
+                    backgroundColor?: string | undefined;
+                    backgroundImage?: string | undefined;
+                    backgroundPosition?: string | undefined;
+                    backgroundRepeat?: string | undefined;
+                    backgroundSize?: string | undefined;
+                    border?: string | undefined;
+                    borderBottomWidth?: string | undefined;
+                    borderColor?: string | undefined;
+                    borderLeftWidth?: string | undefined;
+                    borderRadius?: string | undefined;
+                    borderRightWidth?: string | undefined;
+                    borderStyle?: string | undefined;
+                    borderTopWidth?: string | undefined;
+                    borderWidth?: string | undefined;
+                    boxShadow?: string | undefined;
+                    color?: string | undefined;
+                    fill?: string | undefined;
+                    fontFamily?: string | undefined;
+                    fontStyle?: string | undefined;
+                    fontSize?: string | undefined;
+                    fontWeight?: string | undefined;
+                    height?: string | undefined;
+                    left?: string | undefined;
+                    letterSpacing?: string | undefined;
+                    lineHeight?: string | undefined;
+                    marginBottom?: string | undefined;
+                    maxWidth?: string | undefined;
+                    opacity?: string | undefined;
+                    overflow?: string | undefined;
+                    overflowWrap?: string | undefined;
+                    paddingTop?: string | undefined;
+                    position?: string | undefined;
+                    textAlign?: string | undefined;
+                    textAlignLast?: string | undefined;
+                    textDecoration?: string | undefined;
+                    top?: string | undefined;
+                    transform?: string | undefined;
+                    transformOrigin?: string | undefined;
+                    transition?: string | undefined;
+                    width?: string | undefined;
+                    wordBreak?: string | undefined;
+                } | undefined;
             };
         };
         footer: {
@@ -3410,7 +3559,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         subNavBackgroundColor?: string | undefined;
         displayType: NavigationDisplayType;
-        renderAfterLogo: boolean;
     }[]>;
     pageSettingsStore: import("pinia").Store<"uiPageSettings", import("../../store").PageSettingsState, {
         canAddPage(): boolean;
@@ -3553,11 +3701,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setState({ newState, }: {
             newState: Omit<import("../../../navigation-style-settings/store").NavigationStyleSettingsState, "availableNavigationStyleConfigs" | "navigationStyleTypeConfigs">;
         }): void;
-        setNavigationOrder({ section, renderAfterLogo, viewport, }: {
-            section: PageSection;
-            renderAfterLogo: boolean;
-            viewport: ViewportsType;
-        }): void;
         _setDefaultButtonStyle({ displayType, section, style, viewport, ownsTypography, }: {
             displayType: NavigationDisplayType;
             section: PageSection;
@@ -4032,6 +4175,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             id: string;
             name: string;
             index?: number;
+            itemId?: string;
             doc: unknown;
         }): void;
         applyCardContrastToItem({ id }: {
@@ -4829,7 +4973,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     viewports: any[];
 }, {
-    isRenderAfterLogo(): any;
     navigation(): NavigationDesktop | NavigationMobile;
     header(): PageHeaderDesktop | PageHeaderMobile;
     headerButton(): HeaderButton | undefined;
@@ -4838,7 +4981,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     footer(): PageFooterDesktop | PageFooterMobile;
     showDeviceWarning(): boolean;
     showFooterDisplayStyle(): boolean;
-    showNavigationBelowLogoOption(): boolean;
+    isHamburgerViewport(): boolean;
+    logoBackgroundColor(): string;
+    showLogoBackgroundColorField(): boolean;
     logoImageHeight(): number;
     logoSliderMin(): number;
     logoSliderMax(): number;
@@ -4873,7 +5018,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isHeader(): boolean;
     isFooter(): boolean;
 }, {
-    toggleShowNavigationBelowLogo(): void;
+    trackHeaderLogoChange(setting: string): void;
     handleSelectViewport(viewport: ViewportsType): void;
     findSelectedViewport(): any;
     handleHeaderDisplayStyleChange(displayStyle: HeaderDisplayStyle): void;
@@ -4899,6 +5044,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }): void;
     onSelectColor(selectedColor: UpdateItemValuePayload<string>): void;
     onBackgroundOpacityChange(value: number | string): void;
+    onHeaderBackgroundColorChange(selectedColor: UpdateItemValuePayload<string>): void;
+    onHeaderBackgroundOpacityChange(value: number | string): void;
+    onLogoBackgroundColorChange(selectedColor: UpdateItemValuePayload<string>): void;
     onBackgroundEnable(enabled: UpdateItemValuePayload<boolean>): void;
     onLogoVisibleChanged(showLogo: boolean): void;
     onLogoVariationSelected(selectedLogoVariationIndex: number): void;

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

@@ -1,7 +1,7 @@
 import { defineComponent, computed } from 'vue';
 import { PAGE_SECTION_STYLE_OPTIONS } from '@brand-page-maker/models/page-section-style.model';
 import { PAGE_SECTIONS } from '../../models';
-import { BUTTON_LINK_TYPE, LOGO_SLIDER_DESKTOP_MAX, LOGO_SLIDER_DESKTOP_MIN, LOGO_SLIDER_MOBILE_MAX, LOGO_SLIDER_MOBILE_MIN, VIEWPORTS, getNavigationType, NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE, } from '@brand-page';
+import { BUTTON_LINK_TYPE, HEADER_DISPLAY, LOGO_SLIDER_DESKTOP_MAX, LOGO_SLIDER_DESKTOP_MIN, LOGO_SLIDER_MOBILE_MAX, LOGO_SLIDER_MOBILE_MIN, STACKED_LOGO_LAYOUTS, VIEWPORTS, getNavigationType, NAVIGATION_TYPE_DEFAULT_DISPLAY_TYPE, } from '@brand-page';
 import { UI_DEVICE_MODES, UI_EVENT_SOURCES } from '../../../models';
 import { isTransparentColour } from '@brand-page/utils/color.util';
 import { omitTypography } from '@brand-page/utils/text-style.util';
@@ -15,6 +15,7 @@ import { useUiEditableLogoStore, useUiLogoSettingsStore, } from '@shared/logo-se
 import { FabricRenderClient } from '../../../../clients/fabric-render-client';
 import { parseLogoThemeToCssStyles } from '@brand-page/utils';
 import { commonTr, pageSettingsSectionTr } from '@src/composables/useTranslate';
+import { useEventTracker } from '@brand-page-maker/composables/useEventTracker';
 // Starting values for a brand-new button; real "Contact Us" text so the label is never empty.
 const newHeaderButton = () => ({
     isVisible: false,
@@ -70,7 +71,9 @@ export default defineComponent({
         const containerStore = useBrandPageContainerStore();
         const logoStore = useLogoStore();
         const editableLogoStore = useUiEditableLogoStore();
+        const eventTracker = useEventTracker();
         return {
+            eventTracker,
             sections: computed(() => pageSettingsStore.sections),
             availableTextFontFamilyOptions: computed(() => styleSettingsStore.availableTextFontFamilyOptions),
             availableNavigationStyleConfigs: computed(() => navigationStyleSettingsStore.availableNavigationStyleConfigs),
@@ -95,9 +98,6 @@ export default defineComponent({
         };
     },
     computed: {
-        isRenderAfterLogo() {
-            return this.navigation.renderAfterLogo;
-        },
         navigation() {
             const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
             if (this.viewport === VIEWPORTS.mobile) {
@@ -129,11 +129,15 @@ export default defineComponent({
         showFooterDisplayStyle() {
             return this.viewport !== VIEWPORTS.mobile;
         },
-        showNavigationBelowLogoOption() {
-            return (this.sectionName === PAGE_SECTIONS.header &&
-                !this.navigation.displayType.includes('hamburger') &&
-                this.contentSettingsStore.items[0]?.type === 'logo' &&
-                this.contentSettingsStore.items[0]?.settings.content.isLogoVisible);
+        isHamburgerViewport() {
+            return this.navigation.displayType.includes('hamburger');
+        },
+        // Header-only (`logoBackgroundStyle` isn't on a footer section's type).
+        logoBackgroundColor() {
+            return this.header.logoBackgroundStyle?.backgroundColor || '';
+        },
+        showLogoBackgroundColorField() {
+            return STACKED_LOGO_LAYOUTS.includes(this.header.displayStyle);
         },
         logoImageHeight() {
             return this.sections[this.sectionName][this.viewport].logoImageHeight;
@@ -267,10 +271,14 @@ export default defineComponent({
         },
     },
     methods: {
-        toggleShowNavigationBelowLogo() {
-            this.navigationStyleSettingsStore.setNavigationOrder({
-                section: PAGE_SECTIONS.header,
-                renderAfterLogo: !this.isRenderAfterLogo,
+        // Header logo and header background settings are BP/BC/BS-wide, but the event is
+        // BP/BC only, and only for the header, never the footer or a logo content block.
+        trackHeaderLogoChange(setting) {
+            if (!this.isHeader || this.isBrandSite) {
+                return;
+            }
+            this.eventTracker.sendWebsiteMakerUpdateHeaderLogoEvent({
+                setting,
                 viewport: this.viewport,
             });
         },
@@ -385,6 +393,7 @@ export default defineComponent({
                 logoImageWidth: value,
                 logoImageBase64Url: this.logoImageBase64Url,
             });
+            this.trackHeaderLogoChange('logoSize');
         },
         onSocialLinksChange(value) {
             this.pageSettingsStore.setPageSettingsSectionValue({
@@ -411,6 +420,9 @@ export default defineComponent({
                 viewport: this.viewport,
             });
         },
+        // Tracking lives in each caller, not here: the logoDraftToken/logoImageBase64Url
+        // computed setters also route through this method, so a call here would double-count
+        // a version change that both assigns a setter and calls this directly.
         updateLogo({ logoDraftToken, logoVariation, logoLastUpdate, logoImageBase64Url, }) {
             let logoImage = this.sections[this.sectionName][this.viewport].logoImage;
             logoImage = Object.assign({}, this.sections[this.sectionName][this.viewport].logoImage, {
@@ -459,6 +471,21 @@ export default defineComponent({
                 viewport: this.viewport,
             });
         },
+        // Header-only wrappers: the Header Settings panel's own background and
+        // logo-background colour fields, tracked distinctly from a footer's or a logo
+        // content block's otherwise-identical onSelectColor/onBackgroundOpacityChange calls.
+        onHeaderBackgroundColorChange(selectedColor) {
+            this.onSelectColor(selectedColor);
+            this.trackHeaderLogoChange('backgroundColor');
+        },
+        onHeaderBackgroundOpacityChange(value) {
+            this.onBackgroundOpacityChange(value);
+            this.trackHeaderLogoChange('backgroundOpacity');
+        },
+        onLogoBackgroundColorChange(selectedColor) {
+            this.onSelectColor(selectedColor);
+            this.trackHeaderLogoChange('logoBackgroundColor');
+        },
         onBackgroundEnable(enabled) {
             this.pageSettingsStore.setPageSettingsSectionValue({
                 sectionName: this.sectionName,
@@ -475,6 +502,18 @@ export default defineComponent({
         },
         onLogoVisibleChanged(showLogo) {
             this.isLogoVisible = showLogo;
+            // BP/BC header: migration-23 can leave a hidden logo's viewport on a no-logo
+            // layout, which has no logo slot to draw into — switch it to the stacked layout
+            // that the Logo section itself offers, same as a manual layout change.
+            if (showLogo &&
+                this.isHeader &&
+                !this.isBrandSite &&
+                this.header.displayStyle.includes('no-logo')) {
+                this.handleHeaderDisplayStyleChange(this.viewport === VIEWPORTS.mobile
+                    ? HEADER_DISPLAY.MOBILE_TAB_1
+                    : HEADER_DISPLAY.DESKTOP_TAB_5);
+            }
+            this.trackHeaderLogoChange('logoVisible');
         },
         onLogoVariationSelected(selectedLogoVariationIndex) {
             const logoDraftAsset = this.logoStore.getLogoDraftAssetByToken(this.logoDraftToken);
@@ -490,6 +529,7 @@ export default defineComponent({
                     logoVariation: selectedLogoVariationIndex,
                 });
             }
+            this.trackHeaderLogoChange('logoVariation');
         },
         onEditableLogoVariationSelected(selectedLogoVariationBase64) {
             const logoVariation = this.editableLogoStore.editableLogoVariations.find((x, i) => x.base64 === selectedLogoVariationBase64.selectedLogoBase64 &&
@@ -502,12 +542,16 @@ export default defineComponent({
                     logoVariation: logoVariation.variationId,
                     logoImageBase64Url: selectedLogoVariationBase64.selectedLogoBase64,
                 });
+                this.trackHeaderLogoChange('logoVariation');
             }
         },
         async onLogoVersionSelected(selectedLogoVersion) {
             const uiStore = useUiStore();
             const _brandPageMakerStore = useBrandPageMakerStore();
+            // The setter above already writes the token; track once here rather than
+            // again from the updateLogo call below, which only refines the same change.
             this.logoDraftToken = selectedLogoVersion.token;
+            this.trackHeaderLogoChange('logoVariation');
             const logoDraftAsset = this.logoStore.getLogoDraftAssetByToken(this.logoDraftToken);
             if (logoDraftAsset) {
                 this.updateLogo({

package/lib/src/shared/page-settings/store/page-settings-store.js

@@ -9,7 +9,6 @@ import { navigateToPageByPageId } from '@brand-page-maker/routing';
 import { getPageSlugFromPageTitle } from '@brand-page-maker/utils';
 import { useUiContentSettingsStore } from '../../content-settings/store';
 import { useBrandPageMakerStore, useBrandPageMakerUserStore, useBrandPageContainerStore, useUiStore, } from '@brand-page-maker/stores';
-import { useUiLogoSettingsStore } from '../../logo-settings/store';
 import { TRIGGER_TYPE, UPGRADE_CTA_LOCATIONS, useEventTracker, } from '@brand-page-maker/composables/useEventTracker';
 import { useShopConfigStore } from '../../ecommerce-settings/store/shop-settings-store';
 import { WEBSITE_UPGRADE_CONTEXT_TYPES } from '@designcrowd/fe-shared-lib';
@@ -290,8 +289,6 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
             navigateToPageByPageId(activePageId);
         },
         addNewPage(payload) {
-            const logoSettingsStore = useUiLogoSettingsStore();
-            const brandPageMakerStore = useBrandPageMakerStore();
             const pageNavigationStore = usePageNavigationStore();
             const newPage = { id: uuid(), title: payload.title, contents: [] };
             // Insert new page after the non-hidden page
@@ -311,9 +308,6 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
                 displayName: newPage.title,
             };
             pageNavigationStore.addNavRoute(newRoute, parentRouteId);
-            if (brandPageMakerStore.isBrandPageOrIsBrandContact) {
-                logoSettingsStore.addDefaultLogoContentToCurrentPage();
-            }
             return newPage;
         },
         async duplicatePage({ pageId, }) {

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

@@ -574,6 +574,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             attempted_bytes: number;
             source: string;
         }) => void;
+        sendWebsiteMakerUpdateHeaderLogoEvent: (props: {
+            setting: string;
+            viewport: string;
+        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/side-bar/components/SideBarTabButton.mixin.d.ts

@@ -37,6 +37,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             attempted_bytes: number;
             source: string;
         }) => void;
+        sendWebsiteMakerUpdateHeaderLogoEvent: (props: {
+            setting: string;
+            viewport: string;
+        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

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

@@ -1068,6 +1068,10 @@ declare const _default: import("vue").DefineComponent<{}, {
             attempted_bytes: number;
             source: string;
         }) => void;
+        sendWebsiteMakerUpdateHeaderLogoEvent: (props: {
+            setting: string;
+            viewport: string;
+        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/template-settings/components/TemplatesSettings.mixin.d.ts

@@ -151,6 +151,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             attempted_bytes: number;
             source: string;
         }) => void;
+        sendWebsiteMakerUpdateHeaderLogoEvent: (props: {
+            setting: string;
+            viewport: string;
+        }) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/template-settings/store/template-settings-store.js

@@ -136,6 +136,7 @@ export const useUiTemplateSettingsStore = defineStore('uiTemplateSettings', {
                     },
                     isUserDraft: false,
                     isServerRender: false,
+                    isTemplate: true,
                 });
                 const uiStore = useUiStore();
                 const personalisationContentIndex = uiStore.personalisationData

package/lib/src/shield-tick-CJu2w7jV.js

@@ -0,0 +1,13 @@
+import { openBlock as C, createElementBlock as e } from "vue";
+import { _ as o } from "./lib-3Hnr9X6L.js";
+const t = {}, c = {
+  d: "M12.5837 4.81128C12.5837 4.21729 12.5719 4.11868 12.5456 4.04956C12.5119 3.96109 12.4564 3.88266 12.3854 3.82007C12.3299 3.77117 12.2424 3.72494 11.6862 3.51636L8.11101 2.17554C8.07578 2.16233 8.04852 2.15286 8.02507 2.14429C8.01522 2.14069 8.00685 2.13706 7.99968 2.13452C7.99266 2.13701 7.98481 2.1408 7.97527 2.14429C7.9517 2.1529 7.92384 2.16223 7.88835 2.17554L4.31413 3.51636C3.75767 3.72503 3.66943 3.77116 3.61394 3.82007C3.54313 3.88259 3.48839 3.96129 3.45476 4.04956C3.42846 4.11868 3.41668 4.21729 3.41667 4.81128V7.99976C3.41667 9.3566 4.16012 10.5923 5.15495 11.6287C6.14141 12.6563 7.29201 13.4003 7.91277 13.7625C7.95012 13.7842 7.97682 13.7994 7.99968 13.8123C8.0227 13.7993 8.04982 13.7845 8.08757 13.7625C8.70836 13.4003 9.8589 12.6564 10.8454 11.6287C11.8402 10.5923 12.5837 9.3566 12.5837 7.99976V4.81128ZM9.80339 5.46948C10.0963 5.17687 10.5711 5.17668 10.8639 5.46948C11.1567 5.76228 11.1565 6.23713 10.8639 6.53003L7.86394 9.53003C7.72336 9.6706 7.53246 9.74967 7.33366 9.74976C7.13477 9.74976 6.94404 9.67065 6.80339 9.53003L5.46941 8.19702C5.1767 7.90419 5.17676 7.42934 5.46941 7.13647C5.76226 6.84362 6.23705 6.8437 6.52995 7.13647L7.33269 7.93921L9.80339 5.46948ZM14.0837 7.99976C14.0837 9.91521 13.0419 11.5067 11.9274 12.6677C10.8048 13.8372 9.52137 14.6618 8.84343 15.0574C8.71957 15.1296 8.54012 15.2426 8.29753 15.2947C8.11304 15.3342 7.88729 15.3342 7.7028 15.2947C7.46005 15.2426 7.28081 15.1297 7.15691 15.0574C6.47906 14.6619 5.19566 13.8373 4.07292 12.6677C2.95843 11.5067 1.91667 9.91521 1.91667 7.99976V4.4646C1.9203 4.12537 1.94148 3.80797 2.05241 3.51636C2.17274 3.20015 2.3689 2.91779 2.62273 2.69409C2.93499 2.419 3.34627 2.27762 3.78777 2.11206L7.36198 0.77124C7.47044 0.73057 7.62746 0.667886 7.79753 0.643311L7.99968 0.628662L8.2028 0.643311L8.32683 0.667725C8.44787 0.697738 8.55694 0.740711 8.63835 0.77124L12.2126 2.11206C12.6541 2.27763 13.0654 2.41893 13.3776 2.69409C13.6314 2.91777 13.8266 3.20018 13.9469 3.51636C14.0949 3.90527 14.0837 4.33983 14.0837 4.81128V7.99976Z",
+  "fill-rule": "evenodd"
+};
+function r(n, L) {
+  return C(), e("path", c);
+}
+const d = /* @__PURE__ */ o(t, [["render", r]]);
+export {
+  d as default
+};

package/lib/src/shop-BICCwqjA.js

@@ -0,0 +1,13 @@
+import { openBlock as C, createElementBlock as e } from "vue";
+import { _ as o } from "./lib-3Hnr9X6L.js";
+const r = {}, t = {
+  d: "M14.6597 4.6956C15.0524 5.29965 15.1052 5.94146 14.8183 6.62103C14.5314 7.30059 14.033 7.68568 13.3232 7.77628C13.2175 7.79139 13.1118 7.79894 13.0061 7.79894C12.3417 7.79894 11.7905 7.54976 11.3525 7.05142C10.8995 7.54976 10.3407 7.79894 9.67626 7.79894C9.01179 7.79894 8.45304 7.54976 8 7.05142C7.54696 7.54976 6.98821 7.79894 6.32375 7.79894C5.65928 7.79894 5.10053 7.54976 4.64749 7.05142C4.20955 7.54976 3.6508 7.79894 2.97124 7.79894C2.88063 7.79894 2.78247 7.79139 2.67676 7.77628C1.96699 7.68568 1.46865 7.30059 1.18172 6.62103C0.894794 5.94146 0.947649 5.29965 1.34028 4.6956L2.81267 2.33978C2.94858 2.11326 3.15245 2 3.42428 2H12.5757C12.8475 2 13.0514 2.11326 13.1873 2.33978L14.6597 4.6956ZM13.0288 8.5238C13.1647 8.5238 13.3006 8.51625 13.4365 8.50115C13.5422 8.48605 13.663 8.45585 13.7989 8.41054V12.873C13.7989 13.0693 13.7234 13.2354 13.5724 13.3714C13.4365 13.5224 13.2704 13.5979 13.0741 13.5979H2.92593C2.79002 13.5979 2.66921 13.5601 2.5635 13.4846C2.45779 13.4242 2.36718 13.3411 2.29167 13.2354C2.23127 13.1297 2.20106 13.0089 2.20106 12.873V8.41054C2.33698 8.45585 2.45779 8.48605 2.5635 8.50115C2.69941 8.51625 2.83532 8.5238 2.97124 8.5238C3.16755 8.5238 3.39407 8.4936 3.6508 8.43319V10.6984H12.3492V8.43319C12.5908 8.4936 12.8173 8.5238 13.0288 8.5238Z",
+  "fill-rule": "nonzero"
+};
+function c(n, _) {
+  return C(), e("path", t);
+}
+const a = /* @__PURE__ */ o(r, [["render", c]]);
+export {
+  a as default
+};

package/lib/src/size-auto-DZ4AHHzc.js

@@ -0,0 +1,10 @@
+import { openBlock as C, createElementBlock as e } from "vue";
+import { _ as t } from "./lib-3Hnr9X6L.js";
+const o = {}, c = { d: "M10.7998 1.25C11.3475 1.25 11.8037 1.24898 12.1748 1.2793C12.5545 1.31033 12.9109 1.3781 13.2481 1.54981C13.7655 1.81346 14.1865 2.23452 14.4502 2.75196C14.6219 3.0891 14.6897 3.44547 14.7207 3.8252C14.751 4.19633 14.75 4.65253 14.75 5.2002V10.7998C14.75 11.3475 14.751 11.8037 14.7207 12.1748C14.6897 12.5545 14.6219 12.9109 14.4502 13.2481C14.1865 13.7655 13.7655 14.1865 13.2481 14.4502C12.9109 14.6219 12.5545 14.6897 12.1748 14.7207C11.8037 14.751 11.3475 14.75 10.7998 14.75H5.2002C4.65253 14.75 4.19633 14.751 3.8252 14.7207C3.44547 14.6897 3.0891 14.6219 2.75196 14.4502C2.23452 14.1865 1.81346 13.7655 1.54981 13.2481C1.3781 12.9109 1.31033 12.5545 1.2793 12.1748C1.24898 11.8037 1.25 11.3475 1.25 10.7998V5.2002C1.25 4.65253 1.24898 4.19633 1.2793 3.8252C1.31033 3.44547 1.3781 3.0891 1.54981 2.75196C1.81346 2.23451 2.23451 1.81346 2.75196 1.54981C3.0891 1.3781 3.44547 1.31033 3.8252 1.2793C4.19633 1.24898 4.65253 1.25 5.2002 1.25H10.7998ZM5.2002 2.75C4.62778 2.75 4.24315 2.75024 3.94727 2.77442C3.66028 2.79788 3.52316 2.84059 3.43262 2.88672C3.19751 3.00655 3.00655 3.19751 2.88672 3.43262C2.84059 3.52316 2.79788 3.66028 2.77442 3.94727C2.75024 4.24315 2.75 4.62778 2.75 5.2002V7.25H8C8.9665 7.25 9.75 8.03351 9.75 9V13.25H10.7998C11.3722 13.25 11.7569 13.2498 12.0527 13.2256C12.3397 13.2021 12.4768 13.1594 12.5674 13.1133C12.8025 12.9935 12.9935 12.8025 13.1133 12.5674C13.1594 12.4768 13.2021 12.3397 13.2256 12.0527C13.2498 11.7569 13.25 11.3722 13.25 10.7998V5.2002C13.25 4.62778 13.2498 4.24315 13.2256 3.94727C13.2021 3.66028 13.1594 3.52316 13.1133 3.43262C12.9935 3.19751 12.8025 3.00655 12.5674 2.88672C12.4768 2.84059 12.3397 2.79788 12.0527 2.77442C11.7569 2.75024 11.3722 2.75 10.7998 2.75H5.2002ZM2.75 10.7998C2.75 11.3722 2.75024 11.7569 2.77442 12.0527C2.79788 12.3397 2.84059 12.4768 2.88672 12.5674C3.00655 12.8025 3.19751 12.9935 3.43262 13.1133C3.52316 13.1594 3.66028 13.2021 3.94727 13.2256C4.24315 13.2498 4.62778 13.25 5.2002 13.25H8.25V9C8.25 8.86194 8.13807 8.75 8 8.75H2.75V10.7998Z" };
+function r(n, _) {
+  return C(), e("path", c);
+}
+const f = /* @__PURE__ */ t(o, [["render", r]]);
+export {
+  f as default
+};

package/lib/src/size-landscape-Co2ovloO.js

@@ -0,0 +1,10 @@
+import { openBlock as C, createElementBlock as e } from "vue";
+import { _ as t } from "./lib-3Hnr9X6L.js";
+const c = {}, o = { d: "M4.53382 3.41632C3.96139 3.41632 3.57677 3.41753 3.28089 3.44171C2.99395 3.46517 2.85678 3.50691 2.76624 3.55304C2.53116 3.67281 2.34019 3.8639 2.22034 4.09893C2.1742 4.1895 2.1315 4.32744 2.10804 4.61456C2.0839 4.91035 2.08362 5.29446 2.08362 5.86651L2.08362 10.1331C2.08362 10.7055 2.08386 11.0902 2.10804 11.386C2.1315 11.673 2.17421 11.8102 2.22034 11.9007C2.34017 12.1358 2.53112 12.3268 2.76624 12.4466C2.85678 12.4927 2.99389 12.5354 3.28089 12.5589C3.57677 12.5831 3.96139 12.5833 4.53382 12.5833H11.4674C12.0395 12.5833 12.4236 12.5831 12.7194 12.5589C13.0063 12.5354 13.1435 12.4927 13.234 12.4466C13.4692 12.3267 13.661 12.1359 13.7809 11.9007C13.827 11.8102 13.8688 11.6729 13.8922 11.386C13.9164 11.0902 13.9166 10.7055 13.9166 10.1331V5.86651C13.9166 5.29444 13.9164 4.91036 13.8922 4.61456C13.8688 4.32744 13.827 4.1895 13.7809 4.09893C13.661 3.86378 13.4692 3.67286 13.234 3.55304C13.1434 3.50695 13.0062 3.46514 12.7194 3.44171C12.4236 3.41755 12.0395 3.41632 11.4674 3.41632H4.53382ZM11.4674 1.91632C12.0148 1.91632 12.4704 1.91629 12.8414 1.94659C13.2213 1.97763 13.5784 2.04428 13.9157 2.21612C14.433 2.47976 14.8532 2.90089 15.1168 3.41827C15.2886 3.7554 15.3563 4.11179 15.3873 4.49151C15.4177 4.86261 15.4166 5.31889 15.4166 5.86651V10.1331C15.4166 10.6808 15.4177 11.137 15.3873 11.5081C15.3563 11.8879 15.2886 12.2442 15.1168 12.5814C14.8532 13.0987 14.433 13.5198 13.9157 13.7835C13.5784 13.9553 13.2213 14.023 12.8414 14.054C12.4704 14.0843 12.0148 14.0833 11.4674 14.0833H4.53382C3.98614 14.0833 3.52995 14.0843 3.15882 14.054C2.77909 14.023 2.42272 13.9552 2.08558 13.7835C1.56813 13.5199 1.14708 13.0988 0.883427 12.5814C0.711715 12.2442 0.643951 11.8878 0.612919 11.5081C0.582597 11.137 0.583622 10.6808 0.583622 10.1331L0.583622 5.86651C0.583622 5.31889 0.582599 4.86261 0.612919 4.49151C0.643971 4.1118 0.711666 3.75539 0.883427 3.41827C1.14708 2.90082 1.56813 2.47977 2.08558 2.21612C2.42266 2.04447 2.77915 1.97762 3.15882 1.94659C3.52995 1.91627 3.98614 1.91632 4.53382 1.91632H11.4674Z" };
+function r(n, s) {
+  return C(), e("path", o);
+}
+const f = /* @__PURE__ */ t(c, [["render", r]]);
+export {
+  f as default
+};

package/lib/src/size-portrait-2avbmbvP.js

@@ -0,0 +1,10 @@
+import { openBlock as C, createElementBlock as t } from "vue";
+import { _ as e } from "./lib-3Hnr9X6L.js";
+const o = {}, r = { d: "M12.5836 4.53351C12.5836 3.96108 12.5824 3.57646 12.5582 3.28058C12.5348 2.99364 12.493 2.85647 12.4469 2.76593C12.3271 2.53085 12.136 2.33989 11.901 2.22004C11.8104 2.17389 11.6725 2.13119 11.3854 2.10773C11.0896 2.0836 10.7055 2.08332 10.1334 2.08332H5.86683C5.2944 2.08332 4.90977 2.08356 4.6139 2.10773C4.3269 2.13119 4.18979 2.1739 4.09925 2.22004C3.86413 2.33986 3.67318 2.53082 3.55335 2.76593C3.50722 2.85648 3.46451 2.99358 3.44104 3.28058C3.41687 3.57646 3.41663 3.96108 3.41663 4.53351V11.4671C3.41663 12.0392 3.41689 12.4233 3.44104 12.7191C3.46449 13.006 3.50724 13.1431 3.55335 13.2337C3.67319 13.4689 3.86404 13.6607 4.09925 13.7806C4.18979 13.8267 4.32708 13.8685 4.6139 13.8919C4.90977 13.9161 5.2944 13.9163 5.86683 13.9163H10.1334C10.7055 13.9163 11.0896 13.916 11.3854 13.8919C11.6725 13.8685 11.8104 13.8267 11.901 13.7806C12.1362 13.6607 12.3271 13.4689 12.4469 13.2337C12.493 13.1431 12.5348 13.0059 12.5582 12.7191C12.5824 12.4233 12.5836 12.0392 12.5836 11.4671V4.53351ZM14.0836 11.4671C14.0836 12.0145 14.0836 12.4701 14.0533 12.8411C14.0223 13.221 13.9557 13.5781 13.7838 13.9153C13.5202 14.4327 13.0991 14.8529 12.5817 15.1165C12.2445 15.2883 11.8881 15.356 11.5084 15.387C11.1373 15.4173 10.681 15.4163 10.1334 15.4163H5.86683C5.31915 15.4163 4.86295 15.4173 4.49183 15.387C4.11205 15.356 3.75576 15.2883 3.41858 15.1165C2.90121 14.8529 2.48009 14.4327 2.21643 13.9153C2.04459 13.5781 1.97696 13.221 1.94593 12.8411C1.91563 12.4701 1.91663 12.0145 1.91663 11.4671V4.53351C1.91663 3.98584 1.9156 3.52964 1.94593 3.15851C1.97696 2.77878 2.04472 2.42241 2.21643 2.08527C2.48009 1.56782 2.90114 1.14677 3.41858 0.883122C3.75573 0.711409 4.11209 0.643646 4.49183 0.612614C4.86295 0.582291 5.31915 0.583317 5.86683 0.583317H10.1334C10.681 0.583317 11.1373 0.582294 11.5084 0.612614C11.8881 0.643665 12.2445 0.711361 12.5817 0.883122C13.0991 1.14677 13.5202 1.56782 13.7838 2.08527C13.9555 2.42236 14.0223 2.77885 14.0533 3.15851C14.0837 3.52964 14.0836 3.98584 14.0836 4.53351V11.4671Z" };
+function c(n, _) {
+  return C(), t("path", r);
+}
+const f = /* @__PURE__ */ e(o, [["render", c]]);
+export {
+  f as default
+};

package/lib/src/size-square-Bz1CZaK9.js

@@ -0,0 +1,10 @@
+import { openBlock as C, createElementBlock as e } from "vue";
+import { _ as t } from "./lib-3Hnr9X6L.js";
+const o = {}, r = { d: "M13.25 5.2002C13.25 4.62777 13.2498 4.24315 13.2256 3.94727C13.2021 3.66027 13.1594 3.52316 13.1133 3.43262C12.9935 3.19751 12.8025 3.00655 12.5674 2.88672C12.4768 2.84059 12.3397 2.79788 12.0527 2.77442C11.7569 2.75024 11.3722 2.75 10.7998 2.75H5.2002C4.62777 2.75 4.24315 2.75024 3.94727 2.77442C3.66027 2.79788 3.52316 2.84059 3.43262 2.88672C3.19751 3.00655 3.00655 3.19751 2.88672 3.43262C2.84059 3.52316 2.79788 3.66027 2.77442 3.94727C2.75024 4.24315 2.75 4.62777 2.75 5.2002V10.7998C2.75 11.3722 2.75024 11.7569 2.77442 12.0527C2.79788 12.3397 2.84059 12.4768 2.88672 12.5674C3.00655 12.8025 3.19751 12.9935 3.43262 13.1133C3.52316 13.1594 3.66027 13.2021 3.94727 13.2256C4.24315 13.2498 4.62777 13.25 5.2002 13.25H10.7998C11.3722 13.25 11.7569 13.2498 12.0527 13.2256C12.3397 13.2021 12.4768 13.1594 12.5674 13.1133C12.8025 12.9935 12.9935 12.8025 13.1133 12.5674C13.1594 12.4768 13.2021 12.3397 13.2256 12.0527C13.2498 11.7569 13.25 11.3722 13.25 10.7998V5.2002ZM14.75 10.7998C14.75 11.3475 14.751 11.8037 14.7207 12.1748C14.6897 12.5545 14.6219 12.9109 14.4502 13.2481C14.1865 13.7655 13.7655 14.1865 13.2481 14.4502C12.9109 14.6219 12.5545 14.6897 12.1748 14.7207C11.8037 14.751 11.3475 14.75 10.7998 14.75H5.2002C4.65252 14.75 4.19633 14.751 3.8252 14.7207C3.44547 14.6897 3.0891 14.6219 2.75196 14.4502C2.23451 14.1865 1.81346 13.7655 1.54981 13.2481C1.3781 12.9109 1.31033 12.5545 1.2793 12.1748C1.24898 11.8037 1.25 11.3475 1.25 10.7998V5.2002C1.25 4.65252 1.24898 4.19633 1.2793 3.8252C1.31033 3.44547 1.3781 3.0891 1.54981 2.75196C1.81346 2.23451 2.23451 1.81346 2.75196 1.54981C3.0891 1.3781 3.44547 1.31033 3.8252 1.2793C4.19633 1.24898 4.65252 1.25 5.2002 1.25H10.7998C11.3475 1.25 11.8037 1.24898 12.1748 1.2793C12.5545 1.31033 12.9109 1.3781 13.2481 1.54981C13.7655 1.81346 14.1865 2.23451 14.4502 2.75196C14.6219 3.0891 14.6897 3.44547 14.7207 3.8252C14.751 4.19633 14.75 4.65252 14.75 5.2002V10.7998Z" };
+function c(n, _) {
+  return C(), e("path", r);
+}
+const f = /* @__PURE__ */ t(o, [["render", c]]);
+export {
+  f as default
+};