payment-kit 1.13.15

package/src/components/price/actions.tsx

@@ -0,0 +1,21 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+import Actions from '../actions';
+
+type PriceActionProps = {
+  onDuplicate: Function;
+  onRemove: Function;
+};
+
+export default function PriceActions(props: PriceActionProps) {
+  const { t } = useLocaleContext();
+
+  return (
+    <Actions
+      actions={[
+        { label: t('admin.price.duplicate'), handler: props.onDuplicate, color: 'primary' },
+        { label: t('admin.price.remove'), handler: props.onRemove, color: 'error' },
+      ]}
+    />
+  );
+}

package/src/components/price/form.tsx

@@ -0,0 +1,292 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { InferFormType, PriceRecurring, TPriceExpanded } from '@did-pay/types';
+import {
+  Box,
+  Checkbox,
+  FormControlLabel,
+  FormLabel,
+  InputAdornment,
+  MenuItem,
+  Select,
+  Stack,
+  TextField,
+  ToggleButton,
+  ToggleButtonGroup,
+} from '@mui/material';
+import { styled } from '@mui/system';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
+import type { LiteralUnion } from 'type-fest';
+
+import { useSettingsContext } from '../../contexts/settings';
+import Collapse from '../collapse';
+
+export type Price = Omit<InferFormType<TPriceExpanded>, 'product_id' | 'locked'> & {
+  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'> = {
+  model: 'standard',
+  billing_scheme: '',
+  currency_id: '',
+  nickname: '',
+  type: 'one_time',
+  unit_amount: '0',
+  lookup_key: '',
+  recurring: {
+    interval_config: 'month_1',
+    interval: 'month',
+    interval_count: 1,
+    metered: false,
+    usage_type: '',
+    aggregate_usage: 'sum',
+  },
+  transform_quantity: {
+    divide_by: 1,
+    round: 'up',
+  },
+  tiers: [],
+  metadata: [],
+};
+
+type PriceFormProps = {
+  prefix?: string;
+  simple?: boolean;
+};
+
+PriceForm.defaultProps = {
+  prefix: '',
+  simple: false,
+};
+
+// FIXME: @wangshijun i18n
+export default function PriceForm({ prefix, simple }: PriceFormProps) {
+  const getFieldName = (name: string) => (prefix ? `${prefix}.${name}` : name);
+
+  const { t } = useLocaleContext();
+  const { control, setValue, getFieldState } = useFormContext();
+  const { settings, livemode } = useSettingsContext();
+
+  const isRecurring = useWatch({ control, name: getFieldName('type') }) === 'recurring';
+  const isMetered = useWatch({ control, name: getFieldName('recurring.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}>
+      <Controller
+        rules={{ required: true }}
+        name={getFieldName('model')}
+        control={control}
+        render={({ field }) => (
+          <Box sx={{ width: 174 }}>
+            <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="graduated" disabled>
+                Graduated Pricing
+              </MenuItem>
+              <MenuItem value="volume" disabled>
+                Volume Pricing
+              </MenuItem>
+              <MenuItem value="custom" disabled>
+                Customer choose price
+              </MenuItem>
+            </Select>
+          </Box>
+        )}
+      />
+      <Stack direction="row">
+        <Controller
+          name={getFieldName('unit_amount')}
+          control={control}
+          rules={{ required: t('admin.price.unit_amount.required'), min: t('admin.price.unit_amount.positive') }}
+          render={({ field }) => (
+            <Box>
+              <FormLabel>{t('admin.price.amount')}</FormLabel>
+              <TextField
+                {...field}
+                type="number"
+                size="small"
+                sx={{ width: 174 }}
+                error={!!getFieldState(getFieldName('unit_amount')).error}
+                helperText={getFieldState(getFieldName('unit_amount')).error?.message}
+                InputProps={{
+                  endAdornment: <InputAdornment position="end">{settings.baseCurrency.symbol}</InputAdornment>,
+                }}
+              />
+            </Box>
+          )}
+        />
+        {model === 'package' && (
+          <Controller
+            name={getFieldName('transform_quantity.divide_by')}
+            control={control}
+            render={({ field }) => (
+              <Box ml={2}>
+                <FormLabel>&nbsp;</FormLabel>
+                <TextField
+                  {...field}
+                  type="number"
+                  size="small"
+                  sx={{ width: 174 }}
+                  InputProps={{
+                    startAdornment: <InputAdornment position="start">{t('common.per')}</InputAdornment>,
+                    endAdornment: <InputAdornment position="end">{t('common.unit')}</InputAdornment>,
+                  }}
+                />
+              </Box>
+            )}
+          />
+        )}
+      </Stack>
+      <Controller
+        name={getFieldName('type')}
+        control={control}
+        render={({ field }) => (
+          <ToggleButtonGroup {...field} onChange={(_, value: string) => setValue(field.name, value)} exclusive>
+            <ToggleButton value="one_time">One Time</ToggleButton>
+            <ToggleButton value="recurring">Recurring</ToggleButton>
+          </ToggleButtonGroup>
+        )}
+      />
+      {isRecurring && (
+        <Stack direction="row">
+          <Controller
+            name={getFieldName('recurring.interval_config')}
+            control={control}
+            render={({ field }) => (
+              <Box>
+                <FormLabel>{t('admin.price.recurring.interval')}</FormLabel>
+                <Select
+                  {...field}
+                  onChange={(e) => {
+                    const [interval, count] = e.target.value.split('_');
+                    setValue(getFieldName('recurring.interval'), interval);
+                    setValue(getFieldName('recurring.interval_count'), count);
+                    setValue(getFieldName('recurring.interval_config'), e.target.value);
+                  }}
+                  sx={{ width: 174 }}
+                  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>
+                </Select>
+              </Box>
+            )}
+          />
+          {isCustomInterval && (
+            <Controller
+              name={getFieldName('recurring.interval_count')}
+              control={control}
+              render={({ field }) => (
+                <Box ml={2}>
+                  <FormLabel>&nbsp;</FormLabel>
+                  <TextField
+                    {...field}
+                    type="number"
+                    size="small"
+                    sx={{ width: 174 }}
+                    InputProps={{
+                      startAdornment: <InputAdornment position="start">{t('common.every')}</InputAdornment>,
+                      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>
+                          </select>
+                        </InputAdornment>
+                      ),
+                    }}
+                  />
+                </Box>
+              )}
+            />
+          )}
+        </Stack>
+      )}
+      {isRecurring && (
+        <Controller
+          name={getFieldName('recurring.metered')}
+          control={control}
+          render={({ field }) => (
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={isMetered}
+                  {...field}
+                  onChange={(_, checked: boolean) => setValue(field.name, checked)}
+                />
+              }
+              label={t('admin.price.recurring.metered')}
+            />
+          )}
+        />
+      )}
+      {isRecurring && isMetered && (
+        <Controller
+          name={getFieldName('recurring.aggregate_usage')}
+          control={control}
+          render={({ field }) => (
+            <Box>
+              <FormLabel>{t('admin.price.recurring.aggregate')}</FormLabel>
+              <Select {...field} sx={{ width: 362 }} 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>
+              </Select>
+            </Box>
+          )}
+        />
+      )}
+      {!simple && (
+        <Collapse trigger={t('admin.price.additional')}>
+          <Stack spacing={2} alignItems="flex-start">
+            <Controller
+              name={getFieldName('nickname')}
+              control={control}
+              render={({ field }) => (
+                <Box>
+                  <FormLabel>{t('admin.price.nickname.label')}</FormLabel>
+                  <TextField {...field} size="small" />
+                </Box>
+              )}
+            />
+            <Controller
+              name={getFieldName('lookup_key')}
+              control={control}
+              render={({ field }) => (
+                <Box>
+                  <FormLabel>{t('admin.price.lookup_key.label')}</FormLabel>
+                  <TextField {...field} size="small" />
+                </Box>
+              )}
+            />
+          </Stack>
+        </Collapse>
+      )}
+    </Root>
+  );
+}
+
+const Root = styled(Stack)`
+  select {
+    border: none;
+    &:active,
+    &:focus {
+      border: none;
+    }
+  }
+`;

