@blocklet/payment-react 1.13.235 → 1.13.236

package/es/history/invoice/list.js

@@ -54,7 +54,7 @@ export default function CustomerInvoiceList({
   target,
   action
 }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const size = pageSize || 10;
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll(
     (d) => {
@@ -100,20 +100,33 @@ export default function CustomerInvoiceList({
               sm: 1.5,
               md: 3
             },
+            alignItems: "center",
             flexWrap: "nowrap",
             children: [
               /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
                 /* @__PURE__ */ jsx(Typography, { component: "span", children: invoice.number }),
                 link.external && /* @__PURE__ */ jsx(Hidden, { mdDown: true, children: /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small", sx: { color: "text.secondary" } }) })
               ] }) }) }),
-              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at, "en", "HH:mm:ss") }) }),
               /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsxs(Typography, { children: [
                 formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
                 "\xA0",
                 invoice.paymentCurrency.symbol
               ] }) }),
-              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) }),
-              /* @__PURE__ */ jsx(Hidden, { mdDown: true, children: /* @__PURE__ */ jsx(Box, { flex: 2, className: "invoice-description", textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: invoice.description || invoice.id }) }) })
+              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at, locale, "HH:mm:ss") }) }),
+              !action && /* @__PURE__ */ jsx(Hidden, { mdDown: true, children: /* @__PURE__ */ jsx(Box, { flex: 2, className: "invoice-description", textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: invoice.description || invoice.id }) }) }),
+              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: action ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  component: "a",
+                  variant: "contained",
+                  color: "primary",
+                  size: "small",
+                  href: link.url,
+                  target: link.external ? "_blank" : target,
+                  rel: "noreferrer",
+                  children: t("payment.customer.invoice.pay")
+                }
+              ) : /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) })
             ]
           },
           invoice.id
@@ -145,4 +158,8 @@ const Root = styled(Stack)`
       display: none !important;
     }
   }
+
+  a.MuiButton-root {
+    text-decoration: none !important;
+  }
 `;

package/es/history/mini-invoice/list.js

@@ -19,10 +19,10 @@ import api from "../../api.js";
 import Status from "../../components/status.js";
 import {
   formatBNStr,
-  formatDateTime,
   formatError,
   formatSubscriptionProduct,
   formatTime,
+  formatToDate,
   getInvoiceStatusColor,
   getPrefix,
   getSubscriptionStatusColor
@@ -118,14 +118,13 @@ export default function MiniInvoiceList() {
             /* @__PURE__ */ jsx(ListSubheader, { disableGutters: true, sx: { padding: 0 }, children: /* @__PURE__ */ jsx(Typography, { component: "h2", variant: "h6", fontSize: "16px", children: t("payment.customer.invoices") }) }),
             invoices.length === 0 ? /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("payment.customer.invoice.empty") }) : invoices.map((item) => {
               return /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, sx: { display: "flex", justifyContent: "space-between" }, children: [
-                /* @__PURE__ */ jsx(Typography, { component: "span", sx: { flex: 3 }, children: formatDateTime(item.created_at, locale) }),
+                /* @__PURE__ */ jsx(Typography, { component: "span", sx: { flex: 3 }, children: formatToDate(item.created_at, locale, "YYYY-MM-DD") }),
                 /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { flex: 1, textAlign: "right" }, children: [
                   formatBNStr(item.total, item.paymentCurrency.decimal),
                   "\xA0",
                   item.paymentCurrency.symbol
                 ] }),
-                /* @__PURE__ */ jsx(Typography, { component: "span", sx: { flex: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx(Status, { label: item.status, color: getInvoiceStatusColor(item.status) }) }),
-                /* @__PURE__ */ jsx(Typography, { component: "span", sx: { flex: 3 }, children: /* @__PURE__ */ jsx(Typography, { children: item.description || item.id }) })
+                /* @__PURE__ */ jsx(Typography, { component: "span", sx: { flex: 2, textAlign: "right" }, children: /* @__PURE__ */ jsx(Status, { label: item.status, color: getInvoiceStatusColor(item.status) }) })
               ] }, item.id);
             })
           ] }) }),

