payment-kit 1.13.17 → 1.13.19

package/src/components/payment-method/form.tsx

@@ -0,0 +1,54 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Stack, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
+
+import ArcBlockMethodForm from './arcblock';
+import BitcoinMethodForm from './bitcoin';
+import EthereumMethodForm from './ethereum';
+import StripeMethodForm from './stripe';
+
+export default function PaymentMethodForm() {
+  const { t } = useLocaleContext();
+  const { control, setValue } = useFormContext();
+
+  const type = useWatch({ control, name: 'type' });
+
+  return (
+    <Root direction="column" alignItems="flex-start" spacing={2}>
+      <Controller
+        name="type"
+        control={control}
+        render={({ field }) => (
+          <ToggleButtonGroup {...field} onChange={(_, value: string) => setValue(field.name, value)} exclusive>
+            <ToggleButton value="arcblock">ArcBlock</ToggleButton>
+            <ToggleButton value="stripe">Stripe</ToggleButton>
+            <ToggleButton value="ethereum" disabled>
+              Ethereum
+            </ToggleButton>
+            <ToggleButton value="bitcoin" disabled>
+              Bitcoin
+            </ToggleButton>
+          </ToggleButtonGroup>
+        )}
+      />
+      <Typography variant="h6" sx={{ mb: 3, fontWeight: 600 }}>
+        {t('admin.paymentMethod.settings')}
+      </Typography>
+      {type === 'stripe' && <StripeMethodForm />}
+      {type === 'arcblock' && <ArcBlockMethodForm />}
+      {type === 'ethereum' && <EthereumMethodForm />}
+      {type === 'bitcoin' && <BitcoinMethodForm />}
+    </Root>
+  );
+}
+
+const Root = styled(Stack)`
+  select {
+    border: none;
+    &:active,
+    &:focus {
+      border: none;
+    }
+  }
+`;

package/src/components/payment-method/stripe.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+import FormInput from '../input';
+
+export default function StripeMethodForm() {
+  const { t } = useLocaleContext();
+
+  return (
+    <>
+      <FormInput
+        key="name"
+        name="name"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.name.label')}
+        placeholder={t('admin.paymentMethod.name.tip')}
+      />
+      <FormInput
+        key="description"
+        name="description"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.description.label')}
+        placeholder={t('admin.paymentMethod.description.tip')}
+      />
+      <FormInput
+        key="publishable_key"
+        name="settings.stripe.publishable_key"
+        type="text"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.stripe.publishable_key.label')}
+        placeholder={t('admin.paymentMethod.stripe.publishable_key.tip')}
+      />
+      <FormInput
+        key="secret_key"
+        name="settings.stripe.secret_key"
+        type="password"
+        rules={{ required: true }}
+        label={t('admin.paymentMethod.stripe.secret_key.label')}
+        placeholder={t('admin.paymentMethod.stripe.secret_key.tip')}
+      />
+    </>
+  );
+}

package/src/components/portal/invoice/list.tsx

