@blocklet/payment-react 1.13.146 → 1.13.147

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 (4) hide show
  1. package/es/components/pricing-table.js +6 -6
  2. package/lib/components/pricing-table.js +85 -88
  3. package/package.json +3 -3
  4. package/src/components/pricing-table.tsx +57 -59
package/es/components/pricing-table.js CHANGED
@@ -6,7 +6,6 @@ import { LoadingButton } from "@mui/lab";
6
6
  import {
7
7
  Box,
8
8
  Chip,
9
- Fade,
10
9
  List,
11
10
  ListItem,
12
11
  ListItemIcon,
@@ -41,8 +40,8 @@ PricingTable.defaultProps = {
41
40
  };
42
41
  export default function PricingTable({ table, alignItems, interval, mode, onSelect }) {
43
42
  const { t, locale } = useLocaleContext();
44
- const [state, setState] = useSetState({ interval });
45
43
  const { recurring, grouped } = groupItemsByRecurring(table.items);
44
+ const [state, setState] = useSetState({ interval });
46
45
  useEffect(() => {
47
46
  if (table) {
48
47
  if (!state.interval || !grouped[state.interval]) {
@@ -74,7 +73,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
74
73
  }
75
74
  .price-table-wrap:has(> div:nth-child(2)) > .price-table-item {
76
75
  // 当子元素为2的时候，子元素给宽度
77
- width: 60% !important;
76
+ width: 45% !important;
78
77
  }
79
78
  .price-table-wrap:has(> div:nth-child(3)) > .price-table-item {
80
79
  width: 30% !important;
@@ -125,7 +124,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
125
124
  if (mode === "select") {
126
125
  action = x.is_selected ? t("payment.checkout.selected") : t("payment.checkout.select");
127
126
  }
128
- return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(
127
+ return /* @__PURE__ */ jsxs(
129
128
  Stack,
130
129
  {
131
130
  padding: 4,
@@ -171,8 +170,9 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
171
170
  ] }, f.name)) })
172
171
  ] })
173
172
  ]
174
- }
175
- ) }, x.price_id);
173
+ },
174
+ x?.price_id
175
+ );
176
176
  }
177
177
  )
178
178
  }
package/lib/components/pricing-table.js CHANGED
@@ -48,13 +48,13 @@ function PricingTable({
48
48
  t,
49
49
  locale
50
50
  } = (0, _context.useLocaleContext)();
51
- const [state, setState] = (0, _ahooks.useSetState)({
52
- interval
53
- });
54
51
  const {
55
52
  recurring,
56
53
  grouped
57
54
  } = groupItemsByRecurring(table.items);
55
+ const [state, setState] = (0, _ahooks.useSetState)({
56
+ interval
57
+ });
58
58
  (0, _react.useEffect)(() => {
59
59
  if (table) {
60
60
  if (!state.interval || !grouped[state.interval]) {
@@ -92,7 +92,7 @@ function PricingTable({
92
92
  }
93
93
  .price-table-wrap:has(> div:nth-child(2)) > .price-table-item {
94
94
  // 当子元素为2的时候，子元素给宽度
95
- width: 60% !important;
95
+ width: 45% !important;
96
96
  }
97
97
  .price-table-wrap:has(> div:nth-child(3)) > .price-table-item {
98
98
  width: 30% !important;
@@ -142,97 +142,94 @@ function PricingTable({
142
142
  if (mode === "select") {
143
143
  action = x.is_selected ? t("payment.checkout.selected") : t("payment.checkout.select");
144
144
  }
145
- return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
146
- in: true,
147
- children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
148
- padding: 4,
149
- spacing: 2,
150
- direction: "column",
151
- alignItems: "center",
152
- className: "price-table-item",
153
- justifyContent: "center",
154
- sx: {
155
- cursor: "pointer",
156
- borderWidth: "1px",
157
- borderStyle: "solid",
158
- borderColor: mode === "select" && x.is_selected ? "primary.main" : "#eee",
159
- borderRadius: 1,
160
- transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
161
- boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)",
162
- "&:hover": {
163
- borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
164
- boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
165
- }
166
- },
167
- children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
168
- textAlign: "center",
169
- children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
170
- direction: "row",
171
- alignItems: "center",
172
- spacing: 1,
173
- children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
174
- variant: "h5",
175
- color: "text.primary",
176
- fontWeight: 600,
177
- children: x.product.name
178
- }), x.is_highlight && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
179
- label: x.highlight_text,
180
- color: "default",
181
- size: "small"
182
- })]
183
- }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
184
- color: "text.secondary",
185
- children: x.product.description
186
- })]
187
- }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
145
+ return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
146
+ padding: 4,
147
+ spacing: 2,
148
+ direction: "column",
149
+ alignItems: "center",
150
+ className: "price-table-item",
151
+ justifyContent: "center",
152
+ sx: {
153
+ cursor: "pointer",
154
+ borderWidth: "1px",
155
+ borderStyle: "solid",
156
+ borderColor: mode === "select" && x.is_selected ? "primary.main" : "#eee",
157
+ borderRadius: 1,
158
+ transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
159
+ boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)",
160
+ "&:hover": {
161
+ borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
162
+ boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
163
+ }
164
+ },
165
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
166
+ textAlign: "center",
167
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
188
168
  direction: "row",
