payment-kit 1.16.6 → 1.16.7

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.7
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.16.6",
+  "version": "1.16.7",
   "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.7",
     "@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.7",
     "@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": "ebd2f35810953ca0a6c0c008a4c95f2296cccb38"
 }

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')}