@maestro_io/maestro-web-sdk 4.0.2 → 5.1.0

package/dist/src/modules/maestro/builder/mocks/mockBuilderPanel.js

@@ -0,0 +1,240 @@
+export const MOCK_BUILDER_PANEL = {
+    _id: '6949b334107027fcc2e7cb64',
+    slug: 'builder-panel',
+    panel_name: 'Builder',
+    panel_type: 'builderBlockPanel',
+    icon_name: 'builder',
+    renderer: {
+        panel_type: 'builderBlockPanel',
+        panel_name: 'Builder',
+        icon_name: 'builder',
+        block_data: {
+            sections: [
+                {
+                    cards: [
+                        {
+                            id: 'card_1766443728550_sg7artdwm',
+                            image: {
+                                alt: '',
+                                url: 'https://dev.static.maestro.io/media/5ab57cc70648bc2807f9e055/694a21ce50cc06bc0e805cbc.png',
+                            },
+                            title: 'Card 1766443728550',
+                            type: 'simple',
+                        },
+                        {
+                            collapsed_state: {
+                                cards: [
+                                    {
+                                        id: 'card_1766466244749_hhkd6lrih',
+                                        image: {
+                                            alt: '',
+                                            url: 'https://dev.static.maestro.io/media/5ab57cc70648bc2807f9e055/694a256c03ec3f32cd61c147.png',
+                                        },
+                                        title: 'Card 1766466244749',
+                                        type: 'simple',
+                                    },
+                                ],
+                            },
+                            expanded_state: {
+                                cards: [
+                                    {
+                                        id: 'card_1766466938053_uajmx0u9p',
+                                        image: {
+                                            alt: '',
+                                            url: 'https://dev.static.maestro.io/media/5ab57cc70648bc2807f9e055/694a25ac50cc06bc0e805cbe.png',
+                                        },
+                                        title: 'Card 1766466938053',
+                                        type: 'simple',
+                                    },
+                                    {
+                                        id: 'card_1766466938960_3u88bdba2',
+                                        image: {
+                                            alt: '',
+                                            url: 'https://dev.static.maestro.io/media/5ab57cc70648bc2807f9e055/694a25b850cc06bc0e805cbf.png',
+                                        },
+                                        title: 'Card 1766466938960',
+                                        type: 'simple',
+                                    },
+                                    {
+                                        id: 'card_1767918279708_67y8rs2l7',
+                                        image: {
+                                            alt: '',
+                                            url: '',
+                                        },
+                                        title: 'Card 1767918279708',
+                                        type: 'simple',
+                                    },
+                                ],
+                            },
+                            id: 'card_1766466072583_q1iocmwyy',
+                            settings: {
+                                background_color: 'surface2',
+                                header: {
+                                    content: '',
+                                    enabled: true,
+                                    type: 'image',
+                                },
+                                padding: {
+                                    bottom: 8,
+                                    left: 8,
+                                    right: 8,
+                                    top: 8,
+                                },
+                                spacing: 8,
+                                sticky: false,
+                                text_alignment: 'center',
+                            },
+                            title: '<p>On The Court</p>',
+                            type: 'expandable',
+                        },
+                        {
+                            id: 'card_1767918296629_h74b0nomg',
+                            settings: {
+                                background_color: '#1a1a2e',
+                                header: {
+                                    content: 'Expandable Card 1767918296629',
+                                    enabled: true,
+                                    type: 'text',
+                                },
+                                padding: {
+                                    bottom: 8,
+                                    left: 8,
+                                    right: 8,
+                                    top: 8,
+                                },
+                                spacing: 8,
+                                sticky: false,
+                                text_alignment: 'left',
+                            },
+                            title: '<p>Expandable Card 1767918296629</p>',
+                            type: 'expandable',
+                        },
+                    ],
+                    id: 'section_1766443726983_9ijrjljld',
+                    settings: {
+                        background_color: '#00000000',
+                        header: {
+                            content: 'https://dev.static.maestro.io/media/5ab57cc70648bc2807f9e055/695ff32d5a241b08a7b91fd3.png',
+                            enabled: true,
+                            type: 'image',
+                            alt: '',
+                        },
+                        padding: {
+                            bottom: 8,
+                            left: 8,
+                            right: 8,
+                            top: 8,
+                        },
+                        spacing: 8,
+                        sticky: false,
+                        text_alignment: 'left',
+                    },
+                    title: '<p>Section 1</p>',
+                },
+                {
+                    cards: [
+                        {
+                            id: 'card_1766467114432_2v8zvw1re',
+                            image: {
+                                alt: '',
+                                url: 'https://dev.static.maestro.io/media/5ab57cc70648bc2807f9e055/694a2a0003ec3f32cd61c148.png',
+                            },
+                            title: 'Card 1766467114432',
+                            type: 'simple',
+                        },
+                        {
+                            id: 'card_1766468302927_ca48t62e3',
+                            image: {
+                                alt: '',
+                                url: 'https://dev.static.maestro.io/media/5ab57cc70648bc2807f9e055/694a2adb03ec3f32cd61c149.png',
+                            },
+                            title: 'Card 1766468302927',
+                            type: 'simple',
+                        },
+                        {
+                            id: 'card_1766468304232_6fyx3if4t',
+                            image: {
+                                alt: '',
+                                url: 'https://dev.static.maestro.io/media/5ab57cc70648bc2807f9e055/694a2ae503ec3f32cd61c14a.png',
+                            },
+                            title: 'Card 1766468304232',
+                            type: 'simple',
+                        },
+                    ],
+                    id: 'section_1766467112490_g95l45a3s',
+                    settings: {
+                        background_color: '#1a1a2e',
+                        header: {
+                            content: '<p>Game Leaders</p>',
+                            enabled: true,
+                            type: 'text',
+                        },
+                        padding: {
+                            bottom: 8,
+                            left: 8,
+                            right: 8,
+                            top: 8,
+                        },
+                        spacing: 8,
+                        sticky: false,
+                        text_alignment: 'left',
+                    },
+                    title: '<p>Game Leaders</p>',
+                },
+                {
+                    cards: [
+                        {
+                            id: 'card_1766468354986_cqobdlscr',
+                            image: {
+                                alt: '',
+                                url: 'https://dev.static.maestro.io/media/5ab57cc70648bc2807f9e055/694a2b3203ec3f32cd61c14d.png',
+                            },
+                            title: 'Card 1766468354986',
+                            type: 'simple',
+                        },
+                        {
+                            id: 'card_1766468411751_1709l311v',
+                            image: {
+                                alt: '',
+                                url: 'https://dev.static.maestro.io/media/5ab57cc70648bc2807f9e055/694a2b4250cc06bc0e805cc1.png',
+                            },
+                            title: 'Card 1766468411751',
+                            type: 'simple',
+                        },
+                        {
+                            id: 'card_1766468429774_l7dk26i8h',
+                            image: {
+                                alt: '',
+                                url: 'https://dev.static.maestro.io/media/5ab57cc70648bc2807f9e055/694a2b5503ec3f32cd61c14e.png',
+                            },
+                            title: 'Card 1766468429774',
+                            type: 'simple',
+                        },
+                    ],
+                    id: 'section_1766468352065_9usy158yv',
+                    settings: {
+                        background_color: '#00000000',
+                        header: {
+                            content: '<p>Section 3</p>',
+                            enabled: true,
+                            type: 'text',
+                        },
+                        padding: {
+                            bottom: 8,
+                            left: 8,
+                            right: 8,
+                            top: 8,
+                        },
+                        spacing: 8,
+                        sticky: false,
+                        text_alignment: 'center',
+                    },
+                    title: '<p>Section 3</p>',
+                },
+            ],
+        },
+        supported_platforms: {
+            bbd: true,
+        },
+    },
+};

