payment-kit 1.13.111 → 1.13.113

package/src/components/payment-method/bitcoin.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-
-import FormInput from '../input';
+import { FormInput } from '@blocklet/payment-react';
 
 export default function BitcoinMethodForm() {
   const { t } = useLocaleContext();

package/src/components/payment-method/ethereum.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-
-import FormInput from '../input';
+import { FormInput } from '@blocklet/payment-react';
 
 export default function EthereumMethodForm() {
   const { t } = useLocaleContext();

package/src/components/payment-method/stripe.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-
-import FormInput from '../input';
+import { FormInput } from '@blocklet/payment-react';
 
 export default function StripeMethodForm() {
   const { t } = useLocaleContext();

package/src/components/portal/invoice/list.tsx

@@ -1,14 +1,13 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { Paginated, TInvoiceExpanded } from '@did-pay/types';
+import { Status, api, formatToDate } from '@blocklet/payment-react';
+import type { Paginated, TInvoiceExpanded } from '@blocklet/payment-types';
 import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { fromUnitToToken } from '@ocap/util';
 import { useInfiniteScroll } from 'ahooks';
 import { Link } from 'react-router-dom';
 
-import api from '../../../libs/api';
-import { formatToDate, getInvoiceStatusColor } from '../../../libs/util';
-import Status from '../../status';
+import { getInvoiceStatusColor } from '../../../libs/util';
 
 const groupByDate = (items: TInvoiceExpanded[]) => {
   const grouped: { [key: string]: TInvoiceExpanded[] } = {};
@@ -56,7 +55,7 @@ export default function CustomerInvoiceList({ customer_id }: Props) {
   if (data && data.list.length === 0) {
     return (
       <Typography color="text.secondary">
-        {customer_id ? t('customer.invoice.empty') : t('admin.invoice.empty')}
+        {customer_id ? t('payment.customer.invoice.empty') : t('admin.invoice.empty')}
       </Typography>
     );
   }

package/src/components/portal/subscription/actions.tsx

@@ -1,14 +1,13 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TSubscriptionExpanded } from '@did-pay/types';
+import { api, formatError, formatToDate, getSubscriptionAction } from '@blocklet/payment-react';
+import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Button, Stack } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
-import api from '../../../libs/api';
-import { formatError, formatToDate, getSubscriptionAction } from '../../../libs/util';
 import ConfirmDialog from '../../confirm';
 import CustomerCancelForm from './cancel';
 
@@ -92,7 +91,7 @@ export function SubscriptionActionsInner({ subscription, showUpdate, onChange }:
               });
             }
           }}>
