@blocklet/payment-react 1.18.15 → 1.18.16

package/lib/contexts/payment.js

@@ -15,6 +15,19 @@ var _api = _interopRequireDefault(require("../libs/api"));
 var _util = require("../libs/util");
 var _cachedRequest = require("../libs/cached-request");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const formatData = data => {
+  if (!data) {
+    return {
+      paymentMethods: [],
+      baseCurrency: {}
+    };
+  }
+  return {
+    ...data,
+    paymentMethods: data.paymentMethods || [],
+    baseCurrency: data.baseCurrency || {}
+  };
+};
 const PaymentContext = exports.PaymentContext = (0, _react.createContext)({
   api: _api.default
 });
@@ -80,7 +93,7 @@ function PaymentProvider({
       connect,
       prefix,
       livemode: !!livemode,
-      settings: data,
+      settings: formatData(data),
       getCurrency: currencyId => getCurrency(currencyId, data?.paymentMethods || []),
       getMethod: methodId => getMethod(methodId, data?.paymentMethods || []),
       refresh: run,

package/lib/history/invoice/list.js

@@ -149,10 +149,14 @@ const InvoiceTable = _react.default.memo(props => {
     options: {
       customBodyRenderLite: (_, index) => {
         const invoice = data?.list[index];
+        const isVoid = invoice.status === "void";
         return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           onClick: e => handleLinkClick(e, invoice),
           sx: linkStyle,
           children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            sx: isVoid ? {
+              textDecoration: "line-through"
+            } : {},
             children: [(0, _util.formatBNStr)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
           })
         });
@@ -223,6 +227,7 @@ const InvoiceTable = _react.default.memo(props => {
         const {
           connect
         } = getInvoiceLink(invoice, action);
+        const isVoid = invoice.status === "void";
         if (action && !hidePay) {
           return connect ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
             variant: "text",
@@ -247,7 +252,17 @@ const InvoiceTable = _react.default.memo(props => {
         return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           onClick: e => handleLinkClick(e, invoice),
           sx: linkStyle,
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+          children: isVoid ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: t("payment.customer.invoice.noPaymentRequired"),
+            arrow: true,
+            placement: "top",
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+                label: invoice.status,
+                color: (0, _util.getInvoiceStatusColor)(invoice.status)
+              })
+            })
+          }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
             label: invoice.status,
             color: (0, _util.getInvoiceStatusColor)(invoice.status)
           })
@@ -432,6 +447,7 @@ const InvoiceList = _react.default.memo(props => {
           link,
           connect
         } = getInvoiceLink(invoice, action);
+        const isVoid = invoice.status === "void";
         return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
           sx: {
@@ -458,14 +474,15 @@ const InvoiceList = _react.default.memo(props => {
                 children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                   component: "span",
                   children: invoice.number
-                }), link.external && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
-                  mdDown: true,
-                  children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNewOutlined, {
-                    fontSize: "small",
-                    sx: {
-                      color: "text.secondary"
+                }), link.external && /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNewOutlined, {
+                  fontSize: "small",
+                  sx: {
+                    color: "text.secondary",
+                    display: {
+                      xs: "none",
+                      md: "inline-flex"
                     }
-                  })
+                  }
                 })]
               })
             })
@@ -473,6 +490,9 @@ const InvoiceList = _react.default.memo(props => {
             flex: 1,
             textAlign: "right",
             children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+              sx: isVoid ? {
+                textDecoration: "line-through"
+              } : {},
               children: [(0, _util.formatBNStr)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
             })
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
@@ -481,15 +501,18 @@ const InvoiceList = _react.default.memo(props => {
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               children: (0, _util.formatToDate)(invoice.created_at, locale, "HH:mm:ss")
             })
-          }), !action && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
-            mdDown: true,
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-              flex: 2,
-              className: "invoice-description",
-              textAlign: "right",
-              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                children: invoice.description || invoice.id
-              })
+          }), !action && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            flex: 2,
+            className: "invoice-description",
+            textAlign: "right",
+            sx: {
+              display: {
+                xs: "none",
+                lg: "inline-flex"
+              }
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: invoice.description || invoice.id
             })
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             flex: 1,
@@ -513,6 +536,16 @@ const InvoiceList = _react.default.memo(props => {
               },
               rel: "noreferrer",
               children: t("payment.customer.invoice.pay")
+            }) : isVoid ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: t("payment.customer.invoice.noPaymentRequired"),
+              arrow: true,
+              placement: "top",
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
+                children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+                  label: invoice.status,
+                  color: (0, _util.getInvoiceStatusColor)(invoice.status)
+                })
+              })
             }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
               label: invoice.status,
               color: (0, _util.getInvoiceStatusColor)(invoice.status)
