@nok-integration/storefront-react 0.24.0 → 0.26.0

package/dist/index.d.ts

@@ -63,7 +63,7 @@ export declare interface BadgeProps {
 
 export declare type BadgeTone = 'neutral' | 'success' | 'critical' | 'promo';
 
-export declare function BottomSheet({ open, onClose, title, children, footer }: BottomSheetProps): JSX.Element | null;
+export declare function BottomSheet({ open, onClose, title, children, footer, wide }: BottomSheetProps): JSX.Element | null;
 
 export declare interface BottomSheetProps {
     open: boolean;
@@ -72,6 +72,7 @@ export declare interface BottomSheetProps {
     children: ReactNode;
     /** Optional sticky footer (e.g. a StickyCtaBar). */
     footer?: ReactNode;
+    wide?: 'sheet' | 'panel';
 }
 
 /**
@@ -318,6 +319,151 @@ declare function CartSheetProvider({ children }: {
 export { CartSheetProvider as CartSheet }
 export { CartSheetProvider }
 
+/**
+ * Cart totals: the standard pricing breakdown, plus what came off.
+ *
+ * `discount` is **additive** — `Pricing` itself is untouched, because it is shared with
+ * surfaces that have no concept of one and must not grow a field they cannot populate.
+ */
+declare const CartTotals: z.ZodObject<{
+    subtotal: z.ZodObject<{
+        amount: z.ZodNumber;
+        currency: z.ZodString;
+    }, "strict", z.ZodTypeAny, {
+        amount: number;
+        currency: string;
+    }, {
+        amount: number;
+        currency: string;
+    }>;
+    shipping: z.ZodObject<{
+        amount: z.ZodNumber;
+        currency: z.ZodString;
+    }, "strict", z.ZodTypeAny, {
+        amount: number;
+        currency: string;
+    }, {
+        amount: number;
+        currency: string;
+    }>;
+    tax: z.ZodObject<{
+        amount: z.ZodNumber;
+        currency: z.ZodString;
+    }, "strict", z.ZodTypeAny, {
+        amount: number;
+        currency: string;
+    }, {
+        amount: number;
+        currency: string;
+    }>;
+    total: z.ZodObject<{
+        amount: z.ZodNumber;
+        currency: z.ZodString;
+    }, "strict", z.ZodTypeAny, {
+        amount: number;
+        currency: string;
+    }, {
+        amount: number;
+        currency: string;
+    }>;
+} & {
+    /**
+     * What came off across the whole basket, as a **positive** amount. Absent means nothing
+     * did; a zero is never sent.
+     *
+     * Positive rather than signed, and the surface that draws it owns the minus sign —
+     * exactly as `OrderTotals.discount` does. A signed field invites a reader to add it to a
+     * running total, and nothing here is a running total: every figure is server-computed
+     * and `total` is never derived by a consumer from the parts.
+     *
+     * Kept out of `subtotal` deliberately. The design lists a subtotal and a discount as two
+     * rows because the fan is owed both figures, and folding the saving into the subtotal
+     * loses the one they came for.
+     */
+    discount: z.ZodOptional<z.ZodObject<{
+        amount: z.ZodNumber;
+        currency: z.ZodString;
+    }, "strict", z.ZodTypeAny, {
+        amount: number;
+        currency: string;
+    }, {
+        amount: number;
+        currency: string;
+    }>>;
+    /**
+     * The lines at their undiscounted prices: each line's `compare_at_unit_price` where it
+     * has one, otherwise its `unit_price`, times its quantity. Present exactly when
+     * `discount` is, and absent means it equals `subtotal`.
+     *
+     * This is the figure the summary's Subtotal row draws above the Discount row, so the
+     * rows read top to bottom: `subtotal_before_discount` − `discount` = `subtotal`, and
+     * `total` is `subtotal` plus shipping and tax. `subtotal` itself keeps its meaning — what
+     * the lines cost now — because the hand-off and analytics read it as the basket's value.
+     */
+    subtotal_before_discount: z.ZodOptional<z.ZodObject<{
+        amount: z.ZodNumber;
+        currency: z.ZodString;
+    }, "strict", z.ZodTypeAny, {
+        amount: number;
+        currency: string;
+    }, {
+        amount: number;
+        currency: string;
+    }>>;
+}, "strip", z.ZodTypeAny, {
+    subtotal: {
+        amount: number;
+        currency: string;
+    };
+    shipping: {
+        amount: number;
+        currency: string;
+    };
+    tax: {
+        amount: number;
+        currency: string;
+    };
+    total: {
+        amount: number;
+        currency: string;
+    };
+    discount?: {
+        amount: number;
+        currency: string;
+    } | undefined;
+    subtotal_before_discount?: {
+        amount: number;
+        currency: string;
+    } | undefined;
+}, {
+    subtotal: {
+        amount: number;
+        currency: string;
+    };
+    shipping: {
+        amount: number;
+        currency: string;
+    };
+    tax: {
+        amount: number;
+        currency: string;
+    };
+    total: {
+        amount: number;
+        currency: string;
+    };
+    discount?: {
+        amount: number;
+        currency: string;
+    } | undefined;
+    subtotal_before_discount?: {
+        amount: number;
+        currency: string;
+    } | undefined;
+}>;
+
+declare type CartTotals = z.infer<typeof CartTotals>;
+
 /**
  * Opens the cart as a bottom sheet.
  *
@@ -419,13 +565,19 @@ declare const CategoryHero: z.ZodObject<{
     title: z.ZodString;
     subtitle: z.ZodOptional<z.ZodString>;
     image: z.ZodOptional<z.ZodString>;
+    /**
+     * The hero at desktop width (1200px and up). Absent = `image` is used at every width.
+     */
+    desktop_image: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     title: string;
     image?: string | undefined;
+    desktop_image?: string | undefined;
     subtitle?: string | undefined;
 }, {
     title: string;
     image?: string | undefined;
+    desktop_image?: string | undefined;
     subtitle?: string | undefined;
 }>;
 
@@ -437,13 +589,19 @@ declare const CategoryPage: z.ZodObject<{
         title: z.ZodString;
         subtitle: z.ZodOptional<z.ZodString>;
         image: z.ZodOptional<z.ZodString>;
+        /**
+         * The hero at desktop width (1200px and up). Absent = `image` is used at every width.
+         */
+        desktop_image: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
         title: string;
         image?: string | undefined;
+        desktop_image?: string | undefined;
         subtitle?: string | undefined;
     }, {
         title: string;
         image?: string | undefined;
+        desktop_image?: string | undefined;
         subtitle?: string | undefined;
     }>;
     blocks: z.ZodArray<z.ZodDiscriminatedUnion<"kind", [z.ZodObject<{
@@ -1299,14 +1457,22 @@ declare const CategoryPage: z.ZodObject<{
         kind: z.ZodLiteral<"lifestyle_image">;
         images: z.ZodArray<z.ZodString, "many">;
         videos: z.ZodOptional<z.ZodArray<z.ZodNullable<z.ZodString>, "many">>;
+        /**
+         * Parallel to `images`: the still drawn for slide `i` at desktop width (1200px and up),
+         * in place of `images[i]` and of `videos[i]`. `null`, or an index past the end, keeps
+         * that slide as it is at every width. Like `videos`, it never adds a slide.
+         */
+        desktop_images: z.ZodOptional<z.ZodArray<z.ZodNullable<z.ZodString>, "many">>;
     }, "strip", z.ZodTypeAny, {
         kind: "lifestyle_image";
         images: string[];
         videos?: (string | null)[] | undefined;
+        desktop_images?: (string | null)[] | undefined;
     }, {
         kind: "lifestyle_image";
         images: string[];
         videos?: (string | null)[] | undefined;
+        desktop_images?: (string | null)[] | undefined;
     }>, z.ZodObject<{
         kind: z.ZodLiteral<"grid">;
         title: z.ZodOptional<z.ZodString>;
@@ -1676,6 +1842,7 @@ declare const CategoryPage: z.ZodObject<{
     hero: {
         title: string;
         image?: string | undefined;
+        desktop_image?: string | undefined;
         subtitle?: string | undefined;
     };
     blocks: ({
@@ -1776,6 +1943,7 @@ declare const CategoryPage: z.ZodObject<{
         kind: "lifestyle_image";
         images: string[];
         videos?: (string | null)[] | undefined;
+        desktop_images?: (string | null)[] | undefined;
     } | {
         kind: "grid";
         products: {
@@ -1893,6 +2061,7 @@ declare const CategoryPage: z.ZodObject<{
     hero: {
         title: string;
         image?: string | undefined;
+        desktop_image?: string | undefined;
         subtitle?: string | undefined;
     };
     blocks: ({
@@ -1993,6 +2162,7 @@ declare const CategoryPage: z.ZodObject<{
         kind: "lifestyle_image";
         images: string[];
         videos?: (string | null)[] | undefined;
+        desktop_images?: (string | null)[] | undefined;
     } | {
         kind: "grid";
         products: {
@@ -2371,6 +2541,7 @@ declare function createClient(options: ClientOptions): {
                 title: string;
                 image?: string | undefined;
                 subtitle?: string | undefined;
+                desktop_image?: string | undefined;
             };
             blocks: ({
                 title: string;
@@ -2470,6 +2641,7 @@ declare function createClient(options: ClientOptions): {
                 kind: "lifestyle_image";
                 images: string[];
                 videos?: (string | null)[] | undefined;
+                desktop_images?: (string | null)[] | undefined;
             } | {
                 kind: "grid";
                 products: {
@@ -2593,6 +2765,7 @@ declare function createClient(options: ClientOptions): {
                 key: string;
                 cta: string;
                 image?: string | undefined;
+                desktop_image?: string | undefined;
                 target?: string | undefined;
                 video?: string | undefined;
                 focal_y?: number | undefined;
@@ -2682,6 +2855,10 @@ declare function createClient(options: ClientOptions): {
                     amount: number;
                     currency: string;
                 } | undefined;
+                subtotal_before_discount?: {
+                    amount: number;
+                    currency: string;
+                } | undefined;
             };
             locked?: {
                 reason: "checkout_handoff";
@@ -2741,6 +2918,10 @@ declare function createClient(options: ClientOptions): {
                     amount: number;
                     currency: string;
                 } | undefined;
+                subtotal_before_discount?: {
+                    amount: number;
+                    currency: string;
+                } | undefined;
             };
             locked?: {
                 reason: "checkout_handoff";
@@ -2800,6 +2981,10 @@ declare function createClient(options: ClientOptions): {
                     amount: number;
                     currency: string;
                 } | undefined;
+                subtotal_before_discount?: {
+                    amount: number;
+                    currency: string;
+                } | undefined;
             };
             locked?: {
                 reason: "checkout_handoff";
@@ -2859,6 +3044,10 @@ declare function createClient(options: ClientOptions): {
                     amount: number;
                     currency: string;
                 } | undefined;
+                subtotal_before_discount?: {
+                    amount: number;
+                    currency: string;
+                } | undefined;
             };
             locked?: {
                 reason: "checkout_handoff";
@@ -2918,6 +3107,10 @@ declare function createClient(options: ClientOptions): {
                     amount: number;
                     currency: string;
                 } | undefined;
+                subtotal_before_discount?: {
+                    amount: number;
+                    currency: string;
+                } | undefined;
             };
             locked?: {
                 reason: "checkout_handoff";
@@ -2949,7 +3142,7 @@ declare function createClient(options: ClientOptions): {
      */
     stockAlerts: {
         /** "Remind me when available" — idempotent per SKU for the session's principal. */
-        create: (body: StockAlertRequest) => Promise<{
+        create: (body: StockAlertRequest, query?: CartMarketQuery) => Promise<{
             sku: string;
             created_at: string;
             notified_at?: string | undefined;
@@ -3340,6 +3533,10 @@ declare function createClient(options: ClientOptions): {
                     amount: number;
                     currency: string;
                 } | undefined;
+                subtotal_before_discount?: {
+                    amount: number;
+                    currency: string;
+                } | undefined;
             };
             locked?: {
                 reason: "checkout_handoff";
@@ -3761,7 +3958,7 @@ export declare function isUnauthorized(err: unknown): boolean;
  * down the page has no business fetching a megabyte before it is anywhere near the screen,
  * and `ShopVideo` starts its own download when the slide comes into view.
  */
-export declare function LifestyleImage({ images, videos }: LifestyleImageProps): JSX.Element | null;
+export declare function LifestyleImage({ images, videos, desktopImages }: LifestyleImageProps): JSX.Element | null;
 
 declare interface LifestyleImageProps {
     images: string[];
@@ -3771,6 +3968,8 @@ declare interface LifestyleImageProps {
      * contracts 2.51.0.
      */
     videos?: (string | null)[];
+    /** Parallel to `images`: the still drawn for that slide from 1200px wide, `null` for none. */
+    desktopImages?: (string | null)[];
 }
 
 /** Editorial text band between PCP sections. */
@@ -4466,7 +4665,7 @@ declare type OrderDetail = z.infer<typeof OrderDetail>;
 export declare function OrderListView(props: OrderListViewProps): JSX.Element;
 
 export declare interface OrderListViewProps {
-    /** Opens one order. Without it the rows render as static cards rather than dead links. */
+    /** Opens one order on a route of your own. Without it the order opens in place of the list. */
     onOpenOrder?: (orderRef: string) => void;
     /**
      * Open one return on a route of your own.
@@ -4478,7 +4677,7 @@ export declare interface OrderListViewProps {
      * landing them on the order is a different answer to the question they asked.
      */
     onOpenReturn?: (returnRef: string) => void;
-    /** The empty state's call to action — the design's "Continue shopping" button. */
+    /** The empty state's "Continue shopping". Without it the button navigates to the shop home. */
     onStartShopping?: () => void;
     /** Overrides the provider's locale for dates. */
     locale?: string;
@@ -4518,10 +4717,15 @@ export declare interface OrderStatusBadgeProps {
  * The pricing breakdown. DISPLAY ONLY — every value is server-authoritative; the UI
  * never sums or computes anything here.
  */
-export declare function OrderSummary({ pricing, deferred, hidden, rows, discount, }: OrderSummaryProps): JSX.Element;
+export declare function OrderSummary({ pricing, deferred, hidden, rows, discount, collapsible, }: OrderSummaryProps): JSX.Element;
 
 export declare interface OrderSummaryProps {
-    pricing: Pricing;
+    /**
+     * The figures to draw. A cart's `totals` also carries `subtotal_before_discount`, which
+     * the Subtotal row shows whenever the Discount row is drawn, so the rows read
+     * Subtotal − Discount = Total exactly as the engine sent them.
+     */
+    pricing: Pricing & Partial<Pick<CartTotals, 'subtotal_before_discount'>>;
     /**
      * Row order and wording, where a surface's design differs from the cart's.
      *
@@ -4569,6 +4773,7 @@ export declare interface OrderSummaryProps {
      * the grand total is DAZN's, never the sum of the rows above it.
      */
     discount?: Money;
+    collapsible?: boolean;
 }
 
 export declare function OrderTimeline({ progress, estimatedDelivery, locale: localeProp, }: OrderTimelineProps): JSX.Element;
@@ -5180,7 +5385,7 @@ declare type ProductPromo = z.infer<typeof ProductPromo>;
  * 165:220 image (radius-6) with a TOP PICK flag top-left and a green sale badge
  * bottom-left; below sit the title (2-line clamp) and price with a struck was-price.
  */
-export declare function ProductTile({ product, priority, size }: ProductTileProps): JSX.Element;
+export declare function ProductTile({ product, priority, size, flag }: ProductTileProps): JSX.Element;
 
 export declare interface ProductTileProps {
     product: Product;
@@ -5191,6 +5396,8 @@ export declare interface ProductTileProps {
      * a taller 343:457 image and an 18px title (Figma `size=large`).
      */
     size?: 'default' | 'large';
+    /** The flag over the image, in place of the product's first badge. */
+    flag?: string;
 }
 
 /** `GET /v1/catalog/products` — a single purchasable variant of a product. */
@@ -5734,14 +5941,6 @@ declare interface Review {
     author: string;
 }
 
-/**
- * Tester-quote carousel — swipeable cards with dot pagination.
- *
- * These are tester quotes, not customer reviews: no stars and no ratings, and the `author`
- * under each quote is what says whose words they are — a team and a city, never a person.
- * A quote must therefore never arrive without one. The block draws no disclaimer line, in
- * line with the frame.
- */
 export declare function ReviewCarousel({ quotes }: ReviewCarouselProps): JSX.Element;
 
 declare interface ReviewCarouselProps {
@@ -5760,6 +5959,18 @@ export declare interface SaleBadgeProps {
     pct: number;
 }
 
+export declare interface ScreenCrumb {
+    label: string;
+    to?: ShopRoute;
+}
+
+export declare interface ScreenNav {
+    crumbs: ScreenCrumb[];
+    tone: ScreenNavTone;
+}
+
+export declare type ScreenNavTone = 'media' | 'light';
+
 /**
  * What a whole screen looks like while its data is in flight.
  *
@@ -6064,28 +6275,15 @@ export declare interface ShopHeaderProps {
     className?: string;
 }
 
-/**
- * The replacement for `next/image` inside the SDK.
- *
- * `next/image` cannot come with us: it needs the Next runtime and its optimiser
- * endpoint, and the SDK runs in DAZN's bundle where neither exists. So this is a plain
- * `<img>` with the platform features that actually carry the weight — native lazy
- * loading, `decoding="async"`, `sizes`, and `fetchpriority` for the LCP image.
- *
- * **What is genuinely lost is on-the-fly resizing and format negotiation** (AVIF/WebP
- * per browser). That is not something a component can polyfill — it is a serving
- * concern. Whoever serves the catalogue media should emit `srcset`-ready derivatives
- * and modern formats; until then, this renders the source as given rather than
- * pretending to optimise it.
- *
- * The one rewrite it does perform is rebasing **root-relative** paths onto the host's
- * `assetBaseUrl` — see {@link resolveAssetUrl}. Without it the SDK's own design imagery
- * is requested from the host's origin, which does not serve it.
- */
-export declare function ShopImage({ src, alt, fill, width, height, sizes, className, style, priority, }: ShopImageProps): JSX.Element;
+export declare function ShopImage({ src, desktopSrc, alt, fill, width, height, sizes, className, style, priority, }: ShopImageProps): JSX.Element;
 
 export declare interface ShopImageProps {
     src: string;
+    /**
+     * Drawn instead of `src` from 1200px wide. The browser picks one before fetching, so only
+     * the one shown is downloaded and nothing moves when it is chosen.
+     */
+    desktopSrc?: string;
     alt: string;
     /**
      * Fill the positioned ancestor, as `next/image`'s `fill` does. The parent must be
@@ -6146,7 +6344,7 @@ export declare interface ShopLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnc
  * that has one passes `onHelp`. An inert row is marked `aria-disabled`, so a screen reader
  * is told what a sighted fan discovers by tapping.
  */
-export declare function ShopMenuSheet({ open, onClose, onManageOrders, onHelp, closeLabel, label, }: ShopMenuSheetProps): JSX.Element | null;
+export declare function ShopMenuSheet({ open, onClose, onManageOrders, onHelp, closeLabel, label, placement, }: ShopMenuSheetProps): JSX.Element | null;
 
 export declare interface ShopMenuSheetProps {
     open: boolean;
@@ -6160,6 +6358,16 @@ export declare interface ShopMenuSheetProps {
     closeLabel?: string;
     /** Accessible name for the dialog itself; it has no visible title in the design. */
     label?: string;
+    placement?: 'sheet' | 'dropdown';
+}
+
+export declare function ShopNav({ onManageOrders, onHelp, menuLabel, className }: ShopNavProps): JSX.Element | null;
+
+export declare interface ShopNavProps {
+    onManageOrders?: () => void;
+    onHelp?: () => void;
+    menuLabel?: string;
+    className?: string;
 }
 
 /**
@@ -6167,7 +6375,7 @@ export declare interface ShopMenuSheetProps {
  * implementation detail — see the versioning policy in the component SDK specification.
  */
 /** A storefront-relative identifier. NOT a URL expected to resolve on the host. */
-export declare type ShopRoute = '/' | `/category/${string}` | `/product/${string}` | '/cart' | `/vip/${string}`;
+export declare type ShopRoute = '/' | `/category/${string}` | `/product/${string}` | '/cart' | '/orders' | `/vip/${string}`;
 
 /**
  * Request: the shopping session id and the one-time code, exactly as they arrive on the
@@ -6762,6 +6970,10 @@ export declare interface UseProductResult {
     error: ReturnType<typeof codeOf> | undefined;
 }
 
+export declare function useScreenNav(): ScreenNav | undefined;
+
+export declare function useSetScreenNav(crumbs: ScreenCrumb[] | undefined, tone: ScreenNavTone): void;
+
 /** The typed, schema-validating commerce client. Requires a provider. */
 export declare function useShopApi(): DaznClient;