payment-kit 1.15.21 → 1.15.23

package/src/components/webhook/attempts.tsx

@@ -2,7 +2,7 @@
 import CodeBlock from '@arcblock/ux/lib/CodeBlock';
 import { api, formatTime } from '@blocklet/payment-react';
 import type { Paginated, TEvent, TWebhookAttemptExpanded } from '@blocklet/payment-types';
-import { CheckCircleOutlined, ErrorOutlined } from '@mui/icons-material';
+import { CheckCircleOutlined, ErrorOutlined, InfoOutlined } from '@mui/icons-material';
 import {
   Box,
   Button,
@@ -15,12 +15,15 @@ import {
   ListSubheader,
   Stack,
   Typography,
+  Popper,
+  Paper,
 } from '@mui/material';
 import { useInfiniteScroll } from 'ahooks';
 import React, { useEffect, useState } from 'react';
 
 import { isEmpty } from 'lodash';
 import { isSuccessAttempt } from '../../libs/util';
+import InfoCard from '../info-card';
 
 const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TWebhookAttemptExpanded>> => {
   const search = new URLSearchParams();
@@ -45,7 +48,7 @@ const groupAttemptsByDate = (attempts: TWebhookAttemptExpanded[]) => {
 type Props = {
   event_id?: string;
   webhook_endpoint_id?: string;
-  event?: TEvent;
+  event?: TEvent & { requestInfo?: { avatar: string; email: string; did: string } };
 };
 
 WebhookAttempts.defaultProps = {
@@ -82,6 +85,35 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
     setSelected(attempt);
   };
 
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : e.currentTarget);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (anchorEl && !anchorEl.contains(e.target as Node) && !(e.target as Element).closest('.popper-content')) {
+        setAnchorEl(null);
+      }
+    };
+
+    const handleScroll = (e: Event) => {
+      // @ts-ignore
+      if (anchorEl && !e.target?.closest('.popper-content')) {
+        setAnchorEl(null);
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    window.addEventListener('scroll', handleScroll, true);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+      window.removeEventListener('scroll', handleScroll, true);
+    };
+  }, [anchorEl]);
+
   if (loading) {
     return <CircularProgress />;
   }
@@ -146,7 +178,94 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
         )}
         {data?.list.length === 0 && event && (
           <Box>
-            <Typography variant="h6">Event Data</Typography>
+            <Stack direction="row" alignItems="center" spacing={1}>
+              <Typography variant="h6">Event Data</Typography>
+              <>
+                {/* @ts-ignore */}
+                <InfoOutlined
+                  fontSize="small"
+                  onClick={handleClick}
+                  sx={{
+                    color: 'text.secondary',
+                    opacity: 0.6,
+                    cursor: 'pointer',
+                  }}
+                />
+                <Popper
+                  open={Boolean(anchorEl)}
+                  anchorEl={anchorEl}
+                  placement="right"
+                  sx={{
+                    zIndex: 1000,
+                    '@media (max-width: 600px)': {
+                      '& .MuiPaper-root': {
+                        width: 'calc(100vw - 32px)',
+                        maxWidth: 'none',
+                      },
+                    },
+                  }}
+                  modifiers={[
+                    {
+                      name: 'preventOverflow',
+                      options: {
+                        boundary: window,
+                        altAxis: true,
+                        padding: 16,
+                      },
+                    },
+                    {
+                      name: 'flip',
+                      options: {
+                        fallbackPlacements: ['bottom'],
+                      },
+                    },
+                    {
+                      name: 'matchWidth',
+                      enabled: true,
+                      fn: ({ state }) => {
+                        if (window.innerWidth <= 600) {
+                          state.styles.popper = {
+                            ...state.styles.popper,
+                            width: 'calc(100vw - 32px)',
+                            maxWidth: 'none',
+                          };
+                        }
+                        return state;
+                      },
+                    },
+                  ]}>
+                  <Paper
+                    className="popper-content"
+                    elevation={3}
+                    sx={{
+                      p: 2,
+                      border: '1px solid',
+                      borderColor: 'divider',
+                      maxWidth: 300,
+                      '@media (max-width: 600px)': {
+                        maxWidth: 'none',
+                        margin: '0 auto',
+                      },
+                    }}>
+                    {event.requestInfo ? (
+                      <>
+                        <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
+                          Requested by:
+                        </Typography>
+                        <InfoCard
+                          logo={event.requestInfo.avatar}
+                          name={event.requestInfo.email}
+                          description={event.requestInfo.did || event.request.requested_by}
+                          size={40}
+                        />
+                      </>
+                    ) : (
+                      <Typography>Requested by: {event.request?.requested_by || 'system'}</Typography>
+                    )}
+                  </Paper>
+                </Popper>
+              </>
+            </Stack>
             <CodeBlock language="json">{JSON.stringify(event.data, null, 2)}</CodeBlock>
           </Box>
         )}