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

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

@@ -0,0 +1,107 @@
+import SegmentController from '@/components/organisms/SegmentController/SegmentController';
+import React from 'react';
+import './UserBetsView.styles.css';
+import Parlay from './Parlay/Parlay';
+import Boost from './Boost/Boost';
+import Straight from './Straight/Straight';
+import Teaser from './Teaser/Teaser';
+class UserBetsView extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                activeSegment: this.props.item.data.defaultTab,
+            }
+        });
+        Object.defineProperty(this, "setSegment", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (segment) => {
+                return () => {
+                    if (this.state.activeSegment !== segment) {
+                        this.setState({ activeSegment: segment });
+                    }
+                };
+            }
+        });
+        Object.defineProperty(this, "segmentItems", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: [
+                {
+                    title: 'Live',
+                    type: 'live',
+                    onEnter: this.setSegment('live'),
+                },
+                {
+                    title: 'Settled',
+                    type: 'settled',
+                    onEnter: this.setSegment('settled'),
+                },
+                {
+                    title: 'Upcoming',
+                    type: 'upcoming',
+                    onEnter: this.setSegment('upcoming'),
+                },
+            ]
+        });
+        Object.defineProperty(this, "renderBet", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (bet) => {
+                const { hideWagers } = this.props.item;
+                switch (bet.type) {
+                    case 'PARLAY':
+                        return React.createElement(Parlay, { key: bet.id, bet: bet, hideWagers: hideWagers });
+                    case 'BOOST':
+                        return React.createElement(Boost, { key: bet.id, bet: bet, hideWagers: hideWagers });
+                    case 'STRAIGHT':
+                        return React.createElement(Straight, { key: bet.id, bet: bet, hideWagers: hideWagers });
+                    case 'TEASER':
+                        return React.createElement(Teaser, { key: bet.id, bet: bet, hideWagers: hideWagers });
+                    default:
+                        console.warn('unknown type', bet.type);
+                        return null;
+                }
+            }
+        });
+        Object.defineProperty(this, "renderBets", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (this.bets?.length) {
+                    return this.bets.map((bet) => this.renderBet(bet));
+                }
+                return (React.createElement("div", { className: "no-user-bets T05_ALT" },
+                    "No ",
+                    this.state.activeSegment,
+                    " Bets"));
+            }
+        });
+    }
+    get bets() {
+        switch (this.state.activeSegment) {
+            case 'live':
+                return this.props.item.data.bets.live;
+            case 'settled':
+                return this.props.item.data.bets.settled;
+            case 'upcoming':
+                return this.props.item.data.bets.upcoming;
+            default:
+                return null;
+        }
+    }
+    render() {
+        return (React.createElement("section", { className: "my-bets-view" },
+            React.createElement(SegmentController, { items: this.segmentItems }),
+            this.renderBets()));
+    }
+}
+export default UserBetsView;

package/dist/src/modules/bets/view/components/Bet/Bet.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import './Bet.styles.css';
+import { withFocusable, } from '@/external/spatial-navigation';
+import Image from '@/components/atoms/Image';
+import FocusableItem from '@/components/core/ScrollableContainer/FocusableItem';
+class Bet extends React.Component {
+    render() {
+        const accruedValue = this.props.leg.points
+            ? Number(this.props.leg.points)
+            : 0;
+        return (React.createElement(FocusableItem, null,
+            React.createElement("div", { className: "single-bet focus-ring focus-opacity", "data-focusable": this.props.focusable, "data-focused": this.props.focused },
+                this.props.leg.iconDark && (React.createElement(Image, { crossOrigin: "anonymous", src: this.props.leg.iconDark, alt: "Bet Icon" })),
+                React.createElement("div", { className: "single-bet-main-content T02" },
+                    React.createElement("div", { className: "single-bet-info" },
+                        React.createElement("div", null,
+                            React.createElement("div", { className: "T05_ALT" }, this.props.leg.selectionText),
+                            React.createElement("span", { className: "single-bet-info-description" }, this.props.leg.marketText)),
+                        !this.props.hideWagers && (React.createElement("div", { className: "single-bet-odds T01" }, this.props.leg.odds))),
+                    this.props.leg.accrued && (React.createElement("div", { className: "single-bet-accrued" },
+                        React.createElement("div", { className: "single-bet-accrued-goal" },
+                            accruedValue,
+                            React.createElement("span", null,
+                                "/",
+                                this.props.leg.accrued.goal),
+                            React.createElement("div", null,
+                                Math.round((accruedValue / this.props.leg.accrued.goal) * 100),
+                                "%")),
+                        React.createElement("progress", { "data-complete": accruedValue === this.props.leg.accrued.goal, value: accruedValue, max: this.props.leg.accrued.goal })))))));
+    }
+}
+export default withFocusable()(Bet);

package/dist/src/modules/bets/view/components/BetPill/BetPill.js

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

package/dist/src/modules/bets/view/components/BetsCard/BetsCard.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import './BetsCard.styles.css';
+import { withFocusable, } from '@/external/spatial-navigation';
+import FocusableItem from '@/components/core/ScrollableContainer/FocusableItem';
+class BetsCard extends React.Component {
+    render() {
+        return (React.createElement(FocusableItem, null,
+            React.createElement("div", { className: "bets-card focus-ring", "data-focused": this.props.focused },
+                this.props.header(this.props),
+                React.createElement("div", { className: "bets-card-divider" }),
+                this.props.children,
+                this.props.footer(this.props))));
+    }
+}
+export default withFocusable()(BetsCard);

