@nok-integration/storefront-react 0.23.0 → 0.25.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';
 }
 
 /**
@@ -419,13 +420,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 +444,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 +1312,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 +1697,7 @@ declare const CategoryPage: z.ZodObject<{
     hero: {
         title: string;
         image?: string | undefined;
+        desktop_image?: string | undefined;
         subtitle?: string | undefined;
     };
     blocks: ({
@@ -1776,6 +1798,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 +1916,7 @@ declare const CategoryPage: z.ZodObject<{
     hero: {
         title: string;
         image?: string | undefined;
+        desktop_image?: string | undefined;
         subtitle?: string | undefined;
     };
     blocks: ({
@@ -1993,6 +2017,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 +2396,7 @@ declare function createClient(options: ClientOptions): {
                 title: string;
                 image?: string | undefined;
                 subtitle?: string | undefined;
+                desktop_image?: string | undefined;
             };
             blocks: ({
                 title: string;
@@ -2470,6 +2496,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 +2620,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;
@@ -2949,7 +2977,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;
@@ -3014,6 +3042,7 @@ declare function createClient(options: ClientOptions): {
                 returned_qty?: number | undefined;
             }[];
             headline: string;
+            order_ref: string;
             totals: {
                 shipping: {
                     amount: number;
@@ -3036,7 +3065,6 @@ declare function createClient(options: ClientOptions): {
                     currency: string;
                 } | undefined;
             };
-            order_ref: string;
             placed_at: string;
             ship_to: {
                 country: string;
@@ -3111,6 +3139,7 @@ declare function createClient(options: ClientOptions): {
                 returned_qty?: number | undefined;
             }[];
             headline: string;
+            order_ref: string;
             totals: {
                 shipping: {
                     amount: number;
@@ -3133,7 +3162,6 @@ declare function createClient(options: ClientOptions): {
                     currency: string;
                 } | undefined;
             };
-            order_ref: string;
             placed_at: string;
             ship_to: {
                 country: string;
@@ -3266,13 +3294,13 @@ declare function createClient(options: ClientOptions): {
         }>;
     };
     vip: {
-        resolve: (token: string, query?: CartMarketQuery) => Promise<{
+        resolve: (locator: string | VipInviteResolveRequest, query?: CartMarketQuery) => Promise<{
             items: {
                 product_sku: string;
                 quantity: number;
             }[];
-            state: "active";
             invite_ref: string;
+            state: "active";
             recipient_name: string;
             personal_message: string | null;
             delivery_rule: "both_free" | "standard_free" | "both_paid";
@@ -3290,6 +3318,7 @@ declare function createClient(options: ClientOptions): {
             opens_at: string;
         } | {
             state: "claimed";
+            order_ref?: string | undefined;
         } | {
             state: "expired";
         } | {
@@ -3760,7 +3789,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[];
@@ -3770,6 +3799,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. */
@@ -4296,6 +4327,7 @@ declare const OrderDetail: z.ZodObject<{
         attributes?: Record<string, string> | undefined;
         returned_qty?: number | undefined;
     }[];
