payment-kit 1.18.12 → 1.18.13

package/src/pages/customer/index.tsx

@@ -14,7 +14,6 @@ import {
 import type { GroupedBN, TCustomerExpanded } from '@blocklet/payment-types';
 import { ExpandMore } from '@mui/icons-material';
 import {
-  Alert,
   Avatar,
   Box,
   Button,
@@ -22,9 +21,11 @@ import {
   Grid,
   MenuItem,
   Select,
+  Skeleton,
   Stack,
   Tooltip,
   Typography,
+  Alert,
 } from '@mui/material';
 import type { SelectChangeEvent } from '@mui/material/Select';
 import { styled, SxProps } from '@mui/system';
@@ -37,7 +38,7 @@ import { joinURL } from 'ufo';
 
 import EditCustomer from '../../components/customer/edit';
 import InfoRow from '../../components/info-row';
-import ProgressBar, { useTransitionContext } from '../../components/progress-bar';
+import { useTransitionContext } from '../../components/progress-bar';
 import CurrentSubscriptions from '../../components/subscription/portal/list';
 import { useSessionContext } from '../../contexts/session';
 import api from '../../libs/api';
@@ -46,7 +47,7 @@ import CustomerRevenueList from '../../components/payouts/portal/list';
 type Result = TCustomerExpanded & { summary: { [key: string]: GroupedBN }; error?: string };
 
 const fetchData = (): Promise<Result> => {
-  return api.get('/api/customers/me').then((res) => res.data);
+  return api.get('/api/customers/me?skipError=true&create=true').then((res) => res.data);
 };
 
 const emptyObject = {};
@@ -68,7 +69,8 @@ const CurrencyCard = memo(
     };
     sx: SxProps;
   }) => {
-    const value = formatBNStr(data?.[currency?.id], currency.decimal, 6, false);
+    const safeData = data || {};
+    const value = formatBNStr(safeData[currency?.id], currency?.decimal, 6, false);
     return (
       <Box
         sx={{
@@ -87,11 +89,68 @@ const CurrencyCard = memo(
   }
 );
 
-// Remove the assignment of defaultProps
+const CardSkeleton = memo(({ height = 100 }: { height: number }) => {
+  return (
+    <Box className="base-card section">
+      <Box className="section-header" display="flex" justifyContent="space-between" alignItems="center" mb={2}>
+        <Skeleton variant="text" width={150} height={32} />
+      </Box>
+      <Skeleton variant="rectangular" height={height} />
+    </Box>
+  );
+});
+
+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>
+    </Box>
+  );
+}
 
 export default function CustomerHome() {
   const { t } = useLocaleContext();
-  const { events } = useSessionContext();
+  const { events, session } = useSessionContext();
   const { settings } = usePaymentContext();
   const [currency, setCurrency] = useState(settings?.baseCurrency);
   const [subscriptionLoading, setSubscriptionLoading] = useState(false);
@@ -113,11 +172,19 @@ export default function CustomerHome() {
   });
   const navigate = useNavigate();
   const { isMobile } = useMobile('lg');
-  const { isPending, startTransition } = useTransitionContext();
-  const { data, error, loading, runAsync } = useRequest(fetchData, {
+  const [subscriptionStatus, setSubscriptionStatus] = useState(false);
+  const { startTransition } = useTransitionContext();
+  const {
+    data,
+    error,
+    runAsync,
+    loading = true,
+  } = useRequest(fetchData, {
     manual: true,
   });
 
+  const loadingCard = loading || !data;
+
   const countryDetail = useMemo(() => {
     const item = defaultCountries.find((v) => v[1] === data?.address?.country);
     return item ? parseCountry(item) : { name: '' };
@@ -131,39 +198,33 @@ export default function CustomerHome() {
   }, []);
 
   useEffect(() => {
-    if (data && data.livemode !== livemode) {
+    if (data && !data.error && data.livemode !== livemode) {
       setLivemode(data.livemode);
     }
   }, [data]);
 
-  if (loading) {
-    return <ProgressBar pending />;
-  }
-
   if (error) {
     return (
-      <Alert sx={{ mt: 3 }} severity="error">
-        {formatError(error)}
-      </Alert>
-    );
-  }
-
-  if (!data) {
-    return null;
-  }
-
-  if (data?.error) {
-    return (
-      <Alert sx={{ mt: 3 }} severity="info">
-        {t('payment.customer.empty')}
-      </Alert>
+      <Box
+        sx={{
+          backgroundColor: 'error.light',
+          color: 'error.dark',
+          p: 1,
+          mb: 2,
+          borderRadius: 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+        <Typography variant="body2">{formatError(error)}</Typography>
+      </Box>
     );
   }
 
   const onUpdateInfo = async (updates: TCustomerExpanded) => {
     try {
       setState({ loading: true });
-      await api.put(`/api/customers/${data.id}`, updates).then((res) => res.data);
+      await api.put(`/api/customers/${data?.id}`, updates).then((res) => res.data);
       Toast.success(t('common.saved'));
       runAsync();
     } catch (err) {
@@ -181,43 +242,46 @@ export default function CustomerHome() {
       setSubscriptionLoading(false);
     }, 300);
   };
-
   const handleCurrencyChange = (e: SelectChangeEvent) => {
     const newCurrency = currencies.find((c) => c.id === e.target.value) || settings?.baseCurrency;
     setCurrency(newCurrency);
   };
 
-  const SubscriptionCard = (
+  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>
-        <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>
+        {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}
+            id={data?.id}
             onlyActive={state.onlyActive}
             changeActive={(v) => setState({ onlyActive: v })}
             status={state.onlyActive ? 'active,trialing,past_due' : 'active,trialing,paused,past_due,canceled'}
@@ -229,99 +293,110 @@ export default function CustomerHome() {
                 navigate(`/customer/subscription/${subscription.id}`);
               });
             }}
+            setStatusState={setSubscriptionStatus}
           />
         )}
       </Box>
     </Box>
   );
-  const SummaryCard = (
+
+  const SummaryCard = loadingCard ? (
+    <SummaryCardSkeleton />
+  ) : (
     <Box className="base-card section section-summary">
-      <Box className="section-header">
-        <Typography variant="h3">{t('admin.customer.summary.stats')}</Typography>
-        <FormControl
-          sx={{
-            '.MuiInputBase-root': {
-              background: 'none',
-              border: 'none',
-            },
-            '.MuiOutlinedInput-notchedOutline': {
-              border: 'none',
-            },
-          }}>
-          <Select
-            value={currency?.id}
-            onChange={handleCurrencyChange}
-            displayEmpty
-            IconComponent={ExpandMore}
-            inputProps={{ 'aria-label': 'Without label' }}>
-            {currencies.map((c) => (
-              <MenuItem key={c.id} value={c.id}>
-                <Box alignItems="center" display="flex" gap={1}>
-                  <Avatar src={c?.logo} alt={c?.symbol} sx={{ width: 18, height: 18 }} />
-                  <Typography
-                    variant="h5"
-                    component="div"
-                    sx={{ fontSize: '16px', color: 'text.primary', fontWeight: '500' }}>
-                    {c?.symbol}
-                  </Typography>
-                  <Typography sx={{ fontSize: 12 }} color="text.lighter">
-                    {c?.methodName}
-                  </Typography>
-                </Box>
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      </Box>
-      <Stack
-        className="section-body"
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: '1fr 1fr',
-          gap: 2,
-          mt: 1.5,
-        }}>
-        <CurrencyCard
-          label={t('admin.customer.summary.balance')}
-          data={data.summary.token || {}}
-          currency={currency}
-          sx={{
-            background: 'var(--tags-tag-orange-bg, #B7FEE3)',
-            color: 'var(--tags-tag-orange-text, #007C52)',
-          }}
-        />
-        <CurrencyCard
-          label={t('admin.customer.summary.spent')}
-          data={data.summary.paid || {}}
-          currency={currency}
-          sx={{ background: 'var(--tags-tag-green-bg, #B7FEE3)', color: 'var(--tags-tag-green-text, #007C52)' }}
-        />
-        <CurrencyCard
-          label={t('admin.customer.summary.stake')}
-          data={data.summary.stake || {}}
-          currency={currency}
-          sx={{ background: 'var(--tags-tag-blue-bg, #D2ECFF)', color: 'var(--tags-tag-blue-text, #0051E9)' }}
-        />
-        <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)' }}
-        />
-        <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)' }}
-        />
-      </Stack>
+      {data?.summary && (
+        <>
+          <Box className="section-header">
+            <Typography variant="h3">{t('admin.customer.summary.stats')}</Typography>
+            <FormControl
+              sx={{
+                '.MuiInputBase-root': {
+                  background: 'none',
+                  border: 'none',
+                },
+                '.MuiOutlinedInput-notchedOutline': {
+                  border: 'none',
+                },
+              }}>
+              <Select
+                value={currency?.id}
+                onChange={handleCurrencyChange}
+                displayEmpty
+                IconComponent={ExpandMore}
+                inputProps={{ 'aria-label': 'Without label' }}>
+                {currencies.map((c) => (
+                  <MenuItem key={c.id} value={c.id}>
+                    <Box alignItems="center" display="flex" gap={1}>
+                      <Avatar src={c?.logo} alt={c?.symbol} sx={{ width: 18, height: 18 }} />
+                      <Typography
+                        variant="h5"
+                        component="div"
+                        sx={{ fontSize: '16px', color: 'text.primary', fontWeight: '500' }}>
+                        {c?.symbol}
+                      </Typography>
+                      <Typography sx={{ fontSize: 12 }} color="text.lighter">
+                        {c?.methodName}
+                      </Typography>
+                    </Box>
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Box>
+          <Stack
+            className="section-body"
+            sx={{
+              display: 'grid',
+              gridTemplateColumns: '1fr 1fr',
+              gap: 2,
+              mt: 1.5,
+            }}>
+            <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)',
+              }}
+            />
+            <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)' }}
+            />
+            <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)' }}
+            />
+            <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)' }}
+            />
+            <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)' }}
+            />
+          </Stack>
+        </>
+      )}
     </Box>
   );
