@maestro_io/maestro-web-sdk 5.0.0 → 5.1.0

package/dist/src/modules/espn/shop/view/components/ShopPromoView/ShopPromoView.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { withFocusable, } from '@/external/spatial-navigation';
+import './ShopPromoView.styles.css';
+import Image from '@/components/atoms/Image';
+const ShopPromoView = (props) => {
+    const promo = props.promoData;
+    return (React.createElement("div", { className: "shop-promo-view focus-ring T20", "data-focused": props.focused, style: { backgroundImage: `url(${promo.detail?.backgroundImage})` } },
+        React.createElement(Image, { src: promo.image?.href, alt: "Promo Logo", className: "shop-promo-logo" }),
+        React.createElement("div", { className: "shop-promo-title T30 FONT_BOLD" }, promo.detail?.title),
+        React.createElement(Image, { src: promo.detail?.qrCode, alt: "QR Code", className: "shop-promo-qr-code" }),
+        React.createElement("p", { className: "shop-promo-description T20 FONT_BOLD" }, promo.detail?.link?.text)));
+};
+const FocusablePromoView = withFocusable()(ShopPromoView);
+const ShopPromoViewWrapper = (props) => {
+    return (React.createElement("div", null,
+        React.createElement(FocusablePromoView, { ...props }),
+        React.createElement("div", { className: "promo-view-disclaimer T02 TEXT_200 FONT_BOLD" }, props.promoData.detail?.disclaimer)));
+};
+export default ShopPromoViewWrapper;

package/dist/src/modules/espn/shop/view/components/ShopPromoView/index.d.ts

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

package/dist/src/modules/espn/shop/view/components/ShopPromoView/index.js

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

package/dist/src/modules/espn/shop/view/components/ShopSection/ShopSection.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './ShopSection.styles.css';
+import { IShopBrowseCard, IShopProduct, IShopSection } from '../../../types';
+import { Direction } from '@/external/spatial-navigation/utils';
+export type ShopSectionProps = {
+    sectionIndex: number;
+    section: IShopSection;
+    onArrowPress: (direction: Direction) => void;
+    onItemClick: (item: IShopProduct | IShopBrowseCard, section: IShopSection, focusKey: string) => void;
+};
+declare const ShopSection: React.FC<ShopSectionProps>;
+export default ShopSection;

package/dist/src/modules/espn/shop/view/components/ShopSection/ShopSection.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import './ShopSection.styles.css';
+import ProductSummaryCard from '../ProductSummaryCard';
+import { useScrollableContainer } from '@/components/core/ScrollableContainer';
+import FocusableItem from '@/components/core/ScrollableContainer/FocusableItem';
+import BrowseCard from '../BrowseCard';
+const ShopSection = ({ section, sectionIndex, onArrowPress, onItemClick, }) => {
+    const { scrollToFocusedElement } = useScrollableContainer();
+    const onBecameFocused = (layout) => {
+        scrollToFocusedElement(layout, {
+            offsetTop: 40,
+        });
+    };
+    const onEnterPress = (item, section, focusKey) => () => {
+        onItemClick(item, section, focusKey);
+    };
+    return (React.createElement("div", { className: "shop-section" },
+        React.createElement("h2", { className: "shop-section-title TEXT_200" }, section.title),
+        React.createElement("div", { className: "shop-section-items" }, section.items?.map((item, itemIndex) => {
+            const focusKey = `shop-section-${sectionIndex}-item-${itemIndex}`;
+            if (item.type === 'product') {
+                return (React.createElement(FocusableItem, { key: itemIndex },
+                    React.createElement(ProductSummaryCard, { product: item, onEnterPress: onEnterPress(item, section, focusKey), onArrowPress: onArrowPress, onBecameFocused: onBecameFocused, focusKey: focusKey })));
+            }
+            else if (item.type === 'browse') {
+                return (React.createElement(FocusableItem, { key: itemIndex },
+                    React.createElement(BrowseCard, { key: itemIndex, browseCard: item, onArrowPress: onArrowPress, onEnterPress: onEnterPress(item, section, focusKey), onBecameFocused: onBecameFocused, focusKey: focusKey })));
+            }
+            else {
+                return null;
+            }
+        }))));
+};
+export default ShopSection;

package/dist/src/modules/espn/shop/view/components/ShopSection/index.d.ts

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

package/dist/src/modules/espn/shop/view/components/ShopSection/index.js

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

package/dist/src/modules/espn/shop/view/index.d.ts

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

package/dist/src/modules/espn/shop/view/index.js

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