+    order_ref: string & z.BRAND<"OrderRef">;
     totals: {
         shipping: {
             amount: number;
@@ -4318,7 +4350,6 @@ declare const OrderDetail: z.ZodObject<{
             currency: string;
         } | undefined;
     };
-    order_ref: string & z.BRAND<"OrderRef">;
     placed_at: string;
     ship_to: {
         country: string;
@@ -4386,6 +4417,7 @@ declare const OrderDetail: z.ZodObject<{
         attributes?: Record<string, string> | undefined;
         returned_qty?: number | undefined;
     }[];
+    order_ref: string;
     totals: {
         shipping: {
             amount: number;
@@ -4408,7 +4440,6 @@ declare const OrderDetail: z.ZodObject<{
             currency: string;
         } | undefined;
     };
-    order_ref: string;
     placed_at: string;
     ship_to: {
         country: string;
@@ -4465,7 +4496,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.
@@ -4477,7 +4508,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;
@@ -4517,7 +4548,7 @@ 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;
@@ -4568,6 +4599,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;
@@ -5733,14 +5765,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 {
@@ -5759,6 +5783,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.
  *
@@ -6063,28 +6099,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
@@ -6145,7 +6168,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;
@@ -6159,6 +6182,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;
 }
 
 /**
@@ -6166,7 +6199,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';
+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
@@ -6761,6 +6794,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;
 
@@ -6821,10 +6858,10 @@ export declare interface VariantSelectorProps {
     labelAttribute?: string;
 }
 
-declare const VipCartItemRequest: z.ZodObject<{
-    token: z.ZodString;
+declare const VipCartItemRequest: z.ZodUnion<[z.ZodObject<{
     sku: z.ZodString;
     qty: z.ZodNumber;
+    token: z.ZodString;
 }, "strict", z.ZodTypeAny, {
     sku: string;
     token: string;
@@ -6833,7 +6870,19 @@ declare const VipCartItemRequest: z.ZodObject<{
     sku: string;
     token: string;
     qty: number;
-}>;
+}>, z.ZodObject<{
+    sku: z.ZodString;
+    qty: z.ZodNumber;
+    invite_ref: z.ZodBranded<z.ZodString, "VipInviteRef">;
+}, "strict", z.ZodTypeAny, {
+    sku: string;
+    invite_ref: string & z.BRAND<"VipInviteRef">;
+    qty: number;
+}, {
+    sku: string;
+    invite_ref: string;
+    qty: number;
+}>]>;
 
 declare type VipCartItemRequest = z.infer<typeof VipCartItemRequest>;
 
@@ -6869,6 +6918,22 @@ export declare interface VipHeroProps {
     onContinue: () => void;
 }
 
+declare const VipInviteResolveRequest: z.ZodUnion<[z.ZodObject<{
+    token: z.ZodString;
+}, "strict", z.ZodTypeAny, {
+    token: string;
+}, {
+    token: string;
+}>, z.ZodObject<{
+    invite_ref: z.ZodBranded<z.ZodString, "VipInviteRef">;
+}, "strict", z.ZodTypeAny, {
+    invite_ref: string & z.BRAND<"VipInviteRef">;
+}, {
+    invite_ref: string;
+}>]>;
+
+declare type VipInviteResolveRequest = z.infer<typeof VipInviteResolveRequest>;
+
 export declare type VipInviteUnavailableState = Exclude<VipInviteView['state'], 'active'>;
 
 declare const VipInviteView: z.ZodDiscriminatedUnion<"state", [z.ZodObject<{
@@ -6911,8 +6976,8 @@ declare const VipInviteView: z.ZodDiscriminatedUnion<"state", [z.ZodObject<{
         desktop_video?: string | null | undefined;
     }>>>;
 }, "strip", z.ZodTypeAny, {
-    state: "active";
     invite_ref: string & z.BRAND<"VipInviteRef">;
+    state: "active";
     recipient_name: string;
     personal_message: string | null;
     delivery_rule: "both_free" | "standard_free" | "both_paid";
@@ -6930,8 +6995,8 @@ declare const VipInviteView: z.ZodDiscriminatedUnion<"state", [z.ZodObject<{
         desktop_video?: string | null | undefined;
     } | null | undefined;
 }, {
-    state: "active";
     invite_ref: string;
+    state: "active";
     recipient_name: string;
     personal_message: string | null;
     delivery_rule: "both_free" | "standard_free" | "both_paid";
@@ -6959,10 +7024,13 @@ declare const VipInviteView: z.ZodDiscriminatedUnion<"state", [z.ZodObject<{
     opens_at: string;
 }>, z.ZodObject<{
     state: z.ZodLiteral<"claimed">;
+    order_ref: z.ZodOptional<z.ZodBranded<z.ZodString, "OrderRef">>;
 }, "strip", z.ZodTypeAny, {
     state: "claimed";
+    order_ref?: (string & z.BRAND<"OrderRef">) | undefined;
 }, {
     state: "claimed";
+    order_ref?: string | undefined;
 }>, z.ZodObject<{
     state: z.ZodLiteral<"expired">;
 }, "strip", z.ZodTypeAny, {
@@ -6982,7 +7050,10 @@ declare type VipInviteView = z.infer<typeof VipInviteView>;
 export declare function VipLandingView({ token, onUnavailable }: VipLandingViewProps): JSX.Element;
 
 export declare interface VipLandingViewProps {
-    /** The token from the invite link: the last path segment of the URL the recipient opened. */
+    /**
+     * The last path segment of the URL the recipient opened: the token from the invite link,
+     * or the invite reference that Reorder on a cancelled VIP order navigates to.
+     */
     token: string;
     /** Replaces the built-in screen for an invite that cannot be claimed. */
     onUnavailable?: (state: VipInviteUnavailableState) => ReactNode;