package/es/locales/en.js

@@ -197,7 +197,7 @@ export default flat({
       pastDue: {
         button: "Pay",
         invoices: "Past Due Invoices",
-        warning: "Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore.",
+        warning: "Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore. Please pay these invoices one by one.",
         alert: {
           title: "You have unpaid invoices",
           description: "Seems you have unpaid invoices from previous subscriptions, new purchases are not allowed unless you have paid all past due invoices.",

package/es/locales/zh.js

@@ -197,7 +197,7 @@ export default flat({
       pastDue: {
         button: "\u7EED\u8D39",
         invoices: "\u6B20\u8D39\u5E10\u5355",
-        warning: "\u8BF7\u5C3D\u5FEB\u652F\u4ED8\u6B20\u8D39\u8D26\u5355\uFF0C\u5426\u5219\u4F60\u5C06\u65E0\u6CD5\u7EE7\u7EED\u4F7F\u7528\u670D\u52A1\u6216\u8D2D\u4E70\u65B0\u670D\u52A1",
+        warning: "\u8BF7\u5C3D\u5FEB\u652F\u4ED8\u6B20\u8D39\u8D26\u5355\uFF0C\u5426\u5219\u4F60\u5C06\u65E0\u6CD5\u7EE7\u7EED\u4F7F\u7528\u670D\u52A1\u6216\u8D2D\u4E70\u65B0\u670D\u52A1\uFF0C\u8BF7\u9010\u4E2A\u6253\u5F00\u8D26\u5355\u8BE6\u60C5\u5E76\u5B8C\u6210\u652F\u4ED8",
         alert: {
           title: "\u4F60\u6709\u6B20\u8D39\u8D26\u5355",
           description: "\u770B\u8D77\u6765\u4F60\u6709\u6B20\u8D39\u7684\u8D26\u5355\uFF0C\u5728\u4F60\u652F\u4ED8\u6240\u6709\u6B20\u8D39\u8D26\u5355\u4E4B\u524D\uFF0C\u65B0\u7684\u8D2D\u4E70\u6216\u8005\u8BA2\u9605\u5C06\u88AB\u7981\u6B62\uFF0C\u8BF7\u4E0D\u8981\u8C03\u76AE\u3002",

package/lib/history/invoice/list.js

@@ -58,7 +58,8 @@ function CustomerInvoiceList({
   action
 }) {
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const size = pageSize || 10;
   const {
@@ -133,6 +134,7 @@ function CustomerInvoiceList({
             sm: 1.5,
             md: 3
           },
+          alignItems: "center",
           flexWrap: "nowrap",
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             flex: 2,
@@ -158,12 +160,6 @@ function CustomerInvoiceList({
                 })]
               })
             })
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-            flex: 1,
-            textAlign: "right",
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              children: (0, _util.formatToDate)(invoice.created_at, "en", "HH:mm:ss")
-            })
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             flex: 1,
             textAlign: "right",
@@ -173,11 +169,10 @@ function CustomerInvoiceList({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             flex: 1,
             textAlign: "right",
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
-              label: invoice.status,
-              color: (0, _util.getInvoiceStatusColor)(invoice.status)
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: (0, _util.formatToDate)(invoice.created_at, locale, "HH:mm:ss")
             })
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
+          }), !action && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
             mdDown: true,
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
               flex: 2,
@@ -187,6 +182,22 @@ function CustomerInvoiceList({
                 children: invoice.description || invoice.id
               })
             })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            flex: 1,
+            textAlign: "right",
+            children: action ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+              component: "a",
+              variant: "contained",
+              color: "primary",
+              size: "small",
+              href: link.url,
+              target: link.external ? "_blank" : target,
+              rel: "noreferrer",
+              children: t("payment.customer.invoice.pay")
+            }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+              label: invoice.status,
+              color: (0, _util.getInvoiceStatusColor)(invoice.status)
+            })
           })]
         }, invoice.id);
       })]
@@ -230,4 +241,8 @@ const Root = (0, _system.styled)(_material.Stack)`
       display: none !important;
     }
   }
+
+  a.MuiButton-root {
+    text-decoration: none !important;
+  }
 `;

