@blocklet/payment-react 1.13.124 → 1.13.126

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.124",
+  "version": "1.13.126",
   "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.124",
+    "@blocklet/payment-types": "1.13.126",
     "@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": "aa43e00accb681c724d88facc2dd5b61519e17ef"
+  "gitHead": "efeb0d3762e61e2a6642330b86a41aa4f0847f36"
 }

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,
+};

package/src/components/pricing-table.tsx

@@ -17,6 +17,7 @@ import {
   ToggleButtonGroup,
   Typography,
 } from '@mui/material';
+import { styled } from '@mui/system';
 import { useSetState } from 'ahooks';
 import { useEffect } from 'react';
 
@@ -83,125 +84,135 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     }
   };
 
+  const Root = styled(Box)`
+    @media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
+      .price-table-item {
+        width: 90% !important;
+      }
+    }
+  `;
   return (
-    <Stack
-      direction="column"
-      alignItems={alignItems === 'center' ? 'center' : 'flex-start'}
-      sx={{
-        pt: {
-          xs: 4,
-          sm: 2,
-        },
-        gap: {
-          xs: 3,
-          sm: mode === 'select' ? 3 : 5,
-        },
-      }}>
-      {Object.keys(recurring).length > 1 && (
-        <ToggleButtonGroup
-          color="primary"
-          value={state.interval}
-          onChange={(_, value) => {
-            if (value !== null) {
-              setState({ interval: value });
-            }
-          }}
-          exclusive>
-          {Object.keys(recurring).map((x) => (
-            <ToggleButton key={x} value={x} sx={{ textTransform: 'capitalize' }}>
-              {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
-            </ToggleButton>
-          ))}
-        </ToggleButtonGroup>
-      )}
+    <Root>
       <Stack
-        flexWrap="wrap"
-        direction="row"
-        gap={{ xs: 3, sm: 5, md: mode === 'checkout' ? 10 : 5 }}
-        justifyContent={alignItems === 'center' ? 'center' : 'flex-start'}>
-        {grouped[state.interval as string]?.map(
-          (x: TPricingTableItem & { is_selected?: boolean; is_disabled?: boolean }) => {
-            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');
-            }
+        direction="column"
+        alignItems={alignItems === 'center' ? 'center' : 'flex-start'}
+        sx={{
+          pt: {
+            xs: 4,
+            sm: 2,
+          },
+          gap: {
+            xs: 3,
+            sm: mode === 'select' ? 3 : 5,
+          },
+        }}>
+        {Object.keys(recurring).length > 1 && (
+          <ToggleButtonGroup
+            color="primary"
+            value={state.interval}
+            onChange={(_, value) => {
+              if (value !== null) {
+                setState({ interval: value });
+              }
+            }}
+            exclusive>
+            {Object.keys(recurring).map((x) => (
+              <ToggleButton key={x} value={x} sx={{ textTransform: 'capitalize' }}>
+                {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
+        )}
+        <Stack
+          flexWrap="wrap"
+          direction="row"
+          gap="calc(10px + 3%)"
+          justifyContent={alignItems === 'center' ? 'center' : 'flex-start'}>
+          {grouped[state.interval as string]?.map(
+            (x: TPricingTableItem & { is_selected?: boolean; is_disabled?: boolean }) => {
+              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 (
-              <Fade key={x.price_id} in>
-                <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%)',
-                    },
-                  }}>
-                  <Box textAlign="center">
+              return (
+                <Fade key={x.price_id} in>
+                  <Stack
+                    padding={4}
+                    spacing={2}
+                    direction="column"
+                    alignItems="center"
+                    className="price-table-item"
+                    justifyContent="center"
+                    sx={{
+                      width: 0.9 / grouped[state.interval as string].length,
+                      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%)',
+                      },
+                    }}>
+                    <Box textAlign="center">
+                      <Stack direction="row" alignItems="center" spacing={1}>
+                        <Typography variant="h5" color="text.primary" fontWeight={600}>
+                          {x.product.name}
+                        </Typography>
+                        {x.is_highlight && <Chip label={x.highlight_text} color="default" size="small" />}
+                      </Stack>
+                      <Typography color="text.secondary">{x.product.description}</Typography>
+                    </Box>
                     <Stack direction="row" alignItems="center" spacing={1}>
-                      <Typography variant="h5" color="text.primary" fontWeight={600}>
-                        {x.product.name}
-                      </Typography>
-                      {x.is_highlight && <Chip label={x.highlight_text} color="default" size="small" />}
-                    </Stack>
-                    <Typography color="text.secondary">{x.product.description}</Typography>
-                  </Box>
-                  <Stack direction="row" alignItems="center" spacing={1}>
-                    <Amount amount={formatPriceAmount(x.price, table.currency, x.product.unit_label)} />
-                    <Stack direction="column" alignItems="flex-start">
-                      <Typography component="span" color="text.secondary" fontSize="0.8rem">
-                        {t('payment.checkout.per')}
-                      </Typography>
-                      <Typography component="span" color="text.secondary" fontSize="0.8rem">
-                        {formatRecurring(x.price.recurring as PriceRecurring, false, '', locale)}
-                      </Typography>
+                      <Amount amount={formatPriceAmount(x.price, table.currency, x.product.unit_label)} />
+                      <Stack direction="column" alignItems="flex-start">
+                        <Typography component="span" color="text.secondary" fontSize="0.8rem">
+                          {t('payment.checkout.per')}
+                        </Typography>
+                        <Typography component="span" color="text.secondary" fontSize="0.8rem">
+                          {formatRecurring(x.price.recurring as PriceRecurring, false, '', locale)}
+                        </Typography>
+                      </Stack>
                     </Stack>
+                    <LoadingButton
+                      fullWidth
+                      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)}>
+                      {action}
+                    </LoadingButton>
+                    {x.product.features.length > 0 && (
+                      <Box>
+                        <Typography>{t('payment.checkout.include')}</Typography>
+                        <List dense>
+                          {x.product.features.map((f: any) => (
+                            <ListItem key={f.name} disableGutters disablePadding>
+                              <ListItemIcon sx={{ minWidth: 25 }}>
+                                <CheckOutlined color="success" fontSize="small" />
+                              </ListItemIcon>
+                              <ListItemText primary={f.name} />
+                            </ListItem>
+                          ))}
+                        </List>
+                      </Box>
+                    )}
                   </Stack>
-                  <LoadingButton
-                    fullWidth
-                    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)}>
-                    {action}
-                  </LoadingButton>
-                  {x.product.features.length > 0 && (
-                    <Box>
-                      <Typography>{t('payment.checkout.include')}</Typography>
-                      <List dense>
-                        {x.product.features.map((f: any) => (
-                          <ListItem key={f.name} disableGutters disablePadding>
-                            <ListItemIcon sx={{ minWidth: 25 }}>
-                              <CheckOutlined color="success" fontSize="small" />
-                            </ListItemIcon>
-                            <ListItemText primary={f.name} />
-                          </ListItem>
-                        ))}
-                      </List>
-                    </Box>
-                  )}
-                </Stack>
-              </Fade>
-            );
-          }
-        )}
+                </Fade>
+              );
+            }
+          )}
+        </Stack>
       </Stack>
