payment-kit 1.13.212 → 1.13.214

package/api/src/store/models/payment-method.ts

@@ -176,11 +176,15 @@ export class PaymentMethod extends Model<InferAttributes<PaymentMethod>, InferCr
       return stripeClients.get(this.id) as Stripe;
     }
 
-    const settings = PaymentMethod.decryptSettings(this.settings);
-    const client = new Stripe(settings.stripe?.secret_key as string, { apiVersion: STRIPE_API_VERSION });
-    stripeClients.set(this.id, client);
-
-    return client as Stripe;
+    try {
+      const settings = PaymentMethod.decryptSettings(this.settings);
+      const client = new Stripe(settings.stripe?.secret_key as string, { apiVersion: STRIPE_API_VERSION });
+      stripeClients.set(this.id, client);
+
+      return client as Stripe;
+    } catch (e) {
+      return {} as Stripe;
+    }
   }
 
   getOcapClient() {

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.13.212
+version: 1.13.214
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.212",
+  "version": "1.13.214",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev --open",
     "eject": "vite eject",
@@ -51,7 +51,7 @@
     "@arcblock/ux": "^2.9.66",
     "@arcblock/validator": "^1.18.115",
     "@blocklet/logger": "1.16.25",
-    "@blocklet/payment-react": "1.13.212",
+    "@blocklet/payment-react": "1.13.214",
     "@blocklet/sdk": "1.16.25",
     "@blocklet/ui-react": "^2.9.66",
     "@blocklet/uploader": "^0.0.76",
@@ -111,7 +111,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.25",
     "@arcblock/eslint-config-ts": "^0.3.0",
-    "@blocklet/payment-types": "1.13.212",
+    "@blocklet/payment-types": "1.13.214",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -150,5 +150,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "942de3b017723af85a6c271a7e4ddd35443bc84d"
+  "gitHead": "430206bb27ea5749a12717d5bd3caf00a04b610a"
 }

package/src/components/info-row.tsx

@@ -1,5 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Box, Stack } from '@mui/material';
+import { styled } from '@mui/system';
 import type { ReactNode } from 'react';
 
 type Props = {
@@ -20,13 +21,29 @@ export default function InfoRow(props: Props) {
   const isNone = props.value === '' || typeof props.value === 'undefined';
   const sizes = props.sizes || [1, 3];
   return (
-    <Stack direction="row" alignItems={props.alignItems} justifyContent="space-between" flexWrap="wrap" sx={{ mb: 1 }}>
-      <Box flex={sizes[0]} color="text.secondary">
-        {props.label}
-      </Box>
-      <Box flex={sizes[1]} color={isNone ? 'text.disabled' : 'color.primary'}>
-        {isNone ? t('common.none') : props.value}
-      </Box>
-    </Stack>
+    <Root>
+      <Stack
+        direction="row"
+        alignItems={props.alignItems}
+        justifyContent="space-between"
+        flexWrap="wrap"
+        sx={{ mb: 1 }}
+        className="info-row-wrapper">
+        <Box flex={sizes[0]} color="text.secondary">
+          {props.label}
+        </Box>
+        <Box flex={sizes[1]} color={isNone ? 'text.disabled' : 'color.primary'}>
+          {isNone ? t('common.none') : props.value}
+        </Box>
+      </Stack>
+    </Root>
   );
 }
+
+const Root = styled(Box)`
+  @media (max-width: 600px) {
+    .info-row-wrapper {
+      display: block !important;
+    }
+  }
+`;

package/src/components/payouts/list.tsx

@@ -45,6 +45,7 @@ type ListProps = {
     filter?: boolean;
     footer?: boolean;
   };
+  status?: string;
   customer_id?: string;
   payment_intent_id?: string;
 };
@@ -60,23 +61,24 @@ const getListKey = (props: ListProps) => {
   return 'payouts';
 };
 
