payment-kit 1.13.26 → 1.13.27

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

@@ -14,6 +14,7 @@ const pages = {
   products: React.lazy(() => import('./products')),
   coupons: React.lazy(() => import('./coupons')),
   'pricing-tables': React.lazy(() => import('./pricing-tables')),
+  passports: React.lazy(() => import('./passports')),
 };
 
 export default function Products() {
@@ -39,6 +40,7 @@ export default function Products() {
     { label: t('admin.products'), value: 'products' },
     { label: t('admin.coupons'), value: 'coupons' },
     { label: t('admin.pricingTables'), value: 'pricing-tables' },
+    { label: t('admin.passports'), value: 'passports' },
   ];
 
   let extra = null;

package/src/pages/admin/products/passports/index.tsx

@@ -0,0 +1,154 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Alert, CircularProgress, Typography } from '@mui/material';
+import { useRequest } from 'ahooks';
+import { Link } from 'react-router-dom';
+
+import PassportActions from '../../../../components/passport/actions';
+import Table from '../../../../components/table';
+import api from '../../../../libs/api';
+
+const fetchData = (params: Record<string, any> = {}): Promise<any[]> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/passports?${search.toString()}`).then((res) => res.data);
+};
+
+export default function PassportList() {
+  const listKey = 'passports';
+
+  const { t } = useLocaleContext();
+
+  const { loading, error, data } = useRequest(fetchData);
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  if (data && data.length === 0) {
+    return <Typography color="text.secondary">{t('admin.event.empty')}</Typography>;
+  }
+
+  const columns = [
+    {
+      label: t('common.name'),
+      name: 'title',
+      options: {
+        sort: false,
+      },
+    },
+    {
+      label: t('common.description'),
+      name: 'description',
+      options: {
+        sort: false,
+      },
+    },
+    {
+      label: t('admin.products'),
+      name: '',
+      options: {
+        sort: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const product = data[index].extra?.payment?.product;
+          if (product) {
+            return <Link to={`/admin/products/${product}`}>{product}</Link>;
+          }
+
+          return (
+            <Typography component="span" color="text.secondary">
+              None
+            </Typography>
+          );
+        },
+      },
+    },
+    {
+      label: t('admin.passport.payLink'),
+      name: '',
+      options: {
+        sort: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const payLink = data[index].extra?.acquire?.pay;
+          if (payLink) {
+            if (payLink.startsWith('plink_')) {
+              return <Link to={`/admin/payments/${payLink}`}>{payLink}</Link>;
+            }
+            if (payLink.startsWith('prctbl_')) {
+              return <Link to={`/admin/products/${payLink}`}>{payLink}</Link>;
+            }
+          }
+
+          return (
+            <Typography component="span" color="text.secondary">
+              None
+            </Typography>
+          );
+        },
+      },
+    },
+    {
+      label: t('admin.passport.payPreview'),
+      name: '',
+      options: {
+        sort: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const payLink = data[index].extra?.acquire?.pay;
+          if (payLink) {
+            if (payLink.startsWith('plink_')) {
+              return (
+                <Link to={`/checkout/pay/${payLink}`} target="_blank">
+                  {payLink}
+                </Link>
+              );
+            }
+            if (payLink.startsWith('prctbl_')) {
+              return (
+                <Link to={`/checkout/pricing-table/${payLink}`} target="_blank">
+                  {payLink}
+                </Link>
+              );
+            }
+          }
+
+          return (
+            <Typography component="span" color="text.secondary">
+              None
+            </Typography>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.actions'),
+      name: '',
+      options: {
+        sort: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          return <PassportActions data={data[index]} />;
+        },
+      },
+    },
+  ].filter(Boolean);
+
+  return (
+    <Table
+      durable={listKey}
+      data={data}
+      columns={columns}
+      loading={loading}
+      title={<Typography variant="subtitle1">{t('admin.passport.intro')}</Typography>}
+      options={{
+        count: data.length,
+        page: 1,
+        rowsPerPage: 100,
+      }}
+    />
+  );
+}

package/src/pages/admin/products/pricing-tables/create.tsx

@@ -42,7 +42,7 @@ export default function CreatePricingTable() {
     },
   });
 
-  const changes = methods.watch(['items', 'branding_settings']);
+  const changes = methods.watch(['items', 'branding_settings', 'highlight', 'highlight_product_id', 'highlight_text']);
 
   useEffect(() => {
     api.post('/api/pricing-tables/stash', methods.getValues()).then(() => {

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

@@ -38,7 +38,7 @@ export default function SettingsIndex() {
     <>
       <Stack direction="row" alignItems="center" justifyContent="space-between">
         <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
-          {t('admin.products')}
+          {t('admin.settings')}
         </Typography>
         {extra}
       </Stack>

package/src/pages/admin/settings/payment-methods/index.tsx

@@ -1,3 +1,4 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { TPaymentMethodExpanded } from '@did-pay/types';
 import { Alert, Box, CircularProgress, Grid, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
@@ -28,6 +29,7 @@ const groupByType = (methods: TPaymentMethodExpanded[]) => {
 };
 
 export default function PaymentMethods() {
+  const { t } = useLocaleContext();
   const { loading, error, data, runAsync } = useRequest(() => getMethods({}));
 
   useBus('paymentMethod.created', runAsync, []);
@@ -42,7 +44,6 @@ export default function PaymentMethods() {
 
   const groups = groupByType(data);
 
-  // FIXME: i18n
   return (
     <>
       {Object.keys(groups).map((x) => (
@@ -63,13 +64,22 @@ export default function PaymentMethods() {
               }}>
               <Grid container spacing={2} mt={0}>
                 <Grid item xs={12} md={6}>
-                  <InfoRow label="Type" value={method.type} />
-                  <InfoRow label="Confirmation" value={method.confirmation.type} />
-                  <InfoRow label="Recurring payments" value={method.features.recurring ? 'Yes' : 'No'} />
-                  <InfoRow label="Refund support" value={method.features.refund ? 'Yes' : 'No'} />
-                  <InfoRow label="Dispute support" value={method.features.dispute ? 'Yes' : 'No'} />
+                  <InfoRow label={t('admin.paymentMethod.props.type')} value={method.type} />
+                  <InfoRow label={t('admin.paymentMethod.props.confirmation')} value={method.confirmation.type} />
                   <InfoRow
-                    label="Currencies"
+                    label={t('admin.paymentMethod.props.recurring')}
+                    value={method.features.recurring ? t('common.yes') : t('common.no')}
+                  />
+                  <InfoRow
+                    label={t('admin.paymentMethod.props.refund')}
+                    value={method.features.refund ? t('common.yes') : t('common.no')}
+                  />
+                  <InfoRow
+                    label={t('admin.paymentMethod.props.dispute')}
+                    value={method.features.dispute ? t('common.yes') : t('common.no')}
+                  />
+                  <InfoRow
+                    label={t('admin.paymentMethod.props.currencies')}
                     value={method.payment_currencies.map((currency) => currency.symbol).join(', ')}
                   />
                 </Grid>

package/src/pages/checkout/pay.tsx

@@ -24,8 +24,8 @@ type PageData = {
   customer?: TCustomer;
 };
 
-const startFromPaymentLink = async (id: string, preview: string): Promise<PageData> => {
-  const { data } = await api.post(`/api/checkout-sessions/start/${id}?preview=${preview}`);
+const startFromPaymentLink = async (id: string, preview: string, redirect: string = ''): Promise<PageData> => {
+  const { data } = await api.post(`/api/checkout-sessions/start/${id}?preview=${preview}&redirect=${redirect}`);
   return data;
 };
 
@@ -42,7 +42,9 @@ export default function Payment({ id }: Props) {
   const [state, setState] = useSetState({ completed: false, appError: null });
 
   const { error: apiError, data } = useRequest(() =>
-    type === 'paymentLink' ? startFromPaymentLink(id, params.get('preview') || '') : fetchCheckoutSession(id)
+    type === 'paymentLink'
+      ? startFromPaymentLink(id, params.get('preview') || '', params.get('redirect') || '')
+      : fetchCheckoutSession(id)
   );
 
   useEffect(() => {
@@ -53,20 +55,20 @@ export default function Payment({ id }: Props) {
 
   const onPaid = () => {
     setState({ completed: true });
-    if (data?.paymentLink) {
-      if (data.paymentLink.after_completion?.type === 'redirect' && data.paymentLink.after_completion?.redirect?.url) {
-        setTimeout(() => {
-          // @ts-ignore
-          window.location.href = data.paymentLink?.after_completion?.redirect?.url;
-        }, 1000);
-      }
-    } else if (data?.checkoutSession?.success_url) {
+    if (data?.checkoutSession?.success_url) {
       setTimeout(() => {
-        const tmp = new URL(data.checkoutSession.success_url as string);
+        const tmp = new URL(data.checkoutSession.success_url as string, window.location.origin);
         tmp.searchParams.set('checkout_session_id', data.checkoutSession.id);
-        // @ts-ignore
         window.location.href = tmp.href;
       }, 1000);
+    } else if (data?.paymentLink) {
+      if (data.paymentLink.after_completion?.type === 'redirect' && data.paymentLink.after_completion?.redirect?.url) {
+        setTimeout(() => {
+          const tmp = new URL(data.paymentLink?.after_completion?.redirect?.url as string, window.location.origin);
+          tmp.searchParams.set('checkout_session_id', data.checkoutSession.id);
+          window.location.href = tmp.href;
+        }, 1000);
+      }
     }
   };
 

package/src/pages/checkout/pricing-table.tsx

@@ -1,18 +1,19 @@
 import Center from '@arcblock/ux/lib/Center';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
+import Header from '@blocklet/ui-react/lib/Header';
 import type { PriceRecurring, TPricingTableExpanded, TPricingTableItem } from '@did-pay/types';
 import { CheckOutlined } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
 import {
   Alert,
   Box,
-  CircularProgress,
   Fade,
   List,
   ListItem,
   ListItemIcon,
   ListItemText,
+  Skeleton,
   Stack,
   ToggleButton,
   ToggleButtonGroup,
@@ -20,9 +21,11 @@ import {
 } from '@mui/material';
 import { useLocalStorageState, useRequest, useSetState } from 'ahooks';
 import { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 import PaymentAmount from '../../components/checkout/amount';
 import Livemode from '../../components/livemode';
+import ProductSkeleton from '../../components/pricing-table/product-skeleton';
 import api from '../../libs/api';
 import { formatPriceAmount, formatRecurring } from '../../libs/util';
 
@@ -56,6 +59,7 @@ const groupItemsByRecurring = (items: TPricingTableItem[]) => {
 
 export default function PricingTable({ id }: Props) {
   const { t } = useLocaleContext();
+  const [params] = useSearchParams();
   const { error, loading, data } = useRequest(() => fetchData(id));
   const [state, setState] = useSetState({ interval: '', loading: '' });
   const [livemode] = useLocalStorageState('livemode', { defaultValue: true });
@@ -73,17 +77,46 @@ export default function PricingTable({ id }: Props) {
 
   if (error) {
     return (
-      <Center>
-        <Alert severity="error">{error.message}</Alert>
-      </Center>
+      <div style={{ height: '90vh', width: '100vw' }}>
+        <Header />
+        <Center relative="parent">
+          <Alert severity="error">{error.message}</Alert>
+        </Center>
+      </div>
     );
   }
 
   if (loading || !data) {
     return (
-      <Center>
-        <CircularProgress />
-      </Center>
+      <div style={{ height: '90vh', width: '100vw' }}>
+        <Header />
+        <Center>
+          <Stack direction="column" alignItems="center" spacing={4}>
+            <Typography component="div" variant="h3" sx={{ width: '40%' }}>
+              <Skeleton />
+            </Typography>
+            <Typography component="div" variant="h6" sx={{ width: '10%' }}>
+              <Skeleton />
+            </Typography>
+            <Stack direction="row" flexWrap="wrap" spacing={5}>
+              <ProductSkeleton key={1} count={2} />
+              <ProductSkeleton key={2} count={3} />
+              <ProductSkeleton key={3} count={4} />
+            </Stack>
+          </Stack>
+        </Center>
+      </div>
+    );
+  }
+
+  if (data.items.length === 0) {
+    return (
+      <div style={{ height: '90vh', width: '100vw' }}>
+        <Header />
+        <Center relative="parent">
+          <Alert severity="warning">{t('checkout.noPricing')}</Alert>
+        </Center>
+      </div>
     );
   }
 
@@ -92,7 +125,7 @@ export default function PricingTable({ id }: Props) {
   const onStartCheckoutSession = (priceId: string) => {
     setState({ loading: priceId });
     api
-      .post(`/api/pricing-tables/${data.id}/checkout/${priceId}`)
+      .post(`/api/pricing-tables/${data.id}/checkout/${priceId}?redirect=${params.get('redirect') || ''}`)
       .then((res) => {
         window.location.href = res.data.url;
       })
@@ -104,92 +137,95 @@ export default function PricingTable({ id }: Props) {
   };
 
   return (
-    <Center>
-      <Stack direction="column" alignItems="center" spacing={4}>
-        <Typography variant="h4" color="text.primary" fontWeight={600}>
-          {data.name}
-          {!livemode && <Livemode />}
-        </Typography>
-        {Object.keys(recurring).length > 1 && (
-          <ToggleButtonGroup value={state.interval} onChange={(_, value) => setState({ interval: value })} exclusive>
-            {Object.keys(recurring).map((x) => (
-              <ToggleButton key={x} value={x} sx={{ textTransform: 'capitalize' }}>
-                {formatRecurring(recurring[x] as PriceRecurring)}
-              </ToggleButton>
-            ))}
-          </ToggleButtonGroup>
-        )}
-        <Stack direction="row" flexWrap="wrap" spacing={5}>
-          {grouped[state.interval]?.map((x) => {
-            return (
-              <Fade in>
-                <Stack
-                  key={x.price_id}
-                  padding={4}
-                  spacing={2}
-                  direction="column"
-                  alignItems="center"
-                  sx={{
-                    width: 320,
-                    cursor: 'pointer',
-                    border: '1px solid #eee',
-                    borderRadius: 1,
-                    transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
-                    boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',
-                    '&:hover': {
-                      borderColor: '#ddd',
-                      boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
-                    },
-                  }}>
-                  <Box textAlign="center">
-                    <Typography variant="h5" color="text.primary" fontWeight={600}>
-                      {x.product.name}
-                    </Typography>
-                    <Typography color="text.secondary">{x.product.description}</Typography>
-                  </Box>
-                  <Stack direction="row" alignItems="center" spacing={1}>
-                    <PaymentAmount amount={formatPriceAmount(x.price, data.currency, x.product.unit_label)} />
-                    <Stack direction="column" alignItems="flex-start">
-                      <Typography component="span" color="text.secondary" fontSize="0.8rem">
-                        per
-                      </Typography>
-                      <Typography component="span" color="text.secondary" fontSize="0.8rem">
-                        {formatRecurring(x.price.recurring as PriceRecurring, false, '')}
+    <div style={{ height: '90vh', width: '100vw' }}>
+      <Header />
+      <Center relative="parent">
+        <Stack direction="column" alignItems="center" spacing={5}>
+          <Typography variant="h4" color="text.primary" fontWeight={600}>
+            {data.name}
+            {!livemode && <Livemode />}
+          </Typography>
+          {Object.keys(recurring).length > 1 && (
+            <ToggleButtonGroup value={state.interval} onChange={(_, value) => setState({ interval: value })} exclusive>
+              {Object.keys(recurring).map((x) => (
+                <ToggleButton key={x} value={x} sx={{ textTransform: 'capitalize' }}>
+                  {formatRecurring(recurring[x] as PriceRecurring)}
+                </ToggleButton>
+              ))}
+            </ToggleButtonGroup>
+          )}
+          <Stack direction="row" flexWrap="wrap" spacing={5}>
+            {grouped[state.interval]?.map((x) => {
+              return (
+                <Fade in>
+                  <Stack
+                    key={x.price_id}
+                    padding={4}
+                    spacing={2}
+                    direction="column"
+                    alignItems="center"
+                    sx={{
+                      width: 320,
+                      cursor: 'pointer',
+                      border: '1px solid #eee',
+                      borderRadius: 1,
+                      transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
+                      boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',
+                      '&:hover': {
+                        borderColor: '#ddd',
+                        boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
+                      },
+                    }}>
+                    <Box textAlign="center">
+                      <Typography variant="h5" color="text.primary" fontWeight={600}>
+                        {x.product.name}
                       </Typography>
+                      <Typography color="text.secondary">{x.product.description}</Typography>
+                    </Box>
+                    <Stack direction="row" alignItems="center" spacing={1}>
+                      <PaymentAmount amount={formatPriceAmount(x.price, data.currency, x.product.unit_label)} />
+                      <Stack direction="column" alignItems="flex-start">
+                        <Typography component="span" color="text.secondary" fontSize="0.8rem">
+                          per
+                        </Typography>
+                        <Typography component="span" color="text.secondary" fontSize="0.8rem">
+                          {formatRecurring(x.price.recurring as PriceRecurring, false, '')}
+                        </Typography>
+                      </Stack>
                     </Stack>
+                    <LoadingButton
+                      fullWidth
+                      size="large"
+                      loadingPosition="end"
+                      variant={x.is_highlight ? 'contained' : 'outlined'}
+                      color={x.is_highlight ? 'primary' : 'info'}
+                      sx={{ fontSize: '1.2rem' }}
+                      loading={state.loading === x.price_id}
+                      onClick={() => onStartCheckoutSession(x.price_id)}>
+                      {x.subscription_data?.trial_period_days ? t('checkout.try') : t('checkout.subscription')}
+                    </LoadingButton>
+                    {x.product.features.length > 0 && (
+                      <Box>
+                        <Typography>{t('checkout.include')}</Typography>
+                        <List dense>
+                          {x.product.features.map((f) => (
+                            <ListItem key={f.name} disableGutters disablePadding>
+                              <ListItemIcon sx={{ minWidth: 25 }}>
+                                <CheckOutlined color="success" fontSize="small" />
+                              </ListItemIcon>
+                              <ListItemText primary={f.name} />
+                            </ListItem>
+                          ))}
+                        </List>
+                      </Box>
+                    )}
                   </Stack>
-                  <LoadingButton
-                    fullWidth
-                    size="large"
-                    loadingPosition="end"
-                    variant={x.is_highlight ? 'contained' : 'outlined'}
-                    color={x.is_highlight ? 'primary' : 'info'}
-                    sx={{ fontSize: '1.2rem' }}
-                    loading={state.loading === x.price_id}
-                    onClick={() => onStartCheckoutSession(x.price_id)}>
-                    {x.subscription_data?.trial_period_days ? t('checkout.try') : t('checkout.subscription')}
-                  </LoadingButton>
-                  {x.product.features.length > 0 && (
-                    <Box>
-                      <Typography>{t('checkout.include')}</Typography>
-                      <List dense>
-                        {x.product.features.map((f) => (
-                          <ListItem key={f.name} disableGutters disablePadding>
-                            <ListItemIcon sx={{ minWidth: 25 }}>
-                              <CheckOutlined color="success" fontSize="small" />
-                            </ListItemIcon>
-                            <ListItemText primary={f.name} />
-                          </ListItem>
-                        ))}
-                      </List>
-                    </Box>
-                  )}
-                </Stack>
-              </Fade>
-            );
-          })}
+                </Fade>
+              );
+            })}
+          </Stack>
         </Stack>
-      </Stack>
-    </Center>
+      </Center>
+    </div>
   );
 }

package/api/src/libs/chain/arcblock.ts

@@ -1,13 +0,0 @@
-import Client from '@ocap/client';
-
-const cache = new Map<string, Client>();
-export function getClient(host: string) {
-  const cached = cache.has(host);
-  if (!cached) {
-    const created = new Client(host);
-    cache.set(host, created);
-    return created;
-  }
-
-  return cache.get(host) as Client;
-}