payment-kit 1.13.25 → 1.13.27

package/src/components/passport/assign.tsx

@@ -0,0 +1,82 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { Alert, Box, CircularProgress, MenuItem, Select, Typography } from '@mui/material';
+import { useRequest } from 'ahooks';
+import { useEffect, useState } from 'react';
+
+import api from '../../libs/api';
+import ConfirmDialog from '../confirm';
+
+const fetchData = (): Promise<any[]> => {
+  return api.get('/api/passports').then((res) => res.data);
+};
+
+export default function AssignPassportDialog(props: { id: string; onCancel: any }) {
+  const { t } = useLocaleContext();
+  const { loading, error, data } = useRequest(fetchData);
+  const [selected, setSelected] = useState('');
+
+  useEffect(() => {
+    if (data && data.length && !selected) {
+      setSelected(data[0].name);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  const onConfirm = async () => {
+    if (!selected) {
+      Toast.error(t('admin.passport.assignError'));
+      return;
+    }
+
+    await api.put('/api/passports/assign', { name: selected, id: props.id });
+    Toast.success(t('common.saved'));
+    props.onCancel();
+  };
+
+  if (error) {
+    return (
+      <ConfirmDialog
+        title={t('admin.passport.assign')}
+        message={<Alert severity="error">{error.message}</Alert>}
+        onConfirm={onConfirm}
+        onCancel={props.onCancel}
+      />
+    );
+  }
+
+  if (loading || !data) {
+    return (
+      <ConfirmDialog
+        title={t('admin.passport.assign')}
+        message={<CircularProgress />}
+        onConfirm={onConfirm}
+        onCancel={props.onCancel}
+      />
+    );
+  }
+
+  const onRoleChange = (e: any) => {
+    setSelected(e.target.value);
+  };
+
+  return (
+    <ConfirmDialog
+      title={t('admin.passport.assign')}
+      message={
+        <Box>
+          <Typography>{t('admin.passport.assignTip')}</Typography>
+          <Select value={selected} onChange={onRoleChange} size="small">
+            {data.map((x) => (
+              <MenuItem key={x.name} value={x.name}>
+                <Typography color={selected ? 'text.primary' : 'text.secondary'}>{x.title}</Typography>
+              </MenuItem>
+            ))}
+          </Select>
+        </Box>
+      }
+      onConfirm={onConfirm}
+      onCancel={props.onCancel}
+    />
+  );
+}

package/src/components/payment-intent/list.tsx

@@ -92,11 +92,13 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
     {
       label: t('common.amount'),
       name: 'id',
+      align: 'right',
+      width: 60,
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPaymentIntentExpanded;
           return (
-            <Typography component="span">
+            <Typography component="strong" fontWeight={600}>
               {fromUnitToToken(item?.amount, item?.paymentCurrency.decimal)}&nbsp;
               {item?.paymentCurrency.symbol}
             </Typography>
@@ -107,7 +109,9 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
     {
       label: t('common.status'),
       name: 'status',
+      width: 60,
       options: {
+        filter: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPaymentIntentExpanded;
           return <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />;

package/src/components/payment-link/actions.tsx

@@ -11,6 +11,7 @@ import { formatError } from '../../libs/util';
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';
+import AssignPassportDialog from '../passport/assign';
 import RenamePaymentLink from './rename';
 
 type Props = {
@@ -92,7 +93,18 @@ export default function PaymentLinkActions({ data, variant, onChange }: Props) {
           },
           { label: t('admin.paymentLink.rename'), handler: () => setState({ action: 'rename' }), color: 'primary' },
           { label: t('admin.paymentLink.archive'), handler: () => setState({ action: 'archive' }), color: 'primary' },
-          { label: t('admin.paymentLink.remove'), handler: () => setState({ action: 'remove' }), color: 'error' },
+          {
+            label: t('admin.paymentLink.remove'),
+            handler: () => setState({ action: 'remove' }),
+            color: 'error',
+            divider: true,
+          },
+          {
+            label: t('admin.passport.assign'),
+            handler: () => setState({ action: 'assign' }),
+            color: 'primary',
+            disabled: !data.active,
+          },
         ]}
       />
       {state.action === 'rename' && (
@@ -103,6 +115,7 @@ export default function PaymentLinkActions({ data, variant, onChange }: Props) {
           onCancel={() => setState({ action: '' })}
         />
       )}
+      {state.action === 'assign' && <AssignPassportDialog id={data.id} onCancel={() => setState({ action: '' })} />}
       {state.action === 'archive' && (
         <ConfirmDialog
           onConfirm={onArchive}

package/src/components/payment-link/after-pay.tsx

@@ -7,6 +7,7 @@ export default function AfterPay() {
   const { t } = useLocaleContext();
   const { control, setValue, getValues } = useFormContext();
   const type = useWatch({ control, name: 'after_completion.type' });
+  const nftMintEnabled = useWatch({ control, name: 'nft_mint_settings.enabled' });
 
   return (
     <Stack spacing={2} sx={{ width: '100%' }}>
@@ -34,7 +35,13 @@ export default function AfterPay() {
           name="after_completion.hosted_confirmation.custom_message"
           control={control}
           render={({ field }) => (
-            <TextField {...field} placeholder="Replace default success message" fullWidth size="small" />
+            <TextField
+              {...field}
+              placeholder={t('admin.paymentLink.customMessage')}
+              helperText={t('admin.paymentLink.customMessageTip')}
+              fullWidth
+              size="small"
+            />
           )}
         />
       )}
@@ -82,6 +89,31 @@ export default function AfterPay() {
           />
         )}
       />
+      <Controller
+        name="nft_mint_settings.enabled"
+        control={control}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={getValues().nft_mint_settings.enabled}
+                {...field}
+                onChange={(_, checked) => setValue(field.name, checked)}
+              />
+            }
+            label={t('admin.paymentLink.mintNft')}
+          />
+        )}
+      />
+      {nftMintEnabled && (
+        <Controller
+          name="nft_mint_settings.factory"
+          control={control}
+          render={({ field }) => (
+            <TextField {...field} placeholder={t('admin.paymentLink.mintNftFrom')} fullWidth size="small" />
+          )}
+        />
+      )}
     </Stack>
   );
 }

package/src/components/payment-link/preview.tsx

@@ -14,14 +14,11 @@ export default function PaymentLinkPreview({ id, version }: { id: string; versio
   const ref = useRef(null);
   const size = useSize(ref);
   return (
-    <Chrome>
-      <Box ref={ref} sx={{ width: '100%' }}>
-        &nbsp;
-      </Box>
+    <Chrome sx={{ width: '100%', maxWidth: 840 }}>
+      <Box ref={ref}>&nbsp;</Box>
       <IframeResizer
         style={{
-          // @ts-ignore
-          minWidth: size?.width / 0.8,
+          minWidth: size ? size.width / 0.8 : 1050,
           minHeight: '64vh',
           transform: 'scale(0.8)',
           transformOrigin: 'top left',

package/src/components/price/form.tsx

@@ -78,7 +78,6 @@ const hasMoreCurrency = (methods: TPaymentMethodExpanded[]) => {
   return methods.every((method) => method.payment_currencies.length > 1) || methods.length > 1;
 };
 
-// FIXME: @wangshijun i18n
 export default function PriceForm({ prefix, simple }: PriceFormProps) {
   const getFieldName = (name: string) => (prefix ? `${prefix}.${name}` : name);
 
@@ -106,16 +105,16 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
           <Box sx={{ width: INPUT_WIDTH }}>
             <FormLabel>{t('admin.price.model')}</FormLabel>
             <Select {...field} fullWidth size="small">
-              <MenuItem value="standard">Standard Pricing</MenuItem>
-              <MenuItem value="package">Package Pricing</MenuItem>
+              <MenuItem value="standard">{t('admin.price.models.standard')}</MenuItem>
+              <MenuItem value="package">{t('admin.price.models.package')}</MenuItem>
               <MenuItem value="graduated" disabled>
-                Graduated Pricing
+                {t('admin.price.models.graduated')}
               </MenuItem>
               <MenuItem value="volume" disabled>
-                Volume Pricing
+                {t('admin.price.models.volume')}
               </MenuItem>
               <MenuItem value="custom" disabled>
-                Customer choose price
+                {t('admin.price.models.custom')}
               </MenuItem>
             </Select>
           </Box>
@@ -235,8 +234,8 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
         disabled={isLocked}
         render={({ field }) => (
           <ToggleButtonGroup {...field} onChange={(_, value: string) => setValue(field.name, value)} exclusive>
-            <ToggleButton value="recurring">Recurring</ToggleButton>
-            <ToggleButton value="one_time">One Time</ToggleButton>
+            <ToggleButton value="recurring">{t('admin.price.types.recurring')}</ToggleButton>
+            <ToggleButton value="one_time">{t('admin.price.types.onetime')}</ToggleButton>
           </ToggleButtonGroup>
         )}
       />
@@ -259,14 +258,14 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                   }}
                   sx={{ width: INPUT_WIDTH }}
                   size="small">
-                  {!livemode && <MenuItem value="hour_1">Hourly</MenuItem>}
-                  <MenuItem value="day_1">Daily</MenuItem>
-                  <MenuItem value="week_1">Weekly</MenuItem>
-                  <MenuItem value="month_1">Monthly</MenuItem>
-                  <MenuItem value="month_3">Every 3 months</MenuItem>
-                  <MenuItem value="month_6">Every 6 months</MenuItem>
-                  <MenuItem value="year_1">Yearly</MenuItem>
-                  <MenuItem value="month_2">Custom</MenuItem>
+                  {!livemode && <MenuItem value="hour_1">{t('common.hourly')}</MenuItem>}
+                  <MenuItem value="day_1">{t('common.daily')}</MenuItem>
+                  <MenuItem value="week_1">{t('common.weekly')}</MenuItem>
+                  <MenuItem value="month_1">{t('common.monthly')}</MenuItem>
+                  <MenuItem value="month_3">{t('common.month3')}</MenuItem>
+                  <MenuItem value="month_6">{t('common.month6')}</MenuItem>
+                  <MenuItem value="year_1">{t('common.yearly')}</MenuItem>
+                  <MenuItem value="month_2">{t('common.custom')}</MenuItem>
                 </Select>
               </Box>
             )}
@@ -289,9 +288,9 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                       endAdornment: (
                         <InputAdornment position="end">
                           <select onChange={(e) => setValue(getFieldName('recurring.interval'), e.target.value)}>
-                            <option value="day">days</option>
-                            <option value="week">weeks</option>
-                            <option value="month">months</option>
+                            <option value="day">{t('common.days')}</option>
+                            <option value="week">{t('common.weeks')}</option>
+                            <option value="month">{t('common.months')}</option>
                           </select>
                         </InputAdornment>
                       ),
@@ -339,10 +338,10 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
             <Box>
               <FormLabel>{t('admin.price.recurring.aggregate')}</FormLabel>
               <Select {...field} sx={{ width: INPUT_WIDTH }} size="small">
-                <MenuItem value="sum">Sum of usage values during period</MenuItem>
-                <MenuItem value="max">Maximum usage value during period</MenuItem>
-                <MenuItem value="last_ever">Most recent usage value</MenuItem>
-                <MenuItem value="last_during_period">Most recent usage value during period</MenuItem>
+                <MenuItem value="sum">{t('admin.price.aggregate.sum')}</MenuItem>
+                <MenuItem value="max">{t('admin.price.aggregate.max')}</MenuItem>
+                <MenuItem value="last_ever">{t('admin.price.aggregate.last_ever')}</MenuItem>
+                <MenuItem value="last_during_period">{t('admin.price.aggregate.last_during_period')}</MenuItem>
               </Select>
             </Box>
           )}

package/src/components/pricing-table/actions.tsx

@@ -11,6 +11,7 @@ import { formatError } from '../../libs/util';
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';
+import AssignPassportDialog from '../passport/assign';
 import RenamePricingTable from './rename';
 
 type Props = {
@@ -92,7 +93,18 @@ export default function PricingTableActions({ data, variant, onChange }: Props)
           },
           { label: t('admin.pricingTable.rename'), handler: () => setState({ action: 'rename' }), color: 'primary' },
           { label: t('admin.pricingTable.archive'), handler: () => setState({ action: 'archive' }), color: 'primary' },
-          { label: t('admin.pricingTable.remove'), handler: () => setState({ action: 'remove' }), color: 'error' },
+          {
+            label: t('admin.pricingTable.remove'),
+            handler: () => setState({ action: 'remove' }),
+            color: 'error',
+            divider: true,
+          },
+          {
+            label: t('admin.passport.assign'),
+            handler: () => setState({ action: 'assign' }),
+            color: 'primary',
+            disabled: !data.active,
+          },
         ]}
       />
       {state.action === 'rename' && (
@@ -103,6 +115,7 @@ export default function PricingTableActions({ data, variant, onChange }: Props)
           onCancel={() => setState({ action: '' })}
         />
       )}
+      {state.action === 'assign' && <AssignPassportDialog id={data.id} onCancel={() => setState({ action: '' })} />}
       {state.action === 'archive' && (
         <ConfirmDialog
           onConfirm={onArchive}

package/src/components/pricing-table/payment-settings.tsx

@@ -17,6 +17,7 @@ export function PricePaymentSettings({ index }: { index: number }) {
   const { t } = useLocaleContext();
   const { control, setValue, getValues } = useFormContext();
   const type = useWatch({ control, name: getFieldName('after_completion.type') });
+  const nftMintEnabled = useWatch({ control, name: 'nft_mint_settings.enabled' });
 
   const values = getValues();
 
@@ -91,7 +92,13 @@ export function PricePaymentSettings({ index }: { index: number }) {
           name={getFieldName('after_completion.hosted_confirmation.custom_message')}
           control={control}
           render={({ field }) => (
-            <TextField {...field} placeholder="Replace default success message" fullWidth size="small" />
+            <TextField
+              {...field}
+              placeholder={t('admin.paymentLink.customMessage')}
+              helperText={t('admin.paymentLink.customMessageTip')}
+              fullWidth
+              size="small"
+            />
           )}
         />
       )}
@@ -120,6 +127,31 @@ export function PricePaymentSettings({ index }: { index: number }) {
           )}
         />
       )}
+      <Controller
+        name={getFieldName('nft_mint_settings.enabled')}
+        control={control}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={get(values, 'nft_mint_settings.enabled')}
+                {...field}
+                onChange={(_, checked) => setValue(field.name, checked)}
+              />
+            }
+            label={t('admin.paymentLink.mintNft')}
+          />
+        )}
+      />
+      {nftMintEnabled && (
+        <Controller
+          name={getFieldName('nft_mint_settings.factory')}
+          control={control}
+          render={({ field }) => (
+            <TextField {...field} placeholder={t('admin.paymentLink.mintNftFrom')} fullWidth size="small" />
+          )}
+        />
+      )}
     </Stack>
   );
 }

