@designcrowd/library.brand-page 5.19.0 → 5.19.1-error-html2canvas-2

package/lib/src/lib.js

@@ -32,7 +32,7 @@ export { getOptimalLogoSize, calculateOptimizedLogoDimensions, applyLogoImageBas
 export { sanitizeRTEHtml } from './brand-page-maker/utils';
 export { getPageSlugFromPageTitle } from './brand-page-maker/utils/slug.util';
 // stores
-export { useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, useBrandPageContainerStore, useEventManagerStore, useLocalisedRouteStore, useVideoStore, } from './brand-page-maker/stores';
+export { useBrandPageMakerStore, useBrandPageMakerUserStore, useUiStore, useBrandPageContainerStore, useEventManagerStore, useLocalisedRouteStore, useVideoStore, useRouteStore, } from './brand-page-maker/stores';
 export { useShopConfigStore } from './shared/ecommerce-settings/store/shop-settings-store';
 // for jest, need to set active pinia in library.brand-page as well
 import { createPinia, setActivePinia } from 'pinia';

package/lib/src/metadata-builder/builders/footer-builder.js

@@ -9,76 +9,88 @@ const normaliseSocialUrl = (url) => {
     }
     return url;
 };
-const applyGlobalFooterChanges = (footer, args, textStyleOptions) => {
-    if (args.copyright_text !== undefined)
-        footer.copyrightText = args.copyright_text;
-    if (args.copyright_text_font_family !== undefined)
-        footer.copyrightStyle = applyDetachedStyleOverride(footer.copyrightStyle, { fontFamily: args.copyright_text_font_family }, textStyleOptions);
-    const links = args.social_links;
+const makeSocialLink = (icon, url) => ({
+    imageUrl: icon || '',
+    url: normaliseSocialUrl(url || ''),
+    imageTitle: '',
+    width: 0,
+    height: 0,
+    imageLink: '',
+});
+const hasSocialLinkMutation = (args) => args._replace_social_links === true ||
+    (args._remove_social_link_indices?.length ?? 0) > 0 ||
+    (args._reorder_social_links?.length ?? 0) > 0 ||
+    (args.social_links?.length ?? 0) > 0;
+/**
+ * Social links are a GLOBAL footer concern — one logical list that both
+ * viewports render identically. Derive the new list ONCE from the current one
+ * WITHOUT mutating the input, so the caller can assign an independent copy to
+ * each viewport.
+ *
+ * Why this can't mutate per-viewport in place: footers migrated from the legacy
+ * single `footerStyles` model (migration-01) share ONE `socialLinks` array
+ * reference across pageFooterDesktop and pageFooterMobile, and `cloneDeep`
+ * preserves that shared reference. Running an in-place `splice` once per
+ * viewport therefore applies it TWICE to the same array — e.g. one requested
+ * removal index drops two links. Compute-once + assign-fresh is correct for
+ * both shared (legacy) and independent (new-model) footers.
+ */
+const computeSocialLinks = (current, args) => {
     // _replace_social_links: replace entire list (empty/absent social_links = clear all).
-    // When replacing, all other social link mutations (remove, insert, reorder) are skipped —
-    // they are superseded by the replacement and running them would cause duplicates.
+    // A replacement supersedes every other social link mutation.
     if (args._replace_social_links) {
-        footer.socialLinks = (links ?? []).map((l) => ({
-            imageUrl: l.social_link_icon || '',
-            url: normaliseSocialUrl(l.url || ''),
-            imageTitle: '',
-            width: 0,
-            height: 0,
-            imageLink: '',
-        }));
+        return (args.social_links ?? []).map((l) => makeSocialLink(l.social_link_icon, l.url));
     }
-    else {
-        // Targeted mutations — only run when NOT replacing the entire list.
-        // item_index-based updates for existing links
-        if (links?.length) {
-            for (const link of links) {
-                if (link.item_index === undefined)
-                    continue;
-                const existing = footer.socialLinks?.[link.item_index];
-                if (!existing)
-                    continue;
-                if (link.social_link_icon !== undefined)
-                    existing.imageUrl = link.social_link_icon;
-                if (link.url !== undefined)
-                    existing.url = normaliseSocialUrl(link.url);
-            }
-        }
-        // Remove by index (descending order to preserve indices during splice)
-        if (args._remove_social_link_indices?.length && footer.socialLinks) {
-            const sorted = [...args._remove_social_link_indices].sort((a, b) => b - a);
-            for (const idx of sorted) {
-                if (idx >= 0 && idx < footer.socialLinks.length)
-                    footer.socialLinks.splice(idx, 1);
-            }
-        }
-        // Insert new links (descending insert_at order to preserve positions during splice)
-        const insertLinks = (links ?? []).filter((l) => l.insert_at !== undefined && l.item_index === undefined);
-        const sortedInserts = [...insertLinks].sort((a, b) => b.insert_at - a.insert_at);
-        for (const link of sortedInserts) {
-            const pos = Math.max(0, Math.min(link.insert_at, footer.socialLinks?.length ?? 0));
-            footer.socialLinks = footer.socialLinks ?? [];
-            footer.socialLinks.splice(pos, 0, {
-                imageUrl: link.social_link_icon || '',
-                url: normaliseSocialUrl(link.url || ''),
-                imageTitle: '',
-                width: 0,
-                height: 0,
-                imageLink: '',
-            });
+    const links = [...(current ?? [])];
+    // item_index-based updates for existing links — replace the item reference
+    // (never mutate the original object, which may be shared across viewports).
+    for (const link of args.social_links ?? []) {
+        if (link.item_index === undefined)
+            continue;
+        const existing = links[link.item_index];
+        if (!existing)
+            continue;
+        links[link.item_index] = {
+            ...existing,
+            ...(link.social_link_icon !== undefined
+                ? { imageUrl: link.social_link_icon }
+                : {}),
+            ...(link.url !== undefined ? { url: normaliseSocialUrl(link.url) } : {}),
+        };
+    }
+    // Remove by index (descending order to preserve indices during splice).
+    if (args._remove_social_link_indices?.length) {
+        const sorted = [...args._remove_social_link_indices].sort((a, b) => b - a);
+        for (const idx of sorted) {
+            if (idx >= 0 && idx < links.length)
+                links.splice(idx, 1);
         }
-        // Reorder (requires ALL indices — partial reorder is not supported)
-        if (args._reorder_social_links?.length && footer.socialLinks) {
-            const newOrder = args._reorder_social_links;
-            const unique = new Set(newOrder);
-            if (unique.size === newOrder.length &&
-                newOrder.every((idx) => idx >= 0 && idx < footer.socialLinks.length)) {
-                const reordered = newOrder.map((idx) => footer.socialLinks[idx]);
-                if (reordered.length === footer.socialLinks.length)
-                    footer.socialLinks = reordered;
-            }
+    }
+    // Insert new links (descending insert_at order to preserve positions).
+    const insertLinks = (args.social_links ?? []).filter((l) => l.insert_at !== undefined && l.item_index === undefined);
+    const sortedInserts = [...insertLinks].sort((a, b) => b.insert_at - a.insert_at);
+    for (const link of sortedInserts) {
+        const pos = Math.max(0, Math.min(link.insert_at, links.length));
+        links.splice(pos, 0, makeSocialLink(link.social_link_icon, link.url));
+    }
+    // Reorder (requires ALL indices — partial reorder is not supported).
+    if (args._reorder_social_links?.length) {
+        const newOrder = args._reorder_social_links;
+        const unique = new Set(newOrder);
+        if (unique.size === newOrder.length &&
+            newOrder.every((idx) => idx >= 0 && idx < links.length)) {
+            const reordered = newOrder.map((idx) => links[idx]);
+            if (reordered.length === links.length)
+                return reordered;
         }
     }
+    return links;
+};
+const applyGlobalFooterChanges = (footer, args, textStyleOptions) => {
+    if (args.copyright_text !== undefined)
+        footer.copyrightText = args.copyright_text;
+    if (args.copyright_text_font_family !== undefined)
+        footer.copyrightStyle = applyDetachedStyleOverride(footer.copyrightStyle, { fontFamily: args.copyright_text_font_family }, textStyleOptions);
 };
 const applyViewportFooterChanges = (footer, overrides) => {
     if (overrides.display_style !== undefined)
@@ -136,11 +148,24 @@ export class FooterBuilder extends BaseMetadataBuilder {
         }
         const args = this.request.payload ?? {};
         const textStyleOptions = model.styles?.textStyles?.textStyleOptions;
-        // Global fields (copyright_text, social links) always apply to both viewports.
+        // Global scalar/style fields (copyright text + font) apply to both
+        // viewports. These are idempotent assignments, safe to run per-viewport.
         if (model.pageFooterDesktop)
             applyGlobalFooterChanges(model.pageFooterDesktop, args, textStyleOptions);
         if (model.pageFooterMobile)
             applyGlobalFooterChanges(model.pageFooterMobile, args, textStyleOptions);
+        // Social links are a single global list. Derive the new list ONCE, then
+        // assign an INDEPENDENT copy to each viewport — never mutate a (possibly
+        // shared) viewport array in place. See computeSocialLinks.
+        if (hasSocialLinkMutation(args)) {
+            const current = model.pageFooterDesktop?.socialLinks ??
+                model.pageFooterMobile?.socialLinks;
+            const updated = computeSocialLinks(current, args);
+            if (model.pageFooterDesktop)
+                model.pageFooterDesktop.socialLinks = updated.map((l) => ({ ...l }));
+            if (model.pageFooterMobile)
+                model.pageFooterMobile.socialLinks = updated.map((l) => ({ ...l }));
+        }
         // Viewport-specific styling via explicit sub-objects.
         if (args.desktop && model.pageFooterDesktop)
             applyViewportFooterChanges(model.pageFooterDesktop, args.desktop);

package/lib/src/metadata-builder/builders/section-builders/image-gallery-builder.js

@@ -23,7 +23,7 @@ const mergeGalleryImages = (content, images, replaceAll) => {
         const existing = content.images?.[index];
         const imageUrl = isValidUrl(img.image_url)
             ? img.image_url
-            : existing?.imageUrl ?? '';
+            : (existing?.imageUrl ?? '');
         return {
             ...(existing || {}),
             imageUrl,

package/lib/src/metadata-builder/builders/section-builders/images-section-builder.js

@@ -46,7 +46,7 @@ const mergeImageItems = (content, items, replaceAll) => {
             ...(existing || {}),
             imageUrl: isValidUrl(item.image_url)
                 ? item.image_url
-                : existing?.imageUrl ?? '',
+                : (existing?.imageUrl ?? ''),
             imageTitle: existing?.imageTitle ?? '',
             width: existing?.width ?? 0,
             height: existing?.height ?? 0,

package/lib/src/metadata-builder/builders/section-builders/testimonial-section-builder.js

@@ -67,7 +67,7 @@ const mergeTestimonialItemsAsync = async (content, items, replaceAll) => {
             ? 'shape'
             : item.avatar_image_url
                 ? 'image'
-                : existing?.mediaType ?? 'image';
+                : (existing?.mediaType ?? 'image');
         return {
             ...(existing || {}),
             imageUrl,

package/lib/src/metadata-builder/builders/section-builders/text-section-builder.js

@@ -53,7 +53,7 @@ const mergeTextItems = (content, items, replaceAll, textStyleOptions) => {
         const baseStyle = existing?.textStyle || content.textStyle || {};
         const mergedStyle = (item.text_style ? { ...baseStyle, ...item.text_style } : baseStyle);
         const resolved = item.text !== undefined ? resolveText(item.text) : null;
-        const text = resolved ? resolved.html : existing?.text ?? '';
+        const text = resolved ? resolved.html : (existing?.text ?? '');
         return {
             text,
             textStyle: clearTextStyleTypeIfTiptap(mergedStyle, resolved?.wasTiptap ?? false, textStyleOptions),

package/lib/src/metadata-builder/builders/shape-color-utils.js

@@ -48,5 +48,5 @@ export const applyColorThemeToReplacements = (replacements, colorTheme) => repla
     ...r,
     replacementColor: replacements.length === 1
         ? colorTheme
-        : getNewColorBasedOnTargetColorTheme(r.originalColor, colorTheme)?.toString() ?? colorTheme,
+        : (getNewColorBasedOnTargetColorTheme(r.originalColor, colorTheme)?.toString() ?? colorTheme),
 }));

package/lib/src/plugins/google-maps-plugin/google-maps-plugin.d.ts

@@ -15,7 +15,7 @@ export interface AddressDetails {
 export declare class GoogleMapsPlugin {
     private initialised;
     private initialising;
-    private readonly _options;
+    private readonly options;
     constructor(options: GoogleMapsPluginOptions);
     private initialise;
     private getPlacesLibrary;

package/lib/src/plugins/google-maps-plugin/google-maps-plugin.js

@@ -12,9 +12,9 @@ export const PLACE_ID_QUERY_PREFIX = 'place_id:';
 export class GoogleMapsPlugin {
     initialised = false;
     initialising = false;
-    _options;
+    options;
     constructor(options) {
-        this._options = options;
+        this.options = options;
     }
     async initialise() {
         if (this.initialised || this.initialising) {
@@ -71,7 +71,7 @@ export class GoogleMapsPlugin {
     async createPlaceAutocompleteElement(options) {
         const { PlaceAutocompleteElement } = await this.getPlacesLibrary();
         return new PlaceAutocompleteElement({
-            requestedLanguage: this._options.locale,
+            requestedLanguage: this.options.locale,
             ...options,
         });
     }
@@ -97,15 +97,15 @@ export class GoogleMapsPlugin {
         return scriptElement;
     }
     getGoogleScriptUrl() {
-        const baseUrl = `https://maps.googleapis.com/maps/api/js?key=${this._options.apiKey}&libraries=places&loading=async`;
-        return this._options.locale
-            ? `${baseUrl}&language=${this._options.locale}`
+        const baseUrl = `https://maps.googleapis.com/maps/api/js?key=${this.options.apiKey}&libraries=places&loading=async`;
+        return this.options.locale
+            ? `${baseUrl}&language=${this.options.locale}`
             : baseUrl;
     }
     getEmbedGoogleMapsSrc(options) {
         const mapMode = options.mapMode || MAP_MODE_PLACE;
-        const locale = options.locale || this._options.locale;
-        const baseUrl = `https://www.google.com/maps/embed/v1/${mapMode}?key=${this._options.apiKey}&q=${options.query}`;
+        const locale = options.locale || this.options.locale;
+        const baseUrl = `https://www.google.com/maps/embed/v1/${mapMode}?key=${this.options.apiKey}&q=${options.query}`;
         return locale ? `${baseUrl}&language=${locale}` : baseUrl;
     }
 }

package/lib/src/shared/background-settings/components/background-shapes/BackgroundShapeSettings.mixin.d.ts

@@ -148,7 +148,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 wordBreak?: string | undefined;
             };
         }[];
-        personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+        personalisationRole?: import("../../../../brand-page").PersonalisationRole | undefined;
         media?: {
             type: import("../../../../brand-page").MediaTypes;
         } | undefined;
@@ -200,12 +200,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
     userStore: import("pinia").Store<"brandPageMakerUser", import("@brand-page-maker/stores").UserState, {}, {
         setUserState(payload: {
-            emailAddress?: string | undefined;
-            userToken?: string | undefined;
-            isAdmin?: boolean | undefined;
-            hasPremiumSubscription?: boolean | undefined;
-            brandPageCommissionPercentage?: number | undefined;
-            features?: Partial<import("../../../../constants/ui").UIUserFeatures> | undefined;
+            emailAddress?: string;
+            userToken?: string;
+            isAdmin?: boolean;
+            hasPremiumSubscription?: boolean;
+            brandPageCommissionPercentage?: number;
+            features?: Partial<import("@brand-page-maker/stores").UserFeatures>;
         }): void;
     }>;
     backgroundSettingsStore: import("pinia").Store<"uiBackgroundSettings", import("../../store").BackgroundSettingsState, {
@@ -213,11 +213,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }, {
         onBackgroundChanged(): void;
         setBackgroundStyle({ backgroundStyle, }: {
-            backgroundStyle: Partial<Omit<BrandPageCssStyle, "backgroundColor">>;
+            backgroundStyle: import("../../../../brand-page").BackgroundStyle;
         }): void;
         setBackgroundShapes(payload: import("../../../../brand-page").BackgroundShape[]): void;
         setBackgroundPersonalisationRole(payload: {
-            personalisationRole: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+            personalisationRole: import("../../../../brand-page").PersonalisationRole | undefined;
         }): void;
         setBackgroundShapeStyle(payload: BrandPageCssStyle): void;
         setPrimaryBackgroundShapeStyle(payload: BrandPageCssStyle): void;
@@ -226,9 +226,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         addBackgroundShape({ shapeUrl, width, height, aspectRatio, }: {
             shapeUrl: string;
-            width?: number | undefined;
-            height?: number | undefined;
-            aspectRatio?: number | undefined;
+            width?: number;
+            height?: number;
+            aspectRatio?: number;
         }): void;
         deleteBackgroundShape({ shapeIndex }: {
             shapeIndex: number;
@@ -243,7 +243,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setBackgroundShapeSettings(payload: import("../../background-settings-models").SetBackgroundShapeSettingsPayload): void;
         setRecommendedLogoColors(payload: import("../../background-settings-models").SetRecommendedLogoColorsPayload): void;
         setBackgroundMode(payload: {
-            backgroundMode: "images" | "edit";
+            backgroundMode: import("@brand-page-maker/stores").BrandPageSettingsMode;
         }): void;
         setBackgroundMedia(payload: import("../../../my-uploads/models").MediaBaseSelectedPayload): void;
         removeBackgroundVideo(): void;

package/lib/src/shared/background-settings/store/background-settings-store.d.ts

@@ -29,9 +29,9 @@ export declare const useUiBackgroundSettingsStore: import("pinia").StoreDefiniti
     }): void;
     addBackgroundShape({ shapeUrl, width, height, aspectRatio, }: {
         shapeUrl: string;
-        width?: number | undefined;
-        height?: number | undefined;
-        aspectRatio?: number | undefined;
+        width?: number;
+        height?: number;
+        aspectRatio?: number;
     }): void;
     deleteBackgroundShape({ shapeIndex }: {
         shapeIndex: number;

package/lib/src/shared/color-picker/components/ColorPicker.mixin.d.ts

@@ -52,7 +52,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     deselectAllColors(): void;
     onV2ColorPickerChanged(): void;
     dispatch(color: ColorValue): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "on-color-select"[], "on-color-select", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     customGroups: {
         type: ArrayConstructor;
         required: false;
@@ -83,7 +83,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: () => boolean;
     };
-}>> & Readonly<{}>, {
+}>> & Readonly<{
+    "onOn-color-select"?: ((...args: any[]) => any) | undefined;
+}>, {
     size: string;
     customGroups: unknown[];
     isNewColor: boolean;

package/lib/src/shared/color-picker/components/ColorPicker.mixin.js

@@ -2,10 +2,9 @@ import { defineComponent } from 'vue';
 import { Icon } from '@designcrowd/fe-shared-lib';
 import ColorPickerSwatch from './ColorPickerSwatch.vue';
 import { DEFAULT_COLORS, DEFAULT_GRADIENT_COLORS } from '../constants';
-import { RGBAtoHex, hexToRGB, arrayToLinearGradient, isRgbColor, } from '@utils/helpers';
+import { RGBAtoHex, arrayToLinearGradient, isRgbColor } from '@utils/helpers';
 import { normalizeColorToHex, colorsMatch } from '@brand-page/utils/style.util';
 import { colorPickerTr } from '@src/composables/useTranslate';
-import { useUiStyleSettingsStore } from '../../style-settings/store';
 // Simple session storage for newColors (persists during browser session, clears on refresh)
 let sessionNewColors = [];
 export default defineComponent({
@@ -45,6 +44,7 @@ export default defineComponent({
             default: () => false,
         },
     },
+    emits: ['on-color-select'],
     data() {
         const groups = [];
         const newColors = [];

package/lib/src/shared/color-picker/components/ColorPickerSwatch.mixin.d.ts

@@ -9,10 +9,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     isTransparent(): boolean;
 }, {
     onClick(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     color: {
         type: ObjectConstructor;
         required: true;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/shared/color-picker/components/ColorPickerSwatch.mixin.js

@@ -6,6 +6,7 @@ export default defineComponent({
             required: true,
         },
     },
+    emits: ['click'],
     data() {
         const styles = this.color.styles;
         return {

package/lib/src/shared/confirm-modal/ConfirmModal.mixin.d.ts

@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }, {}, {}, {
     onCancel(): void;
     onConfirm(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "confirm")[], "cancel" | "confirm", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     visible: {
         type: BooleanConstructor;
         default: boolean;
@@ -24,7 +24,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: undefined;
         required: false;
     };
-}>> & Readonly<{}>, {
+}>> & Readonly<{
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}>, {
     description: string;
     visible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/lib/src/shared/confirm-modal/ConfirmModal.mixin.js

@@ -13,6 +13,7 @@ export default defineComponent({
             required: false,
         },
     },
+    emits: ['confirm', 'cancel'],
     setup() {
         const containerStore = useBrandPageContainerStore();
         return {

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

@@ -1,4 +1,3 @@
-/// <reference types="types/lodash-shims" />
 import type { DebounceHandle } from 'lodash.debounce';
 import type { PropType } from 'vue';
 import type { ContentItemFieldSettings } from '../models';