payment-kit 1.21.12 → 1.21.14

package/blocklet.yml

@@ -1,6 +1,6 @@
 name: z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk
 title: Payment Kit
-description: The decentralized stripe alike payment solution for blocklets.
+description: A decentralized Stripe-like payment solution for Blocklets.
 keywords:
   - payment
   - stripe
@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.21.12
+version: 1.21.14
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.21.12",
+  "version": "1.21.14",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -56,9 +56,9 @@
     "@blocklet/error": "^0.2.5",
     "@blocklet/js-sdk": "^1.16.53-beta-20251011-054719-4ed2f6b7",
     "@blocklet/logger": "^1.16.53-beta-20251011-054719-4ed2f6b7",
-    "@blocklet/payment-broker-client": "1.21.12",
-    "@blocklet/payment-react": "1.21.12",
-    "@blocklet/payment-vendor": "1.21.12",
+    "@blocklet/payment-broker-client": "1.21.14",
+    "@blocklet/payment-react": "1.21.14",
+    "@blocklet/payment-vendor": "1.21.14",
     "@blocklet/sdk": "^1.16.53-beta-20251011-054719-4ed2f6b7",
     "@blocklet/ui-react": "^3.1.46",
     "@blocklet/uploader": "^0.2.15",
@@ -128,7 +128,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.53-beta-20251011-054719-4ed2f6b7",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.21.12",
+    "@blocklet/payment-types": "1.21.14",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -175,5 +175,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "8968cff415ab6906675fae48ff7a939e9d03d2ad"
+  "gitHead": "31f93a8310fe5184be8dd4ff23b362906c8a66cf"
 }

package/src/components/collapse.tsx

