@maestro_io/maestro-web-sdk 5.0.0 → 5.1.0

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import './ProductDetailView.styles.css';
+import { isShopProduct } from '../../types';
+import ProductSummaryCard from '../components/ProductSummaryCard';
+import ActionButton from '@/components/molecules/ActionButton';
+import Image from '@/components/atoms/Image';
+import { withFocusable, } from '@/external/spatial-navigation';
+import BrowseCard from '../components/BrowseCard';
+import { setImageDimensions } from '@/helpers/url';
+const ProductDetail = (props) => {
+    const { product, focused } = props;
+    const detail = product.detail;
+    const getBackgroundImage = () => {
+        const bgImage = detail?.backgroundImage;
+        if (!bgImage) {
+            return null;
+        }
+        try {
+            const url = new URL(bgImage);
+            if (url.hostname.includes('stitcher')) {
+                const newBgImage = setImageDimensions(bgImage, 570, 670);
+                return newBgImage;
+            }
+        }
+        catch {
+            // Fallback to original check if URL parsing fails
+            if (bgImage.includes('stitcher')) {
+                const newBgImage = setImageDimensions(bgImage, 570, 670);
+                return newBgImage;
+            }
+        }
+        return bgImage;
+    };
+    const bgImage = getBackgroundImage();
+    return (React.createElement("div", { className: "product-detail-card focus-ring", "data-focused": focused, style: {
+            ...(bgImage && {
+                backgroundImage: `url(${bgImage})`,
+                backgroundSize: 'cover',
+                backgroundClip: 'padding-box',
+                backgroundPosition: 'center',
+            }),
+        } },
+        React.createElement("div", { className: "product-detail-title T70" }, detail?.title || 'Shop the look'),
+        React.createElement("div", { className: "product-detail-product" }, isShopProduct(product) ? (React.createElement(ProductSummaryCard, { product: product, focusable: false })) : (React.createElement(BrowseCard, { browseCard: {
+                ...product,
+                name: undefined,
+                caption: product.detail?.description,
+            }, focusable: false }))),
+        detail?.qrCode && (React.createElement("div", { className: "product-detail-qr" },
+            React.createElement(Image, { src: detail.qrCode, alt: "QR Code", className: "product-detail-qr-image" }))),
+        React.createElement("div", { className: "product-detail-instruction T04" }, detail?.link?.text),
+        React.createElement(ActionButton, { "data-focused": focused }, "Dismiss")));
+};
+const FocusableProductDetail = withFocusable()(ProductDetail);
+const ProductDetailView = (props) => {
+    return (React.createElement("div", { className: "product-detail-view-wrapper" },
+        React.createElement(FocusableProductDetail, { ...props }),
+        props.product.detail?.disclaimer && (React.createElement("div", { className: "product-detail-disclaimer T02 TEXT_200 FONT_BOLD" }, props.product.detail.disclaimer))));
+};
+export default ProductDetailView;

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

@@ -0,0 +1,2 @@
+export { default } from './ProductDetailView';
+export * from './ProductDetailView';

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

@@ -0,0 +1,2 @@
+export { default } from './ProductDetailView';
+export * from './ProductDetailView';

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