-PaymentList.defaultProps = {
+PayoutList.defaultProps = {
   features: {
     customer: true,
     filter: true,
   },
+  status: '',
   customer_id: '',
   payment_intent_id: '',
 };
 
-export default function PaymentList({ customer_id, payment_intent_id, features }: ListProps) {
+export default function PayoutList({ customer_id, payment_intent_id, status, features }: ListProps) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
 
   const listKey = getListKey({ customer_id, payment_intent_id });
   const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
     defaultValue: {
-      status: '',
+      status: status as string,
       customer_id,
       payment_intent_id,
       pageSize: 20,

package/src/components/refund/list.tsx

@@ -47,6 +47,7 @@ type ListProps = {
   };
   customer_id?: string;
   invoice_id?: string;
+  status?: string;
   subscription_id?: string;
 };
 
@@ -71,10 +72,11 @@ RefundList.defaultProps = {
   },
   customer_id: '',
   invoice_id: '',
+  status: '',
   subscription_id: '',
 };
 
-export default function RefundList({ customer_id, invoice_id, subscription_id, features }: ListProps) {
+export default function RefundList({ customer_id, invoice_id, subscription_id, status, features }: ListProps) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
   const { startTransition } = useTransitionContext();
@@ -82,7 +84,7 @@ export default function RefundList({ customer_id, invoice_id, subscription_id, f
 
   const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
     defaultValue: {
-      status: '',
+      status: status as string,
       customer_id,
       invoice_id,
       subscription_id,

package/src/components/subscription/portal/actions.tsx

@@ -6,6 +6,7 @@ import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Button, Link, Stack } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import isEmpty from 'lodash/isEmpty';
+import { useState } from 'react';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
@@ -14,11 +15,12 @@ import CustomerCancelForm from './cancel';
 type Props = {
   subscription: TSubscriptionExpanded;
   showExtra?: boolean;
-  onChange: (action?: string) => any | Promise<any>;
+  onChange?: (action?: string) => any | Promise<any>;
 };
 
 SubscriptionActions.defaultProps = {
   showExtra: false,
+  onChange: null,
 };
 
 const fetchExtraActions = async ({
@@ -56,7 +58,8 @@ export function SubscriptionActionsInner({ subscription, showExtra, onChange }:
   const { t, locale } = useLocaleContext();
   const { reset, getValues } = useFormContext();
   const navigate = useNavigate();
-  const action = getSubscriptionAction(subscription);
+  const [subs, setSubscription] = useState(subscription);
+  const action = getSubscriptionAction(subs);
 
   const { data: extraActions } = useRequest(() => fetchExtraActions({ id: subscription.id, showExtra: !!showExtra }));
 
@@ -69,11 +72,12 @@ export function SubscriptionActionsInner({ subscription, showExtra, onChange }:
   const handleCancel = async () => {
     try {
       setState({ loading: true });
-      await api
+      const sub = await api
         .put(`/api/subscriptions/${state.subscription}/cancel`, { at: 'current_period_end', ...getValues().cancel })
         .then((res) => res.data);
+      setSubscription(sub);
       Toast.success(t('common.saved'));
-      onChange(state.action);
+      if (onChange) onChange(state.action);
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
@@ -86,9 +90,10 @@ export function SubscriptionActionsInner({ subscription, showExtra, onChange }:
   const handleRecover = async () => {
     try {
       setState({ loading: true });
-      await api.put(`/api/subscriptions/${state.subscription}/recover`).then((res) => res.data);
+      const sub = await api.put(`/api/subscriptions/${state.subscription}/recover`).then((res) => res.data);
+      setSubscription(sub);
       Toast.success(t('common.saved'));
-      onChange(state.action);
+      if (onChange) onChange(state.action);
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
@@ -197,4 +202,5 @@ export default function SubscriptionActions(props: Props) {
 
 SubscriptionActionsInner.defaultProps = {
   showExtra: false,
+  onChange: null,
 };

package/src/components/subscription/portal/list.tsx

@@ -24,7 +24,7 @@ const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TSubscri
 
 type Props = {
   id: string;
-  onChange: (action?: string) => any | Promise<any>;
+  onChange?: (action?: string) => any | Promise<any>;
   onClickSubscription: (subscription: TSubscriptionExpanded) => void | Promise<void>;
 } & Omit<StackProps, 'onChange'>;
 
@@ -145,3 +145,7 @@ export default function CurrentSubscriptions({ id, onChange, onClickSubscription
     </Stack>
   );
 }
+
+CurrentSubscriptions.defaultProps = {
+  onChange: null,
+};

package/src/pages/admin/billing/invoices/detail.tsx

@@ -1,7 +1,15 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { Status, api, formatBNStr, formatError, formatTime, getInvoiceStatusColor } from '@blocklet/payment-react';
+import {
+  Status,
+  TxLink,
+  api,
+  formatBNStr,
+  formatError,
+  formatTime,
+  getInvoiceStatusColor,
+} from '@blocklet/payment-react';
 import type { TInvoice, TInvoiceExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined, Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
@@ -131,6 +139,14 @@ export default function InvoiceDetail(props: { id: string }) {
             label={t('admin.paymentCurrency.name')}
             value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
           />
+          {data.paymentIntent && data.paymentIntent.payment_details && (
+            <InfoRow
+              label={t(`common.${data.paymentIntent.payment_details?.arcblock?.type || 'transfer'}TxHash`)}
+              value={
+                <TxLink details={data.paymentIntent.payment_details} method={data.paymentMethod} mode="customer" />
+              }
+            />
+          )}
           {data.subscription && (
             <InfoRow
               label={t('admin.subscription.name')}

package/src/pages/admin/customers/customers/detail.tsx

@@ -22,6 +22,8 @@ import InfoRow from '../../../../components/info-row';
 import InvoiceList from '../../../../components/invoice/list';
 import MetadataEditor from '../../../../components/metadata/editor';
 import PaymentList from '../../../../components/payment-intent/list';
+import PayoutList from '../../../../components/payouts/list';
+import RefundList from '../../../../components/refund/list';
 import SectionHeader from '../../../../components/section/header';
 import SubscriptionList from '../../../../components/subscription/list';
 
@@ -242,7 +244,21 @@ export default function CustomerDetail(props: { id: string }) {
       <Box className="section">
         <SectionHeader title={t('admin.subscriptions')} mb={0} />
         <Box className="section-body">
-          <SubscriptionList features={{ customer: false, toolbar: false }} customer_id={data.customer.id} />
+          <SubscriptionList
+            features={{ customer: false, toolbar: false }}
+            customer_id={data.customer.id}
+            status={['active', 'trialing', 'paused', 'past_due', 'canceled'].join(',')}
+          />
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.invoices')} mb={0} />
+        <Box className="section-body">
+          <InvoiceList
+            features={{ customer: false, toolbar: false }}
+            customer_id={data.customer.id}
+            status={['open', 'paid', 'uncollectible', 'draft', 'void'].join(',')}
+          />
         </Box>
       </Box>
       <Box className="section">
@@ -252,9 +268,23 @@ export default function CustomerDetail(props: { id: string }) {
         </Box>
       </Box>
       <Box className="section">
-        <SectionHeader title={t('admin.invoices')} mb={0} />
+        <SectionHeader title={t('admin.payouts')} mb={0} />
         <Box className="section-body">
-          <InvoiceList features={{ customer: false, toolbar: false }} customer_id={data.customer.id} />
+          <PayoutList
+            features={{ customer: false, toolbar: false }}
+            customer_id={data.customer.id}
+            status={['paid', 'pending', 'failed', 'canceled'].join(',')}
+          />
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.refunds')} mb={0} />
+        <Box className="section-body">
+          <RefundList
+            features={{ customer: false, toolbar: false }}
+            customer_id={data.customer.id}
+            status={['succeeded', 'canceled', 'failed', 'requires_action', 'pending'].join(',')}
+          />
         </Box>
       </Box>
       <Box className="section">

package/src/pages/customer/index.tsx

@@ -4,7 +4,7 @@ import Toast from '@arcblock/ux/lib/Toast';
 import { CustomerInvoiceList, PaymentProvider, formatError, getPrefix } from '@blocklet/payment-react';
 import type { GroupedBN, TCustomerExpanded } from '@blocklet/payment-types';
 import { Edit } from '@mui/icons-material';
-import { Alert, Box, Button, Grid, Stack, Tooltip } from '@mui/material';
+import { Box, Button, CircularProgress, Grid, Stack, Tooltip } from '@mui/material';
 import { styled } from '@mui/system';
 import { useSetState } from 'ahooks';
 import { isEmpty } from 'lodash';
@@ -50,11 +50,7 @@ export default function CustomerHome() {
   }, []);
 
   if (!data) {
-    return (
-      <Alert sx={{ mt: 3 }} severity="info">
-        {t('payment.customer.empty')}
-      </Alert>
-    );
+    return <CircularProgress />;
   }
 
   const onUpdateInfo = async (updates: TCustomerExpanded) => {
@@ -82,9 +78,6 @@ export default function CustomerHome() {
               <Box className="section-body">
                 <CurrentSubscriptions
                   id={data.id}
-                  onChange={() => {
-                    runAsync();
-                  }}
                   style={{
                     cursor: 'pointer',
                   }}

package/src/pages/customer/invoice/detail.tsx

@@ -5,6 +5,7 @@ import { Status, TxLink, api, formatError, formatTime, getInvoiceStatusColor } f
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { useEffect } from 'react';
 import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
@@ -130,9 +131,9 @@ export default function CustomerInvoiceDetail() {
           )}
         </Stack>
       </Stack>
-      <Box>
+      <Root>
         <SectionHeader title={t('payment.customer.invoice.summary')} />
-        <Stack sx={{ mt: 1, display: 'grid', gridTemplateColumns: '50% 50%' }}>
+        <Stack className="invoice-summary-wrapper">
           <InfoRow label={t('admin.invoice.from')} value={data.statement_descriptor || blocklet.appName} />
           <InfoRow label={t('admin.invoice.number')} value={data.number} />
           <InfoRow
@@ -175,7 +176,7 @@ export default function CustomerInvoiceDetail() {
             value={<CustomerLink customer={data.customer} linked={false} />}
           />
         </Stack>
-      </Box>
+      </Root>
       <Box>
         <SectionHeader title={t('payment.customer.invoice.details')} />
         <InvoiceTable invoice={data} simple />
@@ -189,3 +190,15 @@ export default function CustomerInvoiceDetail() {
     </Stack>
   );
 }
+
+const Root = styled(Box)`
+  .invoice-summary-wrapper {
+    display: 'grid';
+    gridtemplatecolumns: '50% 50%';
+  }
+  @media (max-width: 600px) {
+    .invoice-summary-wrapper {
+      display: block !important;
+    }
+  }
+`;