@doswiftly/storefront-sdk 16.1.0 → 18.0.0

package/dist/core/middleware/session-retry.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Session-retry middleware — reactive 401 handling (must be OUTERMOST).
+ *
+ * When a request fails with HTTP 401 (the access token lapsed between the
+ * proactive refresh and this call):
+ *
+ *   - **Read query** — refresh the session once and replay the request (R2.1).
+ *     Because this middleware is the outermost one, the retry re-runs the auth
+ *     middleware, which re-reads the freshly-stored token. Concurrent 401s share
+ *     a single renewal because the injected `refresh` dedupes in-flight calls
+ *     (R2.2). If the refresh also fails, the session is gone — signal and bail
+ *     (R2.4).
+ *
+ *   - **Mutation** — never auto-retry (mutations are sacred; client-side
+ *     idempotency is not guaranteed). Bail and signal the session loss (R2.3).
+ *
+ * Auth operations (login / signup / refresh / logout) are exempt: they own
+ * their own error handling, and retrying the refresh op itself would recurse.
+ *
+ * 0-deps core: takes the renewal + notification as injected callbacks, so it
+ * stays framework-agnostic (the provider wires the React store + emitter).
+ *
+ * NOTE — this fires only on a genuine HTTP 401. The storefront GraphQL data
+ * transport returns HTTP 200 with GraphQL errors / `userErrors` for an expired
+ * customer token (not a 401), so on that path the proactive scheduler
+ * (`useSessionRefresh`) is the protection and this middleware stays inert. It
+ * activates wherever a request really does return 401 — e.g. the same-origin
+ * BFF refresh route — keeping reactive recovery forward-compatible with no
+ * backend change. Cart-level session loss is handled separately by cart-recovery
+ * (`CART_UNAUTHENTICATED`).
+ */
+import type { Middleware } from '../client/types';
+import type { SessionExpiredEvent } from '../auth/session-events';
+export interface SessionRetryOptions {
+    /**
+     * Renew the session (refresh token → cookie sync → store update). Resolves
+     * `true` on success. MUST dedupe concurrent calls so simultaneous 401s share
+     * a single renewal (R2.2).
+     */
+    refresh: () => Promise<boolean>;
+    /** Notify that the session is gone (a mutation 401, or a query whose refresh-retry failed). */
+    onSessionExpired: (event: SessionExpiredEvent) => void;
+    /** Operation names exempt from 401 handling (default: the auth operations). */
+    skipOperations?: string[];
+}
+export declare function sessionRetryMiddleware(options: SessionRetryOptions): Middleware;
+//# sourceMappingURL=session-retry.d.ts.map

package/dist/core/middleware/session-retry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"session-retry.d.ts","sourceRoot":"","sources":["../../../src/core/middleware/session-retry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAQlE,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,OAAO,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;IAChC,+FAA+F;IAC/F,gBAAgB,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACvD,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAMD,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,mBAAmB,GAAG,UAAU,CAgC/E"}

package/dist/core/middleware/session-retry.js

@@ -0,0 +1,71 @@
+/**
+ * Session-retry middleware — reactive 401 handling (must be OUTERMOST).
+ *
+ * When a request fails with HTTP 401 (the access token lapsed between the
+ * proactive refresh and this call):
+ *
+ *   - **Read query** — refresh the session once and replay the request (R2.1).
+ *     Because this middleware is the outermost one, the retry re-runs the auth
+ *     middleware, which re-reads the freshly-stored token. Concurrent 401s share
+ *     a single renewal because the injected `refresh` dedupes in-flight calls
+ *     (R2.2). If the refresh also fails, the session is gone — signal and bail
+ *     (R2.4).
+ *
+ *   - **Mutation** — never auto-retry (mutations are sacred; client-side
+ *     idempotency is not guaranteed). Bail and signal the session loss (R2.3).
+ *
+ * Auth operations (login / signup / refresh / logout) are exempt: they own
+ * their own error handling, and retrying the refresh op itself would recurse.
+ *
+ * 0-deps core: takes the renewal + notification as injected callbacks, so it
+ * stays framework-agnostic (the provider wires the React store + emitter).
+ *
+ * NOTE — this fires only on a genuine HTTP 401. The storefront GraphQL data
+ * transport returns HTTP 200 with GraphQL errors / `userErrors` for an expired
+ * customer token (not a 401), so on that path the proactive scheduler
+ * (`useSessionRefresh`) is the protection and this middleware stays inert. It
+ * activates wherever a request really does return 401 — e.g. the same-origin
+ * BFF refresh route — keeping reactive recovery forward-compatible with no
+ * backend change. Cart-level session loss is handled separately by cart-recovery
+ * (`CART_UNAUTHENTICATED`).
+ */
+import { StorefrontError } from '../errors';
+/**
+ * Auth operations that must NOT trigger the 401 retry/signal dance — they
+ * surface their own errors, and the refresh op would otherwise recurse.
+ */
+const DEFAULT_SKIP_OPERATIONS = ['CustomerLogin', 'CustomerSignup', 'CustomerRefreshToken', 'CustomerLogout'];
+function isUnauthorized(err) {
+    return err instanceof StorefrontError && err.status === 401;
+}
+export function sessionRetryMiddleware(options) {
+    const { refresh, onSessionExpired } = options;
+    const skip = new Set(options.skipOperations ?? DEFAULT_SKIP_OPERATIONS);
+    return async (request, next) => {
+        if (request.operationName && skip.has(request.operationName)) {
+            return next(request);
+        }
+        try {
+            return await next(request);
+        }
+        catch (err) {
+            if (!isUnauthorized(err))
+                throw err;
+            if (request.isMutation) {
+                // R2.3 — mutations are sacred: bail, never auto-retry.
+                onSessionExpired({ reason: 'mutation-unauthorized', cause: err });
+                throw err;
+            }
+            // R2.1 / R2.2 — read query: refresh once (deduped) and replay.
+            const renewed = await refresh();
+            if (!renewed) {
+                // R2.4 — the refresh also failed; the session is gone.
+                onSessionExpired({ reason: 'reactive-refresh-failed', cause: err });
+                throw err;
+            }
+            // Retry once — this middleware is outermost, so the replay re-runs the
+            // auth middleware, which attaches the freshly-stored token.
+            return next(request);
+        }
+    };
+}