-  const InvoiceCard = (
-    <Box className="base-card section section-invoice">
+
+  const InvoiceCard = loadingCard ? (
+    <CardSkeleton height={300} />
+  ) : (
+    <Box className="base-card section section-invoices">
       <Box className="section-header">
         <Typography variant="h3">{t('customer.invoiceHistory')}</Typography>
-        {isEmpty(data.summary.due) === false && (
+        {isEmpty(data?.summary?.due) === false && (
           <Tooltip title={t('payment.customer.pastDue.warning')}>
             <Button
               variant="text"
@@ -338,12 +413,14 @@ 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 />
       </Box>
     </Box>
   );
 
-  const DetailCard = (
+  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>
@@ -355,33 +432,40 @@ export default function CustomerHome() {
           {t('common.edit')}
         </Button>
       </Box>
-      <Box display="flex" alignItems="center" gap={1} flexWrap="wrap" sx={{ mb: 3 }}>
+      <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>
+        <Box sx={{ minWidth: 0, flexGrow: 1 }}>
           <Typography variant="h4" gutterBottom>
-            {data.name}
+            {data?.name || t('common.none')}
           </Typography>
           <Typography variant="body2" color="text.secondary">
-            <DID did={data.did} copyable showQrcode chainId={livemode ? 'main' : 'beta'} />
+            {(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}
+          value={data?.phone}
           sizes={[1, 1]}
           alignItems="normal"
           direction="column"
         />
         <InfoRow
           label={t('admin.customer.email')}
-          value={data.email}
+          value={data?.email}
           sizes={[1, 1]}
           alignItems="normal"
           direction="column"
@@ -389,13 +473,13 @@ export default function CustomerHome() {
         <InfoRow
           label={t('admin.customer.address.country')}
           value={
-            data.address?.country ? (
+            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]}
@@ -404,36 +488,35 @@ export default function CustomerHome() {
         />
         <InfoRow
           label={t('admin.customer.address.state')}
-          value={data.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 />}
-          // value={data.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 />}
+          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 />}
+          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}
+          value={data?.address?.postal_code}
           sizes={[1, 1]}
           alignItems="normal"
           direction="column"
@@ -450,7 +533,9 @@ export default function CustomerHome() {
     </Box>
   );
 
-  const RevenueCard = (
+  const RevenueCard = loadingCard ? (
+    <CardSkeleton height={200} />
+  ) : (
     <Box className="base-card section section-revenue">
       <Box className="section-header">
         <Typography variant="h3">{t('customer.payout.title')}</Typography>
@@ -461,7 +546,11 @@ export default function CustomerHome() {
 
   return (
     <Content>
-      <ProgressBar pending={isPending} />
+      {data?.error && (
+        <Alert severity="error" sx={{ mb: 2 }}>
+          {data?.error}
+        </Alert>
+      )}
       {isMobile ? (
         <Root>
           {SummaryCard}
@@ -492,7 +581,6 @@ export default function CustomerHome() {
 }
 
 const Content = styled(Stack)`
-  padding: 20px;
   height: 100%;
   .section-header {
     display: flex;
@@ -521,9 +609,14 @@ const Root = styled(Stack)`
     .base-card {
       border: none;
       box-shadow: none;
+      padding-left: 0;
+      padding-right: 0;
     }
     .section-header h3 {
       font-size: 18px;
     }
+    .section-summary {
+      padding-top: 0;
+    }
   }
 `;

package/src/pages/customer/invoice/detail.tsx

@@ -125,7 +125,7 @@ export default function CustomerInvoiceDetail() {
   const hidePayButton = data.billing_reason === 'overdraft_protection';
   const paymentDetails = data.paymentIntent?.payment_details || data.metadata?.payment_details;
   return (
-    <InvoiceDetailRoot direction="column" spacing={3} sx={{ my: 2 }}>
+    <InvoiceDetailRoot direction="column" spacing={3}>
       <Stack direction="row" justifyContent="space-between">
         <Stack
           direction="row"