@blocklet/payment-react 1.13.123 → 1.13.125

package/lib/components/confirm.d.ts

@@ -0,0 +1,14 @@
+import type { EventHandler } from 'react';
+declare function ConfirmDialog({ onConfirm, onCancel, title, message, loading, }: {
+    onConfirm: EventHandler<any>;
+    onCancel: EventHandler<any>;
+    title: string | React.ReactNode;
+    message: string | React.ReactNode;
+    loading?: boolean;
+}): import("react").JSX.Element;
+declare namespace ConfirmDialog {
+    var defaultProps: {
+        loading: boolean;
+    };
+}
+export default ConfirmDialog;

package/lib/components/confirm.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = ConfirmDialog;
+var _jsxRuntime = require("react/jsx-runtime");
+var _Dialog = require("@arcblock/ux/lib/Dialog");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+function ConfirmDialog({
+  onConfirm,
+  onCancel,
+  title,
+  message,
+  loading
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.Confirm, {
+    open: true,
+    title,
+    onConfirm,
+    onCancel,
+    confirmButton: {
+      text: t("common.confirm"),
+      props: {
+        color: "error",
+        size: "small",
+        variant: "contained",
+        disabled: !!loading
+      }
+    },
+    cancelButton: {
+      text: t("common.cancel"),
+      props: {
+        color: "inherit",
+        size: "small"
+      }
+    },
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      children: message
+    })
+  });
+}
+ConfirmDialog.defaultProps = {
+  loading: false
+};

package/lib/components/pricing-table.js

@@ -10,6 +10,7 @@ var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _iconsMaterial = require("@mui/icons-material");
 var _lab = require("@mui/lab");
 var _material = require("@mui/material");
+var _system = require("@mui/system");
 var _ahooks = require("ahooks");
 var _react = require("react");
 var _amount = _interopRequireDefault(require("../payment/amount"));
@@ -78,151 +79,158 @@ function PricingTable({
       _Toast.default.error((0, _util.formatError)(err));
     }
   };
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-    direction: "column",
-    alignItems: alignItems === "center" ? "center" : "flex-start",
-    sx: {
-      pt: {
-        xs: 4,
-        sm: 2
-      },
-      gap: {
-        xs: 3,
-        sm: mode === "select" ? 3 : 5
+  const Root = (0, _system.styled)(_material.Box)`
+    @media (max-width: ${({
+    theme
+  }) => theme.breakpoints.values.sm}px) {
+      .price-table-item {
+        width: 90% !important;
       }
-    },
-    children: [Object.keys(recurring).length > 1 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButtonGroup, {
-      color: "primary",
-      value: state.interval,
-      onChange: (_, value) => {
-        if (value !== null) {
-          setState({
-            interval: value
-          });
+    }
+  `;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
+    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "column",
+      alignItems: alignItems === "center" ? "center" : "flex-start",
+      sx: {
+        pt: {
+          xs: 4,
+          sm: 2
+        },
+        gap: {
+          xs: 3,
+          sm: mode === "select" ? 3 : 5
         }
       },
-      exclusive: true,
-      children: Object.keys(recurring).map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButton, {
-        value: x,
-        sx: {
-          textTransform: "capitalize"
+      children: [Object.keys(recurring).length > 1 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButtonGroup, {
+        color: "primary",
+        value: state.interval,
+        onChange: (_, value) => {
+          if (value !== null) {
+            setState({
+              interval: value
+            });
+          }
         },
-        children: (0, _util.formatRecurring)(recurring[x], true, "", locale)
-      }, x))
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-      flexWrap: "wrap",
-      direction: "row",
-      gap: {
-        xs: 3,
-        sm: 5,
-        md: mode === "checkout" ? 10 : 5
-      },
-      justifyContent: alignItems === "center" ? "center" : "flex-start",
-      children: grouped[state.interval]?.map(x => {
-        let action = x.subscription_data?.trial_period_days ? t("payment.checkout.try") : t("payment.checkout.subscription");
-        if (mode === "select") {
-          action = x.is_selected ? t("payment.checkout.selected") : t("payment.checkout.select");
-        }
-        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
-          in: true,
-          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-            padding: 4,
-            spacing: 2,
-            direction: "column",
-            alignItems: "center",
-            sx: {
-              width: 320,
-              cursor: "pointer",
-              borderWidth: "1px",
-              borderStyle: "solid",
-              borderColor: mode === "select" && x.is_selected ? "primary.main" : "#eee",
-              borderRadius: 1,
-              transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
-              boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)",
-              "&:hover": {
-                borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
-                boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
-              }
-            },
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-              textAlign: "center",
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        exclusive: true,
+        children: Object.keys(recurring).map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+          value: x,
+          sx: {
+            textTransform: "capitalize"
+          },
+          children: (0, _util.formatRecurring)(recurring[x], true, "", locale)
+        }, x))
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+        flexWrap: "wrap",
+        direction: "row",
+        gap: "calc(10px + 3%)",
+        justifyContent: alignItems === "center" ? "center" : "flex-start",
+        children: grouped[state.interval]?.map(x => {
+          let action = x.subscription_data?.trial_period_days ? t("payment.checkout.try") : t("payment.checkout.subscription");
+          if (mode === "select") {
+            action = x.is_selected ? t("payment.checkout.selected") : t("payment.checkout.select");
+          }
+          return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+            in: true,
+            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+              padding: 4,
+              spacing: 2,
+              direction: "column",
+              alignItems: "center",
+              className: "price-table-item",
+              sx: {
+                width: "30%",
+                cursor: "pointer",
+                borderWidth: "1px",
+                borderStyle: "solid",
+                borderColor: mode === "select" && x.is_selected ? "primary.main" : "#eee",
+                borderRadius: 1,
+                transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
+                boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)",
+                "&:hover": {
+                  borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
+                  boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
+                }
+              },
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+                textAlign: "center",
+                children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+                  direction: "row",
+                  alignItems: "center",
+                  spacing: 1,
+                  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                    variant: "h5",
+                    color: "text.primary",
+                    fontWeight: 600,
+                    children: x.product.name
+                  }), x.is_highlight && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+                    label: x.highlight_text,
+                    color: "default",
+                    size: "small"
+                  })]
+                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                  color: "text.secondary",
+                  children: x.product.description
+                })]
+              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
                 direction: "row",
                 alignItems: "center",
                 spacing: 1,
