payment-kit 1.13.15

package/src/components/product/edit.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable @typescript-eslint/indent */
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TProduct } from '@did-pay/types';
+import { Button, CircularProgress, Stack } from '@mui/material';
+import { isEmpty } from 'lodash';
+import type { EventHandler } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import type { Product } from './form';
+import ProductForm from './form';
+
+export default function EditProduct({
+  product,
+  loading,
+  onSave,
+  onCancel,
+}: {
+  product: TProduct;
+  loading: boolean;
+  onSave: EventHandler<any>;
+  onCancel: EventHandler<any>;
+}) {
+  const { t } = useLocaleContext();
+  const methods = useForm<Product>({
+    defaultValues: {
+      ...product,
+      metadata: isEmpty(product.metadata)
+        ? []
+        : // @ts-ignore
+          Object.keys(product.metadata).map((x) => ({ key: x, value: product.metadata[x] })),
+      prices: [],
+    },
+  });
+
+  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.product.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}>
+        <ProductForm />
+      </FormProvider>
+    </Dialog>
+  );
+}

package/src/components/product/features.tsx

@@ -0,0 +1,32 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { AddOutlined, DeleteOutlineOutlined } from '@mui/icons-material';
+import { Box, Button, IconButton, TextField, Typography } from '@mui/material';
+import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+
+export default function MetadataForm() {
+  const { t } = useLocaleContext();
+  const { control } = useFormContext();
+  const features = useFieldArray({ control, name: 'features' });
+  return (
+    <Box sx={{ width: 1 }}>
+      <Typography>{t('admin.product.features.label')}</Typography>
+      {features.fields.map((feature, index) => (
+        <Box key={feature.id} mt={2} sx={{ width: 1 }}>
+          <Controller
+            render={({ field }) => <TextField {...field} sx={{ width: '80%' }} size="small" />}
+            name={`features.${index}.name`}
+            control={control}
+          />
+          <IconButton size="small" sx={{ ml: 1 }} onClick={() => features.remove(index)}>
+            <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
+          </IconButton>
+        </Box>
+      ))}
+      <Box mt={features.fields.length ? 2 : 1}>
+        <Button size="small" variant="outlined" color="inherit" onClick={() => features.append({ name: '' })}>
+          <AddOutlined fontSize="small" /> {t('admin.product.features.add')}
+        </Button>
+      </Box>
+    </Box>
+  );
+}

