@blocklet/payment-react 1.13.129 → 1.13.131

package/lib/{histroy → history}/mini-invoice/list.js

@@ -9,51 +9,43 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _util = require("@ocap/util");
 var _ahooks = require("ahooks");
+var _ufo = require("ufo");
 var _api = _interopRequireDefault(require("../../api"));
 var _status = _interopRequireDefault(require("../../components/status"));
 var _util2 = require("../../util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const fetchData = (params = {}) => {
+const fetchInvoiceData = (params = {}) => {
   const search = new URLSearchParams();
   Object.keys(params).forEach(key => {
     search.set(key, String(params[key]));
   });
   return _api.default.get(`/api/invoices?${search.toString()}`).then(res => res.data);
 };
-const pageSize = 10;
-function MiniInvoiceList({
-  subscription
-}) {
+const fetchSubscriptionData = id => {
+  return _api.default.get(`/api/subscriptions/${id}`).then(res => res.data);
+};
+function MiniInvoiceList() {
   const {
     t
   } = (0, _context.useLocaleContext)();
+  const subscriptionId = new URL(window.location.href).searchParams.get("id");
   const {
-    data,
-    loading
-  } = (0, _ahooks.useInfiniteScroll)(d => {
-    const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
-    return fetchData({
-      page,
-      pageSize,
-      status: "open,paid,uncollectible",
-      subscription_id: subscription.id
-    });
-  }, {
-    reloadDeps: [subscription.id]
-  });
-  if (loading || !data) {
+    data: subscription
+  } = (0, _ahooks.useRequest)(() => fetchSubscriptionData(subscriptionId));
+  const {
+    data
+  } = (0, _ahooks.useRequest)(() => fetchInvoiceData({
+    page: 1,
+    pageSize: 10,
+    status: "open,paid,uncollectible",
+    subscription_id: subscriptionId
+  }));
+  if (!subscription || !data) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(Position, {
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
     });
   }
-  if (data && data.list.length === 0) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(Position, {
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        color: "text.secondary",
-        children: t("payment.customer.invoice.empty")
-      })
-    });
-  }
+  const invoices = data.list || [];
   const infoList = [{
     name: t("payment.customer.subscriptions.plan"),
     value: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -64,25 +56,30 @@ function MiniInvoiceList({
       children: (0, _util2.formatSubscriptionProduct)(subscription.items)
     })
   }, {
-    name: t("payment.common.status"),
+    name: t("common.status"),
     value: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
       label: subscription.status,
       color: (0, _util2.getSubscriptionStatusColor)(subscription.status)
     })
-  }, {
-    name: t("payment.customer.subscriptions.nextInvoice"),
-    value: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-      sx: {
-        color: "#34BE74",
-        fontWeight: "bold"
-      },
-      children: (0, _util2.formatTime)(subscription.current_period_end * 1e3)
-    })
   }];
+  if (subscription.status === "active" || subscription.status === "trailing") {
+    infoList.push({
+      name: t("payment.customer.subscriptions.nextInvoice"),
+      value: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          color: "#34BE74",
+          fontWeight: "bold",
+          marginRight: "10px"
+        },
+        children: (0, _util2.formatTime)(subscription.current_period_end * 1e3)
+      })
+    });
+  }
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(Position, {
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       title: t("payment.checkout.subscription")
     }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      className: "mini-invoice-wrap",
       sx: {
         display: "flex",
         flexDirection: "column",
@@ -127,17 +124,14 @@ function MiniInvoiceList({
         })
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Divider, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
-          marginTop: "12px"
+          marginTop: "12px",
+          flex: 1
         },
         children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.List, {
           sx: {
-            overflow: "auto",
-            maxHeight: {
-              xs: "240px",
-              md: "360px",
-              padding: 0
-            }
+            overflow: "auto"
           },
+          className: "mini-invoice-list",
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListSubheader, {
             disableGutters: true,
             sx: {
@@ -149,7 +143,10 @@ function MiniInvoiceList({
               fontSize: "16px",
               children: t("payment.customer.invoices")
             })
-          }), (data.list || []).map(item => {
+          }), invoices.length === 0 ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            color: "text.secondary",
+            children: t("payment.customer.invoice.empty")
+          }) : invoices.map(item => {
             return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.ListItem, {
               disableGutters: true,
               sx: {
@@ -158,25 +155,43 @@ function MiniInvoiceList({
               },
               children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                 component: "span",
+                sx: {
+                  flex: 3
+                },
                 children: (0, _util2.formatToDate)(item.created_at)
               }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
                 component: "span",
+                sx: {
+                  flex: 1,
+                  textAlign: "right"
+                },
                 children: [(0, _util.fromUnitToToken)(item.total, item.paymentCurrency.decimal), "\xA0", item.paymentCurrency.symbol]
-              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
-                label: item.status,
-                color: (0, _util2.getInvoiceStatusColor)(item.status)
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                component: "span",
+                sx: {
+                  flex: 2,
+                  textAlign: "right"
+                },
+                children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+                  label: item.status,
+                  color: (0, _util2.getInvoiceStatusColor)(item.status),
+                  sx: {
+                    flex: 2
+                  }
+                })
               })]
             }, item.id);
           })]
         })
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-        target: "_top",
+        target: "_blank",
         variant: "contained",
         sx: {
-          marginTop: "auto",
-          width: "100%"
+          marginTop: "10px 0",
+          width: "100%",
+          color: "#fff!important"
         },