189
169
  alignItems: "center",
190
170
  spacing: 1,
191
- children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
192
- amount: (0, _util.formatPriceAmount)(x.price, table.currency, x.product.unit_label)
193
- }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
194
- direction: "column",
195
- alignItems: "flex-start",
196
- children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
197
- component: "span",
198
- color: "text.secondary",
199
- fontSize: "0.8rem",
200
- children: t("payment.checkout.per")
201
- }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
202
- component: "span",
203
- color: "text.secondary",
204
- fontSize: "0.8rem",
205
- children: (0, _util.formatRecurring)(x.price.recurring, false, "", locale)
206
- })]
171
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
172
+ variant: "h5",
173
+ color: "text.primary",
174
+ fontWeight: 600,
175
+ children: x.product.name
176
+ }), x.is_highlight && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
177
+ label: x.highlight_text,
178
+ color: "default",
179
+ size: "small"
207
180
  })]
208
- }), /* @__PURE__ */(0, _jsxRuntime.jsx)(Loading, {
209
- x,
210
- action,
211
- onSelect
212
- }), x.product.features.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
181
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
182
+ color: "text.secondary",
183
+ children: x.product.description
184
+ })]
185
+ }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
186
+ direction: "row",
187
+ alignItems: "center",
188
+ spacing: 1,
189
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
190
+ amount: (0, _util.formatPriceAmount)(x.price, table.currency, x.product.unit_label)
191
+ }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
192
+ direction: "column",
193
+ alignItems: "flex-start",
213
194
  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
214
- children: t("payment.checkout.include")
215
- }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.List, {
216
- dense: true,
217
- children: x.product.features.map(f => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.ListItem, {
218
- disableGutters: true,
219
- disablePadding: true,
220
- children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
221
- sx: {
222
- minWidth: 25
223
- },
224
- children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.CheckOutlined, {
225
- color: "success",
226
- fontSize: "small"
227
- })
228
- }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListItemText, {
229
- primary: f.name
230
- })]
231
- }, f.name))
195
+ component: "span",
196
+ color: "text.secondary",
197
+ fontSize: "0.8rem",
198
+ children: t("payment.checkout.per")
199
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
200
+ component: "span",
201
+ color: "text.secondary",
202
+ fontSize: "0.8rem",
203
+ children: (0, _util.formatRecurring)(x.price.recurring, false, "", locale)
232
204
  })]
233
205
  })]
234
- })
235
- }, x.price_id);
206
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(Loading, {
207
+ x,
208
+ action,
209
+ onSelect
210
+ }), x.product.features.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
211
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
212
+ children: t("payment.checkout.include")
213
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.List, {
214
+ dense: true,
215
+ children: x.product.features.map(f => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.ListItem, {
216
+ disableGutters: true,
217
+ disablePadding: true,
218
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
219
+ sx: {
220
+ minWidth: 25
221
+ },
222
+ children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.CheckOutlined, {
223
+ color: "success",
224
+ fontSize: "small"
225
+ })
226
+ }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListItemText, {
227
+ primary: f.name
228
+ })]
229
+ }, f.name))
230
+ })]
231
+ })]
232
+ }, x?.price_id);
236
233
  })
237
234
  })]
238
235
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/payment-react",
3
- "version": "1.13.146",
3
+ "version": "1.13.147",
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.23.9",
90
90
  "@babel/preset-env": "^7.23.9",
91
91
  "@babel/preset-react": "^7.23.3",
92
- "@blocklet/payment-types": "1.13.146",
92
+ "@blocklet/payment-types": "1.13.147",
93
93
  "@storybook/addon-essentials": "^7.6.13",
94
94
  "@storybook/addon-interactions": "^7.6.13",
95
95
  "@storybook/addon-links": "^7.6.13",
@@ -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": "d7b68b409a84dd6ad962d298a74155fcdd9993db"
121
+ "gitHead": "9fd7b32ada89697a6e5c8b5a1c5c4729dca50c51"
122
122
  }
