payment-kit 1.16.6 → 1.16.8

package/api/src/routes/customers.ts

@@ -86,24 +86,25 @@ router.get('/me', sessionMiddleware(), async (req, res) => {
 
   try {
     const doc = await Customer.findByPkOrDid(req.user.did as string);
+    const livemode = req.query.livemode ? !!req?.livemode : !!doc?.livemode;
     if (!doc) {
       if (req.query.fallback) {
         const result = await blocklet.getUser(req.user.did);
-        res.json({ ...result.user, address: {} });
+        res.json({ ...result.user, address: {}, livemode });
       } else {
         res.json({ error: 'Customer not found' });
       }
     } else {
       const [summary, stake, token] = await Promise.all([
         doc.getSummary(),
-        getStakeSummaryByDid(doc.did, req?.livemode || doc.livemode),
-        getTokenSummaryByDid(doc.did, req?.livemode || doc.livemode),
+        getStakeSummaryByDid(doc.did, livemode),
+        getTokenSummaryByDid(doc.did, livemode),
       ]);
-      res.json({ ...doc.toJSON(), summary: { ...summary, stake, token } });
+      res.json({ ...doc.toJSON(), summary: { ...summary, stake, token }, livemode });
     }
   } catch (err) {
-    console.error(err);
-    res.json(null);
+    console.error('get customer failed', err);
+    res.status(500).json({ error: `Failed to get customer: ${err.message}` });
   }
 });
 

package/api/src/routes/payment-methods.ts

@@ -4,7 +4,8 @@ import { ethers } from 'ethers';
 import { Router } from 'express';
 import pick from 'lodash/pick';
 import { InferAttributes, Op, WhereOptions } from 'sequelize';
-
+import cloneDeep from 'lodash/cloneDeep';
+import merge from 'lodash/merge';
 import { ensureWebhookRegistered } from '../integrations/stripe/setup';
 import logger from '../libs/logger';
 import { authenticate } from '../libs/security';
@@ -215,4 +216,27 @@ router.get('/:id', auth, async (req, res) => {
   }
 });
 
+router.put('/:id/settings', auth, async (req, res) => {
+  const { id } = req.params;
+  const settings = req.body;
+  try {
+    const paymentMethod = await PaymentMethod.findOne({ where: { id } });
+    if (!paymentMethod) {
+      return res.status(400).json({ error: 'payment method not found' });
+    }
+    if (paymentMethod.type !== 'arcblock') {
+      return res
+        .status(400)
+        .json({ error: `Updating settings is not supported for the ${paymentMethod.type} payment method` });
+    }
+    const updateSettings = merge(cloneDeep(paymentMethod.settings), settings);
+    const doc = await paymentMethod.update({
+      settings: updateSettings,
+    });
+    return res.json(doc);
+  } catch (err) {
+    return res.status(400).json({ error: err.message });
+  }
+});
+
 export default router;

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.16.6",
+  "version": "1.16.8",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -53,7 +53,7 @@
     "@arcblock/validator": "^1.18.150",
     "@blocklet/js-sdk": "1.16.33-beta-20241031-073543-49b1ff9b",
     "@blocklet/logger": "1.16.33-beta-20241031-073543-49b1ff9b",
-    "@blocklet/payment-react": "1.16.6",
+    "@blocklet/payment-react": "1.16.8",
     "@blocklet/sdk": "1.16.33-beta-20241031-073543-49b1ff9b",
     "@blocklet/ui-react": "^2.10.74",
     "@blocklet/uploader": "^0.1.53",
@@ -120,7 +120,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.33-beta-20241031-073543-49b1ff9b",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.16.6",
+    "@blocklet/payment-types": "1.16.8",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -166,5 +166,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "52e20bd4381344e137c2468681265903dbbfb910"
+  "gitHead": "ad6dca32db4f5074471e000b714ff5046e06608f"
 }

package/src/components/price/currency-select.tsx

@@ -1,7 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { usePaymentContext } from '@blocklet/payment-react';
-import { AddOutlined } from '@mui/icons-material';
-import { ListSubheader, MenuItem, Select, Stack, Typography } from '@mui/material';
+import { AddOutlined, ArrowDropDown } from '@mui/icons-material';
+import { ListSubheader, MenuItem, Select, Stack, SxProps, Typography } from '@mui/material';
 import { useState } from 'react';
 import type { LiteralUnion } from 'type-fest';
 
@@ -16,14 +16,24 @@ type Props = {
   value: string;
   width?: string;
   disabled?: boolean;
+  selectSX?: SxProps;
 };
 
 CurrencySelect.defaultProps = {
   width: '100%',
   disabled: false,
+  selectSX: {},
 };
 