-        href: "",
+        href: (0, _ufo.joinURL)(window.location.origin, (0, _util2.getPrefix)(), `/customer/subscription/${subscription.id}`),
         children: t("payment.customer.subscriptions.title")
       })]
     })]
@@ -188,15 +203,11 @@ function Position({
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
     className: "mini-invoice-box",
     sx: {
-      position: "absolute",
-      right: 0,
-      top: "30px",
-      justifyContent: "center",
       padding: "8px",
-      minWidth: "400px",
+      width: "100%",
+      maxWidth: "500px",
       background: "#fff",
-      zIndex: 9,
-      boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)"
+      margin: "0 auto"
     },
     children
   });

package/lib/{histroy → history}/payment/list.js

@@ -10,6 +10,7 @@ var _material = require("@mui/material");
 var _util = require("@ocap/util");
 var _ahooks = require("ahooks");
 var _api = _interopRequireDefault(require("../../api"));
+var _tx = _interopRequireDefault(require("../../components/blockchain/tx"));
 var _status = _interopRequireDefault(require("../../components/status"));
 var _util2 = require("../../util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -111,10 +112,20 @@ function CustomerPaymentList({
             color: (0, _util2.getPaymentIntentStatusColor)(item.status)
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          flex: 4,
+          flex: 3,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             children: item.description || item.id
           })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 3,
+          sx: {
+            minWidth: "220px"
+          },
+          children: item.payment_details?.arcblock?.tx_hash && /* @__PURE__ */(0, _jsxRuntime.jsx)(_tx.default, {
+            details: item.payment_details,
+            method: item.paymentMethod,
+            mode: "customer"
+          })
         })]
       }, item.id))]
     }, date)), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {

package/lib/index.d.ts

@@ -1,6 +1,7 @@
 import api from './api';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
+import TxLink from './components/blockchain/tx';
 import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
@@ -8,9 +9,9 @@ import PricingTable from './components/pricing-table';
 import Status from './components/status';
 import Switch from './components/switch-button';
 import dayjs from './dayjs';
-import CustomerInvoiceList from './histroy/invoice/list';
-import MiniInvoiceList from './histroy/mini-invoice/list';
-import CustomerPaymentList from './histroy/payment/list';
+import CustomerInvoiceList from './history/invoice/list';
+import MiniInvoiceList from './history/mini-invoice/list';
+import CustomerPaymentList from './history/payment/list';
 import Amount from './payment/amount';
 import PhoneInput from './payment/form/phone';
 import Payment from './payment/index';
@@ -18,4 +19,4 @@ import ProductSkeleton from './payment/product-skeleton';
 export * from './util';
 export * from './contexts/payment';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, };
+export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, };

package/lib/index.js

@@ -7,6 +7,7 @@ var _exportNames = {
   api: true,
   CheckoutForm: true,
   CheckoutTable: true,
+  TxLink: true,
   ConfirmDialog: true,
   FormInput: true,
   Livemode: true,
@@ -114,6 +115,12 @@ Object.defineProperty(exports, "Switch", {
     return _switchButton.default;
   }
 });