package/dist/src/modules/maestro/builder/types.d.ts

@@ -0,0 +1,52 @@
+export interface IBuilderPanel {
+    id: string;
+    type: 'builder';
+    name: string;
+    sections: ISection[];
+}
+export interface ISection {
+    id: string;
+    title: string;
+    settings: ISectionSettings;
+    cards: ICard[];
+}
+export interface ISectionSettings {
+    header: {
+        enabled: boolean;
+        type: 'text' | 'image';
+        content: string;
+        alt?: string;
+    };
+    sticky: boolean;
+    textAlignment: 'left' | 'center' | 'right';
+    spacing: number;
+    padding: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    backgroundColor: string;
+}
+export type ICard = ISimpleCard | IExpandableCard;
+export interface ISimpleCard {
+    id: string;
+    type: 'simple';
+    title: string;
+    image: {
+        url: string;
+        alt?: string;
+    };
+}
+export interface IExpandableCard {
+    id: string;
+    type: 'expandable';
+    title: string;
+    collapsedState: {
+        cards: ISimpleCard[];
+    };
+    expandedState: {
+        cards: ISimpleCard[];
+    };
+    settings?: ISectionSettings;
+}

package/dist/src/modules/maestro/builder/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/modules/maestro/builder/view/BuilderPanelView.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './BuilderPanelView.styles.css';
+declare const BuilderPanelView: React.FC;
+export default BuilderPanelView;

