payment-kit 1.19.17 → 1.19.19

package/src/components/customer/overdraft-protection.tsx

@@ -598,11 +598,11 @@ export default function OverdraftProtectionDialog({
                             <Currency logo={currency.logo} name={currency.symbol} />
                           </Box>
                         ),
-                        inputProps: {
-                          min: 0,
-                          max: MAX_SAFE_AMOUNT,
-                          step: Number(estimateAmount),
-                        },
+                      },
+                      htmlInput: {
+                        min: 0,
+                        max: MAX_SAFE_AMOUNT,
+                        step: Number(estimateAmount),
                       },
                     }}
                   />

package/src/components/info-metric.tsx

@@ -31,7 +31,16 @@ export default function InfoMetric(rawProps: Props) {
   return (
     <>
       <Stack sx={stackSx}>
-        <Typography className="info-metric-label" component="div" variant="subtitle2" mb={1} color="text.primary">
+        <Typography
+          className="info-metric-label"
+          component="div"
+          variant="subtitle2"
+          mb={1}
+          color="text.primary"
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+          }}>
           {/* eslint-disable-next-line react/prop-types */}
           {props.label}
           {/* eslint-disable-next-line react/prop-types */}
@@ -39,7 +48,7 @@ export default function InfoMetric(rawProps: Props) {
           {!!props.tip && (
             // eslint-disable-next-line react/prop-types
             <Tooltip title={props.tip}>
-              <InfoOutlined fontSize="small" />
+              <InfoOutlined sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: 'medium', ml: 0.5 }} />
             </Tooltip>
           )}
         </Typography>

package/src/components/invoice/recharge.tsx

@@ -65,6 +65,8 @@ type ListProps = {
   };
   currency_id?: string;
   subscription_id?: string;
