payment-kit 1.17.5 → 1.17.7

package/src/locales/en.tsx

@@ -423,9 +423,16 @@ export default flat({
     },
     paymentCurrency: {
       name: 'Payment Currency',
-      add: 'Add payment currency',
+      add: 'Add Currency',
+      edit: 'Edit Currency',
       save: 'Save payment currency',
       saved: 'Payment currency successfully saved',
+      delete: 'Delete payment currency',
+      deleteConfirm: 'Are you sure you want to delete this payment currency? Once deleted, it cannot be recovered',
+      deleted: 'Payment currency successfully deleted',
+      quickAdd: 'Quick add supported currency',
+      searchToken: 'Search currency',
+      orManualInput: 'Or manually fill in currency information below',
       logo: {
         label: 'Logo',
         tip: 'Displayed on payment page',

package/src/locales/zh.tsx

@@ -413,8 +413,15 @@ export default flat({
     paymentCurrency: {
       name: '支付货币',
       add: '添加货币',
+      edit: '编辑货币',
       save: '保存货币',
       saved: '货币已成功保存',
+      delete: '删除货币',
+      deleteConfirm: '确定要删除此货币吗？一旦删除，将无法恢复',
+      deleted: '货币已成功删除',
+      quickAdd: '快速添加已支持的货币',
+      searchToken: '搜索货币',
+      orManualInput: '或在下方手动填写货币信息',
       logo: {
         label: 'Logo',
         tip: '在支付页面显示',

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

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Switch, api, formatError, usePaymentContext } from '@blocklet/payment-react';
-import type { TPaymentMethodExpanded } from '@blocklet/payment-types';
+import { ConfirmDialog, Switch, api, formatError, usePaymentContext } from '@blocklet/payment-react';
+import type { TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import {
   AddOutlined,
   Check,
@@ -36,6 +36,7 @@ import IconCollapse from '../../../../components/collapse';
 import InfoCard from '../../../../components/info-card';
 import InfoRow from '../../../../components/info-row';
 import PaymentCurrencyAdd from '../../../../components/payment-currency/add';
+import PaymentCurrencyEdit from '../../../../components/payment-currency/edit';
 
 const getMethods = (
   params: Record<string, any> = {}
@@ -154,9 +155,9 @@ export default function PaymentMethods() {
       addresses: true,
     })
   );
-  const [state, setState] = useSetState({ method: '' });
   const [didDialog, setDidDialog] = useSetState({ open: false, chainId: '', did: '' });
   const { refresh } = usePaymentContext();
+  const [currencyDialog, setCurrencyDialog] = useSetState({ action: '', value: null, method: '' });
 
   const { list: methods, addresses } = data;
   useBus(
@@ -170,7 +171,19 @@ export default function PaymentMethods() {
   useBus(
     'paymentCurrency.added',
     () => {
-      runAsync().then(() => setState({ method: '' }));
+      runAsync().then(() => {
+        setCurrencyDialog({ action: '', method: '' });
+      });
+      refresh(true);
+    },
+    []
+  );
+  useBus(
+    'paymentCurrency.updated',
+    () => {
+      runAsync().then(() => {
+        setCurrencyDialog({ action: '', method: '' });
+      });
       refresh(true);
     },
     []
@@ -192,6 +205,21 @@ export default function PaymentMethods() {
     }
     return addresses?.arcblock || '';
   };
+
+  const handleDeleteCurrency = async (currency: TPaymentCurrency) => {
+    try {
+      await api.delete(`/api/payment-currencies/${currency.id}`);
+      runAsync();
+      refresh(true);
+      Toast.success(t('admin.paymentCurrency.deleted'));
+    } catch (err) {
+      Toast.error(formatError(err));
+    } finally {
+      // @ts-ignore
+      setCurrencyDialog({ action: '', method: '' });
+    }
+  };
+
   return (
     <>
       {Object.keys(groups).map((x) => (
@@ -269,14 +297,38 @@ export default function PaymentMethods() {
                     value={
                       <List>
                         {method.payment_currencies.map((currency) => {
+                          if (!currency) {
+                            return null;
+                          }
                           return (
                             <ListItem
                               key={currency.id}
                               disablePadding
                               secondaryAction={
-                                <IconButton edge="end" disabled>
-                                  <DeleteOutlined />
-                                </IconButton>
+                                currency.locked || method.default_currency_id === currency.id ? null : (
+                                  <>
+                                    <IconButton
+                                      edge="end"
+                                      onClick={() => {
+                                        setCurrencyDialog({
+                                          action: 'edit',
+                                          // @ts-ignore
+                                          value: currency,
+                                          method: method.id,
+                                        });
+                                      }}>
+                                      <EditOutlined />
+                                    </IconButton>
+                                    <IconButton
+                                      edge="end"
+                                      onClick={() => {
+                                        // @ts-ignore
+                                        setCurrencyDialog({ action: 'delete', value: currency, method: method.id });
+                                      }}>
+                                      <DeleteOutlined />
+                                    </IconButton>
+                                  </>
+                                )
                               }>
                               <ListItemAvatar>
                                 <Avatar src={currency.logo} alt={currency.name} />
@@ -290,17 +342,37 @@ export default function PaymentMethods() {
                             key="add-currency"
                             disablePadding
                             sx={{ cursor: 'pointer' }}
-                            onClick={() => setState({ method: method.id })}>
+                            onClick={() => {
+                              setCurrencyDialog({ action: 'create', method: method.id });
+                            }}>
                             <ListItemAvatar>
                               <Avatar>
                                 <AddOutlined fontSize="small" />
                               </Avatar>
                             </ListItemAvatar>
-                            <ListItemText primary="Add Currency" />
+                            <ListItemText primary={t('admin.paymentCurrency.add')} />
                           </ListItem>
                         )}
-                        {state.method === method.id && (
-                          <PaymentCurrencyAdd method={method} onClose={() => setState({ method: '' })} />
+                        {currencyDialog.method === method.id && currencyDialog.action === 'create' && (
+                          <PaymentCurrencyAdd
+                            method={method}
+                            onClose={() => setCurrencyDialog({ action: '', method: '' })}
+                          />
+                        )}
+                        {currencyDialog.method === method.id && currencyDialog.action === 'edit' && (
+                          <PaymentCurrencyEdit
+                            method={method}
+                            onClose={() => setCurrencyDialog({ action: '', method: '' })}
+                            value={currencyDialog.value!}
+                          />
+                        )}
+                        {currencyDialog.method === method.id && currencyDialog.action === 'delete' && (
+                          <ConfirmDialog
+                            onConfirm={() => handleDeleteCurrency(currencyDialog.value!)}
+                            onCancel={() => setCurrencyDialog({ action: '', method: '' })}
+                            title={t('admin.paymentCurrency.delete')}
+                            message={t('admin.paymentCurrency.deleteConfirm')}
+                          />
                         )}
                       </List>
                     }