payment-kit 1.14.21 → 1.14.23

package/src/pages/admin/customers/customers/detail.tsx

@@ -4,17 +4,15 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import { api, formatBNStr, formatError, formatTime, usePaymentContext } from '@blocklet/payment-react';
 import type { GroupedBN, TCustomerExpanded, TPaymentMethodExpanded } from '@blocklet/payment-types';
-import { ArrowBackOutlined, Edit } from '@mui/icons-material';
-import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { ArrowBackOutlined } from '@mui/icons-material';
+import { Alert, Avatar, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
-import { isEmpty } from 'lodash';
-import { FlagEmoji } from 'react-international-phone';
-import { useNavigate } from 'react-router-dom';
+import { defaultCountries, FlagEmoji, parseCountry } from 'react-international-phone';
 
+import { useMemo } from 'react';
 import BalanceList from '../../../../components/balance-list';
 import Copyable from '../../../../components/copyable';
-import CustomerActions from '../../../../components/customer/actions';
 import EditCustomer from '../../../../components/customer/edit';
 import EventList from '../../../../components/event/list';
 import InfoMetric from '../../../../components/info-metric';
@@ -27,6 +25,7 @@ import RefundList from '../../../../components/refund/list';
 import SectionHeader from '../../../../components/section/header';
 import SubscriptionList from '../../../../components/subscription/list';
 import { goBackOrFallback } from '../../../../libs/util';
+import MetadataList from '../../../../components/metadata/list';
 
 const fetchData = async (
   id: string
@@ -42,6 +41,9 @@ const fetchData = async (
   };
 };
 
+const InfoDirection = 'column';
+const InfoAlignItems = 'flex-start';
+
 function getTokenBalances(customer: TCustomerExpanded, paymentMethods: TPaymentMethodExpanded[]) {
   const tokens: { currency: string; balance: string }[] = [];
   // @ts-ignore
@@ -74,7 +76,6 @@ function getTokenBalances(customer: TCustomerExpanded, paymentMethods: TPaymentM
 
 export default function CustomerDetail(props: { id: string }) {
   const { t } = useLocaleContext();
-  const navigate = useNavigate();
   const { settings } = usePaymentContext();
   const [state, setState] = useSetState({
     adding: {
@@ -91,7 +92,10 @@ export default function CustomerDetail(props: { id: string }) {
   });
 
   const { loading, error, data, runAsync } = useRequest(() => fetchData(props.id));
-
+  const countryDetail = useMemo(() => {
+    const item = defaultCountries.find((v) => v[1] === data?.customer?.address?.country);
+    return item ? parseCountry(item) : { name: '' };
+  }, [data]);
   if (error) {
     return <Alert severity="error">{error.message}</Alert>;
   }
@@ -128,15 +132,18 @@ export default function CustomerDetail(props: { id: string }) {
     }
   };
 
-  const onChange = (action: string) => {
-    if (action === 'remove') {
-      navigate('/admin/customers');
-    } else {
-      runAsync();
-    }
-  };
+  // const onChange = (action: string) => {
+  //   if (action === 'remove') {
+  //     navigate('/admin/customers');
+  //   } else {
+  //     runAsync();
+  //   }
+  // };
 
   const tokenBalances = getTokenBalances(data.customer, settings.paymentMethods);
+  const handleEditMetadata = () => {
+    setState((prev) => ({ editing: { ...prev.editing, metadata: true } }));
+  };
 
   return (
     <Root direction="column" spacing={4} sx={{ mb: 4 }}>
@@ -152,181 +159,357 @@ export default function CustomerDetail(props: { id: string }) {
               {t('admin.customers')}
             </Typography>
           </Stack>
-          <Copyable text={props.id} style={{ marginLeft: 4 }} />
+          <Button
+            variant="outlined"
+            color="primary"
+            size="small"
+            disabled={state.editing.customer}
+            onClick={() => setState((prev) => ({ editing: { ...prev.editing, customer: true } }))}>
+            {t('common.edit')}
+          </Button>
+          {/* <CustomerActions data={data.customer} onChange={onChange} variant="normal" /> */}
         </Stack>
-        <Box mt={2}>
+        <Box
+          mt={4}
+          mb={3}
+          sx={{
+            display: 'flex',
+            gap: {
+              xs: 2,
+              sm: 2,
+              md: 5,
+            },
+            flexWrap: 'wrap',
+            flexDirection: {
+              xs: 'column',
+              sm: 'column',
+              md: 'row',
+            },
+            alignItems: {
+              xs: 'flex-start',
+              sm: 'flex-start',
+              md: 'center',
+            },
+          }}>
           <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Typography variant="h5" sx={{ fontWeight: 600 }}>
-              {data.customer.name}
-            </Typography>
-            <CustomerActions data={data.customer} onChange={onChange} variant="normal" />
+            <Stack direction="row" alignItems="center" spacing={1}>
+              <Avatar
+                title={data.customer.name}
+                src={`/.well-known/service/user/avatar/${data?.customer?.did}`}
+                variant="square"
+                sx={{ width: 52, height: 52, borderRadius: 'var(--radius-s, 4px)' }}
+              />
+              <Typography variant="h2" sx={{ fontWeight: 600 }}>
+                {data.customer.name}
+              </Typography>
+            </Stack>
           </Stack>
           <Stack
             className="section-body"
-            direction="row"
-            spacing={3}
             justifyContent="flex-start"
             flexWrap="wrap"
-            sx={{ pt: 2, mt: 2, borderTop: '1px solid #eee' }}>
-            <InfoMetric label={t('common.createdAt')} value={formatTime(data.customer.created_at)} divider />
-            <InfoMetric label={t('common.updatedAt')} value={formatTime(data.customer.updated_at)} divider />
-            <InfoMetric label={t('admin.customer.spent')} value={<BalanceList data={data.summary?.paid} />} divider />
-            <InfoMetric label={t('admin.customer.stake')} value={<BalanceList data={data.summary?.stake} />} divider />
-            <InfoMetric label={t('admin.customer.token')} value={<BalanceList data={data.summary?.token} />} divider />
-            <InfoMetric label={t('admin.customer.due')} value={<BalanceList data={data.summary?.due} />} divider />
-            <InfoMetric
-              label={t('admin.customer.refund')}
-              value={<BalanceList data={data.summary?.refunded} />}
-              divider
-            />
-            {tokenBalances.map((x) => (
-              <InfoMetric
-                key={x.currency}
-                label={t('admin.customer.balance', { currency: x.currency })}
-                value={x.balance}
-                divider
-              />
-            ))}
+            sx={{
+              'hr.MuiDivider-root:last-child': {
+                display: 'none',
+              },
+              flexDirection: {
+                xs: 'column',
+                sm: 'column',
+                md: 'row',
+              },
+              alignItems: {
+                xs: 'flex-start',
+                sm: 'flex-start',
+                md: 'center',
+              },
+              gap: {
+                xs: 1,
+                sm: 1,
+                md: 3,
+              },
+            }}>
+            <InfoMetric label={t('admin.customer.email')} value={data.customer.email} divider />
+            <InfoMetric label={t('admin.customer.phone')} value={data.customer.phone} divider />
+            <InfoMetric label={t('common.id')} value={<Copyable text={props.id} style={{ marginLeft: 4 }} />} divider />
           </Stack>
         </Box>
+        <Divider />
       </Box>
+      <Stack
+        sx={{
+          flexDirection: {
+            xs: 'column',
+            lg: 'row',
+          },
+          gap: 4,
+          '.payment-link-column-1': {
+            minWidth: {
+              xs: '100%',
+              lg: '600px',
+            },
+          },
+          '.payment-link-column-2': {
+            width: {
+              xs: '100%',
+              md: '100%',
+              lg: '580px',
+            },
+            maxWidth: {
+              xs: '100%',
+              md: '33%',
+            },
+          },
+        }}>
+        <Box flex={1} className="payment-link-column-1" sx={{ gap: 4, display: 'flex', flexDirection: 'column' }}>
+          <Box className="section">
+            <SectionHeader title={t('admin.details')} />
+            <Stack>
+              <InfoRow
+                label={t('common.did')}
+                value={<DidAddress did={data.customer.did} showQrcode />}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              <Box
+                sx={{
+                  display: 'grid',
+                  gridTemplateColumns: {
+                    xs: 'repeat(1, 1fr)',
+                    sm: 'repeat(1, 1fr)',
+                    md: 'repeat(2, 1fr)',
+                    lg: 'repeat(3, 1fr)',
+                  },
+                }}>
+                <InfoRow
+                  label={t('admin.customer.name')}
+                  value={data.customer.name}
+                  direction={InfoDirection}
+                  alignItems={InfoAlignItems}
+                />
+                <InfoRow
+                  label={t('admin.customer.phone')}
+                  value={data.customer.phone}
+                  direction={InfoDirection}
+                  alignItems={InfoAlignItems}
+                />
+                <InfoRow
+                  label={t('admin.customer.email')}
+                  value={data.customer.email}
+                  direction={InfoDirection}
+                  alignItems={InfoAlignItems}
+                />
+                <InfoRow
+                  label={t('admin.customer.invoicePrefix')}
+                  value={data.customer.invoice_prefix}
+                  direction={InfoDirection}
+                  alignItems={InfoAlignItems}
+                />
+                <InfoRow
+                  label={t('common.createdAt')}
+                  value={formatTime(data.customer.created_at)}
+                  direction={InfoDirection}
+                  alignItems={InfoAlignItems}
+                />
+                <InfoRow
+                  label={t('common.updatedAt')}
+                  value={formatTime(data.customer.updated_at)}
+                  direction={InfoDirection}
+                  alignItems={InfoAlignItems}
+                />
 
-      <Box className="section">
-        <SectionHeader title={t('admin.details')}>
-          <Button
-            variant="outlined"
-            color="inherit"
-            size="small"
-            disabled={state.editing.customer}
-            onClick={() => setState((prev) => ({ editing: { ...prev.editing, customer: true } }))}>
-            <Edit fontSize="small" sx={{ mr: 0.5 }} />
-            {t('common.edit')}
-          </Button>
-        </SectionHeader>
-        <Stack>
-          <InfoRow label={t('common.did')} value={<DidAddress did={data.customer.did} showQrcode />} />
-          <InfoRow label={t('admin.customer.name')} value={data.customer.name} />
-          <InfoRow label={t('admin.customer.phone')} value={data.customer.phone} />
-          <InfoRow label={t('admin.customer.email')} value={data.customer.email} />
-          <InfoRow label={t('admin.customer.invoicePrefix')} value={data.customer.invoice_prefix} />
-          <InfoRow label={t('common.createdAt')} value={formatTime(data.customer.created_at)} />
-          <InfoRow label={t('common.updatedAt')} value={formatTime(data.customer.updated_at)} />
-          <InfoRow
-            alignItems="flex-start"
-            label={t('admin.customer.address.label')}
-            value={
-              <Stack direction="column">
+                {state.editing.customer && (
+                  <EditCustomer
+                    data={data.customer}
+                    loading={state.loading.customer}
+                    onSave={onUpdateInfo}
+                    onCancel={() => setState((prev) => ({ editing: { ...prev.editing, customer: false } }))}
+                  />
+                )}
+              </Box>
+            </Stack>
+          </Box>
+          <Divider />
+          <Box className="section">
+            <SectionHeader title={t('admin.subscriptions')} mb={0} />
+            <Box className="section-body">
+              <SubscriptionList
+                features={{ customer: false, toolbar: false }}
+                customer_id={data.customer.id}
+                status={['active', 'trialing', 'paused', 'past_due', 'canceled'].join(',')}
+              />
+            </Box>
+          </Box>
+          <Divider />
+          <Box className="section">
+            <SectionHeader title={t('admin.invoices')} mb={0} />
+            <Box className="section-body">
+              <InvoiceList
+                features={{ customer: false, toolbar: false }}
+                customer_id={data.customer.id}
+                status={['open', 'paid', 'uncollectible', 'draft', 'void'].join(',')}
+              />
+            </Box>
+          </Box>
+          <Divider />
+          <Box className="section">
+            <SectionHeader title={t('admin.payments')} mb={0} />
+            <Box className="section-body">
+              <PaymentList features={{ customer: false, toolbar: false }} customer_id={data.customer.id} />
+            </Box>
+          </Box>
+          <Divider />
+          <Box className="section">
+            <SectionHeader title={t('admin.payouts')} mb={0} />
+            <Box className="section-body">
+              <PayoutList
+                features={{ customer: false, toolbar: false }}
+                customer_id={data.customer.id}
+                status={['paid', 'pending', 'failed', 'canceled'].join(',')}
+              />
+            </Box>
+          </Box>
+          <Divider />
+          <Box className="section">
+            <SectionHeader title={t('admin.refunds')} mb={0} />
+            <Box className="section-body">
+              <RefundList
+                features={{ customer: false, toolbar: false }}
+                customer_id={data.customer.id}
+                status={['succeeded', 'canceled', 'failed', 'requires_action', 'pending'].join(',')}
+              />
+            </Box>
+          </Box>
+          <Divider />
+          <Box className="section">
+            <SectionHeader title={t('admin.events')} />
+            <Box className="section-body">
+              <EventList features={{ toolbar: false }} object_id={data.customer.id} />
+            </Box>
+          </Box>
+        </Box>
+        <Box className="payment-link-column-2" sx={{ gap: 3, display: 'flex', flexDirection: 'column' }}>
+          <Box className="section">
+            <SectionHeader title={t('admin.metrics')} />
+            <Box className="section-body">
+              <InfoRow
+                label={t('admin.customer.spent')}
+                value={<BalanceList data={data.summary?.paid} showLogo />}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              <InfoRow
+                label={t('admin.customer.stake')}
+                value={<BalanceList data={data.summary?.stake} showLogo />}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              <InfoRow
+                label={t('admin.customer.token')}
+                value={<BalanceList data={data.summary?.token} showLogo />}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              <InfoRow
+                label={t('admin.customer.due')}
+                value={<BalanceList data={data.summary?.due} showLogo />}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              <InfoRow
+                label={t('admin.customer.refund')}
+                value={<BalanceList data={data.summary?.refunded} showLogo />}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              {tokenBalances.map((x) => (
                 <InfoRow
-                  label={t('admin.customer.address.country')}
-                  value={
-                    data.customer.address?.country ? (
+                  key={x.currency}
+                  label={t('admin.customer.balance', { currency: x.currency })}
+                  value={x.balance}
+                  direction={InfoDirection}
+                  alignItems={InfoAlignItems}
+                />
+              ))}
+            </Box>
+          </Box>
+          <Divider />
+          <Box className="section">
+            <SectionHeader title={t('admin.customer.address.label')} />
+            <Box className="section-body">
+              <InfoRow
+                label={t('admin.customer.address.country')}
+                value={
+                  data.customer.address?.country ? (
+                    <Box display="flex" alignItems="center" flexWrap="nowrap" gap={0.5} sx={{ cursor: 'pointer' }}>
                       <FlagEmoji iso2={data.customer.address?.country} style={{ display: 'flex', width: 24 }} />
-                    ) : (
-                      ''
-                    )
-                  }
+                      <Typography>{countryDetail?.name}</Typography>
+                    </Box>
+                  ) : (
+                    ''
+                  )
+                }
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              <InfoRow
+                label={t('admin.customer.address.state')}
+                value={data.customer.address?.state}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              <InfoRow
+                label={t('admin.customer.address.city')}
+                value={data.customer.address?.city}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              <InfoRow
+                label={t('admin.customer.address.line1')}
+                value={data.customer.address?.line1}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              <InfoRow
+                label={t('admin.customer.address.line2')}
+                value={data.customer.address?.line2}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              <InfoRow
+                label={t('admin.customer.address.postal_code')}
+                value={data.customer.address?.postal_code}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+            </Box>
+          </Box>
+          <Divider />
+          <Box className="section">
+            <SectionHeader title={t('common.metadata.label')}>
+              <Button
+                variant="text"
+                color="inherit"
+                size="small"
+                sx={{ color: 'text.link' }}
+                disabled={state.editing.metadata}
+                onClick={handleEditMetadata}>
+                {t('common.edit')}
+              </Button>
+            </SectionHeader>
+            <Box className="section-body">
+              <MetadataList data={data.customer.metadata} handleEditMetadata={handleEditMetadata} />
+              {state.editing.metadata && (
+                <MetadataEditor
+                  data={data.customer}
+                  loading={state.loading.metadata}
+                  onSave={onUpdateMetadata}
+                  onCancel={() => setState((prev) => ({ editing: { ...prev.editing, metadata: false } }))}
                 />
-                <InfoRow label={t('admin.customer.address.state')} value={data.customer.address?.state} />
-                <InfoRow label={t('admin.customer.address.city')} value={data.customer.address?.city} />
-                <InfoRow label={t('admin.customer.address.line1')} value={data.customer.address?.line1} />
-                <InfoRow label={t('admin.customer.address.line2')} value={data.customer.address?.line2} />
-                <InfoRow label={t('admin.customer.address.postal_code')} value={data.customer.address?.postal_code} />
-              </Stack>
-            }
-          />
-          {state.editing.customer && (
-            <EditCustomer
-              data={data.customer}
-              loading={state.loading.customer}
-              onSave={onUpdateInfo}
-              onCancel={() => setState((prev) => ({ editing: { ...prev.editing, customer: false } }))}
-            />
-          )}
-        </Stack>
-      </Box>
-      <Box className="section">
-        <SectionHeader title={t('admin.subscriptions')} mb={0} />
-        <Box className="section-body">
-          <SubscriptionList
-            features={{ customer: false, toolbar: false }}
-            customer_id={data.customer.id}
-            status={['active', 'trialing', 'paused', 'past_due', 'canceled'].join(',')}
-          />
-        </Box>
-      </Box>
-      <Box className="section">
-        <SectionHeader title={t('admin.invoices')} mb={0} />
-        <Box className="section-body">
-          <InvoiceList
-            features={{ customer: false, toolbar: false }}
-            customer_id={data.customer.id}
-            status={['open', 'paid', 'uncollectible', 'draft', 'void'].join(',')}
-          />
-        </Box>
-      </Box>
-      <Box className="section">
-        <SectionHeader title={t('admin.payments')} mb={0} />
-        <Box className="section-body">
-          <PaymentList features={{ customer: false, toolbar: false }} customer_id={data.customer.id} />
-        </Box>
-      </Box>
-      <Box className="section">
-        <SectionHeader title={t('admin.payouts')} mb={0} />
-        <Box className="section-body">
-          <PayoutList
-            features={{ customer: false, toolbar: false }}
-            customer_id={data.customer.id}
-            status={['paid', 'pending', 'failed', 'canceled'].join(',')}
-          />
-        </Box>
-      </Box>
-      <Box className="section">
-        <SectionHeader title={t('admin.refunds')} mb={0} />
-        <Box className="section-body">
-          <RefundList
-            features={{ customer: false, toolbar: false }}
-            customer_id={data.customer.id}
-            status={['succeeded', 'canceled', 'failed', 'requires_action', 'pending'].join(',')}
-          />
+              )}
+            </Box>
+          </Box>
         </Box>
-      </Box>
-      <Box className="section">
-        <SectionHeader title={t('common.metadata.label')}>
-          <Button
-            variant="outlined"
-            color="inherit"
-            size="small"
-            disabled={state.editing.metadata}
-            onClick={() => setState((prev) => ({ editing: { ...prev.editing, metadata: true } }))}>
-            <Edit fontSize="small" sx={{ mr: 0.5 }} />
-            {t('common.metadata.edit')}
-          </Button>
-        </SectionHeader>
-        <Box className="section-body">
-          {!state.editing.metadata &&
-            (isEmpty(data.customer.metadata) ? (
-              <Typography color="text.secondary">{t('common.metadata.empty')}</Typography>
-            ) : (
-              Object.keys(data.customer.metadata || {}).map((key) => (
-                <InfoRow key={key} label={key} value={data.customer.metadata[key]} />
-              ))
-            ))}
-          {state.editing.metadata && (
-            <MetadataEditor
-              data={data.customer}
-              loading={state.loading.metadata}
-              onSave={onUpdateMetadata}
-              onCancel={() => setState((prev) => ({ editing: { ...prev.editing, metadata: false } }))}
-            />
-          )}
-        </Box>
-      </Box>
-      <Box className="section">
-        <SectionHeader title={t('admin.events')} />
-        <Box className="section-body">
-          <EventList features={{ toolbar: false }} object_id={data.customer.id} />
-        </Box>
-      </Box>
+      </Stack>
     </Root>
   );
 }

package/src/pages/admin/customers/customers/index.tsx

@@ -2,14 +2,12 @@
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import DidAddress from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { api, formatTime } from '@blocklet/payment-react';
+import { api, formatTime, Table } from '@blocklet/payment-react';
 import type { TCustomer } from '@blocklet/payment-types';
 import { Avatar, CircularProgress, Stack, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import Table from '../../../../components/table';
-
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TCustomer[]; count: number }> => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
@@ -60,8 +58,12 @@ export default function CustomersList() {
           const item = data.list[index] as TCustomer;
           return (
             <Link to={`/admin/customers/${item.id}`}>
-              <Stack direction="row" alignItems="center" spacing={0.5}>
-                <Avatar src={`/.well-known/service/user/avatar/${item.did}?imageFilter=resize&w=48&h=48`} />
+              <Stack direction="row" alignItems="center" spacing={1}>
+                <Avatar
+                  src={`/.well-known/service/user/avatar/${item.did}?imageFilter=resize&w=48&h=48`}
+                  variant="square"
+                  sx={{ borderRadius: 'var(--radius-m, 8px)' }}
+                />
                 <Typography>{item.name}</Typography>
               </Stack>
             </Link>
@@ -167,6 +169,7 @@ export default function CustomersList() {
       }}
       loading={!data.list}
       onChange={onTableChange}
+      emptyNodeText={t('empty.customers')}
     />
   );
 }