@maestro_io/maestro-web-sdk 5.0.0 → 5.1.0

package/dist/src/modules/maestro/hello-world/HelloWorldView.d.ts

@@ -0,0 +1,11 @@
+import { Component } from 'react';
+import './HelloWorldView.styles.css';
+import { PanelInfo } from '@/view-models/PanelManagerViewModel';
+type State = {
+    unlistedPanels: PanelInfo[];
+};
+declare class HelloWorldView extends Component<{}, State> {
+    constructor(props: {});
+    render(): JSX.Element;
+}
+export default HelloWorldView;

package/dist/src/modules/maestro/hello-world/HelloWorldView.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import './HelloWorldView.styles.css';
+import SDK from '@/index';
+import HelloWorldImage from './HelloWorldImage';
+import Icon from '@/components/atoms/SvgIcon';
+const PANEL_TYPE_NAME_MAP = {
+    chat: 'Chat',
+    shopifyBlockPanel: 'Shopify',
+};
+class HelloWorldView extends Component {
+    constructor(props) {
+        super(props);
+        const vm = SDK.getMaestroEventViewModel().panelManagerViewModel;
+        this.state = {
+            unlistedPanels: vm.getUnlistedPanels(),
+        };
+    }
+    render() {
+        const { unlistedPanels } = this.state;
+        return (React.createElement("div", { className: "hello-world-view", "data-has-unlisted": unlistedPanels.length > 0 },
+            React.createElement(HelloWorldImage, null),
+            React.createElement("div", { className: "title" }, "HELLO, WORLD!"),
+            React.createElement("p", { className: "T20 subtitle" },
+                "Panel component has been",
+                React.createElement("br", null),
+                "installed correctly."),
+            unlistedPanels.length > 0 && (React.createElement("div", { className: "unsupported-panels" },
+                React.createElement("p", { className: "T10 unsupported-text" },
+                    "However, some panels currently active on this",
+                    React.createElement("br", null),
+                    "channel aren't supported on this device:"),
+                React.createElement("ul", { className: "unsupported-list" }, unlistedPanels
+                    .filter((p) => p.type in PANEL_TYPE_NAME_MAP)
+                    .map((panel) => (React.createElement("li", { key: panel.type, className: "T10" },
+                    React.createElement("div", { className: "panel-icon" },
+                        React.createElement(Icon, { iconName: panel.type, width: 24, height: 24 })),
+                    React.createElement("div", { className: "panel-title" }, PANEL_TYPE_NAME_MAP[panel.type])))))))));
+    }
+}
+export default HelloWorldView;

package/dist/src/modules/maestro/hello-world/index.d.ts

@@ -0,0 +1,2 @@
+import HelloWorldView from './HelloWorldView';
+export default HelloWorldView;

package/dist/src/modules/maestro/hello-world/index.js

@@ -0,0 +1,2 @@
+import HelloWorldView from './HelloWorldView';
+export default HelloWorldView;

package/dist/src/sentry.d.ts

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

package/dist/src/sentry.js

@@ -0,0 +1,51 @@
+import pkg from '../package.json';
+const DEV_DOMAINS = [/bbd-web-sdk\.us-central1-dev\.gcp\.maestro\.io/];
+// BrowserClient type is inferred from dynamic import
+let sentryClient = null;
+let pendingErrors = [];
+let isInitializing = false;
+const initSentry = async () => {
+    if (sentryClient || isInitializing)
+        return;
+    if (process.env.NODE_ENV === 'test')
+        return;
+    isInitializing = true;
+    try {
+        const { BrowserClient, defaultStackParser, defaultIntegrations, makeFetchTransport, } = await import('@sentry/browser');
+        const isDev = DEV_DOMAINS.find((domain) => domain.test(window.location.href)) !== null;
+        sentryClient = new BrowserClient({
+            dsn: 'https://91444a71cbaefc62e8dc813f22bad3bf@o4506894189330432.ingest.us.sentry.io/4509946717470720',
+            transport: makeFetchTransport,
+            stackParser: defaultStackParser,
+            integrations: defaultIntegrations.filter((integration) => {
+                // filter integrations that use the global variable
+                return !['BrowserApiErrors', 'Breadcrumbs', 'GlobalHandlers'].includes(integration.name);
+            }),
+            tracesSampleRate: isDev ? 1 : 0.1,
+            release: pkg.version,
+            environment: isDev ? 'development' : 'production',
+            enabled: !/localhost/.test(window.location.href),
+        });
+        // Flush pending errors
+        pendingErrors.forEach(({ error, extra }) => {
+            sentryClient?.captureException(error, extra);
+        });
+        pendingErrors = [];
+    }
+    catch (e) {
+        console.error('[maestro-web-sdk] Failed to load Sentry:', e);
+    }
+    finally {
+        isInitializing = false;
+    }
+};
+export const captureException = (error, extra) => {
+    if (sentryClient) {
+        sentryClient.captureException(error, extra);
+    }
+    else {
+        pendingErrors.push({ error, extra });
+        initSentry(); // Trigger lazy init
+    }
+};
+export default initSentry;