package/src/components/product/form.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { InferFormType, TProduct } from '@did-pay/types';
+import { Box, Stack, Typography } from '@mui/material';
+import { useFormContext, useWatch } from 'react-hook-form';
+
+import Collapse from '../collapse';
+import TextInput from '../input';
+import MetadataForm from '../metadata/form';
+import type { Price } from '../price/form';
+import Uploader from '../uploader';
+import ProductFeatures from './features';
+
+export type Product = InferFormType<TProduct> & {
+  prices: Price[];
+};
+
+type Props = {
+  simple?: boolean;
+};
+
+export default function ProductForm(props: Props) {
+  const { t } = useLocaleContext();
+  const { control, setValue, formState } = useFormContext();
+  const images = useWatch({ control, name: 'images' });
+
+  const onUploaded = (result: any) => {
+    const tmp = new URL(result.url);
+    setValue('images', [tmp.pathname]);
+  };
+
+  return (
+    <Stack spacing={2} mb={3} direction="row" alignItems="flex-start">
+      <Stack spacing={2} flex={2} alignItems="flex-start">
+        <TextInput
+          name="name"
+          rules={{ required: t('admin.product.name.required') }}
+          label={t('admin.product.name.label')}
+          placeholder={t('admin.product.name.placeholder')}
+          error={!!formState.errors.name}
+          helperText={formState.errors.name?.message as string}
+          autoFocus
+        />
+        <TextInput
+          name="description"
+          rules={{ required: t('admin.product.description.required') }}
+          label={t('admin.product.description.label')}
+          placeholder={t('admin.product.description.placeholder')}
+          error={!!formState.errors.description}
+          helperText={formState.errors.description?.message as string}
+          multiline
+          minRows={2}
+          maxRows={4}
+        />
+        <Collapse trigger={t('admin.product.additional')}>
+          <Stack spacing={2} alignItems="flex-start">
+            <TextInput name="statement_descriptor" label={t('admin.product.statement_descriptor.label')} />
+            <TextInput name="unit_label" label={t('admin.product.unit_label.label')} />
+            {!props.simple && <ProductFeatures />}
+            {!props.simple && <MetadataForm title={t('common.metadata.label')} />}
+          </Stack>
+        </Collapse>
+      </Stack>
+      <Box flex={1}>
+        <Stack direction="column">
+          <Typography mb={1}>{t('admin.product.image.label')}</Typography>
+          <Uploader onUploaded={onUploaded} preview={images[0]} />
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+ProductForm.defaultProps = {
+  simple: false,
+};

package/src/components/relative-time.tsx

@@ -0,0 +1,41 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Tooltip, Typography } from '@mui/material';
+import prettyMs from 'pretty-ms-i18n';
+
+import { formatPrettyMsLocale, formatToDatetime } from '../libs/util';
+
+export default function RelativeTime({ value, ...rest }: { value: string | number }) {
+  const { t, locale } = useLocaleContext();
+  if (!value) {
+    return '-';
+  }
+
+  const prettyOption = {
+    locale: formatPrettyMsLocale(locale),
+    compact: true,
+  };
+
+  const valTime = new Date(value).getTime();
+  const now = Date.now();
+
+  if (valTime > now) {
+    const time = prettyMs(valTime - now, prettyOption);
+
+    return (
+      <Tooltip title={formatToDatetime(value, locale)} placement="top-end" enterTouchDelay={0}>
+        <Typography component="span" {...rest}>
+          {t('common.afterTime', { time })}
+        </Typography>
+      </Tooltip>
+    );
+  }
+
+  const time = prettyMs(now - valTime, prettyOption);
+  return (
+    <Tooltip title={formatToDatetime(value, locale)} placement="top-end" enterTouchDelay={0}>
+      <Typography component="span" sx={{ cursor: 'pointer' }} {...rest}>
+        {t('common.timeAgo', { time })}
+      </Typography>
+    </Tooltip>
+  );
+}

package/src/components/section/header.tsx

@@ -0,0 +1,29 @@
+import { Stack, Typography } from '@mui/material';
+import type { ReactNode } from 'react';
+
+type Props = {
+  title: string;
+  children?: ReactNode;
+  mb?: number;
+};
+
+export default function SectionHeader(props: Props) {
+  return (
+    <Stack
+      className="section-header"
+      direction="row"
+      justifyContent="space-between"
+      alignItems="center"
+      sx={{ mb: props.mb, pb: 1, width: 1, borderBottom: '1px solid #eee' }}>
+      <Typography variant="h6" sx={{ fontWeight: 600 }}>
+        {props.title}
+      </Typography>
+      {props.children}
+    </Stack>
+  );
+}
+
+SectionHeader.defaultProps = {
+  children: null,
+  mb: 1,
+};

package/src/components/status.tsx

@@ -0,0 +1,12 @@
+import { Chip, ChipProps } from '@mui/material';
+
+export default function Status(props: ChipProps) {
+  return (
+    <Chip
+      {...props}
+      size="small"
+      variant="outlined"
+      sx={{ ...(props.sx || {}), borderRadius: '4px', textTransform: 'capitalize' }}
+    />
+  );
+}

package/src/components/subscription/actions/cancel.tsx

@@ -0,0 +1,66 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TSubscriptionExpanded } from '@did-pay/types';
+import { Box, FormControlLabel, Radio, RadioGroup, Stack, TextField, Typography } from '@mui/material';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
+
+import { formatTime } from '../../../libs/util';
+
+export default function SubscriptionCancelForm({ data }: { data: TSubscriptionExpanded }) {
+  const { t } = useLocaleContext();
+  const { control, formState } = useFormContext();
+  const isCustom = useWatch({ control, name: 'cancel.at' }) === 'custom';
+
+  return (
+    <Box sx={{ width: 400 }}>
+      <Stack direction="row" spacing={3} alignItems="flex-start">
+        <Typography>{t('admin.subscription.cancel.at.title')}</Typography>
+        <Stack>
+          <Controller
+            name="cancel.at"
+            control={control}
+            render={({ field }) => (
+              <RadioGroup {...field}>
+                <FormControlLabel
+                  value="now"
+                  control={<Radio checked={field.value === 'now'} />}
+                  label={t('admin.subscription.cancel.at.now', { date: formatTime(new Date()) })}
+                />
+                <FormControlLabel
+                  value="current_period_end"
+                  control={<Radio checked={field.value === 'current_period_end'} />}
+                  label={t('admin.subscription.cancel.at.current_period_end', {
+                    date: formatTime(new Date(data.current_period_end * 1000)),
+                  })}
+                />
+                <FormControlLabel
+                  value="custom"
+                  control={<Radio checked={field.value === 'custom'} />}
+                  label={t('admin.subscription.cancel.at.custom')}
+                />
+              </RadioGroup>
+            )}
+          />
+          {isCustom && (
+            <Controller
+              name="cancel.time"
+              rules={{ required: isCustom }}
+              control={control}
+              render={({ field }) => (
+                <TextField
+                  size="small"
+                  variant="outlined"
+                  type="datetime-local"
+                  {...field}
+                  // @ts-ignore
+                  error={!!formState.errors.cancel?.time}
+                  // @ts-ignore
+                  helperText={formState.errors.cancel?.time?.message as string}
+                />
+              )}
+            />
+          )}
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}

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

@@ -0,0 +1,172 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TSubscriptionExpanded } from '@did-pay/types';
+import { useSetState } from 'ahooks';
+import { FormProvider, useForm, useFormContext } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+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 SubscriptionCancelForm from './cancel';
+import SubscriptionPauseForm from './pause';
+
+type Props = {
+  data: TSubscriptionExpanded;
+  variant?: LiteralUnion<'compact' | 'normal', string>;
+  onChange: (action: string) => void;
+};
+
+SubscriptionActionsInner.defaultProps = {
+  variant: 'compact',
+};
+
+function SubscriptionActionsInner({ data, variant, onChange }: Props) {
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+  const { reset, getValues, setError } = useFormContext();
+  const [state, setState] = useSetState({
+    action: '',
+    loading: false,
+  });
+
+  const createHandler = (action: string) => {
+    return async () => {
+      const values = getValues();
+      if (action === 'cancel') {
+        if (values.cancel.at === 'custom' && !values.cancel.time) {
+          setError('cancel.time', { type: 'required', message: t('admin.subscription.cancel.required') });
+          return;
+        }
+      }
+      if (action === 'pause') {
+        if (values.pause.type === 'custom' && !values.pause.resumesAt) {
+          setError('pause.resumesAt', { type: 'required', message: t('admin.subscription.pause.required') });
+          return;
+        }
+      }
+
+      try {
+        setState({ loading: true });
+        await api.put(`/api/subscriptions/${data.id}/${action}`, values[action] || {}).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 handleCancel = () => {
+    setState({ action: '' });
+    reset();
+  };
+
+  const resume = {
+    label: t('admin.subscription.resume'),
+    handler: () => setState({ action: 'resume' }),
+    disabled: data.status === 'canceled',
+    color: 'primary',
+  };
+  const pause = {
+    label: t('admin.subscription.pause.title'),
+    handler: () => setState({ action: 'pause' }),
+    disabled: data.status === 'canceled',
+    color: 'primary',
+  };
+
+  const actions = [
+    {
+      label: t('admin.subscription.update'),
+      handler: () => setState({ action: 'update' }),
+      color: 'primary',
+      disabled: data.status === 'canceled',
+    },
+    data.status === 'paused' ? resume : pause,
+    {
+      label: t('admin.subscription.cancel.title'),
+      handler: () => setState({ action: 'cancel' }),
+      disabled: data.status === 'canceled',
+      color: 'error',
+      divider: true,
+    },
+    {
+      label: t('admin.customer.view'),
+      handler: () => navigate(`/admin/customers/${data.customer_id}`),
+      color: 'primary',
+    },
+  ];
+
+  if (variant === 'compact') {
+    actions.push({
+      label: t('admin.subscription.view'),
+      handler: () => navigate(`/admin/billing/${data.id}`),
+      color: 'primary',
+    });
+  }
+
+  return (
+    <>
+      <Actions variant={variant} actions={actions} />
+      {state.action === 'cancel' && (
+        <ConfirmDialog
+          onConfirm={createHandler('cancel')}
+          onCancel={handleCancel}
+          title={t('admin.subscription.cancel.title')}
+          message={<SubscriptionCancelForm data={data} />}
+          loading={state.loading}
+        />
+      )}
+      {state.action === 'pause' && (
+        <ConfirmDialog
+          onConfirm={createHandler('pause')}
+          onCancel={handleCancel}
+          title={t('admin.subscription.pause.title')}
+          message={<SubscriptionPauseForm />}
+          loading={state.loading}
+        />
+      )}
+      {state.action === 'resume' && (
+        <ConfirmDialog
+          onConfirm={createHandler('resume')}
+          onCancel={handleCancel}
+          title={t('admin.subscription.resume')}
+          message={t('admin.subscription.resumeTip')}
+          loading={state.loading}
+        />
+      )}
+    </>
+  );
+}
+
+export default function SubscriptionActions(props: Props) {
+  const methods = useForm({
+    defaultValues: {
+      cancel: {
+        at: 'now',
+        time: '',
+        refund: 'none',
+      },
+      pause: {
+        type: 'never',
+        resumesAt: '',
+        behavior: 'void',
+      },
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <SubscriptionActionsInner {...props} />
+    </FormProvider>
+  );
+}
+
+SubscriptionActions.defaultProps = {
+  variant: 'compact',
+};

package/src/components/subscription/actions/pause.tsx

@@ -0,0 +1,83 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { FormControlLabel, Radio, RadioGroup, Stack, TextField, Typography } from '@mui/material';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
+
+export default function SubscriptionPauseForm() {
+  const { t } = useLocaleContext();
+  const { control, formState } = useFormContext();
+  const isCustom = useWatch({ control, name: 'pause.type' }) === 'custom';
+
+  return (
+    <Stack direction="column" spacing={3} sx={{ width: 400 }}>
+      <Stack direction="row" spacing={3} alignItems="flex-start">
+        <Typography flex={1}>{t('admin.subscription.pause.type.title')}</Typography>
+        <Stack flex={2}>
+          <Controller
+            name="pause.type"
+            control={control}
+            render={({ field }) => (
+              <RadioGroup {...field}>
+                <FormControlLabel
+                  value="never"
+                  control={<Radio checked={field.value === 'never'} />}
+                  label={t('admin.subscription.pause.type.never')}
+                />
+                <FormControlLabel
+                  value="custom"
+                  control={<Radio checked={field.value === 'custom'} />}
+                  label={t('admin.subscription.pause.type.custom')}
+                />
+              </RadioGroup>
+            )}
+          />
+          {isCustom && (
+            <Controller
+              name="pause.resumesAt"
+              control={control}
+              render={({ field }) => (
+                <TextField
+                  size="small"
+                  variant="outlined"
+                  type="datetime-local"
+                  {...field}
+                  // @ts-ignore
+                  error={!!formState.errors.pause?.resumesAt}
+                  // @ts-ignore
+                  helperText={formState.errors.pause?.resumesAt?.message as string}
+                />
+              )}
+            />
+          )}
+        </Stack>
+      </Stack>
+      <Stack direction="row" spacing={3} alignItems="flex-start">
+        <Typography flex={1}>{t('admin.subscription.pause.behavior.title')}</Typography>
+        <Stack flex={2}>
+          <Controller
+            name="pause.behavior"
+            control={control}
+            render={({ field }) => (
+              <RadioGroup {...field}>
+                <FormControlLabel
+                  value="keep_as_draft"
+                  control={<Radio checked={field.value === 'keep_as_draft'} />}
+                  label={t('admin.subscription.pause.behavior.keep_as_draft')}
+                />
+                <FormControlLabel
+                  value="mark_uncollectible"
+                  control={<Radio checked={field.value === 'mark_uncollectible'} />}
+                  label={t('admin.subscription.pause.behavior.mark_uncollectible')}
+                />
+                <FormControlLabel
+                  value="void"
+                  control={<Radio checked={field.value === 'void'} />}
+                  label={t('admin.subscription.pause.behavior.void')}
+                />
+              </RadioGroup>
+            )}
+          />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TLineItemExpanded } from '@did-pay/types';
+import { useNavigate } from 'react-router-dom';
+
+import Actions from '../../actions';
+
+type Props = {
+  data: TLineItemExpanded;
+};
+
+export default function LineItemActions(props: Props) {
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+
+  return (
+    <Actions
+      actions={[
+        {
+          label: t('admin.price.view'),
+          handler: () => navigate(`/admin/products/${props.data.price_id}`),
+          color: 'primary',
+        },
+        {
+          label: t('admin.product.view'),
+          handler: () => navigate(`/admin/products/${props.data.price.product_id}`),
+          color: 'primary',
+        },
+      ]}
+    />
+  );
+}