package/dist/src/modules/espn/shop/view-model/ShopViewModel.ShopPolling.d.ts

@@ -0,0 +1,31 @@
+import ShopService from '@/modules/espn/shop/services/ShopService';
+import { IShopResponse } from '../types';
+export default class ShopPolling {
+    private polling;
+    private shopService;
+    constructor(service: ShopService);
+    /**
+     * Refresh polling for shop data
+     */
+    refresh(callback: (data: IShopResponse) => void): void;
+    /**
+     * Stop polling for shop data
+     */
+    stop(): void;
+    removeLastResponseHash(): void;
+    private start;
+    /**
+     * @description Update polling interval checking either response header or panel config.
+     * Refresh polling if necessary.
+     */
+    private updateInterval;
+    private getResponseHeaderPollingIntervalValue;
+    /**
+     * Process data received from polling
+     */
+    private processPolledData;
+    /**
+     * Handle errors that occur during shop polling
+     */
+    private handlePollingError;
+}

package/dist/src/modules/espn/shop/view-model/ShopViewModel.ShopPolling.js

@@ -0,0 +1,111 @@
+import { captureException } from '@/sentry';
+import { stringHashCode } from '@/helpers/strings';
+const DEFAULT_SHOP_POLLING_INTERVAL = 30000; // 30 seconds
+export default class ShopPolling {
+    constructor(service) {
+        Object.defineProperty(this, "polling", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                interval: DEFAULT_SHOP_POLLING_INTERVAL,
+                task: null,
+                lastResponseHash: null,
+            }
+        });
+        Object.defineProperty(this, "shopService", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.shopService = service;
+    }
+    /**
+     * Refresh polling for shop data
+     */
+    refresh(callback) {
+        // First stop any existing polling
+        this.stop();
+        // Start the poll loop
+        this.start(callback);
+    }
+    /**
+     * Stop polling for shop data
+     */
+    stop() {
+        if (this.polling.task) {
+            this.polling.task.stop();
+            this.polling.task = null;
+        }
+    }
+    removeLastResponseHash() {
+        this.polling.lastResponseHash = null;
+    }
+    start(callback) {
+        try {
+            this.polling.task = this.shopService.pollShopData(this.polling.interval, (response) => {
+                this.updateInterval(response.headers, callback);
+                this.processPolledData(response.data, callback);
+            }, (error) => this.handlePollingError(error));
+        }
+        catch (error) {
+            captureException(error, {
+                context: 'ShopViewModel.pollShop',
+            });
+            console.error('[SHOP] Error setting up shop polling:', error);
+        }
+    }
+    /**
+     * @description Update polling interval checking either response header or panel config.
+     * Refresh polling if necessary.
+     */
+    updateInterval(headers, callback) {
+        const headerInterval = this.getResponseHeaderPollingIntervalValue(headers);
+        // Only update if we have a valid new interval and it's different from current
+        if (headerInterval && headerInterval !== this.polling.interval) {
+            console.log(`[SHOP] Updating shop polling interval from ${this.polling.interval}ms to ${headerInterval}ms`);
+            this.polling.interval = headerInterval;
+            // Restart polling with the new interval
+            this.refresh(callback);
+        }
+    }
+    getResponseHeaderPollingIntervalValue(headers) {
+        const newInterval = headers['polling-interval'];
+        if (!newInterval) {
+            return null;
+        }
+        const parsedInterval = parseInt(newInterval, 10);
+        if (isNaN(parsedInterval) || parsedInterval <= 0) {
+            console.warn(`[SHOP] Invalid polling interval header received: ${newInterval}.`);
+            return null;
+        }
+        return parsedInterval * 1000; // Convert seconds to milliseconds
+    }
+    /**
+     * Process data received from polling
+     */
+    processPolledData(data, callback) {
+        // Calculate hash for the response to check if it's different from the last one
+        const responseHash = stringHashCode(JSON.stringify(data));
+        // Check if this is the same as the last successful response
+        if (this.polling.lastResponseHash === responseHash) {
+            console.log('[SHOP] Shop Response hash is the same as last successful response - skipping update');
+            return;
+        }
+        this.polling.lastResponseHash = responseHash;
+        callback(data);
+    }
+    /**
+     * Handle errors that occur during shop polling
+     */
+    handlePollingError(error) {
+        console.error('[SHOP] Shop polling error:', error);
+        captureException(error, {
+            context: 'ShopViewModel.pollShop',
+            extra: {
+                pollingInterval: this.polling.interval,
+            },
+        });
+    }
+}

