payment-kit 1.18.56 → 1.19.1

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

@@ -17,6 +17,7 @@ import {
   getPriceCurrencyOptions,
   getStatementDescriptor,
   isValidCountry,
+  showStaking,
   usePaymentContext,
 } from '@blocklet/payment-react';
 import type { TCustomer, TPaymentCurrency, TPaymentMethod, TSubscriptionExpanded } from '@blocklet/payment-types';
@@ -222,14 +223,24 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
     setState({ stripePaying: false });
   };
 
+  const currency = findCurrency(settings.paymentMethods, selectedCurrencyId) as TPaymentCurrency;
   return (
     <Stack direction="column" spacing={4} sx={{ maxWidth: '540px' }}>
-      <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+      <Stack
+        className="page-header"
+        direction="row"
+        sx={{
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}>
         <Stack
           direction="row"
-          alignItems="center"
-          sx={{ fontWeight: 'normal', cursor: 'pointer' }}
-          onClick={() => goBackOrFallback(`/customer/subscription/${subscription.id}`)}>
+          onClick={() => goBackOrFallback(`/customer/subscription/${subscription.id}`)}
+          sx={{
+            alignItems: 'center',
+            fontWeight: 'normal',
+            cursor: 'pointer',
+          }}>
           <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
           <SubscriptionDescription subscription={subscription} variant="h5" />
         </Stack>
@@ -239,10 +250,10 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
         <SectionHeader title={t('payment.customer.changePayment.review')} />
         <PaymentSummary
           items={subscription.items as any[]}
-          currency={findCurrency(settings.paymentMethods, selectedCurrencyId) as TPaymentCurrency}
+          currency={currency}
           trialInDays={0}
           billingThreshold={0}
-          showStaking={method.type === 'arcblock' && !subscription.billing_thresholds?.no_stake}
+          showStaking={showStaking(method, currency, !!subscription.billing_thresholds?.no_stake)}
         />
       </Stack>
       <Stack direction="column" spacing={2}>

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

@@ -219,7 +219,12 @@ export default function CustomerSubscriptionChangePlan() {
 
   const getInfoRow = (label: string, value: string, prefix?: string) => {
     return (
-      <Stack direction="row" justifyContent="space-between" key={value}>
+      <Stack
+        direction="row"
+        key={value}
+        sx={{
+          justifyContent: 'space-between',
+        }}>
         <Typography variant="h6" sx={{ fontWeight: 'normal' }}>
           {label}
         </Typography>
@@ -233,12 +238,21 @@ export default function CustomerSubscriptionChangePlan() {
 
   return (
     <Stack direction="column" spacing={4} sx={{ mb: 4 }}>
-      <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+      <Stack
+        className="page-header"
+        direction="row"
+        sx={{
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}>
         <Stack
           direction="row"
-          alignItems="center"
-          sx={{ fontWeight: 'normal', cursor: 'pointer' }}
-          onClick={() => goBackOrFallback(`/customer/subscription/${data.subscription.id}`)}>
+          onClick={() => goBackOrFallback(`/customer/subscription/${data.subscription.id}`)}
+          sx={{
+            alignItems: 'center',
+            fontWeight: 'normal',
+            cursor: 'pointer',
+          }}>
           <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
           <SubscriptionDescription subscription={data.subscription} variant="h5" />
         </Stack>
@@ -268,7 +282,13 @@ export default function CustomerSubscriptionChangePlan() {
             {state.items.map((x: TLineItemExpanded) => {
               const { product } = x.price;
               return (
-                <Stack key={x.price_id} direction="row" alignItems="center" justifyContent="space-between">
+                <Stack
+                  key={x.price_id}
+                  direction="row"
+                  sx={{
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }}>
                   <InfoCard logo={product.images[0]} name={product.name} description={product.description} />
                   <Typography component="p" style={{ fontWeight: 'bold' }}>
                     {formatPrice(
@@ -294,7 +314,14 @@ export default function CustomerSubscriptionChangePlan() {
             <Divider />
             {getInfoRow(t('payment.customer.changePlan.remaining'), state.due)}
             <Divider />
-            <Stack direction="row" alignItems="center" justifyContent="flex-end" spacing={2} sx={{ pt: 2 }}>
+            <Stack
+              direction="row"
+              spacing={2}
+              sx={{
+                alignItems: 'center',
+                justifyContent: 'flex-end',
+                pt: 2,
+              }}>
               <LoadingButton
                 disabled={state.loading || state.paying}
                 onClick={() => setState({ priceId: '' })}

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

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import {
+  CreditTransactionsList,
   CustomerInvoiceList,
   TxLink,
   api,
@@ -45,7 +46,7 @@ import SubscriptionActions, { ActionMethods } from '../../../components/subscrip
 import { canChangePaymentMethod } from '../../../libs/util';
 import { useSessionContext } from '../../../contexts/session';
 import InfoMetric from '../../../components/info-metric';
-import { useUnpaidInvoicesCheckForSubscription } from '../../../hooks/subscription';
+import { useUnpaidInvoicesCheckForSubscription, usePendingAmountForSubscription } from '../../../hooks/subscription';
 import { formatSmartDuration, TimeUnit } from '../../../libs/dayjs';
 import InfoRowGroup from '../../../components/info-row-group';
 
@@ -74,6 +75,7 @@ export default function CustomerSubscriptionDetail() {
   const { session } = useSessionContext();
   const { loading, error, data, refresh } = useRequest(() => fetchData(id));
   const { hasUnpaid, checkUnpaidInvoices } = useUnpaidInvoicesCheckForSubscription(id);
+  const { hasPendingAmount, pendingAmount } = usePendingAmountForSubscription(id, data?.paymentCurrency);
   const overdraftProtectionReady =
     ['active', 'trialing', 'past_due'].includes(data?.status || '') && data?.paymentMethod?.type === 'arcblock';
   const {
@@ -100,7 +102,7 @@ export default function CustomerSubscriptionDetail() {
     }
   );
 
-  const actionRef = useRef<ActionMethods>();
+  const actionRef = useRef<ActionMethods | undefined>(undefined);
 
   const enableOverdraftProtection = !!overdraftProtection?.enabled;
 
@@ -119,11 +121,13 @@ export default function CustomerSubscriptionDetail() {
     return <CircularProgress />;
   }
 
+  const isCredit = data?.paymentCurrency?.type === 'credit';
   const showOverdraftProtection =
     data?.paymentMethod?.type === 'arcblock' &&
     !overdraftProtectionLoading &&
     !!overdraftProtection &&
-    ['active', 'trialing', 'past_due'].includes(data.status);
+    ['active', 'trialing', 'past_due'].includes(data.status) &&
+    !isCredit;
 
   const renderOverdraftProtectionLabel = () => {
     const enabled = data?.overdraft_protection?.enabled;
@@ -155,7 +159,12 @@ export default function CustomerSubscriptionDetail() {
     };
     if (!enabled) {
       return (
-        <Stack direction="row" spacing={1} alignItems="center">
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: 'center',
+          }}>
           <Typography sx={{ color: 'text.lighter' }}>{t('customer.overdraftProtection.disabled')}</Typography>
           <Button
             size="small"
@@ -195,9 +204,23 @@ export default function CustomerSubscriptionDetail() {
     }
 
     return (
-      <Stack direction="row" alignItems="center">
-        <Stack direction="row" spacing={1} alignItems="center">
-          <Stack direction="row" spacing={0.5} alignItems="center">
+      <Stack
+        direction="row"
+        sx={{
+          alignItems: 'center',
+        }}>
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: 'center',
+          }}>
+          <Stack
+            direction="row"
+            spacing={0.5}
+            sx={{
+              alignItems: 'center',
+            }}>
             <CheckCircle
               sx={{
                 fontSize: '16px',
@@ -234,7 +257,11 @@ export default function CustomerSubscriptionDetail() {
               sx={{ width: 16, height: 16 }}
               alt={data.paymentCurrency?.symbol}
             />
-            <Box display="flex" alignItems="baseline">
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'baseline',
+              }}>
               {formatBNStr(overdraftProtection?.unused, data.paymentCurrency.decimal)}
               <Typography
                 sx={{
@@ -280,23 +307,40 @@ export default function CustomerSubscriptionDetail() {
             {t('customer.unpaidInvoicesWarningTip')}
           </Alert>
         )}
+        {hasPendingAmount && pendingAmount && (
+          <Alert severity="error" sx={{ mb: 2 }}>
+            {t('customer.pendingAmountWarningTip', {
+              amount: formatBNStr(pendingAmount, data?.paymentCurrency?.decimal),
+              symbol: data?.paymentCurrency?.symbol,
+            })}
+          </Alert>
+        )}
         <Stack
           className="page-header"
           direction="row"
-          justifyContent="space-between"
-          alignItems="center"
-          sx={{ position: 'relative' }}>
+          sx={{
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            position: 'relative',
+          }}>
           <Stack
             direction="row"
             onClick={() => navigate('/customer', { replace: true })}
-            alignItems="center"
-            sx={{ fontWeight: 'normal', cursor: 'pointer' }}>
+            sx={{
+              alignItems: 'center',
+              fontWeight: 'normal',
+              cursor: 'pointer',
+            }}>
             <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
             <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
               {t('payment.customer.subscriptions.title')}
             </Typography>
           </Stack>
-          <Stack direction="row" gap={1}>
+          <Stack
+            direction="row"
+            sx={{
+              gap: 1,
+            }}>
             <SubscriptionActions
               subscription={data}
               onChange={(action) => {
@@ -332,45 +376,64 @@ export default function CustomerSubscriptionDetail() {
           </Stack>
         </Stack>
         <Box
-          mt={4}
           sx={{
+            mt: 4,
             display: 'flex',
+
             gap: {
               xs: 2,
               sm: 2,
               md: 5,
             },
+
             flexWrap: 'wrap',
+
             flexDirection: {
               xs: 'column',
               sm: 'column',
               md: 'row',
             },
+
             alignItems: {
               xs: 'flex-start',
               sm: 'flex-start',
               md: 'center',
             },
           }}>
-          <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Stack direction="row" alignItems="center" flexWrap="wrap" gap={1}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+                flexWrap: 'wrap',
+                gap: 1,
+              }}>
               <SubscriptionDescription subscription={data} variant="h1" />
             </Stack>
           </Stack>
           <Stack
             className="section-body"
-            justifyContent="flex-start"
-            flexWrap="wrap"
             sx={{
+              justifyContent: 'flex-start',
+              flexWrap: 'wrap',
+
               'hr.MuiDivider-root:last-child': {
                 display: 'none',
               },
+
               flexDirection: {
                 xs: 'column',
                 sm: 'column',
                 md: 'row',
               },
+
               alignItems: 'flex-start',
+
               gap: {
                 xs: 1,
                 sm: 1,
@@ -381,7 +444,12 @@ export default function CustomerSubscriptionDetail() {
             {showOverdraftProtection && (
               <InfoMetric
                 label={
-                  <Stack direction="row" alignItems="center" spacing={0.5}>
+                  <Stack
+                    direction="row"
+                    spacing={0.5}
+                    sx={{
+                      alignItems: 'center',
+                    }}>
                     <Typography component="span">{t('customer.overdraftProtection.title')}</Typography>
                     <MuiLink
                       href="https://www.arcblock.io/content/blog/en/payment-kit-v117-sub-guard#listen-to-the-audio-overview"
@@ -435,12 +503,28 @@ export default function CustomerSubscriptionDetail() {
                 value={renderOverdraftProtectionLabel()}
               />
             )}
+            {isCredit && hasPendingAmount && (
+              <InfoMetric
+                label={t('admin.customer.creditGrants.pendingAmount')}
+                value={
+                  <Typography
+                    sx={{
+                      color: 'error.main',
+                    }}>{`${formatBNStr(pendingAmount, data?.paymentCurrency?.decimal)} ${data?.paymentCurrency?.symbol}`}</Typography>
+                }
+              />
+            )}
           </Stack>
         </Box>
       </Box>
       <Divider />
       <Box className="section" sx={{ containerType: 'inline-size' }}>
-        <Typography variant="h3" mb={3} className="section-header">
+        <Typography
+          variant="h3"
+          className="section-header"
+          sx={{
+            mb: 3,
+          }}>
           {t('admin.details')}
         </Typography>
         <InfoRowGroup
@@ -568,7 +652,12 @@ export default function CustomerSubscriptionDetail() {
       </Box>
       <Divider />
       <Box className="section">
-        <Typography variant="h3" mb={1.5} className="section-header">
+        <Typography
+          variant="h3"
+          className="section-header"
+          sx={{
+            mb: 1.5,
+          }}>
           {t('admin.products')}
         </Typography>
         <Box className="section-body">
@@ -576,19 +665,30 @@ export default function CustomerSubscriptionDetail() {
         </Box>
       </Box>
       <Divider />
-      <Box className="section">
-        <Typography variant="h3" className="section-header">
-          {t('customer.invoiceHistory')}
-        </Typography>
-        <Box className="section-body">
-          <CustomerInvoiceList
-            subscription_id={data.id}
-            type="table"
-            include_staking
-            status="open,paid,uncollectible,void"
-          />
+      {isCredit ? (
+        <Box className="section">
+          <Typography variant="h3" className="section-header">
+            {t('admin.creditTransactions.title')}
+          </Typography>
+          <Box className="section-body">
+            <CreditTransactionsList customer_id={data.customer_id} subscription_id={data.id} showAdminColumns={false} />
+          </Box>
         </Box>
-      </Box>
+      ) : (
+        <Box className="section">
+          <Typography variant="h3" className="section-header">
+            {t('customer.invoiceHistory')}
+          </Typography>
+          <Box className="section-body">
+            <CustomerInvoiceList
+              subscription_id={data.id}
+              type="table"
+              include_staking
+              status="open,paid,uncollectible,void"
+            />
+          </Box>
+        </Box>
+      )}
     </Root>
   );
 }

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

@@ -60,7 +60,7 @@ const fetchSubscriptionData = (id: string, authToken: string): Promise<TSubscrip
     throw new Error('Subscription ID is missing');
   }
 
-  return api.get(`/api/subscriptions/${id}?authToken=${authToken}`).then((res) => res.data);
+  return api.get(`/api/subscriptions/${id}?authToken=${authToken}`).then((res: any) => res.data);
 };
 
 const checkHasPastDue = async (subscriptionId: string, authToken: string): Promise<boolean> => {
@@ -153,7 +153,11 @@ export default function SubscriptionEmbed() {
     {
       name: t('payment.customer.subscriptions.plan'),
       value: (
-        <Typography fontWeight={600} sx={{ marginRight: '10px' }}>
+        <Typography
+          sx={{
+            fontWeight: 600,
+            marginRight: '10px',
+          }}>
           {formatSubscriptionProduct(subscription.items)}
         </Typography>
       ),
@@ -278,12 +282,22 @@ export default function SubscriptionEmbed() {
           <Box sx={{ flex: 1, overflow: 'hidden' }}>
             <List sx={{ height: '100%', display: 'flex', flexDirection: 'column' }} className="mini-invoice-list">
               <ListSubheader disableGutters sx={{ padding: 0 }}>
-                <Typography component="h2" variant="h6" fontSize="16px">
+                <Typography
+                  component="h2"
+                  variant="h6"
+                  sx={{
+                    fontSize: '16px',
+                  }}>
                   {t('payment.customer.invoices')}
                 </Typography>
               </ListSubheader>
               {(invoices as any).length === 0 ? (
-                <Typography color="text.lighter">{t('payment.customer.invoice.empty')}</Typography>
+                <Typography
+                  sx={{
+                    color: 'text.lighter',
+                  }}>
+                  {t('payment.customer.invoice.empty')}
+                </Typography>
               ) : (
                 <Box sx={{ flex: 1, overflow: 'auto' }}>
                   {(invoices as any).map((item: any) => {
@@ -309,7 +323,13 @@ export default function SubscriptionEmbed() {
               )}
             </List>
           </Box>
-          <Stack direction="row" justifyContent="center" spacing={2} sx={{ mt: 2 }}>
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{
+              justifyContent: 'center',
+              mt: 2,
+            }}>
             {subscription.service_actions
               ?.filter((x: any) => x?.type !== 'notification')
               ?.map((x) => (

package/src/pages/home.tsx

@@ -15,17 +15,39 @@ function Home() {
         hideNavMenu={undefined}
         maxWidth={false}
       />
-      <Stack alignItems="center" justifyContent="center" sx={{ height: '60vh', width: '100vw' }}>
-        <Stack maxWidth="sm" direction="column" alignItems="center" spacing={3}>
+      <Stack
+        sx={{
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '60vh',
+          width: '100vw',
+        }}>
+        <Stack
+          direction="column"
+          spacing={3}
+          sx={{
+            maxWidth: 'sm',
+            alignItems: 'center',
+          }}>
           <Avatar
             src={window.blocklet.appLogo}
             sx={{ width: 80, height: 80 }}
             variant="square"
             alt={window.blocklet.appName || 'Payment Kit'}
           />
-          <Stack direction="column" alignItems="center" spacing={1}>
+          <Stack
+            direction="column"
+            spacing={1}
+            sx={{
+              alignItems: 'center',
+            }}>
             <Typography variant="h4">Payment Kit</Typography>
-            <Typography variant="h5" color="text.secondary" fontWeight="normal">
+            <Typography
+              variant="h5"
+              sx={{
+                color: 'text.secondary',
+                fontWeight: 'normal',
+              }}>
               <Typewriter
                 options={{
                   strings: ['The decentralized stripe alike payment solution for blocklets'],

package/src/pages/integrations/donations/edit-form.tsx

@@ -157,11 +157,12 @@ export default function EditDonationForm({
               minHeight: 0,
             }}>
             <Grid
-              item
-              xs={12}
-              md={6}
               sx={{
                 height: '100%',
+              }}
+              size={{
+                xs: 12,
+                md: 6,
               }}>
               <Paper
                 elevation={0}
@@ -173,7 +174,13 @@ export default function EditDonationForm({
                 }}>
                 <Stack spacing={4}>
                   <Box>
-                    <Typography variant="h6" gutterBottom color="text.primary" sx={{ mb: 3 }}>
+                    <Typography
+                      variant="h6"
+                      gutterBottom
+                      sx={{
+                        color: 'text.primary',
+                        mb: 3,
+                      }}>
                       {t('admin.donate.buttonSettings')}
                     </Typography>
                     <Stack spacing={3}>
@@ -190,7 +197,10 @@ export default function EditDonationForm({
                         )}
                       />
 
-                      <Stack gap={1}>
+                      <Stack
+                        sx={{
+                          gap: 1,
+                        }}>
                         <Typography variant="subtitle2" gutterBottom>
                           {t('admin.donate.historyType.title')}
                         </Typography>
@@ -219,7 +229,13 @@ export default function EditDonationForm({
                   <Divider />
 
                   <Box>
-                    <Typography variant="h6" gutterBottom color="text.primary" sx={{ mb: 3 }}>
+                    <Typography
+                      variant="h6"
+                      gutterBottom
+                      sx={{
+                        color: 'text.primary',
+                        mb: 3,
+                      }}>
                       {t('admin.donate.amountSettings')}
                     </Typography>
                     <Stack spacing={3}>
@@ -297,11 +313,12 @@ export default function EditDonationForm({
             </Grid>
 
             <Grid
-              item
-              md={6}
               sx={{
                 display: { xs: 'none', md: 'block' },
                 height: '100%',
+              }}
+              size={{
+                md: 6,
               }}>
               <Paper
                 elevation={0}
@@ -317,7 +334,6 @@ export default function EditDonationForm({
           </Grid>
         </FormProvider>
       </Box>
-
       <Box
         sx={{
           mt: 2,