@blocklet/payment-react 1.15.4 → 1.15.6

package/src/history/invoice/list.tsx

@@ -64,6 +64,7 @@ type Props = {
   target?: string;
   action?: string;
   type?: 'list' | 'table';
+  onTableDataChange?: Function;
 };
 
 const getInvoiceLink = (invoice: TInvoiceExpanded, action?: string) => {
@@ -97,6 +98,7 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
     subscription_id,
     include_staking,
     include_recovered_from,
+    onTableDataChange,
   } = props;
   const listKey = 'invoice-table';
   const { t, locale } = useLocaleContext();
@@ -105,7 +107,11 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
     pageSize: pageSize || 10,
     page: 1,
   });
-  const { loading, data = { list: [], count: 0 } } = useRequest(
+  const {
+    loading,
+    data = { list: [], count: 0 },
+    refresh,
+  } = useRequest(
     () =>
       fetchData({
         ...search,
@@ -121,6 +127,26 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
       refreshDeps: [search],
     }
   );
+  useEffect(() => {
+    if (onTableDataChange) {
+      onTableDataChange(data);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  const subscription = useSubscription('events');
+
+  useEffect(() => {
+    if (subscription && customer_id) {
+      subscription.on('invoice.paid', ({ response }: { response: TInvoiceExpanded }) => {
+        if (response.customer_id === customer_id) {
+          Toast.success(t('payment.customer.invoice.paySuccess'));
+          refresh();
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [subscription]);
 
   const columns = [
     {
@@ -284,6 +310,7 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
     target,
     action,
     onPay,
+    onTableDataChange,
   } = props;
   const size = pageSize || 10;
 
@@ -310,11 +337,19 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
     }
   );
 
+  useEffect(() => {
+    if (onTableDataChange) {
+      onTableDataChange(data);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
   // Listen to invoice.paid event and refresh data
   useEffect(() => {
     if (subscription && customer_id) {
       subscription.on('invoice.paid', async ({ response }: { response: TInvoiceExpanded }) => {
         if (response.customer_id === customer_id) {
+          Toast.success(t('payment.customer.invoice.paySuccess'));
           await reloadAsync();
         }
       });
@@ -497,6 +532,7 @@ CustomerInvoiceList.defaultProps = {
   target: '_self',
   action: '',
   type: 'list',
+  onTableDataChange: () => {},
 };
 
 const Root = styled(Stack)`

package/src/libs/util.ts

@@ -1089,5 +1089,6 @@ export function getCustomerAvatar(
   updated_at: string | number | undefined,
   imageSize: number = 48
 ): string {
-  return `/.well-known/service/user/avatar/${did}?imageFilter=resize&w=${imageSize}&h=${imageSize}&updateAt=${updated_at || dayjs().unix()}`;
+  const updated = typeof updated_at === 'number' ? updated_at : dayjs(updated_at).unix();
+  return `/.well-known/service/user/avatar/${did}?imageFilter=resize&w=${imageSize}&h=${imageSize}&updateAt=${updated || dayjs().unix()}`;
 }

package/src/payment/index.tsx

@@ -308,9 +308,6 @@ export default function Payment({
     if (checkoutSession) {
       if (livemode !== checkoutSession.livemode) {
         setLivemode(checkoutSession.livemode);
-        setTimeout(() => {
-          refresh();
-        }, 10);
       }
     }
   }, [checkoutSession, livemode, setLivemode, refresh]);

package/src/payment/product-card.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Stack, Typography } from '@mui/material';
+import { Avatar, Box, Stack, Typography } from '@mui/material';
 import type { LiteralUnion } from 'type-fest';
 
 type Props = {
@@ -47,9 +47,9 @@ export default function ProductCard({ size, variant, name, logo, description, ex
           </Typography>
         )}
         {extra && (
-          <Typography variant="body1" sx={{ fontSize: '0.85rem' }} color="text.lighter">
+          <Box sx={{ fontSize: '0.85rem' }} color="text.lighter">
             {extra}
-          </Typography>
+          </Box>
         )}
       </Stack>
     </Stack>