package/dist/core/operations/auth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auth.d.ts","sourceRoot":"","sources":["../../../src/core/operations/auth.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAoHH,eAAO,MAAM,cAAc,QASzB,CAAC;AAEH,eAAO,MAAM,eAAe,QAS1B,CAAC;AAEH,eAAO,MAAM,sBAAsB,QASjC,CAAC;AAEH,eAAO,MAAM,eAAe,QAW1B,CAAC;AAMH,eAAO,MAAM,cAAc,QAOzB,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,QAYnC,CAAC"}
+{"version":3,"file":"auth.d.ts","sourceRoot":"","sources":["../../../src/core/operations/auth.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAqHH,eAAO,MAAM,cAAc,QASzB,CAAC;AAEH,eAAO,MAAM,eAAe,QAS1B,CAAC;AAEH,eAAO,MAAM,sBAAsB,QASjC,CAAC;AAEH,eAAO,MAAM,eAAe,QAW1B,CAAC;AAMH,eAAO,MAAM,cAAc,QAOzB,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,QAYnC,CAAC"}

package/dist/core/operations/auth.js

@@ -109,6 +109,7 @@ const CUSTOMER_FRAGMENT = `
     }
     createdAt
     updatedAt
+    sessionExpiresAt
   }
 `;
 // ---------------------------------------------------------------------------

package/dist/core/operations/cart.d.ts

@@ -73,6 +73,13 @@ export declare const CART_COMPLETE: string;
  * `payment.flow` (redirect / embedded / instant) to launch the payment.
  */
 export declare const PAYMENT_CREATE: string;
+/**
+ * cartClearPaymentSelection Mutation (Adv-1 Phase A1-2) — explicit deselect
+ * dla storefront accordion UI ("wróć do wyboru metody"). Atomic NULL na
+ * wszystkich 4 payment selection fields, idempotent. Cart MUSI być ACTIVE
+ * (CONVERTED reject z `ALREADY_COMPLETED`).
+ */
+export declare const CART_CLEAR_PAYMENT_SELECTION: string;
 /**
  * cartValidateDiscountCode Query — read-only preview discount applicability
  * (Decision D3). No cart side effects; storefront UI używa do inline feedback

package/dist/core/operations/cart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cart.d.ts","sourceRoot":"","sources":["../../../src/core/operations/cart.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AA0YH,eAAO,MAAM,UAAU,QAOrB,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,qCAAqC,QAehD,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,+BAA+B,QAO1C,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,QAO/B,CAAC;AAMH,eAAO,MAAM,WAAW,QAWtB,CAAC;AAEH,eAAO,MAAM,cAAc,QAWzB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAW5B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAW5B,CAAC;AAEH,eAAO,MAAM,0BAA0B,QAWrC,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAW3B,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,QAWjC,CAAC;AAEH,eAAO,MAAM,0BAA0B,QAWrC,CAAC;AAMH,eAAO,MAAM,yBAAyB,QAWpC,CAAC;AAEH,eAAO,MAAM,wBAAwB,QAWnC,CAAC;AAEH,eAAO,MAAM,2BAA2B,QAWtC,CAAC;AAEH,eAAO,MAAM,0BAA0B,QAWrC,CAAC;AAEH,eAAO,MAAM,oBAAoB,QAW/B,CAAC;AAEH,eAAO,MAAM,qBAAqB,QAWhC,CAAC;AAEH,eAAO,MAAM,+BAA+B,QAW1C,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,QAWxB,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,cAAc,QASzB,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,2BAA2B,QAoBtC,CAAC"}
+{"version":3,"file":"cart.d.ts","sourceRoot":"","sources":["../../../src/core/operations/cart.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AA2aH,eAAO,MAAM,UAAU,QAOrB,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,qCAAqC,QAehD,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,+BAA+B,QAO1C,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,QAO/B,CAAC;AAMH,eAAO,MAAM,WAAW,QAWtB,CAAC;AAEH,eAAO,MAAM,cAAc,QAWzB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAW5B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAW5B,CAAC;AAEH,eAAO,MAAM,0BAA0B,QAWrC,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAW3B,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,QAWjC,CAAC;AAEH,eAAO,MAAM,0BAA0B,QAWrC,CAAC;AAMH,eAAO,MAAM,yBAAyB,QAWpC,CAAC;AAEH,eAAO,MAAM,wBAAwB,QAWnC,CAAC;AAEH,eAAO,MAAM,2BAA2B,QAWtC,CAAC;AAEH,eAAO,MAAM,0BAA0B,QAWrC,CAAC;AAEH,eAAO,MAAM,oBAAoB,QAW/B,CAAC;AAEH,eAAO,MAAM,qBAAqB,QAWhC,CAAC;AAEH,eAAO,MAAM,+BAA+B,QAW1C,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,QAWxB,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,cAAc,QAWzB,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,4BAA4B,QAWvC,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,2BAA2B,QAoBtC,CAAC"}

package/dist/core/operations/cart.js

@@ -198,12 +198,13 @@ const CART_SELECTED_PAYMENT_METHOD_FRAGMENT = `
     name
     provider
     type
-    icon
+    icon { ...ImageThumbnail }
     description
     isDefault
     supportedCurrencies
     position
   }
+  ${IMAGE_THUMBNAIL_FRAGMENT}
 `;
 const CART_FRAGMENT = `
   fragment Cart on Cart {
@@ -227,6 +228,7 @@ const CART_FRAGMENT = `
     billingAddress { ...MailingAddress }
     selectedShippingMethod { ...CartShippingMethod }
     selectedPaymentMethod { ...CartSelectedPaymentMethod }
+    selectedPaymentInstrument
     appliedGiftCards { ...CartAppliedGiftCard }
     requiresShipping
     createdAt
@@ -296,9 +298,10 @@ const SHIPPING_CARRIER_FRAGMENT = `
   fragment ShippingCarrier on ShippingCarrier {
     id
     name
-    logoUrl
+    logo { ...ImageThumbnail }
     serviceCode
   }
+  ${IMAGE_THUMBNAIL_FRAGMENT}
 `;
 const DELIVERY_ESTIMATE_FRAGMENT = `
   fragment DeliveryEstimate on DeliveryEstimate {
@@ -336,18 +339,39 @@ const AVAILABLE_SHIPPING_METHOD_FRAGMENT = `
   ${DELIVERY_ESTIMATE_FRAGMENT}
   ${FREE_SHIPPING_PROGRESS_FRAGMENT}
 `;
+const PAYMENT_INSTRUMENT_FRAGMENT = `
+  fragment PaymentInstrument on PaymentInstrument {
+    provider
+    code
+    type
+    displayName
+    displayHint
+    brandImage { ...ImageThumbnail }
+    enabled
+  }
+  ${IMAGE_THUMBNAIL_FRAGMENT}
+`;
 const PAYMENT_METHOD_FRAGMENT = `
   fragment PaymentMethod on PaymentMethod {
     id
     name
     provider
     type
-    icon
+    icon { ...ImageThumbnail }
     description
     isDefault
     supportedCurrencies
     position
+    providersAvailable
+    preferredProvider
+    available
+    unavailableReason
+    instruments {
+      ...PaymentInstrument
+    }
   }
+  ${PAYMENT_INSTRUMENT_FRAGMENT}
+  ${IMAGE_THUMBNAIL_FRAGMENT}
 `;
 const AVAILABLE_PAYMENT_METHODS_FRAGMENT = `
   fragment AvailablePaymentMethods on AvailablePaymentMethods {
@@ -368,6 +392,13 @@ const PAYMENT_SESSION_FRAGMENT = `
     expiresAt
   }
 `;
+const PAYMENT_WARNING_FRAGMENT = `
+  fragment PaymentWarning on PaymentWarning {
+    message
+    code
+    retryHint
+  }
+`;
 // ---------------------------------------------------------------------------
 // Queries
 // ---------------------------------------------------------------------------
@@ -655,10 +686,30 @@ export const PAYMENT_CREATE = composeOperation(`
     paymentCreate(input: $input) {
       payment { ...PaymentSession }
       userErrors { ...UserError }
+      warnings { ...PaymentWarning }
     }
   }
   ${PAYMENT_SESSION_FRAGMENT}
   ${USER_ERROR_FRAGMENT}
+  ${PAYMENT_WARNING_FRAGMENT}
+`);
+/**
+ * cartClearPaymentSelection Mutation (Adv-1 Phase A1-2) — explicit deselect
+ * dla storefront accordion UI ("wróć do wyboru metody"). Atomic NULL na
+ * wszystkich 4 payment selection fields, idempotent. Cart MUSI być ACTIVE
+ * (CONVERTED reject z `ALREADY_COMPLETED`).
+ */
+export const CART_CLEAR_PAYMENT_SELECTION = composeOperation(`
+  mutation CartClearPaymentSelection($input: CartClearPaymentSelectionInput!) {
+    cartClearPaymentSelection(input: $input) {
+      cart { ...Cart }
+      userErrors { ...UserError }
+      warnings { ...CartWarning }
+    }
+  }
+  ${CART_FRAGMENT}
+  ${USER_ERROR_FRAGMENT}
+  ${CART_WARNING_FRAGMENT}
 `);
 /**
  * cartValidateDiscountCode Query — read-only preview discount applicability

package/dist/react/components/PaymentInstrumentSection.d.ts

@@ -0,0 +1,56 @@
+/**
+ * `<PaymentInstrumentSection>` — radio-group container dla payment instruments
+ * w obrębie jednej method (np. lista bankow + BLIK code entry w BLIK method,
+ * lista wallets + brand cards w CARD method). Renders jeden `<PaymentInstrumentTile>`
+ * per item z keyboard nav (Arrow Up/Down, Home/End) + ARIA `role="radiogroup"`.
+ *
+ * Headless — section + tiles bez własnego stylingu. Pass `sectionClassName`
+ * dla layoutu (grid/flex), `tileClassName` dla per-tile styling, optional
+ * `iconClassName`/`labelClassName` dla wewnętrznej struktury tile.
+ *
+ * Auto-group **nie jest** implementowane w tym sub-sprincie — backend już
+ * zwraca instruments sorted (BLIK + wallets pierwsze → banks alpha → others)
+ * z `availablePaymentMethods.methods[].instruments[]`. Komponent renderuje
+ * w order'ze otrzymanym, bez własnej resort logic.
+ *
+ * @example
+ * ```tsx
+ * const [code, setCode] = useState<string | undefined>(undefined);
+ * <PaymentInstrumentSection
+ *   method={method}
+ *   selectedInstrumentCode={code}
+ *   onSelectInstrument={setCode}
+ *   sectionClassName="grid grid-cols-2 gap-2"
+ *   tileClassName="rounded border p-3 data-[selected=true]:border-blue-500"
+ * />
+ * ```
+ *
+ * Added by payment-instrument-preselection-advanced sub-sprint Adv-2 Req 9.
+ */
+import type { PaymentMethod } from '../../core/generated/operation-types';
+/**
+ * Minimalna projekcja `PaymentMethod` używana przez section — wymaga tylko
+ * `instruments[]`. Caller może pass pełną `PaymentMethod` z `availablePaymentMethods`
+ * query — extra pola (id, name, providersAvailable, etc.) są ignorowane.
+ */
+export type PaymentInstrumentSectionMethod = Pick<PaymentMethod, 'instruments'>;
+export interface PaymentInstrumentSectionProps {
+    /** Payment method z `instruments[]` listą (null/empty → komponent zwraca null). */
+    method: PaymentInstrumentSectionMethod;
+    /** Currently selected instrument code — controlled by parent. Undefined gdy buyer nie wybrał. */
+    selectedInstrumentCode?: string;
+    /** Callback gdy buyer selektuje instrument. Parent persistuje state + odpala `cartSelectPaymentMethod`. */
+    onSelectInstrument: (instrumentCode: string) => void;
+    /** Optional class dla outer section element — typically grid/flex layout. */
+    sectionClassName?: string;
+    /** Optional class dla each `<PaymentInstrumentTile>` — passed jako `className`. */
+    tileClassName?: string;
+    /** Optional class dla brand image inside tiles — passed jako `iconClassName`. */
+    iconClassName?: string;
+    /** Optional class dla label span inside tiles — passed jako `labelClassName`. */
+    labelClassName?: string;
+    /** Optional ARIA label dla radiogroup. Defaults to nothing (caller's responsibility — section typically nested w wider label structure). */
+    ariaLabel?: string;
+}
+export declare function PaymentInstrumentSection({ method, selectedInstrumentCode, onSelectInstrument, sectionClassName, tileClassName, iconClassName, labelClassName, ariaLabel, }: PaymentInstrumentSectionProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=PaymentInstrumentSection.d.ts.map

package/dist/react/components/PaymentInstrumentSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentInstrumentSection.d.ts","sourceRoot":"","sources":["../../../src/react/components/PaymentInstrumentSection.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAKH,OAAO,KAAK,EAAE,aAAa,EAAqB,MAAM,sCAAsC,CAAC;AAG7F;;;;GAIG;AACH,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;AAEhF,MAAM,WAAW,6BAA6B;IAC5C,mFAAmF;IACnF,MAAM,EAAE,8BAA8B,CAAC;IACvC,iGAAiG;IACjG,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,2GAA2G;IAC3G,kBAAkB,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,6EAA6E;IAC7E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mFAAmF;IACnF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4IAA4I;IAC5I,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,wBAAwB,CAAC,EACvC,MAAM,EACN,sBAAsB,EACtB,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,cAAc,EACd,SAAS,GACV,EAAE,6BAA6B,kDAmF/B"}

package/dist/react/components/PaymentInstrumentSection.js

@@ -0,0 +1,89 @@
+/**
+ * `<PaymentInstrumentSection>` — radio-group container dla payment instruments
+ * w obrębie jednej method (np. lista bankow + BLIK code entry w BLIK method,
+ * lista wallets + brand cards w CARD method). Renders jeden `<PaymentInstrumentTile>`
+ * per item z keyboard nav (Arrow Up/Down, Home/End) + ARIA `role="radiogroup"`.
+ *
+ * Headless — section + tiles bez własnego stylingu. Pass `sectionClassName`
+ * dla layoutu (grid/flex), `tileClassName` dla per-tile styling, optional
+ * `iconClassName`/`labelClassName` dla wewnętrznej struktury tile.
+ *
+ * Auto-group **nie jest** implementowane w tym sub-sprincie — backend już
+ * zwraca instruments sorted (BLIK + wallets pierwsze → banks alpha → others)
+ * z `availablePaymentMethods.methods[].instruments[]`. Komponent renderuje
+ * w order'ze otrzymanym, bez własnej resort logic.
+ *
+ * @example
+ * ```tsx
+ * const [code, setCode] = useState<string | undefined>(undefined);
+ * <PaymentInstrumentSection
+ *   method={method}
+ *   selectedInstrumentCode={code}
+ *   onSelectInstrument={setCode}
+ *   sectionClassName="grid grid-cols-2 gap-2"
+ *   tileClassName="rounded border p-3 data-[selected=true]:border-blue-500"
+ * />
+ * ```
+ *
+ * Added by payment-instrument-preselection-advanced sub-sprint Adv-2 Req 9.
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import { PaymentInstrumentTile } from './PaymentInstrumentTile';
+export function PaymentInstrumentSection({ method, selectedInstrumentCode, onSelectInstrument, sectionClassName, tileClassName, iconClassName, labelClassName, ariaLabel, }) {
+    const instruments = method.instruments ?? [];
+    const sectionRef = useRef(null);
+    /**
+     * Keyboard nav per WAI-ARIA radiogroup pattern:
+     *   ArrowDown/ArrowRight → focus next tile, wrap to first.
+     *   ArrowUp/ArrowLeft   → focus previous tile, wrap to last.
+     *   Home                → focus first tile.
+     *   End                 → focus last tile.
+     *   Enter/Space         → native button activation (no custom handler).
+     */
+    const handleKeyDown = useCallback((event) => {
+        if (!sectionRef.current)
+            return;
+        const tiles = Array.from(sectionRef.current.querySelectorAll('button[role="radio"]:not([disabled])'));
+        if (tiles.length === 0)
+            return;
+        const currentIndex = tiles.findIndex((tile) => tile === document.activeElement);
+        let nextIndex = -1;
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowRight':
+                nextIndex = currentIndex === -1 || currentIndex === tiles.length - 1 ? 0 : currentIndex + 1;
+                break;
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                nextIndex = currentIndex <= 0 ? tiles.length - 1 : currentIndex - 1;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = tiles.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        tiles[nextIndex]?.focus();
+    }, []);
+    if (instruments.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { ref: sectionRef, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: handleKeyDown, className: sectionClassName, children: instruments.map((instrument) => {
+            // Cast to tile-projection shape — instruments[] z generated types ma więcej pól
+            // niż tile potrzebuje (provider, type), tile picks subset jawnie.
+            const tileInstrument = {
+                code: instrument.code,
+                displayName: instrument.displayName,
+                displayHint: instrument.displayHint,
+                enabled: instrument.enabled,
+                brandImage: instrument.brandImage ?? undefined,
+            };
+            return (_jsx(PaymentInstrumentTile, { instrument: tileInstrument, selected: instrument.code === selectedInstrumentCode, onSelect: () => onSelectInstrument(instrument.code), className: tileClassName, iconClassName: iconClassName, labelClassName: labelClassName }, instrument.code));
+        }) }));
+}