-export default function CurrencySelect({ mode: initialMode, hasSelected, onSelect, value, width, disabled }: Props) {
+export default function CurrencySelect({
+  mode: initialMode,
+  hasSelected,
+  onSelect,
+  value,
+  width,
+  disabled,
+  selectSX,
+}: Props) {
   const { t } = useLocaleContext();
   const { settings } = usePaymentContext();
   const [mode, setMode] = useState(initialMode);
@@ -57,6 +67,7 @@ export default function CurrencySelect({ mode: initialMode, hasSelected, onSelec
         }}
         sx={{ cursor: canSelect ? 'pointer' : 'default', display: 'inline-flex' }}>
         {selectedCurrency?.symbol} ({selectedPaymentMethod?.name})
+        {canSelect && <ArrowDropDown sx={{ color: 'rgba(0, 0, 0, 0.54)', fontSize: 21 }} />}
       </Typography>
     );
   }
@@ -77,7 +88,7 @@ export default function CurrencySelect({ mode: initialMode, hasSelected, onSelec
         )}
         onChange={handleSelect}
         open
-        sx={{ width }}
+        sx={{ width, ...selectSX }}
         disabled={disabled}
         onClose={() => setMode(initialMode)}>
         {extraCurrencies.map((method) => [

package/src/components/price/form.tsx

@@ -238,6 +238,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                         }}
                         value={defaultCurrencyId}
                         disabled={isLocked}
+                        selectSX={{ '.MuiOutlinedInput-notchedOutline': { border: 'none' } }}
                       />
                     </InputAdornment>
                   ),
@@ -331,6 +332,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                                 }}
                                 value={currency?.id!}
                                 disabled={isLocked}
+                                selectSX={{ '.MuiOutlinedInput-notchedOutline': { border: 'none' } }}
                               />
                             </InputAdornment>
                           ),

package/src/pages/admin/settings/payment-methods/index.tsx

@@ -1,7 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Switch, api } from '@blocklet/payment-react';
+import { Switch, api, formatError } from '@blocklet/payment-react';
 import type { TPaymentMethodExpanded } from '@blocklet/payment-types';
-import { AddOutlined, DeleteOutlined } from '@mui/icons-material';
+import { AddOutlined, Check, Close, DeleteOutlined, EditOutlined } from '@mui/icons-material';
 import {
   Alert,
   Avatar,
@@ -13,11 +13,15 @@ import {
   ListItem,
   ListItemAvatar,
   ListItemText,
+  Stack,
+  TextField,
   Typography,
 } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import useBus from 'use-bus';
 
+import { useState } from 'react';
+import Toast from '@arcblock/ux/lib/Toast';
 import IconCollapse from '../../../../components/collapse';
 import InfoCard from '../../../../components/info-card';
 import InfoRow from '../../../../components/info-row';
@@ -31,6 +35,91 @@ const getMethods = (params: Record<string, any> = {}): Promise<TPaymentMethodExp
   return api.get(`/api/payment-methods?${search.toString()}`).then((res) => res.data);
 };
 