package/dist/src/modules/espn/shop/view-model/ShopViewModel.d.ts

@@ -0,0 +1,73 @@
+import { Observable } from '../../../../helpers/Observable';
+import AnalyticsService from '@/services/AnalyticsService/AnalyticsService';
+import { ViewModel } from '../../../../view-models/ViewModel';
+import { IShopSection, IShopProduct, IShopBrowseCard, IShopDefaultItem } from '../types';
+declare const SHOP_ERROR_STATE: {
+    readonly NONE: "none";
+    readonly TAB_LOAD_FAILURE: "tabLoadFailure";
+    readonly EMPTY_SHOP: "emptyShop";
+};
+export type ShopErrorState = typeof SHOP_ERROR_STATE[keyof typeof SHOP_ERROR_STATE];
+/**
+ * ViewModel for Shop panel
+ * Manages shop data fetching, polling, and state
+ */
+export declare class ShopViewModel extends ViewModel {
+    sections: Observable<IShopSection[]>;
+    isDataLoading: Observable<boolean>;
+    errorState: Observable<ShopErrorState>;
+    hasEverSuccessfullyLoaded: Observable<boolean>;
+    promoData: Observable<IShopDefaultItem | null>;
+    private shopService;
+    private analyticsService;
+    private shopPolling;
+    private useMockData;
+    private mockDataType;
+    initialized: boolean;
+    constructor(eventId: string, analyticsService: AnalyticsService, options?: {
+        useMockData?: boolean;
+        mockDataType?: 'nfl' | 'nba' | 'ncf' | 'empty' | 'single';
+    });
+    /**
+     * Initialize the ViewModel and start data fetching
+     */
+    init(): void;
+    /**
+     * Clean up resources when the ViewModel is no longer needed
+     */
+    cleanup(): void;
+    /**
+     * Track panel view event
+     */
+    private trackPanelView;
+    /**
+     * Parse price string to number, handling currency formats
+     */
+    private parsePriceToNumber;
+    /**
+     * Track shop item card click event
+     */
+    trackItemClick(card: 'product_summary' | 'want more' | 'product_detail' | 'fallback', item: IShopProduct | IShopBrowseCard | null, section: IShopSection | null): Promise<void>;
+    /**
+     * Refresh polling for shop data
+     */
+    refreshPolling(): void;
+    /**
+     * Process the shop data and update the sections
+     */
+    private processShopData;
+    setTabLoadFailure(): void;
+    /**
+     * Fetch new shop data immediately (one-time)
+     */
+    fetchNewData(): void;
+    /**
+     * Fetch mock data for testing
+     */
+    private fetchMockData;
+    /**
+     * Clear tab load failure and retry
+     */
+    clearTabLoadFailure(): void;
+}
+export default ShopViewModel;

package/dist/src/modules/espn/shop/view-model/ShopViewModel.js