package/src/components/pricing-table/preview.tsx

@@ -13,15 +13,11 @@ export default function PricingTablePreview({ id, version }: { id: string; versi
   const ref = useRef(null);
   const size = useSize(ref);
   return (
-    <Chrome>
-      <Box ref={ref} sx={{ width: '100%' }}>
-        &nbsp;
-      </Box>
+    <Chrome sx={{ width: '100%', maxWidth: 840 }}>
+      <Box ref={ref}>&nbsp;</Box>
       <IframeResizer
         style={{
-          // @ts-ignore
-          // eslint-disable-next-line no-unsafe-optional-chaining
-          minWidth: size?.width / 0.8,
+          minWidth: size ? size.width / 0.8 : 1050,
           minHeight: '64vh',
           transform: 'scale(0.8)',
           transformOrigin: 'top left',

package/src/components/pricing-table/product-settings.tsx

@@ -68,6 +68,10 @@ export default function PricingTableProductSettings() {
             description: '',
             trial_period_days: 0,
           },
+          nft_mint_settings: {
+            enabled: false,
+            factory: '',
+          },
           custom_fields: [],
           submit_type: 'auto',
         });

package/src/components/pricing-table/product-skeleton.tsx

@@ -0,0 +1,39 @@
+import { Fade, Skeleton, Stack, Typography } from '@mui/material';
+
+export default function ProductSkeleton({ count }: { count: number }) {
+  return (
+    <Fade in>
+      <Stack
+        direction="column"
+        alignItems="center"
+        padding={4}
+        spacing={1}
+        sx={{
+          width: 320,
+          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%)',
+          },
+        }}>
+        <Typography component="div" variant="h4" sx={{ width: '50%' }}>
+          <Skeleton />
+        </Typography>
+        <Skeleton variant="text" sx={{ fontSize: '1rem', width: '60%' }} />
+        <Typography component="div" variant="h3" sx={{ width: '60%' }}>
+          <Skeleton />
+        </Typography>
+        <Typography component="div" variant="h3" sx={{ width: '100%' }}>
+          <Skeleton />
+        </Typography>
+        {Array.from({ length: count }).map((_, i) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <Skeleton key={i} variant="text" sx={{ fontSize: '1rem', width: '60%' }} />
+        ))}
+      </Stack>
+    </Fade>
+  );
+}