+const updateApiHost = (id: string, apiHost: string) => {
+  return api.put(`/api/payment-methods/${id}/settings`, { arcblock: { api_host: apiHost } }).then((res) => res.data);
+};
+
+function EditApiHost({ method }: { method: TPaymentMethodExpanded }) {
+  const [edit, setEdit] = useState(false);
+  const { t } = useLocaleContext();
+  const [value, setValue] = useState(method.settings?.arcblock?.api_host || '');
+  const [tempValue, setTempValue] = useState(value);
+  const [error, setError] = useState('');
+
+  const handleSave = async () => {
+    if (!tempValue.trim()) {
+      setError(t('common.required'));
+      return;
+    }
+    try {
+      await updateApiHost(method.id, tempValue);
+      Toast.success(t('common.saved'));
+      setValue(tempValue);
+      setEdit(false);
+      setError('');
+    } catch (err) {
+      Toast.error(formatError(err));
+    }
+  };
+
+  const handleCancel = () => {
+    setTempValue(value);
+    setEdit(false);
+    setError('');
+  };
+
+  return (
+    <InfoRow
+      label={t('admin.paymentMethod.arcblock.api_host.label')}
+      value={
+        <Stack direction="row" alignItems="center" spacing={1} flexWrap="wrap">
+          {edit ? (
+            <>
+              <TextField
+                value={tempValue}
+                onChange={(e) => {
+                  const val = e.target.value;
+                  if (!val) {
+                    setError(t('common.required'));
+                  } else {
+                    setError('');
+                  }
+                  setTempValue(val);
+                }}
+                variant="outlined"
+                size="small"
+                sx={{ flex: 1 }}
+                placeholder={t('admin.paymentMethod.arcblock.api_host.tip')}
+                error={!!error}
+                InputProps={{
+                  endAdornment: error ? (
+                    <Typography color="error" sx={{ whiteSpace: 'nowrap' }}>
+                      {error}
+                    </Typography>
+                  ) : undefined,
+                }}
+              />
+              <IconButton onClick={handleSave} size="small">
+                <Check />
+              </IconButton>
+              <IconButton onClick={handleCancel} size="small">
+                <Close />
+              </IconButton>
+            </>
+          ) : (
+            <>
+              <Typography variant="body2">{value}</Typography>
+              <IconButton onClick={() => setEdit(true)} size="small">
+                <EditOutlined fontSize="small" />
+              </IconButton>
+            </>
+          )}
+        </Stack>
+      }
+    />
+  );
+}
+
 const groupByType = (methods: TPaymentMethodExpanded[]) => {
   const groups: Record<string, TPaymentMethodExpanded[]> = {};
   methods.forEach((x) => {
@@ -80,6 +169,7 @@ export default function PaymentMethods() {
               <Grid container spacing={2} mt={0}>
                 <Grid item xs={12} md={6}>
                   <InfoRow label={t('admin.paymentMethod.props.type')} value={method.type} />
+                  {method.type === 'arcblock' && <EditApiHost method={method} />}
                   <InfoRow label={t('admin.paymentMethod.props.confirmation')} value={method.confirmation.type} />
                   <InfoRow
                     label={t('admin.paymentMethod.props.recurring')}

package/src/pages/customer/index.tsx

@@ -28,7 +28,7 @@ import {
 } from '@mui/material';
 import type { SelectChangeEvent } from '@mui/material/Select';
 import { styled, SxProps } from '@mui/system';
-import { useSetState } from 'ahooks';
+import { useRequest, useSetState } from 'ahooks';
 import { flatten, isEmpty } from 'lodash';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
@@ -101,19 +101,14 @@ export default function CustomerHome() {
   const navigate = useNavigate();
   const { isMobile } = useMobile('lg');
   const { isPending, startTransition } = useTransitionContext();
-
-  const [data, setData] = useState<Result>();
+  const { data, error, loading, runAsync } = useRequest(fetchData, {
+    manual: true,
+  });
   const countryDetail = useMemo(() => {
     const item = defaultCountries.find((v) => v[1] === data?.address?.country);
     return item ? parseCountry(item) : { name: '' };
   }, [data]);
 
-  const runAsync = () => {
-    fetchData().then((res) => {
-      setData(res);
-    });
-  };
-
   useEffect(() => {
     runAsync();
     events.on('switch-did', () => {
@@ -127,6 +122,18 @@ export default function CustomerHome() {
     }
   }, [data]);
 
+  if (loading) {
+    return <ProgressBar pending />;
+  }
+
+  if (error) {
+    return (
+      <Alert sx={{ mt: 3 }} severity="error">
+        {formatError(error)}
+      </Alert>
+    );
+  }
+
   if (!data) {
     return null;
   }

package/src/pages/customer/subscription/embed.tsx

@@ -16,6 +16,7 @@ import {
   getPrefix,
   getSubscriptionStatusColor,
   useDefaultPageSize,
+  useMobile,
 } from '@blocklet/payment-react';
 import type { Paginated, TInvoiceExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
 import {
@@ -60,6 +61,7 @@ export default function SubscriptionEmbed() {
   const subscriptionId = params.get('id') || '';
   const authToken = params.get('authToken') || '';
   const defaultPageSize = useDefaultPageSize(20);
+  const { isMobile } = useMobile();
   const { data: subscription, error, loading } = useRequest(() => fetchSubscriptionData(subscriptionId, authToken));
   const { data } = useRequest(
     () =>
@@ -181,7 +183,7 @@ export default function SubscriptionEmbed() {
           width: '100%',
           height: '100%',
         }}>
-        <Typography component="h3" sx={{ textAlign: 'center' }} variant="h5" gutterBottom>
+        <Typography component="h3" sx={{ textAlign: 'center', fontWeight: 500 }} variant="h5" gutterBottom>
           {t('payment.customer.subscriptions.current')}
         </Typography>
         <Box sx={{ marginTop: '12px' }}>
@@ -212,8 +214,10 @@ export default function SubscriptionEmbed() {
                   return (
                     <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
                       <Typography component="div" sx={{ flex: 3, gap: 1, display: 'flex', alignItems: 'center' }}>
-                        {formatToDate(item.created_at, locale, 'YYYY-MM-DD')}
-                        <Status label={getInvoiceDescriptionAndReason(item, locale)?.type} />
+                        <Typography component="span" sx={{ whiteSpace: 'nowrap' }}>
+                          {formatToDate(item.created_at, locale, 'YYYY-MM-DD')}
+                        </Typography>
+                        {!isMobile && <Status label={getInvoiceDescriptionAndReason(item, locale)?.type} />}
                       </Typography>
                       <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
                         {formatBNStr(item.total, item.paymentCurrency.decimal)}&nbsp;