package/dist/src/services/AnalyticsService/AnalyticsService.d.ts

@@ -0,0 +1,85 @@
+import InsightsPayloadBuilder from '../InsightsService/InsightsPayloadBuilder';
+import InsightsService from '../InsightsService/InsightsService';
+import { PageConfig } from '../StaticService/types';
+import { BaseMetadata } from './types';
+import { MaestroPanelType } from '@/models/IPanel';
+type KeyPlaysClickedAction = {
+    type: 'espnKeyPlays';
+    name: 'key_play_clicked';
+    metadata: {
+        action: string;
+        clip: string;
+        key_play: string;
+    };
+};
+type BetsItemClickedAction = {
+    type: 'espnBet';
+    name: 'bets_item_clicked';
+    metadata: {
+        card: string;
+        bet_type: string | null;
+        in_game_bets: number;
+        total_bets: number;
+    };
+};
+type StatsItemClickedAction = {
+    type: 'espnStats';
+    name: 'stats_item_clicked';
+    metadata: {
+        card: string[];
+        game_state: string[];
+    };
+};
+type FantasyItemClickedAction = {
+    type: 'espnFantasy';
+    name: 'fantasy_item_clicked';
+    metadata: {
+        card: string;
+    };
+};
+type ShopItemClickedAction = {
+    type: 'espnShop';
+    name: 'shop_item_clicked';
+    metadata: {
+        card: string[];
+        game_state: string[];
+        product: string | null;
+        entity_type: string[];
+        entity_name: string[];
+        price: string | null;
+        sale: string[];
+    };
+};
+type PanelClickPayload = KeyPlaysClickedAction | BetsItemClickedAction | StatsItemClickedAction | FantasyItemClickedAction | ShopItemClickedAction;
+type PanelData = {
+    panel_type: string;
+    panel_id: string;
+    panel_name: string;
+};
+declare class AnalyticsService {
+    insightsService: InsightsService;
+    insightsPayloadBuilder: InsightsPayloadBuilder;
+    private SDKSessionId;
+    private pageSessionId;
+    private pinchBackSessionId;
+    private pageSessionBeaconTimeoutId;
+    private isPageSessionBeaconRunning;
+    private isPageSessionActive;
+    constructor();
+    private trackAction;
+    private trackImpression;
+    panelView(panelType: MaestroPanelType, metadata?: Record<string, any>): Promise<void>;
+    panelClick({ type, metadata, name }: PanelClickPayload): Promise<void>;
+    getBaseMetadataFromPageConfig(pageConfig: PageConfig | null): BaseMetadata;
+    getPanelDataFromPageConfig(type: MaestroPanelType, pageConfig: PageConfig | null): PanelData;
+    SDKSessionStart(): Promise<void>;
+    pageSessionStart(): Promise<void>;
+    pageSessionEnd(): Promise<void>;
+    pinchBackSessionStart(): Promise<void>;
+    pinchBackSessionEnd(): Promise<void>;
+    SDKSessionEnd(): Promise<void>;
+    private scheduleNextBeacon;
+    private sendSessionBeacon;
+    private sessionBeacon;
+}
+export default AnalyticsService;

package/dist/src/services/AnalyticsService/AnalyticsService.js

