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

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.d.ts

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

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.d.ts

@@ -12,5 +12,5 @@ type BetsCardHeaderProps = {
     iconUrl?: string;
     legCount?: number;
 };
-declare const BetsCardHeader: (props: BetsCardHeaderProps) => React.JSX.Element;
+declare const BetsCardHeader: (props: BetsCardHeaderProps) => JSX.Element;
 export default BetsCardHeader;

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.d.ts

@@ -3,6 +3,6 @@ import './GamblingDisclaimer.styles.css';
 declare class GamblingDisclaimer extends React.Component<{
     text: string;
 }> {
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default GamblingDisclaimer;

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.d.ts

@@ -5,6 +5,6 @@ interface LocationWarningProps {
     disclaimerText?: string;
 }
 declare class LocationWarning extends React.Component<LocationWarningProps> {
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default LocationWarning;

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.d.ts

@@ -1,17 +1,18 @@
+/// <reference types="prop-types" />
 import React from 'react';
 import './PromoCodeBanner.styles.css';
 import { Direction, Layout } from '@/external/spatial-navigation/utils';
 import { IBetPromo } from '@/modules/bets/view-model/BetsViewModel';
 export default class FocusablePromoCodeBannerWrapper extends React.Component<IBetPromo> {
     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("@/modules/bets/view-model/BetsViewModel").BetsViewModel;
     onEnterPress: () => void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }

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';