payment-kit 1.19.4 → 1.19.6

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.
@@ -27,7 +27,6 @@ import {
27
27
  Box,
28
28
  Button,
29
29
  CircularProgress,
30
- Divider,
31
30
  Link,
32
31
  List,
33
32
  ListItem,
@@ -35,6 +34,7 @@ import {
35
34
  Stack,
36
35
  Tooltip,
37
36
  Typography,
37
+ useTheme,
38
38
  } from '@mui/material';
39
39
  import { useRequest, useSetState } from 'ahooks';
40
40
  import SplitButton from '@arcblock/ux/lib/SplitButton';
@@ -111,6 +111,7 @@ export default function SubscriptionEmbed() {
111
111
  refreshDeps: [subscriptionId, authToken, subscription?.customer_id],
112
112
  }
113
113
  );
114
+ const muiTheme = useTheme();
114
115
 
115
116
  const subscriptionPageUrl: string = useMemo(() => {
116
117
  if (!subscription) {
@@ -256,7 +257,7 @@ export default function SubscriptionEmbed() {
256
257
  <Typography component="h2" sx={{ textAlign: 'center' }} variant="h3" gutterBottom>
257
258
  {t('payment.customer.subscriptions.current')}
258
259
  </Typography>
259
- <Box sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
260
+ <Box sx={{ display: 'flex', flexDirection: 'column' }}>
260
261
  {infoList.map(({ name, value }) => {
261
262
  return (
262
263
  <InfoRow
@@ -264,6 +265,8 @@ export default function SubscriptionEmbed() {
264
265
  value={value}
265
266
  sx={{
266
267
  mb: 0,
268
+ py: 1.5,
269
+ borderBottom: `1px solid ${muiTheme.palette.divider}`,
267
270
  '.info-row-label': {
268
271
  whiteSpace: 'nowrap',
269
272
  },
@@ -278,7 +281,6 @@ export default function SubscriptionEmbed() {
278
281
  );
279
282
  })}
280
283
  </Box>
281
- <Divider />
282
284
  <Box sx={{ flex: 1, overflow: 'hidden' }}>
283
285
  <List sx={{ height: '100%', display: 'flex', flexDirection: 'column' }} className="mini-invoice-list">
284
286
  <ListSubheader disableGutters sx={{ padding: 0 }}>
@@ -286,7 +288,8 @@ export default function SubscriptionEmbed() {
286
288
  component="h2"
287
289
  variant="h6"
288
290
  sx={{
289
- fontSize: '16px',
291
+ fontSize: 14,
292
+ color: 'text.primary',
290
293
  }}>
291
294
  {t('payment.customer.invoices')}
292
295
  </Typography>
@@ -329,10 +332,11 @@ export default function SubscriptionEmbed() {
329
332
  sx={{
330
333
  justifyContent: 'center',
331
334
  mt: 2,
335
+ width: '100%',
332
336
  }}>
333
337
  {subscription.service_actions
334
338
  ?.filter((x: any) => x?.type !== 'notification')
335
- ?.map((x) => (
339
+ ?.map((x: any) => (
336
340
  // @ts-ignore
337
341
  <Button
338
342
  component={Link}
@@ -342,7 +346,11 @@ export default function SubscriptionEmbed() {
342
346
  href={x.link}
343
347
  size="small"
344
348
  target="_blank"
345
- sx={{ textDecoration: 'none !important' }}>
349
+ sx={{
350
+ textDecoration: 'none !important',
351
+ flex: 1,
352
+ minWidth: 0,
353
+ }}>
346
354
  {x.text[locale] || x.text.en || x.name}
347
355
  </Button>
348
356
  ))}
@@ -351,6 +359,10 @@ export default function SubscriptionEmbed() {
351
359
  size="small"
352
360
  color="error"
353
361
  variant="contained"
362
+ sx={{
363
+ flex: 1,
364
+ minWidth: 0,
365
+ }}
354
366
  menu={[
355
367
  <SplitButton.Item key="view-subscription" component={Link} target="_blank" href={subscriptionPageUrl}>
356
368
  {t('payment.customer.subscriptions.view')}
@@ -365,7 +377,10 @@ export default function SubscriptionEmbed() {
365
377
  ) : (
366
378
  <Button
367
379
  variant="contained"
368
- sx={{ width: subscription.service_actions?.length ? 'auto' : '100%' }}
380
+ sx={{
381
+ flex: 1,
382
+ minWidth: 0,
383
+ }}
369
384
  target="_blank"
370
385
  href={subscriptionPageUrl}>
371
386
  {t('payment.customer.subscriptions.view')}