@blocklet/payment-react 1.13.126 → 1.13.128

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

@@ -0,0 +1,203 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = MiniInvoiceList;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+var _util = require("@ocap/util");
+var _ahooks = require("ahooks");
+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 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 {
+    t
+  } = (0, _context.useLocaleContext)();
+  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) {
+    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 infoList = [{
+    name: t("payment.customer.subscriptions.plan"),
+    value: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      fontWeight: 600,
+      sx: {
+        marginRight: "10px"
+      },
+      children: (0, _util2.formatSubscriptionProduct)(subscription.items)
+    })
+  }, {
+    name: t("payment.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)
+    })
+  }];
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(Position, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      title: t("payment.checkout.subscription")
+    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItem: "center",
+        justifyContent: "flex-start",
+        padding: "16px",
+        width: "100%",
+        height: "100%"
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        component: "h3",
+        sx: {
+          textAlign: "center"
+        },
+        variant: "h5",
+        gutterBottom: true,
+        children: t("payment.customer.subscriptions.current")
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          marginTop: "12px"
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.List, {
+          children: infoList.map(({
+            name,
+            value
+          }) => {
+            return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.ListItem, {
+              disableGutters: true,
+              sx: {
+                display: "flex",
+                justifyContent: "space-between"
+              },
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                component: "span",
+                children: name
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                component: "span",
+                children: value
+              })]
+            }, name);
+          })
+        })
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Divider, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          marginTop: "12px"
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.List, {
+          sx: {
+            overflow: "auto",
+            maxHeight: {
+              xs: "240px",
+              md: "360px",
+              padding: 0
+            }
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListSubheader, {
+            disableGutters: true,
+            sx: {
+              padding: 0
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "h2",
+              variant: "h6",
+              fontSize: "16px",
+              children: t("payment.customer.invoices")
+            })
+          }), (data.list || []).map(item => {
+            return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.ListItem, {
+              disableGutters: true,
+              sx: {
+                display: "flex",
+                justifyContent: "space-between"
+              },
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                component: "span",
+                children: (0, _util2.formatToDate)(item.created_at)
+              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                component: "span",
+                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)
+              })]
+            }, item.id);
+          })]
+        })
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        target: "_top",
+        variant: "contained",
+        sx: {
+          marginTop: "auto",
+          width: "100%"
+        },
+        href: "",
+        children: t("payment.customer.subscriptions.title")
+      })]
+    })]
+  });
+}
+function Position({
+  children
+}) {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+    className: "mini-invoice-box",
+    sx: {
+      position: "absolute",
+      right: 0,
+      top: "30px",
+      justifyContent: "center",
+      padding: "8px",
+      minWidth: "400px",
+      background: "#fff",
+      zIndex: 9,
+      boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)"
+    },
+    children
+  });
+}

package/lib/index.d.ts

@@ -8,13 +8,14 @@ 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 Amount from './payment/amount';
 import PhoneInput from './payment/form/phone';
 import Payment from './payment/index';
 import ProductSkeleton from './payment/product-skeleton';
-import CustomerInvoiceList from './portal/invoice/list';
-import CustomerPaymentList from './portal/payment/list';
 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, };
+export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, };

package/lib/index.js

@@ -14,12 +14,13 @@ var _exportNames = {
   Status: true,
   Switch: true,
   dayjs: true,
+  CustomerInvoiceList: true,
+  MiniInvoiceList: true,
+  CustomerPaymentList: true,
   Amount: true,
   PhoneInput: true,
   Payment: true,
   ProductSkeleton: true,
-  CustomerInvoiceList: true,
-  CustomerPaymentList: true,
   translations: true,
   createTranslator: true
 };