-                children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  variant: "h5",
-                  color: "text.primary",
-                  fontWeight: 600,
-                  children: x.product.name
-                }), x.is_highlight && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
-                  label: x.highlight_text,
-                  color: "default",
-                  size: "small"
+                children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
+                  amount: (0, _util.formatPriceAmount)(x.price, table.currency, x.product.unit_label)
+                }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+                  direction: "column",
+                  alignItems: "flex-start",
+                  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                    component: "span",
+                    color: "text.secondary",
+                    fontSize: "0.8rem",
+                    children: t("payment.checkout.per")
+                  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                    component: "span",
+                    color: "text.secondary",
+                    fontSize: "0.8rem",
+                    children: (0, _util.formatRecurring)(x.price.recurring, false, "", locale)
+                  })]
                 })]
-              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                color: "text.secondary",
-                children: x.product.description
-              })]
-            }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-              direction: "row",
-              alignItems: "center",
-              spacing: 1,
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
-                amount: (0, _util.formatPriceAmount)(x.price, table.currency, x.product.unit_label)
-              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-                direction: "column",
-                alignItems: "flex-start",
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+                fullWidth: true,
+                size: "large",
+                variant: x.is_highlight || x.is_selected ? "contained" : "outlined",
+                color: x.is_highlight || x.is_selected ? "primary" : "info",
+                sx: {
+                  fontSize: "1.2rem"
+                },
+                loading: state.loading === x.price_id,
+                disabled: x.is_disabled,
+                onClick: () => handleSelect(x.price_id),
+                children: action
+              }), x.product.features.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
                 children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  component: "span",
-                  color: "text.secondary",
-                  fontSize: "0.8rem",
-                  children: t("payment.checkout.per")
-                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  component: "span",
-                  color: "text.secondary",
-                  fontSize: "0.8rem",
-                  children: (0, _util.formatRecurring)(x.price.recurring, false, "", locale)
+                  children: t("payment.checkout.include")
+                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.List, {
+                  dense: true,
+                  children: x.product.features.map(f => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.ListItem, {
+                    disableGutters: true,
+                    disablePadding: true,
+                    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+                      sx: {
+                        minWidth: 25
+                      },
+                      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.CheckOutlined, {
+                        color: "success",
+                        fontSize: "small"
+                      })
+                    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListItemText, {
+                      primary: f.name
+                    })]
+                  }, f.name))
                 })]
               })]
-            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
-              fullWidth: true,
-              size: "large",
-              loadingPosition: "end",
-              variant: x.is_highlight || x.is_selected ? "contained" : "outlined",
-              color: x.is_highlight || x.is_selected ? "primary" : "info",
-              sx: {
-                fontSize: "1.2rem"
-              },
-              loading: state.loading === x.price_id,
-              disabled: x.is_disabled,
-              onClick: () => handleSelect(x.price_id),
-              children: action
-            }), x.product.features.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                children: t("payment.checkout.include")
-              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.List, {
-                dense: true,
-                children: x.product.features.map(f => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.ListItem, {
-                  disableGutters: true,
-                  disablePadding: true,
-                  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
-                    sx: {
-                      minWidth: 25
-                    },
-                    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.CheckOutlined, {
-                      color: "success",
-                      fontSize: "small"
-                    })
-                  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListItemText, {
-                    primary: f.name
-                  })]
-                }, f.name))
-              })]
-            })]
-          })
-        }, x.price_id);
-      })
-    })]
+            })
+          }, x.price_id);
+        })
+      })]
+    })
   });
 }

