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

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

@@ -7,10 +7,10 @@ export type BrowseCardProps = {
     browseCard: IShopBrowseCard;
 };
 export declare class BrowseCardView extends React.Component<BrowseCardProps & WithFocusableProps> {
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 declare const _default: {
-    new (props?: (BrowseCardProps & WithFocusableProps) | undefined, context?: any): {
+    new (props: (BrowseCardProps & WithFocusableProps) | Readonly<BrowseCardProps & WithFocusableProps>): {
         state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
         navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
@@ -30,20 +30,65 @@ declare const _default: {
         componentDidMount(): void;
         componentDidUpdate(): void;
         componentWillUnmount(): void;
-        render(): React.ReactElement<BrowseCardProps & WithFocusableProps>;
-        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: BrowseCardProps & WithFocusableProps) => import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>) | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>, callback?: (() => any) | undefined): void;
-        forceUpdate(callBack?: (() => any) | undefined): void;
-        props: Readonly<{
-            children?: React.ReactNode;
-        }> & Readonly<BrowseCardProps & WithFocusableProps>;
+        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?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (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>;
@@ -51,5 +96,6 @@ declare const _default: {
     childContextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
     };
+    contextType?: React.Context<any> | undefined;
 };
 export default _default;

package/dist/src/modules/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" },
+                React.createElement("div", { className: "browse-card-tagline T20 FONT_BOLD" }, name || 'Want more?'),
+                React.createElement("div", { className: "browse-card-caption T10" }, 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/shop/view/components/BrowseCard/index.js

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

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

@@ -11,7 +11,7 @@ export type ProductSummaryCardProps = {
     onBecameFocused?: (layout: Layout) => void;
 };
 declare const _default: {
-    new (props?: (ProductSummaryCardProps & WithFocusableProps) | undefined, context?: any): {
+    new (props: (ProductSummaryCardProps & WithFocusableProps) | Readonly<ProductSummaryCardProps & WithFocusableProps>): {
         state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
         navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
@@ -31,20 +31,65 @@ declare const _default: {
         componentDidMount(): void;
         componentDidUpdate(): void;
         componentWillUnmount(): void;
-        render(): React.ReactElement<ProductSummaryCardProps & WithFocusableProps>;
-        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: ProductSummaryCardProps & WithFocusableProps) => import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>) | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>, callback?: (() => any) | undefined): void;
-        forceUpdate(callBack?: (() => any) | undefined): void;
-        props: Readonly<{
-            children?: React.ReactNode;
-        }> & Readonly<ProductSummaryCardProps & WithFocusableProps>;
+        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?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (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>;
@@ -52,5 +97,6 @@ declare const _default: {
     childContextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
     };
+    contextType?: React.Context<any> | undefined;
 };
 export default _default;

package/dist/src/modules/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 FONT_BOLD" }, 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/shop/view/components/ProductSummaryCard/index.js

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

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

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

package/dist/src/modules/shop/view/components/ShopPromoView/ShopPromoView.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { withFocusable, } from '@/external/spatial-navigation';
+import './ShopPromoView.styles.css';
+import Image from '@/components/atoms/Image';
+const ShopPromoView = (props) => {
+    const promo = props.promoData;
+    return (React.createElement("div", { className: "shop-promo-view focus-ring T20", "data-focused": props.focused, style: { backgroundImage: `url(${promo.detail?.backgroundImage})` } },
+        React.createElement(Image, { src: promo.image?.href, alt: "Promo Logo", className: "shop-promo-logo" }),
+        React.createElement("div", { className: "shop-promo-title T30" }, promo.detail?.title),
+        React.createElement(Image, { src: promo.detail?.qrCode, alt: "QR Code", className: "shop-promo-qr-code" }),
+        React.createElement("p", { className: "shop-promo-description T20" }, promo.detail?.link?.text)));
+};
+const FocusablePromoView = withFocusable()(ShopPromoView);
+const ShopPromoViewWrapper = (props) => {
+    return (React.createElement("div", null,
+        React.createElement(FocusablePromoView, { ...props }),
+        React.createElement("div", { className: "promo-view-disclaimer T02 TEXT_200 FONT_BOLD" }, props.promoData.detail?.disclaimer)));
+};
+export default ShopPromoViewWrapper;

package/dist/src/modules/shop/view/components/ShopPromoView/index.js

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

package/dist/src/modules/shop/view/components/ShopSection/ShopSection.d.ts

@@ -1,21 +1,23 @@
+/// <reference types="prop-types" />
 import React from 'react';
 import './ShopSection.styles.css';
 import { IShopBrowseCard, IShopProduct, IShopSection } from '../../../types';
 import { Direction, Layout } from '@/external/spatial-navigation/utils';
 export type ShopSectionProps = {
+    sectionIndex: number;
     section: IShopSection;
     onArrowPress: (direction: Direction) => void;
     onItemClick: (item: IShopProduct | IShopBrowseCard, section: IShopSection, focusKey: string) => void;
 };
 declare class ShopSection extends React.Component<ShopSectionProps> {
     static contextTypes: {
-        refsMap: React.Requireable<any>;
-        setRef: React.Requireable<any>;
-        scrollToFocusedElement: React.Requireable<any>;
+        refsMap: import("prop-types").Requireable<(HTMLElement | null | undefined)[]>;
+        setRef: import("prop-types").Requireable<(...args: any[]) => any>;
+        scrollToFocusedElement: import("prop-types").Requireable<(...args: any[]) => any>;
     };
     context: import("@/components/core/ScrollableContainer/ScrollableContainer").ScrollableContainerContextType;
     onBecameFocused: (layout: Layout) => void;
     onEnterPress: (item: IShopProduct | IShopBrowseCard, section: IShopSection, focusKey: string) => () => void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default ShopSection;

package/dist/src/modules/shop/view/components/ShopSection/ShopSection.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import './ShopSection.styles.css';
+import ProductSummaryCard from '../ProductSummaryCard';
+import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
+import FocusableItem from '@/components/core/ScrollableContainer/FocusableItem';
+import BrowseCard from '../BrowseCard';
+class ShopSection extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
+        });
+        Object.defineProperty(this, "onBecameFocused", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (layout) => {
+                this.context.scrollToFocusedElement(layout, {
+                    offsetTop: 40,
+                });
+            }
+        });
+        Object.defineProperty(this, "onEnterPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (item, section, focusKey) => () => {
+                this.props.onItemClick(item, section, focusKey);
+            }
+        });
+    }
+    render() {
+        const { section, sectionIndex, onArrowPress } = this.props;
+        return (React.createElement("div", { className: "shop-section" },
+            React.createElement("h2", { className: "shop-section-title TEXT_200" }, section.title),
+            React.createElement("div", { className: "shop-section-items" }, section.items?.map((item, itemIndex) => {
+                const focusKey = `shop-section-${sectionIndex}-item-${itemIndex}`;
+                if (item.type === 'product') {
+                    return (React.createElement(FocusableItem, { key: itemIndex },
+                        React.createElement(ProductSummaryCard, { product: item, onEnterPress: this.onEnterPress(item, section, focusKey), onArrowPress: onArrowPress, onBecameFocused: this.onBecameFocused, focusKey: focusKey })));
+                }
+                else if (item.type === 'browse') {
+                    return (React.createElement(FocusableItem, { key: itemIndex },
+                        React.createElement(BrowseCard, { key: itemIndex, browseCard: item, onArrowPress: onArrowPress, onEnterPress: this.onEnterPress(item, section, focusKey), onBecameFocused: this.onBecameFocused, focusKey: focusKey })));
+                }
+                else {
+                    return null;
+                }
+            }))));
+    }
+}
+Object.defineProperty(ShopSection, "contextTypes", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: SCROLLABLE_CONTEXT_TYPE
+});
+export default ShopSection;

