@blocklet/payment-react 1.13.175 → 1.13.177

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

@@ -1,6 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Box, Button, CircularProgress, Divider, List, ListItem, ListSubheader, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Divider,
+  Link,
+  List,
+  ListItem,
+  ListSubheader,
+  Stack,
+  Typography
+} from "@mui/material";
 import { fromUnitToToken } from "@ocap/util";
 import { useRequest } from "ahooks";
 import { joinURL } from "ufo";
@@ -25,7 +36,7 @@ const fetchSubscriptionData = (id) => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
 };
 export default function MiniInvoiceList() {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const subscriptionId = new URL(window.location.href).searchParams.get("id");
   const { data: subscription } = useRequest(() => fetchSubscriptionData(subscriptionId));
   const { data } = useRequest(
@@ -99,16 +110,34 @@ export default function MiniInvoiceList() {
               ] }, item.id);
             })
           ] }) }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              target: "_blank",
-              variant: "contained",
-              sx: { marginTop: "10px 0", width: "100%", color: "#fff!important" },
-              href: joinURL(window.location.origin, getPrefix(), `/customer/subscription/${subscription.id}`),
-              children: t("payment.customer.subscriptions.title")
-            }
-          )
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "center", spacing: 2, sx: { mt: 2 }, children: [
+            subscription.service_actions?.map((x) => (
+              // @ts-ignore
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  component: Link,
+                  variant: x.variant,
+                  color: x.color,
+                  href: x.link,
+                  size: "small",
+                  sx: { textDecoration: "none !important" },
+                  children: x.text[locale] || x.text.en || x.name
+                },
+                x.name
+              )
+            )),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                target: "_blank",
+                variant: "contained",
+                sx: { color: "#fff!important", width: subscription.service_actions?.length ? "auto" : "100%" },
+                href: joinURL(window.location.origin, getPrefix(), `/customer/subscription/${subscription.id}`),
+                children: t("payment.customer.subscriptions.title")
+              }
+            )
+          ] })
         ]
       }
     )

package/es/locales/en.js