+  recharge_address?: string;
+  customer_id?: string;
 };
 
 const getListKey = (props: ListProps) => {
@@ -80,12 +82,14 @@ const getListKey = (props: ListProps) => {
 export default function RechargeList({
   currency_id = '',
   subscription_id = '',
+  recharge_address = '',
+  customer_id = '',
   features = {
     customer: true,
     filter: true,
   },
 }: ListProps) {
-  const listKey = getListKey({ currency_id, subscription_id });
+  const listKey = getListKey({ currency_id, subscription_id, recharge_address });
 
   const { t, locale } = useLocaleContext();
   const defaultPageSize = useDefaultPageSize(20);
@@ -106,6 +110,8 @@ export default function RechargeList({
     try {
       const res = await fetchData(subscription_id || '', currency_id || '', {
         ...search,
+        recharge_address,
+        customer_id,
       });
       setData(res);
     } catch (error) {
@@ -117,7 +123,7 @@ export default function RechargeList({
 
   useEffect(() => {
     refresh();
-  }, [search, currency_id, subscription_id]);
+  }, [search, currency_id, subscription_id, recharge_address]);
 
   const getInvoiceLink = (invoice: TInvoiceExpanded) => {
     return {

package/src/components/metadata/form.tsx

@@ -280,34 +280,36 @@ export default function MetadataForm({
             value={jsonValue}
             onChange={(e) => handleJsonChange(e.target.value)}
             placeholder={t('common.metadata.jsonPlaceholder')}
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end" sx={{ alignSelf: 'flex-start', mt: 1 }}>
-                  <Tooltip
-                    title={formatError || t('common.metadata.formatJson')}
-                    placement="top"
-                    componentsProps={{
-                      tooltip: {
-                        sx: formatError
-                          ? {
-                              maxWidth: 300,
-                              backgroundColor: 'error.main',
-                              opacity: 0.8,
-                            }
-                          : {},
-                      },
-                    }}>
-                    <IconButton
-                      onClick={handleFormatJson}
-                      size="small"
-                      sx={{
-                        color: formatError ? 'error.main' : 'text.secondary',
+            slotProps={{
+              input: {
+                endAdornment: (
+                  <InputAdornment position="end" sx={{ alignSelf: 'flex-start', mt: 1 }}>
+                    <Tooltip
+                      title={formatError || t('common.metadata.formatJson')}
+                      placement="top"
+                      componentsProps={{
+                        tooltip: {
+                          sx: formatError
+                            ? {
+                                maxWidth: 300,
+                                backgroundColor: 'error.main',
+                                opacity: 0.8,
+                              }
+                            : {},
+                        },
                       }}>
-                      <FormatAlignLeft fontSize="small" />
-                    </IconButton>
-                  </Tooltip>
-                </InputAdornment>
-              ),
+                      <IconButton
+                        onClick={handleFormatJson}
+                        size="small"
+                        sx={{
+                          color: formatError ? 'error.main' : 'text.secondary',
+                        }}>
+                        <FormatAlignLeft fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                  </InputAdornment>
+                ),
+              },
             }}
             sx={{
               mb: 2,

package/src/components/meter/form.tsx

@@ -1,11 +1,10 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { FormInput, FormLabel } from '@blocklet/payment-react';
+import { FormInput, FormLabel, Collapse } from '@blocklet/payment-react';
 import { FormControl, Select, MenuItem, Typography, Box, FormHelperText, Stack } from '@mui/material';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { InfoOutlined } from '@mui/icons-material';
 
 import type { TMeter } from '@blocklet/payment-types';
-import Collapse from '../collapse';
 import MetadataForm from '../metadata/form';
 
 type Props = {

package/src/components/price/form.tsx

@@ -8,6 +8,7 @@ import {
   FormLabel,
   isCreditMetered,
   formatPrice,
+  Collapse,
 } from '@blocklet/payment-react';
 import type {
   InferFormType,
@@ -46,7 +47,6 @@ import { useMemo, useState } from 'react';
 import { get } from 'lodash';
 import { useRequest } from 'ahooks';
 import ProductSelect from '../payment-link/product-select';
-import Collapse from '../collapse';
 import { useProductsContext } from '../../contexts/products';
 import CurrencySelect from './currency-select';
 import { getProductByPriceId } from '../../libs/util';
@@ -782,29 +782,33 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                         metadata.credit_config = creditConfig;
                         field.onChange(metadata);
                       }}
-                      inputProps={{ min: 0, step: 'any' }}
-                      // eslint-disable-next-line react/jsx-no-duplicate-props
-                      InputProps={{
-                        endAdornment: (
-                          <InputAdornment position="end">
-                            <CurrencySelect
-                              mode="selected"
-                              hasSelected={(c) => currencies.fields.some((x: any) => x.currency_id === c.id)}
-                              currencyFilter={(c) => c.type === 'credit'}
-                              onSelect={(currencyId) => {
-                                const metadata = field.value || {};
-                                const creditConfig = metadata.credit_config || {};
-                                creditConfig.currency_id = currencyId;
-                                metadata.credit_config = creditConfig;
-                                field.onChange(metadata);
-                              }}
-                              value={field.value?.credit_config?.currency_id || creditCurrencies?.[0]?.id}
-                              disabled={isLocked}
-                              hideMethod
-                              selectSX={{ '.MuiOutlinedInput-notchedOutline': { border: 'none' } }}
-                            />
-                          </InputAdornment>
-                        ),
+                      slotProps={{
+                        input: {
+                          endAdornment: (
+                            <InputAdornment position="end">
+                              <CurrencySelect
+                                mode="selected"
+                                hasSelected={(c) => currencies.fields.some((x: any) => x.currency_id === c.id)}
+                                currencyFilter={(c) => c.type === 'credit'}
+                                onSelect={(currencyId) => {
+                                  const metadata = field.value || {};
+                                  const creditConfig = metadata.credit_config || {};
+                                  creditConfig.currency_id = currencyId;
+                                  metadata.credit_config = creditConfig;
+                                  field.onChange(metadata);
+                                }}
+                                value={field.value?.credit_config?.currency_id || creditCurrencies?.[0]?.id}
+                                disabled={isLocked}
+                                hideMethod
+                                selectSX={{ '.MuiOutlinedInput-notchedOutline': { border: 'none' } }}
+                              />
+                            </InputAdornment>
+                          ),
+                        },
+                        htmlInput: {
+                          min: 0,
+                          step: 'any',
+                        },
                       }}
                     />
                     <Typography
@@ -843,7 +847,11 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                         value={field.value ?? '0'}
                         placeholder="0"
                         disabled={isLocked}
-                        inputProps={{ min: 0 }}
+                        slotProps={{
+                          htmlInput: {
+                            min: 0,
+                          },
+                        }}
                       />
                     )}
                   />
@@ -1000,7 +1008,12 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                         metadata.credit_config = creditConfig;
                         field.onChange(metadata);
                       }}
-                      inputProps={{ min: 0, max: 100 }}
+                      slotProps={{
+                        htmlInput: {
+                          min: 0,
+                          max: 100,
+                        },
+                      }}
                     />
                     <Typography
                       variant="caption"

package/src/components/product/form.tsx

@@ -1,11 +1,10 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { FormInput, FormLabel } from '@blocklet/payment-react';
+import { FormInput, FormLabel, Collapse } from '@blocklet/payment-react';
 import type { InferFormType, TProduct } from '@blocklet/payment-types';
 import { Box, Stack, Typography, Select, MenuItem } from '@mui/material';
 import { useFormContext, useWatch, Controller } from 'react-hook-form';
 
-import Collapse from '../collapse';
 import MetadataForm from '../metadata/form';
 import type { Price } from '../price/form';
 import Uploader from '../uploader';

package/src/components/subscription/items/index.tsx

@@ -42,7 +42,10 @@ export default function SubscriptionItemList({ data, currency, mode = 'customer'
                   sm: 2,
                 },
               }}>
-              <Box order={isMobile ? 2 : 1}>
+              <Box
+                sx={{
+                  order: isMobile ? 2 : 1,
+                }}>
                 {item.price.product.images.length > 0 ? (
                   // @ts-ignore
                   <Avatar
@@ -58,7 +61,10 @@ export default function SubscriptionItemList({ data, currency, mode = 'customer'
                   </Avatar>
                 )}
               </Box>
-              <Box order={isMobile ? 1 : 2}>
+              <Box
+                sx={{
+                  order: isMobile ? 1 : 2,
+                }}>
                 {isAdmin ? (
                   <>
                     <Typography

package/src/components/subscription/metrics.tsx

@@ -169,7 +169,11 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
                 alignItems: 'center',
                 fontWeight: 500,
               }}>
-              <Typography fontWeight={500} sx={{ fontSize: 14 }}>
+              <Typography
+                sx={{
+                  fontWeight: 500,
+                  fontSize: 14,
+                }}>
                 {t('admin.subscription.currentBalance')}
               </Typography>
               <Tooltip

package/src/locales/en.tsx

@@ -222,6 +222,11 @@ export default flat({
       creditProducts: {
         emptyTip: 'No credit products are associated with this meter yet.',
       },
+      rechargePackage: {
+        priceId: 'Top-up Package',
+        tooltip:
+          'The top-up package is used to recharge {name}, and users can get the corresponding {name} after purchase.',
+      },
     },
     creditProduct: {
       create: 'Create Credit Product',
@@ -489,6 +494,10 @@ export default flat({
         description:
           'Credit metered billing requires a corresponding Credit consumption. If the Credit is consumed, the corresponding service will stop.',
       },
+      credit: {
+        saveAsBasePrice: 'Set as Top-up Package',
+        saveSuccess: 'Successfully set as top-up package',
+      },
       types: {
         onetime: 'One time',
         onetimeDesc: 'Charge a one-time fee',
@@ -970,6 +979,7 @@ export default flat({
         },
         originalAmount: 'Original Amount',
         usage: 'Usage',
+        viewInvoice: 'View Invoice',
         grantId: 'Grant ID',
         currency: 'Currency',
         created: 'Created',
@@ -1221,6 +1231,11 @@ export default flat({
     product: {
       empty: 'No Products',
     },
+    credit: {
+      recharge: 'Buy Credits',
+      autoRecharge: 'Auto Top-up',
+      unsupported: 'Not supported yet',
+    },
     recharge: {
       title: 'Add Funds',
       amount: 'Amount',

package/src/locales/zh.tsx

@@ -221,6 +221,10 @@ export default flat({
       creditProducts: {
         emptyTip: '此计量器尚未关联任何 Credit 产品。',
       },
+      rechargePackage: {
+        priceId: '充值套餐',
+        tooltip: '充值套餐是用于充值 {name} 的套餐，用户购买后可以获得对应的 {name}。',
+      },
     },
     creditProduct: {
       create: '创建 Credit 产品',
@@ -459,6 +463,10 @@ export default flat({
         pricingNote: '对于计量产品，定价会自动基于所选计量器跟踪的使用情况。',
         description: 'Credit 计量计费的订阅需要有对应的 Credit 消费，如果 Credit 消耗完，对应的服务会停止。',
       },
+      credit: {
+        saveAsBasePrice: '设为充值套餐',
+        saveSuccess: '设置成功',
+      },
       types: {
         onetime: '一次性',
         onetimeDesc: '收取一次性费用',
@@ -937,6 +945,7 @@ export default flat({
         overviewDescription: '监控所有货币的信用余额、使用情况和未偿债务。',
         availableBalance: '可用余额',
         usage: '使用情况',
+        viewInvoice: '查看账单',
         viewGrants: '查看额度',
         viewUsage: '查看使用情况',
         recentActivity: '最近活动',
@@ -1181,6 +1190,11 @@ export default flat({
     product: {
       empty: '没有订阅产品',
     },
+    credit: {
+      recharge: '购买额度',
+      autoRecharge: '自动充值',
+      unsupported: '暂不支持购买额度',
+    },
     recharge: {
       title: '充值',
       amount: '金额',

package/src/pages/admin/billing/meters/detail.tsx

@@ -253,6 +253,24 @@ export default function MeterDetail(props: { id: string }) {
             }}>
             <InfoMetric label={t('common.id')} value={<Copyable text={props.id} style={{ marginLeft: 4 }} />} divider />
             <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
+            {data.paymentCurrency?.recharge_config?.base_price_id && (
+              <InfoMetric
+                label={t('admin.meter.rechargePackage.priceId')}
+                tip={t('admin.meter.rechargePackage.tooltip', {
+                  name: data.paymentCurrency.name,
+                })}
+                value={
+                  <Button
+                    variant="text"
+                    size="small"
+                    onClick={() => navigate(`/admin/products/${data.paymentCurrency.recharge_config!.base_price_id}`)}
+                    sx={{ p: 0, minWidth: 'auto', textAlign: 'left', ml: 0.5, color: 'text.link' }}>
+                    {data.paymentCurrency.recharge_config!.base_price_id}
+                  </Button>
+                }
+                divider
+              />
+            )}
           </Stack>
         </Box>
         <Divider />

package/src/pages/admin/customers/customers/credit-grant/detail.tsx

@@ -16,6 +16,7 @@ import { Alert, Avatar, Box, Button, CircularProgress, Divider, Stack, Typograph
 import { useRequest, useSetState } from 'ahooks';
 import { styled } from '@mui/system';
 import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import InfoMetric from '../../../../../components/info-metric';
 import InfoRow from '../../../../../components/info-row';
@@ -34,6 +35,7 @@ const fetchData = (id: string | undefined): Promise<TCreditGrantExpanded> => {
 
 export default function AdminCreditGrantDetail({ id }: { id: string }) {
   const { t } = useLocaleContext();
+  const navigate = useNavigate();
   const [state, setState] = useSetState({
     editing: {
       metadata: false,
@@ -117,6 +119,14 @@ export default function AdminCreditGrantDetail({ id }: { id: string }) {
               {t('admin.customer.creditGrants.title')}
             </Typography>
           </Stack>
+          {data.metadata!.invoice_id && (
+            <Button
+              variant="outlined"
+              size="small"
+              onClick={() => navigate(`/admin/billing/${data.metadata!.invoice_id}`)}>
+              {t('admin.customer.creditGrants.viewInvoice')}
+            </Button>
+          )}
         </Stack>
 
         <Box

package/src/pages/admin/products/prices/actions.tsx

@@ -2,7 +2,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import { ConfirmDialog, api, formatError } from '@blocklet/payment-react';
 import type { TPrice, TProduct } from '@blocklet/payment-types';
-import { useSetState } from 'ahooks';
+import { useRequest, useSetState } from 'ahooks';
 import noop from 'lodash/noop';
 import { useNavigate } from 'react-router-dom';
 
@@ -18,6 +18,11 @@ type Props = {
   product?: TProduct | null;
 };
 
+const getCreditCurrencyConfig = async (currencyId: string) => {
+  const res = await api.get(`/api/payment-currencies/${currencyId}/recharge-config`);
+  return res.data;
+};
+
 export default function PriceActions({
   data,
   onChange,
@@ -106,6 +111,30 @@ export default function PriceActions({
     navigate(`/admin/products/pricing-tables?price_id=${data.id}`);
   };
 
+  const creditCurrencyId = data.metadata?.credit_config?.currency_id;
+
+  const { data: creditCurrencyConfig } = useRequest(() => getCreditCurrencyConfig(creditCurrencyId), {
+    refreshDeps: [creditCurrencyId],
+    ready: !!creditCurrencyId,
+  });
+
+  const onSaveAsTopupPrice = async () => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/payment-currencies/${creditCurrencyId}/recharge-config`, {
+        base_price_id: data.id,
+      });
+
+      Toast.success(t('admin.price.credit.saveSuccess'));
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+
   const actions = [
     {
       label: t('admin.pricing'),
@@ -140,7 +169,7 @@ export default function PriceActions({
     },
     { label: t('admin.paymentLink.add'), handler: onCreatePaymentLink, color: 'primary' },
     { label: t('admin.pricingTable.add'), handler: onCreatePricingTable, color: 'primary', disabled: !data.recurring },
-  ];
+  ].filter(Boolean);
 
   if (!setAsDefault) {
     actions.splice(4, 0, {
@@ -152,6 +181,17 @@ export default function PriceActions({
     });
   }
 
+  if (creditCurrencyId && creditCurrencyConfig?.recharge_config?.base_price_id !== data.id) {
+    const insertIndex = !setAsDefault ? 5 : 4;
+    actions.splice(insertIndex, 0, {
+      label: t('admin.price.credit.saveAsBasePrice'),
+      handler: onSaveAsTopupPrice,
+      color: 'text.primary',
+      disabled: false,
+      divider: false,
+    });
+  }
+
   return (
     <>
       <Actions variant={variant} actions={actions} />

package/src/pages/admin/products/products/create.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, findCurrency, formatError, formatPrice, usePaymentContext } from '@blocklet/payment-react';
+import { api, findCurrency, formatError, formatPrice, usePaymentContext, Collapse } from '@blocklet/payment-react';
 import { AddOutlined } from '@mui/icons-material';
 import { Box, Button, Divider } from '@mui/material';
 import { cloneDeep } from 'lodash';
@@ -9,7 +9,6 @@ import { Fragment, useState, useEffect } from 'react';
 import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
 import { dispatch } from 'use-bus';
 
-import Collapse from '../../../../components/collapse';
 import DrawerForm from '../../../../components/drawer-form';
 import PriceActions from '../../../../components/price/actions';
 import PriceForm, { DEFAULT_PRICE } from '../../../../components/price/form';

package/src/pages/admin/settings/vault-config/edit-form.tsx

@@ -216,10 +216,10 @@ function EditForm({ item, onClose, onSuccess, isOwner }: EditFormProps) {
                               </Box>
                             </InputAdornment>
                           ),
-                          inputProps: {
-                            min: 0,
-                            max: MAX_SAFE_AMOUNT,
-                          },
+                        },
+                        htmlInput: {
+                          min: 0,
+                          max: MAX_SAFE_AMOUNT,
                         },
                       }}
                     />
@@ -269,10 +269,10 @@ function EditForm({ item, onClose, onSuccess, isOwner }: EditFormProps) {
                               </Box>
                             </InputAdornment>
                           ),
-                          inputProps: {
-                            min: 0,
-                            max: MAX_SAFE_AMOUNT,
-                          },
+                        },
+                        htmlInput: {
+                          min: 0,
+                          max: MAX_SAFE_AMOUNT,
                         },
                       }}
                     />

package/src/pages/customer/credit-grant/detail.tsx

@@ -10,7 +10,7 @@ import {
 } from '@blocklet/payment-react';
 import type { TCreditGrantExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { Alert, Avatar, Box, CircularProgress, Divider, Stack, Typography } from '@mui/material';
+import { Alert, Avatar, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useNavigate, useParams } from 'react-router-dom';
 import { styled } from '@mui/system';
@@ -93,6 +93,14 @@ export default function CustomerCreditGrantDetail() {
               {t('admin.customer.creditGrants.title')}
             </Typography>
           </Stack>
+          {data.metadata?.invoice_id && (
+            <Button
+              variant="outlined"
+              size="small"
+              onClick={() => navigate(`/customer/invoice/${data.metadata!.invoice_id}`)}>
+              {t('admin.customer.creditGrants.viewInvoice')}
+            </Button>
+          )}
         </Stack>
         <Box
           mt={4}