package/src/components/pricing-table.tsx CHANGED
@@ -7,7 +7,6 @@ import { LoadingButton } from '@mui/lab';
7
7
  import {
8
8
  Box,
9
9
  Chip,
10
- Fade,
11
10
  List,
12
11
  ListItem,
13
12
  ListItemIcon,
@@ -59,8 +58,8 @@ PricingTable.defaultProps = {
59
58
 
60
59
  export default function PricingTable({ table, alignItems, interval, mode, onSelect }: Props) {
61
60
  const { t, locale } = useLocaleContext();
62
- const [state, setState] = useSetState({ interval });
63
61
  const { recurring, grouped } = groupItemsByRecurring(table.items);
62
+ const [state, setState] = useSetState({ interval });
64
63
 
65
64
  useEffect(() => {
66
65
  if (table) {
@@ -95,7 +94,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
95
94
  }
96
95
  .price-table-wrap:has(> div:nth-child(2)) > .price-table-item {
97
96
  // 当子元素为2的时候，子元素给宽度
98
- width: 60% !important;
97
+ width: 45% !important;
99
98
  }
100
99
  .price-table-wrap:has(> div:nth-child(3)) > .price-table-item {
101
100
  width: 30% !important;
@@ -150,65 +149,64 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
150
149
  }
151
150
 
152
151
  return (
153
- <Fade key={x.price_id} in>
154
- <Stack
155
- padding={4}
156
- spacing={2}
157
- direction="column"
158
- alignItems="center"
159
- className="price-table-item"
160
- justifyContent="center"
161
- sx={{
162
- cursor: 'pointer',
163
- borderWidth: '1px',
164
- borderStyle: 'solid',
165
- borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#eee',
166
- borderRadius: 1,
167
- transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
168
- boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',
169
- '&:hover': {
170
- borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#ddd',
171
- boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
172
- },
173
- }}>
174
- <Box textAlign="center">
175
- <Stack direction="row" alignItems="center" spacing={1}>
176
- <Typography variant="h5" color="text.primary" fontWeight={600}>
177
- {x.product.name}
178
- </Typography>
179
- {x.is_highlight && <Chip label={x.highlight_text} color="default" size="small" />}
180
- </Stack>
181
- <Typography color="text.secondary">{x.product.description}</Typography>
182
- </Box>
152
+ <Stack
153
+ key={x?.price_id}
154
+ padding={4}
155
+ spacing={2}
156
+ direction="column"
157
+ alignItems="center"
158
+ className="price-table-item"
159
+ justifyContent="center"
160
+ sx={{
161
+ cursor: 'pointer',
162
+ borderWidth: '1px',
163
+ borderStyle: 'solid',
164
+ borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#eee',
165
+ borderRadius: 1,
166
+ transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
167
+ boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',
168
+ '&:hover': {
169
+ borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#ddd',
170
+ boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
171
+ },
172
+ }}>
173
+ <Box textAlign="center">
183
174
  <Stack direction="row" alignItems="center" spacing={1}>
184
- <Amount amount={formatPriceAmount(x.price, table.currency, x.product.unit_label)} />
185
- <Stack direction="column" alignItems="flex-start">
186
- <Typography component="span" color="text.secondary" fontSize="0.8rem">
187
- {t('payment.checkout.per')}
188
- </Typography>
189
- <Typography component="span" color="text.secondary" fontSize="0.8rem">
190
- {formatRecurring(x.price.recurring as PriceRecurring, false, '', locale)}
191
- </Typography>
192
- </Stack>
175
+ <Typography variant="h5" color="text.primary" fontWeight={600}>
176
+ {x.product.name}
177
+ </Typography>
178
+ {x.is_highlight && <Chip label={x.highlight_text} color="default" size="small" />}
179
+ </Stack>
180
+ <Typography color="text.secondary">{x.product.description}</Typography>
181
+ </Box>
182
+ <Stack direction="row" alignItems="center" spacing={1}>
183
+ <Amount amount={formatPriceAmount(x.price, table.currency, x.product.unit_label)} />
184
+ <Stack direction="column" alignItems="flex-start">
185
+ <Typography component="span" color="text.secondary" fontSize="0.8rem">
186
+ {t('payment.checkout.per')}
187
+ </Typography>
188
+ <Typography component="span" color="text.secondary" fontSize="0.8rem">
189
+ {formatRecurring(x.price.recurring as PriceRecurring, false, '', locale)}
190
+ </Typography>
193
191
  </Stack>
194
- <Loading x={x} action={action} onSelect={onSelect} />
195
- {x.product.features.length > 0 && (
196
- <Box>
197
- <Typography>{t('payment.checkout.include')}</Typography>
198
- <List dense>
199
- {x.product.features.map((f: any) => (
200
- <ListItem key={f.name} disableGutters disablePadding>
201
- <ListItemIcon sx={{ minWidth: 25 }}>
202
- <CheckOutlined color="success" fontSize="small" />
203
- </ListItemIcon>
204
- <ListItemText primary={f.name} />
205
- </ListItem>
206
- ))}
207
- </List>
208
- </Box>
209
- )}
210
192
  </Stack>
211
- </Fade>
193
+ <Loading x={x} action={action} onSelect={onSelect} />
194
+ {x.product.features.length > 0 && (
195
+ <Box>
196
+ <Typography>{t('payment.checkout.include')}</Typography>
197
+ <List dense>
198
+ {x.product.features.map((f: any) => (
199
+ <ListItem key={f.name} disableGutters disablePadding>
200
+ <ListItemIcon sx={{ minWidth: 25 }}>
201
+ <CheckOutlined color="success" fontSize="small" />
202
+ </ListItemIcon>
203
+ <ListItemText primary={f.name} />
204
+ </ListItem>
205
+ ))}
206
+ </List>
207
+ </Box>
208
+ )}
209
+ </Stack>
212
210
  );
213
211
  }
214
212
  )}