package/lib/contexts/payment.d.ts

@@ -7,8 +7,10 @@ export interface Settings {
 }
 export type PaymentContextType = {
     livemode: boolean;
-    session: any;
-    connect: any;
+    session: import('@arcblock/did-connect/lib/types').SessionContext['session'] & {
+        user: any;
+    };
+    connect: import('@arcblock/did-connect/lib/types').SessionContext['connectApi'];
     prefix: string;
     settings: Settings;
     refresh: () => void;

package/lib/index.d.ts

@@ -1,6 +1,7 @@
 import api from './api';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
+import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
@@ -11,7 +12,9 @@ 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, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, };
+export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, };

package/lib/index.js

@@ -7,6 +7,7 @@ var _exportNames = {
   api: true,
   CheckoutForm: true,
   CheckoutTable: true,
+  ConfirmDialog: true,
   FormInput: true,
   Livemode: true,
   PricingTable: true,
@@ -17,6 +18,8 @@ var _exportNames = {
   PhoneInput: true,
   Payment: true,
   ProductSkeleton: true,
+  CustomerInvoiceList: true,
+  CustomerPaymentList: true,
   translations: true,
   createTranslator: true
 };
@@ -38,6 +41,24 @@ Object.defineProperty(exports, "CheckoutTable", {
     return _table.default;
   }
 });
+Object.defineProperty(exports, "ConfirmDialog", {
+  enumerable: true,
+  get: function () {
+    return _confirm.default;
+  }
+});
+Object.defineProperty(exports, "CustomerInvoiceList", {
+  enumerable: true,
+  get: function () {
+    return _list.default;
+  }
+});
+Object.defineProperty(exports, "CustomerPaymentList", {
+  enumerable: true,
+  get: function () {
+    return _list2.default;
+  }
+});
 Object.defineProperty(exports, "FormInput", {
   enumerable: true,
   get: function () {
@@ -113,6 +134,7 @@ Object.defineProperty(exports, "translations", {
 var _api = _interopRequireDefault(require("./api"));
 var _form = _interopRequireDefault(require("./checkout/form"));
 var _table = _interopRequireDefault(require("./checkout/table"));
+var _confirm = _interopRequireDefault(require("./components/confirm"));
 var _input = _interopRequireDefault(require("./components/input"));
 var _livemode = _interopRequireDefault(require("./components/livemode"));
 var _pricingTable = _interopRequireDefault(require("./components/pricing-table"));
@@ -123,6 +145,8 @@ 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

@@ -153,6 +153,7 @@ module.exports = (0, _flat.default)({
       }
     },
     customer: {
+      payments: "Payment History",
       invoices: "Invoice History",
       details: "Billing Details",
       update: "Update Information",
@@ -208,7 +209,10 @@ 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 payments here"
+        empty: "Seems you do not have any invoice here"
+      },
+      payment: {
+        empty: "Seems you do not have any payment here"
       },
       subscriptions: {
         title: "Manage subscriptions",

package/lib/locales/zh.js

@@ -153,6 +153,7 @@ module.exports = (0, _flat.default)({
       }
     },
     customer: {
+      payments: "\u652F\u4ED8\u5386\u53F2",
       invoices: "\u53D1\u7968\u5386\u53F2",
       details: "\u8BA1\u8D39\u8BE6\u60C5",
       update: "\u66F4\u65B0\u5BA2\u6237\u4FE1\u606F",
@@ -208,6 +209,9 @@ 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"
+      },
+      payment: {
         empty: "\u4F60\u6CA1\u6709\u4EFB\u4F55\u652F\u4ED8"
       },
       subscriptions: {

package/lib/payment/form/index.js

@@ -204,9 +204,9 @@ function PaymentForm({
           await handleConnected();
         } else {
           connect.open({
+            containerEl: void 0,
             action: checkoutSession.mode,
-            prefix: (0, _ufo.joinURL)((0, _util.getPrefix)(), "/api/did"),
-            timeout: 5 * 60 * 1e3,
+            prefix: (0, _ufo.joinURL)(window.location.origin, (0, _util.getPrefix)(), "/api/did"),
             extraParams: {
               checkoutSessionId: checkoutSession.id
             },

package/lib/payment/index.js

@@ -363,18 +363,18 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
   }
 
   .cko-payment-card-unselect {
-    border: 2px solid #bbb;
+    border: 2px solid #ddd;
     padding: 5px 10px;
     margin: 5px 0;
     cursor: pointer;
   }
 
   .cko-payment-card:nth-child(odd) {
-    margin-right: 5px;
+    margin-right: 16px;
   }
 
   .cko-payment-card-unselect:nth-child(odd) {
-    margin-right: 5px;
+    margin-right: 16px;
   }
 
   .cko-payment-card::after {

package/lib/portal/invoice/list.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type Props = {
+    customer_id: string;
+};
+export default function CustomerInvoiceList({ customer_id }: Props): import("react").JSX.Element;
+export {};