package/lib/history/mini-invoice/list.js

@@ -176,7 +176,7 @@ function MiniInvoiceList() {
                 sx: {
                   flex: 3
                 },
-                children: (0, _util.formatDateTime)(item.created_at, locale)
+                children: (0, _util.formatToDate)(item.created_at, locale, "YYYY-MM-DD")
               }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
                 component: "span",
                 sx: {
@@ -188,20 +188,12 @@ function MiniInvoiceList() {
                 component: "span",
                 sx: {
                   flex: 2,
-                  textAlign: "center"
+                  textAlign: "right"
                 },
                 children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
                   label: item.status,
                   color: (0, _util.getInvoiceStatusColor)(item.status)
                 })
-              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                component: "span",
-                sx: {
-                  flex: 3
-                },
-                children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  children: item.description || item.id
-                })
               })]
             }, item.id);
           })]

package/lib/locales/en.js

@@ -204,7 +204,7 @@ module.exports = (0, _flat.default)({
       pastDue: {
         button: "Pay",
         invoices: "Past Due Invoices",
-        warning: "Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore.",
+        warning: "Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore. Please pay these invoices one by one.",
         alert: {
           title: "You have unpaid invoices",
           description: "Seems you have unpaid invoices from previous subscriptions, new purchases are not allowed unless you have paid all past due invoices.",

package/lib/locales/zh.js

@@ -204,7 +204,7 @@ module.exports = (0, _flat.default)({
       pastDue: {
         button: "\u7EED\u8D39",
         invoices: "\u6B20\u8D39\u5E10\u5355",
-        warning: "\u8BF7\u5C3D\u5FEB\u652F\u4ED8\u6B20\u8D39\u8D26\u5355\uFF0C\u5426\u5219\u4F60\u5C06\u65E0\u6CD5\u7EE7\u7EED\u4F7F\u7528\u670D\u52A1\u6216\u8D2D\u4E70\u65B0\u670D\u52A1",
+        warning: "\u8BF7\u5C3D\u5FEB\u652F\u4ED8\u6B20\u8D39\u8D26\u5355\uFF0C\u5426\u5219\u4F60\u5C06\u65E0\u6CD5\u7EE7\u7EED\u4F7F\u7528\u670D\u52A1\u6216\u8D2D\u4E70\u65B0\u670D\u52A1\uFF0C\u8BF7\u9010\u4E2A\u6253\u5F00\u8D26\u5355\u8BE6\u60C5\u5E76\u5B8C\u6210\u652F\u4ED8",
         alert: {
           title: "\u4F60\u6709\u6B20\u8D39\u8D26\u5355",
           description: "\u770B\u8D77\u6765\u4F60\u6709\u6B20\u8D39\u7684\u8D26\u5355\uFF0C\u5728\u4F60\u652F\u4ED8\u6240\u6709\u6B20\u8D39\u8D26\u5355\u4E4B\u524D\uFF0C\u65B0\u7684\u8D2D\u4E70\u6216\u8005\u8BA2\u9605\u5C06\u88AB\u7981\u6B62\uFF0C\u8BF7\u4E0D\u8981\u8C03\u76AE\u3002",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.235",
+  "version": "1.13.236",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -90,7 +90,7 @@
     "@babel/core": "^7.24.4",
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
-    "@blocklet/payment-types": "1.13.235",
+    "@blocklet/payment-types": "1.13.236",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",
@@ -119,5 +119,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "0ce69f4fb2a09658835deab572b1f860f305b195"
+  "gitHead": "458c748371a1dac07c0aa9039fb71f6fcbb68e14"
 }

package/src/history/invoice/list.tsx

@@ -74,7 +74,7 @@ export default function CustomerInvoiceList({
   target,
   action,
 }: Props) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const size = pageSize || 10;
 
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Result>(
@@ -137,6 +137,7 @@ export default function CustomerInvoiceList({
                   sm: 1.5,
                   md: 3,
                 }}
+                alignItems="center"
                 flexWrap="nowrap">
                 <Box flex={2}>
                   <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
@@ -150,9 +151,6 @@ export default function CustomerInvoiceList({
                     </Stack>
                   </a>
                 </Box>
-                <Box flex={1} textAlign="right">
-                  <Typography>{formatToDate(invoice.created_at, 'en', 'HH:mm:ss')}</Typography>
-                </Box>
                 <Box flex={1} textAlign="right">
                   <Typography>
                     {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
@@ -160,13 +158,31 @@ export default function CustomerInvoiceList({
                   </Typography>
                 </Box>
                 <Box flex={1} textAlign="right">
-                  <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
+                  <Typography>{formatToDate(invoice.created_at, locale, 'HH:mm:ss')}</Typography>
+                </Box>
+                {!action && (
+                  <Hidden mdDown>
+                    <Box flex={2} className="invoice-description" textAlign="right">
+                      <Typography>{invoice.description || invoice.id}</Typography>
+                    </Box>
+                  </Hidden>
+                )}
+                <Box flex={1} textAlign="right">
+                  {action ? (
+                    <Button
+                      component="a"
+                      variant="contained"
+                      color="primary"
+                      size="small"
+                      href={link.url}
+                      target={link.external ? '_blank' : target}
+                      rel="noreferrer">
+                      {t('payment.customer.invoice.pay')}
+                    </Button>
+                  ) : (
+                    <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
+                  )}
                 </Box>
-                <Hidden mdDown>
-                  <Box flex={2} className="invoice-description" textAlign="right">
-                    <Typography>{invoice.description || invoice.id}</Typography>
-                  </Box>
-                </Hidden>
               </Stack>
             );
           })}
@@ -210,4 +226,8 @@ const Root = styled(Stack)`
       display: none !important;
     }
   }
+
+  a.MuiButton-root {
+    text-decoration: none !important;
+  }
 `;

package/src/history/mini-invoice/list.tsx

@@ -21,10 +21,10 @@ import api from '../../api';
 import Status from '../../components/status';
 import {
   formatBNStr,
-  formatDateTime,
   formatError,
   formatSubscriptionProduct,
   formatTime,
+  formatToDate,
   getInvoiceStatusColor,
   getPrefix,
   getSubscriptionStatusColor,
@@ -158,18 +158,15 @@ export default function MiniInvoiceList() {
                 return (
                   <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
                     <Typography component="span" sx={{ flex: 3 }}>
-                      {formatDateTime(item.created_at, locale)}
+                      {formatToDate(item.created_at, locale, 'YYYY-MM-DD')}
                     </Typography>
                     <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
                       {formatBNStr(item.total, item.paymentCurrency.decimal)}&nbsp;
                       {item.paymentCurrency.symbol}
                     </Typography>
-                    <Typography component="span" sx={{ flex: 2, textAlign: 'center' }}>
+                    <Typography component="span" sx={{ flex: 2, textAlign: 'right' }}>
                       <Status label={item.status} color={getInvoiceStatusColor(item.status)} />
                     </Typography>
-                    <Typography component="span" sx={{ flex: 3 }}>
-                      <Typography>{item.description || item.id}</Typography>
-                    </Typography>
                   </ListItem>
                 );
               })

package/src/locales/en.tsx

@@ -203,7 +203,8 @@ export default flat({
       pastDue: {
         button: 'Pay',
         invoices: 'Past Due Invoices',
-        warning: 'Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore.',
+        warning:
+          'Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore. Please pay these invoices one by one.',
         alert: {
           title: 'You have unpaid invoices',
           description:

package/src/locales/zh.tsx

@@ -199,7 +199,7 @@ export default flat({
       pastDue: {
         button: '续费',
         invoices: '欠费帐单',
-        warning: '请尽快支付欠费账单，否则你将无法继续使用服务或购买新服务',
+        warning: '请尽快支付欠费账单，否则你将无法继续使用服务或购买新服务，请逐个打开账单详情并完成支付',
         alert: {
           title: '你有欠费账单',
           description: '看起来你有欠费的账单，在你支付所有欠费账单之前，新的购买或者订阅将被禁止，请不要调皮。',