package/dist/src/modules/shop/view/components/ShopSection/ShopSectionItem.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { IShopBrowseCard, IShopProduct, IShopSection } from '@/modules/shop/types';
+import { Direction, Layout } from '@/external/spatial-navigation/utils';
+type Props = {
+    item: IShopProduct | IShopBrowseCard;
+    itemIndex: number;
+    section: IShopSection;
+    sectionIndex: number;
+    selectedItem: IShopProduct | IShopBrowseCard | null;
+    closeProductDetail: (d?: Direction) => void;
+    openItemDetail: (selectedItem: IShopProduct | IShopBrowseCard, selectedItemSection: IShopSection, selectedItemFocusKey: string) => () => void;
+    onBecameFocused: (layout: Layout) => void;
+    onProductDetailArrowPress: (d: Direction) => boolean;
+    onArrowPress: (direction: Direction) => boolean;
+    onProductDetailBecameFocused: (layout: Layout) => void;
+};
+declare const SectionItem: (props: Props) => React.JSX.Element | null;
+export default SectionItem;

package/dist/src/modules/shop/view/components/ShopSection/ShopSectionItem.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import BrowseCard from '../BrowseCard';
+import ProductSummaryCard from '../ProductSummaryCard';
+import ProductDetailView from '../../ProductDetailView';
+const SectionItem = (props) => {
+    const { item, itemIndex, section, selectedItem, closeProductDetail, onArrowPress, onBecameFocused, onProductDetailArrowPress, openItemDetail, onProductDetailBecameFocused, sectionIndex, } = props;
+    const focusKey = `shop-section-${sectionIndex}-item-${itemIndex}`;
+    const isItemSelected = JSON.stringify(selectedItem) === JSON.stringify(item);
+    if (isItemSelected) {
+        return (React.createElement(ProductDetailView, { focusKey: "product-detail-view", onEnterPress: closeProductDetail, product: item, onArrowPress: onProductDetailArrowPress, onBecameFocused: onProductDetailBecameFocused }));
+    }
+    if (item.type === 'product') {
+        return (React.createElement(ProductSummaryCard, { product: item, onEnterPress: openItemDetail(item, section, focusKey), onArrowPress: onArrowPress, onBecameFocused: onBecameFocused, focusKey: focusKey }));
+    }
+    else if (item.type === 'browse') {
+        return (React.createElement(BrowseCard, { key: itemIndex, browseCard: item, onArrowPress: onArrowPress, onBecameFocused: onBecameFocused, onEnterPress: openItemDetail(item, section, focusKey), focusKey: focusKey }));
+    }
+    else {
+        return null;
+    }
+};
+export default SectionItem;

