payment-kit 1.13.15

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

@@ -0,0 +1,135 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TPrice, TProduct, TProductExpanded } from '@did-pay/types';
+import { Box, Checkbox, FormControlLabel, FormLabel, Stack, TextField, Typography } from '@mui/material';
+import { useSetState } from 'ahooks';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
+
+import { useSettingsContext } from '../../contexts/settings';
+import api from '../../libs/api';
+import { formatError, formatPrice } from '../../libs/util';
+import Actions from '../actions';
+import InfoCard from '../info-card';
+import EditProduct from '../product/edit';
+
+type Props = {
+  prefix: string;
+  product: TProductExpanded;
+  valid: boolean;
+  onUpdate: () => void;
+  onRemove: () => void;
+};
+
+export default function LineItem({ prefix, product, valid, onUpdate, onRemove }: Props) {
+  const { t } = useLocaleContext();
+  const getFieldName = (name: string) => (prefix ? `${prefix}.${name}` : name);
+  const { settings } = useSettingsContext();
+  const { control, setValue } = useFormContext();
+  const [state, setState] = useSetState({ editing: false, loading: false });
+  const adjustable = useWatch({ control, name: getFieldName('adjustable_quantity.enabled') });
+
+  const onSave = async (updates: TProduct) => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/products/${product.id}`, updates).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      onUpdate();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false });
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        p: 2,
+        borderWidth: valid ? 1 : 2,
+        borderStyle: 'solid',
+        borderColor: valid ? '#eee' : 'error.main',
+        borderRadius: 2,
+        position: 'relative',
+      }}>
+      <Actions
+        sx={{ position: 'absolute', top: 0, right: 0 }}
+        actions={[
+          {
+            label: t('admin.product.edit'),
+            handler: () => setState({ editing: true }),
+            color: 'primary',
+          },
+          {
+            label: t('admin.product.remove'),
+            handler: onRemove,
+            color: 'error',
+          },
+        ]}
+      />
+      <Stack direction="column" alignItems="flex-start">
+        <InfoCard
+          logo={product.images[0]}
+          name={product.name}
+          description={formatPrice(product.prices[0] as TPrice, settings.baseCurrency)}
+        />
+        <Controller
+          name={getFieldName('quantity')}
+          control={control}
+          render={({ field }) => (
+            <Stack direction="row" alignItems="center" mt={1}>
+              <TextField
+                sx={{ width: 40, mr: 1 }}
+                inputProps={{ style: { padding: '4px 8px' } }}
+                size="small"
+                {...field}
+              />
+              <FormLabel style={{ marginBottom: 0 }}>Quantity</FormLabel>
+            </Stack>
+          )}
+        />
+        <Controller
+          name={getFieldName('adjustable_quantity.enabled')}
+          control={control}
+          render={({ field }) => (
+            <FormControlLabel
+              sx={{ mt: 1, marginLeft: '20px' }}
+              control={
+                <Checkbox sx={{ ml: 0.5 }} {...field} onChange={(_, checked) => setValue(field.name, checked)} />
+              }
+              label={t('admin.paymentLink.adjustableQuantity')}
+            />
+          )}
+        />
+        {adjustable && (
+          <Stack direction="row" alignItems="center" mt={1} ml={6}>
+            <Typography sx={{ mr: 0.5 }}>Between</Typography>
+            <Controller
+              name={getFieldName('adjustable_quantity.minimum')}
+              control={control}
+              render={({ field }) => (
+                <TextField sx={{ width: 40 }} inputProps={{ style: { padding: '4px 8px' } }} size="small" {...field} />
+              )}
+            />
+            <Typography sx={{ mx: 0.5 }}>and</Typography>
+            <Controller
+              name={getFieldName('adjustable_quantity.maximum')}
+              control={control}
+              render={({ field }) => (
+                <TextField sx={{ width: 40 }} inputProps={{ style: { padding: '4px 8px' } }} size="small" {...field} />
+              )}
+            />
+          </Stack>
+        )}
+      </Stack>
+      {state.editing && (
+        <EditProduct
+          product={product}
+          loading={state.loading}
+          onSave={onSave}
+          onCancel={() => setState({ editing: false })}
+        />
+      )}
+    </Box>
+  );
+}

package/src/components/payment-link/product-select.tsx

@@ -0,0 +1,66 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TProductExpanded } from '@did-pay/types';
+import { AddOutlined } from '@mui/icons-material';
+import { Box, ListSubheader, MenuItem, Select, Typography } from '@mui/material';
+import cloneDeep from 'lodash/cloneDeep';
+import { useState } from 'react';
+import type { LiteralUnion } from 'type-fest';
+
+import { useProductsContext } from '../../contexts/products';
+import { useSettingsContext } from '../../contexts/settings';
+import { formatPrice } from '../../libs/util';
+
+type Props = {
+  mode: LiteralUnion<'waiting' | 'selecting', string>;
+  hasSelected: (price: any) => boolean;
+  onSelect: (priceId: string) => void;
+};
+
+const filterPrices = (product: TProductExpanded, hasSelected: (price: any) => boolean) => {
+  product.prices = product.prices.filter((x) => x.active && !hasSelected(x));
+  return product;
+};
+
+const filterProducts = (products: TProductExpanded[], hasSelected: (price: any) => boolean) => {
+  const filtered = cloneDeep(products).map((x) => filterPrices(x, hasSelected));
+  return filtered.filter((x) => x.prices.length);
+};
+
+export default function ProductSelect({ mode: initialMode, hasSelected, onSelect }: Props) {
+  const { t } = useLocaleContext();
+  const { products } = useProductsContext();
+  const { settings } = useSettingsContext();
+  const [mode, setMode] = useState(initialMode);
+
+  const handleSelect = (e: any) => {
+    setMode('waiting');
+    onSelect(e.target.value);
+  };
+
+  if (mode === 'selecting') {
+    return (
+      <Select value="" fullWidth size="small" onChange={handleSelect}>
+        <MenuItem value="add">
+          <AddOutlined />
+          {t('admin.product.add')}
+        </MenuItem>
+        {filterProducts(products, hasSelected).map((product) => [
+          <ListSubheader key={product.id} sx={{ fontSize: '1rem', color: 'text.secondary', lineHeight: '2.5rem' }}>
+            {product.name}
+          </ListSubheader>,
+          ...product.prices.map((price) => (
+            <MenuItem key={price.id} sx={{ pl: 3 }} value={price.id}>
+              {formatPrice(price, settings.baseCurrency)}
+            </MenuItem>
+          )),
+        ])}
+      </Select>
+    );
+  }
+
+  return (
+    <Box sx={{ cursor: 'pointer' }} onClick={() => setMode('selecting')}>
+      <Typography color="primary">{t('admin.paymentLink.addProduct')}</Typography>
+    </Box>
+  );
+}

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

@@ -0,0 +1,64 @@
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TPaymentLink } from '@did-pay/types';
+import { Button, CircularProgress, Stack } from '@mui/material';
+import type { EventHandler } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import TextInput from '../input';
+
+export default function RenamePaymentLink({
+  paymentLink,
+  loading,
+  onSave,
+  onCancel,
+}: {
+  paymentLink: TPaymentLink;
+  loading: boolean;
+  onSave: EventHandler<any>;
+  onCancel: EventHandler<any>;
+}) {
+  const { t } = useLocaleContext();
+  const methods = useForm<TPaymentLink>({
+    defaultValues: {
+      name: paymentLink.name,
+    },
+  });
+
+  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}>
+        <TextInput
+          name="name"
+          label={t('admin.paymentLink.name.label')}
+          placeholder={t('admin.paymentLink.name.placeholder')}
+          autoFocus
+        />
+      </FormProvider>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,110 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { Paginated, TInvoiceExpanded } from '@did-pay/types';
+import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { fromUnitToToken } from '@ocap/util';
+import { useInfiniteScroll } from 'ahooks';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import api from '../../../libs/api';
+import { formatToDate, getInvoiceStatusColor } from '../../../libs/util';
+import Status from '../../status';
+
+const groupByDate = (items: TInvoiceExpanded[]) => {
+  const grouped: { [key: string]: TInvoiceExpanded[] } = {};
+  items.forEach((item) => {
+    const date = new Date(item.created_at).toLocaleDateString();
+    if (!grouped[date]) {
+      grouped[date] = [];
+    }
+    grouped[date]?.push(item);
+  });
+  return grouped;
+};
+
+const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TInvoiceExpanded>> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/invoices?${search.toString()}`).then((res) => res.data);
+};
+
+type Props = {
+  customer_id: string;
+};
+
+const pageSize = 10;
+
+export default function CustomerInvoiceList({ customer_id }: Props) {
+  const { t } = useLocaleContext();
+
+  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 });
+    },
+    {
+      reloadDeps: [customer_id],
+    }
+  );
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  if (data && data.list.length === 0) {
+    return <Typography color="text.secondary">{t('admin.invoice.empty')}</Typography>;
+  }
+
+  const hasMore = data && data.list.length < data.count;
+
+  const grouped = groupByDate(data.list);
+
+  return (
+    <Stack direction="column" spacing={3} sx={{ mt: 1 }}>
+      {Object.entries(grouped).map(([date, invoices]) => (
+        <React.Fragment key={date}>
+          <Typography sx={{ fontWeight: 'bold', color: 'text.secondary', mt: 2 }}>{date}</Typography>
+          {invoices.map((invoice) => (
+            <Stack key={invoice.id} direction="row" justifyContent="space-between" spacing={3} flexWrap="nowrap">
+              <Box flex={2}>
+                <Link to={`/customer/invoice/${invoice.id}`}>
+                  <Typography component="span">{invoice.number}</Typography>
+                </Link>
+              </Box>
+              <Box flex={1}>
+                <Typography>{formatToDate(invoice.created_at)}</Typography>
+              </Box>
+              <Box flex={1}>
+                <Typography>
+                  {fromUnitToToken(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
+                  {invoice.paymentCurrency.symbol}
+                </Typography>
+              </Box>
+              <Box flex={1}>
+                <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
+              </Box>
+              <Box flex={3}>
+                <Typography>{invoice.description || invoice.id}</Typography>
+              </Box>
+            </Stack>
+          ))}
+        </React.Fragment>
+      ))}
+      <Box>
+        {hasMore && (
+          <Button variant="text" type="button" color="inherit" onClick={loadMore} disabled={loadingMore}>
+            {loadingMore
+              ? t('common.loadingMore', { resource: t('admin.invoices') })
+              : t('common.loadMore', { resource: t('admin.invoices') })}
+          </Button>
+        )}
+        {!hasMore && data.count > pageSize && (
+          <Typography color="text.secondary">{t('common.noMore', { resource: t('admin.invoices') })}</Typography>
+        )}
+      </Box>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,83 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TSubscriptionExpanded } from '@did-pay/types';
+import { FormControlLabel, Radio, RadioGroup, Stack, TextField, Typography } from '@mui/material';
+import { Controller, useFormContext } from 'react-hook-form';
+
+import { formatTime } from '../../../libs/util';
+
+export default function CustomerCancelForm({ data }: { data: TSubscriptionExpanded }) {
+  const { t } = useLocaleContext();
+  const { control } = useFormContext();
+
+  return (
+    <Stack direction="column" spacing={1} alignItems="flex-start">
+      <Typography>{t('customer.cancel.description', { date: formatTime(data.current_period_end * 1000) })}</Typography>
+      <Controller
+        name="cancel.feedback"
+        control={control}
+        render={({ field }) => (
+          <RadioGroup {...field}>
+            <FormControlLabel
+              value="too_expensive"
+              control={<Radio checked={field.value === 'too_expensive'} />}
+              label={t('customer.cancel.feedback.too_expensive')}
+            />
+            <FormControlLabel
+              value="missing_features"
+              control={<Radio checked={field.value === 'missing_features'} />}
+              label={t('customer.cancel.feedback.missing_features', {
+                date: formatTime(new Date(data.current_period_end * 1000)),
+              })}
+            />
+            <FormControlLabel
+              value="switched_service"
+              control={<Radio checked={field.value === 'switched_service'} />}
+              label={t('customer.cancel.feedback.switched_service')}
+            />
+            <FormControlLabel
+              value="unused"
+              control={<Radio checked={field.value === 'unused'} />}
+              label={t('customer.cancel.feedback.unused')}
+            />
+            <FormControlLabel
+              value="customer_service"
+              control={<Radio checked={field.value === 'customer_service'} />}
+              label={t('customer.cancel.feedback.customer_service')}
+            />
+            <FormControlLabel
+              value="too_complex"
+              control={<Radio checked={field.value === 'too_complex'} />}
+              label={t('customer.cancel.feedback.too_complex')}
+            />
+            <FormControlLabel
+              value="low_quality"
+              control={<Radio checked={field.value === 'low_quality'} />}
+              label={t('customer.cancel.feedback.low_quality')}
+            />
+            <FormControlLabel
+              value="other"
+              control={<Radio checked={field.value === 'other'} />}
+              label={t('customer.cancel.feedback.other')}
+            />
+          </RadioGroup>
+        )}
+      />
+      <Controller
+        name="cancel.comment"
+        control={control}
+        render={({ field }) => (
+          <TextField
+            variant="outlined"
+            size="small"
+            fullWidth
+            multiline
+            minRows={2}
+            maxRows={4}
+            placeholder="Any additional feedback?"
+            {...field}
+          />
+        )}
+      />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,232 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { Paginated, TSubscriptionExpanded } from '@did-pay/types';
+import { ScheduleOutlined } from '@mui/icons-material';
+import { Avatar, AvatarGroup, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { useInfiniteScroll, useSetState } from 'ahooks';
+import { FormProvider, useForm, useFormContext } from 'react-hook-form';
+
+import api from '../../../libs/api';
+import {
+  formatError,
+  formatPrice,
+  formatSubscriptionProduct,
+  formatToDate,
+  getSubscriptionStatusColor,
+} from '../../../libs/util';
+import ConfirmDialog from '../../confirm';
+import Status from '../../status';
+import CustomerCancelForm from './cancel';
+
+const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TSubscriptionExpanded>> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/subscriptions?${search.toString()}`).then((res) => res.data);
+};
+
+type Props = {
+  id: string;
+  onChange: Function;
+};
+
+const pageSize = 4;
+
+export function CurrentSubscriptionsInner({ id, onChange }: Props) {
+  const { t } = useLocaleContext();
+  const { reset, getValues } = useFormContext();
+
+  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 });
+    },
+    {
+      reloadDeps: [id],
+    }
+  );
+
+  const [state, setState] = useSetState({
+    action: '',
+    subscription: '',
+    loading: false,
+  });
+
+  const handleCancel = async () => {
+    try {
+      setState({ loading: true });
+      await api
+        .put(`/api/subscriptions/${state.subscription}/cancel`, { at: 'current_period_end', ...getValues().cancel })
+        .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: '', subscription: '' });
+      reset();
+    }
+  };
+
+  const handleRecover = async () => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/subscriptions/${state.subscription}/recover`).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: '', subscription: '' });
+    }
+  };
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  if (data && data.list.length === 0) {
+    return <Typography color="text.secondary">{t('customer.subscription.empty')}</Typography>;
+  }
+
+  const hasMore = data && data.list.length < data.count;
+  const size = { width: 48, height: 48 };
+
+  return (
+    <Stack direction="column" spacing={4} sx={{ mt: 2 }}>
+      {data.list.map((subscription) => (
+        <Stack key={subscription.id} direction="row" justifyContent="space-between" spacing={3}>
+          <Stack direction="column" spacing={0.5}>
+            <Stack direction="row" spacing={1} alignItems="center">
+              <AvatarGroup max={3}>
+                {subscription.items.map((item) =>
+                  item.price.product.images.length > 0 ? (
+                    // @ts-ignore
+                    <Avatar
+                      key={item.price.product_id}
+                      src={item.price.product.images[0]}
+                      alt={item.price.product.name}
+                      variant="rounded"
+                      sx={size}
+                    />
+                  ) : (
+                    <Avatar key={item.price.product_id} variant="rounded" sx={size}>
+                      {item.price.product.name.slice(0, 1)}
+                    </Avatar>
+                  )
+                )}
+              </AvatarGroup>
+              <Stack direction="column" spacing={0.5}>
+                <Stack direction="row" spacing={2} alignItems="center">
+                  <Typography variant="body1" fontWeight={600}>
+                    {formatSubscriptionProduct(subscription.items)}
+                  </Typography>
+                  <Status
+                    size="small"
+                    sx={{ height: 18 }}
+                    label={subscription.status}
+                    color={getSubscriptionStatusColor(subscription.status)}
+                  />
+                </Stack>
+                <Typography variant="subtitle1" fontWeight={500}>
+                  {
+                    // @ts-ignore
+                    formatPrice(subscription.items[0].price, subscription.paymentCurrency)
+                  }
+                </Typography>
+              </Stack>
+            </Stack>
+            <Stack direction="row" spacing={2} alignItems="center">
+              <Typography variant="body1" color="text.secondary">
+                Started on {formatToDate(subscription.start_date * 1000)}, will{' '}
+                {subscription.cancel_at_period_end ? 'end' : 'renew'} on{' '}
+                {formatToDate(subscription.current_period_end * 1000)}
+              </Typography>
+            </Stack>
+          </Stack>
+          <Stack direction="column" alignItems="flex-end" spacing={1}>
+            <Button
+              variant="outlined"
+              color={subscription.cancel_at_period_end ? 'inherit' : 'error'}
+              size="small"
+              onClick={() =>
+                setState({
+                  action: subscription.cancel_at_period_end ? 'recover' : 'cancel',
+                  subscription: subscription.id,
+                })
+              }>
+              {t(`customer.${subscription.cancel_at_period_end ? 'recover' : 'cancel'}.button`)}
+            </Button>
+            {subscription.cancel_at_period_end && (
+              <Stack direction="row" alignItems="center" spacing={0.5}>
+                <ScheduleOutlined fontSize="small" sx={{ color: 'text.secondary' }} />
+                <Typography component="span" variant="body1" color="text.secondary">
+                  will {subscription.cancel_at_period_end ? 'cancel' : 'renew'} on{' '}
+                  {formatToDate(subscription.current_period_end * 1000)}
+                </Typography>
+              </Stack>
+            )}
+          </Stack>
+        </Stack>
+      ))}
+      <Box>
+        {hasMore && (
+          <Button variant="text" type="button" color="inherit" onClick={loadMore} disabled={loadingMore}>
+            {loadingMore
+              ? t('common.loadingMore', { resource: t('admin.subscriptions') })
+              : t('common.loadMore', { resource: t('admin.subscriptions') })}
+          </Button>
+        )}
+        {!hasMore && data.count > pageSize && (
+          <Typography color="text.secondary">{t('common.noMore', { resource: t('admin.subscriptions') })}</Typography>
+        )}
+      </Box>
+      {state.action === 'cancel' && state.subscription && (
+        <ConfirmDialog
+          onConfirm={handleCancel}
+          onCancel={() => setState({ action: '', subscription: '' })}
+          title={t('customer.cancel.title')}
+          message={
+            <CustomerCancelForm data={data.list.find((x) => x.id === state.subscription) as TSubscriptionExpanded} />
+          }
+          loading={state.loading}
+        />
+      )}
+      {state.action === 'recover' && state.subscription && (
+        <ConfirmDialog
+          onConfirm={handleRecover}
+          onCancel={() => setState({ action: '', subscription: '' })}
+          title={t('customer.recover.title')}
+          message={t('customer.recover.description', {
+            date: formatToDate(
+              (data.list.find((x) => x.id === state.subscription) as TSubscriptionExpanded).current_period_end * 1000
+            ),
+          })}
+          loading={state.loading}
+        />
+      )}
+    </Stack>
+  );
+}
+
+export default function CurrentSubscriptions(props: Props) {
+  const methods = useForm({
+    defaultValues: {
+      cancel: {
+        at: 'current_period_end',
+        feedback: 'unused',
+        comment: '',
+      },
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <CurrentSubscriptionsInner {...props} />
+    </FormProvider>
+  );
+}