@maestro_io/maestro-web-sdk 3.3.1 → 4.0.0-beta.1

package/dist/src/modules/bets/view/BetsView.js

@@ -0,0 +1,143 @@
+import React, { Component } from 'react';
+import SixPackView from './SixPack/SixPackView';
+import './BetsView.styles.css';
+import ScrollableContainer from '@/components/core/ScrollableContainer';
+import SDK from '@/index';
+import UserBetsView from './UserBets/UserBetsView';
+import HotPropsView from './HotProps/HotPropsView';
+import GamblingDisclaimer from './components/GamblingDisclaimer/GamblingDisclaimer';
+import LocationWarning from './components/LocationWarning/LocationWarning';
+import { BetItemPromoCode } from './components/PromoCodeBanner';
+import TabLoadErrorView from '@/components/molecules/TabLoadError';
+class BetsView extends Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "betsItemsUnsub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "isDataLoadingUnsub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "errorStateUnsub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "hideWagersUnsub", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "vm", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "renderBetItem", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (item) => {
+                switch (item.type) {
+                    case 'sixPack':
+                        return React.createElement(SixPackView, { key: item.id, item: item });
+                    case 'userBets':
+                        return React.createElement(UserBetsView, { item: item, key: item.id });
+                    case 'hotProps':
+                        return (React.createElement(HotPropsView, { focusKey: `hot-props-view-${item.id}`, key: item.id, item: item }));
+                    case 'gamblingMessage':
+                        return React.createElement(GamblingDisclaimer, { text: item.data.text, key: item.id });
+                    case 'locationDisclaimer':
+                        return (React.createElement(LocationWarning, { key: item.id, disclaimerText: item.data.text }));
+                    case 'promo':
+                        return (React.createElement(BetItemPromoCode, { description: item.data.description, logo: item.data.logo, qrCode: item.data.qrCode, title: item.data.title, backgroundImage: item.data.backgroundImage, key: item.id }));
+                    default:
+                        console.warn(`Unknown bet item type: ${item.type}`);
+                        return null;
+                }
+            }
+        });
+        Object.defineProperty(this, "clearTabLoadFailure", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.viewModel.clearTabLoadFailure();
+            }
+        });
+        Object.defineProperty(this, "onArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (d) => {
+                if (d === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+            }
+        });
+        this.vm = SDK.getMaestroEventViewModel().betsViewModel;
+        this.state = {
+            container: null,
+            betsItems: this.viewModel.betsItems.value,
+            isDataLoading: this.viewModel.isDataLoading.value,
+            errorState: this.viewModel.errorState.value,
+            hideWagers: this.viewModel.hideWagers.value,
+        };
+    }
+    get viewModel() {
+        if (!this.vm) {
+            throw new Error('BetsViewModel is not initialized');
+        }
+        return this.vm;
+    }
+    componentDidMount() {
+        this.setState({
+            container: this.container,
+        });
+        this.betsItemsUnsub = this.viewModel.betsItems.subscribe((value) => {
+            this.setState({ betsItems: value });
+        });
+        this.isDataLoadingUnsub = this.viewModel.isDataLoading.subscribe((value) => {
+            this.setState({ isDataLoading: value });
+        });
+        this.errorStateUnsub = this.viewModel.errorState.subscribe((value) => {
+            this.setState({ errorState: value });
+        });
+        this.hideWagersUnsub = this.viewModel.hideWagers.subscribe((value) => {
+            this.setState({ hideWagers: value });
+        });
+        // Initialize the view model
+        this.viewModel.init();
+    }
+    componentWillUnmount() {
+        this.betsItemsUnsub && this.betsItemsUnsub();
+        this.isDataLoadingUnsub && this.isDataLoadingUnsub();
+        this.errorStateUnsub && this.errorStateUnsub();
+        this.hideWagersUnsub && this.hideWagersUnsub();
+        // Clean up the view model
+        this.viewModel.cleanup();
+    }
+    render() {
+        return (React.createElement(ScrollableContainer, { scrollableContainerRef: this.state.container, containerTopOffset: 40, "data-has-error": this.state.errorState !== 'none' }, this.state.errorState === 'tabLoadFailure' ? (React.createElement("div", null,
+            React.createElement(TabLoadErrorView, { onEnterPress: this.clearTabLoadFailure, onArrowPress: this.onArrowPress }),
+            React.createElement("div", { className: "bets-bottom-padding" }))) : (React.createElement("div", { className: "bets-view", ref: (e) => (this.container = e) },
+            this.state.betsItems.map(this.renderBetItem),
+            React.createElement("div", { className: "bets-bottom-padding" })))));
+    }
+}
+export default BetsView;