@@ -39,6 +39,10 @@ export default flat({
     email: "Email",
     did: "DID",
     txHash: "Transaction",
+    delegateTxHash: "Delegate Transaction",
+    stakeTxHash: "Stake Transaction",
+    slashTxHash: "Slash Transaction",
+    transferTxHash: "Transfer Transaction",
     customer: "Customer",
     currency: "Currency",
     custom: "Custom",
@@ -90,7 +94,10 @@ export default flat({
       continue: "Confirm {action}",
       connect: "Connect and {action}",
       login: "Login to load and save contact information",
-      portal: "Manage subscriptions",
+      next: {
+        subscription: "View subscription",
+        invoice: "View invoice"
+      },
       cardPay: "{action} with card",
       empty: "No thing to pay",
       per: "per",

package/es/locales/zh.js

@@ -39,6 +39,10 @@ export default flat({
     email: "\u90AE\u7BB1",
     did: "DID",
     txHash: "\u4EA4\u6613\u54C8\u5E0C",
+    delegateTxHash: "\u6388\u6743\u4EA4\u6613",
+    stakeTxHash: "\u8D28\u62BC\u4EA4\u6613",
+    slashTxHash: "\u7F5A\u6CA1\u4EA4\u6613",
+    transferTxHash: "\u6263\u6B3E\u4EA4\u6613",
     customer: "\u5BA2\u6237",
     currency: "\u5E01\u79CD",
     custom: "\u81EA\u5B9A\u4E49",
@@ -90,7 +94,10 @@ export default flat({
       continue: "\u786E\u8BA4{action}",
       connect: "\u8FDE\u63A5\u5E76{action}",
       login: "\u767B\u5F55\u4EE5\u52A0\u8F7D\u5E76\u4FDD\u5B58\u8054\u7CFB\u4FE1\u606F",
-      portal: "\u7BA1\u7406\u8BA2\u9605",
+      next: {
+        subscription: "\u67E5\u770B\u8BA2\u9605",
+        invoice: "\u67E5\u770B\u8D26\u5355"
+      },
       cardPay: "\u4F7F\u7528\u5361\u7247{action}",
       empty: "\u6CA1\u6709\u53EF\u652F\u4ED8\u7684\u9879\u76EE",
       per: "\u6BCF",

package/es/payment/index.js

@@ -213,6 +213,7 @@ export function PaymentInner({
           {
             payee: getStatementDescriptor(state.checkoutSession.line_items),
             action: state.checkoutSession.mode,
+            invoiceId: state.checkoutSession.invoice_id,
             subscriptionId: state.checkoutSession.subscription_id,
             message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(`payment.checkout.completed.${state.checkoutSession.mode}`)
           }

package/es/payment/success.d.ts

@@ -3,11 +3,13 @@ type Props = {
     message: string;
     action: string;
     payee: string;
+    invoiceId?: string;
     subscriptionId?: string;
 };
-declare function PaymentSuccess({ message, action, payee, subscriptionId }: Props): import("react").JSX.Element;
+declare function PaymentSuccess({ message, action, payee, invoiceId, subscriptionId }: Props): import("react").JSX.Element;
 declare namespace PaymentSuccess {
     var defaultProps: {
+        invoiceId: string;
         subscriptionId: string;
     };
 }

package/es/payment/success.js

@@ -4,9 +4,15 @@ import { Grow, Link, Stack, Typography } from "@mui/material";
 import { styled } from "@mui/system";
 import { joinURL } from "ufo";
 import { usePaymentContext } from "../contexts/payment.js";
-export default function PaymentSuccess({ message, action, payee, subscriptionId }) {
+export default function PaymentSuccess({ message, action, payee, invoiceId, subscriptionId }) {
   const { t } = useLocaleContext();
   const { prefix } = usePaymentContext();
+  let next = null;
+  if (["subscription", "setup"].includes(action) && subscriptionId) {
+    next = /* @__PURE__ */ jsx(Typography, { textAlign: "center", sx: { mt: 2 }, children: /* @__PURE__ */ jsx(Link, { href: joinURL(prefix, `/customer/subscription/${subscriptionId}`), children: t("payment.checkout.next.subscription", { payee }) }) });
+  } else if (invoiceId) {
+    next = /* @__PURE__ */ jsx(Typography, { textAlign: "center", sx: { mt: 2 }, children: /* @__PURE__ */ jsx(Link, { href: joinURL(prefix, `/customer/invoice/${invoiceId}`), children: t("payment.checkout.next.invoice", { payee }) }) });
+  }
   return /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", justifyContent: "center", sx: { height: 360 }, children: [
     /* @__PURE__ */ jsx(Div, { children: /* @__PURE__ */ jsxs("div", { className: "check-icon", children: [
       /* @__PURE__ */ jsx("span", { className: "icon-line line-tip" }),
@@ -16,10 +22,11 @@ export default function PaymentSuccess({ message, action, payee, subscriptionId
     ] }) }),
     /* @__PURE__ */ jsx(Typography, { variant: "h5", color: "text.primary", mb: 3, children: message }),
     /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", textAlign: "center", children: t("payment.checkout.completed.tip", { payee }) }),
-    ["subscription", "setup"].includes(action) && /* @__PURE__ */ jsx(Typography, { textAlign: "center", sx: { mt: 2 }, children: /* @__PURE__ */ jsx(Link, { href: joinURL(prefix, `/customer/subscription/${subscriptionId}`), children: t("payment.checkout.portal", { payee }) }) })
+    next
   ] }) });
 }
 PaymentSuccess.defaultProps = {
+  invoiceId: "",
   subscriptionId: ""
 };
 const Div = styled("div")`

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

@@ -26,7 +26,8 @@ const fetchSubscriptionData = id => {
 };
 function MiniInvoiceList() {
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const subscriptionId = new URL(window.location.href).searchParams.get("id");
   const {
@@ -183,16 +184,36 @@ function MiniInvoiceList() {
             }, item.id);
           })]
         })
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-        target: "_blank",
-        variant: "contained",
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        justifyContent: "center",
+        spacing: 2,
         sx: {
-          marginTop: "10px 0",
-          width: "100%",
-          color: "#fff!important"
+          mt: 2
         },
-        href: (0, _ufo.joinURL)(window.location.origin, (0, _util2.getPrefix)(), `/customer/subscription/${subscription.id}`),
-        children: t("payment.customer.subscriptions.title")
+        children: [subscription.service_actions?.map(x =>
+        // @ts-ignore
+        /* @__PURE__ */
+        (0, _jsxRuntime.jsx)(_material.Button, {
+          component: _material.Link,
+          variant: x.variant,
+          color: x.color,
+          href: x.link,
+          size: "small",
+          sx: {
+            textDecoration: "none !important"
+          },
+          children: x.text[locale] || x.text.en || x.name
+        }, x.name)), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+          target: "_blank",
+          variant: "contained",
+          sx: {
+            color: "#fff!important",
+            width: subscription.service_actions?.length ? "auto" : "100%"
+          },
+          href: (0, _ufo.joinURL)(window.location.origin, (0, _util2.getPrefix)(), `/customer/subscription/${subscription.id}`),
+          children: t("payment.customer.subscriptions.title")
+        })]
       })]
     })]
   });

package/lib/locales/en.js

@@ -46,6 +46,10 @@ module.exports = (0, _flat.default)({
     email: "Email",
     did: "DID",
     txHash: "Transaction",
+    delegateTxHash: "Delegate Transaction",
+    stakeTxHash: "Stake Transaction",
+    slashTxHash: "Slash Transaction",
+    transferTxHash: "Transfer Transaction",
     customer: "Customer",
     currency: "Currency",
     custom: "Custom",
@@ -97,7 +101,10 @@ module.exports = (0, _flat.default)({
       continue: "Confirm {action}",
       connect: "Connect and {action}",
       login: "Login to load and save contact information",
-      portal: "Manage subscriptions",
+      next: {
+        subscription: "View subscription",
+        invoice: "View invoice"
+      },
       cardPay: "{action} with card",
       empty: "No thing to pay",
       per: "per",

package/lib/locales/zh.js

@@ -46,6 +46,10 @@ module.exports = (0, _flat.default)({
     email: "\u90AE\u7BB1",
     did: "DID",
     txHash: "\u4EA4\u6613\u54C8\u5E0C",
+    delegateTxHash: "\u6388\u6743\u4EA4\u6613",
+    stakeTxHash: "\u8D28\u62BC\u4EA4\u6613",
+    slashTxHash: "\u7F5A\u6CA1\u4EA4\u6613",
+    transferTxHash: "\u6263\u6B3E\u4EA4\u6613",
     customer: "\u5BA2\u6237",
     currency: "\u5E01\u79CD",
     custom: "\u81EA\u5B9A\u4E49",
@@ -97,7 +101,10 @@ module.exports = (0, _flat.default)({
       continue: "\u786E\u8BA4{action}",
       connect: "\u8FDE\u63A5\u5E76{action}",
       login: "\u767B\u5F55\u4EE5\u52A0\u8F7D\u5E76\u4FDD\u5B58\u8054\u7CFB\u4FE1\u606F",
-      portal: "\u7BA1\u7406\u8BA2\u9605",
+      next: {
+        subscription: "\u67E5\u770B\u8BA2\u9605",
+        invoice: "\u67E5\u770B\u8D26\u5355"
+      },
       cardPay: "\u4F7F\u7528\u5361\u7247{action}",
       empty: "\u6CA1\u6709\u53EF\u652F\u4ED8\u7684\u9879\u76EE",
       per: "\u6BCF",

package/lib/payment/index.js

@@ -280,6 +280,7 @@ function PaymentInner({
           children: [completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_success.default, {
             payee: (0, _util.getStatementDescriptor)(state.checkoutSession.line_items),
             action: state.checkoutSession.mode,
+            invoiceId: state.checkoutSession.invoice_id,
             subscriptionId: state.checkoutSession.subscription_id,
             message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(`payment.checkout.completed.${state.checkoutSession.mode}`)
           }), !completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {

package/lib/payment/success.d.ts

@@ -3,11 +3,13 @@ type Props = {
     message: string;
     action: string;
     payee: string;
+    invoiceId?: string;
     subscriptionId?: string;
 };
-declare function PaymentSuccess({ message, action, payee, subscriptionId }: Props): import("react").JSX.Element;
+declare function PaymentSuccess({ message, action, payee, invoiceId, subscriptionId }: Props): import("react").JSX.Element;
 declare namespace PaymentSuccess {
     var defaultProps: {
+        invoiceId: string;
         subscriptionId: string;
     };
 }

package/lib/payment/success.js

@@ -14,6 +14,7 @@ function PaymentSuccess({
   message,
   action,
   payee,
+  invoiceId,
   subscriptionId
 }) {
   const {
@@ -22,6 +23,34 @@ function PaymentSuccess({
   const {
     prefix
   } = (0, _payment.usePaymentContext)();
+  let next = null;
+  if (["subscription", "setup"].includes(action) && subscriptionId) {
+    next = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      textAlign: "center",
+      sx: {
+        mt: 2
+      },
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
+        href: (0, _ufo.joinURL)(prefix, `/customer/subscription/${subscriptionId}`),
+        children: t("payment.checkout.next.subscription", {
+          payee
+        })
+      })
+    });
+  } else if (invoiceId) {
+    next = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      textAlign: "center",
+      sx: {
+        mt: 2
+      },
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
+        href: (0, _ufo.joinURL)(prefix, `/customer/invoice/${invoiceId}`),
+        children: t("payment.checkout.next.invoice", {
+          payee
+        })
+      })
+    });
+  }
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grow, {
     in: true,
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -56,22 +85,12 @@ function PaymentSuccess({
         children: t("payment.checkout.completed.tip", {
           payee
         })
-      }), ["subscription", "setup"].includes(action) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        textAlign: "center",
-        sx: {
-          mt: 2
-        },
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
-          href: (0, _ufo.joinURL)(prefix, `/customer/subscription/${subscriptionId}`),
-          children: t("payment.checkout.portal", {
-            payee
-          })
-        })
-      })]
+      }), next]
     })
   });
 }
 PaymentSuccess.defaultProps = {
+  invoiceId: "",
   subscriptionId: ""
 };
 const Div = (0, _system.styled)("div")`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.175",
+  "version": "1.13.177",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -89,7 +89,7 @@
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
-    "@blocklet/payment-types": "1.13.175",
+    "@blocklet/payment-types": "1.13.177",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
     "@storybook/addon-links": "^7.6.13",
@@ -118,5 +118,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "c92fcdc39f8e4298cef25b08b408d5658b5f068c"
+  "gitHead": "be1b8ffce6d158f52c0103eefa415577fb793be2"
 }

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

@@ -1,7 +1,18 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { Paginated, TInvoiceExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
-import { Box, Button, CircularProgress, Divider, List, ListItem, ListSubheader, Typography } from '@mui/material';
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Divider,
+  Link,
+  List,
+  ListItem,
+  ListSubheader,
+  Stack,
+  Typography,
+} from '@mui/material';
 import { fromUnitToToken } from '@ocap/util';
 import { useRequest } from 'ahooks';
 import { joinURL } from 'ufo';
@@ -30,7 +41,7 @@ const fetchSubscriptionData = (id: string): Promise<TSubscriptionExpanded> => {
 };
 
 export default function MiniInvoiceList() {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
 
   const subscriptionId = new URL(window.location.href).searchParams.get('id');
 
@@ -139,13 +150,28 @@ export default function MiniInvoiceList() {
             )}
           </List>
         </Box>
-        <Button
-          target="_blank"
-          variant="contained"
-          sx={{ marginTop: '10px 0', width: '100%', color: '#fff!important' }}
-          href={joinURL(window.location.origin, getPrefix(), `/customer/subscription/${subscription.id}`)}>
-          {t('payment.customer.subscriptions.title')}
-        </Button>
+        <Stack direction="row" justifyContent="center" spacing={2} sx={{ mt: 2 }}>
+          {subscription.service_actions?.map((x) => (
+            // @ts-ignore
+            <Button
+              component={Link}
+              key={x.name}
+              variant={x.variant}
+              color={x.color}
+              href={x.link}
+              size="small"
+              sx={{ textDecoration: 'none !important' }}>
+              {x.text[locale] || x.text.en || x.name}
+            </Button>
+          ))}
+          <Button
+            target="_blank"
+            variant="contained"
+            sx={{ color: '#fff!important', width: subscription.service_actions?.length ? 'auto' : '100%' }}
+            href={joinURL(window.location.origin, getPrefix(), `/customer/subscription/${subscription.id}`)}>
+            {t('payment.customer.subscriptions.title')}
+          </Button>
+        </Stack>
       </Box>
     </Position>
   );

package/src/locales/en.tsx

@@ -40,6 +40,10 @@ export default flat({
     email: 'Email',
     did: 'DID',
     txHash: 'Transaction',
+    delegateTxHash: 'Delegate Transaction',
+    stakeTxHash: 'Stake Transaction',
+    slashTxHash: 'Slash Transaction',
+    transferTxHash: 'Transfer Transaction',
     customer: 'Customer',
     currency: 'Currency',
     custom: 'Custom',
@@ -91,7 +95,10 @@ export default flat({
       continue: 'Confirm {action}',
       connect: 'Connect and {action}',
       login: 'Login to load and save contact information',
-      portal: 'Manage subscriptions',
+      next: {
+        subscription: 'View subscription',
+        invoice: 'View invoice',
+      },
       cardPay: '{action} with card',
       empty: 'No thing to pay',
       per: 'per',

package/src/locales/zh.tsx

@@ -40,6 +40,10 @@ export default flat({
     email: '邮箱',
     did: 'DID',
     txHash: '交易哈希',
+    delegateTxHash: '授权交易',
+    stakeTxHash: '质押交易',
+    slashTxHash: '罚没交易',
+    transferTxHash: '扣款交易',
     customer: '客户',
     currency: '币种',
     custom: '自定义',
@@ -91,7 +95,10 @@ export default flat({
       continue: '确认{action}',
       connect: '连接并{action}',
       login: '登录以加载并保存联系信息',
-      portal: '管理订阅',
+      next: {
+        subscription: '查看订阅',
+        invoice: '查看账单',
+      },
       cardPay: '使用卡片{action}',
       empty: '没有可支付的项目',
       per: '每',

package/src/payment/index.tsx

@@ -255,6 +255,7 @@ export function PaymentInner({
               <PaymentSuccess
                 payee={getStatementDescriptor(state.checkoutSession.line_items)}
                 action={state.checkoutSession.mode}
+                invoiceId={state.checkoutSession.invoice_id}
                 subscriptionId={state.checkoutSession.subscription_id}
                 message={
                   paymentLink?.after_completion?.hosted_confirmation?.custom_message ||

package/src/payment/success.tsx

@@ -9,12 +9,32 @@ type Props = {
   message: string;
   action: string;
   payee: string;
+  invoiceId?: string;
   subscriptionId?: string;
 };
 
-export default function PaymentSuccess({ message, action, payee, subscriptionId }: Props) {
+export default function PaymentSuccess({ message, action, payee, invoiceId, subscriptionId }: Props) {
   const { t } = useLocaleContext();
   const { prefix } = usePaymentContext();
+  let next: any = null;
+  if (['subscription', 'setup'].includes(action) && subscriptionId) {
+    next = (
+      <Typography textAlign="center" sx={{ mt: 2 }}>
+        <Link href={joinURL(prefix, `/customer/subscription/${subscriptionId}`)}>
+          {t('payment.checkout.next.subscription', { payee })}
+        </Link>
+      </Typography>
+    );
+  } else if (invoiceId) {
+    next = (
+      <Typography textAlign="center" sx={{ mt: 2 }}>
+        <Link href={joinURL(prefix, `/customer/invoice/${invoiceId}`)}>
+          {t('payment.checkout.next.invoice', { payee })}
+        </Link>
+      </Typography>
+    );
+  }
+
   return (
     <Grow in>
       <Stack direction="column" alignItems="center" justifyContent="center" sx={{ height: 360 }}>
@@ -32,19 +52,14 @@ export default function PaymentSuccess({ message, action, payee, subscriptionId
         <Typography variant="body1" color="text.secondary" textAlign="center">
           {t('payment.checkout.completed.tip', { payee })}
         </Typography>
-        {['subscription', 'setup'].includes(action) && (
-          <Typography textAlign="center" sx={{ mt: 2 }}>
-            <Link href={joinURL(prefix, `/customer/subscription/${subscriptionId}`)}>
-              {t('payment.checkout.portal', { payee })}
-            </Link>
-          </Typography>
-        )}
+        {next}
       </Stack>
     </Grow>
   );
 }
 
 PaymentSuccess.defaultProps = {
+  invoiceId: '',
   subscriptionId: '',
 };