@@ -13,6 +13,7 @@ type Props = {
   onChange?: (value: string, expanded: boolean) => void;
   lazy?: boolean;
   card?: boolean;
+  timeout?: number;
 };
 
 export default function IconCollapse(rawProps: Props) {
@@ -75,8 +76,8 @@ export default function IconCollapse(rawProps: Props) {
         </Stack>
       </Stack>
 
-      <Collapse in={expanded} sx={{ width: '100%' }}>
-        {expanded || props.lazy ? props.children : null}
+      <Collapse in={expanded} timeout={props.timeout || 'auto'} sx={{ width: '100%' }}>
+        {expanded || !props.lazy ? props.children : null}
       </Collapse>
     </>
   );

package/src/components/drawer-form.tsx

@@ -58,7 +58,8 @@ export default function DrawerForm(rawProps: Props) {
         onClose={handleClose}
         sx={props.style || {}}
         width={props.width}
-        disableEscapeKeyDown>
+        disableEscapeKeyDown
+        disableScrollLock>
         <Stack
           direction="row"
           className="drawer-form-header-wrapper"

package/src/components/invoice/list.tsx

@@ -15,7 +15,7 @@ import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { Avatar, CircularProgress, Typography } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
 import InvoiceActions from './action';
@@ -24,6 +24,9 @@ const fetchData = (params: Record<string, any> = {}): Promise<{ list: TInvoiceEx
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
     let v = params[key];
+    if (v === undefined || v === null || v === '') {
+      return;
+    }
     if (key === 'q') {
       v = Object.entries(v)
         .map((x) => x.join(':'))
@@ -40,9 +43,11 @@ type SearchProps = {
   pageSize: number;
   page: number;
   customer_id?: string;
+  currency_id?: string;
   subscription_id?: string;
   q?: any;
   o?: string;
+  tax_rate_id?: string;
 };
 
 type ListProps = {
@@ -58,6 +63,7 @@ type ListProps = {
   ignore_zero?: boolean;
   include_staking?: boolean;
   include_return_staking?: boolean;
+  tax_rate_id?: string;
 
   mode?: 'admin' | 'customer';
 };
@@ -69,6 +75,9 @@ const getListKey = (props: ListProps) => {
   if (props.subscription_id) {
     return `subscription-invoices-${props.subscription_id}`;
   }
+  if (props.tax_rate_id) {
+    return `tax-rate-invoices-${props.tax_rate_id}`;
+  }
 
   return 'invoices';
 };
@@ -103,6 +112,7 @@ function InvoiceLink({ invoice, children }: { invoice: TInvoiceExpanded; childre
 export default function InvoiceList({
   customer_id = '',
   subscription_id = '',
+  tax_rate_id = '',
   features = {
     customer: true,
     filter: true,
@@ -113,10 +123,16 @@ export default function InvoiceList({
   ignore_zero = false,
   mode = 'admin',
 }: ListProps) {
+  const [searchParams] = useSearchParams();
   const listKey = getListKey({ customer_id, subscription_id });
 
   const { t, locale } = useLocaleContext();
   const defaultPageSize = useDefaultPageSize(20);
+
+  const urlStatus = searchParams.get('status');
+  const urlCurrencyId = searchParams.get('currency_id');
+  const urlCustomerId = searchParams.get('customer_id');
+
   const [search, setSearch] = useLocalStorageState<
     SearchProps & { ignore_zero?: boolean; include_staking?: boolean; include_return_staking?: boolean }
   >(listKey, {
@@ -124,6 +140,7 @@ export default function InvoiceList({
       status: status as string,
       customer_id,
       subscription_id,
+      tax_rate_id,
       pageSize: defaultPageSize,
       page: 1,
       ignore_zero: !!ignore_zero,
@@ -132,6 +149,17 @@ export default function InvoiceList({
     },
   });
 
+  useEffect(() => {
+    if (urlStatus || urlCurrencyId || urlCustomerId) {
+      setSearch((prev) => ({
+        ...prev!,
+        ...(urlStatus && { status: urlStatus }),
+        ...(urlCurrencyId && { currency_id: urlCurrencyId }),
+        ...(urlCustomerId && { customer_id: urlCustomerId }),
+      }));
+    }
+  }, [urlStatus, urlCurrencyId, urlCustomerId, setSearch]);
+
   const [data, setData] = useState({}) as any;
 
   const refresh = () =>
@@ -140,6 +168,7 @@ export default function InvoiceList({
       include_staking: !!include_staking,
       ignore_zero: !!ignore_zero,
       include_return_staking: !!include_return_staking,
+      tax_rate_id,
     }).then((res: any) => {
       setData(res);
     });
@@ -148,6 +177,14 @@ export default function InvoiceList({
     refresh();
   }, [search]);
 
+  useEffect(() => {
+    if (tax_rate_id && search?.tax_rate_id !== tax_rate_id) {
+      // @ts-ignore
+      setSearch((prev) => ({ ...(prev || {}), tax_rate_id, page: 1 }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tax_rate_id]);
+
   if (!data.list) {
     return <CircularProgress />;
   }

package/src/components/invoice/table.tsx

@@ -9,6 +9,7 @@ import { useSetState } from 'ahooks';
 
 import { styled } from '@mui/system';
 import { isEmpty } from 'lodash';
+import { useNavigate } from 'react-router-dom';
 import LineItemActions from '../subscription/items/actions';
 import { UsageRecordDialog } from '../subscription/items/usage-records';
 import { getInvoiceUsageReportStartEnd } from '../../libs/util';
@@ -17,6 +18,7 @@ type Props = {
   invoice: TInvoiceExpanded;
   simple?: boolean;
   emptyNodeText?: string;
+  mode?: 'admin' | 'portal';
 };
 
 type InvoiceDetailItem = {
@@ -182,8 +184,10 @@ export function getInvoiceRows(invoice: TInvoiceExpanded, t: (key: string) => st
   };
 }
 
-export default function InvoiceTable({ invoice, simple = false, emptyNodeText = '' }: Props) {
+export default function InvoiceTable({ invoice, simple = false, emptyNodeText = '', mode = 'portal' }: Props) {
   const { t, locale } = useLocaleContext();
+  const isAdmin = mode === 'admin';
+  const navigate = useNavigate();
   const { detail, summary } = getInvoiceRows(invoice, t);
   const [state, setState] = useSetState({
     subscriptionId: '',
@@ -293,6 +297,7 @@ export default function InvoiceTable({ invoice, simple = false, emptyNodeText =
       width: 200,
       align: 'right',
     },
+
     {
       label: t('common.discount'),
       name: 'discount',
@@ -321,6 +326,7 @@ export default function InvoiceTable({ invoice, simple = false, emptyNodeText =
         },
       },
     },
+
     {
       label: t('common.amount'),
       name: 'amount',
@@ -333,6 +339,46 @@ export default function InvoiceTable({ invoice, simple = false, emptyNodeText =
         },
       },
     },
+    ...(isAdmin
+      ? [
+          {
+            label: t('admin.taxRate.label'),
+            name: 'tax_rate',
+            width: 100,
+            align: 'right',
+            options: {
+              customBodyRenderLite: (_: string, index: number) => {
+                const item = detail[index] as InvoiceDetailItem;
+                const taxRate = (item.raw as any).tax_rate;
+                if (!taxRate) {
+                  return (
+                    <Typography component="span" sx={{ color: 'text.secondary' }}>
+                      —
+                    </Typography>
+                  );
+                }
+                return (
+                  <Tooltip
+                    title={`${taxRate.display_name || taxRate.id} (${taxRate.percentage}%)`}
+                    arrow
+                    placement="top">
+                    <Typography
+                      component="span"
+                      sx={{
+                        color: 'text.link',
+                        fontWeight: 500,
+                        cursor: 'default',
+                      }}
+                      onClick={() => navigate(`/admin/tax/${taxRate.id}`)}>
+                      {taxRate.percentage}%
+                    </Typography>
+                  </Tooltip>
+                );
+              },
+            },
+          },
+        ]
+      : []),
     ...(simple
       ? []
       : [
@@ -343,7 +389,7 @@ export default function InvoiceTable({ invoice, simple = false, emptyNodeText =
             options: {
               customBodyRenderLite: (_: string, index: number) => {
                 const item = detail[index] as InvoiceDetailItem;
-                return <LineItemActions data={item as any} />;
+                return <LineItemActions data={item.raw as any} mode={mode} />;
               },
             },
           },

package/src/components/metadata/form.tsx

@@ -219,7 +219,7 @@ export default function MetadataForm({
                         message: t('common.maxLength', { len: 40 }),
                       },
                     }}
-                    label="Key *"
+                    label="Key"
                     placeholder="Key"
                     // @ts-ignore
                     ref={errors?.metadata?.[index]?.key ? errorRef : null}
@@ -229,7 +229,7 @@ export default function MetadataForm({
                     size="small"
                     errorPosition="right"
                     name={`metadata.${index}.value`}
-                    label="Value *"
+                    label="Value"
                     placeholder="Value"
                     rules={{
                       validate: (value: any) => {

package/src/components/payment-intent/list.tsx

@@ -13,7 +13,7 @@ import type { TPaymentIntentExpanded } from '@blocklet/payment-types';
 import { Avatar, CircularProgress, Typography } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 
 import { debounce } from '../../libs/util';
 import CustomerLink from '../customer/link';
@@ -39,6 +39,7 @@ type SearchProps = {
   pageSize: number;
   page: number;
   customer_id?: string;
+  currency_id?: string;
   invoice_id?: string;
   q?: any;
   o?: any;
@@ -75,9 +76,15 @@ export default function PaymentList({
   },
 }: ListProps) {
   const { t } = useLocaleContext();
+  const [searchParams] = useSearchParams();
 
   const listKey = getListKey({ customer_id, invoice_id });
   const defaultPageSize = useDefaultPageSize(20);
+
+  const urlStatus = searchParams.get('status');
+  const urlCurrencyId = searchParams.get('currency_id');
+  const urlCustomerId = searchParams.get('customer_id');
+
   const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
     defaultValue: {
       status: '',
@@ -88,6 +95,17 @@ export default function PaymentList({
     },
   });
 
+  useEffect(() => {
+    if (urlStatus || urlCurrencyId || urlCustomerId) {
+      setSearch((prev) => ({
+        ...prev!,
+        ...(urlStatus && { status: urlStatus }),
+        ...(urlCurrencyId && { currency_id: urlCurrencyId }),
+        ...(urlCustomerId && { customer_id: urlCustomerId }),
+      }));
+    }
+  }, [urlStatus, urlCurrencyId, urlCustomerId, setSearch]);
+
   const [data, setData] = useState({}) as any;
 
   const fetchListData = () => {

package/src/components/payouts/list.tsx

@@ -13,7 +13,7 @@ import type { TPayoutExpanded } from '@blocklet/payment-types';
 import { Avatar, CircularProgress, Typography } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 
 import DID from '@arcblock/ux/lib/DID';
 import ShortenLabel from '@arcblock/ux/lib/UserCard/Content/shorten-label';
@@ -42,6 +42,7 @@ type SearchProps = {
   pageSize: number;
   page: number;
   customer_id?: string;
+  currency_id?: string;
   payment_intent_id?: string;
   q?: any;
   o?: any;
@@ -80,9 +81,15 @@ export default function PayoutList({
   },
 }: ListProps) {
   const { t } = useLocaleContext();
+  const [searchParams] = useSearchParams();
 
   const listKey = getListKey({ customer_id, payment_intent_id });
   const defaultPageSize = useDefaultPageSize(20);
+
+  const urlStatus = searchParams.get('status');
+  const urlCurrencyId = searchParams.get('currency_id');
+  const urlCustomerId = searchParams.get('customer_id');
+
   const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
     defaultValue: {
       status: status as string,
@@ -93,6 +100,17 @@ export default function PayoutList({
     },
   });
 
+  useEffect(() => {
+    if (urlStatus || urlCurrencyId || urlCustomerId) {
+      setSearch((prev) => ({
+        ...prev!,
+        ...(urlStatus && { status: urlStatus }),
+        ...(urlCurrencyId && { currency_id: urlCurrencyId }),
+        ...(urlCustomerId && { customer_id: urlCustomerId }),
+      }));
+    }
+  }, [urlStatus, urlCurrencyId, urlCustomerId, setSearch]);
+
   const [data, setData] = useState({}) as any;
 
   useEffect(() => {

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

@@ -2,11 +2,9 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { usePaymentContext } from '@blocklet/payment-react';
 import { AddOutlined, ArrowDropDown } from '@mui/icons-material';
 import { ListSubheader, MenuItem, Select, Stack, SxProps, Typography } from '@mui/material';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import type { LiteralUnion } from 'type-fest';
 
-import { flatten } from 'lodash';
-import { getSupportedPaymentMethods } from '../../libs/util';
 import Currency from '../currency';
 
 type Props = {
@@ -19,6 +17,12 @@ type Props = {
   selectSX?: SxProps;
   currencyFilter?: (currency: any) => boolean;
   hideMethod?: boolean;
+  includeAllOption?: boolean;
+  allOption?: {
+    value: string;
+    label: string;
+  };
+  selectedSx?: SxProps;
 };
 
 export default function CurrencySelect({
@@ -31,16 +35,29 @@ export default function CurrencySelect({
   selectSX = {},
   currencyFilter = () => true,
   hideMethod = false,
+  includeAllOption = false,
+  allOption = { value: 'all', label: 'All' },
+  selectedSx = {},
 }: Props) {
   const { t } = useLocaleContext();
   const { settings } = usePaymentContext();
   const [mode, setMode] = useState(initialMode);
 
-  const currencies = flatten(settings.paymentMethods.map((method) => method.payment_currencies));
+  const currencyGroups = useMemo(() => {
+    return (settings.paymentMethods || []).map((method) => ({
+      method,
+      currencies: (method.payment_currencies || []).map((currency: any) => ({
+        ...currency,
+        method,
+      })),
+    }));
+  }, [settings.paymentMethods]);
+
+  const allCurrencies = useMemo(() => currencyGroups.flatMap((group) => group.currencies), [currencyGroups]);
 
   useEffect(() => {
-    if (value && initialMode === 'selected' && currencies.length > 0) {
-      const currency = currencies.find((c) => c.id === value);
+    if (value && initialMode === 'selected' && allCurrencies.length > 0) {
+      const currency = allCurrencies.find((c) => c.id === value);
       if (currency && !hasSelected(currency)) {
         const timer = setTimeout(() => {
           onSelect(value);
@@ -49,7 +66,7 @@ export default function CurrencySelect({
       }
     }
     return undefined;
-  }, [value, initialMode]);
+  }, [value, initialMode, allCurrencies, hasSelected]);
 
   const handleSelect = (e: any) => {
     if (disabled) {
@@ -59,15 +76,36 @@ export default function CurrencySelect({
     onSelect(e.target.value);
   };
 
-  const selectedCurrency = currencies.find((x) => x.id === value);
+  const selectedCurrency = allCurrencies.find((x) => x.id === value);
 
-  const selectedPaymentMethod = settings.paymentMethods.find((x) => x.payment_currencies.some((c) => c.id === value));
+  const selectedPaymentMethod = currencyGroups.find((group) =>
+    group.currencies.some((currency) => currency.id === value)
+  )?.method;
 
-  const extraCurrencies = getSupportedPaymentMethods(settings.paymentMethods, (x) => !hasSelected(x));
+  const availableGroups = useMemo(() => {
+    return currencyGroups
+      .map((group) => ({
+        method: group.method,
+        currencies: group.currencies.filter((currency) => currencyFilter(currency) && !hasSelected(currency)),
+      }))
+      .filter((group) => group.currencies.length > 0);
+  }, [currencyGroups, hasSelected]);
 
-  const canSelect = extraCurrencies.length > 0 && !disabled;
+  const canSelect = availableGroups.length > 0 && !disabled;
 
   if (mode === 'selected') {
+    const isAllSelected = includeAllOption && value === allOption.value;
+    let displayLabel = '';
+    if (isAllSelected) {
+      displayLabel = allOption.label;
+    } else if (selectedCurrency?.symbol) {
+      displayLabel = hideMethod
+        ? selectedCurrency.symbol
+        : `${selectedCurrency.symbol} (${selectedPaymentMethod?.name || ''})`;
+    } else if (!hideMethod && selectedPaymentMethod?.name) {
+      displayLabel = `(${selectedPaymentMethod.name})`;
+    }
+
     return (
       <Typography
         onClick={() => {
@@ -81,8 +119,10 @@ export default function CurrencySelect({
           minWidth: '120px',
           justifyContent: 'flex-end',
           textAlign: 'right',
+          width: '100%',
+          ...selectedSx,
         }}>
-        {selectedCurrency?.symbol} {hideMethod ? '' : `(${selectedPaymentMethod?.name})`}
+        {displayLabel}
         {canSelect && <ArrowDropDown sx={{ color: 'text.secondary', fontSize: 21 }} />}
       </Typography>
     );
@@ -97,47 +137,64 @@ export default function CurrencySelect({
       <Select
         size="small"
         value={value}
-        renderValue={() => (
-          <Typography variant="body1" sx={{ display: 'inline-flex', fontSize: '12px', color: 'text.secondary' }}>
-            {selectedCurrency?.symbol} {hideMethod ? '' : `(${selectedPaymentMethod?.name})`}
-          </Typography>
-        )}
+        renderValue={() => {
+          if (includeAllOption && value === allOption.value) {
+            return (
+              <Typography variant="body1" sx={{ display: 'inline-flex', fontSize: '12px', color: 'text.secondary' }}>
+                {allOption.label}
+              </Typography>
+            );
+          }
+
+          const symbolText = selectedCurrency?.symbol || '';
+          const methodText = !hideMethod && selectedPaymentMethod?.name ? ` (${selectedPaymentMethod.name})` : '';
+
+          return (
+            <Typography variant="body1" sx={{ display: 'inline-flex', fontSize: '12px', color: 'text.secondary' }}>
+              {`${symbolText}${methodText}`.trim()}
+            </Typography>
+          );
+        }}
         onChange={handleSelect}
         open
         sx={{ width, ...selectSX }}
         disabled={disabled}
         onClose={() => setMode(initialMode)}>
-        {extraCurrencies
-          .map((method) => {
-            const filteredCurrencies = method.payment_currencies.filter(currencyFilter);
-            if (filteredCurrencies.length === 0) {
-              return null;
-            }
-
-            return [
-              hideMethod ? null : (
-                <ListSubheader
-                  key={method.id}
-                  sx={{ fontSize: '0.875rem', color: 'text.secondary', lineHeight: '2.1875rem' }}>
-                  {method.name}
-                </ListSubheader>
-              ),
-              ...filteredCurrencies.map((currency) => (
-                <MenuItem key={currency.id} sx={{ pl: 3 }} value={currency.id}>
-                  <Stack direction="row" sx={{ width: '100%', justifyContent: 'space-between', gap: 2 }}>
-                    {hideMethod ? null : <Currency logo={currency.logo} name={currency.name} />}
-                    <Typography
-                      sx={{
-                        fontWeight: hideMethod ? 'normal' : 'bold',
-                      }}>
-                      {currency.symbol}
-                    </Typography>
-                  </Stack>
-                </MenuItem>
-              )),
-            ];
-          })
-          .filter(Boolean)}
+        {includeAllOption ? (
+          <MenuItem value={allOption.value}>
+            <Typography
+              sx={{
+                fontWeight: 'bold',
+              }}>
+              {allOption.label}
+            </Typography>
+          </MenuItem>
+        ) : null}
+        {availableGroups.flatMap((group) => {
+          const header = hideMethod ? null : (
+            <ListSubheader
+              key={group.method.id}
+              sx={{ fontSize: '0.875rem', color: 'text.secondary', lineHeight: '2.1875rem' }}>
+              {group.method.name}
+            </ListSubheader>
+          );
+
+          const items = group.currencies.map((currency) => (
+            <MenuItem key={currency.id} sx={{ pl: 3 }} value={currency.id}>
+              <Stack direction="row" sx={{ width: '100%', justifyContent: 'space-between', gap: 2 }}>
+                {hideMethod ? null : <Currency logo={currency.logo} name={currency.name} />}
+                <Typography
+                  sx={{
+                    fontWeight: hideMethod ? 'normal' : 'bold',
+                  }}>
+                  {currency.symbol}
+                </Typography>
+              </Stack>
+            </MenuItem>
+          ));
+
+          return header ? [header, ...items] : items;
+        })}
       </Select>
     );
   }

package/src/components/price/form.tsx

@@ -380,7 +380,9 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
           }}>
           <Stack spacing={2} sx={{ flex: 1, minWidth: { xs: 'auto', sm: '300px' }, '>div': { width: '100%' } }}>
             <Box sx={{ width: '100%' }}>
-              <FormLabel tooltip={t('admin.price.amountTip')}>{t('admin.price.amount')}</FormLabel>
+              <FormLabel tooltip={t('admin.price.amountTip')} description={t('admin.price.amountDescription')}>
+                {t('admin.price.amount')}
+              </FormLabel>
               <Controller
                 name={getFieldName('unit_amount')}
                 control={control}