payment-kit 1.18.11 → 1.18.13

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

@@ -9,6 +9,7 @@ import {
   formatTime,
   getCustomerAvatar,
   getPayoutStatusColor,
+  useMobile,
 } from '@blocklet/payment-react';
 import type { TCustomer, TPaymentLink, TPayoutExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
@@ -41,6 +42,7 @@ const InfoAlignItems = 'flex-start';
 
 export default function PayoutDetail() {
   const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
   const params = useParams<{ id: string }>();
   const { loading, error, data } = useRequest(() => fetchData(params.id!), {
     ready: !!params.id,
@@ -60,7 +62,7 @@ export default function PayoutDetail() {
   return (
     <Root direction="column" spacing={2.5} mb={4}>
       <Box>
-        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center" mt={2}>
+        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
           <Stack
             direction="row"
             alignItems="center"
@@ -177,7 +179,12 @@ export default function PayoutDetail() {
                       {paymentIntent?.customer?.name} ({paymentIntent?.customer?.email})
                     </Typography>
                   }
-                  description={<DID did={paymentIntent?.customer?.did} />}
+                  description={
+                    <DID
+                      did={paymentIntent?.customer?.did}
+                      {...(isMobile ? { responsive: false, compact: true } : {})}
+                    />
+                  }
                   size={40}
                   variant="rounded"
                 />

package/src/pages/customer/recharge.tsx

@@ -45,7 +45,6 @@ const Root = styled(Stack)(({ theme }) => ({
   gap: theme.spacing(3),
   flexDirection: 'column',
   margin: '0 auto',
-  padding: '20px 0',
 }));
 
 const BalanceCard = styled(Box)(({ theme }) => ({
@@ -141,7 +140,12 @@ export default function RechargePage() {
     if (rechargeRef.current && subscription) {
       setTimeout(() => {
         // @ts-ignore
-        rechargeRef.current?.scrollIntoView({
+        const rechargePosition = rechargeRef.current.getBoundingClientRect();
+        const absoluteTop = window.scrollY + rechargePosition.top;
+        const scrollToPosition = absoluteTop - 20;
+
+        window.scrollTo({
+          top: scrollToPosition,
           behavior: 'smooth',
         });
       }, 200);

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

@@ -220,7 +220,7 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
         <Stack
           direction="row"
           alignItems="center"
-          sx={{ fontWeight: 'normal', mt: 2, cursor: 'pointer' }}
+          sx={{ fontWeight: 'normal', cursor: 'pointer' }}
           onClick={() => goBackOrFallback(`/customer/subscription/${subscription.id}`)}>
           <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
           <SubscriptionDescription subscription={subscription} variant="h5" />

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

@@ -236,7 +236,7 @@ export default function CustomerSubscriptionChangePlan() {
         <Stack
           direction="row"
           alignItems="center"
-          sx={{ fontWeight: 'normal', mt: '16px', cursor: 'pointer' }}
+          sx={{ fontWeight: 'normal', cursor: 'pointer' }}
           onClick={() => goBackOrFallback(`/customer/subscription/${data.subscription.id}`)}>
           <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
           <SubscriptionDescription subscription={data.subscription} variant="h5" />

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

@@ -230,7 +230,7 @@ export default function CustomerSubscriptionDetail() {
     <Root>
       <Box>
         {hasUnpaid && (
-          <Alert severity="error" sx={{ mt: 2 }}>
+          <Alert severity="error" sx={{ mb: 2 }}>
             {t('customer.unpaidInvoicesWarningTip')}
           </Alert>
         )}
@@ -239,7 +239,7 @@ export default function CustomerSubscriptionDetail() {
           direction="row"
           justifyContent="space-between"
           alignItems="center"
-          sx={{ position: 'relative', mt: '16px' }}>
+          sx={{ position: 'relative' }}>
           <Stack
             direction="row"
             onClick={() => navigate('/customer', { replace: true })}
@@ -253,7 +253,12 @@ export default function CustomerSubscriptionDetail() {
           <Stack direction="row" gap={1}>
             <SubscriptionActions
               subscription={data}
-              onChange={() => refresh()}
+              onChange={(action) => {
+                refresh();
+                if (action === 'batch-pay') {
+                  checkUnpaidInvoices();
+                }
+              }}
               showExtra
               showDelegation
               showOverdraftProtection={{

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

@@ -16,9 +16,10 @@ import {
   getInvoiceDescriptionAndReason,
   getInvoiceStatusColor,
   getPrefix,
-  getSubscriptionStatusColor,
   useDefaultPageSize,
   useMobile,
+  OverdueInvoicePayment,
+  PaymentProvider,
 } from '@blocklet/payment-react';
 import type { Paginated, TInvoiceExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
 import {
@@ -35,12 +36,16 @@ import {
   Tooltip,
   Typography,
 } from '@mui/material';
-import { useRequest } from 'ahooks';
+import { useRequest, useSetState } from 'ahooks';
 import { useMemo } from 'react';
 import { joinURL, withQuery } from 'ufo';
 import prettyMs from 'pretty-ms-i18n';
+import { isEmpty } from 'lodash';
+import { PaymentOutlined } from '@mui/icons-material';
 import InfoRow from '../../../components/info-row';
 import InfoCard from '../../../components/info-card';
+import { useSessionContext } from '../../../contexts/session';
+import SubscriptionStatus from '../../../components/subscription/status';
 
 const fetchInvoiceData = (params: Record<string, any> = {}): Promise<Paginated<TInvoiceExpanded>> => {
   const search = new URLSearchParams();
@@ -58,16 +63,39 @@ const fetchSubscriptionData = (id: string, authToken: string): Promise<TSubscrip
   return api.get(`/api/subscriptions/${id}?authToken=${authToken}`).then((res) => res.data);
 };
 
+const checkHasPastDue = async (subscriptionId: string): Promise<boolean> => {
+  try {
+    const res = await api.get(`/api/subscriptions/${subscriptionId}/summary`);
+    if (!isEmpty(res.data) && Object.keys(res.data).length >= 1) {
+      return true;
+    }
+    return false;
+  } catch (error) {
+    console.error('Failed to check past due:', error);
+    return false;
+  }
+};
+
 export default function SubscriptionEmbed() {
   const { t, locale } = useLocaleContext();
   const params = new URL(window.location.href).searchParams;
+  const [state, setState] = useSetState({
+    batchPay: false,
+  });
+
+  const { session, connectApi } = useSessionContext();
 
   const subscriptionId = params.get('id') || '';
   const authToken = params.get('authToken') || '';
   const defaultPageSize = useDefaultPageSize(20);
   const { isMobile } = useMobile();
-  const { data: subscription, error, loading } = useRequest(() => fetchSubscriptionData(subscriptionId, authToken));
-  const { data } = useRequest(
+  const {
+    data: subscription,
+    error,
+    loading,
+    runAsync: refreshSubscription,
+  } = useRequest(() => fetchSubscriptionData(subscriptionId, authToken));
+  const { data, runAsync: refreshInvoices } = useRequest(
     () =>
       fetchInvoiceData({
         page: 1,
@@ -98,6 +126,10 @@ export default function SubscriptionEmbed() {
     });
   }, [subscription]);
 
+  const { data: hasPastDue, runAsync: runCheckHasPastDue } = useRequest(() => checkHasPastDue(subscriptionId), {
+    refreshDeps: [subscriptionId],
+  });
+
   if (error) {
     return (
       <Position>
@@ -126,7 +158,7 @@ export default function SubscriptionEmbed() {
     },
     {
       name: t('common.status'),
-      value: <Status label={subscription.status} color={getSubscriptionStatusColor(subscription.status)} />,
+      value: <SubscriptionStatus subscription={subscription} />,
     },
   ];
 
@@ -183,7 +215,7 @@ export default function SubscriptionEmbed() {
             48
           )}
           name={`${subscription.customer.name} (${subscription.customer.email})`}
-          description={<DidAddress did={subscription.customer.did} responsive />}
+          description={<DidAddress did={subscription.customer.did} responsive={false} compact />}
         />
       ),
     });
@@ -191,87 +223,113 @@ export default function SubscriptionEmbed() {
 
   return (
     <Position>
-      <Box
-        className="mini-invoice-wrap"
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItem: 'center',
-          justifyContent: 'flex-start',
-          padding: '8px',
-          gap: '12px',
-          width: '100%',
-          height: '100%',
-        }}>
-        <Typography component="h2" sx={{ textAlign: 'center' }} variant="h3" gutterBottom>
-          {t('payment.customer.subscriptions.current')}
-        </Typography>
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-          {infoList.map(({ name, value }) => {
-            return <InfoRow label={name} value={value} direction="column" alignItems="flex-start" sx={{ mb: 0 }} />;
-          })}
-        </Box>
-        <Divider />
-        <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">
-                {t('payment.customer.invoices')}
-              </Typography>
-            </ListSubheader>
-            {(invoices as any).length === 0 ? (
-              <Typography color="text.lighter">{t('payment.customer.invoice.empty')}</Typography>
-            ) : (
-              <Box sx={{ flex: 1, overflow: 'auto' }}>
-                {(invoices as any).map((item: any) => {
-                  return (
-                    <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                      <Typography component="div" sx={{ flex: 3, gap: 1, display: 'flex', alignItems: 'center' }}>
-                        <Typography component="span" sx={{ whiteSpace: 'nowrap' }}>
-                          {formatToDate(item.created_at, locale, 'YYYY-MM-DD')}
+      <PaymentProvider session={session} connect={connectApi}>
+        <Box
+          className="mini-invoice-wrap"
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItem: 'center',
+            justifyContent: 'flex-start',
+            padding: '8px',
+            gap: '12px',
+            width: '100%',
+            height: '100%',
+          }}>
+          <Typography component="h2" sx={{ textAlign: 'center' }} variant="h3" gutterBottom>
+            {t('payment.customer.subscriptions.current')}
+          </Typography>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            {infoList.map(({ name, value }) => {
+              return <InfoRow label={name} value={value} direction="column" alignItems="flex-start" sx={{ mb: 0 }} />;
+            })}
+          </Box>
+          <Divider />
+          <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">
+                  {t('payment.customer.invoices')}
+                </Typography>
+              </ListSubheader>
+              {(invoices as any).length === 0 ? (
+                <Typography color="text.lighter">{t('payment.customer.invoice.empty')}</Typography>
+              ) : (
+                <Box sx={{ flex: 1, overflow: 'auto' }}>
+                  {(invoices as any).map((item: any) => {
+                    return (
+                      <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                        <Typography component="div" sx={{ flex: 3, gap: 1, display: 'flex', alignItems: 'center' }}>
+                          <Typography component="span" sx={{ whiteSpace: 'nowrap' }}>
+                            {formatToDate(item.created_at, locale, 'YYYY-MM-DD')}
+                          </Typography>
+                          {!isMobile && <Status label={getInvoiceDescriptionAndReason(item, locale)?.type} />}
+                        </Typography>
+                        <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
+                          {formatBNStr(item.total, item.paymentCurrency.decimal)}&nbsp;
+                          {item.paymentCurrency.symbol}
+                        </Typography>
+                        <Typography component="span" sx={{ flex: 2, textAlign: 'right' }}>
+                          <Status label={item.status} color={getInvoiceStatusColor(item.status)} />
                         </Typography>
-                        {!isMobile && <Status label={getInvoiceDescriptionAndReason(item, locale)?.type} />}
-                      </Typography>
-                      <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
-                        {formatBNStr(item.total, item.paymentCurrency.decimal)}&nbsp;
-                        {item.paymentCurrency.symbol}
-                      </Typography>
-                      <Typography component="span" sx={{ flex: 2, textAlign: 'right' }}>
-                        <Status label={item.status} color={getInvoiceStatusColor(item.status)} />
-                      </Typography>
-                    </ListItem>
-                  );
-                })}
-              </Box>
+                      </ListItem>
+                    );
+                  })}
+                </Box>
+              )}
+            </List>
+          </Box>
+          <Stack direction="row" justifyContent="center" spacing={2} sx={{ mt: 2 }}>
+            {subscription.service_actions
+              ?.filter((x: any) => x?.type !== 'notification')
+              ?.map((x) => (
+                // @ts-ignore
+                <Button
+                  component={Link}
+                  key={x.name}
+                  variant={x?.variant || 'contained'}
+                  color={x.color || 'primary'}
+                  href={x.link}
+                  size="small"
+                  target="_blank"
+                  sx={{ textDecoration: 'none !important' }}>
+                  {x.text[locale] || x.text.en || x.name}
+                </Button>
+              ))}
+            <Button
+              variant="contained"
+              sx={{ color: '#fff!important', width: subscription.service_actions?.length ? 'auto' : '100%' }}
+              target="_blank"
+              href={subscriptionPageUrl}>
+              {t('payment.customer.subscriptions.view')}
+            </Button>
+            {hasPastDue && (
+              <Tooltip title={t('admin.subscription.batchPay.button')}>
+                <Button variant="outlined" color="error" onClick={() => setState({ batchPay: true })}>
+                  <PaymentOutlined />
+                </Button>
+              </Tooltip>
             )}
-          </List>
+          </Stack>
         </Box>
-        <Stack direction="row" justifyContent="center" spacing={2} sx={{ mt: 2 }}>
-          {subscription.service_actions
-            ?.filter((x: any) => x?.type !== 'notification')
-            ?.map((x) => (
-              // @ts-ignore
-              <Button
-                component={Link}
-                key={x.name}
-                variant={x?.variant || 'contained'}
-                color={x.color || 'primary'}
-                href={x.link}
-                size="small"
-                target="_blank"
-                sx={{ textDecoration: 'none !important' }}>
-                {x.text[locale] || x.text.en || x.name}
-              </Button>
-            ))}
-          <Button
-            variant="contained"
-            sx={{ color: '#fff!important', width: subscription.service_actions?.length ? 'auto' : '100%' }}
-            target="_blank"
-            href={subscriptionPageUrl}>
-            {t('payment.customer.subscriptions.view')}
-          </Button>
-        </Stack>
-      </Box>
+        {state.batchPay && (
+          <OverdueInvoicePayment
+            subscriptionId={subscriptionId}
+            onPaid={() => {
+              setState({
+                batchPay: false,
+              });
+              refreshSubscription();
+              runCheckHasPastDue();
+              refreshInvoices();
+            }}
+            dialogProps={{
+              open: state.batchPay,
+              onClose: () => setState({ batchPay: false }),
+            }}
+          />
+        )}
+      </PaymentProvider>
     </Position>
   );
 }