package/dist/src/modules/bets/view/HotProps/HotPropsView.d.ts

@@ -9,7 +9,7 @@ type HotPropsViewProps = {
     hasFocusedChild?: boolean;
 };
 declare const _default: {
-    new (props?: (HotPropsViewProps & WithFocusableProps) | undefined, context?: any): {
+    new (props: (HotPropsViewProps & WithFocusableProps) | Readonly<HotPropsViewProps & WithFocusableProps>): {
         state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
         navigation: import("../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
@@ -29,20 +29,65 @@ declare const _default: {
         componentDidMount(): void;
         componentDidUpdate(): void;
         componentWillUnmount(): void;
-        render(): React.ReactElement<HotPropsViewProps & WithFocusableProps>;
-        setState<K extends keyof import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: HotPropsViewProps & WithFocusableProps) => import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>) | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>, callback?: (() => any) | undefined): void;
-        forceUpdate(callBack?: (() => any) | undefined): void;
-        props: Readonly<{
-            children?: React.ReactNode;
-        }> & Readonly<HotPropsViewProps & WithFocusableProps>;
+        render(): React.ReactElement<HotPropsViewProps & WithFocusableProps, string | React.JSXElementConstructor<any>>;
         context: any;
+        setState<K extends keyof import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<HotPropsViewProps & WithFocusableProps>) => import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<HotPropsViewProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
         refs: {
             [key: string]: React.ReactInstance;
         };
+        shouldComponentUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<HotPropsViewProps & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
         componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: HotPropsViewProps & WithFocusableProps, context: any): {
+        state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: Direction, details?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: Direction, details: import("@/external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: Layout, details: import("@/external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: Layout, details: import("@/external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<HotPropsViewProps & WithFocusableProps, string | React.JSXElementConstructor<any>>;
+        context: any;
+        setState<K extends keyof import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<HotPropsViewProps & WithFocusableProps>) => import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<HotPropsViewProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
         shouldComponentUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<HotPropsViewProps & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
     };
     contextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
@@ -50,5 +95,6 @@ declare const _default: {
     childContextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
     };
+    contextType?: React.Context<any> | undefined;
 };
 export default _default;

package/dist/src/modules/bets/view/HotProps/HotPropsView.js

