@maestro_io/maestro-web-sdk 4.0.2 → 5.1.0

package/dist/src/modules/{key-plays → espn/key-plays}/view/KeyPlaysView.js

@@ -4,6 +4,7 @@ import './KeyPlaysView.styles.css';
 import KeyPlayErrorStateView from './KeyPlayErrorStateView';
 import SDK from '@/index';
 import ScrollableContainer from '@/components/core/ScrollableContainer';
+import { setupMaxHeightToBottom } from '@/hooks/useMaxHeightToBottom';
 const STICKY_HEADER_HEIGHT = 32;
 export class KeyPlays extends Component {
     constructor(props) {
@@ -32,6 +33,12 @@ export class KeyPlays extends Component {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "maxHeightCleanup", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         Object.defineProperty(this, "vm", {
             enumerable: true,
             configurable: true,
@@ -46,7 +53,27 @@ export class KeyPlays extends Component {
                 await this.viewModel.playKeyPlay(index);
             }
         });
-        this.vm = SDK.getMaestroEventViewModel().keyPlaysViewModel;
+        Object.defineProperty(this, "setContainerRef", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (e) => {
+                if (e && !this.container) {
+                    this.container = e;
+                }
+                if (this.container !== e) {
+                    this.container = e;
+                    if (this.maxHeightCleanup) {
+                        this.maxHeightCleanup();
+                    }
+                    if (this.container) {
+                        this.maxHeightCleanup = setupMaxHeightToBottom(() => this.container);
+                    }
+                }
+            }
+        });
+        this.vm = SDK.getMaestroEventViewModel()
+            .keyPlaysViewModel;
         this.state = {
             scrollableContainer: null,
             playbackProgress: this.viewModel.currentClipPlaybackProgress.value ?? null,
@@ -75,18 +102,18 @@ export class KeyPlays extends Component {
         this.setState({
             scrollableContainer: this.container,
         });
+        this.maxHeightCleanup = setupMaxHeightToBottom(() => this.container);
     }
     componentWillUnmount() {
         this.playbackProgressUnsub && this.playbackProgressUnsub();
         this.playbackIndexUnsub && this.playbackIndexUnsub();
         this.itemsUnsub && this.itemsUnsub();
+        this.maxHeightCleanup && this.maxHeightCleanup();
     }
     render() {
         const { playbackProgress, playbackIndex, items, scrollableContainer, } = this.state;
         return (React.createElement(ScrollableContainer, { scrollableContainerRef: scrollableContainer, containerTopOffset: STICKY_HEADER_HEIGHT },
-            React.createElement("div", { ref: (el) => {
-                    this.container = el;
-                }, className: "key-plays-view" },
+            React.createElement("div", { ref: this.setContainerRef, className: "key-plays-view" },
                 items.map((section, sectionIndex) => (React.createElement("div", { key: `section-${sectionIndex}`, className: "key-plays-section" },
                     section.title && (React.createElement("h3", { className: "key-plays-section-title T10" }, section.title)),
                     React.createElement("div", { className: "key-plays-section-items" }, section.items.map((item) => {
@@ -121,7 +148,8 @@ export default class KeyPlaysWithErrorState extends Component {
                 await this.viewModel.userRequestedNewKeyPlaysData();
             }
         });
-        this.vm = SDK.getMaestroEventViewModel().keyPlaysViewModel;
+        this.vm = SDK.getMaestroEventViewModel()
+            .keyPlaysViewModel;
         this.state = {
             errorState: this.viewModel.errorState.value,
         };

package/dist/src/modules/{key-plays → espn/key-plays}/view-model/KeyPlaysViewModel.d.ts

@@ -17,7 +17,7 @@ declare class KeyPlaysViewModel {
     items: Observable<KeyPlayItem[]>;
     filteredItems: Observable<KeyPlayItem[]>;
     analyticsService: AnalyticsService;
-    constructor();
+    constructor(analyticsService: AnalyticsService);
     onUpdatePlayerTimeCode(playerTimeCode: number | null): void;
     private filterItemsByPlayerTimeCode;
     private shouldShowKeyPlay;

package/dist/src/modules/{key-plays → espn/key-plays}/view-model/KeyPlaysViewModel.js

@@ -1,9 +1,8 @@
 import SDK from '@/index';
 import { Observable } from '@/helpers/Observable';
 import { setImageDimensions } from '@/helpers/url';
-import AnalyticsService from '@/services/AnalyticsService/AnalyticsService';
 class KeyPlaysViewModel {
-    constructor() {
+    constructor(analyticsService) {
         Object.defineProperty(this, "currentlyPlayingClipIndex", {
             enumerable: true,
             configurable: true,
@@ -52,7 +51,7 @@ class KeyPlaysViewModel {
             writable: true,
             value: void 0
         });
-        this.analyticsService = new AnalyticsService();
+        this.analyticsService = analyticsService;
     }
     onUpdatePlayerTimeCode(playerTimeCode) {
         this.filterItemsByPlayerTimeCode(playerTimeCode);

package/dist/src/{services → modules/espn/shop/services}/ShopService.d.ts

@@ -1,6 +1,6 @@
-import NetworkManager from './NetworkManager/NetworkManager';
-import { IShopResponse } from '../modules/shop/types';
-import { ResponseWithHeaders } from './NetworkManager/types';
+import NetworkManager from '../../../../services/NetworkManager/NetworkManager';
+import { IShopResponse } from '../types';
+import { ResponseWithHeaders } from '../../../../services/NetworkManager/types';
 /**
  * Service for handling shop-related API calls
  */

package/dist/src/{services → modules/espn/shop/services}/ShopService.js

@@ -1,5 +1,4 @@
-import { HttpMethod } from './NetworkManager/NetworkManager';
-import NetworkManagerFactory from './NetworkManager/NetworkManagerFactory';
+import NetworkManager, { HttpMethod, } from '../../../../services/NetworkManager/NetworkManager';
 /**
  * Service for handling shop-related API calls
  */
@@ -18,9 +17,8 @@ class ShopService {
             value: void 0
         });
         this.eventId = eventId;
-        this.networkManager = NetworkManagerFactory.createForService({
+        this.networkManager = new NetworkManager({
             externalBaseURL: 'https://site.api.espn.com',
-            serviceType: 'shop',
         });
     }
     /**

package/dist/src/modules/{shop → espn/shop}/types.d.ts

@@ -159,3 +159,6 @@ export interface IShopResponse {
     shop?: IShopContainer[];
 }
 export declare const isShopProduct: (item: IShopItem) => item is IShopProduct;
+export interface IShopViewModel {
+    cleanup(): void;
+}

package/dist/src/modules/{shop → espn/shop}/view/ProductDetailView/ProductDetailView.d.ts

@@ -4,6 +4,7 @@ import { WithFocusableProps } from '@/external/spatial-navigation';
 export type ProductDetailViewProps = {
     product: IShopProduct | IShopBrowseCard;
     focusKey: string;
+    onBecomeFocused?: () => void;
 };
 declare const ProductDetailView: (props: ProductDetailViewProps & WithFocusableProps) => JSX.Element;
 export default ProductDetailView;

package/dist/src/modules/{shop → espn/shop}/view/ShopView.d.ts

@@ -19,6 +19,7 @@ declare class ShopView extends Component<{}, State> {
     private isDataLoadingListener;
     private errorStateListener;
     private promoDataListener;
+    private maxHeightCleanup;
     private vm;
     constructor(props: {});
     get viewModel(): ShopViewModel;
@@ -26,10 +27,12 @@ declare class ShopView extends Component<{}, State> {
     componentWillUnmount(): void;
     clearTabLoadFailure: () => void;
     onArrowPress: (d: Direction) => void;
+    onBecameFocused: () => void;
     openItemDetail: (selectedItem: IShopProduct | IShopBrowseCard, selectedShopSection: IShopSection, selectedItemFocusKey: string) => void;
     closeProductDetail: () => void;
     trackPromoEnterPress: () => void;
     renderContent: () => JSX.Element | JSX.Element[];
+    setContainerRef: (e: HTMLDivElement | null) => void;
     render(): JSX.Element;
 }
 export default ShopView;

package/dist/src/modules/{shop → espn/shop}/view/ShopView.js

@@ -7,6 +7,7 @@ import { isShopProduct, } from '../types';
 import ShopSection from './components/ShopSection';
 import ProductDetailView from './ProductDetailView';
 import ShopPromoView from './components/ShopPromoView';
+import { setupMaxHeightToBottom } from '@/hooks/useMaxHeightToBottom';
 class ShopView extends Component {
     constructor(props) {
         super(props);
@@ -40,6 +41,12 @@ class ShopView extends Component {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "maxHeightCleanup", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         Object.defineProperty(this, "vm", {
             enumerable: true,
             configurable: true,
@@ -64,6 +71,16 @@ class ShopView extends Component {
                 }
             }
         });
+        Object.defineProperty(this, "onBecameFocused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (this.container) {
+                    this.container.scrollTop = 0;
+                }
+            }
+        });
         Object.defineProperty(this, "openItemDetail", {
             enumerable: true,
             configurable: true,
@@ -113,7 +130,7 @@ class ShopView extends Component {
                 const { sections, errorState, selectedItem, promoData } = this.state;
                 // Show product detail view if a product is selected
                 if (selectedItem) {
-                    return (React.createElement(ProductDetailView, { product: selectedItem, onEnterPress: this.closeProductDetail, onArrowPress: this.onArrowPress, focusKey: "product-detail-view" }));
+                    return (React.createElement(ProductDetailView, { product: selectedItem, onBecameFocused: this.onBecameFocused, onEnterPress: this.closeProductDetail, onArrowPress: this.onArrowPress, focusKey: "product-detail-view" }));
                 }
                 // Show error state if tab load failed
                 if (errorState === 'tabLoadFailure') {
@@ -127,7 +144,27 @@ class ShopView extends Component {
                 return sections.map((section, index) => (React.createElement(ShopSection, { key: index, sectionIndex: index, section: section, onArrowPress: this.onArrowPress, onItemClick: this.openItemDetail })));
             }
         });
-        this.vm = SDK.getMaestroEventViewModel().shopViewModel;
+        Object.defineProperty(this, "setContainerRef", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (e) => {
+                if (e && !this.state.container) {
+                    this.setState({ container: e });
+                }
+                if (this.container !== e) {
+                    this.container = e;
+                    if (this.maxHeightCleanup) {
+                        this.maxHeightCleanup();
+                    }
+                    if (this.container) {
+                        this.maxHeightCleanup = setupMaxHeightToBottom(() => this.container);
+                    }
+                }
+            }
+        });
+        this.vm = SDK.getMaestroEventViewModel()
+            .shopViewModel;
         this.state = {
             container: null,
             sections: this.viewModel.sections.value,
@@ -149,6 +186,7 @@ class ShopView extends Component {
         this.setState({
             container: this.container,
         });
+        this.maxHeightCleanup = setupMaxHeightToBottom(() => this.container);
         this.sectionsListener = this.viewModel.sections.subscribe((sections) => {
             this.setState({ sections });
         });
@@ -169,12 +207,15 @@ class ShopView extends Component {
         this.isDataLoadingListener && this.isDataLoadingListener();
         this.errorStateListener && this.errorStateListener();
         this.promoDataListener && this.promoDataListener();
+        this.maxHeightCleanup && this.maxHeightCleanup();
         // Clean up the view model
         this.viewModel.cleanup();
     }
     render() {
-        return (React.createElement(ScrollableContainer, { scrollableContainerRef: this.state.container, containerTopOffset: 40, "data-has-product-selected": !!this.state.selectedItem, "data-has-error": this.state.errorState !== 'none' },
-            React.createElement("div", { className: "shop-view", ref: (e) => (this.container = e) },
+        return (React.createElement(ScrollableContainer, { scrollableContainerRef: this.state.container, containerTopOffset: 40, "data-has-product-selected": !!this.state.selectedItem, "data-has-error": this.state.errorState !== 'none', style: {
+                maxHeight: 'auto',
+            } },
+            React.createElement("div", { className: "shop-view", ref: this.setContainerRef },
                 this.renderContent(),
                 React.createElement("div", { className: "shop-bottom-padding" }))));
     }

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

@@ -0,0 +1,103 @@
+/// <reference types="prop-types" />
+import React from 'react';
+import './BrowseCard.styles.css';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import { IShopBrowseCard } from '../../../types';
+export type BrowseCardProps = {
+    browseCard: IShopBrowseCard;
+};
+export declare class BrowseCardView extends React.Component<BrowseCardProps & WithFocusableProps> {
+    render(): JSX.Element;
+}
+declare const _default: {
+    new (props: (BrowseCardProps & WithFocusableProps) | Readonly<BrowseCardProps & WithFocusableProps>): {
+        state: import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../../../../external/spatial-navigation/utils").Direction, details?: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: import("../../../../../../external/spatial-navigation/utils").Direction, details: import("../../../../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<BrowseCardProps & 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<BrowseCardProps & 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<BrowseCardProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<BrowseCardProps & WithFocusableProps>, prevState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: BrowseCardProps & 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: import("../../../../../../external/spatial-navigation/utils").Direction, details?: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        onArrowPressHandler: (direction: import("../../../../../../external/spatial-navigation/utils").Direction, details: import("../../../../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<BrowseCardProps & 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<BrowseCardProps & 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<BrowseCardProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<BrowseCardProps & WithFocusableProps>, prevState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<BrowseCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    contextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+    childContextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default _default;

package/dist/src/modules/{shop → espn/shop}/view/components/BrowseCard/BrowseCard.js

@@ -16,7 +16,7 @@ export class BrowseCardView extends React.Component {
             } },
             React.createElement("div", { className: "browse-card-content" },
                 !!name && (React.createElement("div", { className: "browse-card-tagline T20 FONT_BOLD" }, name)),
-                React.createElement("div", { className: "browse-card-caption T10" }, caption || 'Browse all merch')),
+                React.createElement("div", { className: "browse-card-caption T05_ALT" }, caption || 'Browse all merch')),
             image?.href && (React.createElement(Image, { src: image.href, width: 72, height: 72, alt: name || 'Logo', className: "browse-card-logo-image" }))));
     }
 }

package/dist/src/modules/{shop → espn/shop}/view/components/ProductSummaryCard/ProductSummaryCard.d.ts

@@ -12,17 +12,18 @@ export type ProductSummaryCardProps = {
 };
 declare const _default: {
     new (props: (ProductSummaryCardProps & WithFocusableProps) | Readonly<ProductSummaryCardProps & WithFocusableProps>): {
-        state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
-        navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
+        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;
+        navigateByDirection: (direction: Direction, details?: import("@/external/spatial-navigation/utils").Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
         onEnterPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (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;
@@ -33,7 +34,7 @@ declare const _default: {
         componentWillUnmount(): void;
         render(): React.ReactElement<ProductSummaryCardProps & 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<ProductSummaryCardProps & 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;
+        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<ProductSummaryCardProps & 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<ProductSummaryCardProps & WithFocusableProps> & Readonly<{
             children?: React.ReactNode;
@@ -41,28 +42,29 @@ declare const _default: {
         refs: {
             [key: string]: React.ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, prevState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
     };
     new (props: ProductSummaryCardProps & WithFocusableProps, context: any): {
-        state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
-        navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
+        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;
+        navigateByDirection: (direction: Direction, details?: import("@/external/spatial-navigation/utils").Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
         onEnterPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (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;
@@ -73,7 +75,7 @@ declare const _default: {
         componentWillUnmount(): void;
         render(): React.ReactElement<ProductSummaryCardProps & 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<ProductSummaryCardProps & 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;
+        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<ProductSummaryCardProps & 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<ProductSummaryCardProps & WithFocusableProps> & Readonly<{
             children?: React.ReactNode;
@@ -81,15 +83,15 @@ declare const _default: {
         refs: {
             [key: string]: React.ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, prevState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<ProductSummaryCardProps & WithFocusableProps>, nextState: Readonly<import("../../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
     };
     contextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;

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

@@ -6,9 +6,9 @@ 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" }, promo.detail?.title),
+        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" }, promo.detail?.link?.text)));
+        React.createElement("p", { className: "shop-promo-description T20 FONT_BOLD" }, promo.detail?.link?.text)));
 };
 const FocusablePromoView = withFocusable()(ShopPromoView);
 const ShopPromoViewWrapper = (props) => {

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/{shop → espn/shop}/view-model/ShopViewModel.ShopPolling.d.ts

@@ -1,4 +1,4 @@
-import ShopService from '@/services/ShopService';
+import ShopService from '@/modules/espn/shop/services/ShopService';
 import { IShopResponse } from '../types';
 export default class ShopPolling {
     private polling;

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

@@ -1,7 +1,7 @@
-import { Observable } from '../../../helpers/Observable';
-import { ViewModel } from '../../../view-models/ViewModel';
+import { Observable } from '../../../../helpers/Observable';
+import AnalyticsService from '@/services/AnalyticsService/AnalyticsService';
+import { ViewModel } from '../../../../view-models/ViewModel';
 import { IShopSection, IShopProduct, IShopBrowseCard, IShopDefaultItem } from '../types';
-import { TestUseCase } from '@/interfaces/IMaestroEvent';
 declare const SHOP_ERROR_STATE: {
     readonly NONE: "none";
     readonly TAB_LOAD_FAILURE: "tabLoadFailure";
@@ -24,7 +24,7 @@ export declare class ShopViewModel extends ViewModel {
     private useMockData;
     private mockDataType;
     initialized: boolean;
-    constructor(eventId: string, options?: {
+    constructor(eventId: string, analyticsService: AnalyticsService, options?: {
         useMockData?: boolean;
         mockDataType?: 'nfl' | 'nba' | 'ncf' | 'empty' | 'single';
     });
@@ -65,10 +65,6 @@ export declare class ShopViewModel extends ViewModel {
      * Fetch mock data for testing
      */
     private fetchMockData;
-    /**
-     * Simulate different use cases for testing
-     */
-    simulateUseCase<T = any>(useCase: TestUseCase, data: T): void;
     /**
      * Clear tab load failure and retry
      */