payment-kit 1.13.15

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

@@ -0,0 +1,81 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TPaymentIntentExpanded } from '@did-pay/types';
+import { useSetState } from 'ahooks';
+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';
+
+type Props = {
+  data: TPaymentIntentExpanded;
+  variant?: LiteralUnion<'compact' | 'normal', string>;
+};
+
+PaymentIntentActions.defaultProps = {
+  variant: 'compact',
+};
+
+export default function PaymentIntentActions({ data, variant }: Props) {
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+  const [state, setState] = useSetState({
+    action: '',
+    loading: false,
+  });
+
+  const onRefund = async () => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/payment-intents/${data.id}/refund`).then((res) => res.data);
+      Toast.success(t('common.saved'));
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+
+  const actions = [
+    {
+      label: t('admin.paymentIntent.refund'),
+      handler: () => setState({ action: 'refund' }),
+      color: 'primary',
+      disabled: true,
+      divider: true,
+    },
+    {
+      label: t('admin.customer.view'),
+      handler: () => navigate(`/admin/customers/${data.customer_id}`),
+      color: 'primary',
+      disabled: false,
+    },
+  ];
+  if (variant === 'compact') {
+    actions.push({
+      label: t('admin.paymentIntent.view'),
+      handler: () => navigate(`/admin/payments/${data.customer_id}`),
+      color: 'primary',
+      disabled: false,
+    });
+  }
+
+  return (
+    <>
+      <Actions variant={variant} actions={actions} />
+      {state.action === 'refund' && (
+        <ConfirmDialog
+          onConfirm={onRefund}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.paymentIntent.refund')}
+          message={t('admin.paymentIntent.refundTip')}
+          loading={state.loading}
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,204 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { getDurableData } from '@arcblock/ux/lib/Datatable';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TPaymentIntentExpanded } from '@did-pay/types';
+import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import { fromUnitToToken } from '@ocap/util';
+import { useRequest } from 'ahooks';
+import { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+
+import api from '../../libs/api';
+import { formatTime, getPaymentIntentStatusColor } from '../../libs/util';
+import Status from '../status';
+import Table from '../table';
+import PaymentIntentActions from './actions';
+
+const fetchData = (params: Record<string, any> = {}): Promise<{ list: TPaymentIntentExpanded[]; count: number }> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/payment-intents?${search.toString()}`).then((res) => res.data);
+};
+
+type SearchProps = {
+  status: string;
+  pageSize: number;
+  page: number;
+  customer_id?: string;
+  invoice_id?: string;
+};
+
+type ListProps = {
+  features?: {
+    customer?: boolean;
+    toolbar?: boolean;
+    footer?: boolean;
+  };
+  customer_id?: string;
+  invoice_id?: string;
+};
+
+const getListKey = (props: ListProps) => {
+  if (props.customer_id) {
+    return `customer-payments-${props.customer_id}`;
+  }
+  if (props.invoice_id) {
+    return `invoice-payments-${props.invoice_id}`;
+  }
+
+  return 'payments';
+};
+
+PaymentList.defaultProps = {
+  features: {
+    customer: true,
+    filter: true,
+  },
+  customer_id: '',
+  invoice_id: '',
+};
+
+export default function PaymentList({ customer_id, invoice_id, features }: ListProps) {
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+
+  const listKey = getListKey({ customer_id, invoice_id });
+
+  const persisted = getDurableData(listKey);
+  const [search, setSearch] = useState<SearchProps>({
+    status: '',
+    customer_id,
+    invoice_id,
+    pageSize: persisted.rowsPerPage || 20,
+    page: persisted.page ? persisted.page + 1 : 1,
+  });
+
+  const { loading, error, data, refresh } = useRequest(() => fetchData(search));
+  useEffect(() => {
+    refresh();
+  }, [search, refresh]);
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const columns = [
+    {
+      label: t('common.amount'),
+      name: 'id',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPaymentIntentExpanded;
+          return (
+            <Typography component="span">
+              {fromUnitToToken(item?.amount, item?.paymentCurrency.decimal)}&nbsp;
+              {item?.paymentCurrency.symbol}
+            </Typography>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.status'),
+      name: 'status',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPaymentIntentExpanded;
+          return <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />;
+        },
+      },
+    },
+    {
+      label: t('common.description'),
+      name: 'description',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPaymentIntentExpanded;
+          return item.description || item.id;
+        },
+      },
+    },
+    {
+      label: t('common.createdAt'),
+      name: 'created_at',
+      options: {
+        customBodyRender: (e: string) => {
+          return formatTime(e);
+        },
+      },
+    },
+    {
+      label: t('common.actions'),
+      name: '',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPaymentIntentExpanded;
+          return <PaymentIntentActions data={item} />;
+        },
+      },
+    },
+  ];
+
+  if (features?.customer) {
+    columns.splice(3, 0, {
+      label: t('common.customer'),
+      name: 'customer_id',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPaymentIntentExpanded;
+          return <Link to={`/admin/customers/${item?.customer.id}`}>{item?.customer.email}</Link>;
+        },
+      },
+    });
+  }
+
+  const onTableChange = ({ page, rowsPerPage }: any) => {
+    if (search.pageSize !== rowsPerPage) {
+      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search.page !== page + 1) {
+      setSearch((x) => ({ ...x, page: page + 1 }));
+    }
+  };
+
+  return (
+    <Table
+      durable={listKey}
+      durableKeys={['page', 'rowsPerPage']}
+      data={data.list}
+      columns={columns}
+      loading={loading}
+      onChange={onTableChange}
+      options={{
+        count: data.count,
+        page: search.page - 1,
+        rowsPerPage: search.pageSize,
+        onRowClick: (_: any, { dataIndex }: any) => {
+          const item = data.list[dataIndex] as TPaymentIntentExpanded;
+          navigate(`/admin/payments/${item.id}`);
+        },
+      }}
+      toolbar={features?.toolbar}
+      footer={features?.footer}
+      title={
+        <div className="table-toolbar-left">
+          <ToggleButtonGroup
+            value={search.status}
+            onChange={(_, value) => setSearch((x) => ({ ...x, status: value }))}
+            exclusive>
+            <ToggleButton value="">All</ToggleButton>
+            <ToggleButton value="succeeded">Succeeded</ToggleButton>
+            <ToggleButton value="canceled">Canceled</ToggleButton>
+            <ToggleButton value="requires_capture">Uncaptured</ToggleButton>
+            <ToggleButton value="requires_action,requires_confirmation,requires_payment_method">Failed</ToggleButton>
+          </ToggleButtonGroup>
+        </div>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,114 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TPaymentLinkExpanded } 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 RenamePaymentLink from './rename';
+
+type Props = {
+  data: TPaymentLinkExpanded;
+  onChange: (action: string) => void;
+  variant?: LiteralUnion<'compact' | 'normal', string>;
+};
+
+PaymentLinkActions.defaultProps = {
+  variant: 'compact',
+};
+
+export default function PaymentLinkActions({ data, variant, onChange }: Props) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    action: '',
+    loading: false,
+  });
+
+  const onUpdate = async (updates: TPaymentLinkExpanded) => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/payment-links/${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/payment-links/${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 noRemove = async () => {
+    try {
+      setState({ loading: true });
+      await api.delete(`/api/payment-links/${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.paymentLink.edit'),
+          //   handler: () => setState({ action: 'edit' }),
+          //   color: 'primary',
+          //   divider: true,
+          // },
+          { 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' },
+        ]}
+      />
+      {state.action === 'rename' && (
+        <RenamePaymentLink
+          paymentLink={data}
+          loading={state.loading}
+          onSave={onUpdate}
+          onCancel={() => setState({ action: '' })}
+        />
+      )}
+      {state.action === 'archive' && (
+        <ConfirmDialog
+          onConfirm={onArchive}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.paymentLink.archive')}
+          message={t('admin.paymentLink.archiveTip')}
+          loading={state.loading}
+        />
+      )}
+      {state.action === 'remove' && (
+        <ConfirmDialog
+          onConfirm={noRemove}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.paymentLink.remove')}
+          message={t('admin.paymentLink.removeTip')}
+          loading={state.loading}
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,87 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Checkbox, FormControlLabel, Stack, TextField, Typography } from '@mui/material';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
+
+export default function AfterPay() {
+  const { t } = useLocaleContext();
+  const { control, setValue, getValues } = useFormContext();
+  const type = useWatch({ control, name: 'after_completion.type' });
+
+  return (
+    <Stack spacing={2}>
+      <Typography variant="h6" sx={{ fontWeight: 600 }}>
+        {t('admin.paymentLink.confirmPage')}
+      </Typography>
+      <Controller
+        name="after_completion.type"
+        control={control}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={getValues().after_completion.type === 'hosted_confirmation'}
+                {...field}
+                onChange={(_, checked) => setValue(field.name, checked ? 'hosted_confirmation' : 'redirect')}
+              />
+            }
+            label={t('admin.paymentLink.showConfirmPage')}
+          />
+        )}
+      />
+      {type === 'hosted_confirmation' && (
+        <Controller
+          name="after_completion.hosted_confirmation.custom_message"
+          control={control}
+          render={({ field }) => (
+            <TextField {...field} placeholder="Replace default success message" fullWidth size="small" />
+          )}
+        />
+      )}
+      <Controller
+        name="after_completion.type"
+        control={control}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={getValues().after_completion.type === 'redirect'}
+                {...field}
+                onChange={(_, checked) => setValue(field.name, checked ? 'redirect' : 'hosted_confirmation')}
+              />
+            }
+            label={t('admin.paymentLink.noConfirmPage')}
+          />
+        )}
+      />
+      {type === 'redirect' && (
+        <Controller
+          name="after_completion.redirect.url"
+          control={control}
+          render={({ field }) => (
+            <TextField placeholder="Redirect customers to your site" {...field} fullWidth size="small" />
+          )}
+        />
+      )}
+      <Typography variant="h6" sx={{ fontWeight: 600 }}>
+        {t('admin.invoices')}
+      </Typography>
+      <Controller
+        name="invoice_creation.enabled"
+        control={control}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={getValues().invoice_creation.enabled}
+                {...field}
+                onChange={(_, checked) => setValue(field.name, checked)}
+              />
+            }
+            label={t('admin.paymentLink.createInvoice')}
+          />
+        )}
+      />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,175 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Checkbox, FormControlLabel, Stack, TextField, Typography } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
+
+import { useProductsContext } from '../../contexts/products';
+import { getProductByPriceId, isPriceRecurringAligned } from '../../libs/util';
+import CreateProduct from '../product/create';
+import LineItem from './item';
+import ProductSelect from './product-select';
+
+export default function BeforePay() {
+  const { t } = useLocaleContext();
+  const { products, refresh } = useProductsContext();
+  const { control, setValue, getValues } = useFormContext();
+  const items = useFieldArray({ control, name: 'line_items' });
+  const includeFreeTrial = useWatch({ control, name: 'include_free_trial' });
+  const [state, setState] = useState({ creating: false });
+
+  useEffect(() => {
+    if (items.fields.length) {
+      const selected: any[] = items.fields.map((x: any) => getProductByPriceId(products, x.price_id));
+      const name = selected.length > 1 ? `${selected[0].name} and ${selected.length - 1} more` : selected[0].name;
+      setValue('name', name);
+    } else {
+      setValue('name', '');
+    }
+  }, [items.fields, setValue, products]);
+
+  const onProductSelected = (priceId: string) => {
+    if (priceId === 'add') {
+      setState({ creating: true });
+    } else if (priceId) {
+      items.append({
+        price_id: priceId,
+        quantity: 1,
+        adjustable_quantity: { enabled: false, maximum: 99, minimum: 0 },
+      });
+      const product = getProductByPriceId(products, priceId);
+      if (product) {
+        const price = product.prices.find((x) => x.id === priceId);
+        if (price && price.type === 'recurring') {
+          setValue('invoice_creation.enabled', true);
+        }
+      }
+    }
+  };
+
+  const onProductCreated = () => {
+    setState({ creating: false });
+    refresh();
+  };
+
+  return (
+    <Stack spacing={2}>
+      <Typography variant="h6" sx={{ fontWeight: 600 }}>
+        {t('admin.paymentLink.products')} ({getValues().line_items.length})
+      </Typography>
+      <Stack spacing={2}>
+        {items.fields.map((item, index) => {
+          // @ts-ignore
+          const product = getProductByPriceId(products, item.price_id);
+          if (!product) {
+            return null;
+          }
+
+          return (
+            <LineItem
+              key={item.id}
+              // @ts-ignore
+              valid={isPriceRecurringAligned(items.fields, products, index)}
+              prefix={`line_items.${index}`}
+              product={product}
+              onRemove={() => items.remove(index)}
+              onUpdate={refresh}
+            />
+          );
+        })}
+        {items.fields.some((_, index) => !isPriceRecurringAligned(items.fields as any[], products, index)) && (
+          <Typography color="error" fontSize="small">
+            {t('admin.paymentLink.notAligned')}
+          </Typography>
+        )}
+        <ProductSelect
+          mode={items.fields.length ? 'waiting' : 'selecting'}
+          onSelect={onProductSelected}
+          hasSelected={(price) => items.fields.some((x: any) => x.price_id === price.id)}
+        />
+        {state.creating && <CreateProduct onCancel={() => setState({ creating: false })} onSave={onProductCreated} />}
+      </Stack>
+      <Typography variant="h6" sx={{ fontWeight: 600 }}>
+        {t('common.options')}
+      </Typography>
+      <Controller
+        name="billing_address_collection"
+        control={control}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={getValues().billing_address_collection === 'required'}
+                {...field}
+                onChange={(_, checked) => setValue(field.name, checked ? 'required' : 'auto')}
+              />
+            }
+            label={t('admin.paymentLink.requireBillingAddress')}
+          />
+        )}
+      />
+      <Controller
+        name="phone_number_collection.enabled"
+        control={control}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={getValues().phone_number_collection.enabled}
+                {...field}
+                onChange={(_, checked) => setValue(field.name, checked)}
+              />
+            }
+            label={t('admin.paymentLink.requirePhoneNumber')}
+          />
+        )}
+      />
+      <Controller
+        name="allow_promotion_codes"
+        control={control}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={getValues().allow_promotion_codes}
+                {...field}
+                onChange={(_, checked) => setValue(field.name, checked)}
+              />
+            }
+            label={t('admin.paymentLink.allowPromotionCodes')}
+          />
+        )}
+      />
+      <Controller
+        name="include_free_trial"
+        control={control}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={getValues().include_free_trial}
+                {...field}
+                onChange={(_, checked) => {
+                  setValue(field.name, checked);
+                  if (checked) {
+                    setValue('subscription_data.trial_period_days', 30);
+                  } else {
+                    setValue('subscription_data.trial_period_days', 0);
+                  }
+                }}
+              />
+            }
+            label={t('admin.paymentLink.includeFreeTrail')}
+          />
+        )}
+      />
+      {includeFreeTrial && (
+        <Controller
+          name="subscription_data.trial_period_days"
+          control={control}
+          render={({ field }) => <TextField {...field} size="small" InputProps={{ endAdornment: t('common.days') }} />}
+        />
+      )}
+    </Stack>
+  );
+}