@@ -56,7 +57,7 @@ Object.defineProperty(exports, "CustomerInvoiceList", {
 Object.defineProperty(exports, "CustomerPaymentList", {
   enumerable: true,
   get: function () {
-    return _list2.default;
+    return _list3.default;
   }
 });
 Object.defineProperty(exports, "FormInput", {
@@ -71,6 +72,12 @@ Object.defineProperty(exports, "Livemode", {
     return _livemode.default;
   }
 });
+Object.defineProperty(exports, "MiniInvoiceList", {
+  enumerable: true,
+  get: function () {
+    return _list2.default;
+  }
+});
 Object.defineProperty(exports, "Payment", {
   enumerable: true,
   get: function () {
@@ -141,12 +148,13 @@ 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 _amount = _interopRequireDefault(require("./payment/amount"));
 var _phone = _interopRequireDefault(require("./payment/form/phone"));
 var _index = _interopRequireDefault(require("./payment/index"));
 var _productSkeleton = _interopRequireDefault(require("./payment/product-skeleton"));
-var _list = _interopRequireDefault(require("./portal/invoice/list"));
-var _list2 = _interopRequireDefault(require("./portal/payment/list"));
 var _util = require("./util");
 Object.keys(_util).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/locales/en.js

@@ -215,6 +215,8 @@ module.exports = (0, _flat.default)({
         empty: "Seems you do not have any payment here"
       },
       subscriptions: {
+        plan: "Plan",
+        nextInvoice: "Next Invoice",
         title: "Manage subscriptions",
         current: "Current subscriptions",
         empty: "Seems you do not have any subscriptions here"

package/lib/locales/zh.js

@@ -215,6 +215,8 @@ module.exports = (0, _flat.default)({
         empty: "\u4F60\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"

package/lib/payment/form/index.js

@@ -258,6 +258,7 @@ function PaymentForm({
       handleSubmit(onSubmit)();
     } else {
       session?.login({
+        // @ts-ignored
         onSuccess: onUserLoggedIn,
         extraParams: {}
       });
@@ -395,6 +396,9 @@ function PaymentForm({
                       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                         variant: "h5",
                         component: "div",
+                        sx: {
+                          fontSize: "18px"
+                        },
                         children: x.symbol
                       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                         sx: {

package/lib/payment/index.d.ts

@@ -5,7 +5,7 @@ type Props = CheckoutContext & CheckoutCallbacks & {
     completed?: boolean;
     error?: any;
 };
-declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, }: Props): import("react").JSX.Element;
+declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, goBack, }: Props): import("react").JSX.Element;
 declare namespace Payment {
     var defaultProps: {
         completed: boolean;
@@ -16,7 +16,7 @@ export default Payment;
 type MainProps = CheckoutContext & CheckoutCallbacks & {
     completed?: boolean;
 };
-export declare function PaymentInner({ checkoutSession, paymentMethods, paymentLink, paymentIntent, customer, completed, mode, onPaid, onError, }: MainProps): import("react").JSX.Element;
+export declare function PaymentInner({ checkoutSession, paymentMethods, paymentLink, paymentIntent, customer, completed, mode, onPaid, onError, goBack, }: MainProps): import("react").JSX.Element;
 export declare namespace PaymentInner {
     var defaultProps: {
         completed: boolean;

package/lib/payment/index.js

@@ -9,6 +9,7 @@ module.exports = Payment;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
 var _system = require("@mui/system");
 var _ahooks = require("ahooks");
@@ -40,7 +41,8 @@ function Payment({
   error,
   mode,
   onPaid,
-  onError
+  onError,
+  goBack
 }) {
   const {
     t
@@ -50,6 +52,12 @@ function Payment({
     livemode,
     setLivemode
   } = (0, _payment.usePaymentContext)();
+  const [delay, setDelay] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setTimeout(() => {
+      setDelay(true);
+    }, 500);
+  }, []);
   (0, _react.useEffect)(() => {
     if (checkoutSession) {
       if (livemode !== checkoutSession.livemode) {
@@ -66,7 +74,7 @@ function Payment({
       description: (0, _util.formatError)(error)
     });
   }
-  if (!checkoutSession) {
+  if (!checkoutSession || !delay) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
       mode,
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -104,6 +112,7 @@ function Payment({
     customer,
     onPaid,
     onError,
+    goBack,
     mode
   });
 }
@@ -119,7 +128,8 @@ function PaymentInner({
   completed,
   mode,
   onPaid,
-  onError
+  onError,
+  goBack
 }) {
   const {
     t
@@ -215,9 +225,19 @@ function PaymentInner({
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.FormProvider, {
     ...methods,
-    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
+    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
       mode,
-      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      children: [mode !== "standalone" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.ArrowBackOutlined, {
+        sx: {
+          mr: 0.5,
+          color: "text.secondary",
+          alignSelf: "flex-start",
+          margin: "16px 0",
+          cursor: "pointer"
+        },
+        onClick: goBack,
+        fontSize: "medium"
+      }) : null, /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         className: "cko-container",
         sx: {
           gap: {
@@ -260,7 +280,7 @@ function PaymentInner({
         }), mode === "standalone" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
           className: "cko-footer"
         })]
-      })
+      })]
     })
   });
 }
@@ -370,11 +390,11 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
   }
 
   .cko-payment-card:nth-child(odd) {
-    margin-right: 16px;
+    margin-right: 8px;
   }
 
   .cko-payment-card-unselect:nth-child(odd) {
-    margin-right: 16px;
+    margin-right: 8px;
   }
 
   .cko-payment-card::after {

package/lib/types/index.d.ts

@@ -16,4 +16,5 @@ export type CheckoutProps = Partial<CheckoutCallbacks> & {
 export type CheckoutCallbacks = {
     onPaid: (res: CheckoutContext) => void;
     onError: (err: Error) => void;
+    goBack?: () => void;
 };

package/lib/util.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PriceCurrency, PriceRecurring, TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded } from '@blocklet/payment-types';
+import type { PriceCurrency, PriceRecurring, TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const getPrefix: () => any;
 export declare function formatToDate(date: Date | string | number, locale?: string): any;
@@ -47,6 +47,7 @@ export declare function findCurrency(methods: TPaymentMethodExpanded[], currency
 export declare function isValidCountry(code: string): boolean;
 export declare function stopEvent(e: React.SyntheticEvent<any>): void;
 export declare function sleep(ms: number): Promise<unknown>;
+export declare function formatSubscriptionProduct(items: TSubscriptionItemExpanded[], maxLength?: number): string;
 export declare const getSubscriptionTimeSummary: (subscription: TSubscriptionExpanded) => string;
 export declare const getSubscriptionAction: (subscription: TSubscriptionExpanded) => {
     action: string;

package/lib/util.js

@@ -12,6 +12,7 @@ exports.formatError = void 0;
 exports.formatLineItemPricing = formatLineItemPricing;
 exports.formatPriceAmount = exports.formatPrice = exports.formatPrettyMsLocale = exports.formatLocale = void 0;
 exports.formatRecurring = formatRecurring;
+exports.formatSubscriptionProduct = formatSubscriptionProduct;
 exports.formatTime = formatTime;
 exports.formatToDate = formatToDate;
 exports.formatToDatetime = formatToDatetime;
@@ -485,6 +486,10 @@ function sleep(ms) {
     setTimeout(resolve, ms);
   });
 }
+function formatSubscriptionProduct(items, maxLength = 2) {
+  const names = items.map(x => x.price.product?.name).filter(Boolean);
+  return names.slice(0, maxLength).join(", ") + (names.length > maxLength ? ` and ${names.length - maxLength} more` : "");
+}
 const getSubscriptionTimeSummary = subscription => {
   const lines = [`Started on ${formatToDate(subscription.start_date * 1e3)}`];
   if (subscription.status === "active" || subscription.status === "trialing") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.126",
+  "version": "1.13.128",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -52,8 +52,8 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.9.19",
-    "@arcblock/ux": "^2.9.19",
+    "@arcblock/did-connect": "^2.9.23",
+    "@arcblock/ux": "^2.9.23",
     "@mui/icons-material": "^5.15.6",
     "@mui/lab": "^5.0.0-alpha.162",
     "@mui/material": "^5.15.6",
@@ -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.126",
+    "@blocklet/payment-types": "1.13.128",
     "@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": "efeb0d3762e61e2a6642330b86a41aa4f0847f36"
+  "gitHead": "b518cfcb827855501a03f0675cb9025e75b8538e"
 }

package/src/checkout/form.tsx

@@ -21,7 +21,7 @@ const fetchCheckoutSession = async (id: string): Promise<CheckoutContext> => {
 };
 
 // FIXME: @wangshijun support popup
-export default function CheckoutForm({ id, onPaid, onError, mode, extraParams }: CheckoutProps) {
+export default function CheckoutForm({ id, onPaid, onError, mode, goBack, extraParams }: CheckoutProps) {
   if (!id.startsWith('plink_') && !id.startsWith('cs_')) {
     throw new Error('Either a checkoutSession or a paymentLink id is required.');
   }
@@ -62,6 +62,7 @@ export default function CheckoutForm({ id, onPaid, onError, mode, extraParams }:
       error={apiError || state.appError}
       onPaid={handlePaid}
       onError={handleError}
+      goBack={goBack}
       mode={mode as string}
     />
   );

package/src/checkout/table.tsx

@@ -2,6 +2,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TPricingTableExpanded } from '@blocklet/payment-types';
 import { Alert, Stack, Typography } from '@mui/material';
+import { Box } from '@mui/system';
 import { useRequest } from 'ahooks';
 import { useState } from 'react';
 
@@ -65,6 +66,10 @@ export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }
       });
   };
 
+  const goBack = () => {
+    setSessionId('');
+  };
+
   if (!sessionId) {
     if (mode === 'standalone') {
       return (
@@ -81,5 +86,9 @@ export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }
     return <PricingTable mode="select" table={data} onSelect={handleSelect} />;
   }
 
-  return <CheckoutForm id={sessionId} onPaid={onPaid} onError={onError} mode={mode} />;
+  return (
+    <Box>
+      <CheckoutForm id={sessionId} onPaid={onPaid} onError={onError} mode={mode} goBack={goBack} />
+    </Box>
+  );
 }

package/src/components/pricing-table.tsx

@@ -127,7 +127,8 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
           flexWrap="wrap"
           direction="row"
           gap="calc(10px + 3%)"
-          justifyContent={alignItems === 'center' ? 'center' : 'flex-start'}>
+          justifyContent={alignItems === 'center' ? 'center' : 'flex-start'}
+          className="price-table-wrap">
           {grouped[state.interval as string]?.map(
             (x: TPricingTableItem & { is_selected?: boolean; is_disabled?: boolean }) => {
               let action = x.subscription_data?.trial_period_days

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

@@ -108,7 +108,7 @@ export default function CustomerInvoiceList({ customer_id }: Props) {
           <Button variant="text" type="button" color="inherit" onClick={loadMore} disabled={loadingMore}>
             {loadingMore
               ? t('common.loadingMore', { resource: t('payment.customer.invoices') })
-              : t('common.loadMore', { resource: t('payament.customer.invoices') })}
+              : t('common.loadMore', { resource: t('payment.customer.invoices') })}
           </Button>
         )}
         {!hasMore && data.count > pageSize && (