@@ -0,0 +1,323 @@
+import { Observable } from '../../../../helpers/Observable';
+import ShopService from '../services/ShopService';
+import { ViewModel } from '../../../../view-models/ViewModel';
+import { isShopProduct, } from '../types';
+import { MOCK_SHOP_NFL_RESPONSE, MOCK_SHOP_NBA_RESPONSE, MOCK_SHOP_NCF_RESPONSE, MOCK_SHOP_EMPTY_RESPONSE, MOCK_SHOP_SINGLE_SECTION_RESPONSE, } from '../mocks';
+import { captureException } from '@/sentry';
+import ShopPolling from './ShopViewModel.ShopPolling';
+import SDK from '@/index';
+const SHOP_ERROR_STATE = {
+    NONE: 'none',
+    TAB_LOAD_FAILURE: 'tabLoadFailure',
+    EMPTY_SHOP: 'emptyShop',
+};
+/**
+ * ViewModel for Shop panel
+ * Manages shop data fetching, polling, and state
+ */
+export class ShopViewModel extends ViewModel {
+    constructor(eventId, analyticsService, options = {}) {
+        super();
+        // Observable properties
+        Object.defineProperty(this, "sections", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable([])
+        });
+        Object.defineProperty(this, "isDataLoading", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(true)
+        });
+        Object.defineProperty(this, "errorState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable('none')
+        });
+        Object.defineProperty(this, "hasEverSuccessfullyLoaded", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(false)
+        });
+        Object.defineProperty(this, "promoData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Observable(null)
+        });
+        // Properties
+        Object.defineProperty(this, "shopService", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "analyticsService", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "shopPolling", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "useMockData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "mockDataType", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'nfl'
+        });
+        Object.defineProperty(this, "initialized", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        this.shopService = new ShopService(eventId);
+        this.analyticsService = analyticsService;
+        this.shopPolling = new ShopPolling(this.shopService);
+        this.useMockData = options.useMockData || false;
+        this.mockDataType = options.mockDataType || 'nfl';
+    }
+    /**
+     * Initialize the ViewModel and start data fetching
+     */
+    init() {
+        // Track panel view on initialization
+        this.trackPanelView();
+        this.fetchNewData();
+        this.initialized = true;
+    }
+    /**
+     * Clean up resources when the ViewModel is no longer needed
+     */
+    cleanup() {
+        this.shopPolling.stop();
+        this.initialized = false;
+    }
+    /**
+     * Track panel view event
+     */
+    async trackPanelView() {
+        try {
+            const gameState = SDK.getMaestroEventViewModel().statsViewModel?.currentGameState.value ||
+                'unknown';
+            await this.analyticsService.panelView('espnShop', {
+                game_state: [gameState],
+            });
+        }
+        catch (error) {
+            captureException(error, {
+                context: 'ShopViewModel.trackPanelView',
+            });
+            console.error('[SHOP] Error tracking panel view:', error);
+        }
+    }
+    /**
+     * Parse price string to number, handling currency formats
+     */
+    parsePriceToNumber(priceString) {
+        // Remove currency symbols and spaces
+        const cleaned = priceString.replace(/[^0-9.,]/g, '');
+        // Find the last occurrence of comma or dot (decimal separator)
+        const lastComma = cleaned.lastIndexOf(',');
+        const lastDot = cleaned.lastIndexOf('.');
+        let normalized;
+        if (lastComma > lastDot) {
+            // EU format: €1.234,56 -> comma is decimal separator
+            normalized = cleaned.replace(/\./g, '').replace(',', '.');
+        }
+        else if (lastDot > lastComma) {
+            // US format: $1,234.56 -> dot is decimal separator
+            normalized = cleaned.replace(/,/g, '');
+        }
+        else if (lastComma !== -1) {
+            // Only comma present, assume decimal: €25,00
+            normalized = cleaned.replace(',', '.');
+        }
+        else if (lastDot !== -1) {
+            // Only dot present, assume decimal: $25.00
+            normalized = cleaned;
+        }
+        else {
+            // No separators: 25
+            normalized = cleaned;
+        }
+        return Number(normalized) || 0;
+    }
+    /**
+     * Track shop item card click event
+     */
+    async trackItemClick(card, item, section) {
+        try {
+            let sale = 0;
+            let price = null;
+            const gameState = SDK.getMaestroEventViewModel().statsViewModel?.currentGameState.value ||
+                'unknown';
+            if (item && isShopProduct(item)) {
+                const basePrice = item.price?.displayRetail;
+                const currentPrice = item.price?.displayClearance ||
+                    item.price?.displaySale ||
+                    item.price?.displayRetail;
+                if (currentPrice && basePrice) {
+                    const basePriceNumber = this.parsePriceToNumber(basePrice);
+                    const salePriceNumber = this.parsePriceToNumber(currentPrice);
+                    if (basePriceNumber > 0) {
+                        sale = Math.round((1 - salePriceNumber / basePriceNumber) * 100);
+                    }
+                    else {
+                        sale = 0;
+                    }
+                    price = currentPrice;
+                }
+            }
+            await this.analyticsService.panelClick({
+                type: 'espnShop',
+                name: 'shop_item_clicked',
+                metadata: {
+                    card: [card],
+                    game_state: [gameState],
+                    product: section?.product?.id || null,
+                    entity_type: [section?.product?.type || 'unknown'],
+                    entity_name: [section?.product?.shortDisplayName || 'unknown'],
+                    price,
+                    sale: [`${sale}%`],
+                },
+            });
+        }
+        catch (error) {
+            captureException(error, {
+                context: 'ShopViewModel.trackItemClick',
+                item,
+                section,
+            });
+            console.error('[SHOP] Error tracking shop item click:', error);
+        }
+    }
+    /**
+     * Refresh polling for shop data
+     */
+    refreshPolling() {
+        try {
+            if (this.useMockData) {
+                return;
+            }
+            this.shopPolling.refresh(this.processShopData.bind(this));
+        }
+        catch (err) {
+            this.setTabLoadFailure();
+        }
+    }
+    /**
+     * Process the shop data and update the sections
+     */
+    processShopData(data) {
+        try {
+            const shop = data.shop?.[0];
+            const sections = shop?.sections || [];
+            // Check if there are any sections
+            if (!sections?.length && shop?.defaultItem) {
+                this.errorState.value = 'emptyShop';
+                this.sections.value = [];
+                this.promoData.value = shop.defaultItem;
+                return;
+            }
+            // Update sections and clear error state
+            this.sections.value = sections;
+            this.errorState.value = 'none';
+            this.hasEverSuccessfullyLoaded.value = true;
+            if (this.isDataLoading.value) {
+                this.isDataLoading.value = false;
+            }
+        }
+        catch (err) {
+            captureException(err, {
+                context: 'ShopViewModel.processShopData',
+            });
+            console.error('[SHOP] Error processing shop data:', err);
+            this.setTabLoadFailure();
+        }
+    }
+    setTabLoadFailure() {
+        if (!this.hasEverSuccessfullyLoaded.value) {
+            this.errorState.value = 'tabLoadFailure';
+            this.sections.value = [];
+        }
+        if (this.isDataLoading.value) {
+            this.isDataLoading.value = false;
+        }
+    }
+    /**
+     * Fetch new shop data immediately (one-time)
+     */
+    fetchNewData() {
+        this.isDataLoading.value = true;
+        try {
+            // Handle mock data if enabled
+            if (this.useMockData) {
+                this.sections.value = [];
+                this.fetchMockData();
+                return;
+            }
+            this.refreshPolling();
+        }
+        catch (error) {
+            captureException(error, {
+                context: 'ShopViewModel.fetchNewData',
+            });
+            console.error('[SHOP] Error fetching shop data:', error);
+            this.setTabLoadFailure();
+        }
+    }
+    /**
+     * Fetch mock data for testing
+     */
+    fetchMockData() {
+        let mockData;
+        switch (this.mockDataType) {
+            case 'nba':
+                mockData = MOCK_SHOP_NBA_RESPONSE;
+                break;
+            case 'ncf':
+                mockData = MOCK_SHOP_NCF_RESPONSE;
+                break;
+            case 'empty':
+                mockData = MOCK_SHOP_EMPTY_RESPONSE;
+                break;
+            case 'single':
+                mockData = MOCK_SHOP_SINGLE_SECTION_RESPONSE;
+                break;
+            case 'nfl':
+            default:
+                mockData = MOCK_SHOP_NFL_RESPONSE;
+                break;
+        }
+        this.processShopData(mockData);
+        this.hasEverSuccessfullyLoaded.value = true;
+        this.isDataLoading.value = false;
+    }
+    /**
+     * Clear tab load failure and retry
+     */
+    clearTabLoadFailure() {
+        this.errorState.value = 'none';
+        this.shopPolling.removeLastResponseHash();
+        setTimeout(() => {
+            this.refreshPolling();
+        }, 100);
+    }
+}
+export default ShopViewModel;