package/dist/src/modules/bets/view/components/BetsCard/BetsCardHeader.js

@@ -0,0 +1,20 @@
+import Icon from '@/components/atoms/SvgIcon';
+import React from 'react';
+import OutcomeBadge from '../../UserBets/OutcomeBadge/OutcomeBadge';
+import Image from '@/components/atoms/Image';
+const BetsCardHeader = (props) => {
+    const outcome = props.overrideOutcome !== 'NOT_SET' ? props.overrideOutcome : props.outcome;
+    return (React.createElement("div", { className: "bets-card-header T05_ALT" },
+        props.renderIcon
+            ? props.renderIcon()
+            : props.iconUrl && (React.createElement(Image, { crossOrigin: "anonymous", src: props.iconUrl, alt: `${props.betType} Icon`, width: 28, height: 22 })),
+        React.createElement("div", { className: "T05_ALT" }, props.betType.toLocaleLowerCase()),
+        React.createElement("span", { className: "T02" }, props.children),
+        React.createElement("div", { className: "bets-card-status-container" },
+            outcome && outcome !== 'PENDING' && React.createElement(OutcomeBadge, { outcome: outcome }),
+            props.legCountThreshold &&
+                props.legCount &&
+                props.legCount > props.legCountThreshold && (React.createElement("div", { className: "icon-container", "data-focused": props.betCardProps.focused },
+                React.createElement(Icon, { iconName: props.cardExpanded ? 'collapse' : 'expand', width: 48, height: 48 }))))));
+};
+export default BetsCardHeader;

package/dist/src/modules/bets/view/components/GamblingDisclaimer/GamblingDisclaimer.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Icon from '@/components/atoms/SvgIcon/Icon';
+import './GamblingDisclaimer.styles.css';
+import FocusableItem from '@/components/core/ScrollableContainer/FocusableItem';
+const FALLBACK_DISCLAIMER_TEXT = 'Odds by ESPN BET; 21+. Gambling Problem? Call 1-800-GAMBLER';
+class GamblingDisclaimer extends React.Component {
+    render() {
+        return (React.createElement(FocusableItem, null,
+            React.createElement("div", { className: "gambling-disclaimer" },
+                React.createElement(Icon, { iconName: "mobilePhone", width: 32, height: 32 }),
+                React.createElement("div", { className: "gambling-disclaimer-text T02" }, this.props.text || FALLBACK_DISCLAIMER_TEXT))));
+    }
+}
+export default GamblingDisclaimer;

package/dist/src/modules/bets/view/components/LocationWarning/LocationWarning.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Icon from '@/components/atoms/SvgIcon/Icon';
+import './LocationWarning.styles.css';
+import FocusableItem from '@/components/core/ScrollableContainer/FocusableItem';
+const FALLBACK_WARNING_TEXT = 'You are in a location outside of our operating area. Visit about.espnbet.com for more detail.';
+class LocationWarning extends React.Component {
+    render() {
+        const { disclaimerText } = this.props;
+        const displayText = disclaimerText || FALLBACK_WARNING_TEXT;
+        return (React.createElement(FocusableItem, null,
+            React.createElement("div", { className: "location-warning" },
+                React.createElement(Icon, { iconName: "betsWarning", width: 32, height: 32 }),
+                React.createElement("div", { className: "location-warning-text T02" }, displayText))));
+    }
+}
+export default LocationWarning;

package/dist/src/modules/bets/view/components/PromoCodeBanner/PromoCodeBanner.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import './PromoCodeBanner.styles.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 PromoCodeBanner extends React.Component {
+    render() {
+        const { title, description, logo, qrCode, backgroundImage, focused, } = this.props;
+        return (React.createElement(FocusableItem, null,
+            React.createElement("div", { className: "promo-code-banner focus-ring", "data-focused": focused, style: {
+                    backgroundImage: `url(${backgroundImage})`,
+                } },
+                React.createElement("div", { className: "promo-content" },
+                    React.createElement("div", { className: "promo-logo-container" },
+                        React.createElement("img", { src: logo, alt: "ESPN Bet Logo", className: "promo-logo" })),
+                    React.createElement("div", { className: "promo-tagline T20" }, title)),
+                React.createElement("div", { className: "promo-action-area" },
+                    React.createElement("div", { className: "qr-code-container" },
+                        React.createElement("img", { src: qrCode, alt: "QR Code", className: "qr-code" })),
+                    React.createElement("div", { className: "promo-description T20" }, description)))));
+    }
+}
+const FocusablePromoCodeBanner = withFocusable()(PromoCodeBanner);
+export default class FocusablePromoCodeBannerWrapper 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 for promo
+                this.viewModel.trackCardClick('promo');
+            }
+        });
+    }
+    get viewModel() {
+        const vm = SDK.getMaestroEventViewModel().betsViewModel;
+        if (!vm) {
+            throw new Error('BetsViewModel is not initialized');
+        }
+        return vm;
+    }
+    render() {
+        return (React.createElement(FocusablePromoCodeBanner, { ...this.props, onBecameFocused: this.onBecameFocused, onArrowPress: this.onArrowPress, onEnterPress: this.onEnterPress }));
+    }
+}
+Object.defineProperty(FocusablePromoCodeBannerWrapper, "contextTypes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: SCROLLABLE_CONTEXT_TYPE
+});

package/dist/src/modules/bets/view/components/PromoCodeBanner/index.js

@@ -0,0 +1 @@
+export { default as BetItemPromoCode } from './PromoCodeBanner';