@@ -0,0 +1,38 @@
+import { Component } from 'react';
+import './ShopView.styles.css';
+import { Direction } from '@/external/spatial-navigation/utils';
+import ShopViewModel, { ShopErrorState } from '../view-model/ShopViewModel';
+import { IShopProduct, IShopSection, IShopBrowseCard, IShopDefaultItem } from '../types';
+interface State {
+    container: HTMLDivElement | null;
+    sections: IShopSection[];
+    isDataLoading: boolean;
+    errorState: ShopErrorState;
+    selectedItem: IShopProduct | IShopBrowseCard | null;
+    selectedShopSection: IShopSection | null;
+    selectedItemFocusKey: string;
+    promoData: IShopDefaultItem | null;
+}
+declare class ShopView extends Component<{}, State> {
+    private container;
+    private sectionsListener;
+    private isDataLoadingListener;
+    private errorStateListener;
+    private promoDataListener;
+    private maxHeightCleanup;
+    private vm;
+    constructor(props: {});
+    get viewModel(): ShopViewModel;
+    componentDidMount(): void;
+    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/espn/shop/view/ShopView.js

@@ -0,0 +1,223 @@
+import React, { Component } from 'react';
+import './ShopView.styles.css';
+import ScrollableContainer from '@/components/core/ScrollableContainer';
+import SDK from '@/index';
+import TabLoadErrorView from '@/components/molecules/TabLoadError';
+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);
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "sectionsListener", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "isDataLoadingListener", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "errorStateListener", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "promoDataListener", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "maxHeightCleanup", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "vm", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        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();
+                }
+            }
+        });
+        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,
+            writable: true,
+            value: (selectedItem, selectedShopSection, selectedItemFocusKey) => {
+                const card = isShopProduct(selectedItem)
+                    ? 'product_summary'
+                    : 'want more';
+                this.viewModel.trackItemClick(card, selectedItem, selectedShopSection);
+                this.setState({ selectedItem, selectedItemFocusKey, selectedShopSection }, () => {
+                    SDK.getMaestroEventViewModel().navigation.setFocus('product-detail-view');
+                });
+            }
+        });
+        Object.defineProperty(this, "closeProductDetail", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (!this.state.selectedItem || !this.state.selectedShopSection) {
+                    return;
+                }
+                this.viewModel.trackItemClick('product_detail', this.state.selectedItem, this.state.selectedShopSection);
+                this.setState({ selectedItem: null, selectedShopSection: null }, () => {
+                    if (this.state.selectedItemFocusKey) {
+                        // Added a small delay so all the focusable items are rendered and we have the ref of them
+                        setTimeout(() => {
+                            SDK.getMaestroEventViewModel().navigation.setFocus(this.state.selectedItemFocusKey);
+                        }, 100);
+                    }
+                });
+            }
+        });
+        Object.defineProperty(this, "trackPromoEnterPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.viewModel.trackItemClick('fallback', null, null);
+            }
+        });
+        Object.defineProperty(this, "renderContent", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const { sections, errorState, selectedItem, promoData } = this.state;
+                // Show product detail view if a product is selected
+                if (selectedItem) {
+                    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') {
+                    return (React.createElement(TabLoadErrorView, { onEnterPress: this.clearTabLoadFailure, onArrowPress: this.onArrowPress }));
+                }
+                // Show promo view if shop is empty and promo data is available
+                if ((errorState === 'emptyShop' || sections.length === 0) && promoData) {
+                    return (React.createElement(ShopPromoView, { promoData: promoData, onEnterPress: this.trackPromoEnterPress }));
+                }
+                // Render sections
+                return sections.map((section, index) => (React.createElement(ShopSection, { key: index, sectionIndex: index, section: section, onArrowPress: this.onArrowPress, onItemClick: this.openItemDetail })));
+            }
+        });
+        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,
+            isDataLoading: this.viewModel.isDataLoading.value,
+            errorState: this.viewModel.errorState.value,
+            selectedItem: null,
+            selectedItemFocusKey: '',
+            promoData: this.viewModel.promoData.value,
+            selectedShopSection: null,
+        };
+    }
+    get viewModel() {
+        if (!this.vm) {
+            throw new Error('ShopViewModel is not initialized');
+        }
+        return this.vm;
+    }
+    componentDidMount() {
+        this.setState({
+            container: this.container,
+        });
+        this.maxHeightCleanup = setupMaxHeightToBottom(() => this.container);
+        this.sectionsListener = this.viewModel.sections.subscribe((sections) => {
+            this.setState({ sections });
+        });
+        this.isDataLoadingListener = this.viewModel.isDataLoading.subscribe((isDataLoading) => {
+            this.setState({ isDataLoading });
+        });
+        this.errorStateListener = this.viewModel.errorState.subscribe((errorState) => {
+            this.setState({ errorState });
+        });
+        this.promoDataListener = this.viewModel.promoData.subscribe((promoData) => {
+            this.setState({ promoData });
+        });
+        // Initialize the view model
+        this.viewModel.init();
+    }
+    componentWillUnmount() {
+        this.sectionsListener && this.sectionsListener();
+        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', style: {
+                maxHeight: 'auto',
+            } },
+            React.createElement("div", { className: "shop-view", ref: this.setContainerRef },
+                this.renderContent(),
+                React.createElement("div", { className: "shop-bottom-padding" }))));
+    }
+}
+export default ShopView;

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/espn/shop/view/components/BrowseCard/BrowseCard.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import './BrowseCard.styles.css';
+import { withFocusable, } from '@/external/spatial-navigation';
+import Image from '@/components/atoms/Image';
+export class BrowseCardView extends React.Component {
+    render() {
+        const { browseCard, focused } = this.props;
+        const { name, caption, image, detail } = browseCard;
+        return (React.createElement("div", { className: "browse-card focus-ring", "data-focused": focused, style: {
+                backgroundImage: detail?.backgroundImage
+                    ? `url(${detail.backgroundImage})`
+                    : 'none',
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+                backgroundClip: 'padding-box',
+            } },
+            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 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" }))));
+    }
+}
+export default withFocusable()(BrowseCardView);

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

@@ -0,0 +1,2 @@
+export { default } from './BrowseCard';
+export * from './BrowseCard';

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

@@ -0,0 +1,2 @@
+export { default } from './BrowseCard';
+export * from './BrowseCard';

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

@@ -0,0 +1,104 @@
+/// <reference types="prop-types" />
+import React from 'react';
+import './ProductSummaryCard.styles.css';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import { Direction, Layout } from '@/external/spatial-navigation/utils';
+import { IShopProduct } from '../../../types';
+export type ProductSummaryCardProps = {
+    product: IShopProduct;
+    onEnterPress?: () => void;
+    onArrowPress?: (direction: Direction) => void;
+    onBecameFocused?: (layout: Layout) => void;
+};
+declare const _default: {
+    new (props: (ProductSummaryCardProps & WithFocusableProps) | Readonly<ProductSummaryCardProps & WithFocusableProps>): {
+        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?: 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;
+        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<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;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<ProductSummaryCardProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        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;
+        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;
+    };
+    new (props: ProductSummaryCardProps & 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?: 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;
+        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<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;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<ProductSummaryCardProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        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;
+        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;
+    };
+    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/espn/shop/view/components/ProductSummaryCard/ProductSummaryCard.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import './ProductSummaryCard.styles.css';
+import { withFocusable, } from '@/external/spatial-navigation';
+import Image from '@/components/atoms/Image';
+// QR code image as base64 data URI for SDK bundle
+const productSummaryQRCode = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAACHElEQVR4Ae2YgXHCMAxFf3oM0A3qbsAGDRuwQWGC0gmgEwATkG7ABqQb0AlwN0gnSKXDpWqwiQU5IHe8O52xY8U/toyVoIwjRcPwPWMGvsOVc/UCE55GUe+RWU+/IkmSAg1DQxtPM7etZCfJAy4Mi25VDHZCF0g8T7NBPHMKgxn5jej3i8LPkl8PWoHYijOI516UBg3RiiXeTS9N9Veg3yvZ2tPOS9lHmA+yiae9SzYN+BRSU4dE5ahn7etH8Tao8dsE/IIO7u9s56NaYrrxlDcPWV/plzq/KZRoY5CXJsXfhojFOL8ulHSU/d/I3iGWIJKcbIhtfKlQCYyMV5+fpSLDEcQKHFP8PHvan2r8OPYWnvboEIkVmOI4DNkAJ9Des5iYQ7db80oZS+Np3FlJQhdcVqKaQd7l7v0lVfhxMjyDFhpoU+qYOL9JqWNzSEerN4lkCX8wp2gw9/MRK3AeyEoy7AvktCwTdb6eirrF/51eNCHwVxBnMbxxcnd87UHtPNtL4TOoCqQ+Q0SijUFOUBc4/mRRo81mPl1pcSa02cyork+5fRk3ool/56Juy8q3nkNZUqzAbiBN973oD8jGop7J10onbiWuW7JHhARWnmYd+MShTtVPQWriGZRPY3Dhw9uFyE7ToSW20FGI0or2b08/Gz1O5Vy8fTzS0rpk4ZFmdS9HDB1rp0Dj8JHpyzdNtWMMKZoXePuIfhZ+AArh47ArZrulAAAAAElFTkSuQmCC';
+class ProductSummaryCard extends React.Component {
+    render() {
+        const { product, focused } = this.props;
+        const { image, name, price } = product;
+        // Determine if this is a sale or clearance item
+        const salePrice = price?.displayClearance || price?.displaySale;
+        const isOnSale = !!salePrice;
+        return (React.createElement("div", { className: "product-summary-card focus-ring", "data-focused": focused },
+            Boolean(image?.href) && (React.createElement("div", { className: "product-summary-card-image-container" },
+                React.createElement(Image, { src: image.href, alt: name || 'Product', className: "product-summary-card-image" }))),
+            React.createElement("div", { className: "product-summary-card-content", "data-has-image": !!image?.href },
+                React.createElement("div", { className: "product-summary-card-title T05_ALT" }, name || 'Product Name'),
+                React.createElement("div", { className: "product-summary-card-price-container" }, isOnSale ? (React.createElement("div", null,
+                    React.createElement("span", { className: "product-summary-card-price-original T02 TEXT_200" }, price?.displayRetail || '$0.00'),
+                    React.createElement("span", { className: "product-summary-card-price-sale T02 TEXT_200" }, salePrice),
+                    React.createElement("span", { className: "product-summary-card-badge T02 FONT_BOLD" }, "SALE"))) : (React.createElement("span", { className: "product-summary-card-price T02 TEXT_200" }, price?.displayRetail || '$0.00')))),
+            focused && (React.createElement(Image, { src: productSummaryQRCode, alt: "QR Code", className: "product-summary-card-qr-image" }))));
+    }
+}
+export default withFocusable()(ProductSummaryCard);

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

@@ -0,0 +1,2 @@
+export { default } from './ProductSummaryCard';
+export type { ProductSummaryCardProps } from './ProductSummaryCard';

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

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

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

@@ -0,0 +1,8 @@
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import './ShopPromoView.styles.css';
+import { IShopDefaultItem } from '../../../types';
+type Props = {
+    promoData: IShopDefaultItem;
+};
+declare const ShopPromoViewWrapper: (props: Props & WithFocusableProps) => JSX.Element;
+export default ShopPromoViewWrapper;