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

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

@@ -0,0 +1,390 @@
+/**
+ * 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',
+                },
+            },
+        },
+    ],
+};
+/**
+ * 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.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

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

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

@@ -0,0 +1,56 @@
+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, 1024, 1024);
+                return newBgImage;
+            }
+        }
+        catch {
+            // Fallback to original check if URL parsing fails
+            if (bgImage.includes('stitcher')) {
+                const newBgImage = setImageDimensions(bgImage, 1024, 1024);
+                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, 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 T05_ALT" }, 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.js

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

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import './ShopView.styles.css';
 import { Direction } from '@/external/spatial-navigation/utils';
 import ShopViewModel, { ShopErrorState } from '../view-model/ShopViewModel';
@@ -29,7 +29,7 @@ declare class ShopView extends Component<{}, State> {
     openItemDetail: (selectedItem: IShopProduct | IShopBrowseCard, selectedShopSection: IShopSection, selectedItemFocusKey: string) => void;
     closeProductDetail: () => void;
     trackPromoEnterPress: () => void;
-    renderContent: () => React.JSX.Element | React.JSX.Element[];
-    render(): React.JSX.Element;
+    renderContent: () => JSX.Element | JSX.Element[];
+    render(): JSX.Element;
 }
 export default ShopView;

package/dist/src/modules/shop/view/ShopView.js

@@ -0,0 +1,182 @@
+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';
+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, "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, "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, 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 })));
+            }
+        });
+        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.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();
+        // 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) },
+                this.renderContent(),
+                React.createElement("div", { className: "shop-bottom-padding" }))));
+    }
+}
+export default ShopView;