-          {t(`customer.${action.action}.button`)}
+          {t(`payment.customer.${action.action}.button`)}
         </Button>
       )}
       {data && (
@@ -103,14 +102,14 @@ export function SubscriptionActionsInner({ subscription, showUpdate, onChange }:
           onClick={() => {
             navigate(`/customer/subscription/${subscription.id}/update`);
           }}>
-          {t('customer.upgrade.button')}
+          {t('payment.customer.upgrade.button')}
         </Button>
       )}
       {state.action === 'cancel' && state.subscription && (
         <ConfirmDialog
           onConfirm={handleCancel}
           onCancel={() => setState({ action: '', subscription: '' })}
-          title={t('customer.cancel.title')}
+          title={t('payment.customer.cancel.title')}
           message={<CustomerCancelForm data={subscription} />}
           loading={state.loading}
         />
@@ -119,8 +118,8 @@ export function SubscriptionActionsInner({ subscription, showUpdate, onChange }:
         <ConfirmDialog
           onConfirm={handleRecover}
           onCancel={() => setState({ action: '', subscription: '' })}
-          title={t('customer.recover.title')}
-          message={t('customer.recover.description', {
+          title={t('payment.customer.recover.title')}
+          message={t('payment.customer.recover.description', {
             date: formatToDate(subscription.current_period_end * 1000),
           })}
           loading={state.loading}

package/src/components/portal/subscription/cancel.tsx

@@ -1,17 +1,18 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TSubscriptionExpanded } from '@did-pay/types';
+import { formatTime } from '@blocklet/payment-react';
+import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { FormControlLabel, Radio, RadioGroup, Stack, TextField, Typography } from '@mui/material';
 import { Controller, useFormContext } from 'react-hook-form';
 
-import { formatTime } from '../../../libs/util';
-
 export default function CustomerCancelForm({ data }: { data: TSubscriptionExpanded }) {
   const { t } = useLocaleContext();
   const { control } = useFormContext();
 
   return (
     <Stack direction="column" spacing={1} alignItems="flex-start">
-      <Typography>{t('customer.cancel.description', { date: formatTime(data.current_period_end * 1000) })}</Typography>
+      <Typography>
+        {t('payment.customer.cancel.description', { date: formatTime(data.current_period_end * 1000) })}
+      </Typography>
       <Controller
         name="cancel.feedback"
         control={control}
@@ -20,44 +21,44 @@ export default function CustomerCancelForm({ data }: { data: TSubscriptionExpand
             <FormControlLabel
               value="too_expensive"
               control={<Radio checked={field.value === 'too_expensive'} />}
-              label={t('customer.cancel.feedback.too_expensive')}
+              label={t('payment.customer.cancel.feedback.too_expensive')}
             />
             <FormControlLabel
               value="missing_features"
               control={<Radio checked={field.value === 'missing_features'} />}
-              label={t('customer.cancel.feedback.missing_features', {
+              label={t('payment.customer.cancel.feedback.missing_features', {
                 date: formatTime(new Date(data.current_period_end * 1000)),
               })}
             />
             <FormControlLabel
               value="switched_service"
               control={<Radio checked={field.value === 'switched_service'} />}
-              label={t('customer.cancel.feedback.switched_service')}
+              label={t('payment.customer.cancel.feedback.switched_service')}
             />
             <FormControlLabel
               value="unused"
               control={<Radio checked={field.value === 'unused'} />}
-              label={t('customer.cancel.feedback.unused')}
+              label={t('payment.customer.cancel.feedback.unused')}
             />
             <FormControlLabel
               value="customer_service"
               control={<Radio checked={field.value === 'customer_service'} />}
-              label={t('customer.cancel.feedback.customer_service')}
+              label={t('payment.customer.cancel.feedback.customer_service')}
             />
             <FormControlLabel
               value="too_complex"
               control={<Radio checked={field.value === 'too_complex'} />}
-              label={t('customer.cancel.feedback.too_complex')}
+              label={t('payment.customer.cancel.feedback.too_complex')}
             />
             <FormControlLabel
               value="low_quality"
               control={<Radio checked={field.value === 'low_quality'} />}
-              label={t('customer.cancel.feedback.low_quality')}
+              label={t('payment.customer.cancel.feedback.low_quality')}
             />
             <FormControlLabel
               value="other"
               control={<Radio checked={field.value === 'other'} />}
-              label={t('customer.cancel.feedback.other')}
+              label={t('payment.customer.cancel.feedback.other')}
             />
           </RadioGroup>
         )}

package/src/components/portal/subscription/list.tsx

@@ -1,17 +1,11 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { Paginated, TSubscriptionExpanded } from '@did-pay/types';
+import { Status, api, formatPrice, getSubscriptionTimeSummary } from '@blocklet/payment-react';
+import type { Paginated, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Avatar, AvatarGroup, Box, Button, CircularProgress, Stack, StackProps, Typography } from '@mui/material';
 import { useInfiniteScroll } from 'ahooks';
 
-import api from '../../../libs/api';
-import {
-  formatPrice,
-  formatSubscriptionProduct,
-  getSubscriptionStatusColor,
-  getSubscriptionTimeSummary,
-} from '../../../libs/util';
-import Status from '../../status';
+import { formatSubscriptionProduct, getSubscriptionStatusColor } from '../../../libs/util';
 import SubscriptionActions from './actions';
 
 const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TSubscriptionExpanded>> => {
@@ -48,7 +42,7 @@ export default function CurrentSubscriptions({ id, onChange, onClickSubscription
   }
 
   if (data && data.list.length === 0) {
-    return <Typography color="text.secondary">{t('customer.subscriptions.empty')}</Typography>;
+    return <Typography color="text.secondary">{t('payment.customer.subscriptions.empty')}</Typography>;
   }
 
   const hasMore = data && data.list.length < data.count;

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

@@ -1,10 +1,10 @@
 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 { useState } from 'react';
 import type { LiteralUnion } from 'type-fest';
 
-import { useSettingsContext } from '../../contexts/settings';
 import { getSupportedPaymentMethods } from '../../libs/util';
 import Currency from '../currency';
 
@@ -16,7 +16,7 @@ type Props = {
 
 export default function CurrencySelect({ mode: initialMode, hasSelected, onSelect }: Props) {
   const { t } = useLocaleContext();
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
   const [mode, setMode] = useState(initialMode);
 
   const handleSelect = (e: any) => {

package/src/components/price/form.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { InferFormType, PriceRecurring, TPaymentMethodExpanded, TPriceExpanded } from '@did-pay/types';
+import { findCurrency, usePaymentContext } from '@blocklet/payment-react';
+import type { InferFormType, PriceRecurring, TPaymentMethodExpanded, TPriceExpanded } from '@blocklet/payment-types';
 import { DeleteOutlineOutlined, InfoOutlined } from '@mui/icons-material';
 import {
   Alert,
@@ -23,8 +24,6 @@ import { styled } from '@mui/system';
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import type { LiteralUnion } from 'type-fest';
 
-import { useSettingsContext } from '../../contexts/settings';
-import { findCurrency } from '../../libs/util';
 import Collapse from '../collapse';
 import CurrencySelect from './currency-select';
 
@@ -83,7 +82,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
 
   const { t } = useLocaleContext();
   const { control, setValue, getFieldState } = useFormContext();
-  const { settings = {} as any, livemode } = useSettingsContext();
+  const { settings = {} as any, livemode } = usePaymentContext();
 
   const currencies = useFieldArray({ control, name: getFieldName('currency_options') });
 

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

@@ -1,12 +1,11 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TPriceExpanded } from '@did-pay/types';
+import { api, formatError, formatPrice } from '@blocklet/payment-react';
+import type { TPriceExpanded } from '@blocklet/payment-types';
 import { AddOutlined } from '@mui/icons-material';
 import { Alert, CircularProgress, MenuItem, Select, Stack, Typography } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 
-import api from '../../libs/api';
-import { formatError, formatPrice } from '../../libs/util';
 import AddPrice from '../product/add-price';
 
 type Props = {

package/src/components/price/upsell.tsx

@@ -1,18 +1,16 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TPriceExpanded } from '@did-pay/types';
+import { api, formatError, formatPrice, usePaymentContext } from '@blocklet/payment-react';
+import type { TPriceExpanded } from '@blocklet/payment-types';
 import { DeleteOutlineOutlined } from '@mui/icons-material';
 import { CircularProgress, Grid, IconButton, Stack, Typography } from '@mui/material';
 import { useSetState } from 'ahooks';
 
-import { useSettingsContext } from '../../contexts/settings';
-import api from '../../libs/api';
-import { formatError, formatPrice } from '../../libs/util';
 import InfoRow from '../info-row';
 import UpsellSelect from './upsell-select';
 
 export function UpsellForm({ data, onChange }: { data: TPriceExpanded; onChange: Function }) {
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
   const [state, setState] = useSetState({
     loading: false,
   });

package/src/components/pricing-table/actions.tsx

@@ -1,13 +1,12 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TPricingTableExpanded } from '@did-pay/types';
+import { api, formatError } from '@blocklet/payment-react';
+import type { TPricingTableExpanded } from '@blocklet/payment-types';
 import { useSetState } from 'ahooks';
 import Copy from 'copy-to-clipboard';
 import type { LiteralUnion } from 'type-fest';
 import { joinURL } from 'ufo';
 
-import api from '../../libs/api';
-import { formatError } from '../../libs/util';
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';

package/src/components/pricing-table/payment-settings.tsx

@@ -1,14 +1,14 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
-import type { TPrice, TProduct } from '@did-pay/types';
+import { formatPrice, usePaymentContext } from '@blocklet/payment-react';
+import type { TPrice, TProduct } from '@blocklet/payment-types';
 import { Box, Checkbox, FormControlLabel, Stack, TextField, Typography } from '@mui/material';
 import get from 'lodash/get';
 import { useState } from 'react';
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 
 import { useProductsContext } from '../../contexts/products';
-import { useSettingsContext } from '../../contexts/settings';
-import { formatPrice, getPriceFromProducts, groupPricingTableItems } from '../../libs/util';
+import { getPriceFromProducts, groupPricingTableItems } from '../../libs/util';
 import IconCollapse from '../collapse';
 
 export function PricePaymentSettings({ index }: { index: number }) {
@@ -173,7 +173,7 @@ export function PricePaymentSettings({ index }: { index: number }) {
 }
 
 export function ProductPaymentSettings({ product, prices }: { product: TProduct; prices: TPrice[] }) {
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
   const { products } = useProductsContext();
   const [current, setCurrent] = useState(prices[0]?.id);
   const tabs = prices.map((x: any) => ({

package/src/components/pricing-table/price-item.tsx

@@ -1,13 +1,10 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TPrice } from '@did-pay/types';
+import { FormInput, formatPrice, usePaymentContext } from '@blocklet/payment-react';
+import type { TPrice } from '@blocklet/payment-types';
 import { DeleteOutlineOutlined } from '@mui/icons-material';
 import { Box, Checkbox, FormControlLabel, IconButton, InputAdornment, Stack, Typography } from '@mui/material';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
-import { useSettingsContext } from '../../contexts/settings';
-import { formatPrice } from '../../libs/util';
-import FormInput from '../input';
-
 type Props = {
   prefix: string;
   price: TPrice;
@@ -17,7 +14,7 @@ type Props = {
 export default function PriceItem({ prefix, price, onRemove }: Props) {
   const { t } = useLocaleContext();
   const getFieldName = (name: string) => (prefix ? `${prefix}.${name}` : name);
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
   const { control, setValue } = useFormContext();
   const includeFreeTrail = useWatch({ control, name: getFieldName('include_free_trial') });
 
@@ -50,7 +47,7 @@ export default function PriceItem({ prefix, price, onRemove }: Props) {
       {includeFreeTrail && (
         <FormInput
           name={getFieldName('subscription_data.trial_period_days')}
-          rules={{ required: t('checkout.required') }}
+          rules={{ required: t('payment.checkout.required') }}
           errorPosition="right"
           sx={{ mt: 0.5 }}
           fullWidth={false}

package/src/components/pricing-table/product-item.tsx

@@ -1,12 +1,12 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { PricingTableItem, TProduct, TProductExpanded } from '@did-pay/types';
+import { api, formatError } from '@blocklet/payment-react';
+import type { PricingTableItem, TProduct, TProductExpanded } from '@blocklet/payment-types';
 import { Box, Stack } from '@mui/material';
 import { useSetState } from 'ahooks';
 
 import { useProductsContext } from '../../contexts/products';
-import api from '../../libs/api';
-import { formatError, getPriceFromProducts } from '../../libs/util';
+import { getPriceFromProducts } from '../../libs/util';
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
 import InfoCard from '../info-card';

package/src/components/pricing-table/rename.tsx

@@ -1,12 +1,11 @@
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TPricingTable } from '@did-pay/types';
+import { FormInput } from '@blocklet/payment-react';
+import type { TPricingTable } from '@blocklet/payment-types';
 import { Button, CircularProgress, Stack } from '@mui/material';
 import type { EventHandler } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
-import TextInput from '../input';
-
 export default function RenamePricingTable({
   data,
   loading,
@@ -54,7 +53,7 @@ export default function RenamePricingTable({
         </Stack>
       }>
       <FormProvider {...methods}>
-        <TextInput
+        <FormInput
           name="name"
           rules={{ required: true }}
           label={t('admin.paymentLink.name.label')}

package/src/components/product/actions.tsx

@@ -1,11 +1,10 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TProduct } from '@did-pay/types';
+import { api, formatError } from '@blocklet/payment-react';
+import type { TProduct } from '@blocklet/payment-types';
 import { useSetState } from 'ahooks';
 import type { LiteralUnion } from 'type-fest';
 
-import api from '../../libs/api';
-import { formatError } from '../../libs/util';
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';

package/src/components/product/add-price.tsx

@@ -1,10 +1,10 @@
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { usePaymentContext } from '@blocklet/payment-react';
 import { Button, CircularProgress, Stack } from '@mui/material';
 import type { EventHandler } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
-import { useSettingsContext } from '../../contexts/settings';
 import PriceForm, { DEFAULT_PRICE, Price } from '../price/form';
 
 export default function AddPrice({
@@ -17,7 +17,7 @@ export default function AddPrice({
   onCancel: EventHandler<any>;
 }) {
   const { t } = useLocaleContext();
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
   const methods = useForm<Price>({
     defaultValues: {
       ...DEFAULT_PRICE,

package/src/components/product/create.tsx

@@ -1,14 +1,12 @@
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
+import { api, formatError, usePaymentContext } from '@blocklet/payment-react';
 import { Button, CircularProgress, Stack } from '@mui/material';
 import { useSetState } from 'ahooks';
 import type { EventHandler } from 'react';
 import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
 
-import { useSettingsContext } from '../../contexts/settings';
-import api from '../../libs/api';
-import { formatError } from '../../libs/util';
 import PriceForm, { DEFAULT_PRICE } from '../price/form';
 import ProductForm, { Product } from './form';
 
@@ -22,7 +20,7 @@ export default function CreateProduct({
   onCancel: EventHandler<any>;
 }) {
   const { t } = useLocaleContext();
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
   const [state, setState] = useSetState({ loading: false });
   const methods = useForm<Product>({
     defaultValues: {

package/src/components/product/cross-sell-select.tsx

@@ -1,9 +1,9 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TProductExpanded } from '@did-pay/types';
+import { usePaymentContext } from '@blocklet/payment-react';
+import type { TProductExpanded } from '@blocklet/payment-types';
 import { MenuItem, Select, Stack, Typography } from '@mui/material';
 
 import { useProductsContext } from '../../contexts/products';
-import { useSettingsContext } from '../../contexts/settings';
 import { formatProductPrice } from '../../libs/util';
 import InfoCard from '../info-card';
 
@@ -15,7 +15,7 @@ type Props = {
 export default function CrossSellSelect({ data, onSelect }: Props) {
   const { t, locale } = useLocaleContext();
   const { products } = useProductsContext();
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
 
   const onSelectPrice = (e: any) => {
     if (e.target.value && e.target.value !== 'empty') {

package/src/components/product/cross-sell.tsx

@@ -1,21 +1,20 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TProductExpanded } from '@did-pay/types';
+import { api, formatError, usePaymentContext } from '@blocklet/payment-react';
+import type { TProductExpanded } from '@blocklet/payment-types';
 import { DeleteOutlineOutlined } from '@mui/icons-material';
 import { CircularProgress, Grid, IconButton, Stack } from '@mui/material';
 import { useSetState } from 'ahooks';
 
 import { ProductsProvider } from '../../contexts/products';
-import { useSettingsContext } from '../../contexts/settings';
-import api from '../../libs/api';
-import { formatError, formatProductPrice } from '../../libs/util';
+import { formatProductPrice } from '../../libs/util';
 import InfoCard from '../info-card';
 import InfoRow from '../info-row';
 import CrossSellSelect from './cross-sell-select';
 
 export function CrossSellForm({ data, onChange }: { data: TProductExpanded; onChange: Function }) {
   const { locale } = useLocaleContext();
-  const { settings } = useSettingsContext();
+  const { settings } = usePaymentContext();
   const [state, setState] = useSetState({
     loading: false,
   });

package/src/components/product/edit.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/indent */
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TProduct } from '@did-pay/types';
+import type { TProduct } from '@blocklet/payment-types';
 import { Button, CircularProgress, Stack } from '@mui/material';
 import { isEmpty } from 'lodash';
 import type { EventHandler } from 'react';

package/src/components/product/form.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { InferFormType, TProduct } from '@did-pay/types';
+import { FormInput } from '@blocklet/payment-react';
+import type { InferFormType, TProduct } from '@blocklet/payment-types';
 import { Box, Stack, Typography } from '@mui/material';
 import { useFormContext, useWatch } from 'react-hook-form';
 
 import Collapse from '../collapse';
-import TextInput from '../input';
 import MetadataForm from '../metadata/form';
 import type { Price } from '../price/form';
 import Uploader from '../uploader';
@@ -32,7 +32,7 @@ export default function ProductForm(props: Props) {
   return (
     <Stack spacing={2} mb={3} direction="row" alignItems="flex-start">
       <Stack spacing={2} flex={2} alignItems="flex-start">
-        <TextInput
+        <FormInput
           name="name"
           rules={{ required: t('admin.product.name.required') }}
           label={t('admin.product.name.label')}
@@ -41,7 +41,7 @@ export default function ProductForm(props: Props) {
           helperText={formState.errors.name?.message as string}
           autoFocus
         />
-        <TextInput
+        <FormInput
           name="description"
           rules={{ required: t('admin.product.description.required') }}
           label={t('admin.product.description.label')}
@@ -54,8 +54,8 @@ export default function ProductForm(props: Props) {
         />
         <Collapse trigger={t('admin.product.additional')}>
           <Stack spacing={2} alignItems="flex-start">
-            <TextInput name="statement_descriptor" label={t('admin.product.statement_descriptor.label')} />
-            <TextInput name="unit_label" label={t('admin.product.unit_label.label')} />
+            <FormInput name="statement_descriptor" label={t('admin.product.statement_descriptor.label')} />
+            <FormInput name="unit_label" label={t('admin.product.unit_label.label')} />
             {!props.simple && <ProductFeatures />}
             {!props.simple && <MetadataForm title={t('common.metadata.label')} />}
           </Stack>

package/src/components/relative-time.tsx

@@ -1,9 +1,8 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { formatPrettyMsLocale, formatToDatetime } from '@blocklet/payment-react';
 import { Tooltip, Typography } from '@mui/material';
 import prettyMs from 'pretty-ms-i18n';
 
-import { formatPrettyMsLocale, formatToDatetime } from '../libs/util';
-
 export default function RelativeTime({ value, ...rest }: { value: string | number }) {
   const { t, locale } = useLocaleContext();
   if (!value) {

package/src/components/subscription/actions/cancel.tsx

@@ -1,10 +1,9 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { TSubscriptionExpanded } from '@did-pay/types';
+import { formatTime } from '@blocklet/payment-react';
+import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Box, FormControlLabel, Radio, RadioGroup, Stack, TextField, Typography } from '@mui/material';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
-import { formatTime } from '../../../libs/util';
-
 export default function SubscriptionCancelForm({ data }: { data: TSubscriptionExpanded }) {
   const { t } = useLocaleContext();
   const { control, setValue, formState } = useFormContext();

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

@@ -1,13 +1,12 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import type { TSubscriptionExpanded } from '@did-pay/types';
+import { api, formatError } from '@blocklet/payment-react';
+import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { useSetState } from 'ahooks';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import type { LiteralUnion } from 'type-fest';
 
-import api from '../../../libs/api';
-import { formatError } from '../../../libs/util';
 import Actions from '../../actions';
 import ClickBoundary from '../../click-boundary';
 import ConfirmDialog from '../../confirm';