@blocklet/payment-react 1.13.123 → 1.13.125

package/lib/portal/invoice/list.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = CustomerInvoiceList;
+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 groupByDate = items => {
+  const grouped = {};
+  items.forEach(item => {
+    const date = new Date(item.created_at).toLocaleDateString();
+    if (!grouped[date]) {
+      grouped[date] = [];
+    }
+    grouped[date]?.push(item);
+  });
+  return grouped;
+};
+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 CustomerInvoiceList({
+  customer_id
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    data,
+    loadMore,
+    loadingMore,
+    loading
+  } = (0, _ahooks.useInfiniteScroll)(d => {
+    const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
+    return fetchData({
+      page,
+      pageSize,
+      status: "open,paid,uncollectible",
+      customer_id
+    });
+  }, {
+    reloadDeps: [customer_id]
+  });
+  if (loading || !data) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
+  }
+  if (data && data.list.length === 0) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      color: "text.secondary",
+      children: t("payment.customer.invoice.empty")
+    });
+  }
+  const hasMore = data && data.list.length < data.count;
+  const grouped = groupByDate(data.list);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    direction: "column",
+    gap: 1,
+    sx: {
+      mt: 1
+    },
+    children: [Object.entries(grouped).map(([date, invoices]) => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontWeight: "bold",
+          color: "text.secondary",
+          mt: 2,
+          mb: 1
+        },
+        children: date
+      }), invoices.map(invoice => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: {
+          xs: "column",
+          sm: "row"
+        },
+        sx: {
+          my: 1
+        },
+        gap: {
+          xs: 0.5,
+          sm: 1.5,
+          md: 3
+        },
+        flexWrap: "nowrap",
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 3,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
+            href: `/customer/invoice/${invoice.id}`,
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "span",
+              children: invoice.number
+            })
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 3,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            children: (0, _util2.formatToDate)(invoice.created_at)
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 2,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            textAlign: "right",
+            children: [(0, _util.fromUnitToToken)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 2,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+            label: invoice.status,
+            color: (0, _util2.getInvoiceStatusColor)(invoice.status)
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 4,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            children: invoice.description || invoice.id
+          })
+        })]
+      }, invoice.id))]
+    }, date)), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      children: [hasMore && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "text",
+        type: "button",
+        color: "inherit",
+        onClick: loadMore,
+        disabled: loadingMore,
+        children: loadingMore ? t("common.loadingMore", {
+          resource: t("payment.customer.invoices")
+        }) : t("common.loadMore", {
+          resource: t("payament.customer.invoices")
+        })
+      }), !hasMore && data.count > pageSize && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        color: "text.secondary",
+        children: t("common.noMore", {
+          resource: t("payment.customer.invoices")
+        })
+      })]
+    })]
+  });
+}

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

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

package/lib/portal/payment/list.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = CustomerPaymentList;
+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 groupByDate = items => {
+  const grouped = {};
+  items.forEach(item => {
+    const date = new Date(item.created_at).toLocaleDateString();
+    if (!grouped[date]) {
+      grouped[date] = [];
+    }
+    grouped[date]?.push(item);
+  });
+  return grouped;
+};
+const fetchData = (params = {}) => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach(key => {
+    search.set(key, String(params[key]));
+  });
+  return _api.default.get(`/api/payment-intents?${search.toString()}`).then(res => res.data);
+};
+const pageSize = 10;
+function CustomerPaymentList({
+  customer_id
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    data,
+    loadMore,
+    loadingMore,
+    loading
+  } = (0, _ahooks.useInfiniteScroll)(d => {
+    const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
+    return fetchData({
+      page,
+      pageSize,
+      customer_id
+    });
+  }, {
+    reloadDeps: [customer_id]
+  });
+  if (loading || !data) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
+  }
+  if (data && data.list.length === 0) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      color: "text.secondary",
+      children: t("payment.customer.payment.empty")
+    });
+  }
+  const hasMore = data && data.list.length < data.count;
+  const grouped = groupByDate(data.list);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    direction: "column",
+    gap: 1,
+    sx: {
+      mt: 1
+    },
+    children: [Object.entries(grouped).map(([date, payments]) => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontWeight: "bold",
+          color: "text.secondary",
+          mt: 2,
+          mb: 1
+        },
+        children: date
+      }), payments.map(item => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: {
+          xs: "column",
+          sm: "row"
+        },
+        sx: {
+          my: 1
+        },
+        gap: {
+          xs: 0.5,
+          sm: 1.5,
+          md: 3
+        },
+        flexWrap: "nowrap",
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 3,
+          sx: {
+            minWidth: "220px"
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            component: "span",
+            children: item.id
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 3,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            children: (0, _util2.formatToDate)(item.created_at)
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 2,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            textAlign: "right",
+            children: [(0, _util.fromUnitToToken)(item.amount, item.paymentCurrency.decimal), "\xA0", item.paymentCurrency.symbol]
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 3,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+            label: item.status,
+            color: (0, _util2.getPaymentIntentStatusColor)(item.status)
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 4,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            children: item.description || item.id
+          })
+        })]
+      }, item.id))]
+    }, date)), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      children: [hasMore && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "text",
+        type: "button",
+        color: "inherit",
+        onClick: loadMore,
+        disabled: loadingMore,
+        children: loadingMore ? t("common.loadingMore", {
+          resource: t("payment.customer.payments")
+        }) : t("common.loadMore", {
+          resource: t("payment.customer.payments")
+        })
+      }), !hasMore && data.count > pageSize && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        color: "text.secondary",
+        children: t("common.noMore", {
+          resource: t("payment.customer.payments")
+        })
+      })]
+    })]
+  });
+}

