payment-kit 1.15.20 → 1.15.22

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.15.20
+version: 1.15.22
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.15.20",
+  "version": "1.15.22",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -43,29 +43,29 @@
   },
   "dependencies": {
     "@abtnode/cron": "^1.16.32",
-    "@arcblock/did": "^1.18.135",
+    "@arcblock/did": "^1.18.136",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.10.45",
-    "@arcblock/did-util": "^1.18.135",
-    "@arcblock/jwt": "^1.18.135",
-    "@arcblock/ux": "^2.10.45",
-    "@arcblock/validator": "^1.18.135",
+    "@arcblock/did-connect": "^2.10.51",
+    "@arcblock/did-util": "^1.18.136",
+    "@arcblock/jwt": "^1.18.136",
+    "@arcblock/ux": "^2.10.51",
+    "@arcblock/validator": "^1.18.136",
     "@blocklet/js-sdk": "^1.16.32",
     "@blocklet/logger": "^1.16.32",
-    "@blocklet/payment-react": "1.15.20",
+    "@blocklet/payment-react": "1.15.22",
     "@blocklet/sdk": "^1.16.32",
-    "@blocklet/ui-react": "^2.10.45",
-    "@blocklet/uploader": "^0.1.43",
-    "@blocklet/xss": "^0.1.9",
+    "@blocklet/ui-react": "^2.10.51",
+    "@blocklet/uploader": "^0.1.46",
+    "@blocklet/xss": "^0.1.12",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/asset": "^1.18.135",
-    "@ocap/client": "^1.18.135",
-    "@ocap/mcrypto": "^1.18.135",
-    "@ocap/util": "^1.18.135",
-    "@ocap/wallet": "^1.18.135",
+    "@ocap/asset": "^1.18.136",
+    "@ocap/client": "^1.18.136",
+    "@ocap/mcrypto": "^1.18.136",
+    "@ocap/util": "^1.18.136",
+    "@ocap/wallet": "^1.18.136",
     "@react-pdf/renderer": "^3.4.4",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
@@ -117,8 +117,8 @@
   },
   "devDependencies": {
     "@abtnode/types": "^1.16.32",
-    "@arcblock/eslint-config-ts": "^0.3.2",
-    "@blocklet/payment-types": "1.15.20",
+    "@arcblock/eslint-config-ts": "^0.3.3",
+    "@blocklet/payment-types": "1.15.22",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -160,5 +160,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "0499ea79c00bb48d7a2479af589c21698c6388a0"
+  "gitHead": "12a3cbcf04d0c8bdbbf33c04d07cecfb24bd3e9b"
 }

package/src/app.tsx

