@blocklet/payment-react 1.14.22 → 1.14.23

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.
Files changed (35) hide show
  1. package/README.md +77 -0
  2. package/es/checkout/donate.d.ts +3 -2
  3. package/es/checkout/donate.js +5 -1
  4. package/es/checkout/form.d.ts +1 -1
  5. package/es/checkout/form.js +31 -7
  6. package/es/checkout/table.js +4 -1
  7. package/es/components/input.d.ts +3 -3
  8. package/es/libs/util.d.ts +6 -6
  9. package/es/payment/index.d.ts +3 -1
  10. package/es/payment/index.js +67 -51
  11. package/es/payment/product-donation.js +2 -1
  12. package/es/theme/index.d.ts +8 -3
  13. package/es/theme/index.js +222 -209
  14. package/es/types/index.d.ts +6 -1
  15. package/lib/checkout/donate.d.ts +3 -2
  16. package/lib/checkout/donate.js +10 -1
  17. package/lib/checkout/form.d.ts +1 -1
  18. package/lib/checkout/form.js +41 -17
  19. package/lib/checkout/table.js +9 -1
  20. package/lib/components/input.d.ts +3 -3
  21. package/lib/libs/util.d.ts +6 -6
  22. package/lib/payment/index.d.ts +3 -1
  23. package/lib/payment/index.js +31 -26
  24. package/lib/payment/product-donation.js +2 -5
  25. package/lib/theme/index.d.ts +8 -3
  26. package/lib/theme/index.js +211 -197
  27. package/lib/types/index.d.ts +6 -1
  28. package/package.json +3 -3
  29. package/src/checkout/donate.tsx +11 -3
  30. package/src/checkout/form.tsx +43 -18
  31. package/src/checkout/table.tsx +8 -1
  32. package/src/payment/index.tsx +66 -51
  33. package/src/payment/product-donation.tsx +2 -1
  34. package/src/theme/index.tsx +224 -203
  35. package/src/types/index.ts +6 -1
package/src/theme/index.tsx CHANGED
@@ -1,250 +1,271 @@
1
1
  import { type ThemeOptions, ThemeProvider, useTheme } from '@mui/material/styles';
2
2
  import { create } from '@arcblock/ux/lib/Theme';
3
- import { CssBaseline } from '@mui/material';
3
+ import { cloneDeep, merge } from 'lodash';
4
+ import { Box, CssBaseline } from '@mui/material';
4
5
  import React from 'react';
6
+
5
7
  import { typography } from './typography';
6
8
  import './index.css';
9
+ import { PaymentThemeOptions } from '../types';
7
10
 
8
11
  export { typography };
9
12
 
