payment-kit 1.15.32 → 1.15.34

package/src/components/invoice/list.tsx

@@ -8,6 +8,7 @@ import {
   getInvoiceStatusColor,
   Table,
   useDefaultPageSize,
+  getInvoiceDescriptionAndReason,
 } from '@blocklet/payment-react';
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { CircularProgress, Typography } from '@mui/material';
@@ -29,6 +30,7 @@ const fetchData = (params: Record<string, any> = {}): Promise<{ list: TInvoiceEx
     }
     search.set(key, String(v));
   });
+
   return api.get(`/api/invoices?${search.toString()}`).then((res) => res.data);
 };
 
@@ -54,6 +56,7 @@ type ListProps = {
   status?: string;
   ignore_zero?: boolean;
   include_staking?: boolean;
+  include_return_staking?: boolean;
 
   mode?: 'admin' | 'customer';
 };
@@ -78,6 +81,7 @@ InvoiceList.defaultProps = {
   subscription_id: '',
   status: '',
   include_staking: false,
+  include_return_staking: false,
   ignore_zero: false,
 
   mode: 'admin',
@@ -89,32 +93,38 @@ export default function InvoiceList({
   features,
   status,
   include_staking,
+  include_return_staking,
   ignore_zero,
   mode,
 }: ListProps) {
   const listKey = getListKey({ customer_id, subscription_id });
 
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const defaultPageSize = useDefaultPageSize(20);
-  const [search, setSearch] = useLocalStorageState<SearchProps & { ignore_zero?: boolean; include_staking?: boolean }>(
-    listKey,
-    {
-      defaultValue: {
-        status: status as string,
-        customer_id,
-        subscription_id,
-        pageSize: defaultPageSize,
-        page: 1,
-        ignore_zero: !!ignore_zero,
-        include_staking: !!include_staking,
-      },
-    }
-  );
+  const [search, setSearch] = useLocalStorageState<
+    SearchProps & { ignore_zero?: boolean; include_staking?: boolean; include_return_staking?: boolean }
+  >(listKey, {
+    defaultValue: {
+      status: status as string,
+      customer_id,
+      subscription_id,
+      pageSize: defaultPageSize,
+      page: 1,
+      ignore_zero: !!ignore_zero,
+      include_staking: !!include_staking,
+      include_return_staking: !!include_return_staking,
+    },
+  });
 
   const [data, setData] = useState({}) as any;
 
   const refresh = () =>
-    fetchData(search).then((res: any) => {
+    fetchData({
+      ...search,
+      include_staking: !!include_staking,
+      ignore_zero: !!ignore_zero,
+      include_return_staking: !!include_return_staking,
+    }).then((res: any) => {
       setData(res);
     });
 
@@ -160,6 +170,20 @@ export default function InvoiceList({
         },
       },
     },
+    {
+      label: t('common.type'),
+      name: 'billing_reason',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TInvoiceExpanded;
+          return (
+            <Link to={`/admin/billing/${item.id}`}>
+              <Status label={getInvoiceDescriptionAndReason(item, locale)?.type} />
+            </Link>
+          );
+        },
+      },
+    },
     {
       label: t('admin.invoice.number'),
       name: 'number',
@@ -176,14 +200,11 @@ export default function InvoiceList({
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
-          let desc = item?.description || item?.id;
-          if (desc.startsWith('Slash stake')) {
-            desc = t('payment.invoice.reason.slashStake');
-          }
-          if (desc.startsWith('Subscription ')) {
-            desc = t(`payment.invoice.reason.${desc.replace('Subscription ', '')}`);
-          }
-          return <Link to={`/admin/billing/${item.id}`}>{desc}</Link>;
+          return (
+            <Link to={`/admin/billing/${item.id}`}>
+              {getInvoiceDescriptionAndReason(item, locale)?.description || item?.id}
+            </Link>
+          );
         },
       },
     },
@@ -270,6 +291,7 @@ export default function InvoiceList({
         onSearchChange: (text: string) => {
           if (text) {
             setSearch({
+              ...search!,
               q: {
                 'like-description': text,
                 'like-metadata': text,
@@ -280,6 +302,7 @@ export default function InvoiceList({
             });
           } else {
             setSearch({
+              ...search!,
               status: '',
               customer_id,
               subscription_id,

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

@@ -22,7 +22,7 @@ export function PricePaymentSettings({ index }: { index: number }) {
     formState: { errors },
   } = useFormContext();
   const type = useWatch({ control, name: getFieldName('after_completion.type') });
-  const nftMintEnabled = useWatch({ control, name: 'nft_mint_settings.enabled' });
+  const nftMintEnabled = useWatch({ control, name: getFieldName('nft_mint_settings.enabled') });
 
   const values = getValues();
 

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

@@ -1,12 +1,15 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { api, dayjs, formatAmount, formatTime } from '@blocklet/payment-react';
-import type { TSubscriptionExpanded } from '@blocklet/payment-types';
+import type { TPaymentCurrency, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Box, Divider, FormControlLabel, Radio, RadioGroup, Stack, TextField, Typography, styled } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useEffect, useMemo } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
-const fetchData = (id: string, time: string): Promise<{ total: string; unused: string }> => {
+const fetchData = (
+  id: string,
+  time: string
+): Promise<{ total: string; unused: string; paymentCurrency: TPaymentCurrency }> => {
   return api.get(`/api/subscriptions/${id}/proration?time=${encodeURIComponent(time)}`).then((res: any) => res.data);
 };
 
@@ -128,8 +131,8 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
               onClick={() => !(loading || refundDisabled) && setValue('cancel.refund', 'last')}
               control={<Radio checked={refundType === 'last'} />}
               label={t('admin.subscription.cancel.refund.last', {
-                symbol,
-                total: formatAmount(refund?.total || '0', decimal),
+                symbol: refund?.paymentCurrency?.symbol || symbol,
+                total: formatAmount(refund?.total || '0', refund?.paymentCurrency?.decimal || decimal),
               })}
             />
             <FormControlLabel
@@ -138,9 +141,9 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
               onClick={() => !(loading || refundDisabled) && setValue('cancel.refund', 'proration')}
               control={<Radio checked={refundType === 'proration'} />}
               label={t('admin.subscription.cancel.refund.proration', {
-                symbol,
-                total: formatAmount(refund?.total || '0', decimal),
-                unused: formatAmount(refund?.unused || '0', decimal),
+                symbol: refund?.paymentCurrency?.symbol || symbol,
+                total: formatAmount(refund?.total || '0', refund?.paymentCurrency?.decimal || decimal),
+                unused: formatAmount(refund?.unused || '0', refund?.paymentCurrency?.decimal || decimal),
               })}
             />
           </RadioGroup>

package/src/components/subscription/metrics.tsx

@@ -40,7 +40,7 @@ export default function SubscriptionMetrics({ subscription }: Props) {
           divider
         />
       )}
-      {upcoming?.amount && upcoming.amount !== '0' && (
+      {['active', 'trialing'].includes(subscription.status) && upcoming?.amount && upcoming.amount !== '0' && (
         <InfoMetric
           label={t('admin.subscription.nextInvoiceAmount')}
           value={`${formatBNStr(upcoming.amount, subscription.paymentCurrency.decimal)} ${

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

@@ -322,6 +322,21 @@ export default function InvoiceDetail(props: { id: string }) {
                   alignItems={InfoAlignItems}
                 />
               )}
+              {data.billing_reason === 'stake' && data?.metadata?.payment_details?.arcblock?.tx_hash && (
+                <InfoRow
+                  label={t('common.stakeTxHash')}
+                  value={
+                    <TxLink
+                      details={{
+                        arcblock: { tx_hash: data.metadata?.payment_details?.arcblock?.tx_hash, payer: '' },
+                      }}
+                      method={data.paymentMethod}
+                    />
+                  }
+                  direction={InfoDirection}
+                  alignItems={InfoAlignItems}
+                />
+              )}
               {data.subscription && (
                 <InfoRow
                   label={t('admin.subscription.name')}

package/src/pages/admin/billing/invoices/index.tsx

@@ -1,5 +1,5 @@
 import InvoiceList from '../../../../components/invoice/list';
 
 export default function InvoicesList() {
-  return <InvoiceList features={{ customer: true, toolbar: true, filter: true }} />;
+  return <InvoiceList features={{ customer: true, toolbar: true, filter: true }} include_staking />;
 }

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

@@ -1,7 +1,15 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { TxLink, api, formatError, formatSubscriptionProduct, formatTime, useMobile } from '@blocklet/payment-react';
+import {
+  TxLink,
+  api,
+  formatError,
+  formatSubscriptionProduct,
+  formatTime,
+  useMobile,
+  hasDelegateTxHash,
+} from '@blocklet/payment-react';
 import type { TProduct, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
@@ -268,7 +276,7 @@ export default function SubscriptionDetail(props: { id: string }) {
                 direction={InfoDirection}
                 alignItems={InfoAlignItems}
               />
-              {(data.payment_details?.arcblock?.tx_hash || data.payment_details?.ethereum?.tx_hash) && (
+              {data.payment_details && hasDelegateTxHash(data.payment_details, data.paymentMethod) && (
                 <InfoRow
                   label={t('common.delegateTxHash')}
                   value={<TxLink details={data.payment_details} method={data.paymentMethod} />}
@@ -276,7 +284,7 @@ export default function SubscriptionDetail(props: { id: string }) {
                   alignItems={InfoAlignItems}
                 />
               )}
-              {data.payment_details?.arcblock?.staking?.tx_hash && (
+              {data.paymentMethod?.type === 'arcblock' && data.payment_details?.arcblock?.staking?.tx_hash && (
                 <InfoRow
                   label={t('common.stakeTxHash')}
                   value={
@@ -322,7 +330,7 @@ export default function SubscriptionDetail(props: { id: string }) {
           <Box className="section">
             <SectionHeader title={t('admin.invoices')} />
             <Box className="section-body">
-              <InvoiceList features={{ customer: true, toolbar: false }} subscription_id={data.id} />
+              <InvoiceList features={{ customer: true, toolbar: false }} subscription_id={data.id} include_staking />
             </Box>
           </Box>
           <Divider />

package/src/pages/admin/customers/customers/detail.tsx

@@ -367,6 +367,7 @@ export default function CustomerDetail(props: { id: string }) {
                 features={{ customer: false, toolbar: false }}
                 customer_id={data.customer.id}
                 status={['open', 'paid', 'uncollectible', 'draft', 'void'].join(',')}
+                include_staking
               />
             </Box>
           </Box>

package/src/pages/customer/index.tsx

@@ -318,7 +318,7 @@ export default function CustomerHome() {
         )}
       </Box>
       <Box className="section-body">
-        <CustomerInvoiceList customer_id={data.id} type="table" />
+        <CustomerInvoiceList customer_id={data.id} type="table" include_staking />
       </Box>
     </Box>
   );

package/src/pages/customer/invoice/detail.tsx

@@ -6,6 +6,7 @@ import {
   TxGas,
   TxLink,
   api,
+  formatAmount,
   formatError,
   formatTime,
   getInvoiceStatusColor,
@@ -101,9 +102,10 @@ export default function CustomerInvoiceDetail() {
     return <CircularProgress />;
   }
 
-  const isSlash =
-    data.paymentMethod?.type === 'arcblock' && data.paymentIntent?.payment_details?.arcblock?.type === 'slash';
+  const isStake = data.paymentMethod?.type === 'arcblock' && data.billing_reason === 'stake';
+  const isSlashStake = data.paymentMethod?.type === 'arcblock' && data.billing_reason.includes('slash_stake');
 
+  const paymentDetails = data.paymentIntent?.payment_details || data.metadata?.payment_details;
   return (
     <InvoiceDetailRoot direction="column" spacing={3} sx={{ my: 2 }}>
       <Stack direction="row" justifyContent="space-between">
@@ -263,12 +265,20 @@ export default function CustomerInvoiceDetail() {
               alignItems={InfoAlignItems}
             />
           )}
-          {data.paymentIntent && data.paymentIntent.payment_details && (
+          {paymentDetails && (
             <InfoRow
-              label={t(`common.${data.paymentIntent.payment_details?.arcblock?.type || 'transfer'}TxHash`)}
-              value={
-                <TxLink details={data.paymentIntent.payment_details} method={data.paymentMethod} mode="customer" />
+              label={
+                isStake ? t('common.stakeTxHash') : t(`common.${paymentDetails?.arcblock?.type || 'transfer'}TxHash`)
               }
+              value={<TxLink details={paymentDetails} method={data.paymentMethod} mode="customer" />}
+              direction={InfoDirection}
+              alignItems={InfoAlignItems}
+            />
+          )}
+          {(isStake || isSlashStake) && (
+            <InfoRow
+              label={isSlashStake ? t('common.slashStakeAmount') : t('common.stakeAmount')}
+              value={`${formatAmount(data.total, data.paymentCurrency.decimal)} ${data.paymentCurrency.symbol}`}
               direction={InfoDirection}
               alignItems={InfoAlignItems}
             />
@@ -289,15 +299,19 @@ export default function CustomerInvoiceDetail() {
           )}
         </Stack>
       </Box>
-      {!isSlash && (
+      {!isSlashStake && (
         <>
-          <Divider />
-          <Box className="section">
-            <Typography variant="h3" mb={1.5} className="section-header">
-              {t('payment.customer.products')}
-            </Typography>
-            <InvoiceTable invoice={data} simple />
-          </Box>
+          {!isStake && (
+            <>
+              <Divider />
+              <Box className="section">
+                <Typography variant="h3" mb={1.5} className="section-header">
+                  {t('payment.customer.products')}
+                </Typography>
+                <InvoiceTable invoice={data} simple />
+              </Box>
+            </>
+          )}
           <Divider />
           <Box className="section">
             <Typography variant="h3" className="section-header">

package/src/pages/customer/subscription/change-plan.tsx

@@ -243,7 +243,14 @@ export default function CustomerSubscriptionChangePlan() {
       </Stack>
       <Stack direction="column" sx={{ marginTop: 32 }}>
         <SectionHeader title={t('payment.customer.changePlan.config')} />
-        <PricingTable mode="select" alignItems="left" interval={interval} table={table} onSelect={handleSelect} />
+        <PricingTable
+          mode="select"
+          alignItems="left"
+          interval={interval}
+          table={table}
+          onSelect={handleSelect}
+          hideCurrency
+        />
       </Stack>
       {!data.table && <Alert severity="error">{t('payment.customer.changePlan.tableNotFound')}</Alert>}
       {state.priceId && state.total && state.setup && (

package/src/pages/customer/subscription/detail.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { CustomerInvoiceList, TxLink, api, formatTime } from '@blocklet/payment-react';
+import { CustomerInvoiceList, TxLink, api, formatTime, hasDelegateTxHash } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
@@ -243,7 +243,7 @@ export default function CustomerSubscriptionDetail() {
             direction={InfoDirection}
             alignItems={InfoAlignItems}
           />
-          {(data.payment_details?.arcblock?.tx_hash || data.payment_details?.ethereum?.tx_hash) && (
+          {data.payment_details && hasDelegateTxHash(data.payment_details, data.paymentMethod) && (
             <InfoRow
               label={t('common.delegateTxHash')}
               value={<TxLink details={data.payment_details} method={data.paymentMethod} />}
@@ -251,7 +251,7 @@ export default function CustomerSubscriptionDetail() {
               alignItems={InfoAlignItems}
             />
           )}
-          {data.payment_details?.arcblock?.staking?.tx_hash && (
+          {data.paymentMethod?.type === 'arcblock' && data.payment_details?.arcblock?.staking?.tx_hash && (
             <InfoRow
               label={t('common.stakeTxHash')}
               value={
@@ -300,7 +300,7 @@ export default function CustomerSubscriptionDetail() {
           {t('customer.invoiceHistory')}
         </Typography>
         <Box className="section-body">
-          <CustomerInvoiceList subscription_id={data.id} include_staking type="table" />
+          <CustomerInvoiceList subscription_id={data.id} type="table" include_staking />
         </Box>
       </Box>
     </Root>

package/src/pages/customer/subscription/embed.tsx

@@ -11,6 +11,7 @@ import {
   formatToDate,
   formatToDatetime,
   getDidConnectQueryParams,
+  getInvoiceDescriptionAndReason,
   getInvoiceStatusColor,
   getPrefix,
   getSubscriptionStatusColor,
@@ -210,8 +211,9 @@ export default function SubscriptionEmbed() {
                 {(invoices as any).map((item: any) => {
                   return (
                     <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                      <Typography component="span" sx={{ flex: 3 }}>
+                      <Typography component="div" sx={{ flex: 3, gap: 1, display: 'flex', alignItems: 'center' }}>
                         {formatToDate(item.created_at, locale, 'YYYY-MM-DD')}
+                        <Status label={getInvoiceDescriptionAndReason(item, locale)?.type} />
                       </Typography>
                       <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
                         {formatBNStr(item.total, item.paymentCurrency.decimal)}&nbsp;