package/dist/src/modules/maestro/builder/view/BuilderPanelView.js

@@ -0,0 +1,52 @@
+import React, { useState, useEffect, useRef } from 'react';
+import './BuilderPanelView.styles.css';
+import SDK from '@/index';
+import BuilderSection from '../components/BuilderSection';
+import ScrollableContainer from '@/components/core/ScrollableContainer';
+const BuilderPanelView = () => {
+    const container = useRef(null);
+    const vm = useRef(SDK.getMaestroEventViewModel()
+        .builderPanelViewModel);
+    const viewModel = (() => {
+        if (!vm.current) {
+            throw new Error('BuilderPanelViewModel is not initialized');
+        }
+        return vm.current;
+    })();
+    const [sections, setSections] = useState(viewModel.sections.value ?? []);
+    const [isLoading, setIsLoading] = useState(viewModel.isDataLoading.value ?? false);
+    const [scrollableContainer, setScrollableContainer,] = useState(null);
+    useEffect(() => {
+        const sectionsUnsub = viewModel.sections.subscribe((sections) => {
+            setSections(sections);
+        });
+        const loadingUnsub = viewModel.isDataLoading.subscribe((isLoading) => {
+            setIsLoading(isLoading);
+        });
+        setScrollableContainer(container.current);
+        return () => {
+            sectionsUnsub && sectionsUnsub();
+            loadingUnsub && loadingUnsub();
+        };
+    }, [viewModel]);
+    const renderEmptyState = () => {
+        return (React.createElement("div", { className: "builder-panel-empty-state" },
+            React.createElement("div", { className: "builder-panel-empty-state-content" },
+                React.createElement("div", { className: "T20 FONT_BOLD builder-panel-empty-state-title" }, "No Content Available"),
+                React.createElement("p", { className: "T14 builder-panel-empty-state-description" }, "This panel doesn't have any sections to display."))));
+    };
+    const renderLoadingState = () => {
+        return React.createElement("div", { className: "builder-panel-loading" });
+    };
+    if (isLoading) {
+        return renderLoadingState();
+    }
+    if (!sections || sections.length === 0) {
+        return renderEmptyState();
+    }
+    return (React.createElement(ScrollableContainer, { scrollableContainerRef: scrollableContainer },
+        React.createElement("div", { ref: container, className: "builder-panel-view" },
+            sections.map((section) => (React.createElement(BuilderSection, { key: section.id, id: section.id, title: section.title, settings: section.settings, cards: section.cards }))),
+            React.createElement("div", { className: "builder-panel-bottom-padding" }))));
+};
+export default BuilderPanelView;

package/dist/src/modules/maestro/builder/view-model/BuilderPanelViewModel.d.ts