package/lib/util.d.ts

@@ -20,6 +20,10 @@ export declare function formatLineItemPricing(item: TLineItemExpanded, currency:
     secondary?: string;
     quantity: string;
 };
+export declare function getSubscriptionStatusColor(status: string): "success" | "primary" | "warning" | "error" | "default";
+export declare function getPaymentIntentStatusColor(status: string): "success" | "warning" | "default";
+export declare function getInvoiceStatusColor(status: string): "success" | "warning" | "default" | "secondary";
+export declare function getWebhookStatusColor(status: string): "success" | "default";
 export declare function getCheckoutAmount(items: TLineItemExpanded[], currency: TPaymentCurrency, includeFreeTrial?: boolean, upsell?: boolean): {
     subtotal: any;
     total: any;

package/lib/util.js

@@ -17,12 +17,17 @@ exports.formatToDate = formatToDate;
 exports.formatToDatetime = formatToDatetime;
 exports.formatUpsellSaving = formatUpsellSaving;
 exports.getCheckoutAmount = getCheckoutAmount;
+exports.getInvoiceStatusColor = getInvoiceStatusColor;
+exports.getPaymentIntentStatusColor = getPaymentIntentStatusColor;
 exports.getPrefix = void 0;
 exports.getPriceCurrencyOptions = getPriceCurrencyOptions;
 exports.getPriceUintAmountByCurrency = getPriceUintAmountByCurrency;
 exports.getRecurringPeriod = getRecurringPeriod;
 exports.getStatementDescriptor = getStatementDescriptor;
-exports.getSubscriptionTimeSummary = exports.getSubscriptionAction = void 0;
+exports.getSubscriptionAction = void 0;
+exports.getSubscriptionStatusColor = getSubscriptionStatusColor;
+exports.getSubscriptionTimeSummary = void 0;
+exports.getWebhookStatusColor = getWebhookStatusColor;
 exports.isValidCountry = isValidCountry;
 exports.mergeExtraParams = void 0;
 exports.sleep = sleep;
@@ -218,6 +223,62 @@ function formatLineItemPricing(item, currency, trial, locale = "en") {
     quantity
   };
 }
+function getSubscriptionStatusColor(status) {
+  switch (status) {
+    case "active":
+      return "success";
+    case "trialing":
+      return "primary";
+    case "incomplete":
+    case "incomplete_expired":
+    case "paused":
+      return "warning";
+    case "past_due":
+    case "unpaid":
+      return "error";
+    case "canceled":
+    default:
+      return "default";
+  }
+}
+function getPaymentIntentStatusColor(status) {
+  switch (status) {
+    case "succeeded":
+      return "success";
+    case "requires_payment_method":
+    case "requires_confirmation":
+    case "requires_action":
+    case "requires_capture":
+      return "warning";
+    case "canceled":
+    case "processing":
+    default:
+      return "default";
+  }
+}
+function getInvoiceStatusColor(status) {
+  switch (status) {
+    case "paid":
+      return "success";
+    case "open":
+      return "secondary";
+    case "uncollectible":
+      return "warning";
+    case "draft":
+    case "void":
+    default:
+      return "default";
+  }
+}
+function getWebhookStatusColor(status) {
+  switch (status) {
+    case "enabled":
+      return "success";
+    case "disabled":
+    default:
+      return "default";
+  }
+}
 function getCheckoutAmount(items, currency, includeFreeTrial = false, upsell = true) {
   let renew = new _util.BN(0);
   const total = items.reduce((acc, x) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.123",
+  "version": "1.13.125",
   "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.123",
+    "@blocklet/payment-types": "1.13.125",
     "@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": "ea37183dafcf5a89c0593886aa895b33eccf8529"
+  "gitHead": "6242d03d1b13c6e0d2875637db232dd8927207b6"
 }

package/src/api.ts

@@ -9,8 +9,8 @@ const api = axios.create();
 api.interceptors.request.use(
   (config) => {
     const prefix = getPrefix();
+    // 'https://storage.staging.abtnet.io/app/payment-kit/.well-known/service'
     config.baseURL = prefix || '';
-    config.timeout = 8000;
 
     const livemode = localStorage.getItem('livemode');
     const locale = getLocale(window.blocklet?.languages);

package/src/components/confirm.tsx

@@ -0,0 +1,39 @@
+import { Confirm } from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Typography } from '@mui/material';
+import type { EventHandler } from 'react';
+
+export default function ConfirmDialog({
+  onConfirm,
+  onCancel,
+  title,
+  message,
+  loading,
+}: {
+  onConfirm: EventHandler<any>;
+  onCancel: EventHandler<any>;
+  title: string | React.ReactNode;
+  message: string | React.ReactNode;
+  loading?: boolean;
+}) {
+  const { t } = useLocaleContext();
+
+  return (
+    <Confirm
+      open
+      title={title}
+      onConfirm={onConfirm}
+      onCancel={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' } }}>
+      <Typography>{message}</Typography>
+    </Confirm>
+  );
+}
+
+ConfirmDialog.defaultProps = {
+  loading: false,
+};