payment-kit 1.13.211 → 1.13.213

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.211
+version: 1.13.213
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.211",
+  "version": "1.13.213",
   "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.211",
+    "@blocklet/payment-react": "1.13.213",
     "@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.211",
+    "@blocklet/payment-types": "1.13.213",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -150,5 +150,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "2fe03028e2284261a1a62260d82a2e79ec45ce4a"
+  "gitHead": "209467c5da3ab2fa17f5ce802bcd8b086e7c08e5"
 }

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/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/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;
+    }
+  }
+`;