@@ -0,0 +1,40 @@
+import { Observable } from '../../../../helpers/Observable';
+import { ViewModel } from '../../../../view-models/ViewModel';
+import AnalyticsService from '@/services/AnalyticsService/AnalyticsService';
+import { ISection } from '../types';
+interface IBlockData {
+    sections: any[];
+}
+interface IPanelConfig {
+    block_data?: IBlockData;
+    id: string;
+    panel_name: string;
+    panel_type: string;
+    icon_name?: string;
+}
+export declare class BuilderPanelViewModel extends ViewModel {
+    sections: Observable<ISection[]>;
+    expandedCardIds: Observable<Set<string>>;
+    isDataLoading: Observable<boolean>;
+    hasEverSuccessfullyLoaded: Observable<boolean>;
+    private analyticsService;
+    private lastResponseHash;
+    initialized: boolean;
+    constructor(panelConfig?: IPanelConfig, analyticsService?: AnalyticsService);
+    init(panelConfig: IPanelConfig): Promise<void>;
+    cleanup(): void;
+    updatePanelConfig(panelConfig: IPanelConfig): void;
+    private trackPanelView;
+    private parseBlockData;
+    toggleCardExpanded(cardId: string): void;
+    collapseAllCards(): void;
+    private parsePadding;
+    private parseHeader;
+    private parseSectionSettings;
+    private parseSimpleCard;
+    private parseExpandableCard;
+    private parseCard;
+    private parseSection;
+    private parseSections;
+}
+export {};

package/dist/src/modules/maestro/builder/view-model/BuilderPanelViewModel.js

