payment-kit 1.17.5 → 1.17.6

package/api/src/libs/product.ts

@@ -78,7 +78,7 @@ export async function checkCurrencySupportRecurring(currencyIds: string[] | stri
     include: [{ model: PaymentMethod, as: 'payment_method' }],
   })) as (PaymentCurrency & { payment_method: PaymentMethod })[];
   const notSupportCurrencies = currencies.filter(
-    (c) => EVM_CHAIN_TYPES.includes(c.payment_method?.type) && c.symbol === 'ETH'
+    (c) => EVM_CHAIN_TYPES.includes(c.payment_method?.type) && c.payment_method?.default_currency_id === c.id
   );
   return {
     notSupportCurrencies,

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

@@ -2,6 +2,7 @@ import { fromTokenToUnit } from '@ocap/util';
 import { Router } from 'express';
 import { InferAttributes, Op, WhereOptions } from 'sequelize';
 
+import Joi from 'joi';
 import { fetchErc20Meta } from '../integrations/ethereum/token';
 import logger from '../libs/logger';
 import { authenticate } from '../libs/security';
@@ -151,4 +152,63 @@ router.get('/:id', auth, async (req, res) => {
   }
 });
 
+const updateCurrencySchema = Joi.object({
+  name: Joi.string().empty('').optional(),
+  description: Joi.string().empty('').optional(),
+  logo: Joi.string().empty('').optional(),
+}).unknown(true);
+router.put('/:id', auth, async (req, res) => {
+  const { id } = req.params;
+  const raw: Partial<TPaymentCurrency> = req.body;
+
+  const { error } = updateCurrencySchema.validate(raw);
+  if (error) {
+    return res.status(400).json({ error: error.message });
+  }
+
+  const currency = await PaymentCurrency.findByPk(id);
+  if (!currency) {
+    return res.status(404).json({ error: 'Payment currency not found' });
+  }
+  if (raw.contract && raw.contract !== currency.contract) {
+    return res.status(400).json({ error: 'contract cannot be updated' });
+  }
+
+  const method = await PaymentMethod.findByPk(currency.payment_method_id);
+  if (!method) {
+    return res.status(400).json({ error: 'Payment method not found' });
+  }
+
+  const updatedCurrency = await currency.update({
+    name: raw.name || currency.name,
+    description: raw.description || currency.description,
+    logo: raw.logo || method.logo,
+  });
+  return res.json(updatedCurrency);
+});
+
+router.delete('/:id', auth, async (req, res) => {
+  const { id } = req.params;
+
+  const currency = await PaymentCurrency.findByPk(id);
+  if (!currency) {
+    return res.status(404).json({ error: 'Payment currency not found' });
+  }
+  const isLocked = await currency.isLocked();
+  if (isLocked) {
+    return res.status(400).json({ error: 'Can not delete locked payment currency' });
+  }
+  const isUsed = await currency.isUsed();
+  if (isUsed) {
+    return res.status(400).json({ error: 'Can not delete payment currency used by other resources' });
+  }
+  try {
+    await currency.destroy();
+    return res.status(200).end();
+  } catch (err) {
+    logger.error('delete payment currency error', err);
+    return res.status(400).json({ error: 'Delete payment currency failed' });
+  }
+});
+
 export default router;

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

