@orcestr/commerce-ui 0.1.0 → 0.1.2
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/README.md +51 -15
- package/README.ru.md +51 -15
- package/dist/CommerceCheckoutDialog.d.ts.map +1 -1
- package/dist/CommerceCheckoutDialog.js +6 -1
- package/dist/CommerceCheckoutDialog.js.map +1 -1
- package/dist/styles.css +102 -97
- package/package.json +56 -33
package/README.md
CHANGED
|
@@ -1,15 +1,51 @@
|
|
|
1
|
-
# @orcestr/commerce-ui
|
|
2
|
-
|
|
3
|
-
Provider-neutral React components for CommerceXL checkout surfaces. Payment providers remain
|
|
4
|
-
separate packages; this package owns the shared dialog shell and explicit payment-method choice.
|
|
5
|
-
|
|
6
|
-
```bash
|
|
7
|
-
npm install @orcestr/commerce-ui @orcestr/ui
|
|
8
|
-
```
|
|
9
|
-
|
|
10
|
-
Import `@orcestr/commerce-ui/styles.css` once in the application root. Use
|
|
11
|
-
`CommercePaymentMethodPicker` before creating an order and `CommerceCheckoutDialog` as the single
|
|
12
|
-
accessible modal shell around the selected provider UI.
|
|
13
|
-
|
|
14
|
-
The package never computes prices and never accepts a client-supplied amount. Render server-owned
|
|
15
|
-
catalog options and submit only their stable option IDs to checkout.
|
|
1
|
+
# @orcestr/commerce-ui
|
|
2
|
+
|
|
3
|
+
Provider-neutral React components for CommerceXL checkout surfaces. Payment providers remain
|
|
4
|
+
separate packages; this package owns the shared dialog shell and explicit payment-method choice.
|
|
5
|
+
|
|
6
|
+
```bash
|
|
7
|
+
npm install @orcestr/commerce-ui @orcestr/ui
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
Import `@orcestr/commerce-ui/styles.css` once in the application root. Use
|
|
11
|
+
`CommercePaymentMethodPicker` before creating an order and `CommerceCheckoutDialog` as the single
|
|
12
|
+
accessible modal shell around the selected provider UI.
|
|
13
|
+
|
|
14
|
+
The package never computes prices and never accepts a client-supplied amount. Render server-owned
|
|
15
|
+
catalog options and submit only their stable option IDs to checkout.
|
|
16
|
+
|
|
17
|
+
## Composing a provider
|
|
18
|
+
|
|
19
|
+
Use `CommercePaymentMethodPicker` for all available provider options and keep
|
|
20
|
+
`CommerceCheckoutDialog` as the single modal shell. Mount the selected provider view inside the
|
|
21
|
+
dialog instead of creating a separate modal per provider.
|
|
22
|
+
|
|
23
|
+
For Solana checkout, install the published provider packages:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install @orcestr/commerce-solana-core @orcestr/commerce-solana-react @orcestr/commerce-solana-ui @tanstack/react-query
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Import `@orcestr/commerce-solana-ui/styles.css`, then render `SolanaCheckout` inside the shared
|
|
30
|
+
dialog with `showHeader={false}`. The Solana view automatically creates a fresh short-lived wallet
|
|
31
|
+
action and shows the QR code, deep link and payment states. Only authoritative backend `paid` state
|
|
32
|
+
may unlock a product; a wallet callback is not payment proof.
|
|
33
|
+
|
|
34
|
+
See the [CommerceXL integration guide](https://github.com/Artasov/commercexl/blob/master/src/commercexl/docs/HOW_TO_USE.md#6-compose-the-provider-neutral-checkout)
|
|
35
|
+
and [Orcestr Commerce Solana](https://github.com/Artasov/orcestr-commerce-solana) for the complete
|
|
36
|
+
backend, authentication, realtime and finalized-verification boundaries.
|
|
37
|
+
|
|
38
|
+
## Build and local integration
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
cd frontend
|
|
42
|
+
npm ci
|
|
43
|
+
npm run build
|
|
44
|
+
npm run pack:dry-run
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
For a local Orcestr consumer, point to `../commercexl/frontend/packages/ui` through the consumer's
|
|
48
|
+
local-library helper before starting its dev server. Do not use a global `npm link`.
|
|
49
|
+
|
|
50
|
+
Releases use `commerce-ui-vX.Y.Z` tags. After the first manual npm publish creates the package, the
|
|
51
|
+
`CI/CD` workflow publishes later tags with npm Trusted Publishing and provenance.
|
package/README.ru.md
CHANGED
|
@@ -1,15 +1,51 @@
|
|
|
1
|
-
# @orcestr/commerce-ui
|
|
2
|
-
|
|
3
|
-
Нейтральные к платёжному провайдеру React-компоненты для checkout CommerceXL. Провайдеры остаются
|
|
4
|
-
отдельными пакетами; здесь находятся единая оболочка модального окна и явный выбор способа оплаты.
|
|
5
|
-
|
|
6
|
-
```bash
|
|
7
|
-
npm install @orcestr/commerce-ui @orcestr/ui
|
|
8
|
-
```
|
|
9
|
-
|
|
10
|
-
Один раз подключите `@orcestr/commerce-ui/styles.css` в корне приложения. До создания заказа
|
|
11
|
-
используйте `CommercePaymentMethodPicker`, а UI выбранного провайдера помещайте в единственный
|
|
12
|
-
`CommerceCheckoutDialog`.
|
|
13
|
-
|
|
14
|
-
Пакет не вычисляет цены и не принимает сумму от клиента. Показывайте только серверные варианты из
|
|
15
|
-
каталога, а в checkout отправляйте их стабильные идентификаторы.
|
|
1
|
+
# @orcestr/commerce-ui
|
|
2
|
+
|
|
3
|
+
Нейтральные к платёжному провайдеру React-компоненты для checkout CommerceXL. Провайдеры остаются
|
|
4
|
+
отдельными пакетами; здесь находятся единая оболочка модального окна и явный выбор способа оплаты.
|
|
5
|
+
|
|
6
|
+
```bash
|
|
7
|
+
npm install @orcestr/commerce-ui @orcestr/ui
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
Один раз подключите `@orcestr/commerce-ui/styles.css` в корне приложения. До создания заказа
|
|
11
|
+
используйте `CommercePaymentMethodPicker`, а UI выбранного провайдера помещайте в единственный
|
|
12
|
+
`CommerceCheckoutDialog`.
|
|
13
|
+
|
|
14
|
+
Пакет не вычисляет цены и не принимает сумму от клиента. Показывайте только серверные варианты из
|
|
15
|
+
каталога, а в checkout отправляйте их стабильные идентификаторы.
|
|
16
|
+
|
|
17
|
+
## Подключение провайдера
|
|
18
|
+
|
|
19
|
+
Используйте `CommercePaymentMethodPicker` для всех доступных вариантов оплаты, а
|
|
20
|
+
`CommerceCheckoutDialog` оставляйте единственной модальной оболочкой. UI выбранного провайдера
|
|
21
|
+
встраивается внутрь этого окна, а не открывает отдельное модальное окно.
|
|
22
|
+
|
|
23
|
+
Для оплаты через Solana установите опубликованные provider-пакеты:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install @orcestr/commerce-solana-core @orcestr/commerce-solana-react @orcestr/commerce-solana-ui @tanstack/react-query
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Подключите `@orcestr/commerce-solana-ui/styles.css` и отрисуйте `SolanaCheckout` внутри общего окна
|
|
30
|
+
с `showHeader={false}`. Solana UI автоматически создаёт новое короткоживущее действие для кошелька
|
|
31
|
+
и показывает QR-код, deep link и состояния платежа. Продукт можно разблокировать только после
|
|
32
|
+
authoritative backend-состояния `paid`; callback кошелька не является доказательством оплаты.
|
|
33
|
+
|
|
34
|
+
Полная схема backend, auth, realtime и finalized-проверки описана в
|
|
35
|
+
[руководстве CommerceXL](https://github.com/Artasov/commercexl/blob/master/src/commercexl/docs/HOW_TO_USE.md#6-compose-the-provider-neutral-checkout)
|
|
36
|
+
и документации [Orcestr Commerce Solana](https://github.com/Artasov/orcestr-commerce-solana).
|
|
37
|
+
|
|
38
|
+
## Сборка и локальное подключение
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
cd frontend
|
|
42
|
+
npm ci
|
|
43
|
+
npm run build
|
|
44
|
+
npm run pack:dry-run
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
В локальном Orcestr подключайте `../commercexl/frontend/packages/ui` через helper локальных
|
|
48
|
+
библиотек consumer-приложения до запуска dev server. Глобальный `npm link` не используйте.
|
|
49
|
+
|
|
50
|
+
Для релизов используются теги `commerce-ui-vX.Y.Z`. После первой ручной публикации, создающей
|
|
51
|
+
пакет в npm, следующие теги публикует workflow `CI/CD` через npm Trusted Publishing с provenance.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommerceCheckoutDialog.d.ts","sourceRoot":"","sources":["../src/CommerceCheckoutDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,aAAqB,EACrB,QAAc,EACd,SAAS,GACV,EAAE;IACD,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,UAAU,EAAE,SAAS,CAAC;IAC/B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,
|
|
1
|
+
{"version":3,"file":"CommerceCheckoutDialog.d.ts","sourceRoot":"","sources":["../src/CommerceCheckoutDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,aAAqB,EACrB,QAAc,EACd,SAAS,GACV,EAAE;IACD,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,UAAU,EAAE,SAAS,CAAC;IAC/B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,2CAwBA"}
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Button, Dialog } from "@orcestr/ui";
|
|
4
4
|
export function CommerceCheckoutDialog({ open, onOpenChange, title, description, children, closeLabel, closeDisabled = false, maxWidth = 720, className, }) {
|
|
5
|
-
return (_jsx(Dialog.Root, { open: open, onOpenChange:
|
|
5
|
+
return (_jsx(Dialog.Root, { open: open, onOpenChange: (nextOpen) => {
|
|
6
|
+
if (!nextOpen && closeDisabled)
|
|
7
|
+
return;
|
|
8
|
+
onOpenChange(nextOpen);
|
|
9
|
+
}, children: _jsxs(Dialog.Content, { maxWidth: maxWidth, closeOnOverlayClick: !closeDisabled, className: ["oc-checkout-dialog", className].filter(Boolean).join(" "), children: [_jsxs("div", { className: "oc-checkout-dialog-header", children: [_jsx(Dialog.Title, { children: title }), _jsxs(Button, { className: "oc-checkout-dialog-close", v: "ghost", size: 1, type: "button", disabled: closeDisabled, onClick: () => { if (!closeDisabled)
|
|
10
|
+
onOpenChange(false); }, children: [_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) }), _jsx("span", { className: "oc-visually-hidden", children: closeLabel })] })] }), description ? _jsx(Dialog.Description, { children: description }) : null, _jsx("div", { className: "oc-checkout-dialog-body", children: children })] }) }));
|
|
6
11
|
}
|
|
7
12
|
//# sourceMappingURL=CommerceCheckoutDialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommerceCheckoutDialog.js","sourceRoot":"","sources":["../src/CommerceCheckoutDialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAC,MAAM,EAAE,MAAM,EAAC,MAAM,aAAa,CAAC;AAG3C,MAAM,UAAU,sBAAsB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,GAAG,EACd,SAAS,GAWV;IACC,OAAO,CACL,KAAC,MAAM,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,
|
|
1
|
+
{"version":3,"file":"CommerceCheckoutDialog.js","sourceRoot":"","sources":["../src/CommerceCheckoutDialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAC,MAAM,EAAE,MAAM,EAAC,MAAM,aAAa,CAAC;AAG3C,MAAM,UAAU,sBAAsB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,GAAG,EACd,SAAS,GAWV;IACC,OAAO,CACL,KAAC,MAAM,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,QAAQ,EAAE,EAAE;YAClD,IAAI,CAAC,QAAQ,IAAI,aAAa;gBAAE,OAAO;YACvC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACzB,CAAC,YACC,MAAC,MAAM,CAAC,OAAO,IACb,QAAQ,EAAE,QAAQ,EAClB,mBAAmB,EAAE,CAAC,aAAa,EACnC,SAAS,EAAE,CAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAEtE,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,MAAM,CAAC,KAAK,cAAE,KAAK,GAAgB,EACpC,MAAC,MAAM,IAAC,SAAS,EAAC,0BAA0B,EAAC,CAAC,EAAC,OAAO,EAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,QAAQ,EAC3E,QAAQ,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,aAAa;gCAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA,CAAC,aAClF,cAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,KAAK,iBAAa,MAAM,YAAC,eAAM,CAAC,EAAC,sBAAsB,GAAG,GAAM,EAC9J,eAAM,SAAS,EAAC,oBAAoB,YAAE,UAAU,GAAQ,IACjD,IACL,EACL,WAAW,CAAC,CAAC,CAAC,KAAC,MAAM,CAAC,WAAW,cAAE,WAAW,GAAsB,CAAC,CAAC,CAAC,IAAI,EAC5E,cAAK,SAAS,EAAC,yBAAyB,YAAE,QAAQ,GAAO,IAC1C,GACL,CACf,CAAC;AACJ,CAAC"}
|
package/dist/styles.css
CHANGED
|
@@ -1,97 +1,102 @@
|
|
|
1
|
-
.oc-payment-methods {
|
|
2
|
-
min-width: 0;
|
|
3
|
-
margin: 0;
|
|
4
|
-
padding: 0;
|
|
5
|
-
border: 0;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.oc-payment-methods > legend {
|
|
9
|
-
margin-bottom: 8px;
|
|
10
|
-
color: var(--oui-muted-strong, var(--oui-muted));
|
|
11
|
-
font-size: 14px;
|
|
12
|
-
font-weight: 700;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.oc-payment-methods-grid {
|
|
16
|
-
display: grid;
|
|
17
|
-
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
|
|
18
|
-
gap: 10px;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.oc-payment-method {
|
|
22
|
-
display: flex;
|
|
23
|
-
min-width: 0;
|
|
24
|
-
min-height: 68px;
|
|
25
|
-
align-items: center;
|
|
26
|
-
gap: 12px;
|
|
27
|
-
padding: 13px 14px;
|
|
28
|
-
border: 1px solid var(--oui-border);
|
|
29
|
-
border-radius: 10px;
|
|
30
|
-
background: var(--oui-panel);
|
|
31
|
-
color: var(--oui-text);
|
|
32
|
-
cursor: pointer;
|
|
33
|
-
font: inherit;
|
|
34
|
-
text-align: left;
|
|
35
|
-
transition: border-color 150ms ease, background 150ms ease;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.oc-payment-method:hover:not(:disabled) {
|
|
39
|
-
border-color: var(--oui-primary-border);
|
|
40
|
-
background: var(--oui-primary-surface);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.oc-payment-method[data-selected="true"] {
|
|
44
|
-
border-color: var(--oui-primary-base);
|
|
45
|
-
background: var(--oui-primary-surface);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.oc-payment-method:focus-visible {
|
|
49
|
-
outline: 2px solid var(--oui-primary-base);
|
|
50
|
-
outline-offset: 2px;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.oc-payment-method:disabled {
|
|
54
|
-
cursor: not-allowed;
|
|
55
|
-
opacity: 0.55;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.oc-payment-method-copy {
|
|
59
|
-
display: grid;
|
|
60
|
-
flex: 1 1 auto;
|
|
61
|
-
gap: 3px;
|
|
62
|
-
min-width: 0;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.oc-payment-method-copy strong {
|
|
66
|
-
overflow-wrap: anywhere;
|
|
67
|
-
font-size: 14px;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.oc-payment-method-copy > span {
|
|
71
|
-
color: var(--oui-muted);
|
|
72
|
-
font-size: 12px;
|
|
73
|
-
line-height: 1.35;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.oc-payment-method-badge {
|
|
77
|
-
color: var(--oui-primary-text);
|
|
78
|
-
font-size: 12px;
|
|
79
|
-
font-weight: 750;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.oc-payment-method-radio {
|
|
83
|
-
width: 16px;
|
|
84
|
-
height: 16px;
|
|
85
|
-
flex: 0 0 16px;
|
|
86
|
-
border: 1px solid var(--oui-border);
|
|
87
|
-
border-radius: 50%;
|
|
88
|
-
background: var(--oui-panel);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.oc-payment-method[data-selected="true"] .oc-payment-method-radio {
|
|
92
|
-
border: 5px solid var(--oui-primary-base);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.oc-checkout-dialog-body {
|
|
96
|
-
min-width: 0;
|
|
97
|
-
}
|
|
1
|
+
.oc-payment-methods {
|
|
2
|
+
min-width: 0;
|
|
3
|
+
margin: 0;
|
|
4
|
+
padding: 0;
|
|
5
|
+
border: 0;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.oc-payment-methods > legend {
|
|
9
|
+
margin-bottom: 8px;
|
|
10
|
+
color: var(--oui-muted-strong, var(--oui-muted));
|
|
11
|
+
font-size: 14px;
|
|
12
|
+
font-weight: 700;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.oc-payment-methods-grid {
|
|
16
|
+
display: grid;
|
|
17
|
+
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
|
|
18
|
+
gap: 10px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.oc-payment-method {
|
|
22
|
+
display: flex;
|
|
23
|
+
min-width: 0;
|
|
24
|
+
min-height: 68px;
|
|
25
|
+
align-items: center;
|
|
26
|
+
gap: 12px;
|
|
27
|
+
padding: 13px 14px;
|
|
28
|
+
border: 1px solid var(--oui-border);
|
|
29
|
+
border-radius: 10px;
|
|
30
|
+
background: var(--oui-panel);
|
|
31
|
+
color: var(--oui-text);
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
font: inherit;
|
|
34
|
+
text-align: left;
|
|
35
|
+
transition: border-color 150ms ease, background 150ms ease;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.oc-payment-method:hover:not(:disabled) {
|
|
39
|
+
border-color: var(--oui-primary-border);
|
|
40
|
+
background: var(--oui-primary-surface);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.oc-payment-method[data-selected="true"] {
|
|
44
|
+
border-color: var(--oui-primary-base);
|
|
45
|
+
background: var(--oui-primary-surface);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.oc-payment-method:focus-visible {
|
|
49
|
+
outline: 2px solid var(--oui-primary-base);
|
|
50
|
+
outline-offset: 2px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.oc-payment-method:disabled {
|
|
54
|
+
cursor: not-allowed;
|
|
55
|
+
opacity: 0.55;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.oc-payment-method-copy {
|
|
59
|
+
display: grid;
|
|
60
|
+
flex: 1 1 auto;
|
|
61
|
+
gap: 3px;
|
|
62
|
+
min-width: 0;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.oc-payment-method-copy strong {
|
|
66
|
+
overflow-wrap: anywhere;
|
|
67
|
+
font-size: 14px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.oc-payment-method-copy > span {
|
|
71
|
+
color: var(--oui-muted);
|
|
72
|
+
font-size: 12px;
|
|
73
|
+
line-height: 1.35;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.oc-payment-method-badge {
|
|
77
|
+
color: var(--oui-primary-text);
|
|
78
|
+
font-size: 12px;
|
|
79
|
+
font-weight: 750;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.oc-payment-method-radio {
|
|
83
|
+
width: 16px;
|
|
84
|
+
height: 16px;
|
|
85
|
+
flex: 0 0 16px;
|
|
86
|
+
border: 1px solid var(--oui-border);
|
|
87
|
+
border-radius: 50%;
|
|
88
|
+
background: var(--oui-panel);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.oc-payment-method[data-selected="true"] .oc-payment-method-radio {
|
|
92
|
+
border: 5px solid var(--oui-primary-base);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.oc-checkout-dialog-body {
|
|
96
|
+
min-width: 0;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.oc-checkout-dialog-header {display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
|
|
100
|
+
.oc-checkout-dialog-header .oui-modal-title {margin:0}
|
|
101
|
+
.oc-checkout-dialog-close {flex:none}
|
|
102
|
+
.oc-visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
|
package/package.json
CHANGED
|
@@ -1,33 +1,56 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@orcestr/commerce-ui",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "Provider-neutral checkout and payment method components for CommerceXL hosts.",
|
|
5
|
-
"author": "Artasov",
|
|
6
|
-
"license": "MPL-2.0",
|
|
7
|
-
"keywords": [
|
|
8
|
-
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
"
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
|
|
33
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "@orcestr/commerce-ui",
|
|
3
|
+
"version": "0.1.2",
|
|
4
|
+
"description": "Provider-neutral checkout and payment method components for CommerceXL hosts.",
|
|
5
|
+
"author": "Artasov",
|
|
6
|
+
"license": "MPL-2.0",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"checkout",
|
|
9
|
+
"commerce",
|
|
10
|
+
"commercexl",
|
|
11
|
+
"orcestr",
|
|
12
|
+
"payments",
|
|
13
|
+
"react"
|
|
14
|
+
],
|
|
15
|
+
"repository": {
|
|
16
|
+
"type": "git",
|
|
17
|
+
"url": "git+https://github.com/Artasov/commercexl.git",
|
|
18
|
+
"directory": "frontend/packages/ui"
|
|
19
|
+
},
|
|
20
|
+
"homepage": "https://github.com/Artasov/commercexl/tree/master/frontend/packages/ui#readme",
|
|
21
|
+
"bugs": {
|
|
22
|
+
"url": "https://github.com/Artasov/commercexl/issues"
|
|
23
|
+
},
|
|
24
|
+
"type": "module",
|
|
25
|
+
"sideEffects": [
|
|
26
|
+
"./dist/styles.css"
|
|
27
|
+
],
|
|
28
|
+
"files": [
|
|
29
|
+
"dist",
|
|
30
|
+
"LICENSE",
|
|
31
|
+
"NOTICE",
|
|
32
|
+
"README.md",
|
|
33
|
+
"README.ru.md",
|
|
34
|
+
"TRADEMARKS.md"
|
|
35
|
+
],
|
|
36
|
+
"exports": {
|
|
37
|
+
".": {
|
|
38
|
+
"types": "./dist/index.d.ts",
|
|
39
|
+
"import": "./dist/index.js"
|
|
40
|
+
},
|
|
41
|
+
"./styles.css": "./dist/styles.css"
|
|
42
|
+
},
|
|
43
|
+
"publishConfig": {
|
|
44
|
+
"access": "public"
|
|
45
|
+
},
|
|
46
|
+
"peerDependencies": {
|
|
47
|
+
"@orcestr/ui": "^0.7.4 || ^0.8.0",
|
|
48
|
+
"react": "^19.0.0"
|
|
49
|
+
},
|
|
50
|
+
"scripts": {
|
|
51
|
+
"typecheck": "tsc -b --pretty false",
|
|
52
|
+
"build": "tsc -b && node scripts/copy-styles.mjs",
|
|
53
|
+
"prepack": "node ../../scripts/sync-package-legal.mjs && npm run build",
|
|
54
|
+
"pack:dry-run": "npm pack --dry-run"
|
|
55
|
+
}
|
|
56
|
+
}
|