@@ -0,0 +1,229 @@
+import { Observable } from '../../../../helpers/Observable';
+import { ViewModel } from '../../../../view-models/ViewModel';
+import { captureException } from '@/sentry';
+import { stringHashCode } from '@/helpers/strings';
+export class BuilderPanelViewModel extends ViewModel {
+    constructor(panelConfig, analyticsService) {
+        super();
+        Object.defineProperty(this, "sections", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable([])
+        });
+        Object.defineProperty(this, "expandedCardIds", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(new Set())
+        });
+        Object.defineProperty(this, "isDataLoading", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(false)
+        });
+        Object.defineProperty(this, "hasEverSuccessfullyLoaded", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(false)
+        });
+        Object.defineProperty(this, "analyticsService", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "lastResponseHash", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "initialized", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        this.analyticsService = analyticsService || null;
+        if (panelConfig) {
+            this.parseBlockData(panelConfig);
+        }
+    }
+    async init(panelConfig) {
+        if (this.analyticsService) {
+            await this.trackPanelView();
+        }
+        this.parseBlockData(panelConfig);
+        this.initialized = true;
+    }
+    cleanup() {
+        this.sections.value = [];
+        this.expandedCardIds.value = new Set();
+        this.lastResponseHash = null;
+        this.initialized = false;
+    }
+    updatePanelConfig(panelConfig) {
+        this.parseBlockData(panelConfig);
+    }
+    async trackPanelView() {
+        try {
+            if (this.analyticsService) {
+                // TODO: Add builder to MaestroPanelType analytics before enabling
+                // await this.analyticsService.panelView('builderBlockPanel');
+            }
+        }
+        catch (error) {
+            captureException(error, {
+                tags: {
+                    component: 'BuilderPanelViewModel',
+                    method: 'trackPanelView',
+                },
+            });
+        }
+    }
+    parseBlockData(panelConfig) {
+        try {
+            this.isDataLoading.value = true;
+            this.setError(null);
+            if (!panelConfig) {
+                throw new Error('Panel config is required');
+            }
+            if (!panelConfig.block_data) {
+                throw new Error('block_data is missing from panel config');
+            }
+            const blockData = panelConfig.block_data;
+            if (!blockData.sections) {
+                throw new Error('sections array is missing from block_data');
+            }
+            if (!Array.isArray(blockData.sections)) {
+                throw new Error('sections must be an array');
+            }
+            const responseHash = stringHashCode(JSON.stringify(blockData.sections));
+            if (responseHash === this.lastResponseHash) {
+                this.isDataLoading.value = false;
+                return;
+            }
+            // Parse the raw config into properly typed sections with camelCase
+            this.sections.value = this.parseSections(blockData.sections);
+            this.lastResponseHash = responseHash;
+            this.hasEverSuccessfullyLoaded.value = true;
+            this.isDataLoading.value = false;
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Failed to parse block data';
+            this.setError(errorMessage);
+            this.isDataLoading.value = false;
+            captureException(error, {
+                tags: {
+                    component: 'BuilderPanelViewModel',
+                    method: 'parseBlockData',
+                },
+                extra: {
+                    panelConfig,
+                },
+            });
+        }
+    }
+    toggleCardExpanded(cardId) {
+        const currentExpandedIds = new Set(this.expandedCardIds.value);
+        if (currentExpandedIds.has(cardId)) {
+            currentExpandedIds.delete(cardId);
+        }
+        else {
+            currentExpandedIds.add(cardId);
+        }
+        this.expandedCardIds.value = currentExpandedIds;
+    }
+    collapseAllCards() {
+        this.expandedCardIds.value = new Set();
+    }
+    parsePadding(raw) {
+        const DEFAULT_PADDING = { top: 8, right: 8, bottom: 8, left: 8 };
+        return {
+            top: raw?.top ?? DEFAULT_PADDING.top,
+            right: raw?.right ?? DEFAULT_PADDING.right,
+            bottom: raw?.bottom ?? DEFAULT_PADDING.bottom,
+            left: raw?.left ?? DEFAULT_PADDING.left,
+        };
+    }
+    parseHeader(raw) {
+        return {
+            content: raw?.content ?? '',
+            enabled: raw?.enabled ?? false,
+            type: (raw?.type ?? 'text'),
+            alt: raw?.alt,
+        };
+    }
+    parseSectionSettings(raw) {
+        return {
+            backgroundColor: raw?.background_color ?? 'transparent',
+            header: this.parseHeader(raw?.header),
+            padding: this.parsePadding(raw?.padding),
+            spacing: raw?.spacing ?? 8,
+            sticky: raw?.sticky ?? false,
+            textAlignment: raw?.text_alignment ?? 'left',
+        };
+    }
+    parseSimpleCard(raw) {
+        return {
+            id: raw.id,
+            type: 'simple',
+            title: raw.title ?? '',
+            image: {
+                url: raw.image?.url ?? '',
+                alt: raw.image?.alt,
+            },
+        };
+    }
+    parseExpandableCard(raw) {
+        return {
+            id: raw.id,
+            type: 'expandable',
+            title: raw.title ?? '',
+            collapsedState: {
+                cards: Array.isArray(raw.collapsed_state?.cards)
+                    ? raw.collapsed_state.cards.map((card) => this.parseSimpleCard(card))
+                    : [],
+            },
+            expandedState: {
+                cards: Array.isArray(raw.expanded_state?.cards)
+                    ? raw.expanded_state.cards.map((card) => this.parseSimpleCard(card))
+                    : [],
+            },
+            settings: raw.settings
+                ? this.parseSectionSettings(raw.settings)
+                : undefined,
+        };
+    }
+    parseCard(raw) {
+        if (!raw || !raw.id) {
+            throw new Error('Card must have an id');
+        }
+        if (raw.type === 'expandable') {
+            return this.parseExpandableCard(raw);
+        }
+        return this.parseSimpleCard(raw);
+    }
+    parseSection(raw) {
+        if (!raw || !raw.id) {
+            throw new Error('Section must have an id');
+        }
+        return {
+            id: raw.id,
+            title: raw.title ?? '',
+            cards: Array.isArray(raw.cards)
+                ? raw.cards.map((card) => this.parseCard(card))
+                : [],
+            settings: this.parseSectionSettings(raw.settings),
+        };
+    }
+    parseSections(rawSections) {
+        if (!Array.isArray(rawSections)) {
+            throw new Error('Sections must be an array');
+        }
+        return rawSections.map((section) => this.parseSection(section));
+    }
+}

package/dist/src/modules/maestro/builder/view-model/index.d.ts

@@ -0,0 +1 @@
+export { BuilderPanelViewModel } from './BuilderPanelViewModel';

package/dist/src/modules/maestro/builder/view-model/index.js

@@ -0,0 +1 @@
+export { BuilderPanelViewModel } from './BuilderPanelViewModel';

package/dist/src/sentry.d.ts

@@ -1,3 +1,3 @@
-declare const initSentry: () => void;
+declare const initSentry: () => Promise<void>;
 export declare const captureException: (error: unknown, extra?: any) => void;
 export default initSentry;