@blocklet/payment-react 1.20.13 → 1.20.14

package/src/history/credit/transactions-list.tsx

@@ -6,13 +6,13 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { Paginated, TCreditTransactionExpanded } from '@blocklet/payment-types';
-import { Box, Typography, Stack, Link, Grid } from '@mui/material';
+import { Box, Typography, Grid, Stack, Link, Button, Popover } from '@mui/material';
 import { useRequest } from 'ahooks';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useNavigate } from 'react-router-dom';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { joinURL } from 'ufo';
 import { styled } from '@mui/system';
+import { joinURL } from 'ufo';
 import DateRangePicker, { type DateRangeValue } from '../../components/date-range-picker';
 // eslint-disable-next-line import/no-extraneous-dependencies
 
@@ -21,6 +21,7 @@ import { usePaymentContext } from '../../contexts/payment';
 import api from '../../libs/api';
 import Table from '../../components/table';
 import { createLink, handleNavigation } from '../../libs/navigation';
+import SourceDataViewer from '../../components/source-data-viewer';
 
 type Result = Paginated<TCreditTransactionExpanded>;
 
@@ -43,6 +44,7 @@ type Props = {
   onTableDataChange?: Function;
   showAdminColumns?: boolean;
   showTimeFilter?: boolean;
+  includeGrants?: boolean; // Enable unified cash flow view
   source?: string;
   mode?: 'dashboard' | 'portal';
 };
@@ -59,6 +61,18 @@ const getGrantDetailLink = (grantId: string, inDashboard: boolean) => {
   };
 };
 