@@ -68,7 +68,7 @@ router.post('/', auth, async (req, res) => {
     const currency = await PaymentCurrency.create({
       livemode: method.livemode,
       active: method.active,
-      locked: false,
+      locked: true,
       is_base_currency: false,
       payment_method_id: method.id,
 
@@ -144,7 +144,7 @@ router.post('/', auth, async (req, res) => {
     const currency = await PaymentCurrency.create({
       livemode: method.livemode,
       active: method.active,
-      locked: false,
+      locked: true,
       is_base_currency: false,
       payment_method_id: method.id,
 

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

@@ -7,6 +7,7 @@ import {
   InferCreationAttributes,
   Model,
   Op,
+  QueryTypes,
 } from 'sequelize';
 
 import { createIdGenerator } from '../../libs/util';
@@ -145,6 +146,36 @@ export class PaymentCurrency extends Model<InferAttributes<PaymentCurrency>, Inf
       ...options,
     });
   }
+
+  public async isLocked(): Promise<boolean> {
+    const { PaymentMethod } = this.sequelize.models;
+    const method = (await PaymentMethod!.findByPk(this.payment_method_id)) as any;
+    return this.locked || method?.default_currency_id === this.id;
+  }
+
+  public async isUsed(): Promise<boolean> {
+    const { Price } = this.sequelize.models;
+    const price = await Price!.findOne({
+      where: {
+        currency_id: this.id,
+      },
+    });
+    if (price) {
+      return true;
+    }
+    // @ts-ignore
+    const [{ count }] = await this.sequelize.query(
+      `SELECT count(p.id) AS count 
+       FROM prices AS p 
+       JOIN json_each(p.currency_options) AS option 
+       ON json_extract(option.value, '$.currency_id') = ?`,
+      {
+        replacements: [this.id],
+        type: QueryTypes.SELECT,
+      }
+    );
+    return count > 0;
+  }
 }
 
 export type TPaymentCurrency = InferAttributes<PaymentCurrency>;

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.17.5",
+  "version": "1.17.6",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -53,7 +53,7 @@
     "@arcblock/validator": "^1.19.3",
     "@blocklet/js-sdk": "^1.16.37",
     "@blocklet/logger": "^1.16.37",
-    "@blocklet/payment-react": "1.17.5",
+    "@blocklet/payment-react": "1.17.6",
     "@blocklet/sdk": "^1.16.37",
     "@blocklet/ui-react": "^2.11.27",
     "@blocklet/uploader": "^0.1.64",
@@ -120,7 +120,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.37",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.17.5",
+    "@blocklet/payment-types": "1.17.6",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -166,5 +166,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "7713be8272f1056796820a9d52f742ed63899900"
+  "gitHead": "50e93ab4340be53c9d9bd18718c6db26048578c5"
 }

package/src/components/payment-currency/add.tsx

@@ -12,7 +12,7 @@ import { dispatch } from 'use-bus';
 import DrawerForm from '../drawer-form';
 import PaymentCurrencyForm from './form';
 
-export default function PaymentCurrencyAdd({ method, onClose }: { method: TPaymentMethod; onClose: Function }) {
+export default function PaymentCurrencyAdd({ method, onClose }: { method: TPaymentMethod; onClose: () => void }) {
   const { t } = useLocaleContext();
   const [state, setState] = useSetState({ loading: false });
 

package/src/components/payment-currency/edit.tsx

@@ -0,0 +1,73 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { api, formatError } from '@blocklet/payment-react';
+import type { TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
+import { AddOutlined } from '@mui/icons-material';
+import { Button, CircularProgress } from '@mui/material';
+import { useSetState } from 'ahooks';
+import { FormProvider, useForm } from 'react-hook-form';
+import { dispatch } from 'use-bus';
+
+import DrawerForm from '../drawer-form';
+import PaymentCurrencyForm from './form';
+
+export default function PaymentCurrencyEdit({
+  method,
+  onClose,
+  value,
+}: {
+  method: TPaymentMethod;
+  onClose: () => void;
+  value: TPaymentCurrency;
+}) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({ loading: false });
+
+  const methods = useForm<TPaymentCurrency>({
+    defaultValues: {
+      payment_method_id: method.id,
+      name: value?.name,
+      description: value?.description,
+      logo: value?.logo,
+      contract: value?.contract,
+    },
+  });
+  const { handleSubmit } = methods;
+
+  const onSubmit = (data: TPaymentCurrency) => {
+    setState({ loading: true });
+    api
+      .put(`/api/payment-currencies/${value.id}`, data)
+      .then(() => {
+        setState({ loading: false });
+        Toast.success(t('admin.paymentCurrency.saved'));
+        methods.reset();
+        dispatch('drawer.submitted');
+        dispatch('paymentCurrency.updated');
+      })
+      .catch((err) => {
+        setState({ loading: false });
+        console.error(err);
+        Toast.error(formatError(err));
+      });
+  };
+
+  return (
+    <DrawerForm
+      open
+      icon={<AddOutlined />}
+      onClose={onClose}
+      text={t('admin.paymentCurrency.edit')}
+      width={640}
+      addons={
+        <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)} disabled={state.loading}>
+          {state.loading ? <CircularProgress size="small" /> : t('admin.paymentCurrency.save')}
+        </Button>
+      }>
+      <FormProvider {...methods}>
+        <PaymentCurrencyForm disableKeys={['contract']} />
+      </FormProvider>
+    </DrawerForm>
+  );
+}

package/src/components/payment-currency/form.tsx

@@ -6,7 +6,15 @@ import { useFormContext, useWatch } from 'react-hook-form';
 
 import Uploader from '../uploader';
 
-export default function PaymentCurrencyForm() {
+type TPaymentCurrencyFormProps = {
+  disableKeys?: string[];
+};
+
+PaymentCurrencyForm.defaultProps = {
+  disableKeys: [],
+};
+
+export default function PaymentCurrencyForm({ disableKeys = [] }: TPaymentCurrencyFormProps) {
   const { t } = useLocaleContext();
   const { control, setValue } = useFormContext();
   const logo = useWatch({ control, name: 'logo' });
@@ -29,6 +37,7 @@ export default function PaymentCurrencyForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.name.label')}
         placeholder={t('admin.paymentMethod.name.tip')}
+        disabled={disableKeys.includes('name')}
       />
       <FormInput
         key="description"
@@ -37,6 +46,7 @@ export default function PaymentCurrencyForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.description.label')}
         placeholder={t('admin.paymentMethod.description.tip')}
+        disabled={disableKeys.includes('description')}
       />
       <FormInput
         key="contract"
@@ -45,6 +55,7 @@ export default function PaymentCurrencyForm() {
         rules={{ required: true }}
         label={t('admin.paymentCurrency.contract.label')}
         placeholder={t('admin.paymentCurrency.contract.tip')}
+        disabled={disableKeys.includes('contract')}
       />
       <Stack direction="column">
         <Typography mb={1}>{t('admin.paymentCurrency.logo.label')}</Typography>

package/src/locales/en.tsx

@@ -423,9 +423,13 @@ 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',
       logo: {
         label: 'Logo',
         tip: 'Displayed on payment page',

package/src/locales/zh.tsx

@@ -413,8 +413,12 @@ export default flat({
     paymentCurrency: {
       name: '支付货币',
       add: '添加货币',
+      edit: '编辑货币',
       save: '保存货币',
       saved: '货币已成功保存',
+      delete: '删除货币',
+      deleteConfirm: '确定要删除此货币吗？一旦删除，将无法恢复',
+      deleted: '货币已成功删除',
       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>
                     }