@@ -0,0 +1,406 @@
+import InsightsPayloadBuilder from '../InsightsService/InsightsPayloadBuilder';
+import SDK from '../..';
+import InsightsService from '../InsightsService/InsightsService';
+import { version } from '../../../package.json';
+import { captureException } from '@/sentry';
+const SESSION_BEACON_SECONDS = 240;
+class AnalyticsService {
+    constructor() {
+        Object.defineProperty(this, "insightsService", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "insightsPayloadBuilder", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "SDKSessionId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "pageSessionId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "pinchBackSessionId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "pageSessionBeaconTimeoutId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "isPageSessionBeaconRunning", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "isPageSessionActive", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        this.insightsService = new InsightsService();
+        this.insightsPayloadBuilder = new InsightsPayloadBuilder();
+    }
+    async trackAction(event) {
+        if (process.env.NODE_ENV === 'test') {
+            return;
+        }
+        SDK.getMaestroEventViewModel().delegate.trackAction(event);
+        const eventInsightsData = await this.insightsPayloadBuilder.getPayload({
+            ontology: {
+                class: event.e2_class,
+                family: event.e4_family,
+                order: event.e3_order,
+                kingdom: event.e0_kingdom,
+                phylum: event.e1_phylum,
+                genus: event.e5_genus,
+                species: event.e6_species,
+            },
+            metadata: event.metadata,
+        });
+        await this.insightsService.action(eventInsightsData);
+    }
+    async trackImpression(event) {
+        if (process.env.NODE_ENV === 'test') {
+            return;
+        }
+        SDK.getMaestroEventViewModel().delegate.trackImpression(event);
+        const eventInsightsData = await this.insightsPayloadBuilder.getPayload({
+            ontology: {
+                kingdom: event.e0_kingdom,
+                phylum: event.e1_phylum,
+                class: event.e2_class,
+                order: event.e3_order,
+                family: event.e4_family,
+                genus: event.e5_genus,
+                species: event.e6_species,
+            },
+            metadata: event.metadata,
+        });
+        await this.insightsService.action(eventInsightsData);
+    }
+    async panelView(panelType, metadata) {
+        const config = SDK.getPageConfig();
+        const panelData = this.getPanelDataFromPageConfig(panelType, config);
+        await this.trackImpression({
+            name: 'panel_selected',
+            e0_kingdom: 'panel',
+            e1_phylum: 'view',
+            e2_class: panelData.panel_type,
+            e3_order: panelData.panel_id,
+            e4_family: panelData.panel_name,
+            metadata: {
+                ...(metadata || {}),
+                ...this.getBaseMetadataFromPageConfig(config),
+            },
+        });
+    }
+    async panelClick({ type, metadata, name }) {
+        const config = SDK.getPageConfig();
+        const panelData = this.getPanelDataFromPageConfig(type, config);
+        await this.trackAction({
+            name,
+            e0_kingdom: 'panel',
+            e1_phylum: 'engage',
+            e2_class: panelData.panel_type,
+            e3_order: panelData.panel_id,
+            e4_family: panelData.panel_name,
+            metadata: {
+                ...this.getBaseMetadataFromPageConfig(config),
+                ...metadata,
+            },
+        });
+    }
+    getBaseMetadataFromPageConfig(pageConfig) {
+        if (!pageConfig) {
+            console.warn('Page Config not found. Could not extract metadata.');
+            return {
+                league: '',
+                airing: '',
+                event: '',
+                sport: '',
+            };
+        }
+        const metadata = pageConfig.page.metadata;
+        const airing = metadata?.external_field_4 === 'airing'
+            ? metadata.external_field_1 || ''
+            : '';
+        const event = metadata?.external_field_4 === 'event'
+            ? metadata.external_field_1 || 'unknown'
+            : 'unknown';
+        const sport = metadata?.external_field_2 || '';
+        const league = metadata?.external_field_3 || '';
+        return {
+            league,
+            airing,
+            event,
+            sport,
+        };
+    }
+    getPanelDataFromPageConfig(type, pageConfig) {
+        if (!pageConfig) {
+            console.warn('Page Config not found. Could not extract panel data.');
+            return {
+                panel_id: '',
+                panel_name: '',
+                panel_type: '',
+            };
+        }
+        const panel = pageConfig.panels.find((p) => p.panel_type === type);
+        if (!panel) {
+            console.warn(`Panel of type ${type} not found in Page Config.`);
+            return {
+                panel_id: '',
+                panel_name: '',
+                panel_type: '',
+            };
+        }
+        return {
+            panel_id: panel._id,
+            panel_name: panel.panel_name || '',
+            panel_type: panel.panel_type || '',
+        };
+    }
+    async SDKSessionStart() {
+        try {
+            this.SDKSessionId = Math.random().toString(36).substring(2, 15);
+            const eventInsightsData = await this.insightsPayloadBuilder.getPayload({
+                ontology: {
+                    kingdom: 'session',
+                    phylum: 'start',
+                    class: 'sdk',
+                },
+                metadata: {
+                    version,
+                },
+            });
+            await this.insightsService.action(eventInsightsData);
+        }
+        catch (err) {
+            console.error(`Failed to start SDK session: ${err}`);
+            captureException(err, {
+                context: 'AnalyticsService.SDKSessionStart',
+            });
+        }
+    }
+    async pageSessionStart() {
+        try {
+            this.pageSessionId = Math.random().toString(36).substring(2, 15);
+            this.isPageSessionActive = true;
+            const pageConfig = SDK.getPageConfig();
+            const baseMetadata = this.getBaseMetadataFromPageConfig(pageConfig);
+            const eventInsightsData = await this.insightsPayloadBuilder.getPayload({
+                ontology: {
+                    kingdom: 'session',
+                    phylum: 'start',
+                    class: 'page',
+                },
+                metadata: {
+                    ...baseMetadata,
+                    version,
+                    session: this.SDKSessionId,
+                    page_session: this.pageSessionId,
+                },
+            });
+            await this.insightsService.action(eventInsightsData);
+            // Start the beacon cycle with recursive setTimeout
+            this.scheduleNextBeacon();
+        }
+        catch (err) {
+            console.error(`Failed to start page session: ${err}`);
+            captureException(err, {
+                context: 'AnalyticsService.pageSessionStart',
+            });
+        }
+    }
+    async pageSessionEnd() {
+        try {
+            this.isPageSessionActive = false;
+            const pageConfig = SDK.getPageConfig();
+            const baseMetadata = this.getBaseMetadataFromPageConfig(pageConfig);
+            const eventInsightsData = await this.insightsPayloadBuilder.getPayload({
+                ontology: {
+                    kingdom: 'session',
+                    phylum: 'end',
+                    class: 'page',
+                },
+                metadata: {
+                    ...baseMetadata,
+                    version,
+                    session: this.SDKSessionId,
+                    page_session: this.pageSessionId,
+                },
+            });
+            console.log('AnalyticsService: pageSessionEnd', eventInsightsData);
+            await this.insightsService.action(eventInsightsData);
+        }
+        catch (err) {
+            console.error(`Failed to end page session: ${err}`);
+            captureException(err, {
+                context: 'AnalyticsService.pageSessionEnd',
+            });
+        }
+        finally {
+            // Clear any pending beacon timeouts
+            if (this.pageSessionBeaconTimeoutId) {
+                clearTimeout(this.pageSessionBeaconTimeoutId);
+                this.pageSessionBeaconTimeoutId = null;
+            }
+            this.pageSessionId = '';
+        }
+    }
+    async pinchBackSessionStart() {
+        try {
+            this.pinchBackSessionId = Math.random().toString(36).substring(2, 15);
+            const pageConfig = SDK.getPageConfig();
+            const baseMetadata = this.getBaseMetadataFromPageConfig(pageConfig);
+            const eventInsightsData = await this.insightsPayloadBuilder.getPayload({
+                ontology: {
+                    kingdom: 'session',
+                    phylum: 'start',
+                    class: 'pinchback',
+                },
+                metadata: {
+                    ...baseMetadata,
+                    version,
+                    session: this.SDKSessionId,
+                    page_session: this.pageSessionId,
+                    pinchback_session: this.pinchBackSessionId,
+                },
+            });
+            await this.insightsService.action(eventInsightsData);
+        }
+        catch (err) {
+            console.error(`Failed to start pinchback session: ${err}`);
+            captureException(err, {
+                context: 'AnalyticsService.pinchBackSessionStart',
+            });
+        }
+    }
+    async pinchBackSessionEnd() {
+        try {
+            const pageConfig = SDK.getPageConfig();
+            const baseMetadata = this.getBaseMetadataFromPageConfig(pageConfig);
+            const eventInsightsData = await this.insightsPayloadBuilder.getPayload({
+                ontology: {
+                    kingdom: 'session',
+                    phylum: 'end',
+                    class: 'pinchback',
+                },
+                metadata: {
+                    ...baseMetadata,
+                    version,
+                    session: this.SDKSessionId,
+                    page_session: this.pageSessionId,
+                    pinchback_session: this.pinchBackSessionId,
+                },
+            });
+            console.log('AnalyticsService: pinchBackSessionEnd', eventInsightsData);
+            await this.insightsService.action(eventInsightsData);
+        }
+        catch (err) {
+            console.error(`Failed to end pinchback session: ${err}`);
+            captureException(err, {
+                context: 'AnalyticsService.pinchBackSessionEnd',
+            });
+        }
+        finally {
+            this.pinchBackSessionId = '';
+        }
+    }
+    async SDKSessionEnd() {
+        try {
+            const eventInsightsData = await this.insightsPayloadBuilder.getPayload({
+                ontology: {
+                    kingdom: 'session',
+                    phylum: 'end',
+                    class: 'sdk',
+                },
+                metadata: {
+                    version,
+                },
+            });
+            await this.insightsService.action(eventInsightsData);
+        }
+        catch (err) {
+            console.error(`Failed to end SDK session: ${err}`);
+            captureException(err, {
+                context: 'AnalyticsService.SDKSessionEnd',
+            });
+        }
+        finally {
+            this.SDKSessionId = '';
+        }
+    }
+    scheduleNextBeacon() {
+        // Only schedule if page session is still active
+        if (!this.isPageSessionActive) {
+            return;
+        }
+        const globalConfig = SDK.getGlobalConfig();
+        const beaconInterval = globalConfig?.bbd?.analytics?.beacon_interval || SESSION_BEACON_SECONDS;
+        this.pageSessionBeaconTimeoutId = setTimeout(async () => {
+            await this.sendSessionBeacon();
+        }, beaconInterval * 1000);
+    }
+    async sendSessionBeacon() {
+        // Prevent overlapping beacon calls
+        if (this.isPageSessionBeaconRunning || !this.isPageSessionActive) {
+            return;
+        }
+        this.isPageSessionBeaconRunning = true;
+        try {
+            await this.sessionBeacon();
+        }
+        catch (err) {
+            console.error(`Failed to send session beacon: ${err}`);
+            captureException(err, {
+                context: 'AnalyticsService.sendSessionBeacon',
+                SDKSessionId: this.SDKSessionId,
+                pageSessionId: this.pageSessionId,
+            });
+        }
+        finally {
+            this.isPageSessionBeaconRunning = false;
+            // Schedule next beacon only after current one completes
+            if (this.isPageSessionActive) {
+                this.scheduleNextBeacon();
+            }
+        }
+    }
+    async sessionBeacon() {
+        const eventInsightsData = await this.insightsPayloadBuilder.getPayload({
+            ontology: {
+                kingdom: 'session',
+                phylum: 'beacon',
+                class: 'frequent',
+            },
+            metadata: {
+                paywall_gated: false,
+                viewer_id: this.insightsPayloadBuilder.getDevicePermanentID(),
+                is_billable: false,
+                session: this.SDKSessionId,
+                page_session: this.pageSessionId,
+                pinchback_session: this.pinchBackSessionId,
+            },
+        });
+        await this.insightsService.action(eventInsightsData);
+    }
+}
+export default AnalyticsService;

package/dist/src/services/AnalyticsService/types.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Generic metadata type that accepts any object extending BaseMetadata
+ */
+export type Metadata = BaseMetadata & {
+    [key: string]: any;
+};
+export type Kingdom = 'panel';
+export type Phylum = 'view' | 'engage';
+/**
+ * Base metadata analytics events should include
+ */
+export interface BaseMetadata {
+    league: string;
+    event: string;
+    airing: string;
+    sport: string;
+}
+export type PanelViewAction = {
+    name: 'panel_selected';
+    e0_kingdom: Kingdom;
+    e1_phylum: Phylum;
+    /**
+     * Panel Type
+     */
+    e2_class: string;
+    /**
+     * Panel ID
+     */
+    e3_order: string;
+    /**
+     * Panel Name
+     */
+    e4_family: string;
+    e5_genus?: string;
+    e6_species?: string;
+    /**
+     * Additional metadata for the panel view action.
+     */
+    metadata: Metadata;
+};
+export type ImpressionTrackEvent = PanelViewAction;
+export type PanelClickAction = {
+    name: string;
+    e0_kingdom: 'panel';
+    e1_phylum: 'engage';
+    /**
+     * Panel Type
+     */
+    e2_class: string;
+    /**
+     * Panel ID.
+     */
+    e3_order: string;
+    /**
+     * Panel Name
+     */
+    e4_family: string;
+    e5_genus?: string;
+    e6_species?: string;
+    /**
+     * Additional metadata for the panel click action.
+     */
+    metadata: Metadata;
+};
+export type ActionTrackEvent = PanelClickAction;

package/dist/src/services/AnalyticsService/types.js

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