@designcrowd/library.brand-page 5.19.2 → 6.0.0-undo-redo-1

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/reorder-pages-builder.d.ts

@@ -0,0 +1,13 @@
+import type { BrandPageModel } from '../../brand-page/models';
+import { BaseMetadataBuilder, type BuilderResult, type MetadataBuilderRequest } from '../models';
+import type { Logger } from '../logger';
+export interface ReorderPagesPayload {
+    pageOrder: string[];
+}
+export declare class ReorderPagesBuilder extends BaseMetadataBuilder<ReorderPagesPayload> {
+    constructor(request: MetadataBuilderRequest<ReorderPagesPayload>, logger?: Logger);
+    validateAsync(): Promise<{
+        errors: string[];
+    }>;
+    buildAsync(model: BrandPageModel): Promise<BuilderResult>;
+}

package/lib/src/metadata-builder/builders/reorder-pages-builder.js

@@ -0,0 +1,49 @@
+import { BaseMetadataBuilder, } from '../models';
+export class ReorderPagesBuilder extends BaseMetadataBuilder {
+    constructor(request, logger) {
+        super(request, logger);
+    }
+    async validateAsync() {
+        const errors = [];
+        const payload = this.request.payload;
+        if (!payload?.pageOrder?.length) {
+            errors.push('page_order is required for reorder_pages');
+        }
+        return { errors };
+    }
+    async buildAsync(model) {
+        this.log('Build called');
+        const validation = await this.validateAsync();
+        if (validation.errors.length) {
+            return { request: this.request, model, errors: validation.errors };
+        }
+        const { pageOrder } = this.request.payload;
+        // Build pageId → routeId lookup from nav.routes
+        const pageIdToRouteId = new Map();
+        for (const route of model.nav.routes) {
+            pageIdToRouteId.set(route.pageId, route.id);
+        }
+        // Build new nav.orders from the flat page_order (array of pageIds)
+        const newOrders = [];
+        const seenRouteIds = new Set();
+        for (const pageId of pageOrder) {
+            const routeId = pageIdToRouteId.get(pageId);
+            if (!routeId)
+                continue;
+            newOrders.push({ routeId, subRoutes: [] });
+            seenRouteIds.add(routeId);
+        }
+        // Safety: append any routes not mentioned (don't lose pages)
+        for (const route of model.nav.routes) {
+            const routeId = pageIdToRouteId.get(route.pageId);
+            if (routeId && !seenRouteIds.has(routeId)) {
+                newOrders.push({ routeId, subRoutes: [] });
+            }
+        }
+        model.nav.orders = newOrders;
+        this.log({
+            message: `Reordered pages: ${pageOrder.join(', ')}`,
+        });
+        return { request: this.request, model };
+    }
+}

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';