@doswiftly/storefront-sdk 16.0.0 → 17.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +466 -0
- package/dist/core/cart/cart-client.d.ts +10 -1
- package/dist/core/cart/cart-client.d.ts.map +1 -1
- package/dist/core/cart/cart-client.js +17 -1
- package/dist/core/cart/cart-recovery.d.ts +63 -0
- package/dist/core/cart/cart-recovery.d.ts.map +1 -1
- package/dist/core/cart/cart-recovery.js +91 -8
- package/dist/core/cart/types.d.ts +1 -1
- package/dist/core/cart/types.d.ts.map +1 -1
- package/dist/core/generated/operation-types.d.ts +198 -32
- package/dist/core/generated/operation-types.d.ts.map +1 -1
- package/dist/core/operations/cart.d.ts +7 -0
- package/dist/core/operations/cart.d.ts.map +1 -1
- package/dist/core/operations/cart.js +52 -0
- package/dist/react/components/PaymentInstrumentSection.d.ts +56 -0
- package/dist/react/components/PaymentInstrumentSection.d.ts.map +1 -0
- package/dist/react/components/PaymentInstrumentSection.js +89 -0
- package/dist/react/components/PaymentInstrumentTile.d.ts +56 -0
- package/dist/react/components/PaymentInstrumentTile.d.ts.map +1 -0
- package/dist/react/components/PaymentInstrumentTile.js +40 -0
- package/dist/react/components/index.d.ts +2 -0
- package/dist/react/components/index.d.ts.map +1 -1
- package/dist/react/components/index.js +2 -0
- package/dist/react/helpers/browser-data.d.ts +89 -0
- package/dist/react/helpers/browser-data.d.ts.map +1 -0
- package/dist/react/helpers/browser-data.js +84 -0
- package/dist/react/index.d.ts +2 -1
- package/dist/react/index.d.ts.map +1 -1
- package/dist/react/index.js +3 -1
- package/package.json +1 -1
|
@@ -73,6 +73,13 @@ export declare const CART_COMPLETE: string;
|
|
|
73
73
|
* `payment.flow` (redirect / embedded / instant) to launch the payment.
|
|
74
74
|
*/
|
|
75
75
|
export declare const PAYMENT_CREATE: string;
|
|
76
|
+
/**
|
|
77
|
+
* cartClearPaymentSelection Mutation (Adv-1 Phase A1-2) — explicit deselect
|
|
78
|
+
* dla storefront accordion UI ("wróć do wyboru metody"). Atomic NULL na
|
|
79
|
+
* wszystkich 4 payment selection fields, idempotent. Cart MUSI być ACTIVE
|
|
80
|
+
* (CONVERTED reject z `ALREADY_COMPLETED`).
|
|
81
|
+
*/
|
|
82
|
+
export declare const CART_CLEAR_PAYMENT_SELECTION: string;
|
|
76
83
|
/**
|
|
77
84
|
* cartValidateDiscountCode Query — read-only preview discount applicability
|
|
78
85
|
* (Decision D3). No cart side effects; storefront UI używa do inline feedback
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cart.d.ts","sourceRoot":"","sources":["../../../src/core/operations/cart.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;
|
|
1
|
+
{"version":3,"file":"cart.d.ts","sourceRoot":"","sources":["../../../src/core/operations/cart.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAuaH,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"}
|
|
@@ -116,6 +116,11 @@ const CART_LINE_FRAGMENT = `
|
|
|
116
116
|
productHandle
|
|
117
117
|
productType
|
|
118
118
|
requiresShipping
|
|
119
|
+
giftCardRecipient {
|
|
120
|
+
recipientEmail
|
|
121
|
+
recipientName
|
|
122
|
+
message
|
|
123
|
+
}
|
|
119
124
|
}
|
|
120
125
|
${CART_LINE_COST_FRAGMENT}
|
|
121
126
|
${PRODUCT_VARIANT_FRAGMENT}
|
|
@@ -222,6 +227,7 @@ const CART_FRAGMENT = `
|
|
|
222
227
|
billingAddress { ...MailingAddress }
|
|
223
228
|
selectedShippingMethod { ...CartShippingMethod }
|
|
224
229
|
selectedPaymentMethod { ...CartSelectedPaymentMethod }
|
|
230
|
+
selectedPaymentInstrumentCode
|
|
225
231
|
appliedGiftCards { ...CartAppliedGiftCard }
|
|
226
232
|
requiresShipping
|
|
227
233
|
createdAt
|
|
@@ -331,6 +337,17 @@ const AVAILABLE_SHIPPING_METHOD_FRAGMENT = `
|
|
|
331
337
|
${DELIVERY_ESTIMATE_FRAGMENT}
|
|
332
338
|
${FREE_SHIPPING_PROGRESS_FRAGMENT}
|
|
333
339
|
`;
|
|
340
|
+
const PAYMENT_METHOD_INSTRUMENT_FRAGMENT = `
|
|
341
|
+
fragment PaymentMethodInstrument on PaymentMethodInstrument {
|
|
342
|
+
providerCode
|
|
343
|
+
instrumentCode
|
|
344
|
+
type
|
|
345
|
+
displayName
|
|
346
|
+
displayHint
|
|
347
|
+
brandImageUrl
|
|
348
|
+
enabled
|
|
349
|
+
}
|
|
350
|
+
`;
|
|
334
351
|
const PAYMENT_METHOD_FRAGMENT = `
|
|
335
352
|
fragment PaymentMethod on PaymentMethod {
|
|
336
353
|
id
|
|
@@ -342,7 +359,15 @@ const PAYMENT_METHOD_FRAGMENT = `
|
|
|
342
359
|
isDefault
|
|
343
360
|
supportedCurrencies
|
|
344
361
|
position
|
|
362
|
+
providersAvailable
|
|
363
|
+
preferredProvider
|
|
364
|
+
available
|
|
365
|
+
unavailableReason
|
|
366
|
+
instruments {
|
|
367
|
+
...PaymentMethodInstrument
|
|
368
|
+
}
|
|
345
369
|
}
|
|
370
|
+
${PAYMENT_METHOD_INSTRUMENT_FRAGMENT}
|
|
346
371
|
`;
|
|
347
372
|
const AVAILABLE_PAYMENT_METHODS_FRAGMENT = `
|
|
348
373
|
fragment AvailablePaymentMethods on AvailablePaymentMethods {
|
|
@@ -363,6 +388,13 @@ const PAYMENT_SESSION_FRAGMENT = `
|
|
|
363
388
|
expiresAt
|
|
364
389
|
}
|
|
365
390
|
`;
|
|
391
|
+
const PAYMENT_WARNING_FRAGMENT = `
|
|
392
|
+
fragment PaymentWarning on PaymentWarning {
|
|
393
|
+
message
|
|
394
|
+
code
|
|
395
|
+
retryHint
|
|
396
|
+
}
|
|
397
|
+
`;
|
|
366
398
|
// ---------------------------------------------------------------------------
|
|
367
399
|
// Queries
|
|
368
400
|
// ---------------------------------------------------------------------------
|
|
@@ -650,10 +682,30 @@ export const PAYMENT_CREATE = composeOperation(`
|
|
|
650
682
|
paymentCreate(input: $input) {
|
|
651
683
|
payment { ...PaymentSession }
|
|
652
684
|
userErrors { ...UserError }
|
|
685
|
+
warnings { ...PaymentWarning }
|
|
653
686
|
}
|
|
654
687
|
}
|
|
655
688
|
${PAYMENT_SESSION_FRAGMENT}
|
|
656
689
|
${USER_ERROR_FRAGMENT}
|
|
690
|
+
${PAYMENT_WARNING_FRAGMENT}
|
|
691
|
+
`);
|
|
692
|
+
/**
|
|
693
|
+
* cartClearPaymentSelection Mutation (Adv-1 Phase A1-2) — explicit deselect
|
|
694
|
+
* dla storefront accordion UI ("wróć do wyboru metody"). Atomic NULL na
|
|
695
|
+
* wszystkich 4 payment selection fields, idempotent. Cart MUSI być ACTIVE
|
|
696
|
+
* (CONVERTED reject z `ALREADY_COMPLETED`).
|
|
697
|
+
*/
|
|
698
|
+
export const CART_CLEAR_PAYMENT_SELECTION = composeOperation(`
|
|
699
|
+
mutation CartClearPaymentSelection($input: CartClearPaymentSelectionInput!) {
|
|
700
|
+
cartClearPaymentSelection(input: $input) {
|
|
701
|
+
cart { ...Cart }
|
|
702
|
+
userErrors { ...UserError }
|
|
703
|
+
warnings { ...CartWarning }
|
|
704
|
+
}
|
|
705
|
+
}
|
|
706
|
+
${CART_FRAGMENT}
|
|
707
|
+
${USER_ERROR_FRAGMENT}
|
|
708
|
+
${CART_WARNING_FRAGMENT}
|
|
657
709
|
`);
|
|
658
710
|
/**
|
|
659
711
|
* cartValidateDiscountCode Query — read-only preview discount applicability
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `<PaymentInstrumentSection>` — radio-group container dla payment instruments
|
|
3
|
+
* w obrębie jednej method (np. lista bankow + BLIK code entry w BLIK method,
|
|
4
|
+
* lista wallets + brand cards w CARD method). Renders jeden `<PaymentInstrumentTile>`
|
|
5
|
+
* per item z keyboard nav (Arrow Up/Down, Home/End) + ARIA `role="radiogroup"`.
|
|
6
|
+
*
|
|
7
|
+
* Headless — section + tiles bez własnego stylingu. Pass `sectionClassName`
|
|
8
|
+
* dla layoutu (grid/flex), `tileClassName` dla per-tile styling, optional
|
|
9
|
+
* `iconClassName`/`labelClassName` dla wewnętrznej struktury tile.
|
|
10
|
+
*
|
|
11
|
+
* Auto-group **nie jest** implementowane w tym sub-sprincie — backend już
|
|
12
|
+
* zwraca instruments sorted (BLIK + wallets pierwsze → banks alpha → others)
|
|
13
|
+
* z `availablePaymentMethods.methods[].instruments[]`. Komponent renderuje
|
|
14
|
+
* w order'ze otrzymanym, bez własnej resort logic.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```tsx
|
|
18
|
+
* const [code, setCode] = useState<string | undefined>(undefined);
|
|
19
|
+
* <PaymentInstrumentSection
|
|
20
|
+
* method={method}
|
|
21
|
+
* selectedInstrumentCode={code}
|
|
22
|
+
* onSelectInstrument={setCode}
|
|
23
|
+
* sectionClassName="grid grid-cols-2 gap-2"
|
|
24
|
+
* tileClassName="rounded border p-3 data-[selected=true]:border-blue-500"
|
|
25
|
+
* />
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* Added by payment-instrument-preselection-advanced sub-sprint Adv-2 Req 9.
|
|
29
|
+
*/
|
|
30
|
+
import type { PaymentMethod } from '../../core/generated/operation-types';
|
|
31
|
+
/**
|
|
32
|
+
* Minimalna projekcja `PaymentMethod` używana przez section — wymaga tylko
|
|
33
|
+
* `instruments[]`. Caller może pass pełną `PaymentMethod` z `availablePaymentMethods`
|
|
34
|
+
* query — extra pola (id, name, providersAvailable, etc.) są ignorowane.
|
|
35
|
+
*/
|
|
36
|
+
export type PaymentInstrumentSectionMethod = Pick<PaymentMethod, 'instruments'>;
|
|
37
|
+
export interface PaymentInstrumentSectionProps {
|
|
38
|
+
/** Payment method z `instruments[]` listą (null/empty → komponent zwraca null). */
|
|
39
|
+
method: PaymentInstrumentSectionMethod;
|
|
40
|
+
/** Currently selected instrument code — controlled by parent. Undefined gdy buyer nie wybrał. */
|
|
41
|
+
selectedInstrumentCode?: string;
|
|
42
|
+
/** Callback gdy buyer selektuje instrument. Parent persistuje state + odpala `cartSelectPaymentMethod`. */
|
|
43
|
+
onSelectInstrument: (instrumentCode: string) => void;
|
|
44
|
+
/** Optional class dla outer section element — typically grid/flex layout. */
|
|
45
|
+
sectionClassName?: string;
|
|
46
|
+
/** Optional class dla each `<PaymentInstrumentTile>` — passed jako `className`. */
|
|
47
|
+
tileClassName?: string;
|
|
48
|
+
/** Optional class dla brand image inside tiles — passed jako `iconClassName`. */
|
|
49
|
+
iconClassName?: string;
|
|
50
|
+
/** Optional class dla label span inside tiles — passed jako `labelClassName`. */
|
|
51
|
+
labelClassName?: string;
|
|
52
|
+
/** Optional ARIA label dla radiogroup. Defaults to nothing (caller's responsibility — section typically nested w wider label structure). */
|
|
53
|
+
ariaLabel?: string;
|
|
54
|
+
}
|
|
55
|
+
export declare function PaymentInstrumentSection({ method, selectedInstrumentCode, onSelectInstrument, sectionClassName, tileClassName, iconClassName, labelClassName, ariaLabel, }: PaymentInstrumentSectionProps): import("react/jsx-runtime").JSX.Element | null;
|
|
56
|
+
//# sourceMappingURL=PaymentInstrumentSection.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PaymentInstrumentSection.d.ts","sourceRoot":"","sources":["../../../src/react/components/PaymentInstrumentSection.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAKH,OAAO,KAAK,EAAE,aAAa,EAA2B,MAAM,sCAAsC,CAAC;AAGnG;;;;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"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `<PaymentInstrumentSection>` — radio-group container dla payment instruments
|
|
3
|
+
* w obrębie jednej method (np. lista bankow + BLIK code entry w BLIK method,
|
|
4
|
+
* lista wallets + brand cards w CARD method). Renders jeden `<PaymentInstrumentTile>`
|
|
5
|
+
* per item z keyboard nav (Arrow Up/Down, Home/End) + ARIA `role="radiogroup"`.
|
|
6
|
+
*
|
|
7
|
+
* Headless — section + tiles bez własnego stylingu. Pass `sectionClassName`
|
|
8
|
+
* dla layoutu (grid/flex), `tileClassName` dla per-tile styling, optional
|
|
9
|
+
* `iconClassName`/`labelClassName` dla wewnętrznej struktury tile.
|
|
10
|
+
*
|
|
11
|
+
* Auto-group **nie jest** implementowane w tym sub-sprincie — backend już
|
|
12
|
+
* zwraca instruments sorted (BLIK + wallets pierwsze → banks alpha → others)
|
|
13
|
+
* z `availablePaymentMethods.methods[].instruments[]`. Komponent renderuje
|
|
14
|
+
* w order'ze otrzymanym, bez własnej resort logic.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```tsx
|
|
18
|
+
* const [code, setCode] = useState<string | undefined>(undefined);
|
|
19
|
+
* <PaymentInstrumentSection
|
|
20
|
+
* method={method}
|
|
21
|
+
* selectedInstrumentCode={code}
|
|
22
|
+
* onSelectInstrument={setCode}
|
|
23
|
+
* sectionClassName="grid grid-cols-2 gap-2"
|
|
24
|
+
* tileClassName="rounded border p-3 data-[selected=true]:border-blue-500"
|
|
25
|
+
* />
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* Added by payment-instrument-preselection-advanced sub-sprint Adv-2 Req 9.
|
|
29
|
+
*/
|
|
30
|
+
'use client';
|
|
31
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
32
|
+
import { useCallback, useRef } from 'react';
|
|
33
|
+
import { PaymentInstrumentTile } from './PaymentInstrumentTile';
|
|
34
|
+
export function PaymentInstrumentSection({ method, selectedInstrumentCode, onSelectInstrument, sectionClassName, tileClassName, iconClassName, labelClassName, ariaLabel, }) {
|
|
35
|
+
const instruments = method.instruments ?? [];
|
|
36
|
+
const sectionRef = useRef(null);
|
|
37
|
+
/**
|
|
38
|
+
* Keyboard nav per WAI-ARIA radiogroup pattern:
|
|
39
|
+
* ArrowDown/ArrowRight → focus next tile, wrap to first.
|
|
40
|
+
* ArrowUp/ArrowLeft → focus previous tile, wrap to last.
|
|
41
|
+
* Home → focus first tile.
|
|
42
|
+
* End → focus last tile.
|
|
43
|
+
* Enter/Space → native button activation (no custom handler).
|
|
44
|
+
*/
|
|
45
|
+
const handleKeyDown = useCallback((event) => {
|
|
46
|
+
if (!sectionRef.current)
|
|
47
|
+
return;
|
|
48
|
+
const tiles = Array.from(sectionRef.current.querySelectorAll('button[role="radio"]:not([disabled])'));
|
|
49
|
+
if (tiles.length === 0)
|
|
50
|
+
return;
|
|
51
|
+
const currentIndex = tiles.findIndex((tile) => tile === document.activeElement);
|
|
52
|
+
let nextIndex = -1;
|
|
53
|
+
switch (event.key) {
|
|
54
|
+
case 'ArrowDown':
|
|
55
|
+
case 'ArrowRight':
|
|
56
|
+
nextIndex = currentIndex === -1 || currentIndex === tiles.length - 1 ? 0 : currentIndex + 1;
|
|
57
|
+
break;
|
|
58
|
+
case 'ArrowUp':
|
|
59
|
+
case 'ArrowLeft':
|
|
60
|
+
nextIndex = currentIndex <= 0 ? tiles.length - 1 : currentIndex - 1;
|
|
61
|
+
break;
|
|
62
|
+
case 'Home':
|
|
63
|
+
nextIndex = 0;
|
|
64
|
+
break;
|
|
65
|
+
case 'End':
|
|
66
|
+
nextIndex = tiles.length - 1;
|
|
67
|
+
break;
|
|
68
|
+
default:
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
event.preventDefault();
|
|
72
|
+
tiles[nextIndex]?.focus();
|
|
73
|
+
}, []);
|
|
74
|
+
if (instruments.length === 0) {
|
|
75
|
+
return null;
|
|
76
|
+
}
|
|
77
|
+
return (_jsx("div", { ref: sectionRef, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: handleKeyDown, className: sectionClassName, children: instruments.map((instrument) => {
|
|
78
|
+
// Cast to tile-projection shape — instruments[] z generated types ma więcej pól
|
|
79
|
+
// niż tile potrzebuje (providerCode, type), tile picks subset jawnie.
|
|
80
|
+
const tileInstrument = {
|
|
81
|
+
instrumentCode: instrument.instrumentCode,
|
|
82
|
+
displayName: instrument.displayName,
|
|
83
|
+
displayHint: instrument.displayHint,
|
|
84
|
+
enabled: instrument.enabled,
|
|
85
|
+
brandImageUrl: instrument.brandImageUrl ?? undefined,
|
|
86
|
+
};
|
|
87
|
+
return (_jsx(PaymentInstrumentTile, { instrument: tileInstrument, selected: instrument.instrumentCode === selectedInstrumentCode, onSelect: () => onSelectInstrument(instrument.instrumentCode), className: tileClassName, iconClassName: iconClassName, labelClassName: labelClassName }, instrument.instrumentCode));
|
|
88
|
+
}) }));
|
|
89
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `<PaymentInstrumentTile>` — single payment instrument tile (BLIK code,
|
|
3
|
+
* bank logo, wallet button, card brand). Headless — buyer-facing button
|
|
4
|
+
* z accessibility wbudowanym (`role="radio"`, `aria-checked`, `aria-label`,
|
|
5
|
+
* `data-instrument-code`, `data-display-hint`). Pass className per part
|
|
6
|
+
* (button, icon, label) żeby zintegrować z Tailwind / CSS Modules /
|
|
7
|
+
* styled-components — komponent nie ma własnego stylingu.
|
|
8
|
+
*
|
|
9
|
+
* `displayHint` dispatch — backend hint jak storefront powinien renderować
|
|
10
|
+
* instrument. Komponent emituje hint jako `data-display-hint` attribute na
|
|
11
|
+
* `<button>` żeby caller mógł stylizować przez CSS attribute selektory:
|
|
12
|
+
*
|
|
13
|
+
* - `BRANDED_TILE` — bank logo / wallet icon dominuje, label jako caption.
|
|
14
|
+
* - `PROMINENT_BUTTON` — duże CTA (BLIK code entry), brand image pominięty.
|
|
15
|
+
* - `RADIO_OPTION` — radio-list look, image (jeśli is) + label inline.
|
|
16
|
+
* - `DROPDOWN_OPTION` — text-only dla dropdown integration (caller wrap).
|
|
17
|
+
*
|
|
18
|
+
* Headless = no opinion. CSS styling decyduje, komponent tylko hint'uje.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```tsx
|
|
22
|
+
* <PaymentInstrumentTile
|
|
23
|
+
* instrument={{ instrumentCode: 'blik', displayName: 'BLIK', displayHint: 'PROMINENT_BUTTON', enabled: true }}
|
|
24
|
+
* selected={selectedCode === 'blik'}
|
|
25
|
+
* onSelect={() => setSelectedCode('blik')}
|
|
26
|
+
* className="rounded-lg border p-3 hover:bg-gray-50 data-[selected=true]:border-blue-500"
|
|
27
|
+
* labelClassName="font-semibold"
|
|
28
|
+
* />
|
|
29
|
+
* ```
|
|
30
|
+
*
|
|
31
|
+
* Added by payment-instrument-preselection-advanced sub-sprint Adv-2 Req 9.
|
|
32
|
+
*/
|
|
33
|
+
import type { PaymentMethodInstrument } from '../../core/generated/operation-types';
|
|
34
|
+
/**
|
|
35
|
+
* Minimalna projekcja `PaymentMethodInstrument` używana przez tile. Caller może
|
|
36
|
+
* pass pełny instrument z `availablePaymentMethods` query — extra pola
|
|
37
|
+
* (providerCode, type) są ignorowane przez komponent (UI nie branchuje na
|
|
38
|
+
* provider — gateway-agnostic, instrumentCode + displayHint wystarczą).
|
|
39
|
+
*/
|
|
40
|
+
export type PaymentInstrumentTileInstrument = Pick<PaymentMethodInstrument, 'instrumentCode' | 'displayName' | 'displayHint' | 'enabled'> & Partial<Pick<PaymentMethodInstrument, 'brandImageUrl'>>;
|
|
41
|
+
export interface PaymentInstrumentTileProps {
|
|
42
|
+
/** Instrument projection — gateway code, label, display hint, enabled state. */
|
|
43
|
+
instrument: PaymentInstrumentTileInstrument;
|
|
44
|
+
/** True gdy ten tile jest currently selected w parent section. Controls `aria-checked` + `data-selected`. */
|
|
45
|
+
selected: boolean;
|
|
46
|
+
/** Click handler — caller updates selected state external (controlled component). */
|
|
47
|
+
onSelect: () => void;
|
|
48
|
+
/** Optional class for the outer button — header styling, layout, border. */
|
|
49
|
+
className?: string;
|
|
50
|
+
/** Optional class for the brand image (`<img>` element). Only applied when instrument has `brandImageUrl`. */
|
|
51
|
+
iconClassName?: string;
|
|
52
|
+
/** Optional class for the label span. */
|
|
53
|
+
labelClassName?: string;
|
|
54
|
+
}
|
|
55
|
+
export declare function PaymentInstrumentTile({ instrument, selected, onSelect, className, iconClassName, labelClassName, }: PaymentInstrumentTileProps): import("react/jsx-runtime").JSX.Element;
|
|
56
|
+
//# sourceMappingURL=PaymentInstrumentTile.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PaymentInstrumentTile.d.ts","sourceRoot":"","sources":["../../../src/react/components/PaymentInstrumentTile.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAIH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAEpF;;;;;GAKG;AACH,MAAM,MAAM,+BAA+B,GAAG,IAAI,CAChD,uBAAuB,EACvB,gBAAgB,GAAG,aAAa,GAAG,aAAa,GAAG,SAAS,CAC7D,GACC,OAAO,CAAC,IAAI,CAAC,uBAAuB,EAAE,eAAe,CAAC,CAAC,CAAC;AAE1D,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,8GAA8G;IAC9G,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,2CAsB5B"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `<PaymentInstrumentTile>` — single payment instrument tile (BLIK code,
|
|
3
|
+
* bank logo, wallet button, card brand). Headless — buyer-facing button
|
|
4
|
+
* z accessibility wbudowanym (`role="radio"`, `aria-checked`, `aria-label`,
|
|
5
|
+
* `data-instrument-code`, `data-display-hint`). Pass className per part
|
|
6
|
+
* (button, icon, label) żeby zintegrować z Tailwind / CSS Modules /
|
|
7
|
+
* styled-components — komponent nie ma własnego stylingu.
|
|
8
|
+
*
|
|
9
|
+
* `displayHint` dispatch — backend hint jak storefront powinien renderować
|
|
10
|
+
* instrument. Komponent emituje hint jako `data-display-hint` attribute na
|
|
11
|
+
* `<button>` żeby caller mógł stylizować przez CSS attribute selektory:
|
|
12
|
+
*
|
|
13
|
+
* - `BRANDED_TILE` — bank logo / wallet icon dominuje, label jako caption.
|
|
14
|
+
* - `PROMINENT_BUTTON` — duże CTA (BLIK code entry), brand image pominięty.
|
|
15
|
+
* - `RADIO_OPTION` — radio-list look, image (jeśli is) + label inline.
|
|
16
|
+
* - `DROPDOWN_OPTION` — text-only dla dropdown integration (caller wrap).
|
|
17
|
+
*
|
|
18
|
+
* Headless = no opinion. CSS styling decyduje, komponent tylko hint'uje.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```tsx
|
|
22
|
+
* <PaymentInstrumentTile
|
|
23
|
+
* instrument={{ instrumentCode: 'blik', displayName: 'BLIK', displayHint: 'PROMINENT_BUTTON', enabled: true }}
|
|
24
|
+
* selected={selectedCode === 'blik'}
|
|
25
|
+
* onSelect={() => setSelectedCode('blik')}
|
|
26
|
+
* className="rounded-lg border p-3 hover:bg-gray-50 data-[selected=true]:border-blue-500"
|
|
27
|
+
* labelClassName="font-semibold"
|
|
28
|
+
* />
|
|
29
|
+
* ```
|
|
30
|
+
*
|
|
31
|
+
* Added by payment-instrument-preselection-advanced sub-sprint Adv-2 Req 9.
|
|
32
|
+
*/
|
|
33
|
+
'use client';
|
|
34
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
35
|
+
export function PaymentInstrumentTile({ instrument, selected, onSelect, className, iconClassName, labelClassName, }) {
|
|
36
|
+
const { instrumentCode, displayName, displayHint, brandImageUrl, enabled } = instrument;
|
|
37
|
+
// PROMINENT_BUTTON hides brand image — instrument jest text-only CTA (BLIK code entry).
|
|
38
|
+
const showImage = displayHint !== 'PROMINENT_BUTTON' && brandImageUrl;
|
|
39
|
+
return (_jsxs("button", { type: "button", role: "radio", "aria-checked": selected, "aria-label": displayName, "data-instrument-code": instrumentCode, "data-display-hint": displayHint, "data-selected": selected, disabled: !enabled, onClick: onSelect, className: className, children: [showImage && _jsx("img", { src: brandImageUrl, alt: "", className: iconClassName }), _jsx("span", { className: labelClassName, children: displayName })] }));
|
|
40
|
+
}
|
|
@@ -12,4 +12,6 @@ export { CartCount, type CartCountProps } from './CartCount';
|
|
|
12
12
|
export { AddToCartButton, type AddToCartButtonProps } from './AddToCartButton';
|
|
13
13
|
export { PriceDisplay, type PriceDisplayProps } from './PriceDisplay';
|
|
14
14
|
export { CartTotals, type CartTotalsProps, type CartTotalsLabels } from './CartTotals';
|
|
15
|
+
export { PaymentInstrumentTile, type PaymentInstrumentTileProps, type PaymentInstrumentTileInstrument, } from './PaymentInstrumentTile';
|
|
16
|
+
export { PaymentInstrumentSection, type PaymentInstrumentSectionProps, type PaymentInstrumentSectionMethod, } from './PaymentInstrumentSection';
|
|
15
17
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +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"}
|
|
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;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"}
|
|
@@ -12,3 +12,5 @@ export { CartCount } from './CartCount';
|
|
|
12
12
|
export { AddToCartButton } from './AddToCartButton';
|
|
13
13
|
export { PriceDisplay } from './PriceDisplay';
|
|
14
14
|
export { CartTotals } from './CartTotals';
|
|
15
|
+
export { PaymentInstrumentTile, } from './PaymentInstrumentTile';
|
|
16
|
+
export { PaymentInstrumentSection, } from './PaymentInstrumentSection';
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `getBrowserDataForPayment()` — collects browser context required by PSD2/3DS2
|
|
3
|
+
* authentication flows (card-on-file z 3DS challenge, BLIK confirmation,
|
|
4
|
+
* Apple/Google Pay z risk scoring).
|
|
5
|
+
*
|
|
6
|
+
* **Browser-only** — throws gdy `typeof window === 'undefined'` (server-side
|
|
7
|
+
* rendering). Caller MUSI gate'ować call w useEffect / event handler / browser
|
|
8
|
+
* code path. NEVER call this w Server Component lub Route Handler.
|
|
9
|
+
*
|
|
10
|
+
* Wartości pochodzą z standard Web APIs:
|
|
11
|
+
* - `userAgent` — `navigator.userAgent`.
|
|
12
|
+
* - `language` — `navigator.language` (BCP 47, fallback `en-US`).
|
|
13
|
+
* - `screen{Width,Height}` — `window.screen.{width,height}`.
|
|
14
|
+
* - `colorDepth` — `window.screen.colorDepth`.
|
|
15
|
+
* - `timezoneOffset` — `new Date().getTimezoneOffset()` (signed integer, minutes,
|
|
16
|
+
* reverse signed per ECMA: dodatnie = behind UTC, ujemne = ahead).
|
|
17
|
+
* - `javaEnabled` — `navigator.javaEnabled?.()` (deprecated ale wymagane PSD2/EMV
|
|
18
|
+
* specification; fallback `false` gdy browser nie expose'uje).
|
|
19
|
+
* - `acceptHeader` — NIE dostępne client-side (`navigator` nie expose'uje request
|
|
20
|
+
* headers). Caller passes z server context lub omits (gateway-dependent
|
|
21
|
+
* requirement). Helper zwraca undefined.
|
|
22
|
+
*
|
|
23
|
+
* Shape matches PSD2/3DS2 BrowserData specification (EMVCo) — adapter na backend
|
|
24
|
+
* `IPaymentProvider.createPayment` może merge wprost do gateway-specific body
|
|
25
|
+
* (Adyen `browserInfo`, Stripe `payment_method_data.billing_details.browser_info`,
|
|
26
|
+
* Mollie `cardToken` z 3DS lookup).
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```tsx
|
|
30
|
+
* // W event handler (browser-only):
|
|
31
|
+
* function handleCheckoutSubmit() {
|
|
32
|
+
* const browserData = getBrowserDataForPayment();
|
|
33
|
+
* await cart.createPayment({ ..., browserData });
|
|
34
|
+
* }
|
|
35
|
+
*
|
|
36
|
+
* // SSR-safe wrap:
|
|
37
|
+
* if (typeof window !== 'undefined') {
|
|
38
|
+
* const browserData = getBrowserDataForPayment();
|
|
39
|
+
* ...
|
|
40
|
+
* }
|
|
41
|
+
* ```
|
|
42
|
+
*
|
|
43
|
+
* Added by payment-instrument-preselection-advanced sub-sprint Adv-2 Req 9.5
|
|
44
|
+
* (carry-over z Adv-1 plan — moved here as standalone utility, no backend
|
|
45
|
+
* mutation impact yet — Adv-3 będzie consumer'em w `paymentCreate` input).
|
|
46
|
+
*/
|
|
47
|
+
/**
|
|
48
|
+
* PSD2/3DS2 browser context shape. All fields optional poza ones backed by
|
|
49
|
+
* standard API — gateway-specific requirements decyzują które pola są mandatory.
|
|
50
|
+
*/
|
|
51
|
+
export interface PaymentBrowserData {
|
|
52
|
+
/** Accept HTTP header value — NOT available client-side (caller passes from server context or omits). */
|
|
53
|
+
acceptHeader?: string;
|
|
54
|
+
/** Full user-agent string (`navigator.userAgent`). */
|
|
55
|
+
userAgent: string;
|
|
56
|
+
/** BCP 47 language tag (`navigator.language`). Fallback `'en-US'` gdy missing. */
|
|
57
|
+
language: string;
|
|
58
|
+
/** Screen width in pixels (`window.screen.width`). */
|
|
59
|
+
screenWidth: number;
|
|
60
|
+
/** Screen height in pixels (`window.screen.height`). */
|
|
61
|
+
screenHeight: number;
|
|
62
|
+
/** Color depth bits-per-pixel (`window.screen.colorDepth`). Typically `24` or `32`. */
|
|
63
|
+
colorDepth: number;
|
|
64
|
+
/**
|
|
65
|
+
* Local timezone offset w minutach (ECMA signed convention — dodatnie = behind UTC,
|
|
66
|
+
* ujemne = ahead UTC). Np. CET zima = `-60`, PST zima = `480`.
|
|
67
|
+
*/
|
|
68
|
+
timezoneOffset: number;
|
|
69
|
+
/**
|
|
70
|
+
* Java support (`navigator.javaEnabled?.()`). Deprecated API ale wymagane PSD2/EMV
|
|
71
|
+
* specification; fallback `false` gdy browser nie expose'uje.
|
|
72
|
+
*/
|
|
73
|
+
javaEnabled: boolean;
|
|
74
|
+
/**
|
|
75
|
+
* IANA timezone name (`Intl.DateTimeFormat().resolvedOptions().timeZone`).
|
|
76
|
+
* Optional — niektóre gateways używają zamiast offsetu (Adyen risk scoring).
|
|
77
|
+
*/
|
|
78
|
+
timezone?: string;
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Throw'd gdy helper wywołany w SSR context (Server Component, Route Handler,
|
|
82
|
+
* Node bez JSDOM). Caller MUSI guard'ować przez `typeof window` check albo
|
|
83
|
+
* wywołać tylko w event handler / `useEffect`.
|
|
84
|
+
*/
|
|
85
|
+
export declare class BrowserDataNotAvailableError extends Error {
|
|
86
|
+
constructor();
|
|
87
|
+
}
|
|
88
|
+
export declare function getBrowserDataForPayment(): PaymentBrowserData;
|
|
89
|
+
//# sourceMappingURL=browser-data.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `getBrowserDataForPayment()` — collects browser context required by PSD2/3DS2
|
|
3
|
+
* authentication flows (card-on-file z 3DS challenge, BLIK confirmation,
|
|
4
|
+
* Apple/Google Pay z risk scoring).
|
|
5
|
+
*
|
|
6
|
+
* **Browser-only** — throws gdy `typeof window === 'undefined'` (server-side
|
|
7
|
+
* rendering). Caller MUSI gate'ować call w useEffect / event handler / browser
|
|
8
|
+
* code path. NEVER call this w Server Component lub Route Handler.
|
|
9
|
+
*
|
|
10
|
+
* Wartości pochodzą z standard Web APIs:
|
|
11
|
+
* - `userAgent` — `navigator.userAgent`.
|
|
12
|
+
* - `language` — `navigator.language` (BCP 47, fallback `en-US`).
|
|
13
|
+
* - `screen{Width,Height}` — `window.screen.{width,height}`.
|
|
14
|
+
* - `colorDepth` — `window.screen.colorDepth`.
|
|
15
|
+
* - `timezoneOffset` — `new Date().getTimezoneOffset()` (signed integer, minutes,
|
|
16
|
+
* reverse signed per ECMA: dodatnie = behind UTC, ujemne = ahead).
|
|
17
|
+
* - `javaEnabled` — `navigator.javaEnabled?.()` (deprecated ale wymagane PSD2/EMV
|
|
18
|
+
* specification; fallback `false` gdy browser nie expose'uje).
|
|
19
|
+
* - `acceptHeader` — NIE dostępne client-side (`navigator` nie expose'uje request
|
|
20
|
+
* headers). Caller passes z server context lub omits (gateway-dependent
|
|
21
|
+
* requirement). Helper zwraca undefined.
|
|
22
|
+
*
|
|
23
|
+
* Shape matches PSD2/3DS2 BrowserData specification (EMVCo) — adapter na backend
|
|
24
|
+
* `IPaymentProvider.createPayment` może merge wprost do gateway-specific body
|
|
25
|
+
* (Adyen `browserInfo`, Stripe `payment_method_data.billing_details.browser_info`,
|
|
26
|
+
* Mollie `cardToken` z 3DS lookup).
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```tsx
|
|
30
|
+
* // W event handler (browser-only):
|
|
31
|
+
* function handleCheckoutSubmit() {
|
|
32
|
+
* const browserData = getBrowserDataForPayment();
|
|
33
|
+
* await cart.createPayment({ ..., browserData });
|
|
34
|
+
* }
|
|
35
|
+
*
|
|
36
|
+
* // SSR-safe wrap:
|
|
37
|
+
* if (typeof window !== 'undefined') {
|
|
38
|
+
* const browserData = getBrowserDataForPayment();
|
|
39
|
+
* ...
|
|
40
|
+
* }
|
|
41
|
+
* ```
|
|
42
|
+
*
|
|
43
|
+
* Added by payment-instrument-preselection-advanced sub-sprint Adv-2 Req 9.5
|
|
44
|
+
* (carry-over z Adv-1 plan — moved here as standalone utility, no backend
|
|
45
|
+
* mutation impact yet — Adv-3 będzie consumer'em w `paymentCreate` input).
|
|
46
|
+
*/
|
|
47
|
+
/**
|
|
48
|
+
* Throw'd gdy helper wywołany w SSR context (Server Component, Route Handler,
|
|
49
|
+
* Node bez JSDOM). Caller MUSI guard'ować przez `typeof window` check albo
|
|
50
|
+
* wywołać tylko w event handler / `useEffect`.
|
|
51
|
+
*/
|
|
52
|
+
export class BrowserDataNotAvailableError extends Error {
|
|
53
|
+
constructor() {
|
|
54
|
+
super('getBrowserDataForPayment requires browser context (window/navigator/screen unavailable).');
|
|
55
|
+
this.name = 'BrowserDataNotAvailableError';
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
export function getBrowserDataForPayment() {
|
|
59
|
+
if (typeof window === 'undefined' || typeof navigator === 'undefined' || typeof window.screen === 'undefined') {
|
|
60
|
+
throw new BrowserDataNotAvailableError();
|
|
61
|
+
}
|
|
62
|
+
// `navigator.javaEnabled` jest deprecated ale wciąż obecny w major browsers — guard
|
|
63
|
+
// dla future removal. Falsy fallback gdy missing (PSD2 spec wymaga boolean, not undefined).
|
|
64
|
+
const javaEnabled = typeof navigator.javaEnabled === 'function' ? Boolean(navigator.javaEnabled()) : false;
|
|
65
|
+
// `Intl.DateTimeFormat` jest dostępny we wszystkich modern browsers — optional capture
|
|
66
|
+
// dla gateways które wymagają IANA name zamiast offset (np. Adyen).
|
|
67
|
+
let timezone;
|
|
68
|
+
try {
|
|
69
|
+
timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
70
|
+
}
|
|
71
|
+
catch {
|
|
72
|
+
timezone = undefined;
|
|
73
|
+
}
|
|
74
|
+
return {
|
|
75
|
+
userAgent: navigator.userAgent,
|
|
76
|
+
language: navigator.language || 'en-US',
|
|
77
|
+
screenWidth: window.screen.width,
|
|
78
|
+
screenHeight: window.screen.height,
|
|
79
|
+
colorDepth: window.screen.colorDepth,
|
|
80
|
+
timezoneOffset: new Date().getTimezoneOffset(),
|
|
81
|
+
javaEnabled,
|
|
82
|
+
timezone,
|
|
83
|
+
};
|
|
84
|
+
}
|
package/dist/react/index.d.ts
CHANGED
|
@@ -41,5 +41,6 @@ export { createCartStore, selectCartId, selectIsCartOpen, selectCartIsLoading, }
|
|
|
41
41
|
export type { CartState, CartStoreConfig, CartActions, CartData, CartMutationAction, CartLineInput, CartLineUpdateInput, } from './stores/cart.store';
|
|
42
42
|
export { CartProvider, useCartStore, useCartStoreApi } from './stores/cart.context';
|
|
43
43
|
export { createStoreContext } from './helpers/create-store-context';
|
|
44
|
-
export { Money, type MoneyProps, Image, type ImageComponentProps, CartCount, type CartCountProps, AddToCartButton, type AddToCartButtonProps, PriceDisplay, type PriceDisplayProps, CartTotals, type CartTotalsProps, type CartTotalsLabels, } from './components';
|
|
44
|
+
export { Money, type MoneyProps, Image, type ImageComponentProps, CartCount, type CartCountProps, AddToCartButton, type AddToCartButtonProps, PriceDisplay, type PriceDisplayProps, CartTotals, type CartTotalsProps, type CartTotalsLabels, PaymentInstrumentTile, type PaymentInstrumentTileProps, type PaymentInstrumentTileInstrument, PaymentInstrumentSection, type PaymentInstrumentSectionProps, type PaymentInstrumentSectionMethod, } from './components';
|
|
45
|
+
export { getBrowserDataForPayment, BrowserDataNotAvailableError, type PaymentBrowserData, } from './helpers/browser-data';
|
|
45
46
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"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"}
|
package/dist/react/index.js
CHANGED
|
@@ -47,4 +47,6 @@ export { CartProvider, useCartStore, useCartStoreApi } from './stores/cart.conte
|
|
|
47
47
|
// Store context helper
|
|
48
48
|
export { createStoreContext } from './helpers/create-store-context';
|
|
49
49
|
// Pre-built components (headless — no styling, accessibility-aware)
|
|
50
|
-
export { Money, Image, CartCount, AddToCartButton, PriceDisplay, CartTotals, } from './components';
|
|
50
|
+
export { Money, Image, CartCount, AddToCartButton, PriceDisplay, CartTotals, PaymentInstrumentTile, PaymentInstrumentSection, } from './components';
|
|
51
|
+
// Browser context helpers (PSD2/3DS2 — browser-only)
|
|
52
|
+
export { getBrowserDataForPayment, BrowserDataNotAvailableError, } from './helpers/browser-data';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@doswiftly/storefront-sdk",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "17.0.0",
|
|
4
4
|
"description": "Storefront runtime SDK for DoSwiftly Commerce — layered transport, middleware pipeline, React providers, Zustand stores, cache strategies. 0 runtime dependencies in core.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|