package/src/components/product/actions.tsx

@@ -0,0 +1,125 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TProduct } from '@did-pay/types';
+import { useSetState } from 'ahooks';
+import type { LiteralUnion } from 'type-fest';
+
+import api from '../../libs/api';
+import { formatError } from '../../libs/util';
+import Actions from '../actions';
+import ConfirmDialog from '../confirm';
+import EditProduct from './edit';
+
+type ProductActionProps = {
+  data: TProduct;
+  onChange: (action: string) => void;
+  variant?: LiteralUnion<'compact' | 'normal', string>;
+};
+
+ProductActions.defaultProps = {
+  variant: 'compact',
+};
+
+export default function ProductActions({ data, variant, onChange }: ProductActionProps) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    action: '',
+    loading: false,
+  });
+
+  const onUpdate = async (updates: TProduct) => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/products/${data.id}`, updates).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+  const onArchive = async () => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/products/${data.id}/archive`).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+  const onRemove = async () => {
+    try {
+      setState({ loading: true });
+      await api.delete(`/api/products/${data.id}`).then((res) => res.data);
+      Toast.success(t('common.removed'));
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+
+  return (
+    <>
+      <Actions
+        variant={variant}
+        actions={[
+          {
+            label: t('admin.product.edit'),
+            handler: () => setState({ action: 'edit' }),
+            color: 'primary',
+            disabled: !data.active,
+            divider: true,
+          },
+          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' },
+        ].filter(Boolean)}
+      />
+      {state.action === 'edit' && (
+        <EditProduct
+          product={data}
+          loading={state.loading}
+          onSave={onUpdate}
+          onCancel={() => setState({ action: '' })}
+        />
+      )}
+      {state.action === 'archive' && (
+        <ConfirmDialog
+          onConfirm={onArchive}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.product.archive')}
+          message={t('admin.product.archiveTip')}
+          loading={state.loading}
+        />
+      )}
+      {state.action === 'unarchive' && (
+        <ConfirmDialog
+          onConfirm={onArchive}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.product.unarchive')}
+          message={t('admin.product.unarchiveTip')}
+          loading={state.loading}
+        />
+      )}
+      {state.action === 'remove' && (
+        <ConfirmDialog
+          onConfirm={onRemove}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.product.remove')}
+          message={t('admin.product.removeTip')}
+          loading={state.loading}
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,59 @@
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Button, CircularProgress, Stack } from '@mui/material';
+import type { EventHandler } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import { useSettingsContext } from '../../contexts/settings';
+import PriceForm, { DEFAULT_PRICE, Price } from '../price/form';
+
+export default function AddPrice({
+  loading,
+  onSave,
+  onCancel,
+}: {
+  loading: boolean;
+  onSave: EventHandler<any>;
+  onCancel: EventHandler<any>;
+}) {
+  const { t } = useLocaleContext();
+  const { settings } = useSettingsContext();
+  const methods = useForm<Price>({
+    defaultValues: {
+      ...DEFAULT_PRICE,
+      currency_id: settings.baseCurrency.id,
+    },
+  });
+
+  const { handleSubmit, reset } = methods;
+  const onSubmit = async (data: any) => {
+    await handleSubmit(onSave)(data);
+    reset();
+    onCancel(null);
+  };
+
+  return (
+    <Dialog
+      open
+      disableEscapeKeyDown
+      fullWidth
+      maxWidth="md"
+      onClose={() => onCancel(null)}
+      showCloseButton={false}
+      title={t('admin.price.add')}
+      actions={
+        <Stack direction="row">
+          <Button size="small" sx={{ mr: 2 }} onClick={onCancel}>
+            {t('common.cancel')}
+          </Button>
+          <Button variant="contained" color="primary" size="small" disabled={loading} onClick={onSubmit}>
+            {loading && <CircularProgress size="small" />} {t('common.save')}
+          </Button>
+        </Stack>
+      }>
+      <FormProvider {...methods}>
+        <PriceForm />
+      </FormProvider>
+    </Dialog>
+  );
+}

package/src/components/product/create.tsx

@@ -0,0 +1,97 @@
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { Button, CircularProgress, Stack } from '@mui/material';
+import { useSetState } from 'ahooks';
+import type { EventHandler } from 'react';
+import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
+
+import { useSettingsContext } from '../../contexts/settings';
+import api from '../../libs/api';
+import { formatError } from '../../libs/util';
+import PriceForm, { DEFAULT_PRICE } from '../price/form';
+import ProductForm, { Product } from './form';
+
+export default function CreateProduct({
+  simple,
+  onSave,
+  onCancel,
+}: {
+  simple?: boolean;
+  onSave: EventHandler<any>;
+  onCancel: EventHandler<any>;
+}) {
+  const { t } = useLocaleContext();
+  const { settings } = useSettingsContext();
+  const [state, setState] = useSetState({ loading: false });
+  const methods = useForm<Product>({
+    defaultValues: {
+      type: 'service',
+      name: '',
+      description: '',
+      images: [],
+      statement_descriptor: window.blocklet.appName,
+      unit_label: '',
+      features: [],
+      prices: [{ ...DEFAULT_PRICE, currency_id: settings.baseCurrency.id }],
+      metadata: [],
+    },
+  });
+
+  const { control, handleSubmit, reset } = methods;
+  const prices = useFieldArray({ control, name: 'prices' });
+
+  const onCreate = (data: Product) => {
+    setState({ loading: true });
+    api
+      .post('/api/products', data)
+      .then(() => {
+        Toast.success(t('admin.product.saved'));
+      })
+      .catch((err) => {
+        console.error(err);
+        Toast.error(formatError(err));
+      })
+      .finally(() => {
+        setState({ loading: false });
+      });
+  };
+
+  const onSubmit = async (data: any) => {
+    await handleSubmit(onCreate)(data);
+    await reset();
+    await onSave(null);
+  };
+
+  return (
+    <Dialog
+      open
+      disableEscapeKeyDown
+      fullWidth
+      maxWidth="md"
+      onClose={() => onCancel(null)}
+      showCloseButton={false}
+      title={t('admin.product.add')}
+      actions={
+        <Stack direction="row">
+          <Button size="small" sx={{ mr: 2 }} onClick={onCancel}>
+            {t('common.cancel')}
+          </Button>
+          <Button variant="contained" color="primary" size="small" disabled={state.loading} onClick={onSubmit}>
+            {state.loading && <CircularProgress size="small" />} {t('common.save')}
+          </Button>
+        </Stack>
+      }>
+      <FormProvider {...methods}>
+        <ProductForm simple={simple} />
+        {prices.fields.map((price, index) => (
+          <PriceForm key={price.id} prefix={`prices.${index}`} simple={simple} />
+        ))}
+      </FormProvider>
+    </Dialog>
+  );
+}
+
+CreateProduct.defaultProps = {
+  simple: true,
+};

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

@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/indent */
+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 type { EventHandler } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import { getPricingModel } from '../../libs/util';
+import PriceForm, { DEFAULT_PRICE, Price } from '../price/form';
+
+export default function EditPrice({
+  price,
+  loading,
+  onSave,
+  onCancel,
+}: {
+  price: Price;
+  loading: boolean;
+  onSave: EventHandler<any>;
+  onCancel: EventHandler<any>;
+}) {
+  const { t } = useLocaleContext();
+  const methods = useForm<Price>({
+    defaultValues: {
+      ...price,
+      unit_amount: fromUnitToToken(price.unit_amount, price.currency.decimal),
+      model: getPricingModel(price as any),
+      metadata: isEmpty(price.metadata)
+        ? []
+        : // @ts-ignore
+          Object.keys(price.metadata).map((x) => ({ key: x, value: price.metadata[x] })),
+      recurring: price.recurring
+        ? {
+            ...price.recurring,
+            metered: price.recurring.usage_type === 'metered',
+            interval_config: [price.recurring.interval, price.recurring.interval_count].join('_'),
+          }
+        : DEFAULT_PRICE.recurring,
+    },
+  });
+
+  const { handleSubmit, reset } = methods;
+  const onSubmit = async (data: any) => {
+    await handleSubmit(onSave)(data);
+    reset();
+    onCancel(null);
+  };
+
+  return (
+    <Dialog
+      open
+      disableEscapeKeyDown
+      fullWidth
+      maxWidth="sm"
+      onClose={() => onCancel(null)}
+      showCloseButton={false}
+      title={t('admin.price.edit')}
+      actions={
+        <Stack direction="row">
+          <Button size="small" sx={{ mr: 2 }} onClick={onCancel}>
+            {t('common.cancel')}
+          </Button>
+          <Button variant="contained" color="primary" size="small" disabled={loading} onClick={onSubmit}>
+            {loading && <CircularProgress size="small" />} {t('common.save')}
+          </Button>
+        </Stack>
+      }>
+      <FormProvider {...methods}>
+        <PriceForm />
+      </FormProvider>
+    </Dialog>
+  );
+}