@@ -27,6 +27,7 @@ const CustomerSubscriptionDetail = React.lazy(() => import('./pages/customer/sub
 const CustomerSubscriptionEmbed = React.lazy(() => import('./pages/customer/subscription/embed'));
 const CustomerSubscriptionChangePlan = React.lazy(() => import('./pages/customer/subscription/change-plan'));
 const CustomerSubscriptionChangePayment = React.lazy(() => import('./pages/customer/subscription/change-payment'));
+const CustomerRecharge = React.lazy(() => import('./pages/customer/recharge'));
 
 // const theme = createTheme({
 //   typography: {
@@ -92,6 +93,15 @@ function App() {
                     </Layout>
                   }
                 />
+                <Route
+                  key="customer-recharge"
+                  path="/customer/subscription/:id/recharge"
+                  element={
+                    <Layout>
+                      <CustomerRecharge />
+                    </Layout>
+                  }
+                />
                 <Route
                   key="customer-embed"
                   path="/customer/embed/subscription"

package/src/components/subscription/actions/cancel.tsx

@@ -1,9 +1,9 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { api, formatAmount, formatTime } from '@blocklet/payment-react';
+import { api, dayjs, formatAmount, formatTime } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Box, Divider, FormControlLabel, Radio, RadioGroup, Stack, TextField, Typography, styled } from '@mui/material';
 import { useRequest } from 'ahooks';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
 const fetchData = (id: string, time: string): Promise<{ total: string; unused: string }> => {
@@ -21,13 +21,23 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
   const cancelTime = useWatch({ control, name: 'cancel.time' });
   const refundType = useWatch({ control, name: 'cancel.refund' });
   const stakingType = useWatch({ control, name: 'cancel.staking' });
-  const {
-    loading,
-    data: refund,
-    refresh,
-  } = useRequest(() => fetchData(data.id, cancelAt === 'custom' ? cancelTime : ''));
+  const actualCancelAt = useMemo(() => {
+    if (cancelAt === 'custom') {
+      return cancelTime;
+    }
+    if (cancelAt === 'current_period_end') {
+      return new Date(data.current_period_end * 1000);
+    }
+    return '';
+  }, [cancelAt, cancelTime]);
+  const { loading, data: refund, refresh } = useRequest(() => fetchData(data.id, actualCancelAt));
 
-  const { data: staking } = useRequest(() => fetchStakingData(data.id, cancelAt === 'custom' ? cancelTime : ''));
+  const { data: staking } = useRequest(() => {
+    if (data.paymentMethod?.type === 'arcblock') {
+      return fetchStakingData(data.id, actualCancelAt);
+    }
+    return Promise.resolve({ return_amount: '0', slash_amount: '0' });
+  });
   useEffect(() => {
     if (data) {
       refresh();
@@ -71,7 +81,18 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
           {isCustom && (
             <Controller
               name="cancel.time"
-              rules={{ required: isCustom }}
+              rules={{
+                required: isCustom,
+                validate: (value) => {
+                  const now = dayjs();
+                  const selectedTime = dayjs(value);
+                  const periodEndTime = dayjs.unix(data.current_period_end);
+                  if (selectedTime.isBefore(now) || selectedTime.isAfter(periodEndTime)) {
+                    return t('admin.subscription.cancel.at.timeError');
+                  }
+                  return true;
+                },
+              }}
               control={control}
               render={({ field }) => (
                 <TextField

package/src/components/subscription/actions/index.tsx

@@ -44,9 +44,17 @@ function SubscriptionActionsInner({ data, variant, onChange }: Props) {
       slash_amount: '0',
     },
     runAsync: fetchStakeResultAsync,
-  } = useRequest(() => fetchStakingData(data.id, ''), {
-    manual: true,
-  });
+  } = useRequest(
+    () => {
+      if (data.paymentMethod?.type === 'arcblock') {
+        return fetchStakingData(data.id, '');
+      }
+      return Promise.resolve({ return_amount: '0', slash_amount: '0', total: '0' });
+    },
+    {
+      manual: true,
+    }
+  );
 
   const stakeValue = useMemo(() => {
     return formatBNStr(stakeResult?.slash_amount, data?.paymentCurrency?.decimal);

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>
         )}

package/src/locales/en.tsx

@@ -457,6 +457,7 @@ export default flat({
           now: 'Immediately ({date})',
           current_period_end: 'End of current period ({date})',
           custom: 'On a custom date',
+          timeError: 'Cancel time must be within the current period',
         },
         refund: {
           title: 'Refund',
@@ -616,5 +617,17 @@ export default flat({
     product: {
       empty: 'No Product',
     },
+    recharge: {
+      title: 'Recharge',
+      amount: 'Amount',
+      submit: 'Submit',
+      unsupported: 'Unsupported currency, please select another one',
+      receiveAddress: 'Receive Address',
+      view: 'View Subscription',
+      success: 'Recharge successfully',
+      custom: 'Custom',
+      estimatedDuration: '{duration} {unit} est.',
+      intervals: 'intervals',
+    },
   },
 });

package/src/locales/zh.tsx

@@ -447,6 +447,7 @@ export default flat({
           now: '立即取消({date})',
           current_period_end: '本周期结束后({date})',
           custom: '自定义取消日期',
+          timeError: '取消时间必须在当前周期内',
         },
         refund: {
           title: '退款',
@@ -604,5 +605,17 @@ export default flat({
     product: {
       empty: '没有订阅产品',
     },
+    recharge: {
+      title: '充值',
+      amount: '金额',
+      submit: '提交',
+      unsupported: '暂不支持该货币充值，请选择其他货币',
+      receiveAddress: '收款地址',
+      view: '查看订阅',
+      success: '充值成功',
+      estimatedDuration: '预计可用 {duration} {unit}',
+      custom: '自定义',
+      intervals: '个周期',
+    },
   },
 });