@@ -43,7 +43,7 @@ export default function CustomerInvoiceList({ customer_id }: Props) {
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TInvoiceExpanded>>(
     (d) => {
       const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
-      return fetchData({ page, size: pageSize, status: 'open,paid', customer_id });
+      return fetchData({ page, pageSize, status: 'open,paid', customer_id });
     },
     {
       reloadDeps: [customer_id],

package/src/components/portal/subscription/list.tsx

@@ -41,7 +41,7 @@ export function CurrentSubscriptionsInner({ id, onChange }: Props) {
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TSubscriptionExpanded>>(
     (d) => {
       const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
-      return fetchData({ page, size: pageSize, status: 'active,trialing,paused', customer_id: id });
+      return fetchData({ page, pageSize, status: 'active,trialing,paused', customer_id: id });
     },
     {
       reloadDeps: [id],

package/src/components/price/currency-select.tsx

@@ -0,0 +1,53 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { AddOutlined } from '@mui/icons-material';
+import { ListSubheader, MenuItem, Select, Stack, Typography } from '@mui/material';
+import { useState } from 'react';
+import type { LiteralUnion } from 'type-fest';
+
+import { useSettingsContext } from '../../contexts/settings';
+import { getSupportedPaymentMethods } from '../../libs/util';
+import Currency from '../currency';
+
+type Props = {
+  mode: LiteralUnion<'waiting' | 'selecting', string>;
+  hasSelected: (currency: any) => boolean;
+  onSelect: (currencyId: string) => void;
+};
+
+export default function CurrencySelect({ mode: initialMode, hasSelected, onSelect }: Props) {
+  const { t } = useLocaleContext();
+  const { settings } = useSettingsContext();
+  const [mode, setMode] = useState(initialMode);
+
+  const handleSelect = (e: any) => {
+    setMode('waiting');
+    onSelect(e.target.value);
+  };
+
+  if (mode === 'selecting') {
+    return (
+      <Select value="" sx={{ width: 260 }} size="small" onChange={handleSelect}>
+        {getSupportedPaymentMethods(settings.paymentMethods, hasSelected).map((method) => [
+          <ListSubheader key={method.id} sx={{ fontSize: '1rem', color: 'text.secondary', lineHeight: '2.5rem' }}>
+            {method.name}
+          </ListSubheader>,
+          ...method.payment_currencies.map((currency) => (
+            <MenuItem key={currency.id} sx={{ pl: 3 }} value={currency.id}>
+              <Stack direction="row" justifyContent="space-between" sx={{ width: '100%' }}>
+                <Currency logo={currency.logo} name={currency.name} />
+                <Typography fontWeight="bold">{currency.symbol}</Typography>
+              </Stack>
+            </MenuItem>
+          )),
+        ])}
+      </Select>
+    );
+  }
+
+  return (
+    <Stack sx={{ cursor: 'pointer' }} direction="row" alignItems="center" onClick={() => setMode('selecting')}>
+      <AddOutlined color="primary" />
+      <Typography color="primary">{t('admin.price.currency.add')}</Typography>
+    </Stack>
+  );
+}

package/src/components/price/form.tsx

@@ -1,11 +1,14 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { InferFormType, PriceRecurring, TPriceExpanded } from '@did-pay/types';
+import type { InferFormType, PriceRecurring, TPaymentMethodExpanded, TPriceExpanded } from '@did-pay/types';
+import { DeleteOutlineOutlined, InfoOutlined } from '@mui/icons-material';
 import {
+  Alert,
   Box,
   Checkbox,
   FormControlLabel,
   FormLabel,
+  IconButton,
   InputAdornment,
   MenuItem,
   Select,
@@ -13,36 +16,39 @@ import {
   TextField,
   ToggleButton,
   ToggleButtonGroup,
+  Tooltip,
+  Typography,
 } from '@mui/material';
 import { styled } from '@mui/system';
-import { Controller, useFormContext, useWatch } from 'react-hook-form';
+import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import type { LiteralUnion } from 'type-fest';
 
 import { useSettingsContext } from '../../contexts/settings';
+import { findCurrency } from '../../libs/util';
 import Collapse from '../collapse';
+import CurrencySelect from './currency-select';
 
-export type Price = Omit<InferFormType<TPriceExpanded>, 'product_id' | 'locked'> & {
+export type Price = Omit<InferFormType<TPriceExpanded>, 'product_id' | 'object'> & {
   model: LiteralUnion<'standard' | 'package' | 'graduated' | 'volume' | 'custom', string>;
   recurring: Omit<PriceRecurring, 'usage_type'> & {
     interval_config: string;
-    metered: boolean;
   };
 };
 
 export const DEFAULT_PRICE: Omit<Price, 'product' | 'currency'> = {
+  locked: false,
   model: 'standard',
   billing_scheme: '',
   currency_id: '',
   nickname: '',
-  type: 'one_time',
+  type: 'recurring',
   unit_amount: '0',
   lookup_key: '',
   recurring: {
     interval_config: 'month_1',
     interval: 'month',
     interval_count: 1,
-    metered: false,
-    usage_type: '',
+    usage_type: 'licensed',
     aggregate_usage: 'sum',
   },
   transform_quantity: {
@@ -51,6 +57,9 @@ export const DEFAULT_PRICE: Omit<Price, 'product' | 'currency'> = {
   },
   tiers: [],
   metadata: [],
+  custom_unit_amount: null,
+  currency_options: [],
+  tiers_mode: null,
 };
 
 type PriceFormProps = {
@@ -63,6 +72,12 @@ PriceForm.defaultProps = {
   simple: false,
 };
 
+const INPUT_WIDTH = 260;
+
+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);
@@ -71,19 +86,24 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
   const { control, setValue, getFieldState } = useFormContext();
   const { settings, livemode } = useSettingsContext();
 
+  const currencies = useFieldArray({ control, name: getFieldName('currency_options') });
+
+  const isLocked = useWatch({ control, name: getFieldName('locked') });
   const isRecurring = useWatch({ control, name: getFieldName('type') }) === 'recurring';
-  const isMetered = useWatch({ control, name: getFieldName('recurring.metered') });
+  const isMetered = useWatch({ control, name: getFieldName('recurring.usage_type') }) === 'metered';
   const isCustomInterval = useWatch({ control, name: getFieldName('recurring.interval_config') }) === 'month_2';
   const model = useWatch({ control, name: getFieldName('model') });
 
   return (
     <Root direction="column" alignItems="flex-start" spacing={2}>
+      {isLocked && <Alert severity="info">{t('admin.price.locked')}</Alert>}
       <Controller
-        rules={{ required: true }}
         name={getFieldName('model')}
         control={control}
+        rules={{ required: true }}
+        disabled={isLocked}
         render={({ field }) => (
-          <Box sx={{ width: 174 }}>
+          <Box sx={{ width: INPUT_WIDTH }}>
             <FormLabel>{t('admin.price.model')}</FormLabel>
             <Select {...field} fullWidth size="small">
               <MenuItem value="standard">Standard Pricing</MenuItem>
@@ -106,14 +126,24 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
           name={getFieldName('unit_amount')}
           control={control}
           rules={{ required: t('admin.price.unit_amount.required'), min: t('admin.price.unit_amount.positive') }}
+          disabled={isLocked}
           render={({ field }) => (
             <Box>
-              <FormLabel>{t('admin.price.amount')}</FormLabel>
+              <FormLabel>
+                <Stack direction="row" alignItems="center" spacing={0.5}>
+                  <Typography component="span" color="text.primary">
+                    {t('admin.price.amount')}
+                  </Typography>
+                  <Tooltip title={t('admin.price.amountTip')} placement="top" arrow>
+                    <InfoOutlined fontSize="small" sx={{ color: 'text.secondary' }} />
+                  </Tooltip>
+                </Stack>
+              </FormLabel>
               <TextField
                 {...field}
                 type="number"
                 size="small"
-                sx={{ width: 174 }}
+                sx={{ width: INPUT_WIDTH }}
                 error={!!getFieldState(getFieldName('unit_amount')).error}
                 helperText={getFieldState(getFieldName('unit_amount')).error?.message}
                 InputProps={{
@@ -127,6 +157,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
           <Controller
             name={getFieldName('transform_quantity.divide_by')}
             control={control}
+            disabled={isLocked}
             render={({ field }) => (
               <Box ml={2}>
                 <FormLabel>&nbsp;</FormLabel>
@@ -134,7 +165,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                   {...field}
                   type="number"
                   size="small"
-                  sx={{ width: 174 }}
+                  sx={{ width: INPUT_WIDTH }}
                   InputProps={{
                     startAdornment: <InputAdornment position="start">{t('common.per')}</InputAdornment>,
                     endAdornment: <InputAdornment position="end">{t('common.unit')}</InputAdornment>,
@@ -145,13 +176,64 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
           />
         )}
       </Stack>
+      {hasMoreCurrency(settings.paymentMethods) && (
+        <Stack direction="column" spacing={2}>
+          {currencies.fields.map((item: any, index: number) => {
+            if (item.currency_id === settings.baseCurrency.id) {
+              return null;
+            }
+            const fieldName = getFieldName(`currency_options.${index}.unit_amount`);
+            return (
+              <Stack key={item.currency_id} direction="row" alignItems="center" spacing={1}>
+                <Controller
+                  name={fieldName}
+                  control={control}
+                  rules={{ required: t('admin.price.unit_amount.required') }}
+                  disabled={isLocked}
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      type="number"
+                      size="small"
+                      sx={{ width: INPUT_WIDTH }}
+                      error={!!getFieldState(fieldName).error}
+                      helperText={getFieldState(fieldName).error?.message}
+                      InputProps={{
+                        endAdornment: (
+                          <InputAdornment position="end">
+                            {findCurrency(settings.paymentMethods, item.currency_id)?.symbol}
+                          </InputAdornment>
+                        ),
+                      }}
+                    />
+                  )}
+                />
+                <IconButton size="small" disabled={isLocked} onClick={() => currencies.remove(index)}>
+                  <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
+                </IconButton>
+              </Stack>
+            );
+          })}
+          {isLocked === false && (
+            <CurrencySelect
+              mode="waiting"
+              hasSelected={(currency) =>
+                currencies.fields.some((x: any) => x.currency_id === currency.id) ||
+                currency.id === settings.baseCurrency.id
+              }
+              onSelect={(currencyId) => currencies.append({ currency_id: currencyId, unit_amount: 0 })}
+            />
+          )}
+        </Stack>
+      )}
       <Controller
         name={getFieldName('type')}
         control={control}
+        disabled={isLocked}
         render={({ field }) => (
           <ToggleButtonGroup {...field} onChange={(_, value: string) => setValue(field.name, value)} exclusive>
-            <ToggleButton value="one_time">One Time</ToggleButton>
             <ToggleButton value="recurring">Recurring</ToggleButton>
+            <ToggleButton value="one_time">One Time</ToggleButton>
           </ToggleButtonGroup>
         )}
       />
@@ -160,6 +242,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
           <Controller
             name={getFieldName('recurring.interval_config')}
             control={control}
+            disabled={isLocked}
             render={({ field }) => (
               <Box>
                 <FormLabel>{t('admin.price.recurring.interval')}</FormLabel>
@@ -168,10 +251,10 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                   onChange={(e) => {
                     const [interval, count] = e.target.value.split('_');
                     setValue(getFieldName('recurring.interval'), interval);
-                    setValue(getFieldName('recurring.interval_count'), count);
+                    setValue(getFieldName('recurring.interval_count'), +count);
                     setValue(getFieldName('recurring.interval_config'), e.target.value);
                   }}
-                  sx={{ width: 174 }}
+                  sx={{ width: INPUT_WIDTH }}
                   size="small">
                   {!livemode && <MenuItem value="hour_1">Hourly</MenuItem>}
                   <MenuItem value="day_1">Daily</MenuItem>
@@ -189,6 +272,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
             <Controller
               name={getFieldName('recurring.interval_count')}
               control={control}
+              disabled={isLocked}
               render={({ field }) => (
                 <Box ml={2}>
                   <FormLabel>&nbsp;</FormLabel>
@@ -196,7 +280,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                     {...field}
                     type="number"
                     size="small"
-                    sx={{ width: 174 }}
+                    sx={{ width: INPUT_WIDTH }}
                     InputProps={{
                       startAdornment: <InputAdornment position="start">{t('common.every')}</InputAdornment>,
                       endAdornment: (
@@ -218,18 +302,27 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
       )}
       {isRecurring && (
         <Controller
-          name={getFieldName('recurring.metered')}
+          name={getFieldName('recurring.usage_type')}
           control={control}
+          disabled={isLocked}
           render={({ field }) => (
             <FormControlLabel
+              sx={{ alignItems: 'flex-start' }}
               control={
                 <Checkbox
                   checked={isMetered}
                   {...field}
-                  onChange={(_, checked: boolean) => setValue(field.name, checked)}
+                  onChange={(_, checked: boolean) => setValue(field.name, checked ? 'metered' : 'licensed')}
                 />
               }
-              label={t('admin.price.recurring.metered')}
+              label={
+                <Stack>
+                  <Typography color="text.primary">{t('admin.price.recurring.metered')}</Typography>
+                  <Typography color="text.secondary" sx={{ maxWidth: '80%' }}>
+                    {t('admin.price.recurring.meteredTip')}
+                  </Typography>
+                </Stack>
+              }
             />
           )}
         />
@@ -238,10 +331,11 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
         <Controller
           name={getFieldName('recurring.aggregate_usage')}
           control={control}
+          disabled={isLocked}
           render={({ field }) => (
             <Box>
               <FormLabel>{t('admin.price.recurring.aggregate')}</FormLabel>
-              <Select {...field} sx={{ width: 362 }} size="small">
+              <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>
@@ -252,7 +346,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
         />
       )}
       {!simple && (
-        <Collapse trigger={t('admin.price.additional')}>
+        <Collapse trigger={t('admin.price.additional')} expanded={isLocked}>
           <Stack spacing={2} alignItems="flex-start">
             <Controller
               name={getFieldName('nickname')}
@@ -260,7 +354,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
               render={({ field }) => (
                 <Box>
                   <FormLabel>{t('admin.price.nickname.label')}</FormLabel>
-                  <TextField {...field} size="small" />
+                  <TextField {...field} size="small" sx={{ width: INPUT_WIDTH }} />
                 </Box>
               )}
             />
@@ -270,7 +364,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
               render={({ field }) => (
                 <Box>
                   <FormLabel>{t('admin.price.lookup_key.label')}</FormLabel>
-                  <TextField {...field} size="small" />
+                  <TextField {...field} size="small" sx={{ width: INPUT_WIDTH }} />
                 </Box>
               )}
             />

package/src/components/product/add-price.tsx

@@ -37,7 +37,7 @@ export default function AddPrice({
       open
       disableEscapeKeyDown
       fullWidth
-      maxWidth="md"
+      maxWidth="sm"
       onClose={() => onCancel(null)}
       showCloseButton={false}
       title={t('admin.price.add')}

package/src/components/product/edit-price.tsx

@@ -3,7 +3,7 @@ import Dialog from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Button, CircularProgress, Stack } from '@mui/material';
 import { fromUnitToToken } from '@ocap/util';
-import { isEmpty } from 'lodash';
+import { cloneDeep, isEmpty } from 'lodash';
 import type { EventHandler } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
@@ -26,6 +26,7 @@ export default function EditPrice({
     defaultValues: {
       ...price,
       unit_amount: fromUnitToToken(price.unit_amount, price.currency.decimal),
+      // @ts-ignore
       model: getPricingModel(price as any),
       metadata: isEmpty(price.metadata)
         ? []
@@ -34,10 +35,13 @@ export default function EditPrice({
       recurring: price.recurring
         ? {
             ...price.recurring,
-            metered: price.recurring.usage_type === 'metered',
             interval_config: [price.recurring.interval, price.recurring.interval_count].join('_'),
           }
         : DEFAULT_PRICE.recurring,
+      currency_options: cloneDeep(price.currency_options).map((x: any) => {
+        x.unit_amount = fromUnitToToken(x.unit_amount, x.currency.decimal);
+        return x;
+      }),
     },
   });
 

package/src/components/subscription/items/index.tsx

@@ -7,6 +7,7 @@ import { formatPrice } from '../../../libs/util';
 import Copyable from '../../copyable';
 import Table from '../../table';
 import LineItemActions from './actions';
+import UsageRecords from './usage-records';
 
 type ListProps = {
   data: TSubscriptionItemExpanded[];
@@ -44,7 +45,7 @@ export default function SubscriptionItemList({ data, currency }: ListProps) {
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data[index] as TSubscriptionItemExpanded;
-          return <Copyable text={item?.id} />;
+          return <Copyable text={item.id} />;
         },
       },
     },
@@ -53,8 +54,8 @@ export default function SubscriptionItemList({ data, currency }: ListProps) {
       name: 'quantity',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
-          const item = data[index];
-          return item?.quantity;
+          const item = data[index] as TSubscriptionItemExpanded;
+          return item.price.recurring?.usage_type === 'metered' ? <UsageRecords id={item.id} /> : item.quantity;
         },
       },
     },
@@ -66,9 +67,9 @@ export default function SubscriptionItemList({ data, currency }: ListProps) {
         sort: false,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data[index] as TSubscriptionItemExpanded;
-          return (
-            <Typography>{formatPrice(item.price, currency, item?.price.product.unit_label, item?.quantity)}</Typography>
-          );
+          return item.price.recurring?.usage_type === 'metered'
+            ? t('admin.subscription.usage.vary')
+            : formatPrice(item.price, currency, item?.price.product.unit_label, item?.quantity);
         },
       },
     },