@blocklet/payment-react 1.13.189 → 1.13.191

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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import {
+  Alert,
   Box,
   Button,
   CircularProgress,
@@ -18,6 +19,7 @@ import api from "../../api.js";
 import Status from "../../components/status.js";
 import {
   formatBNStr,
+  formatError,
   formatSubscriptionProduct,
   formatTime,
   formatToDate,
@@ -32,20 +34,34 @@ const fetchInvoiceData = (params = {}) => {
   });
   return api.get(`/api/invoices?${search.toString()}`).then((res) => res.data);
 };
-const fetchSubscriptionData = (id) => {
-  return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
+const fetchSubscriptionData = (id, authToken) => {
+  if (!id) {
+    throw new Error("Subscription ID is missing");
+  }
+  return api.get(`/api/subscriptions/${id}?authToken=${authToken}`).then((res) => res.data);
 };
 export default function MiniInvoiceList() {
   const { t, locale } = useLocaleContext();
-  const subscriptionId = new URL(window.location.href).searchParams.get("id");
-  const { data: subscription } = useRequest(() => fetchSubscriptionData(subscriptionId));
+  const params = new URL(window.location.href).searchParams;
+  const subscriptionId = params.get("id") || "";
+  const authToken = params.get("authToken") || "";
+  const { data: subscription, error, loading } = useRequest(() => fetchSubscriptionData(subscriptionId, authToken));
   const { data } = useRequest(
-    () => fetchInvoiceData({ page: 1, pageSize: 10, status: "open,paid,uncollectible", subscription_id: subscriptionId })
+    () => fetchInvoiceData({
+      page: 1,
+      pageSize: 20,
+      status: "open,paid,uncollectible",
+      subscription_id: subscriptionId,
+      authToken
+    })
   );
-  if (!subscription || !data) {
+  if (error) {
+    return /* @__PURE__ */ jsx(Position, { children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: formatError(error) }) });
+  }
+  if (!subscription || loading) {
     return /* @__PURE__ */ jsx(Position, { children: /* @__PURE__ */ jsx(CircularProgress, {}) });
   }
-  const invoices = data.list || [];
+  const invoices = data?.list || [];
   const infoList = [
     {
       name: t("payment.customer.subscriptions.plan"),

package/es/locales/en.js

@@ -231,13 +231,13 @@ export default flat({
         renew: "Renew the subscription",
         renewSuccess: "You have successfully renewed the subscription",
         renewError: "Failed to renew the subscription",
-        empty: "There are no invoices here"
+        empty: "There are no invoices"
       },
       payment: {
-        empty: "There are no payments here"
+        empty: "There are no payments"
       },
       refund: {
-        empty: "There are no refunds here"
+        empty: "There are no refunds"
       },
       subscriptions: {
         plan: "Plan",

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

@@ -20,32 +20,48 @@ const fetchInvoiceData = (params = {}) => {
   });
   return _api.default.get(`/api/invoices?${search.toString()}`).then(res => res.data);
 };
-const fetchSubscriptionData = id => {
-  return _api.default.get(`/api/subscriptions/${id}`).then(res => res.data);
+const fetchSubscriptionData = (id, authToken) => {
+  if (!id) {
+    throw new Error("Subscription ID is missing");
+  }
+  return _api.default.get(`/api/subscriptions/${id}?authToken=${authToken}`).then(res => res.data);
 };
 function MiniInvoiceList() {
   const {
     t,
     locale
   } = (0, _context.useLocaleContext)();
-  const subscriptionId = new URL(window.location.href).searchParams.get("id");
+  const params = new URL(window.location.href).searchParams;
+  const subscriptionId = params.get("id") || "";
+  const authToken = params.get("authToken") || "";
   const {
-    data: subscription
-  } = (0, _ahooks.useRequest)(() => fetchSubscriptionData(subscriptionId));
+    data: subscription,
+    error,
+    loading
+  } = (0, _ahooks.useRequest)(() => fetchSubscriptionData(subscriptionId, authToken));
   const {
     data
   } = (0, _ahooks.useRequest)(() => fetchInvoiceData({
     page: 1,
-    pageSize: 10,
+    pageSize: 20,
     status: "open,paid,uncollectible",
-    subscription_id: subscriptionId
+    subscription_id: subscriptionId,
+    authToken
   }));
-  if (!subscription || !data) {
+  if (error) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(Position, {
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
+        severity: "error",
+        children: (0, _util.formatError)(error)
+      })
+    });
+  }
+  if (!subscription || loading) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(Position, {
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
     });
   }
-  const invoices = data.list || [];
+  const invoices = data?.list || [];
   const infoList = [{
     name: t("payment.customer.subscriptions.plan"),
     value: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {

package/lib/locales/en.js

@@ -238,13 +238,13 @@ module.exports = (0, _flat.default)({
         renew: "Renew the subscription",
         renewSuccess: "You have successfully renewed the subscription",
         renewError: "Failed to renew the subscription",
-        empty: "There are no invoices here"
+        empty: "There are no invoices"
       },
       payment: {
-        empty: "There are no payments here"
+        empty: "There are no payments"
       },
       refund: {
-        empty: "There are no refunds here"
+        empty: "There are no refunds"
       },
       subscriptions: {
         plan: "Plan",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.189",
+  "version": "1.13.191",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -52,14 +52,14 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.9.39",
-    "@arcblock/ux": "^2.9.39",
-    "@mui/icons-material": "^5.15.11",
-    "@mui/lab": "^5.0.0-alpha.166",
-    "@mui/material": "^5.15.11",
-    "@mui/styles": "^5.15.11",
-    "@mui/system": "^5.15.11",
-    "@ocap/util": "^1.18.110",
+    "@arcblock/did-connect": "^2.9.57",
+    "@arcblock/ux": "^2.9.57",
+    "@mui/icons-material": "^5.15.14",
+    "@mui/lab": "^5.0.0-alpha.169",
+    "@mui/material": "^5.15.14",
+    "@mui/styles": "^5.15.14",
+    "@mui/system": "^5.15.14",
+    "@ocap/util": "^1.18.113",
     "@stripe/react-stripe-js": "^2.4.0",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.3.0",
@@ -90,7 +90,7 @@
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
-    "@blocklet/payment-types": "1.13.189",
+    "@blocklet/payment-types": "1.13.191",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
     "@storybook/addon-links": "^7.6.13",
@@ -119,5 +119,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "74acb8bab72fdcd83ef007b661fe9017d0c2840d"
+  "gitHead": "943a116e9a91e634829cf12f40f62f36e35a7321"
 }

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

@@ -2,6 +2,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { Paginated, TInvoiceExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
 import {
+  Alert,
   Box,
   Button,
   CircularProgress,
@@ -20,6 +21,7 @@ import api from '../../api';
 import Status from '../../components/status';
 import {
   formatBNStr,
+  formatError,
   formatSubscriptionProduct,
   formatTime,
   formatToDate,
@@ -36,21 +38,40 @@ const fetchInvoiceData = (params: Record<string, any> = {}): Promise<Paginated<T
   return api.get(`/api/invoices?${search.toString()}`).then((res: any) => res.data);
 };
 
-const fetchSubscriptionData = (id: string): Promise<TSubscriptionExpanded> => {
-  return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
+const fetchSubscriptionData = (id: string, authToken: string): Promise<TSubscriptionExpanded> => {
+  if (!id) {
+    throw new Error('Subscription ID is missing');
+  }
+
+  return api.get(`/api/subscriptions/${id}?authToken=${authToken}`).then((res) => res.data);
 };
 
 export default function MiniInvoiceList() {
   const { t, locale } = useLocaleContext();
+  const params = new URL(window.location.href).searchParams;
 
-  const subscriptionId = new URL(window.location.href).searchParams.get('id');
+  const subscriptionId = params.get('id') || '';
+  const authToken = params.get('authToken') || '';
 
-  const { data: subscription } = useRequest(() => fetchSubscriptionData(subscriptionId as string));
+  const { data: subscription, error, loading } = useRequest(() => fetchSubscriptionData(subscriptionId, authToken));
   const { data } = useRequest(() =>
-    fetchInvoiceData({ page: 1, pageSize: 10, status: 'open,paid,uncollectible', subscription_id: subscriptionId })
+    fetchInvoiceData({
+      page: 1,
+      pageSize: 20,
+      status: 'open,paid,uncollectible',
+      subscription_id: subscriptionId,
+      authToken,
+    })
   );
 
-  if (!subscription || !data) {
+  if (error) {
+    return (
+      <Position>
+        <Alert severity="error">{formatError(error)}</Alert>
+      </Position>
+    );
+  }
+  if (!subscription || loading) {
     return (
       <Position>
         <CircularProgress />
@@ -58,7 +79,7 @@ export default function MiniInvoiceList() {
     );
   }
 
-  const invoices = data.list || [];
+  const invoices = data?.list || [];
 
   const infoList = [
     {

package/src/locales/en.tsx

@@ -240,13 +240,13 @@ export default flat({
         renew: 'Renew the subscription',
         renewSuccess: 'You have successfully renewed the subscription',
         renewError: 'Failed to renew the subscription',
-        empty: 'There are no invoices here',
+        empty: 'There are no invoices',
       },
       payment: {
-        empty: 'There are no payments here',
+        empty: 'There are no payments',
       },
       refund: {
-        empty: 'There are no refunds here',
+        empty: 'There are no refunds',
       },
       subscriptions: {
         plan: 'Plan',