package/dist/react/components/PaymentInstrumentTile.d.ts

@@ -0,0 +1,56 @@
+/**
+ * `<PaymentInstrumentTile>` — single payment instrument tile (BLIK code,
+ * bank logo, wallet button, card brand). Headless — buyer-facing button
+ * z accessibility wbudowanym (`role="radio"`, `aria-checked`, `aria-label`,
+ * `data-instrument-code`, `data-display-hint`). Pass className per part
+ * (button, icon, label) żeby zintegrować z Tailwind / CSS Modules /
+ * styled-components — komponent nie ma własnego stylingu.
+ *
+ * `displayHint` dispatch — backend hint jak storefront powinien renderować
+ * instrument. Komponent emituje hint jako `data-display-hint` attribute na
+ * `<button>` żeby caller mógł stylizować przez CSS attribute selektory:
+ *
+ *   - `BRANDED_TILE` — bank logo / wallet icon dominuje, label jako caption.
+ *   - `PROMINENT_BUTTON` — duże CTA (BLIK code entry), brand image pominięty.
+ *   - `RADIO_OPTION` — radio-list look, image (jeśli is) + label inline.
+ *   - `DROPDOWN_OPTION` — text-only dla dropdown integration (caller wrap).
+ *
+ * Headless = no opinion. CSS styling decyduje, komponent tylko hint'uje.
+ *
+ * @example
+ * ```tsx
+ * <PaymentInstrumentTile
+ *   instrument={{ code: 'blik', displayName: 'BLIK', displayHint: 'PROMINENT_BUTTON', enabled: true }}
+ *   selected={selectedCode === 'blik'}
+ *   onSelect={() => setSelectedCode('blik')}
+ *   className="rounded-lg border p-3 hover:bg-gray-50 data-[selected=true]:border-blue-500"
+ *   labelClassName="font-semibold"
+ * />
+ * ```
+ *
+ * Added by payment-instrument-preselection-advanced sub-sprint Adv-2 Req 9.
+ */
+import type { PaymentInstrument } from '../../core/generated/operation-types';
+/**
+ * Minimalna projekcja `PaymentInstrument` używana przez tile. Caller może
+ * pass pełny instrument z `availablePaymentMethods` query — extra pola
+ * (provider, type) są ignorowane przez komponent (UI nie branchuje na
+ * provider — gateway-agnostic, code + displayHint wystarczą).
+ */
+export type PaymentInstrumentTileInstrument = Pick<PaymentInstrument, 'code' | 'displayName' | 'displayHint' | 'enabled'> & Partial<Pick<PaymentInstrument, 'brandImage'>>;
+export interface PaymentInstrumentTileProps {
+    /** Instrument projection — gateway code, label, display hint, enabled state. */
+    instrument: PaymentInstrumentTileInstrument;
+    /** True gdy ten tile jest currently selected w parent section. Controls `aria-checked` + `data-selected`. */
+    selected: boolean;
+    /** Click handler — caller updates selected state external (controlled component). */
+    onSelect: () => void;
+    /** Optional class for the outer button — header styling, layout, border. */
+    className?: string;
+    /** Optional class for the brand image (`<img>` element). Only applied when instrument has `brandImage`. */
+    iconClassName?: string;
+    /** Optional class for the label span. */
+    labelClassName?: string;
+}
+export declare function PaymentInstrumentTile({ instrument, selected, onSelect, className, iconClassName, labelClassName, }: PaymentInstrumentTileProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PaymentInstrumentTile.d.ts.map

package/dist/react/components/PaymentInstrumentTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentInstrumentTile.d.ts","sourceRoot":"","sources":["../../../src/react/components/PaymentInstrumentTile.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAIH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAE9E;;;;;GAKG;AACH,MAAM,MAAM,+BAA+B,GAAG,IAAI,CAChD,iBAAiB,EACjB,MAAM,GAAG,aAAa,GAAG,aAAa,GAAG,SAAS,CACnD,GACC,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC,CAAC;AAEjD,MAAM,WAAW,0BAA0B;IACzC,gFAAgF;IAChF,UAAU,EAAE,+BAA+B,CAAC;IAC5C,6GAA6G;IAC7G,QAAQ,EAAE,OAAO,CAAC;IAClB,qFAAqF;IACrF,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2GAA2G;IAC3G,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,aAAa,EACb,cAAc,GACf,EAAE,0BAA0B,2CAuB5B"}

package/dist/react/components/PaymentInstrumentTile.js

@@ -0,0 +1,41 @@
+/**
+ * `<PaymentInstrumentTile>` — single payment instrument tile (BLIK code,
+ * bank logo, wallet button, card brand). Headless — buyer-facing button
+ * z accessibility wbudowanym (`role="radio"`, `aria-checked`, `aria-label`,
+ * `data-instrument-code`, `data-display-hint`). Pass className per part
+ * (button, icon, label) żeby zintegrować z Tailwind / CSS Modules /
+ * styled-components — komponent nie ma własnego stylingu.
+ *
+ * `displayHint` dispatch — backend hint jak storefront powinien renderować
+ * instrument. Komponent emituje hint jako `data-display-hint` attribute na
+ * `<button>` żeby caller mógł stylizować przez CSS attribute selektory:
+ *
+ *   - `BRANDED_TILE` — bank logo / wallet icon dominuje, label jako caption.
+ *   - `PROMINENT_BUTTON` — duże CTA (BLIK code entry), brand image pominięty.
+ *   - `RADIO_OPTION` — radio-list look, image (jeśli is) + label inline.
+ *   - `DROPDOWN_OPTION` — text-only dla dropdown integration (caller wrap).
+ *
+ * Headless = no opinion. CSS styling decyduje, komponent tylko hint'uje.
+ *
+ * @example
+ * ```tsx
+ * <PaymentInstrumentTile
+ *   instrument={{ code: 'blik', displayName: 'BLIK', displayHint: 'PROMINENT_BUTTON', enabled: true }}
+ *   selected={selectedCode === 'blik'}
+ *   onSelect={() => setSelectedCode('blik')}
+ *   className="rounded-lg border p-3 hover:bg-gray-50 data-[selected=true]:border-blue-500"
+ *   labelClassName="font-semibold"
+ * />
+ * ```
+ *
+ * Added by payment-instrument-preselection-advanced sub-sprint Adv-2 Req 9.
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function PaymentInstrumentTile({ instrument, selected, onSelect, className, iconClassName, labelClassName, }) {
+    const { code, displayName, displayHint, brandImage, enabled } = instrument;
+    const brandImageUrl = brandImage?.url;
+    // PROMINENT_BUTTON hides brand image — instrument jest text-only CTA (BLIK code entry).
+    const showImage = displayHint !== 'PROMINENT_BUTTON' && brandImageUrl;
+    return (_jsxs("button", { type: "button", role: "radio", "aria-checked": selected, "aria-label": displayName, "data-instrument-code": code, "data-display-hint": displayHint, "data-selected": selected, disabled: !enabled, onClick: onSelect, className: className, children: [showImage && _jsx("img", { src: brandImageUrl, alt: brandImage?.altText ?? '', className: iconClassName }), _jsx("span", { className: labelClassName, children: displayName })] }));
+}

package/dist/react/components/index.d.ts

@@ -12,4 +12,6 @@ export { CartCount, type CartCountProps } from './CartCount';
 export { AddToCartButton, type AddToCartButtonProps } from './AddToCartButton';
 export { PriceDisplay, type PriceDisplayProps } from './PriceDisplay';
 export { CartTotals, type CartTotalsProps, type CartTotalsLabels } from './CartTotals';
+export { PaymentInstrumentTile, type PaymentInstrumentTileProps, type PaymentInstrumentTileInstrument, } from './PaymentInstrumentTile';
+export { PaymentInstrumentSection, type PaymentInstrumentSectionProps, type PaymentInstrumentSectionMethod, } from './PaymentInstrumentSection';
 //# sourceMappingURL=index.d.ts.map

package/dist/react/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/components/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,gBAAgB,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/components/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACvF,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,KAAK,+BAA+B,GACrC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,wBAAwB,EACxB,KAAK,6BAA6B,EAClC,KAAK,8BAA8B,GACpC,MAAM,4BAA4B,CAAC"}

package/dist/react/components/index.js

@@ -12,3 +12,5 @@ export { CartCount } from './CartCount';
 export { AddToCartButton } from './AddToCartButton';
 export { PriceDisplay } from './PriceDisplay';
 export { CartTotals } from './CartTotals';
+export { PaymentInstrumentTile, } from './PaymentInstrumentTile';
+export { PaymentInstrumentSection, } from './PaymentInstrumentSection';

package/dist/react/helpers/browser-data.d.ts

@@ -0,0 +1,89 @@
+/**
+ * `getBrowserDataForPayment()` — collects browser context required by PSD2/3DS2
+ * authentication flows (card-on-file z 3DS challenge, BLIK confirmation,
+ * Apple/Google Pay z risk scoring).
+ *
+ * **Browser-only** — throws gdy `typeof window === 'undefined'` (server-side
+ * rendering). Caller MUSI gate'ować call w useEffect / event handler / browser
+ * code path. NEVER call this w Server Component lub Route Handler.
+ *
+ * Wartości pochodzą z standard Web APIs:
+ *   - `userAgent` — `navigator.userAgent`.
+ *   - `language` — `navigator.language` (BCP 47, fallback `en-US`).
+ *   - `screen{Width,Height}` — `window.screen.{width,height}`.
+ *   - `colorDepth` — `window.screen.colorDepth`.
+ *   - `timezoneOffset` — `new Date().getTimezoneOffset()` (signed integer, minutes,
+ *     reverse signed per ECMA: dodatnie = behind UTC, ujemne = ahead).
+ *   - `javaEnabled` — `navigator.javaEnabled?.()` (deprecated ale wymagane PSD2/EMV
+ *     specification; fallback `false` gdy browser nie expose'uje).
+ *   - `acceptHeader` — NIE dostępne client-side (`navigator` nie expose'uje request
+ *     headers). Caller passes z server context lub omits (gateway-dependent
+ *     requirement). Helper zwraca undefined.
+ *
+ * Shape matches PSD2/3DS2 BrowserData specification (EMVCo) — adapter na backend
+ * `IPaymentProvider.createPayment` może merge wprost do gateway-specific body
+ * (Adyen `browserInfo`, Stripe `payment_method_data.billing_details.browser_info`,
+ * Mollie `cardToken` z 3DS lookup).
+ *
+ * @example
+ * ```tsx
+ * // W event handler (browser-only):
+ * function handleCheckoutSubmit() {
+ *   const browserData = getBrowserDataForPayment();
+ *   await cart.createPayment({ ..., browserData });
+ * }
+ *
+ * // SSR-safe wrap:
+ * if (typeof window !== 'undefined') {
+ *   const browserData = getBrowserDataForPayment();
+ *   ...
+ * }
+ * ```
+ *
+ * Added by payment-instrument-preselection-advanced sub-sprint Adv-2 Req 9.5
+ * (carry-over z Adv-1 plan — moved here as standalone utility, no backend
+ * mutation impact yet — Adv-3 będzie consumer'em w `paymentCreate` input).
+ */
+/**
+ * PSD2/3DS2 browser context shape. All fields optional poza ones backed by
+ * standard API — gateway-specific requirements decyzują które pola są mandatory.
+ */
+export interface PaymentBrowserData {
+    /** Accept HTTP header value — NOT available client-side (caller passes from server context or omits). */
+    acceptHeader?: string;
+    /** Full user-agent string (`navigator.userAgent`). */
+    userAgent: string;
+    /** BCP 47 language tag (`navigator.language`). Fallback `'en-US'` gdy missing. */
+    language: string;
+    /** Screen width in pixels (`window.screen.width`). */
+    screenWidth: number;
+    /** Screen height in pixels (`window.screen.height`). */
+    screenHeight: number;
+    /** Color depth bits-per-pixel (`window.screen.colorDepth`). Typically `24` or `32`. */
+    colorDepth: number;
+    /**
+     * Local timezone offset w minutach (ECMA signed convention — dodatnie = behind UTC,
+     * ujemne = ahead UTC). Np. CET zima = `-60`, PST zima = `480`.
+     */
+    timezoneOffset: number;
+    /**
+     * Java support (`navigator.javaEnabled?.()`). Deprecated API ale wymagane PSD2/EMV
+     * specification; fallback `false` gdy browser nie expose'uje.
+     */
+    javaEnabled: boolean;
+    /**
+     * IANA timezone name (`Intl.DateTimeFormat().resolvedOptions().timeZone`).
+     * Optional — niektóre gateways używają zamiast offsetu (Adyen risk scoring).
+     */
+    timezone?: string;
+}
+/**
+ * Throw'd gdy helper wywołany w SSR context (Server Component, Route Handler,
+ * Node bez JSDOM). Caller MUSI guard'ować przez `typeof window` check albo
+ * wywołać tylko w event handler / `useEffect`.
+ */
+export declare class BrowserDataNotAvailableError extends Error {
+    constructor();
+}
+export declare function getBrowserDataForPayment(): PaymentBrowserData;
+//# sourceMappingURL=browser-data.d.ts.map

package/dist/react/helpers/browser-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-data.d.ts","sourceRoot":"","sources":["../../../src/react/helpers/browser-data.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,yGAAyG;IACzG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sDAAsD;IACtD,SAAS,EAAE,MAAM,CAAC;IAClB,kFAAkF;IAClF,QAAQ,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,YAAY,EAAE,MAAM,CAAC;IACrB,uFAAuF;IACvF,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;GAIG;AACH,qBAAa,4BAA6B,SAAQ,KAAK;;CAKtD;AAED,wBAAgB,wBAAwB,IAAI,kBAAkB,CA6B7D"}