@blocklet/payment-react 1.13.123 → 1.13.124
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/es/components/pricing-table.js +66 -64
- package/es/contexts/payment.d.ts +4 -2
- package/es/payment/form/index.js +2 -2
- package/lib/contexts/payment.d.ts +4 -2
- package/lib/payment/form/index.js +2 -2
- package/package.json +3 -3
- package/src/components/pricing-table.tsx +78 -76
- package/src/contexts/payment.tsx +2 -2
- package/src/payment/form/index.tsx +5 -3
|
@@ -98,73 +98,75 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
|
|
|
98
98
|
direction: "row",
|
|
99
99
|
gap: { xs: 3, sm: 5, md: mode === "checkout" ? 10 : 5 },
|
|
100
100
|
justifyContent: alignItems === "center" ? "center" : "flex-start",
|
|
101
|
-
children: grouped[state.interval]?.map(
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
101
|
+
children: grouped[state.interval]?.map(
|
|
102
|
+
(x) => {
|
|
103
|
+
let action = x.subscription_data?.trial_period_days ? t("payment.checkout.try") : t("payment.checkout.subscription");
|
|
104
|
+
if (mode === "select") {
|
|
105
|
+
action = x.is_selected ? t("payment.checkout.selected") : t("payment.checkout.select");
|
|
106
|
+
}
|
|
107
|
+
return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(
|
|
108
|
+
Stack,
|
|
109
|
+
{
|
|
110
|
+
padding: 4,
|
|
111
|
+
spacing: 2,
|
|
112
|
+
direction: "column",
|
|
113
|
+
alignItems: "center",
|
|
114
|
+
sx: {
|
|
115
|
+
width: 320,
|
|
116
|
+
cursor: "pointer",
|
|
117
|
+
borderWidth: "1px",
|
|
118
|
+
borderStyle: "solid",
|
|
119
|
+
borderColor: mode === "select" && x.is_selected ? "primary.main" : "#eee",
|
|
120
|
+
borderRadius: 1,
|
|
121
|
+
transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
|
|
122
|
+
boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)",
|
|
123
|
+
"&:hover": {
|
|
124
|
+
borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
|
|
125
|
+
boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
children: [
|
|
129
|
+
/* @__PURE__ */ jsxs(Box, { textAlign: "center", children: [
|
|
130
|
+
/* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
|
|
131
|
+
/* @__PURE__ */ jsx(Typography, { variant: "h5", color: "text.primary", fontWeight: 600, children: x.product.name }),
|
|
132
|
+
x.is_highlight && /* @__PURE__ */ jsx(Chip, { label: x.highlight_text, color: "default", size: "small" })
|
|
133
|
+
] }),
|
|
134
|
+
/* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: x.product.description })
|
|
135
|
+
] }),
|
|
129
136
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
|
|
130
|
-
/* @__PURE__ */ jsx(
|
|
131
|
-
|
|
137
|
+
/* @__PURE__ */ jsx(Amount, { amount: formatPriceAmount(x.price, table.currency, x.product.unit_label) }),
|
|
138
|
+
/* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", children: [
|
|
139
|
+
/* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: "0.8rem", children: t("payment.checkout.per") }),
|
|
140
|
+
/* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: "0.8rem", children: formatRecurring(x.price.recurring, false, "", locale) })
|
|
141
|
+
] })
|
|
132
142
|
] }),
|
|
133
|
-
/* @__PURE__ */ jsx(
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
143
|
+
/* @__PURE__ */ jsx(
|
|
144
|
+
LoadingButton,
|
|
145
|
+
{
|
|
146
|
+
fullWidth: true,
|
|
147
|
+
size: "large",
|
|
148
|
+
loadingPosition: "end",
|
|
149
|
+
variant: x.is_highlight || x.is_selected ? "contained" : "outlined",
|
|
150
|
+
color: x.is_highlight || x.is_selected ? "primary" : "info",
|
|
151
|
+
sx: { fontSize: "1.2rem" },
|
|
152
|
+
loading: state.loading === x.price_id,
|
|
153
|
+
disabled: x.is_disabled,
|
|
154
|
+
onClick: () => handleSelect(x.price_id),
|
|
155
|
+
children: action
|
|
156
|
+
}
|
|
157
|
+
),
|
|
158
|
+
x.product.features.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
|
|
159
|
+
/* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.include") }),
|
|
160
|
+
/* @__PURE__ */ jsx(List, { dense: true, children: x.product.features.map((f) => /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, disablePadding: true, children: [
|
|
161
|
+
/* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 25 }, children: /* @__PURE__ */ jsx(CheckOutlined, { color: "success", fontSize: "small" }) }),
|
|
162
|
+
/* @__PURE__ */ jsx(ListItemText, { primary: f.name })
|
|
163
|
+
] }, f.name)) })
|
|
140
164
|
] })
|
|
141
|
-
]
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
size: "large",
|
|
147
|
-
loadingPosition: "end",
|
|
148
|
-
variant: x.is_highlight || x.is_selected ? "contained" : "outlined",
|
|
149
|
-
color: x.is_highlight || x.is_selected ? "primary" : "info",
|
|
150
|
-
sx: { fontSize: "1.2rem" },
|
|
151
|
-
loading: state.loading === x.price_id,
|
|
152
|
-
disabled: x.is_disabled,
|
|
153
|
-
onClick: () => handleSelect(x.price_id),
|
|
154
|
-
children: action
|
|
155
|
-
}
|
|
156
|
-
),
|
|
157
|
-
x.product.features.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
|
|
158
|
-
/* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.include") }),
|
|
159
|
-
/* @__PURE__ */ jsx(List, { dense: true, children: x.product.features.map((f) => /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, disablePadding: true, children: [
|
|
160
|
-
/* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 25 }, children: /* @__PURE__ */ jsx(CheckOutlined, { color: "success", fontSize: "small" }) }),
|
|
161
|
-
/* @__PURE__ */ jsx(ListItemText, { primary: f.name })
|
|
162
|
-
] }, f.name)) })
|
|
163
|
-
] })
|
|
164
|
-
]
|
|
165
|
-
}
|
|
166
|
-
) }, x.price_id);
|
|
167
|
-
})
|
|
165
|
+
]
|
|
166
|
+
}
|
|
167
|
+
) }, x.price_id);
|
|
168
|
+
}
|
|
169
|
+
)
|
|
168
170
|
}
|
|
169
171
|
)
|
|
170
172
|
]
|
package/es/contexts/payment.d.ts
CHANGED
|
@@ -7,8 +7,10 @@ export interface Settings {
|
|
|
7
7
|
}
|
|
8
8
|
export type PaymentContextType = {
|
|
9
9
|
livemode: boolean;
|
|
10
|
-
session:
|
|
11
|
-
|
|
10
|
+
session: import('@arcblock/did-connect/lib/types').SessionContext['session'] & {
|
|
11
|
+
user: any;
|
|
12
|
+
};
|
|
13
|
+
connect: import('@arcblock/did-connect/lib/types').SessionContext['connectApi'];
|
|
12
14
|
prefix: string;
|
|
13
15
|
settings: Settings;
|
|
14
16
|
refresh: () => void;
|
package/es/payment/form/index.js
CHANGED
|
@@ -169,9 +169,9 @@ export default function PaymentForm({
|
|
|
169
169
|
await handleConnected();
|
|
170
170
|
} else {
|
|
171
171
|
connect.open({
|
|
172
|
+
containerEl: void 0,
|
|
172
173
|
action: checkoutSession.mode,
|
|
173
|
-
prefix: joinURL(getPrefix(), "/api/did"),
|
|
174
|
-
timeout: 5 * 60 * 1e3,
|
|
174
|
+
prefix: joinURL(window.location.origin, getPrefix(), "/api/did"),
|
|
175
175
|
extraParams: { checkoutSessionId: checkoutSession.id },
|
|
176
176
|
onSuccess: async () => {
|
|
177
177
|
connect.close();
|
|
@@ -7,8 +7,10 @@ export interface Settings {
|
|
|
7
7
|
}
|
|
8
8
|
export type PaymentContextType = {
|
|
9
9
|
livemode: boolean;
|
|
10
|
-
session:
|
|
11
|
-
|
|
10
|
+
session: import('@arcblock/did-connect/lib/types').SessionContext['session'] & {
|
|
11
|
+
user: any;
|
|
12
|
+
};
|
|
13
|
+
connect: import('@arcblock/did-connect/lib/types').SessionContext['connectApi'];
|
|
12
14
|
prefix: string;
|
|
13
15
|
settings: Settings;
|
|
14
16
|
refresh: () => void;
|
|
@@ -204,9 +204,9 @@ function PaymentForm({
|
|
|
204
204
|
await handleConnected();
|
|
205
205
|
} else {
|
|
206
206
|
connect.open({
|
|
207
|
+
containerEl: void 0,
|
|
207
208
|
action: checkoutSession.mode,
|
|
208
|
-
prefix: (0, _ufo.joinURL)((0, _util.getPrefix)(), "/api/did"),
|
|
209
|
-
timeout: 5 * 60 * 1e3,
|
|
209
|
+
prefix: (0, _ufo.joinURL)(window.location.origin, (0, _util.getPrefix)(), "/api/did"),
|
|
210
210
|
extraParams: {
|
|
211
211
|
checkoutSessionId: checkoutSession.id
|
|
212
212
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/payment-react",
|
|
3
|
-
"version": "1.13.
|
|
3
|
+
"version": "1.13.124",
|
|
4
4
|
"description": "Reusable react components for payment kit v2",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"@babel/core": "^7.19.3",
|
|
90
90
|
"@babel/preset-env": "^7.19.3",
|
|
91
91
|
"@babel/preset-react": "^7.18.6",
|
|
92
|
-
"@blocklet/payment-types": "1.13.
|
|
92
|
+
"@blocklet/payment-types": "1.13.124",
|
|
93
93
|
"@storybook/addon-essentials": "^7.6.10",
|
|
94
94
|
"@storybook/addon-interactions": "^7.6.10",
|
|
95
95
|
"@storybook/addon-links": "^7.6.10",
|
|
@@ -118,5 +118,5 @@
|
|
|
118
118
|
"vite-plugin-babel": "^1.2.0",
|
|
119
119
|
"vite-plugin-node-polyfills": "^0.19.0"
|
|
120
120
|
},
|
|
121
|
-
"gitHead": "
|
|
121
|
+
"gitHead": "aa43e00accb681c724d88facc2dd5b61519e17ef"
|
|
122
122
|
}
|
|
@@ -119,86 +119,88 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
|
|
|
119
119
|
direction="row"
|
|
120
120
|
gap={{ xs: 3, sm: 5, md: mode === 'checkout' ? 10 : 5 }}
|
|
121
121
|
justifyContent={alignItems === 'center' ? 'center' : 'flex-start'}>
|
|
122
|
-
{grouped[state.interval as string]?.map(
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
122
|
+
{grouped[state.interval as string]?.map(
|
|
123
|
+
(x: TPricingTableItem & { is_selected?: boolean; is_disabled?: boolean }) => {
|
|
124
|
+
let action = x.subscription_data?.trial_period_days
|
|
125
|
+
? t('payment.checkout.try')
|
|
126
|
+
: t('payment.checkout.subscription');
|
|
127
|
+
if (mode === 'select') {
|
|
128
|
+
action = x.is_selected ? t('payment.checkout.selected') : t('payment.checkout.select');
|
|
129
|
+
}
|
|
129
130
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
131
|
+
return (
|
|
132
|
+
<Fade key={x.price_id} in>
|
|
133
|
+
<Stack
|
|
134
|
+
padding={4}
|
|
135
|
+
spacing={2}
|
|
136
|
+
direction="column"
|
|
137
|
+
alignItems="center"
|
|
138
|
+
sx={{
|
|
139
|
+
width: 320,
|
|
140
|
+
cursor: 'pointer',
|
|
141
|
+
borderWidth: '1px',
|
|
142
|
+
borderStyle: 'solid',
|
|
143
|
+
borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#eee',
|
|
144
|
+
borderRadius: 1,
|
|
145
|
+
transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
|
|
146
|
+
boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',
|
|
147
|
+
'&:hover': {
|
|
148
|
+
borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#ddd',
|
|
149
|
+
boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
|
|
150
|
+
},
|
|
151
|
+
}}>
|
|
152
|
+
<Box textAlign="center">
|
|
153
|
+
<Stack direction="row" alignItems="center" spacing={1}>
|
|
154
|
+
<Typography variant="h5" color="text.primary" fontWeight={600}>
|
|
155
|
+
{x.product.name}
|
|
156
|
+
</Typography>
|
|
157
|
+
{x.is_highlight && <Chip label={x.highlight_text} color="default" size="small" />}
|
|
158
|
+
</Stack>
|
|
159
|
+
<Typography color="text.secondary">{x.product.description}</Typography>
|
|
160
|
+
</Box>
|
|
152
161
|
<Stack direction="row" alignItems="center" spacing={1}>
|
|
153
|
-
<
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
<Stack direction="column" alignItems="flex-start">
|
|
163
|
-
<Typography component="span" color="text.secondary" fontSize="0.8rem">
|
|
164
|
-
{t('payment.checkout.per')}
|
|
165
|
-
</Typography>
|
|
166
|
-
<Typography component="span" color="text.secondary" fontSize="0.8rem">
|
|
167
|
-
{formatRecurring(x.price.recurring as PriceRecurring, false, '', locale)}
|
|
168
|
-
</Typography>
|
|
162
|
+
<Amount amount={formatPriceAmount(x.price, table.currency, x.product.unit_label)} />
|
|
163
|
+
<Stack direction="column" alignItems="flex-start">
|
|
164
|
+
<Typography component="span" color="text.secondary" fontSize="0.8rem">
|
|
165
|
+
{t('payment.checkout.per')}
|
|
166
|
+
</Typography>
|
|
167
|
+
<Typography component="span" color="text.secondary" fontSize="0.8rem">
|
|
168
|
+
{formatRecurring(x.price.recurring as PriceRecurring, false, '', locale)}
|
|
169
|
+
</Typography>
|
|
170
|
+
</Stack>
|
|
169
171
|
</Stack>
|
|
172
|
+
<LoadingButton
|
|
173
|
+
fullWidth
|
|
174
|
+
size="large"
|
|
175
|
+
loadingPosition="end"
|
|
176
|
+
variant={x.is_highlight || x.is_selected ? 'contained' : 'outlined'}
|
|
177
|
+
color={x.is_highlight || x.is_selected ? 'primary' : 'info'}
|
|
178
|
+
sx={{ fontSize: '1.2rem' }}
|
|
179
|
+
loading={state.loading === x.price_id}
|
|
180
|
+
disabled={x.is_disabled}
|
|
181
|
+
onClick={() => handleSelect(x.price_id)}>
|
|
182
|
+
{action}
|
|
183
|
+
</LoadingButton>
|
|
184
|
+
{x.product.features.length > 0 && (
|
|
185
|
+
<Box>
|
|
186
|
+
<Typography>{t('payment.checkout.include')}</Typography>
|
|
187
|
+
<List dense>
|
|
188
|
+
{x.product.features.map((f: any) => (
|
|
189
|
+
<ListItem key={f.name} disableGutters disablePadding>
|
|
190
|
+
<ListItemIcon sx={{ minWidth: 25 }}>
|
|
191
|
+
<CheckOutlined color="success" fontSize="small" />
|
|
192
|
+
</ListItemIcon>
|
|
193
|
+
<ListItemText primary={f.name} />
|
|
194
|
+
</ListItem>
|
|
195
|
+
))}
|
|
196
|
+
</List>
|
|
197
|
+
</Box>
|
|
198
|
+
)}
|
|
170
199
|
</Stack>
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
variant={x.is_highlight || x.is_selected ? 'contained' : 'outlined'}
|
|
176
|
-
color={x.is_highlight || x.is_selected ? 'primary' : 'info'}
|
|
177
|
-
sx={{ fontSize: '1.2rem' }}
|
|
178
|
-
loading={state.loading === x.price_id}
|
|
179
|
-
disabled={x.is_disabled}
|
|
180
|
-
onClick={() => handleSelect(x.price_id)}>
|
|
181
|
-
{action}
|
|
182
|
-
</LoadingButton>
|
|
183
|
-
{x.product.features.length > 0 && (
|
|
184
|
-
<Box>
|
|
185
|
-
<Typography>{t('payment.checkout.include')}</Typography>
|
|
186
|
-
<List dense>
|
|
187
|
-
{x.product.features.map((f: any) => (
|
|
188
|
-
<ListItem key={f.name} disableGutters disablePadding>
|
|
189
|
-
<ListItemIcon sx={{ minWidth: 25 }}>
|
|
190
|
-
<CheckOutlined color="success" fontSize="small" />
|
|
191
|
-
</ListItemIcon>
|
|
192
|
-
<ListItemText primary={f.name} />
|
|
193
|
-
</ListItem>
|
|
194
|
-
))}
|
|
195
|
-
</List>
|
|
196
|
-
</Box>
|
|
197
|
-
)}
|
|
198
|
-
</Stack>
|
|
199
|
-
</Fade>
|
|
200
|
-
);
|
|
201
|
-
})}
|
|
200
|
+
</Fade>
|
|
201
|
+
);
|
|
202
|
+
}
|
|
203
|
+
)}
|
|
202
204
|
</Stack>
|
|
203
205
|
</Stack>
|
|
204
206
|
);
|
package/src/contexts/payment.tsx
CHANGED
|
@@ -16,8 +16,8 @@ export interface Settings {
|
|
|
16
16
|
|
|
17
17
|
export type PaymentContextType = {
|
|
18
18
|
livemode: boolean;
|
|
19
|
-
session: any;
|
|
20
|
-
connect:
|
|
19
|
+
session: import('@arcblock/did-connect/lib/types').SessionContext['session'] & { user: any };
|
|
20
|
+
connect: import('@arcblock/did-connect/lib/types').SessionContext['connectApi'];
|
|
21
21
|
prefix: string;
|
|
22
22
|
settings: Settings;
|
|
23
23
|
refresh: () => void;
|
|
@@ -225,10 +225,11 @@ export default function PaymentForm({
|
|
|
225
225
|
if (result.data.balance?.sufficient || result.data.delegation?.sufficient) {
|
|
226
226
|
await handleConnected();
|
|
227
227
|
} else {
|
|
228
|
+
// @FIXME: 需要考虑如何正确地适配前端组件的使用 @wangshijun
|
|
228
229
|
connect.open({
|
|
230
|
+
containerEl: undefined as unknown as Element,
|
|
229
231
|
action: checkoutSession.mode,
|
|
230
|
-
prefix: joinURL(getPrefix(), '/api/did'),
|
|
231
|
-
timeout: 5 * 60 * 1000,
|
|
232
|
+
prefix: joinURL(window.location.origin, getPrefix(), '/api/did'),
|
|
232
233
|
extraParams: { checkoutSessionId: checkoutSession.id },
|
|
233
234
|
onSuccess: async () => {
|
|
234
235
|
connect.close();
|
|
@@ -242,7 +243,7 @@ export default function PaymentForm({
|
|
|
242
243
|
setState({ submitting: false, paying: false });
|
|
243
244
|
onError(err);
|
|
244
245
|
},
|
|
245
|
-
});
|
|
246
|
+
} as any);
|
|
246
247
|
}
|
|
247
248
|
}
|
|
248
249
|
if (['stripe'].includes(method.type)) {
|
|
@@ -266,6 +267,7 @@ export default function PaymentForm({
|
|
|
266
267
|
if (session?.user) {
|
|
267
268
|
handleSubmit(onSubmit)();
|
|
268
269
|
} else {
|
|
270
|
+
// @ts-ignored
|
|
269
271
|
session?.login({
|
|
270
272
|
onSuccess: onUserLoggedIn,
|
|
271
273
|
extraParams: {},
|