+Object.defineProperty(exports, "TxLink", {
+  enumerable: true,
+  get: function () {
+    return _tx.default;
+  }
+});
 Object.defineProperty(exports, "api", {
   enumerable: true,
   get: function () {
@@ -141,6 +148,7 @@ Object.defineProperty(exports, "translations", {
 var _api = _interopRequireDefault(require("./api"));
 var _form = _interopRequireDefault(require("./checkout/form"));
 var _table = _interopRequireDefault(require("./checkout/table"));
+var _tx = _interopRequireDefault(require("./components/blockchain/tx"));
 var _confirm = _interopRequireDefault(require("./components/confirm"));
 var _input = _interopRequireDefault(require("./components/input"));
 var _livemode = _interopRequireDefault(require("./components/livemode"));
@@ -148,9 +156,9 @@ var _pricingTable = _interopRequireDefault(require("./components/pricing-table")
 var _status = _interopRequireDefault(require("./components/status"));
 var _switchButton = _interopRequireDefault(require("./components/switch-button"));
 var _dayjs = _interopRequireDefault(require("./dayjs"));
-var _list = _interopRequireDefault(require("./histroy/invoice/list"));
-var _list2 = _interopRequireDefault(require("./histroy/mini-invoice/list"));
-var _list3 = _interopRequireDefault(require("./histroy/payment/list"));
+var _list = _interopRequireDefault(require("./history/invoice/list"));
+var _list2 = _interopRequireDefault(require("./history/mini-invoice/list"));
+var _list3 = _interopRequireDefault(require("./history/payment/list"));
 var _amount = _interopRequireDefault(require("./payment/amount"));
 var _phone = _interopRequireDefault(require("./payment/form/phone"));
 var _index = _interopRequireDefault(require("./payment/index"));

package/lib/locales/en.js

@@ -209,17 +209,17 @@ module.exports = (0, _flat.default)({
         pay: "Pay this invoice",
         paySuccess: "You have successfully paid the invoice",
         payError: "Failed to paid the invoice",
-        empty: "Seems you do not have any invoice here"
+        empty: "There are no invoices here"
       },
       payment: {
-        empty: "Seems you do not have any payment here"
+        empty: "There are no payments here"
       },
       subscriptions: {
         plan: "Plan",
         nextInvoice: "Next Invoice",
         title: "Manage subscriptions",
-        current: "Current subscriptions",
-        empty: "Seems you do not have any subscriptions here"
+        current: "Current subscription",
+        empty: "There are no subscriptions here"
       }
     }
   }

package/lib/locales/zh.js

@@ -209,17 +209,17 @@ module.exports = (0, _flat.default)({
         pay: "\u652F\u4ED8\u6B64\u53D1\u7968",
         paySuccess: "\u652F\u4ED8\u6210\u529F",
         payError: "\u652F\u4ED8\u5931\u8D25",
-        empty: "\u4F60\u6CA1\u6709\u4EFB\u4F55\u53D1\u7968"
+        empty: "\u6CA1\u6709\u4EFB\u4F55\u53D1\u7968"
       },
       payment: {
-        empty: "\u4F60\u6CA1\u6709\u4EFB\u4F55\u652F\u4ED8"
+        empty: "\u6CA1\u6709\u4EFB\u4F55\u652F\u4ED8"
       },
       subscriptions: {
         plan: "\u8BA2\u9605",
         nextInvoice: "\u4E0B\u4E00\u5F20\u53D1\u7968",
         title: "\u8BA2\u9605\u7BA1\u7406",
         current: "\u5F53\u524D\u8BA2\u9605",
-        empty: "\u4F60\u8FD8\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605"
+        empty: "\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605"
       }
     }
   }

package/lib/util.js

@@ -282,9 +282,12 @@ function getWebhookStatusColor(status) {
 }
 function getCheckoutAmount(items, currency, includeFreeTrial = false, upsell = true) {
   let renew = new _util.BN(0);
-  const total = items.reduce((acc, x) => {
+  const total = items.filter(x => {
     const price = upsell ? x.upsell_price || x.price : x.price;
-    if (price.type === "recurring") {
+    return price != null;
+  }).reduce((acc, x) => {
+    const price = upsell ? x.upsell_price || x.price : x.price;
+    if (price?.type === "recurring") {
       renew = renew.add(new _util.BN(getPriceUintAmountByCurrency(price, currency)).mul(new _util.BN(x.quantity)));
       if (includeFreeTrial) {
         return acc;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.129",
+  "version": "1.13.131",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -89,7 +89,7 @@
     "@babel/core": "^7.19.3",
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
-    "@blocklet/payment-types": "1.13.129",
+    "@blocklet/payment-types": "1.13.131",
     "@storybook/addon-essentials": "^7.6.10",
     "@storybook/addon-interactions": "^7.6.10",
     "@storybook/addon-links": "^7.6.10",
@@ -118,5 +118,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "4ad81bea01de3268d9cf0bda552a0a0a67abd85d"
+  "gitHead": "a1a5072b1a0c564cce5ba4aee5fc4801cfef4a46"
 }

package/src/components/blockchain/tx.tsx

@@ -0,0 +1,77 @@
+import type { PaymentDetails, TPaymentMethod } from '@blocklet/payment-types';
+import { OpenInNewOutlined } from '@mui/icons-material';
+import { Link, Stack, Typography } from '@mui/material';
+import { joinURL } from 'ufo';
+
+const getTxLink = (method: TPaymentMethod, details: PaymentDetails) => {
+  if (method.type === 'arcblock' && details.arcblock?.tx_hash) {
+    return {
+      link: joinURL(method.settings.arcblock?.explorer_host as string, '/txs', details.arcblock?.tx_hash as string),
+      text: details.arcblock?.tx_hash as string,
+    };
+  }
+  if (method.type === 'bitcoin' && details.bitcoin?.tx_hash) {
+    return {
+      link: joinURL(method.settings.bitcoin?.explorer_host as string, '/tx', details.bitcoin?.tx_hash as string),
+      text: details.bitcoin?.tx_hash as string,
+    };
+  }
+  if (method.type === 'ethereum' && details.ethereum?.tx_hash) {
+    return {
+      link: joinURL(method.settings.ethereum?.explorer_host as string, '/tx', details.ethereum?.tx_hash as string),
+      text: details.ethereum?.tx_hash as string,
+    };
+  }
+  if (method.type === 'stripe') {
+    const dashboard = method.livemode ? 'https://dashboard.stripe.com' : 'https://dashboard.stripe.com/test';
+    return {
+      link: joinURL(
+        method.settings.stripe?.dashboard || dashboard,
+        'payments',
+        details.stripe?.payment_intent_id as string
+      ),
+      text: details.stripe?.payment_intent_id as string,
+    };
+  }
+
+  return { text: 'N/A', link: '' };
+};
+
+TxLink.defaultProps = {
+  mode: 'dashboard',
+};
+
+export default function TxLink(props: {
+  details: PaymentDetails;
+  method: TPaymentMethod;
+  mode?: 'customer' | 'dashboard';
+}) {
+  if (!props.details || (props.mode === 'customer' && props.method.type === 'stripe')) {
+    return (
+      <Typography component="small" color="text.secondary">
+        None
+      </Typography>
+    );
+  }
+
+  const { text, link } = getTxLink(props.method, props.details);
+
+  if (link) {
+    return (
+      <Link href={link} target="_blank" rel="noopener noreferrer">
+        <Stack component="span" direction="row" alignItems="center" spacing={1}>
+          <Typography component="span" color="primary">
+            {text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join('...') : text}
+          </Typography>
+          <OpenInNewOutlined fontSize="small" />
+        </Stack>
+      </Link>
+    );
+  }
+
+  return (
+    <Typography component="small" color="text.secondary">
+      None
+    </Typography>
+  );
+}

package/src/{histroy → history}/invoice/list.tsx

@@ -4,10 +4,11 @@ import type { Paginated, TInvoiceExpanded } from '@blocklet/payment-types';
 import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { fromUnitToToken } from '@ocap/util';
 import { useInfiniteScroll } from 'ahooks';
+import { joinURL } from 'ufo';
 
 import api from '../../api';
 import Status from '../../components/status';
-import { formatToDate, getInvoiceStatusColor } from '../../util';
+import { formatToDate, getInvoiceStatusColor, getPrefix } from '../../util';
 
 const groupByDate = (items: TInvoiceExpanded[]) => {
   const grouped: { [key: string]: TInvoiceExpanded[] } = {};
@@ -24,24 +25,27 @@ const groupByDate = (items: TInvoiceExpanded[]) => {
 const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TInvoiceExpanded>> => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
-    search.set(key, String(params[key]));
+    if (params[key]) {
+      search.set(key, String(params[key]));
+    }
   });
   return api.get(`/api/invoices?${search.toString()}`).then((res: any) => res.data);
 };
 
 type Props = {
-  customer_id: string;
+  customer_id?: string;
+  subscription_id?: string;
 };
 
 const pageSize = 10;
 
-export default function CustomerInvoiceList({ customer_id }: Props) {
+export default function CustomerInvoiceList({ customer_id, subscription_id }: Props) {
   const { t } = useLocaleContext();
 
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TInvoiceExpanded>>(
     (d) => {
       const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
-      return fetchData({ page, pageSize, status: 'open,paid,uncollectible', customer_id });
+      return fetchData({ page, pageSize, status: 'open,paid,uncollectible', customer_id, subscription_id });
     },
     {
       reloadDeps: [customer_id],
@@ -80,7 +84,7 @@ export default function CustomerInvoiceList({ customer_id }: Props) {
               }}
               flexWrap="nowrap">
               <Box flex={3}>
-                <a href={`/customer/invoice/${invoice.id}`}>
+                <a href={joinURL(window.location.origin, getPrefix(), `/customer/invoice/${invoice.id}`)}>
                   <Typography component="span">{invoice.number}</Typography>
                 </a>
               </Box>
@@ -120,3 +124,8 @@ export default function CustomerInvoiceList({ customer_id }: Props) {
     </Stack>
   );
 }
+
+CustomerInvoiceList.defaultProps = {
+  customer_id: '',
+  subscription_id: '',
+};