@@ -624,9 +657,6 @@ const Root = (0, _system.styled)(_material.Stack)`
   @media (max-width: ${({
   theme
 }) => theme.breakpoints.values.md}px) {
-    .invoice-description {
-      display: none !important;
-    }
     svg.MuiSvgIcon-root {
       display: none !important;
     }

package/lib/locales/en.js

@@ -244,12 +244,13 @@ 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. Please pay these invoices one by one.",
+        warning: "Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore.",
         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.",
           confirm: "Pay Now"
-        }
+        },
+        view: "View Due Invoices"
       },
       recover: {
         button: "Resume Subscription",
@@ -298,7 +299,8 @@ module.exports = (0, _flat.default)({
         empty: "There are no invoices",
         next: "No invoices yet, next invoice will be generated on {date}",
         invoiceNumber: "Invoice Number",
-        emptyList: "No Invoice"
+        emptyList: "No Invoice",
+        noPaymentRequired: "No Payment Required"
       },
       payment: {
         empty: "There are no payments",
@@ -319,6 +321,11 @@ module.exports = (0, _flat.default)({
         changePayment: "Change payment method",
         trialLeft: "Trail Left",
         owner: "Subscription Owner"
+      },
+      overdue: {
+        title: "You have {count} due invoices for {subscriptionCount} subscriptions, totaling {total} {symbol}. Please pay immediately to avoid service disruption.",
+        simpleTitle: "You have {count} due invoices. Please pay now to ensure uninterrupted service.",
+        empty: "Great! You have no due invoices."
       }
     },
     invoice: {
@@ -358,7 +365,9 @@ module.exports = (0, _flat.default)({
         pastDue: "Past Due Invoices",
         description: "If you have any questions, you can choose ",
         list: "Past Due Invoices:",
-        empty: "There are no overdue invoices for your subscription {name}."
+        empty: "There are no overdue invoices for your subscription {name}.",
+        retry: "Retry",
+        paid: "Paid"
       }
     }
   },

package/lib/locales/zh.js

@@ -244,12 +244,13 @@ 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\uFF0C\u8BF7\u9010\u4E2A\u6253\u5F00\u8D26\u5355\u8BE6\u60C5\u5E76\u5B8C\u6210\u652F\u4ED8",
+        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\u3002",
         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",
           confirm: "\u53BB\u652F\u4ED8"
-        }
+        },
+        view: "\u67E5\u770B\u6B20\u8D39\u660E\u7EC6"
       },
       recover: {
         button: "\u6062\u590D\u8BA2\u9605",
@@ -298,7 +299,8 @@ module.exports = (0, _flat.default)({
         empty: "\u6CA1\u6709\u4EFB\u4F55\u8D26\u5355",
         next: "\u8FD8\u6CA1\u6709\u8D26\u5355\uFF0C\u4E0B\u6B21\u8D26\u5355\u5C06\u5728 {date} \u751F\u6210",
         invoiceNumber: "\u8D26\u5355\u7F16\u53F7",
-        emptyList: "\u6CA1\u6709\u8D26\u5355"
+        emptyList: "\u6CA1\u6709\u8D26\u5355",
+        noPaymentRequired: "\u65E0\u9700\u652F\u4ED8"
       },
       payment: {
         empty: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55",
@@ -319,6 +321,11 @@ module.exports = (0, _flat.default)({
         changePayment: "\u5207\u6362\u652F\u4ED8\u65B9\u5F0F",
         trialLeft: "\u5269\u4F59\u8BD5\u7528\u65F6\u957F",
         owner: "\u8BA2\u9605\u62E5\u6709\u8005"
+      },
+      overdue: {
+        title: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u6D89\u53CA {subscriptionCount} \u4E2A\u8BA2\u9605\uFF0C\u603B\u91D1\u989D {total} {symbol}\u3002\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u4EE5\u514D\u5F71\u54CD\u60A8\u7684\u4F7F\u7528\u3002",
+        simpleTitle: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u4EE5\u514D\u5F71\u54CD\u60A8\u7684\u4F7F\u7528\u3002",
+        empty: "\u606D\u559C\uFF01\u60A8\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355\u3002"
       }
     },
     invoice: {
@@ -358,7 +365,9 @@ module.exports = (0, _flat.default)({
         viewNow: "\u7ACB\u5373\u67E5\u770B",
         description: "\u5982\u679C\u60A8\u6709\u4EFB\u4F55\u7591\u95EE\uFF0C\u53EF\u4EE5\u9009\u62E9 ",
         list: "\u6B20\u8D39\u8D26\u5355\uFF1A",
-        empty: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355"
+        empty: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355",
+        retry: "\u91CD\u65B0\u652F\u4ED8",
+        paid: "\u5DF2\u652F\u4ED8"
       }
     }
   },

package/lib/payment/form/address.js

@@ -28,86 +28,82 @@ function AddressForm({
   if (mode === "required") {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
       in: true,
-      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
         className: "cko-payment-address cko-payment-form",
         sx,
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
-          className: "base-label",
-          children: t(`payment.checkout.billing.${mode}`)
-        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "column",
           className: "cko-payment-form",
           spacing: 0,
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-            direction: "row",
-            spacing: 0,
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
-              name: "billing_address.postal_code",
-              rules: {
-                required: t("payment.checkout.required")
-              },
-              errorPosition: "right",
-              variant: "outlined",
-              placeholder: t("payment.checkout.billing.postal_code"),
-              InputProps: {
-                startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
-                  position: "start",
-                  style: {
-                    marginRight: "2px",
-                    marginLeft: "-8px"
-                  },
-                  children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-                    name: "billing_address.country",
-                    control,
-                    render: ({
-                      field
-                    }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
-                      ...field,
-                      sx: {
-                        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                          borderColor: "transparent"
-                        }
-                      }
-                    })
-                  })
-                })
-              }
-            })
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+            className: "base-label",
+            children: t("payment.checkout.billing.line1")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
+            name: "billing_address.line1",
+            rules: {
+              required: t("payment.checkout.required")
+            },
+            errorPosition: "right",
+            variant: "outlined",
+            placeholder: t("payment.checkout.billing.line1")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
             className: "base-label",
-            children: t("payment.checkout.billing.state")
+            children: t("payment.checkout.billing.city")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
-            name: "billing_address.state",
+            name: "billing_address.city",
             rules: {
               required: t("payment.checkout.required")
             },
             errorPosition: "right",
             variant: "outlined",
-            placeholder: t("payment.checkout.billing.state")
+            placeholder: t("payment.checkout.billing.city")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
             className: "base-label",
-            children: t("payment.checkout.billing.line1")
+            children: t("payment.checkout.billing.state")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
-            name: "billing_address.line1",
+            name: "billing_address.state",
             rules: {
               required: t("payment.checkout.required")
             },
             errorPosition: "right",
             variant: "outlined",
-            placeholder: t("payment.checkout.billing.line1")
+            placeholder: t("payment.checkout.billing.state")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
             className: "base-label",
-            children: t("payment.checkout.billing.city")
+            children: t("payment.checkout.billing.postal_code")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
-            name: "billing_address.city",
+            name: "billing_address.postal_code",
             rules: {
               required: t("payment.checkout.required")
             },
             errorPosition: "right",
             variant: "outlined",
-            placeholder: t("payment.checkout.billing.city")
+            placeholder: t("payment.checkout.billing.postal_code"),
+            InputProps: {
+              startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+                position: "start",
+                style: {
+                  marginRight: "2px",
+                  marginLeft: "-8px"
+                },
+                children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+                  name: "billing_address.country",
+                  control,
+                  render: ({
+                    field
+                  }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
+                    ...field,
+                    sx: {
+                      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                        borderColor: "transparent"
+                      }
+                    }
+                  })
+                })
+              })
+            }
           })]
-        })]
+        })
       })
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.15",
+  "version": "1.18.16",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -18,7 +18,8 @@
   "scripts": {
     "lint": "tsc --noEmit && eslint src tests --ext js --ext jsx --ext ts --ext tsx",
     "lint:fix": "pnpm run lint --fix",
-    "build": "tsc --noEmit && unbuild && node tools/auto-exports.js && pnpm run cpfiles",
+    "clean": "rm -rf es lib",
+    "build": "pnpm run clean && tsc --noEmit && unbuild && node tools/auto-exports.js && pnpm run cpfiles",
     "watch": "CONSOLA_LEVEL=1 nodemon -e .jsx,.js,.ts,.tsx -w src -x 'yalc publish --push'",
     "precommit": "CI=1 pnpm run lint",
     "prepush": "CI=1 pnpm run lint",
@@ -53,10 +54,10 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.12.12",
-    "@arcblock/ux": "^2.12.12",
+    "@arcblock/did-connect": "^2.12.17",
+    "@arcblock/ux": "^2.12.17",
     "@arcblock/ws": "^1.19.15",
-    "@blocklet/ui-react": "^2.12.12",
+    "@blocklet/ui-react": "^2.12.17",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
@@ -92,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.15",
+    "@blocklet/payment-types": "1.18.16",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -123,5 +124,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "fd58f00bb5d9c625439c03577d9b5f33676823e2"
+  "gitHead": "676b921c6fc399d3a031b848bfbe0fbffee430a1"
 }