@@ -0,0 +1,150 @@
+import React from 'react';
+import { withFocusable, } from '@/external/spatial-navigation';
+import Bet from '../components/Bet/Bet';
+import BetsCard from '../components/BetsCard/BetsCard';
+import Icon from '@/components/atoms/SvgIcon/Icon';
+import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
+import './HotPropsView.css';
+import BetsCardHeader from '../components/BetsCard/BetsCardHeader';
+import SDK from '@/index';
+const BETS_MIN_VISIBLE = 4;
+class HotPropsView extends React.Component {
+    constructor() {
+        super(...arguments);
+        // Helper function to focus a specific bet by index
+        Object.defineProperty(this, "focusBet", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (index) => {
+                SDK.getMaestroEventViewModel().navigation.setFocus(this.getBetFocusKey(index));
+            }
+        });
+        // Helper function to focus back to the card
+        Object.defineProperty(this, "focusCard", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                SDK.getMaestroEventViewModel().navigation.setFocus(this.getCardFocusKey());
+            }
+        });
+        // Helper function to get the total number of bets
+        Object.defineProperty(this, "getTotalBets", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                return this.props.item.data.items.length || 0;
+            }
+        });
+        Object.defineProperty(this, "handleEnterPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                // Track card click for hot props
+                this.viewModel.trackCardClick('hot-props');
+                SDK.getMaestroEventViewModel().navigation.setFocus(this.getBetFocusKey(0));
+            }
+        });
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
+        });
+        Object.defineProperty(this, "onCardBecameFocused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (layout) => {
+                this.context.scrollToFocusedElement(layout);
+            }
+        });
+        Object.defineProperty(this, "onBetBecameFocused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (layout) => {
+                this.context.scrollToFocusedElement(layout);
+            }
+        });
+        Object.defineProperty(this, "onBetArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (index) => (direction, _props) => {
+                if (direction === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+                if (index === 0 && direction === 'up') {
+                    // If the first bet is focused and up arrow is pressed, focus the card itself
+                    this.focusCard();
+                    return false; // Prevent further propagation
+                }
+            }
+        });
+        Object.defineProperty(this, "onCardArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (d, _props) => {
+                if (d === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+            }
+        });
+    }
+    getBetFocusKey(index) {
+        return `hotprops-bet-${this.props.item.id}-${index}`;
+    }
+    getCardFocusKey() {
+        return `hot-props-${this.props.item.id}`;
+    }
+    renderFlameIcon() {
+        return React.createElement(Icon, { iconName: "flame", width: 20, height: 20 });
+    }
+    get viewModel() {
+        const vm = SDK.getMaestroEventViewModel().betsViewModel;
+        if (!vm) {
+            throw new Error('BetsViewModel is not initialized');
+        }
+        return vm;
+    }
+    renderHeader(props, remaining) {
+        return (React.createElement(BetsCardHeader, { betCardProps: props, betType: "Hot Props", cardExpanded: !!this.props.hasFocusedChild, renderIcon: this.renderFlameIcon, legCount: this.getTotalBets(), legCountThreshold: BETS_MIN_VISIBLE }, remaining > 0 ? (React.createElement("span", null,
+            this.props.item.data.items.length,
+            " Props")) : null));
+    }
+    renderFooter(remaining, expanded) {
+        return !expanded && remaining > 0 ? (React.createElement("div", { className: "hot-props-footer T05_ALT" },
+            "+",
+            remaining,
+            " More")) : null;
+    }
+    get lineItems() {
+        const items = this.props.item.data.items;
+        if (this.props.hasFocusedChild) {
+            return items;
+        }
+        return items.slice(0, BETS_MIN_VISIBLE);
+    }
+    render() {
+        const { item, focused } = this.props;
+        const lineItems = item.data.items;
+        const remaining = lineItems.length - BETS_MIN_VISIBLE;
+        return (React.createElement("div", { className: "hot-props-bet-card" },
+            React.createElement(BetsCard, { focusKey: this.getCardFocusKey(), focused: focused, header: (props) => this.renderHeader(props, remaining), footer: () => this.renderFooter(remaining, !!this.props.hasFocusedChild), onEnterPress: this.handleEnterPress, onBecameFocused: this.onCardBecameFocused, onArrowPress: this.onCardArrowPress },
+                React.createElement("div", { className: "hot-props-list" }, this.lineItems.map((item, idx) => {
+                    return (React.createElement(Bet, { key: item.id, focusKey: this.getBetFocusKey(idx), leg: item, focusable: this.props.hasFocusedChild, onBackPress: this.focusCard, onBecameFocused: this.onBetBecameFocused, onArrowPress: this.onBetArrowPress(idx), parentFocusKey: this.props.focusKey, hideWagers: this.props.item.hideWagers }));
+                })))));
+    }
+}
+Object.defineProperty(HotPropsView, "contextTypes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: SCROLLABLE_CONTEXT_TYPE
+});
+export default withFocusable({ trackChildren: true })(HotPropsView);