-    </Stack>
+    </Root>
   );
 }

package/src/index.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,6 +12,8 @@ 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';
@@ -25,10 +28,13 @@ export {
   Status,
   Livemode,
   Switch,
+  ConfirmDialog,
   CheckoutForm,
   CheckoutTable,
   Payment,
   PricingTable,
   ProductSkeleton,
   Amount,
+  CustomerInvoiceList,
+  CustomerPaymentList,
 };

package/src/locales/en.tsx

@@ -150,6 +150,7 @@ export default flat({
       },
     },
     customer: {
+      payments: 'Payment History',
       invoices: 'Invoice History',
       details: 'Billing Details',
       update: 'Update Information',
@@ -206,7 +207,10 @@ export default flat({
         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/src/locales/zh.tsx

@@ -147,6 +147,7 @@ export default flat({
       },
     },
     customer: {
+      payments: '支付历史',
       invoices: '发票历史',
       details: '计费详情',
       update: '更新客户信息',
@@ -202,6 +203,9 @@ export default flat({
         pay: '支付此发票',
         paySuccess: '支付成功',
         payError: '支付失败',
+        empty: '你没有任何发票',
+      },
+      payment: {
         empty: '你没有任何支付',
       },
       subscriptions: {

package/src/payment/index.tsx

@@ -350,18 +350,18 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
   }
 
   .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 {