+const getInvoiceDetailLink = (invoiceId: string, inDashboard: boolean) => {
+  let path = `/customer/invoice/${invoiceId}`;
+  if (inDashboard) {
+    path = `/admin/billing/${invoiceId}`;
+  }
+
+  return {
+    link: createLink(path),
+    connect: false,
+  };
+};
+
 const TransactionsTable = React.memo((props: Props) => {
   const {
     pageSize,
@@ -68,6 +82,7 @@ const TransactionsTable = React.memo((props: Props) => {
     onTableDataChange,
     showAdminColumns = false,
     showTimeFilter = false,
+    includeGrants = false,
     source,
     mode = 'portal',
   } = props;
@@ -95,6 +110,12 @@ const TransactionsTable = React.memo((props: Props) => {
     end: undefined,
   });
 
+  // Source Data Popover state
+  const [sourceDataPopover, setSourceDataPopover] = useState<{
+    anchorEl: HTMLElement | null;
+    data: any;
+  }>({ anchorEl: null, data: null });
+
   const handleDateRangeChange = useCallback((newValue: DateRangeValue) => {
     setFilters(newValue);
     setSearch((prev) => ({
@@ -113,9 +134,10 @@ const TransactionsTable = React.memo((props: Props) => {
         subscription_id,
         credit_grant_id,
         source,
+        include_grants: includeGrants,
       }),
     {
-      refreshDeps: [search, effectiveCustomerId, subscription_id, credit_grant_id, source],
+      refreshDeps: [search, effectiveCustomerId, subscription_id, credit_grant_id, source, includeGrants],
     }
   );
 
@@ -143,35 +165,55 @@ const TransactionsTable = React.memo((props: Props) => {
       align: 'right',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
-          const transaction = data?.list[index] as TCreditTransactionExpanded;
-          const unit = transaction.meter?.unit || transaction.paymentCurrency.symbol;
+          const item = data?.list[index] as any;
+          const isGrant = item.activity_type === 'grant';
+          const amount = isGrant ? item.amount : item.credit_amount;
+          const currency = item.paymentCurrency || item.currency;
+          const unit = !isGrant && item.meter?.unit ? item.meter.unit : currency?.symbol;
+          const displayAmount = formatBNStr(amount, currency?.decimal || 0);
+
+          if (!includeGrants) {
+            return (
+              <Typography>
+                {displayAmount} {unit}
+              </Typography>
+            );
+          }
+
           return (
-            <Typography>
-              {formatBNStr(transaction.credit_amount, transaction.paymentCurrency.decimal)} {unit}
+            <Typography
+              sx={{
+                color: isGrant ? 'success.main' : 'error.main',
+              }}>
+              {isGrant ? '+' : '-'} {displayAmount} {unit}
             </Typography>
           );
         },
       },
     },
-    !credit_grant_id && {
+    {
       label: t('common.creditGrant'),
       name: 'credit_grant',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
-          const transaction = data?.list[index] as TCreditTransactionExpanded;
+          const item = data?.list[index] as any;
+          const isGrant = item.activity_type === 'grant';
+
+          const grantName = isGrant ? item.name : item.creditGrant.name;
+          const grantId = isGrant ? item.id : item.credit_grant_id;
           return (
             <Stack
               direction="row"
               spacing={1}
               onClick={(e) => {
-                const link = getGrantDetailLink(transaction.credit_grant_id, isAdmin && mode === 'dashboard');
+                const link = getGrantDetailLink(grantId, isAdmin && mode === 'dashboard');
                 handleNavigation(e, link.link, navigate);
               }}
               sx={{
                 alignItems: 'center',
               }}>
-              <Typography variant="body2" sx={{ color: 'text.link', cursor: 'pointer' }}>
-                {transaction.creditGrant.name || `Grant ${transaction.credit_grant_id.slice(-6)}`}
+              <Typography variant="body2" sx={{ cursor: 'pointer' }}>
+                {grantName || `Grant ${grantId.slice(-6)}`}
               </Typography>
             </Stack>
           );
@@ -180,12 +222,19 @@ const TransactionsTable = React.memo((props: Props) => {
     },
     {
       label: t('common.description'),
-      name: 'subscription',
+      name: 'description',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
-          const transaction = data?.list[index] as TCreditTransactionExpanded;
+          const item = data?.list[index] as any;
+          const isGrant = item.activity_type === 'grant';
+          const description = isGrant
+            ? item.name || item.description || 'Credit Granted'
+            : item.subscription?.description || item.description || `${item.meter_event_name} usage`;
+
           return (
-            <Typography variant="body2">{transaction.subscription?.description || transaction.description}</Typography>
+            <Typography variant="body2" sx={{ fontWeight: 400 }}>
+              {description}
+            </Typography>
           );
         },
       },
@@ -218,15 +267,60 @@ const TransactionsTable = React.memo((props: Props) => {
       name: 'created_at',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
-          const transaction = data?.list[index] as TCreditTransactionExpanded;
+          const item = data?.list[index] as any;
           return (
-            <Typography variant="body2">
-              {formatToDate(transaction.created_at, locale, 'YYYY-MM-DD HH:mm:ss')}
+            <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.875rem' }}>
+              {formatToDate(item.created_at, locale, 'YYYY-MM-DD HH:mm')}
             </Typography>
           );
         },
       },
     },
+    {
+      label: t('common.actions'),
+      name: 'actions',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data?.list[index] as any;
+          const isGrant = item.activity_type === 'grant';
+          const invoiceId = isGrant ? item.metadata?.invoice_id : null;
+          const sourceData = !isGrant && item.meterEvent?.source_data;
+
+          return (
+            <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+              {isGrant && invoiceId && (
+                <Button
+                  variant="text"
+                  size="small"
+                  color="primary"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    const link = getInvoiceDetailLink(invoiceId, isAdmin && mode === 'dashboard');
+                    handleNavigation(e, link.link, navigate);
+                  }}>
+                  {t('common.viewInvoice')}
+                </Button>
+              )}
+              {sourceData && (
+                <Button
+                  variant="text"
+                  size="small"
+                  color="primary"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setSourceDataPopover({
+                      anchorEl: e.currentTarget,
+                      data: sourceData,
+                    });
+                  }}>
+                  {t('common.viewSourceData')}
+                </Button>
+              )}
+            </Box>
+          );
+        },
+      },
+    },
   ].filter(Boolean);
 
   const onTableChange = ({ page, rowsPerPage }: any) => {
@@ -279,6 +373,35 @@ const TransactionsTable = React.memo((props: Props) => {
         mobileTDFlexDirection="row"
         emptyNodeText={t('admin.creditTransactions.noTransactions')}
       />
+      <Popover
+        open={Boolean(sourceDataPopover.anchorEl)}
+        anchorEl={sourceDataPopover.anchorEl}
+        onClose={() => setSourceDataPopover({ anchorEl: null, data: null })}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        slotProps={{
+          paper: {
+            sx: {
+              minWidth: {
+                xs: 0,
+                md: 320,
+              },
+              maxHeight: 450,
+              p: {
+                xs: 1,
+                md: 3,
+              },
+            },
+          },
+        }}>
+        {sourceDataPopover.data && <SourceDataViewer data={sourceDataPopover.data} showGroups />}
+      </Popover>
     </TableRoot>
   );
 });
@@ -308,6 +431,7 @@ export default function CreditTransactionsList(rawProps: Props) {
       onTableDataChange: () => {},
       showAdminColumns: false,
       showTimeFilter: false,
+      includeGrants: false,
       mode: 'portal',
     },
     rawProps

package/src/index.ts

@@ -40,6 +40,7 @@ import AutoTopupModal from './components/auto-topup/modal';
 import AutoTopup from './components/auto-topup';
 import Collapse from './components/collapse';
 import PromotionCode from './components/promotion-code';
+import SourceDataViewer from './components/source-data-viewer';
 
 export { PaymentThemeProvider } from './theme';
 
@@ -104,4 +105,5 @@ export {
   AutoTopup,
   Collapse,
   PromotionCode,
+  SourceDataViewer,
 };

package/src/locales/en.tsx

@@ -110,6 +110,7 @@ export default flat({
       cancel: 'Cancel',
     },
     paymentMethod: 'Payment Method',
+    viewInvoice: 'View Invoice',
   },
   payment: {
     checkout: {

package/src/locales/zh.tsx

@@ -110,6 +110,7 @@ export default flat({
       cancel: '取消',
     },
     paymentMethod: '支付方式',
+    viewInvoice: '查看账单',
   },
   payment: {
     checkout: {

package/src/payment/index.tsx

@@ -173,10 +173,7 @@ function PaymentInner({
     settings.baseCurrency;
   const method = paymentMethods.find((x: any) => x.id === currency.payment_method_id) as TPaymentMethod;
 
-  useEffect(() => {
-    if (onChange) {
-      onChange(methods.getValues());
-    }
+  const recalculatePromotion = () => {
     if ((state.checkoutSession as any)?.discounts?.length) {
       api
         .post(`/api/checkout-sessions/${state.checkoutSession.id}/recalculate-promotion`, {
@@ -186,11 +183,22 @@ function PaymentInner({
           onPromotionUpdate();
         });
     }
+  };
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(methods.getValues());
+    }
+    recalculatePromotion();
   }, [currencyId]); // eslint-disable-line
 
   const onUpsell = async (from: string, to: string) => {
     try {
       const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/upsell`, { from, to });
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({ checkoutSession: data });
     } catch (err) {
       console.error(err);
@@ -201,6 +209,10 @@ function PaymentInner({
   const onDownsell = async (from: string) => {
     try {
       const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/downsell`, { from });
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({ checkoutSession: data });
     } catch (err) {
       console.error(err);
@@ -211,6 +223,10 @@ function PaymentInner({
   const onApplyCrossSell = async (to: string) => {
     try {
       const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`, { to });
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({ checkoutSession: data });
     } catch (err) {
       console.error(err);
@@ -224,6 +240,10 @@ function PaymentInner({
         itemId,
         quantity,
       });
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({ checkoutSession: data });
     } catch (err) {
       console.error(err);
@@ -234,6 +254,10 @@ function PaymentInner({
   const onCancelCrossSell = async () => {
     try {
       const { data } = await api.delete(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`);
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({ checkoutSession: data });
     } catch (err) {
       console.error(err);
@@ -247,6 +271,10 @@ function PaymentInner({
         priceId,
         amount: fromTokenToUnit(amount, currency.decimal).toString(),
       });
+      if (data.discounts?.length) {
+        recalculatePromotion();
+        return;
+      }
       setState({ checkoutSession: data });
     } catch (err) {
       console.error(err);

package/src/payment/summary.tsx

@@ -92,9 +92,9 @@ type Props = {
   showFeatures?: boolean;
 };
 
-async function fetchCrossSell(id: string) {
+async function fetchCrossSell(id: string, skipError = true) {
   try {
-    const { data } = await api.get(`/api/checkout-sessions/${id}/cross-sell`);
+    const { data } = await api.get(`/api/checkout-sessions/${id}/cross-sell?skipError=${skipError}`);
     if (!data.error) {
       return data;
     }
@@ -167,8 +167,8 @@ export default function PaymentSummary({
   const { isMobile } = useMobile();
   const { paymentState, ...settings } = usePaymentContext();
   const [state, setState] = useSetState({ loading: false, shake: false, expanded: items?.length < 3 });
-  const { data, runAsync } = useRequest(() =>
-    checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null)
+  const { data, runAsync } = useRequest((skipError) =>
+    checkoutSessionId ? fetchCrossSell(checkoutSessionId, skipError) : Promise.resolve(null)
   );
 
   const sessionDiscounts = (checkoutSession as any)?.discounts || [];
@@ -238,17 +238,17 @@ export default function PaymentSummary({
 
   const handleUpsell = async (from: string, to: string) => {
     await onUpsell!(from, to);
-    runAsync();
+    runAsync(false);
   };
 
   const handleQuantityChange = async (itemId: string, quantity: number) => {
     await onQuantityChange!(itemId, quantity);
-    runAsync();
+    runAsync(false);
   };
 
   const handleDownsell = async (from: string) => {
     await onDownsell!(from);
-    runAsync();
+    runAsync(false);
   };
 
   const handleApplyCrossSell = async () => {