10
- export const themeOverrides: Partial<ThemeOptions> = {
11
- shape: {
12
- borderRadius: 8,
13
- },
14
- components: {
15
- MuiOutlinedInput: {
16
- styleOverrides: {
17
- root: {
18
- borderRadius: 'var(--radius-m, 8px)',
19
- backgroundColor: 'var(--backgrounds-bg-field)',
20
- '&.Mui-disabled': {
21
- backgroundColor: 'var(--backgrounds-bg-disabled)',
22
- },
23
- '.MuiOutlinedInput-notchedOutline': {
24
- borderColor: 'var(--stroke-border-base, #EFF1F5)',
25
- },
26
- '.MuiInputBase-input': {
27
- fontSize: '14px',
28
- minHeight: '1.65em',
29
- lineHeight: '1.65em',
13
+ PaymentThemeProvider.defaultProps = {
14
+ theme: {},
15
+ };
16
+
17
+ export function PaymentThemeProvider({
18
+ children,
19
+ theme: customTheme = {},
20
+ }: {
21
+ children: React.ReactNode;
22
+ theme?: PaymentThemeOptions;
23
+ }) {
24
+ // Add defaultProps for customTheme
25
+ const { sx: themeSX = {}, ...restTheme } = customTheme || {};
26
+ const parentTheme = useTheme();
27
+ const rootStyle = getComputedStyle(document.documentElement);
28
+
29
+ const themeOverrides: Partial<ThemeOptions> = {
30
+ shape: {
31
+ borderRadius: 8,
32
+ },
33
+ components: {
34
+ MuiOutlinedInput: {
35
+ styleOverrides: {
36
+ root: {
37
+ borderRadius: 'var(--radius-m, 8px)',
38
+ backgroundColor: 'var(--backgrounds-bg-field)',
39
+ '&.Mui-disabled': {
40
+ backgroundColor: 'var(--backgrounds-bg-disabled)',
41
+ },
42
+ '.MuiOutlinedInput-notchedOutline': {
43
+ borderColor: 'var(--stroke-border-base, #EFF1F5)',
44
+ },
45
+ '.MuiInputBase-input': {
46
+ fontSize: '14px',
47
+ minHeight: '1.65em',
48
+ lineHeight: '1.65em',
49
+ },
30
50
  },
31
51
  },
32
52
  },
33
- },
34
- MuiButton: {
35
- defaultProps: {
36
- size: 'small',
37
- },
38
- styleOverrides: {
39
- root: {
40
- fontSize: '1rem',
41
- fontWeight: 500,
42
- textTransform: 'none',
43
- },
44
- containedPrimary: {
45
- backgroundColor: 'var(--buttons-button-inverted, #010714)',
46
- color: 'var(--foregrounds-fg-on-color, #fff)',
47
- '&:hover': {
48
- backgroundColor: 'var(--buttons-button-inverted-hover, #1f2937)',
49
- },
50
- },
51
- outlinedPrimary: {
52
- color: 'var(--foregrounds-fg-base, #010714)',
53
- borderColor: 'var(--stroke-button-secondary-border, #E5E7EB)',
54
- '&:hover': {
55
- backgroundColor: 'var(--buttons-button-neutral-hover, #F3F4F6)',
53
+ MuiButton: {
54
+ defaultProps: {
55
+ size: 'small',
56
+ },
57
+ styleOverrides: {
58
+ root: {
59
+ fontSize: '1rem',
60
+ fontWeight: 500,
61
+ textTransform: 'none',
62
+ },
63
+ containedPrimary: {
64
+ backgroundColor: 'var(--buttons-button-inverted, #010714)',
65
+ color: 'var(--foregrounds-fg-on-color, #fff)',
66
+ '&:hover': {
67
+ backgroundColor: 'var(--buttons-button-inverted-hover, #1f2937)',
68
+ },
69
+ },
70
+ outlinedPrimary: {
71
+ color: 'var(--foregrounds-fg-base, #010714)',
56
72
  borderColor: 'var(--stroke-button-secondary-border, #E5E7EB)',
73
+ '&:hover': {
74
+ backgroundColor: 'var(--buttons-button-neutral-hover, #F3F4F6)',
75
+ borderColor: 'var(--stroke-button-secondary-border, #E5E7EB)',
76
+ },
77
+ },
78
+ sizeSmall: {
79
+ height: 32,
57
80
  },
58
- },
59
- sizeSmall: {
60
- height: 32,
61
81
  },
62
82
  },
63
- },
64
- MuiIconButton: {
65
- defaultProps: {
66
- size: 'small',
67
- },
68
- styleOverrides: {
69
- root: {
70
- textTransform: 'none',
83
+ MuiIconButton: {
84
+ defaultProps: {
85
+ size: 'small',
71
86
  },
72
- colorPrimary: {
73
- backgroundColor: '#fff',
87
+ styleOverrides: {
88
+ root: {
89
+ textTransform: 'none',
90
+ },
91
+ colorPrimary: {
92
+ backgroundColor: '#fff',
93
+ },
74
94
  },
75
95
  },
76
- },
77
- MuiToggleButton: {
78
- styleOverrides: {
79
- root: {
80
- textTransform: 'none',
96
+ MuiToggleButton: {
97
+ styleOverrides: {
98
+ root: {
99
+ textTransform: 'none',
100
+ },
81
101
  },
82
102
  },
83
- },
84
- MuiTab: {
85
- styleOverrides: {
86
- root: {
87
- textTransform: 'none',
103
+ MuiTab: {
104
+ styleOverrides: {
105
+ root: {
106
+ textTransform: 'none',
107
+ },
88
108
  },
89
109
  },
90
- },
91
- MuiTooltip: {
92
- defaultProps: {
93
- enterTouchDelay: 3000,
94
- leaveTouchDelay: 100,
95
- },
96
- },
97
- MuiPopover: {
98
- styleOverrides: {
99
- paper: ({ theme }) => ({
100
- border: `1px solid ${theme.palette.divider}`,
101
- boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
102
- }),
110
+ MuiTooltip: {
111
+ defaultProps: {
112
+ enterTouchDelay: 3000,
113
+ leaveTouchDelay: 100,
114
+ },
103
115
  },
104
- },
105
- MuiCssBaseline: {
106
- styleOverrides: {
107
- '.base-card': {
108
- padding: '20px',
109
- borderRadius: 'var(--radius-l)',
110
- background: 'var(--backgrounds-bg-base)',
111
- boxShadow:
112
- '0px 0px 0px 1px var(--shadows-card-rest-1, rgba(2, 7, 19, 0.08)), 0px 1px 2px -1px var(--shadows-card-rest-2, rgba(2, 7, 19, 0.08)), 0px 2px 4px 0px var(--shadows-card-rest-3, rgba(2, 7, 19, 0.04))',
113
- },
114
- '.base-label': {
115
- color: 'var(--foregrounds-fg-base, #010714)',
116
- fontSize: '16px',
117
- fontWeight: '500',
118
- lineHeight: '24px',
119
- },
120
- a: {
121
- textDecoration: 'none !important',
116
+ MuiPopover: {
117
+ styleOverrides: {
118
+ paper: ({ theme }) => ({
119
+ border: `1px solid ${theme.palette.divider}`,
120
+ boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
121
+ }),
122
122
  },
123
123
  },
124
- },
125
- // MuiButtonBase: {
126
- // styleOverrides: {
127
-
128
- // }
129
- // },
130
- MuiRadio: {
131
- styleOverrides: {
132
- root: {
133
- color: 'var(--stroke-border-base, #EFF1F5)',
134
- '&:hover': {
135
- background: 'none',
124
+ MuiCssBaseline: {
125
+ styleOverrides: {
126
+ '.base-card': {
127
+ padding: '20px',
128
+ borderRadius: 'var(--radius-l)',
129
+ background: 'var(--backgrounds-bg-base)',
130
+ boxShadow:
131
+ '0px 0px 0px 1px var(--shadows-card-rest-1, rgba(2, 7, 19, 0.08)), 0px 1px 2px -1px var(--shadows-card-rest-2, rgba(2, 7, 19, 0.08)), 0px 2px 4px 0px var(--shadows-card-rest-3, rgba(2, 7, 19, 0.04))',
132
+ },
133
+ '.base-label': {
134
+ color: 'var(--foregrounds-fg-base, #010714)',
135
+ fontSize: '16px',
136
+ fontWeight: '500',
137
+ lineHeight: '24px',
136
138
  },
137
- '&.Mui-checked': {
138
- color: 'var(--foregrounds-fg-interactive, #0086FF)',
139
+ a: {
140
+ textDecoration: 'none !important',
139
141
  },
140
142
  },
141
143
  },
142
- },
143
- MuiCheckbox: {
144
- styleOverrides: {
145
- root: {
146
- color: 'var(--backgrounds-bg-interactive, #0086FF)',
147
- '&.Mui-checked': {
148
- color: 'var(--foregrounds-fg-interactive, #0086FF)',
144
+ // MuiButtonBase: {
145
+ // styleOverrides: {
146
+
147
+ // }
148
+ // },
149
+ MuiRadio: {
150
+ styleOverrides: {
151
+ root: {
152
+ color: 'var(--stroke-border-base, #EFF1F5)',
153
+ '&:hover': {
154
+ background: 'none',
155
+ },
156
+ '&.Mui-checked': {
157
+ color: 'var(--foregrounds-fg-interactive, #0086FF)',
158
+ },
149
159
  },
150
160
  },
151
161
  },
152
- },
153
- MuiDivider: {
154
- styleOverrides: {
155
- root: {
156
- borderColor: 'var(--stroke-border-base, #EFF1F5)',
162
+ MuiCheckbox: {
163
+ styleOverrides: {
164
+ root: {
165
+ color: 'var(--backgrounds-bg-interactive, #0086FF)',
166
+ '&.Mui-checked': {
167
+ color: 'var(--foregrounds-fg-interactive, #0086FF)',
168
+ },
169
+ },
157
170
  },
158
171
  },
159
- },
160
- MuiInputBase: {
161
- defaultProps: {
162
- size: 'small',
163
- },
164
- styleOverrides: {
165
- root: () => ({
166
- fontSize: '0.875rem',
167
- backgroundColor: 'var(--backgrounds-bg-field, #F9FAFB)',
168
- }),
172
+ MuiDivider: {
173
+ styleOverrides: {
174
+ root: {
175
+ borderColor: 'var(--stroke-border-base, #EFF1F5)',
176
+ },
177
+ },
169
178
  },
170
- },
171
- MuiInputLabel: {
172
- defaultProps: {
173
- size: 'small',
179
+ MuiInputBase: {
180
+ defaultProps: {
181
+ size: 'small',
182
+ },
183
+ styleOverrides: {
184
+ root: () => ({
185
+ fontSize: '0.875rem',
186
+ backgroundColor: 'var(--backgrounds-bg-field, #F9FAFB)',
187
+ }),
188
+ },
174
189
  },
175
- styleOverrides: {
176
- root: () => ({
177
- fontSize: '0.875rem',
178
- }),
190
+ MuiInputLabel: {
191
+ defaultProps: {
192
+ size: 'small',
193
+ },
194
+ styleOverrides: {
195
+ root: () => ({
196
+ fontSize: '0.875rem',
197
+ }),
198
+ },
179
199
  },
180
- },
181
- MuiChip: {
182
- styleOverrides: {
183
- root: {
184
- borderRadius: 'var(--radius-S, 4px)',
185
- border: '1px solid transparent',
186
- '&.MuiChip-filledSuccess': {
187
- color: 'var(--tags-tag-green-text, #007C52)',
188
- backgroundColor: 'var(--tags-tag-green-bg, #B7FEE3)',
189
- borderColor: 'var(--tags-tag-green-border, #63F9CB)',
190
- },
191
- '&.MuiChip-filledDefault': {
192
- color: 'var(--tags-tag-neutral-text, #007C52)',
193
- backgroundColor: 'var(--tags-tag-neutral-bg, #B7FEE3)',
194
- borderColor: 'var(--tags-tag-neutral-border, #E5E7EB)',
195
- },
196
- '&.MuiChip-filledSecondary': {
197
- color: 'var(--tags-tag-purple-text, #8118EB)',
198
- backgroundColor: ' var(--tags-tag-purple-bg, #EFE9FF)',
199
- borderColor: 'var(--tags-tag-purple-border, #E1D6FF)',
200
- },
201
- '&.MuiChip-filledError': {
202
- color: 'var(--tags-tag-red-text, #E40031)',
203
- backgroundColor: 'var(--tags-tag-red-bg, #FFE2E6)',
204
- borderColor: 'var(--tags-tag-red-border, #FFC8D3)',
205
- },
206
- '&.MuiChip-filledWarning': {
207
- color: 'var(--tags-tag-orange-text, #D24000)',
208
- backgroundColor: 'var(--tags-tag-orange-bg, #FFF4BC)',
209
- borderColor: 'var(--tags-tag-orange-border, #FFE467)',
210
- },
211
- '&.MuiChip-filledPrimary,&.MuiChip-filledInfo': {
212
- color: 'var(--tags-tag-blue-text, #0051E9)',
213
- backgroundColor: 'var(--tags-tag-blue-bg, #D2ECFF)',
214
- borderColor: 'var(--tags-tag-blue-border, #AFDDFF)',
200
+ MuiChip: {
201
+ styleOverrides: {
202
+ root: {
203
+ borderRadius: 'var(--radius-S, 4px)',
204
+ border: '1px solid transparent',
205
+ '&.MuiChip-filledSuccess': {
206
+ color: 'var(--tags-tag-green-text, #007C52)',
207
+ backgroundColor: 'var(--tags-tag-green-bg, #B7FEE3)',
208
+ borderColor: 'var(--tags-tag-green-border, #63F9CB)',
209
+ },
210
+ '&.MuiChip-filledDefault': {
211
+ color: 'var(--tags-tag-neutral-text, #007C52)',
212
+ backgroundColor: 'var(--tags-tag-neutral-bg, #B7FEE3)',
213
+ borderColor: 'var(--tags-tag-neutral-border, #E5E7EB)',
214
+ },
215
+ '&.MuiChip-filledSecondary': {
216
+ color: 'var(--tags-tag-purple-text, #8118EB)',
217
+ backgroundColor: ' var(--tags-tag-purple-bg, #EFE9FF)',
218
+ borderColor: 'var(--tags-tag-purple-border, #E1D6FF)',
219
+ },
220
+ '&.MuiChip-filledError': {
221
+ color: 'var(--tags-tag-red-text, #E40031)',
222
+ backgroundColor: 'var(--tags-tag-red-bg, #FFE2E6)',
223
+ borderColor: 'var(--tags-tag-red-border, #FFC8D3)',
224
+ },
225
+ '&.MuiChip-filledWarning': {
226
+ color: 'var(--tags-tag-orange-text, #D24000)',
227
+ backgroundColor: 'var(--tags-tag-orange-bg, #FFF4BC)',
228
+ borderColor: 'var(--tags-tag-orange-border, #FFE467)',
229
+ },
230
+ '&.MuiChip-filledPrimary,&.MuiChip-filledInfo': {
231
+ color: 'var(--tags-tag-blue-text, #0051E9)',
232
+ backgroundColor: 'var(--tags-tag-blue-bg, #D2ECFF)',
233
+ borderColor: 'var(--tags-tag-blue-border, #AFDDFF)',
234
+ },
215
235
  },
216
236
  },
217
237
  },
218
238
  },
219
- },
220
- };
239
+ };
240
+ const mergeTheme = create(
241
+ merge(
242
+ cloneDeep({
243
+ ...parentTheme,
244
+ typography,
245
+ palette: {
246
+ primary: {
247
+ main: rootStyle.getPropertyValue('--foregrounds-fg-base').trim() || '#030712',
248
+ },
249
+ text: {
250
+ primary: rootStyle.getPropertyValue('--foregrounds-fg-base').trim() || '#030712',
251
+ secondary: rootStyle.getPropertyValue('--foregrounds-fg-subtle').trim() || '#4b5563',
252
+ lighter: rootStyle.getPropertyValue('--foregrounds-fg-muted').trim() || '#9ca3af',
253
+ link: rootStyle.getPropertyValue('--foregrounds-fg-interactive').trim() || '#0086FF',
254
+ },
255
+ error: {
256
+ main: rootStyle.getPropertyValue('--foregrounds-fg-danger').trim() || '#FF003B',
257
+ },
258
+ },
259
+ ...themeOverrides,
260
+ }),
261
+ restTheme
262
+ )
263
+ );
221
264
 
222
- export function PaymentThemeProvider({ children }: { children: React.ReactNode }) {
223
- const theme = useTheme();
224
- const rootStyle = getComputedStyle(document.documentElement);
225
- const merged = create({
226
- ...theme,
227
- typography,
228
- palette: {
229
- primary: {
230
- main: rootStyle.getPropertyValue('--foregrounds-fg-base').trim() || '#030712',
231
- },
232
- text: {
233
- primary: rootStyle.getPropertyValue('--foregrounds-fg-base').trim() || '#030712',
234
- secondary: rootStyle.getPropertyValue('--foregrounds-fg-subtle').trim() || '#4b5563',
235
- lighter: rootStyle.getPropertyValue('--foregrounds-fg-muted').trim() || '#9ca3af',
236
- link: rootStyle.getPropertyValue('--foregrounds-fg-interactive').trim() || '#0086FF',
237
- },
238
- error: {
239
- main: rootStyle.getPropertyValue('--foregrounds-fg-danger').trim() || '#FF003B',
240
- },
241
- },
242
- ...themeOverrides,
243
- });
244
265
  return (
245
- <ThemeProvider theme={merged}>
266
+ <ThemeProvider theme={mergeTheme}>
246
267
  <CssBaseline />
247
- {children}
268
+ <Box sx={{ height: '100%', ...themeSX }}>{children}</Box>
248
269
  </ThemeProvider>
249
270
  );
250
271
  }
package/src/types/index.ts CHANGED
@@ -6,6 +6,7 @@ import type {
6
6
  TPaymentLink,
7
7
  TPaymentMethodExpanded,
8
8
  } from '@blocklet/payment-types';
9
+ import { SxProps, ThemeOptions } from '@mui/material';
9
10
  import { LiteralUnion } from 'type-fest';
10
11
 
11
12
  export type CheckoutContext = {
@@ -16,6 +17,7 @@ export type CheckoutContext = {
16
17
  customer?: TCustomer;
17
18
  mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
18
19
  action?: string;
20
+ showCheckoutSummary?: boolean;
19
21
  };
20
22
 
21
23
  export type CheckoutFormData = {
@@ -34,12 +36,15 @@ export type CheckoutFormData = {
34
36
  };
35
37
  };
36
38
 
39
+ export type PaymentThemeOptions = ThemeOptions & {
40
+ sx?: SxProps;
41
+ };
37
42
  export type CheckoutProps = Partial<CheckoutCallbacks> & {
38
43
  id: string;
39
44
  extraParams?: Record<string, any>;
40
45
  action?: string;
41
46
  mode?: LiteralUnion<'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal', string>;
42
- customTheme?: boolean;
47
+ theme?: 'default' | 'inherit' | PaymentThemeOptions;
43
48
  };
44
49
 
45
50
  export type CheckoutCallbacks = {