package/dist/src/modules/espn/stats/components/TeamStatistic.d.ts

@@ -0,0 +1,16 @@
+export interface TeamStatisticProps {
+    statisticName: string;
+    firstDisplayValue: string | number;
+    secondDisplayValue: string | number;
+    awayProgressValue: number;
+    homeProgressValue: number;
+    classNames?: {
+        container?: string;
+        header?: string;
+        firstValue?: string;
+        secondValue?: string;
+        statisticName?: string;
+    };
+}
+declare const TeamStatistic: (props: TeamStatisticProps) => JSX.Element;
+export default TeamStatistic;

package/dist/src/modules/espn/stats/components/TeamStatistic.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import StatsProgressBar from '../view/Teams/StatsProgressBar';
+const TeamStatistic = (props) => {
+    const { statisticName, firstDisplayValue, secondDisplayValue, awayProgressValue, homeProgressValue, classNames = {}, } = props;
+    const { container = 'team-stat-item', header = 'stat-header', firstValue = 'stat-value away-value', secondValue = 'stat-value home-value', statisticName: statisticNameClass = 'stat-name', } = classNames;
+    return (React.createElement("div", { className: container },
+        React.createElement("div", { className: header },
+            React.createElement("span", { className: firstValue }, firstDisplayValue),
+            React.createElement("span", { className: statisticNameClass }, statisticName),
+            React.createElement("span", { className: secondValue }, secondDisplayValue)),
+        React.createElement(StatsProgressBar, { awayTeamValue: awayProgressValue, homeTeamValue: homeProgressValue })));
+};
+export default TeamStatistic;