package/dist/src/modules/bets/view/SixPack/SixPackView.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="prop-types" />
 import React from 'react';
 import './SixPackView.style.css';
 import { WithFocusableProps } from '@/external/spatial-navigation';
@@ -8,15 +9,15 @@ type Props = WithFocusableProps & {
 };
 export default class FocusableSixPackViewWrapper extends React.Component<Props> {
     static contextTypes: {
-        refsMap: React.Requireable<any>;
-        setRef: React.Requireable<any>;
-        scrollToFocusedElement: React.Requireable<any>;
+        refsMap: import("prop-types").Requireable<(HTMLElement | null | undefined)[]>;
+        setRef: import("prop-types").Requireable<(...args: any[]) => any>;
+        scrollToFocusedElement: import("prop-types").Requireable<(...args: any[]) => any>;
     };
     context: import("@/components/core/ScrollableContainer/ScrollableContainer").ScrollableContainerContextType;
     onBecameFocused: (layout: Layout) => void;
     onArrowPress: (d: Direction, _props: any) => void;
     get viewModel(): import("../../view-model/BetsViewModel").BetsViewModel;
     onEnterPress: () => void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export {};

package/dist/src/modules/bets/view/SixPack/SixPackView.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import './SixPackView.style.css';
+import { withFocusable, } from '@/external/spatial-navigation';
+import FocusableItem from '@/components/core/ScrollableContainer/FocusableItem';
+import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
+import SDK from '@/index';
+class SixPackView extends React.Component {
+    renderOrderedLineColumn(line) {
+        return this.props.item.data.orderedColumns.map((col) => {
+            switch (col.type) {
+                case 'moneyline':
+                    if (!line.moneylineFirstLine) {
+                        return null;
+                    }
+                    return React.createElement("td", { key: col.type }, line.moneylineFirstLine);
+                case 'pointSpread':
+                    if (!line.gameSpreadFirstLine) {
+                        return null;
+                    }
+                    return (React.createElement("td", { key: col.type },
+                        line.gameSpreadFirstLine,
+                        React.createElement("br", null),
+                        React.createElement("span", { className: "T02" }, line.gameSpreadSecondLine)));
+                case 'total':
+                    if (!line.totalPointsFirstLine) {
+                        return null;
+                    }
+                    return (React.createElement("td", { key: col.type },
+                        line.totalPointsFirstLine,
+                        React.createElement("br", null),
+                        React.createElement("span", { className: "T02" }, line.totalPointsSecondLine)));
+                default:
+                    return null;
+            }
+        });
+    }
+    render() {
+        const data = this.props.item.data;
+        const lines = [data.topTeamOdds, data.bottomTeamOdds, data.drawOdds].filter(Boolean);
+        return (React.createElement(FocusableItem, null,
+            React.createElement("table", { className: "six-pack-table focus-ring T02", "data-focused": this.props.focused },
+                React.createElement("thead", null,
+                    React.createElement("tr", null,
+                        React.createElement("th", { scope: "col" }),
+                        React.createElement("th", { scope: "col" }, this.props.item.data.gameState === 'in' ? 'Close' : 'Open'),
+                        this.props.item.data.orderedColumns.map((col) => (React.createElement("th", { scope: "col", key: col.type }, col.abbreviation))))),
+                React.createElement("tbody", null, lines.map((line, index) => (React.createElement("tr", { key: index, className: "T05_ALT" },
+                    React.createElement("td", null, line.teamAbbreviation),
+                    React.createElement("td", null,
+                        line.startOfGameFirstLine,
+                        React.createElement("br", null),
+                        React.createElement("span", { className: "T02" }, line.startOfGameSecondLine)),
+                    this.renderOrderedLineColumn(line))))))));
+    }
+}
+const FocusableSixPackView = withFocusable()(SixPackView);
+export default class FocusableSixPackViewWrapper extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
+        });
+        Object.defineProperty(this, "onBecameFocused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (layout) => {
+                this.context.scrollToFocusedElement(layout);
+            }
+        });
+        Object.defineProperty(this, "onArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (d, _props) => {
+                if (d === 'left') {
+                    SDK.getMaestroEventViewModel().deliverFocus();
+                }
+            }
+        });
+        Object.defineProperty(this, "onEnterPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                // Track card click
+                this.viewModel.trackCardClick('6-pack');
+            }
+        });
+    }
+    get viewModel() {
+        const vm = SDK.getMaestroEventViewModel().betsViewModel;
+        if (!vm) {
+            throw new Error('BetsViewModel is not initialized');
+        }
+        return vm;
+    }
+    render() {
+        return (React.createElement(FocusableSixPackView, { ...this.props, onBecameFocused: this.onBecameFocused, onArrowPress: this.onArrowPress, onEnterPress: this.onEnterPress }));
+    }
+}
+Object.defineProperty(FocusableSixPackViewWrapper, "contextTypes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: SCROLLABLE_CONTEXT_TYPE
+});

