payment-kit 1.18.15 → 1.18.17

package/src/pages/customer/index.tsx

@@ -1,24 +1,27 @@
-import DID from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import Toast from '@arcblock/ux/lib/Toast';
 import {
   CustomerInvoiceList,
   formatBNStr,
   formatError,
-  getCustomerAvatar,
   getPrefix,
-  TruncatedText,
-  useMobile,
   usePaymentContext,
+  OverdueInvoicePayment,
 } from '@blocklet/payment-react';
 import type { GroupedBN, TCustomerExpanded } from '@blocklet/payment-types';
-import { ExpandMore } from '@mui/icons-material';
+import {
+  ExpandMore,
+  AccountBalanceWalletOutlined,
+  AddOutlined,
+  CreditCardOutlined,
+  AccountBalanceOutlined,
+  InfoOutlined,
+  AssignmentReturnOutlined,
+} from '@mui/icons-material';
 import {
   Avatar,
   Box,
   Button,
   FormControl,
-  Grid,
   MenuItem,
   Select,
   Skeleton,
@@ -28,16 +31,13 @@ import {
   Alert,
 } from '@mui/material';
 import type { SelectChangeEvent } from '@mui/material/Select';
-import { styled, SxProps } from '@mui/system';
+import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { flatten, isEmpty } from 'lodash';
-import { memo, useEffect, useMemo, useState } from 'react';
-import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
+import { memo, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { joinURL } from 'ufo';
 
-import EditCustomer from '../../components/customer/edit';
-import InfoRow from '../../components/info-row';
 import { useTransitionContext } from '../../components/progress-bar';
 import CurrentSubscriptions from '../../components/subscription/portal/list';
 import { useSessionContext } from '../../contexts/session';
@@ -57,33 +57,80 @@ const CurrencyCard = memo(
     label,
     data,
     currency,
-    sx,
+    type,
+    icon,
   }: {
     label: string;
     data: {
       [key: string]: string;
     };
+    icon: any;
     currency: {
       id: string;
       decimal: number;
+      payment_method_id: string;
+      symbol: string;
     };
-    sx: SxProps;
+    type: 'balance' | 'spent' | 'stake' | 'refund' | 'due';
   }) => {
+    const navigate = useNavigate();
+    const { settings } = usePaymentContext();
+    const method = settings?.paymentMethods?.find((m) => m.id === currency.payment_method_id);
+    const { t } = useLocaleContext();
     const safeData = data || {};
     const value = formatBNStr(safeData[currency?.id], currency?.decimal, 6, false);
+    const hideTypes = ['stake', 'refund', 'due'];
+    if (hideTypes.includes(type) && (!safeData[currency?.id] || safeData[currency?.id] === '0')) {
+      return null;
+    }
+
+    const handleCardClick = () => {
+      if (type === 'balance' && currency?.id) {
+        navigate(`/customer/recharge/${currency.id}`);
+      }
+    };
+
     return (
       <Box
         sx={{
-          padding: '12px 16px',
-          borderRadius: 'var(--radius-m, 8px)',
-          ...sx,
+          transition: 'all 0.2s ease-in-out',
+          position: 'relative',
+          borderRight: '1px solid var(--stroke-border-base, #EFF1F5)',
         }}>
-        <Typography variant="h4" gutterBottom>
+        <Typography
+          variant="body1"
+          gutterBottom
+          sx={{ color: 'text.secondary', display: 'flex', alignItems: 'center', gap: 1 }}>
+          {icon}
           {label}
         </Typography>
-        <Typography variant="h3" gutterBottom>
-          {value}
+        <Typography variant="h3" gutterBottom sx={{ color: 'text.primary', whiteSpace: 'nowrap' }}>
+          {value} {currency.symbol}
         </Typography>
+        {type === 'balance' && method?.type === 'arcblock' && (
+          <Tooltip title={t('customer.recharge.rechargeTooltip')} arrow placement="top">
+            <Box
+              onClick={handleCardClick}
+              sx={{
+                position: 'absolute',
+                top: 0,
+                right: '12px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: '50%',
+                padding: '4px',
+                zIndex: 1,
+                cursor: 'pointer',
+                color: 'text.secondary',
+                '&:hover': {
+                  color: 'text.link',
+                },
+              }}>
+              <AddOutlined fontSize="small" />
+            </Box>
+          </Tooltip>
+        )}
       </Box>
     );
   }
@@ -104,58 +151,19 @@ function SummaryCardSkeleton() {
   return (
     <Box className="base-card section section-summary">
       <Skeleton variant="text" width={150} height={32} sx={{ mb: 2 }} />
-      <Stack gap={1}>
-        <Stack direction="row" spacing={2}>
-          <Skeleton variant="rectangular" height={88} width="100%" />
-          <Skeleton variant="rectangular" height={88} width="100%" />
-        </Stack>
-        <Stack direction="row" spacing={2}>
-          <Skeleton variant="rectangular" height={88} width="100%" />
-          <Skeleton variant="rectangular" height={88} width="100%" />
-        </Stack>
-        <Stack direction="row">
-          <Skeleton variant="rectangular" height={88} width="calc(50% - 8px)" />
-        </Stack>
-      </Stack>
-    </Box>
-  );
-}
-
-function DetailCardSkeleton() {
-  return (
-    <Box className="base-card section section-detail">
-      <Box className="section-header" display="flex" justifyContent="space-between" alignItems="center" mb={2}>
-        <Skeleton variant="text" width={150} height={32} />
-        <Skeleton variant="text" width={80} height={20} />
-      </Box>
-      <Stack direction="row" spacing={2} mb={3}>
-        <Skeleton variant="circular" width={48} height={48} sx={{ minWidth: '48px' }} />
-        <Box width="100%">
-          <Skeleton variant="text" width="80%" />
-          <Skeleton variant="text" width="60%" />
-        </Box>
-      </Stack>
-      <Stack spacing={1}>
-        {[...Array(7)].map((_, i) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <Stack key={i} direction="column" spacing={0.5}>
-            <Skeleton variant="text" width="30%" />
-            <Skeleton variant="text" width="70%" />
-          </Stack>
-        ))}
-      </Stack>
+      <Skeleton variant="rectangular" height={88} width="100%" />
     </Box>
   );
 }
 
 export default function CustomerHome() {
   const { t } = useLocaleContext();
-  const { events, session } = useSessionContext();
+  const { events } = useSessionContext();
   const { settings } = usePaymentContext();
   const [currency, setCurrency] = useState(settings?.baseCurrency);
   const [subscriptionLoading, setSubscriptionLoading] = useState(false);
   const currencies = flatten(
-    settings.paymentMethods.map((method) =>
+    settings.paymentMethods?.map((method) =>
       (method.payment_currencies || []).map((c) => ({
         ...c,
         methodName: method.name,
@@ -171,8 +179,8 @@ export default function CustomerHome() {
     setOverdraftProtection: false,
   });
   const navigate = useNavigate();
-  const { isMobile } = useMobile('lg');
   const [subscriptionStatus, setSubscriptionStatus] = useState(false);
+  const [hasSubscriptions, setHasSubscriptions] = useState(false);
   const { startTransition } = useTransitionContext();
   const {
     data,
@@ -181,14 +189,28 @@ export default function CustomerHome() {
     loading = true,
   } = useRequest(fetchData, {
     manual: true,
+    onSuccess: async (res) => {
+      if (!hasSubscriptions) {
+        const search = new URLSearchParams();
+        const searchParams = {
+          page: 1,
+          pageSize: 5,
+          showTotalCount: true,
+          customer_id: res.id,
+        };
+        Object.entries(searchParams).forEach(([key, value]) => {
+          search.set(key, String(value));
+        });
+        const { data: subscriptions } = await api.get(`/api/subscriptions?${search.toString()}`);
+        if (subscriptions.totalCount > 0 || subscriptions.count > 0) {
+          setHasSubscriptions(true);
+        }
+      }
+    },
   });
 
   const loadingCard = loading || !data;
-
-  const countryDetail = useMemo(() => {
-    const item = defaultCountries.find((v) => v[1] === data?.address?.country);
-    return item ? parseCountry(item) : { name: '' };
-  }, [data]);
+  const [showOverduePayment, setShowOverduePayment] = useState(false);
 
   useEffect(() => {
     runAsync();
@@ -221,20 +243,6 @@ export default function CustomerHome() {
     );
   }
 
-  const onUpdateInfo = async (updates: TCustomerExpanded) => {
-    try {
-      setState({ loading: true });
-      await api.put(`/api/customers/${data?.id}`, updates).then((res) => res.data);
-      Toast.success(t('common.saved'));
-      runAsync();
-    } catch (err) {
-      console.error(err);
-      Toast.error(formatError(err));
-    } finally {
-      setState({ loading: false });
-    }
-  };
-
   const onToggleActive = (e: SelectChangeEvent) => {
     setSubscriptionLoading(true);
     setState({ onlyActive: e.target.value === 'active' });
@@ -247,58 +255,58 @@ export default function CustomerHome() {
     setCurrency(newCurrency);
   };
 
-  const SubscriptionCard = loadingCard ? (
-    <CardSkeleton height={200} />
-  ) : (
-    <Box className="base-card section section-subscription">
-      <Box className="section-header">
-        <Typography variant="h3">{t('admin.subscription.name')}</Typography>
-        {subscriptionStatus && (
-          <FormControl
-            sx={{
-              '.MuiInputBase-root': {
-                background: 'none',
-                border: 'none',
-              },
-              '.MuiOutlinedInput-notchedOutline': {
-                border: 'none',
-              },
-            }}>
-            <Select
-              value={state.onlyActive ? 'active' : ''}
-              onChange={onToggleActive}
-              displayEmpty
-              IconComponent={ExpandMore}
-              inputProps={{ 'aria-label': 'Without label' }}>
-              <MenuItem value="">All</MenuItem>
-              <MenuItem value="active">Active</MenuItem>
-            </Select>
-          </FormControl>
-        )}
-      </Box>
-      <Box className="section-body">
-        {subscriptionLoading ? (
-          <Box>{t('common.loading')}</Box>
-        ) : (
-          <CurrentSubscriptions
-            id={data?.id}
-            onlyActive={state.onlyActive}
-            changeActive={(v) => setState({ onlyActive: v })}
-            status={state.onlyActive ? 'active,trialing,past_due' : 'active,trialing,paused,past_due,canceled'}
-            style={{
-              cursor: 'pointer',
-            }}
-            onClickSubscription={(subscription) => {
-              startTransition(() => {
-                navigate(`/customer/subscription/${subscription.id}`);
-              });
-            }}
-            setStatusState={setSubscriptionStatus}
-          />
-        )}
+  const SubscriptionCard =
+    loadingCard || !hasSubscriptions ? null : (
+      <Box className="base-card section section-subscription">
+        <Box className="section-header">
+          <Typography variant="h3">{t('admin.subscription.name')}</Typography>
+          {subscriptionStatus && (
+            <FormControl
+              sx={{
+                '.MuiInputBase-root': {
+                  background: 'none',
+                  border: 'none',
+                },
+                '.MuiOutlinedInput-notchedOutline': {
+                  border: 'none',
+                },
+              }}>
+              <Select
+                value={state.onlyActive ? 'active' : ''}
+                onChange={onToggleActive}
+                displayEmpty
+                IconComponent={ExpandMore}
+                inputProps={{ 'aria-label': 'Without label' }}>
+                <MenuItem value="">All</MenuItem>
+                <MenuItem value="active">Active</MenuItem>
+              </Select>
+            </FormControl>
+          )}
+        </Box>
+        <Box className="section-body">
+          {subscriptionLoading ? (
+            <Box>{t('common.loading')}</Box>
+          ) : (
+            <CurrentSubscriptions
+              id={data?.id}
+              onlyActive={state.onlyActive}
+              changeActive={(v) => setState({ onlyActive: v })}
+              status={state.onlyActive ? 'active,trialing,past_due' : 'active,trialing,paused,past_due,canceled'}
+              style={{
+                cursor: 'pointer',
+              }}
+              onClickSubscription={(subscription) => {
+                startTransition(() => {
+                  navigate(`/customer/subscription/${subscription.id}`);
+                });
+              }}
+              setStatusState={setSubscriptionStatus}
+              setHasSubscriptions={setHasSubscriptions}
+            />
+          )}
+        </Box>
       </Box>
-    </Box>
-  );
+    );
 
   const SummaryCard = loadingCard ? (
     <SummaryCardSkeleton />
@@ -345,44 +353,66 @@ export default function CustomerHome() {
           </Box>
           <Stack
             className="section-body"
+            flexDirection="row"
             sx={{
-              display: 'grid',
-              gridTemplateColumns: '1fr 1fr',
-              gap: 2,
+              gap: 3,
               mt: 1.5,
+              flexWrap: 'wrap',
+              position: 'relative',
+              '>div': {
+                flex: '1',
+                '@media (max-width: 1100px)': {
+                  flex: '0 0 calc(50% - 12px)',
+                  maxWidth: 'calc(50% - 12px)',
+                },
+              },
+              '&::after': {
+                content: '""',
+                position: 'absolute',
+                right: 0,
+                top: 0,
+                bottom: 0,
+                width: '1px',
+                backgroundColor: 'background.paper',
+                zIndex: 1,
+              },
             }}>
             <CurrencyCard
               label={t('admin.customer.summary.balance')}
               data={data?.summary?.token || emptyObject}
               currency={currency}
-              sx={{
-                background: 'var(--tags-tag-orange-bg, #B7FEE3)',
-                color: 'var(--tags-tag-orange-text, #007C52)',
-              }}
+              type="balance"
+              icon={<AccountBalanceWalletOutlined color="success" fontSize="small" />}
             />
             <CurrencyCard
               label={t('admin.customer.summary.spent')}
               data={data?.summary?.paid || emptyObject}
               currency={currency}
-              sx={{ background: 'var(--tags-tag-green-bg, #B7FEE3)', color: 'var(--tags-tag-green-text, #007C52)' }}
+              type="spent"
+              icon={<CreditCardOutlined color="warning" fontSize="small" />}
             />
             <CurrencyCard
               label={t('admin.customer.summary.stake')}
               data={data?.summary?.stake || emptyObject}
               currency={currency}
-              sx={{ background: 'var(--tags-tag-blue-bg, #D2ECFF)', color: 'var(--tags-tag-blue-text, #0051E9)' }}
+              type="stake"
+              icon={<AccountBalanceOutlined fontSize="small" color="info" />}
             />
             <CurrencyCard
               label={t('admin.customer.summary.refund')}
               data={data?.summary?.refund || emptyObject}
               currency={currency}
-              sx={{ background: 'var(--tags-tag-purple-bg, #EFE9FF)', color: 'var(--tags-tag-purple-text, #007C52)' }}
+              type="refund"
+              icon={
+                <AssignmentReturnOutlined fontSize="small" sx={{ color: 'var(--tags-tag-purple-icon, #7c3aed)' }} />
+              }
             />
             <CurrencyCard
               label={t('admin.customer.summary.due')}
               data={data?.summary?.due || emptyObject}
               currency={currency}
-              sx={{ background: 'var(--tags-tag-red-bg, #FFE2E6)', color: 'var(--tags-tag-red-text, #E40031)' }}
+              type="due"
+              icon={<InfoOutlined fontSize="small" color="error" />}
             />
           </Stack>
         </>
@@ -413,126 +443,11 @@ export default function CustomerHome() {
         )}
       </Box>
       <Box className="section-body">
-        <CustomerInvoiceList customer_id={data?.id} type="table" include_staking />
+        <CustomerInvoiceList customer_id={data?.id} type="table" include_staking relatedSubscription />
       </Box>
     </Box>
   );
 
-  const DetailCard = loadingCard ? (
-    <DetailCardSkeleton />
-  ) : (
-    <Box className="base-card section section-detail">
-      <Box className="section-header" sx={{ mb: 2 }}>
-        <Typography variant="h3">{t('payment.customer.details')}</Typography>
-        <Button
-          variant="text"
-          sx={{ color: 'text.link' }}
-          disabled={state.editing || state.loading}
-          onClick={() => setState({ editing: true })}>
-          {t('common.edit')}
-        </Button>
-      </Box>
-      <Box display="flex" alignItems="center" gap={1} sx={{ mb: 3 }}>
-        <Avatar
-          title={data?.name}
-          src={getCustomerAvatar(data?.did, data?.updated_at ? new Date(data.updated_at).toISOString() : '', 48)}
-          variant="circular"
-          sx={{ width: 48, height: 48 }}
-        />
-        <Box sx={{ minWidth: 0, flexGrow: 1 }}>
-          <Typography variant="h4" gutterBottom>
-            {data?.name || t('common.none')}
-          </Typography>
-          <Typography variant="body2" color="text.secondary">
-            {(data?.did || session.user?.did) && (
-              <DID
-                did={data?.did || session.user?.did || ''}
-                copyable
-                showQrcode
-                chainId={livemode ? 'main' : 'beta'}
-              />
-            )}
-          </Typography>
-        </Box>
-      </Box>
-      <Stack>
-        <InfoRow
-          label={t('admin.customer.phone')}
-          value={data?.phone}
-          sizes={[1, 1]}
-          alignItems="normal"
-          direction="column"
-        />
-        <InfoRow
-          label={t('admin.customer.email')}
-          value={data?.email}
-          sizes={[1, 1]}
-          alignItems="normal"
-          direction="column"
-        />
-        <InfoRow
-          label={t('admin.customer.address.country')}
-          value={
-            data?.address?.country ? (
-              <Box display="flex" alignItems="center" flexWrap="nowrap" gap={0.5} sx={{ cursor: 'pointer' }}>
-                <FlagEmoji iso2={data.address?.country} style={{ display: 'flex', width: 24 }} />
-                <Typography>{countryDetail?.name}</Typography>
-              </Box>
-            ) : (
-              t('common.none')
-            )
-          }
-          sizes={[1, 1]}
-          alignItems="normal"
-          direction="column"
-        />
-        <InfoRow
-          label={t('admin.customer.address.state')}
-          value={data?.address?.state}
-          sizes={[1, 1]}
-          alignItems="normal"
-          direction="column"
-        />
-        <InfoRow
-          label={t('admin.customer.address.city')}
-          value={data?.address?.city && <TruncatedText text={data.address?.city} maxLength={280} useWidth />}
-          sizes={[1, 1]}
-          alignItems="normal"
-          direction="column"
-        />
-        <InfoRow
-          label={t('admin.customer.address.line1')}
-          value={data?.address?.line1 && <TruncatedText text={data.address?.line1} maxLength={280} useWidth />}
-          sizes={[1, 1]}
-          alignItems="normal"
-          direction="column"
-        />
-        <InfoRow
-          label={t('admin.customer.address.line2')}
-          value={data?.address?.line2 && <TruncatedText text={data.address?.line2} maxLength={280} useWidth />}
-          sizes={[1, 1]}
-          alignItems="normal"
-          direction="column"
-        />
-        <InfoRow
-          label={t('admin.customer.address.postal_code')}
-          value={data?.address?.postal_code}
-          sizes={[1, 1]}
-          alignItems="normal"
-          direction="column"
-        />
-      </Stack>
-      {state.editing && (
-        <EditCustomer
-          data={data}
-          loading={state.loading}
-          onSave={onUpdateInfo}
-          onCancel={() => setState({ editing: false })}
-        />
-      )}
-    </Box>
-  );
-
   const RevenueCard = loadingCard ? (
     <CardSkeleton height={200} />
   ) : (
@@ -551,31 +466,57 @@ export default function CustomerHome() {
           {data?.error}
         </Alert>
       )}
-      {isMobile ? (
-        <Root>
-          {SummaryCard}
-          {SubscriptionCard}
-          {InvoiceCard}
-          {RevenueCard}
-          {DetailCard}
-        </Root>
-      ) : (
-        <Grid container spacing={2.5}>
-          <Grid item xs={12} md={8}>
-            <Stack direction="column" spacing={2.5}>
-              {SubscriptionCard}
-              {InvoiceCard}
-              {RevenueCard}
-            </Stack>
-          </Grid>
-          <Grid item xs={12} md={4}>
-            <Stack direction="column" spacing={3}>
-              {SummaryCard}
-              {DetailCard}
-            </Stack>
-          </Grid>
-        </Grid>
+      {isEmpty(data?.summary?.due) === false && (
+        <Alert
+          severity="error"
+          sx={{
+            mb: 2,
+            '.MuiAlert-action': {
+              alignItems: 'center',
+            },
+          }}
+          action={
+            <Button
+              color="inherit"
+              size="small"
+              variant="outlined"
+              onClick={() => setShowOverduePayment(true)}
+              sx={{ whiteSpace: 'nowrap' }}>
+              {t('customer.pastDue.payNow')}
+            </Button>
+          }>
+          {t('customer.pastDue.alert')}
+        </Alert>
+      )}
+      {showOverduePayment && data && (
+        <OverdueInvoicePayment
+          customerId={data.id}
+          onPaid={() => {
+            setShowOverduePayment(false);
+            runAsync();
+          }}
+          successToast={false}
+          detailLinkOptions={{
+            enabled: true,
+            onClick: () => {
+              setShowOverduePayment(false);
+              navigate('/customer/invoice/past-due');
+            },
+          }}
+          dialogProps={{
+            open: showOverduePayment,
+            onClose: () => setShowOverduePayment(false),
+            title: t('customer.pastDue.title'),
+          }}
+        />
       )}
+      <Root>
+        {SummaryCard}
+        {SubscriptionCard}
+        {InvoiceCard}
+        {RevenueCard}
+        {/* {DetailCard} */}
+      </Root>
     </Content>
   );
 }
@@ -603,6 +544,7 @@ const Content = styled(Stack)`
 `;
 
 const Root = styled(Stack)`
+  gap: 24px;
   @media (max-width: ${({ theme }) => theme.breakpoints.values.xl}px) {
     padding: 0px;
     gap: 0;