package/dist/src/modules/shop/view/components/ShopSection/index.js

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

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

@@ -0,0 +1,2 @@
+import ShopView from './ShopView';
+export default ShopView;

package/dist/src/modules/shop/view-model/ShopViewModel.ShopPolling.js

@@ -0,0 +1,111 @@
+import { captureException } from '@/sentry';
+import { stringHashCode } from '@/helpers/strings';
+const DEFAULT_SHOP_POLLING_INTERVAL = 30000; // 30 seconds
+export default class ShopPolling {
+    constructor(service) {
+        Object.defineProperty(this, "polling", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                interval: DEFAULT_SHOP_POLLING_INTERVAL,
+                task: null,
+                lastResponseHash: null,
+            }
+        });
+        Object.defineProperty(this, "shopService", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.shopService = service;
+    }
+    /**
+     * Refresh polling for shop data
+     */
+    refresh(callback) {
+        // First stop any existing polling
+        this.stop();
+        // Start the poll loop
+        this.start(callback);
+    }
+    /**
+     * Stop polling for shop data
+     */
+    stop() {
+        if (this.polling.task) {
+            this.polling.task.stop();
+            this.polling.task = null;
+        }
+    }
+    removeLastResponseHash() {
+        this.polling.lastResponseHash = null;
+    }
+    start(callback) {
+        try {
+            this.polling.task = this.shopService.pollShopData(this.polling.interval, (response) => {
+                this.updateInterval(response.headers, callback);
+                this.processPolledData(response.data, callback);
+            }, (error) => this.handlePollingError(error));
+        }
+        catch (error) {
+            captureException(error, {
+                context: 'ShopViewModel.pollShop',
+            });
+            console.error('[SHOP] Error setting up shop polling:', error);
+        }
+    }
+    /**
+     * @description Update polling interval checking either response header or panel config.
+     * Refresh polling if necessary.
+     */
+    updateInterval(headers, callback) {
+        const headerInterval = this.getResponseHeaderPollingIntervalValue(headers);
+        // Only update if we have a valid new interval and it's different from current
+        if (headerInterval && headerInterval !== this.polling.interval) {
+            console.log(`[SHOP] Updating shop polling interval from ${this.polling.interval}ms to ${headerInterval}ms`);
+            this.polling.interval = headerInterval;
+            // Restart polling with the new interval
+            this.refresh(callback);
+        }
+    }
+    getResponseHeaderPollingIntervalValue(headers) {
+        const newInterval = headers['polling-interval'];
+        if (!newInterval) {
+            return null;
+        }
+        const parsedInterval = parseInt(newInterval, 10);
+        if (isNaN(parsedInterval) || parsedInterval <= 0) {
+            console.warn(`[SHOP] Invalid polling interval header received: ${newInterval}.`);
+            return null;
+        }
+        return parsedInterval * 1000; // Convert seconds to milliseconds
+    }
+    /**
+     * Process data received from polling
+     */
+    processPolledData(data, callback) {
+        // Calculate hash for the response to check if it's different from the last one
+        const responseHash = stringHashCode(JSON.stringify(data));
+        // Check if this is the same as the last successful response
+        if (this.polling.lastResponseHash === responseHash) {
+            console.log('[SHOP] Shop Response hash is the same as last successful response - skipping update');
+            return;
+        }
+        this.polling.lastResponseHash = responseHash;
+        callback(data);
+    }
+    /**
+     * Handle errors that occur during shop polling
+     */
+    handlePollingError(error) {
+        console.error('[SHOP] Shop polling error:', error);
+        captureException(error, {
+            context: 'ShopViewModel.pollShop',
+            extra: {
+                pollingInterval: this.polling.interval,
+            },
+        });
+    }
+}