@maestro_io/maestro-web-sdk 4.0.0 → 4.0.2

package/dist/src/modules/shop/mocks.js

@@ -0,0 +1,391 @@
+/**
+ * Mock shop data for NFL game with multiple sections
+ * Covers: regular products, sale products, and browse card
+ */
+export const MOCK_SHOP_NFL_RESPONSE = {
+    shop: [
+        {
+            sections: [
+                {
+                    title: 'Chiefs Shop',
+                    items: [
+                        {
+                            type: 'product',
+                            name: "Men's Kansas City Chiefs Patrick Mahomes Nike Red Game Player Jersey",
+                            image: {
+                                href: 'https://fanatics.frgimages.com/kansas-city-chiefs/mens-kansas-city-chiefs-patrick-mahomes-nike-red-game-player-jersey_pi3453000_ff_3453170-8a4fb50f27b4aacd8c3b_full.jpg',
+                            },
+                            price: {
+                                displayRetail: '$119.99',
+                            },
+                            detail: {
+                                title: 'Chiefs Shop',
+                                qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://fanatics.com/chiefs-mahomes-jersey',
+                                link: {
+                                    href: 'https://fanatics.com/chiefs-mahomes-jersey',
+                                    text: 'Scan to shop',
+                                },
+                            },
+                        },
+                        {
+                            type: 'product',
+                            name: 'Kansas City Chiefs New Era 2024 AFC Conference Champions Locker Room 9FORTY Adjustable Hat - Red',
+                            image: {
+                                href: 'https://fanatics.frgimages.com/kansas-city-chiefs/kansas-city-chiefs-new-era-2024-afc-conference-champions-locker-room-9forty-adjustable-hat-red_pi5595000_ff_5595784_full.jpg',
+                            },
+                            price: {
+                                displayRetail: '$34.99',
+                                displaySale: '$24.99',
+                            },
+                            detail: {
+                                title: 'Chiefs Shop',
+                                qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://fanatics.com/chiefs-hat',
+                                link: {
+                                    href: 'https://fanatics.com/chiefs-hat',
+                                    text: 'Scan to shop',
+                                },
+                            },
+                        },
+                        {
+                            type: 'browse',
+                            name: 'Want More?',
+                            caption: 'Browse all Chiefs merch',
+                            image: {
+                                href: 'https://a.espncdn.com/i/teamlogos/nfl/500/kc.png',
+                            },
+                            detail: {
+                                title: 'Chiefs Shop',
+                                qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://fanatics.com/chiefs',
+                                link: {
+                                    href: 'https://fanatics.com/chiefs',
+                                    text: 'Scan to browse all',
+                                },
+                            },
+                        },
+                    ],
+                },
+                {
+                    title: '49ers Shop',
+                    items: [
+                        {
+                            type: 'product',
+                            name: "Men's San Francisco 49ers Brock Purdy Nike Scarlet Game Player Jersey",
+                            image: {
+                                href: 'https://fanatics.frgimages.com/san-francisco-49ers/mens-san-francisco-49ers-brock-purdy-nike-scarlet-game-player-jersey_pi5068000_ff_5068449_full.jpg',
+                            },
+                            price: {
+                                displayRetail: '$119.99',
+                            },
+                            detail: {
+                                title: '49ers Shop',
+                                qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://fanatics.com/49ers-purdy-jersey',
+                                link: {
+                                    href: 'https://fanatics.com/49ers-purdy-jersey',
+                                    text: 'Scan to shop',
+                                },
+                            },
+                        },
+                        {
+                            type: 'product',
+                            name: "Men's San Francisco 49ers George Kittle Nike Scarlet Game Player Jersey",
+                            image: {
+                                href: 'https://fanatics.frgimages.com/san-francisco-49ers/mens-san-francisco-49ers-george-kittle-nike-scarlet-game-player-jersey_pi4234000_ff_4234524_full.jpg',
+                            },
+                            price: {
+                                displayRetail: '$119.99',
+                                displayClearance: '$79.99',
+                            },
+                            detail: {
+                                title: '49ers Shop',
+                                qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://fanatics.com/49ers-kittle-jersey',
+                                link: {
+                                    href: 'https://fanatics.com/49ers-kittle-jersey',
+                                    text: 'Scan to shop',
+                                },
+                            },
+                        },
+                        {
+                            type: 'browse',
+                            name: 'Want More?',
+                            caption: 'Browse all 49ers merch',
+                            image: {
+                                href: 'https://a.espncdn.com/i/teamlogos/nfl/500/sf.png',
+                            },
+                            detail: {
+                                title: '49ers Shop',
+                                qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://fanatics.com/49ers',
+                                link: {
+                                    href: 'https://fanatics.com/49ers',
+                                    text: 'Scan to browse all',
+                                },
+                            },
+                        },
+                    ],
+                },
+                {
+                    title: 'NFL Shop',
+                    items: [
+                        {
+                            type: 'product',
+                            name: 'NFL Nike Official Authentic Game Football',
+                            image: {
+                                href: 'https://fanatics.frgimages.com/nfl/nfl-nike-official-authentic-game-football_pi4759000_ff_4759291_full.jpg',
+                            },
+                            price: {
+                                displayRetail: '$99.99',
+                            },
+                            detail: {
+                                title: 'NFL Shop',
+                                qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://fanatics.com/nfl-football',
+                                link: {
+                                    href: 'https://fanatics.com/nfl-football',
+                                    text: 'Scan to shop',
+                                },
+                            },
+                        },
+                        {
+                            type: 'browse',
+                            name: 'Want More?',
+                            caption: 'Browse all NFL merch',
+                            image: {
+                                href: 'https://a.espncdn.com/i/teamlogos/leagues/500/nfl.png',
+                            },
+                            detail: {
+                                title: 'NFL Shop',
+                                qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://fanatics.com/nfl',
+                                link: {
+                                    href: 'https://fanatics.com/nfl',
+                                    text: 'Scan to browse all',
+                                },
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};
+/**
+ * Mock shop data for NBA game
+ */
+export const MOCK_SHOP_NBA_RESPONSE = {
+    shop: [
+        {
+            sections: [
+                {
+                    title: 'Lakers Shop',
+                    items: [
+                        {
+                            type: 'product',
+                            name: "Men's Los Angeles Lakers LeBron James Nike Purple Swingman Jersey - Icon Edition",
+                            image: {
+                                href: 'https://fanatics.frgimages.com/los-angeles-lakers/mens-los-angeles-lakers-lebron-james-nike-purple-swingman-jersey-icon-edition_pi4548000_ff_4548764_full.jpg',
+                            },
+                            price: {
+                                displayRetail: '$129.99',
+                            },
+                            detail: {
+                                title: 'Lakers Shop',
+                                qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://fanatics.com/lakers-lebron-jersey',
+                                link: {
+                                    href: 'https://fanatics.com/lakers-lebron-jersey',
+                                    text: 'Scan to shop',
+                                },
+                            },
+                        },
+                        {
+                            type: 'product',
+                            name: "Men's Los Angeles Lakers Anthony Davis Nike Gold Swingman Jersey - City Edition",
+                            image: {
+                                href: 'https://fanatics.frgimages.com/los-angeles-lakers/mens-los-angeles-lakers-anthony-davis-nike-gold-swingman-jersey-city-edition_pi5129000_ff_5129446_full.jpg',
+                            },
+                            price: {
+                                displayRetail: '$129.99',
+                            },
+                            detail: {
+                                title: 'Lakers Shop',
+                                qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://fanatics.com/lakers-davis-jersey',
+                                link: {
+                                    href: 'https://fanatics.com/lakers-davis-jersey',
+                                    text: 'Scan to shop',
+                                },
+                            },
+                        },
+                        {
+                            type: 'browse',
+                            name: 'Want More?',
+                            caption: 'Browse all Lakers merch',
+                            image: {
+                                href: 'https://a.espncdn.com/i/teamlogos/nba/500/lal.png',
+                            },
+                            detail: {
+                                title: 'Lakers Shop',
+                                qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://fanatics.com/lakers',
+                                link: {
+                                    href: 'https://fanatics.com/lakers',
+                                    text: 'Scan to browse all',
+                                },
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};
+/**
+ * Mock shop data for NCAA Football
+ */
+export const MOCK_SHOP_NCF_RESPONSE = {
+    shop: [
+        {
+            sections: [
+                {
+                    title: 'Texas Football Shop',
+                    items: [
+                        {
+                            type: 'product',
+                            name: 'Texas Longhorns Champion University Tee - Burnt Orange',
+                            image: {
+                                href: 'https://fanatics.frgimages.com/texas-longhorns/texas-longhorns-champion-university-tee-burnt-orange_pi4892000_ff_4892615_full.jpg',
+                            },
+                            price: {
+                                displayRetail: '$34.99',
+                            },
+                            detail: {
+                                title: 'Texas Shop',
+                                qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://fanatics.com/texas-tee',
+                                link: {
+                                    href: 'https://fanatics.com/texas-tee',
+                                    text: 'Scan to shop',
+                                },
+                            },
+                        },
+                        {
+                            type: 'browse',
+                            name: 'Want More?',
+                            caption: 'Browse all Texas merch',
+                            image: {
+                                href: 'https://a.espncdn.com/i/teamlogos/ncaa/500/251.png',
+                            },
+                            detail: {
+                                title: 'Texas Shop',
+                                qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://fanatics.com/texas',
+                                link: {
+                                    href: 'https://fanatics.com/texas',
+                                    text: 'Scan to browse all',
+                                },
+                            },
+                        },
+                    ],
+                },
+                {
+                    title: 'Texas A&M Shop',
+                    items: [
+                        {
+                            type: 'product',
+                            name: 'Texas A&M Aggies New Era Maroon 9FORTY Adjustable Hat',
+                            image: {
+                                href: 'https://fanatics.frgimages.com/texas-am-aggies/texas-am-aggies-new-era-maroon-9forty-adjustable-hat_pi4156000_ff_4156429_full.jpg',
+                            },
+                            price: {
+                                displayRetail: '$29.99',
+                            },
+                            detail: {
+                                title: 'Texas A&M Shop',
+                                qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://fanatics.com/texas-am-hat',
+                                link: {
+                                    href: 'https://fanatics.com/texas-am-hat',
+                                    text: 'Scan to shop',
+                                },
+                            },
+                        },
+                        {
+                            type: 'browse',
+                            name: 'Want More?',
+                            caption: 'Browse all Texas A&M merch',
+                            image: {
+                                href: 'https://a.espncdn.com/i/teamlogos/ncaa/500/245.png',
+                            },
+                            detail: {
+                                title: 'Texas A&M Shop',
+                                qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://fanatics.com/texas-am',
+                                link: {
+                                    href: 'https://fanatics.com/texas-am',
+                                    text: 'Scan to browse all',
+                                },
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};
+/**
+ * Mock shop data with empty sections
+ */
+export const MOCK_SHOP_EMPTY_RESPONSE = {
+    shop: [
+        {
+            sections: [],
+            defaultItem: {
+                detail: {
+                    disclaimer: 'Visit shop.espn.com to explore more products and exclusive offers.',
+                    title: 'Shop the ESPN Store',
+                    backgroundImage: 'https://placedog.net/568x704',
+                },
+            },
+        },
+    ],
+};
+/**
+ * Mock shop data with single section
+ */
+export const MOCK_SHOP_SINGLE_SECTION_RESPONSE = {
+    shop: [
+        {
+            sections: [
+                {
+                    title: 'Team Shop',
+                    items: [
+                        {
+                            type: 'product',
+                            name: 'Premium Team Jersey - Official Merchandise',
+                            image: {
+                                href: 'https://via.placeholder.com/400x400/0066cc/ffffff?text=Team+Jersey',
+                            },
+                            price: {
+                                displayRetail: '$89.99',
+                            },
+                            detail: {
+                                title: 'Team Shop',
+                                qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://fanatics.com/team-jersey',
+                                link: {
+                                    href: 'https://fanatics.com/team-jersey',
+                                    text: 'Scan to shop',
+                                },
+                            },
+                        },
+                        {
+                            type: 'browse',
+                            name: 'Want More?',
+                            caption: 'Browse all team merch',
+                            image: {
+                                href: 'https://via.placeholder.com/400x400/0066cc/ffffff?text=Team+Logo',
+                            },
+                            detail: {
+                                title: 'Team Shop',
+                                qrCode: 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://fanatics.com/team',
+                                link: {
+                                    href: 'https://fanatics.com/team',
+                                    text: 'Scan to browse all',
+                                },
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};

package/dist/src/modules/shop/types.d.ts

@@ -0,0 +1,161 @@
+/**
+ * Shop module type definitions
+ * Based on ESPN Shop API structure
+ */
+/**
+ * Image reference
+ */
+export interface IShopImage {
+    /** Image URL */
+    href?: string;
+    /** Image width */
+    width?: number;
+    /** Image height */
+    height?: number;
+}
+/**
+ * Logo reference (same structure as image)
+ */
+export interface IShopLogo {
+    /** Logo URL */
+    href?: string;
+    /** Logo width */
+    width?: number;
+    /** Logo height */
+    height?: number;
+}
+/**
+ * Link reference
+ */
+export interface IShopLink {
+    /** Link URL */
+    href?: string;
+    /** Link text */
+    text?: string;
+    /** Link relations (e.g., ["ictv", "fanatics", "index", "team"]) */
+    rel?: string[];
+}
+/**
+ * Price information for a product
+ */
+export interface IShopPrice {
+    /** Retail price display string (e.g., "$29.99") */
+    displayRetail?: string;
+    /** Sale price display string (e.g., "$19.99") - optional */
+    displaySale?: string;
+    /** Clearance price display string (e.g., "$14.99") - optional */
+    displayClearance?: string;
+}
+/**
+ * Product detail information shown in detail view
+ */
+export interface IShopDetail {
+    /** Title for the detail view */
+    title?: string;
+    /** Description (optional, used for browse cards) */
+    description?: string;
+    /** Link information */
+    link?: IShopLink;
+    /** Background image URL */
+    backgroundImage?: string;
+    /** QR code image URL */
+    qrCode?: string;
+    /** Disclaimer text */
+    disclaimer?: string;
+}
+/**
+ * Product item in a shop section
+ */
+export interface IShopProduct {
+    /** Item type discriminator */
+    type?: 'product';
+    /** Product name */
+    name?: string;
+    /** Product image */
+    image?: IShopImage;
+    /** Price information */
+    price?: IShopPrice;
+    /** Detail view information */
+    detail?: IShopDetail;
+}
+/**
+ * Browse card item (Want More?) in a shop section
+ */
+export interface IShopBrowseCard {
+    /** Item type discriminator */
+    type?: 'browse';
+    /** Browse card name */
+    name?: string;
+    /** Caption text (e.g., "Browse all Canadiens merch") */
+    caption?: string;
+    /** Team/League/Event logo */
+    image?: IShopImage;
+    /** Detail view information */
+    detail?: IShopDetail;
+}
+/**
+ * Union type for all shop items
+ */
+export type IShopItem = IShopProduct | IShopBrowseCard;
+/**
+ * Section product information (team/league info)
+ */
+export interface IShopSectionProduct {
+    /** Product/Team ID */
+    id?: string;
+    /** Short display name (e.g., "Canadiens") */
+    shortDisplayName?: string;
+    /** Logo reference */
+    logo?: IShopLogo;
+    /** Type (e.g., "team") */
+    type?: string;
+    /** Link information */
+    link?: IShopLink;
+    /** Background image URL */
+    backgroundImage?: string;
+}
+/**
+ * Shop section containing a title and list of items
+ */
+export interface IShopSection {
+    /** Section title (e.g., "Shop Canadiens Merch") */
+    title?: string;
+    /** Section product/team information */
+    product?: IShopSectionProduct;
+    /** Array of products or browse cards */
+    items?: IShopItem[];
+}
+export type IShopDefaultItem = {
+    image?: {
+        href?: string;
+        width?: number;
+        height?: number;
+    };
+    type?: string;
+    detail?: {
+        title?: string;
+        link?: {
+            href?: string;
+            text?: string;
+        };
+        backgroundImage?: string;
+        qrCode?: string;
+        disclaimer?: string;
+    };
+};
+/**
+ * Shop container with sections
+ */
+export interface IShopContainer {
+    /** Array of shop sections */
+    sections?: IShopSection[];
+    defaultItem?: IShopDefaultItem;
+}
+/**
+ * Main shop API response
+ */
+export interface IShopResponse {
+    /** Array of shop containers (typically one) */
+    shop?: IShopContainer[];
+}
+export declare const isShopProduct: (item: IShopItem) => item is IShopProduct;

package/dist/src/modules/shop/types.js

@@ -0,0 +1,7 @@
+/**
+ * Shop module type definitions
+ * Based on ESPN Shop API structure
+ */
+export const isShopProduct = (item) => {
+    return item.type === 'product';
+};

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

@@ -0,0 +1,9 @@
+import './ProductDetailView.styles.css';
+import { IShopBrowseCard, IShopProduct } from '../../types';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+export type ProductDetailViewProps = {
+    product: IShopProduct | IShopBrowseCard;
+    focusKey: string;
+};
+declare const ProductDetailView: (props: ProductDetailViewProps & WithFocusableProps) => JSX.Element;
+export default ProductDetailView;

package/dist/src/modules/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/shop/view/ProductDetailView/index.d.ts

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

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

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

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

@@ -0,0 +1,35 @@
+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 vm;
+    constructor(props: {});
+    get viewModel(): ShopViewModel;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    clearTabLoadFailure: () => void;
+    onArrowPress: (d: Direction) => void;
+    openItemDetail: (selectedItem: IShopProduct | IShopBrowseCard, selectedShopSection: IShopSection, selectedItemFocusKey: string) => void;
+    closeProductDetail: () => void;
+    trackPromoEnterPress: () => void;
+    renderContent: () => JSX.Element | JSX.Element[];
+    render(): JSX.Element;
+}
+export default ShopView;