package/src/components/product/actions.tsx

@@ -9,6 +9,7 @@ import { formatError } from '../../libs/util';
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
 import ConfirmDialog from '../confirm';
+import AssignPassportDialog from '../passport/assign';
 import EditProduct from './edit';
 
 type ProductActionProps = {
@@ -83,7 +84,18 @@ export default function ProductActions({ data, variant, onChange }: ProductActio
           data.active
             ? { label: t('admin.product.archive'), handler: () => setState({ action: 'archive' }), color: 'primary' }
             : { label: t('admin.product.unarchive'), handler: () => setState({ action: 'unarchive' }), color: 'primary' }, // prettier-ignore
-          { label: t('admin.product.remove'), handler: () => setState({ action: 'remove' }), color: 'error' },
+          {
+            label: t('admin.product.remove'),
+            handler: () => setState({ action: 'remove' }),
+            color: 'error',
+            divider: true,
+          },
+          {
+            label: t('admin.passport.assign'),
+            handler: () => setState({ action: 'assign' }),
+            color: 'primary',
+            disabled: !data.active,
+          },
         ].filter(Boolean)}
       />
       {state.action === 'edit' && (
@@ -121,6 +133,7 @@ export default function ProductActions({ data, variant, onChange }: ProductActio
           loading={state.loading}
         />
       )}
+      {state.action === 'assign' && <AssignPassportDialog id={data.id} onCancel={() => setState({ action: '' })} />}
     </ClickBoundary>
   );
 }