package/dist/src/modules/bets/view/UserBets/BetResult/BetResult.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import './BetResult.styles.css';
 declare const BetResult: ({ children }: {
     children: React.ReactNode;
-}) => React.JSX.Element;
+}) => JSX.Element;
 export default BetResult;

package/dist/src/modules/bets/view/UserBets/BetResult/BetResult.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import './BetResult.styles.css';
+const BetResult = ({ children }) => {
+    return React.createElement("div", { className: "bet-result" }, children);
+};
+export default BetResult;

package/dist/src/modules/bets/view/UserBets/BetsCard/BetsCard.d.ts

@@ -10,7 +10,7 @@ export type BaseBetCardProps = {
     hideWagers?: boolean;
 };
 declare const _default: {
-    new (props?: (BaseBetCardProps & WithFocusableProps) | undefined, context?: any): {
+    new (props: (BaseBetCardProps & WithFocusableProps) | Readonly<BaseBetCardProps & WithFocusableProps>): {
         state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
         navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
@@ -30,20 +30,65 @@ declare const _default: {
         componentDidMount(): void;
         componentDidUpdate(): void;
         componentWillUnmount(): void;
-        render(): React.ReactElement<BaseBetCardProps & WithFocusableProps>;
-        setState<K extends keyof import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: BaseBetCardProps & WithFocusableProps) => import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>) | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>, callback?: (() => any) | undefined): void;
-        forceUpdate(callBack?: (() => any) | undefined): void;
-        props: Readonly<{
-            children?: React.ReactNode;
-        }> & Readonly<BaseBetCardProps & WithFocusableProps>;
+        render(): React.ReactElement<BaseBetCardProps & WithFocusableProps, string | React.JSXElementConstructor<any>>;
         context: any;
+        setState<K extends keyof import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<BaseBetCardProps & WithFocusableProps>) => import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<BaseBetCardProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
         refs: {
             [key: string]: React.ReactInstance;
         };
+        shouldComponentUpdate?(nextProps: Readonly<BaseBetCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<BaseBetCardProps & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
         componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<BaseBetCardProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<BaseBetCardProps & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<BaseBetCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<BaseBetCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: BaseBetCardProps & WithFocusableProps, context: any): {
+        state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: Direction, details?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: Direction, details: import("@/external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: Layout, details: import("@/external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: Layout, details: import("@/external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<BaseBetCardProps & WithFocusableProps, string | React.JSXElementConstructor<any>>;
+        context: any;
+        setState<K extends keyof import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<BaseBetCardProps & WithFocusableProps>) => import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<BaseBetCardProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
         shouldComponentUpdate?(nextProps: Readonly<BaseBetCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<BaseBetCardProps & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<BaseBetCardProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<BaseBetCardProps & WithFocusableProps>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<BaseBetCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<BaseBetCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
     };
     contextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
@@ -51,5 +96,6 @@ declare const _default: {
     childContextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
     };
+    contextType?: React.Context<any> | undefined;
 };
 export default _default;