package/src/components/status.tsx

@@ -6,7 +6,7 @@ export default function Status(props: ChipProps) {
       {...props}
       size="small"
       variant="outlined"
-      sx={{ ...(props.sx || {}), borderRadius: '4px', textTransform: 'capitalize' }}
+      sx={{ ...(props.sx || {}), borderRadius: '4px', height: 20, lineHeight: 20, textTransform: 'capitalize' }}
     />
   );
 }

package/src/components/subscription/status.tsx

@@ -13,7 +13,7 @@ export default function SubscriptionStatus({
   [key: string]: any;
 }) {
   const { t } = useLocaleContext();
-  if (subscription.cancel_at_period_end) {
+  if (subscription.cancel_at_period_end && subscription.current_period_end > Date.now() / 1000) {
     return (
       <Status
         icon={<AccessTimeOutlined />}
@@ -24,7 +24,7 @@ export default function SubscriptionStatus({
     );
   }
 
-  if (subscription.cancel_at) {
+  if (subscription.cancel_at && subscription.cancel_at >= Date.now() / 1000) {
     return (
       <Status
         icon={<AccessTimeOutlined />}
@@ -36,7 +36,7 @@ export default function SubscriptionStatus({
   }
 
   if (subscription.pause_collection) {
-    if (subscription.pause_collection.resumes_at) {
+    if (subscription.pause_collection.resumes_at && subscription.pause_collection.resumes_at > Date.now() / 1000) {
       return (
         <Status
           icon={<AccessTimeOutlined />}

package/src/components/table.tsx

@@ -8,16 +8,16 @@ function EmptyStub() {
   return null;
 }
 
-export default function Table({ options, toolbar = true, footer = true, ...rest }: any) {
+export default function Table({ options, columns, toolbar = true, footer = true, ...rest }: any) {
   const { isMobile } = useMobile();
   const { locale } = useLocaleContext();
   const defaultOptions = {
     print: false,
     download: false,
-    filter: false,
+    filter: true,
     selectableRows: 'none',
-    rowsPerPage: 20,
-    rowsPerPageOptions: [20, 50, 100],
+    rowsPerPage: 10,
+    rowsPerPageOptions: [10, 20, 50, 100],
     searchDebounceTime: 300,
     tableBodyHeight: '100%',
   };
@@ -34,6 +34,12 @@ export default function Table({ options, toolbar = true, footer = true, ...rest
     <Wrapped
       locale={locale}
       options={{ ...defaultOptions, ...options }}
+      columns={columns.map((x: any) => {
+        x.options = x.options || {};
+        x.options.filter = x.options.filter || false;
+        x.options.sort = x.options.sort || false;
+        return x;
+      })}
       {...rest}
       components={components}
       isMobile={isMobile}
@@ -54,6 +60,10 @@ const Wrapped = styled(Datatable)`
     background: #f5f5f5;
   }
 
+  > div {
+    overflow: visible;
+  }
+
   ${(props) => {
     if (props.isMobile) {
       return '';

package/src/global.css

@@ -62,11 +62,17 @@ a:visited {
 
 .MuiTableCell-root {
   font-size: 1rem !important;
+  padding-top: 8px;
+  padding-bottom: 8px;
   padding-right: 24px;
 }
 
 th.MuiTableCell-head {
-  padding: 8px 0;
+  padding: 8px 24px 8px 0;
+}
+
+.MuiTableRow-hover {
+  cursor: pointer;
 }
 
 .MuiRadio-root {
@@ -91,7 +97,3 @@ th.MuiTableCell-head {
   max-height: 100% !important;
   overflow: auto !important;
 }
-
-.MuiTableRow-hover {
-  cursor: pointer;
-}

package/src/libs/util.ts

@@ -631,3 +631,9 @@ export function groupPricingTableItems(items: any[]) {
 
   return Object.entries(grouped);
 }
+
+export function sleep(ms: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}