payment-kit 1.13.15

package/src/pages/admin/products/prices/list.tsx

@@ -0,0 +1,95 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Stack, Typography } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+import Copyable from '../../../../components/copyable';
+import type { Product } from '../../../../components/product/form';
+import Status from '../../../../components/status';
+import Table from '../../../../components/table';
+import { useSettingsContext } from '../../../../contexts/settings';
+import { formatPrice, formatTime } from '../../../../libs/util';
+import PriceActions from './actions';
+
+export default function PricesList({ product, onChange }: { product: Product; onChange: Function }) {
+  const { t } = useLocaleContext();
+  const { settings } = useSettingsContext();
+
+  const columns = [
+    {
+      label: t('admin.price.name'),
+      name: 'name',
+      options: {
+        sort: false,
+        customBodyRenderLite: (_: any, index: number) => {
+          const price = product.prices[index] as any;
+          return (
+            <Link to={`/admin/products/${price.id}`} color="text.primary">
+              <Stack direction="row" alignItems="center" spacing={1}>
+                <Typography component="span">{formatPrice(price, settings.baseCurrency)}</Typography>
+                <Typography component="span">
+                  {price.id === product.default_price_id && <Status label="default" color="info" sx={{ height: 18 }} />}
+                </Typography>
+              </Stack>
+            </Link>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.id'),
+      name: 'id',
+      options: {
+        sort: false,
+        customBodyRender: (id: string) => {
+          return <Copyable text={id} />;
+        },
+      },
+    },
+    {
+      label: t('common.createdAt'),
+      name: 'created_at',
+      options: {
+        customBodyRender: (e: string) => {
+          return formatTime(e);
+        },
+      },
+    },
+    {
+      label: t('common.updatedAt'),
+      name: 'updated_at',
+      options: {
+        customBodyRender: (e: string) => {
+          return formatTime(e);
+        },
+      },
+    },
+    {
+      label: t('common.actions'),
+      name: 'id',
+      width: 100,
+      align: 'center',
+      options: {
+        sort: false,
+        customBodyRenderLite: (_: any, index: number) => {
+          const price = product.prices[index] as any;
+          return <PriceActions data={price} onChange={onChange} setAsDefault={price.id !== product.default_price_id} />;
+        },
+      },
+    },
+  ];
+
+  return (
+    <Table
+      toolbar={false}
+      footer={false}
+      data={product.prices}
+      columns={columns}
+      options={{
+        count: product.prices.length,
+        page: 0,
+        rowsPerPage: 20,
+      }}
+    />
+  );
+}

package/src/pages/admin/products/pricing-tables.tsx

@@ -0,0 +1,3 @@
+export default function PricingTables() {
+  return <div>PricingTables</div>;
+}

package/src/pages/admin/products/products/create.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { AddOutlined } from '@mui/icons-material';
+import { Box, Button, Divider, Typography } from '@mui/material';
+import { cloneDeep } from 'lodash';
+import { Fragment } from 'react';
+import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
+import { dispatch } from 'use-bus';
+
+import Collapse from '../../../../components/collapse';
+import DrawerForm from '../../../../components/drawer-form';
+import PriceActions from '../../../../components/price/actions';
+import PriceForm, { DEFAULT_PRICE } from '../../../../components/price/form';
+import ProductForm, { Product } from '../../../../components/product/form';
+import { useSettingsContext } from '../../../../contexts/settings';
+import api from '../../../../libs/api';
+import { formatError, formatPrice } from '../../../../libs/util';
+
+export default function ProductsCreate() {
+  const { t } = useLocaleContext();
+  const { settings } = useSettingsContext();
+
+  const methods = useForm<Product>({
+    defaultValues: {
+      type: 'service',
+      name: '',
+      description: '',
+      images: [],
+      statement_descriptor: '',
+      unit_label: '',
+      features: [],
+      prices: [{ ...DEFAULT_PRICE, currency_id: settings.baseCurrency.id }],
+      metadata: [],
+    },
+  });
+  const { control, handleSubmit } = methods;
+
+  const prices = useFieldArray({ control, name: 'prices' });
+  const getPrice = (index: number) => methods.getValues().prices[index];
+
+  const onSubmit = (data: Product) => {
+    api
+      .post('/api/products', data)
+      .then(() => {
+        Toast.success(t('admin.product.saved'));
+        methods.reset();
+        dispatch('drawer.submitted');
+        dispatch('project.created');
+      })
+      .catch((err) => {
+        console.error(err);
+        Toast.error(formatError(err));
+      });
+  };
+
+  return (
+    <DrawerForm
+      icon={<AddOutlined />}
+      text={t('admin.product.add')}
+      maxWidth={640}
+      addons={
+        <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)}>
+          {t('admin.product.save')}
+        </Button>
+      }>
+      <FormProvider {...methods}>
+        <Typography variant="h6" sx={{ mb: 3, fontWeight: 600 }}>
+          {t('admin.product.info')}
+        </Typography>
+        <ProductForm />
+        <Typography variant="h6" sx={{ mt: 5, mb: 3, fontWeight: 600 }}>
+          {t('admin.price.info')}
+        </Typography>
+        <Box>
+          {prices.fields.map((price, index) => (
+            <Fragment key={price.id}>
+              <Collapse
+                expanded
+                style={{ fontWeight: 'bold', width: '50%' }}
+                addons={<PriceActions onDuplicate={() => prices.append(price)} onRemove={() => prices.remove(index)} />}
+                trigger={(expanded: boolean) =>
+                  // @ts-ignore
+                  expanded ? t('admin.price.detail') : formatPrice(getPrice(index), settings.baseCurrency)
+                }>
+                <PriceForm prefix={`prices.${index}`} />
+              </Collapse>
+              <Divider sx={{ mt: 2, mb: 4 }} />
+            </Fragment>
+          ))}
+          <Box mt={1}>
+            <Button
+              size="small"
+              variant="outlined"
+              color="inherit"
+              // @ts-ignore
+              onClick={() => prices.append({ ...cloneDeep(DEFAULT_PRICE), currency_id: settings.baseCurrency.id })}>
+              <AddOutlined fontSize="small" /> Add another price
+            </Button>
+          </Box>
+        </Box>
+      </FormProvider>
+    </DrawerForm>
+  );
+}

package/src/pages/admin/products/products/detail.tsx

@@ -0,0 +1,246 @@
+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 { ArrowBackOutlined, Edit } from '@mui/icons-material';
+import { Alert, AlertTitle, Box, Button, CircularProgress, Grid, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { useRequest, useSetState } from 'ahooks';
+import { isEmpty } from 'lodash';
+import { Link, useNavigate } from 'react-router-dom';
+
+import Copyable from '../../../../components/copyable';
+import EventList from '../../../../components/event/list';
+import InfoCard from '../../../../components/info-card';
+import InfoMetric from '../../../../components/info-metric';
+import InfoRow from '../../../../components/info-row';
+import MetadataEditor from '../../../../components/metadata/editor';
+import ProductActions from '../../../../components/product/actions';
+import AddPrice from '../../../../components/product/add-price';
+import EditProduct from '../../../../components/product/edit';
+import SectionHeader from '../../../../components/section/header';
+import { useSettingsContext } from '../../../../contexts/settings';
+import api from '../../../../libs/api';
+import { formatError, formatProductPrice, formatTime } from '../../../../libs/util';
+import PricesList from '../prices/list';
+
+const getProduct = (id: string): Promise<TProductExpanded> => {
+  return api.get(`/api/products/${id}`).then((res) => res.data);
+};
+
+export default function ProductDetail(props: { id: string }) {
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+  const { settings } = useSettingsContext();
+  const [state, setState] = useSetState({
+    adding: {
+      price: false,
+    },
+    editing: {
+      metadata: false,
+      product: false,
+    },
+    loading: {
+      metadata: false,
+      price: false,
+      product: false,
+    },
+  });
+
+  const { loading, error, data, runAsync } = useRequest(() => getProduct(props.id));
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const createProductUpdater = (key: string) => async (updates: TProduct) => {
+    try {
+      setState((prev) => ({ loading: { ...prev.loading, [key]: true } }));
+      await api.put(`/api/products/${props.id}`, updates).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      runAsync();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState((prev) => ({ loading: { ...prev.loading, [key]: false } }));
+    }
+  };
+
+  const onAddPrice = async (price: TPrice) => {
+    try {
+      setState((prev) => ({ loading: { ...prev.loading, price: true } }));
+      await api.post('/api/prices', { ...price, product_id: props.id });
+      Toast.success(t('common.saved'));
+      runAsync();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState((prev) => ({ loading: { ...prev.loading, price: false } }));
+    }
+  };
+
+  const onUpdateMetadata = createProductUpdater('metadata');
+  const onUpdateAll = createProductUpdater('product');
+  const onChange = (action: string) => {
+    if (action === 'remove') {
+      navigate('/admin/products');
+    } else {
+      runAsync();
+    }
+  };
+
+  return (
+    <Root direction="column" spacing={4} sx={{ mb: 4 }}>
+      {data.active === false && (
+        <Alert severity="warning">
+          <AlertTitle>{t('admin.product.archived')}</AlertTitle>
+          {t('admin.product.archivedTip')}
+        </Alert>
+      )}
+      <Box>
+        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+          <Link to="/admin/products">
+            <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal' }}>
+              <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+              <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+                {t('admin.products')}
+              </Typography>
+            </Stack>
+          </Link>
+          <Copyable text={props.id} style={{ marginLeft: 4 }} />
+        </Stack>
+        <Box mt={2}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <InfoCard
+              logo={data.images[0]}
+              name={data.name}
+              // @ts-ignore
+              description={formatProductPrice(data, settings.baseCurrency)}
+            />
+            <ProductActions data={data} onChange={onChange} variant="normal" />
+          </Stack>
+          <Stack
+            className="section-body"
+            direction="row"
+            spacing={3}
+            justifyContent="flex-start"
+            flexWrap="wrap"
+            sx={{ pt: 2, mt: 2, borderTop: '1px solid #eee' }}>
+            <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
+            <InfoMetric label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+          </Stack>
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.details')}>
+          <Button
+            variant="outlined"
+            color="inherit"
+            size="small"
+            onClick={() => setState((prev) => ({ editing: { ...prev.editing, product: true } }))}>
+            <Edit fontSize="small" sx={{ mr: 0.5 }} />
+            {t('common.edit')}
+          </Button>
+        </SectionHeader>
+        <Grid className="section-body" container>
+          <Grid item xs={12} md={6}>
+            <InfoRow label={t('admin.product.name.label')} value={data.name} />
+            <InfoRow label={t('admin.product.description.label')} value={data.description} />
+            <InfoRow label={t('admin.product.statement_descriptor.label')} value={data.statement_descriptor} />
+            <InfoRow label={t('admin.product.unit_label.label')} value={data.unit_label} />
+            <InfoRow label={t('admin.product.features.label')} value={data.features.map((x) => x.name).join(',')} />
+            <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+            <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <InfoRow
+              label={t('admin.product.image.label')}
+              value={
+                data.images.length ? <img src={data.images[0]} width={160} height={160} alt={data.name} /> : 'No Image'
+              }
+            />
+          </Grid>
+          {state.editing.product && (
+            <EditProduct
+              product={data}
+              loading={state.loading.product}
+              onSave={onUpdateAll}
+              onCancel={() => setState((prev) => ({ editing: { ...prev.editing, product: false } }))}
+            />
+          )}
+        </Grid>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.product.pricing')}>
+          <Button
+            variant="outlined"
+            color="inherit"
+            size="small"
+            onClick={() => setState((prev) => ({ adding: { ...prev.adding, price: true } }))}>
+            <Edit fontSize="small" sx={{ mr: 0.5 }} />
+            {t('admin.price.add')}
+          </Button>
+        </SectionHeader>
+        <Box className="section-body">
+          <PricesList product={data as any} onChange={runAsync} />
+          {state.adding.price && (
+            <AddPrice
+              loading={state.loading.price}
+              onSave={onAddPrice}
+              onCancel={() => setState((prev) => ({ adding: { ...prev.adding, price: false } }))}
+            />
+          )}
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('common.metadata.label')}>
+          <Button
+            variant="outlined"
+            color="inherit"
+            size="small"
+            disabled={state.editing.metadata}
+            onClick={() => setState((prev) => ({ editing: { ...prev.editing, metadata: true } }))}>
+            <Edit fontSize="small" sx={{ mr: 0.5 }} />
+            {t('common.metadata.edit')}
+          </Button>
+        </SectionHeader>
+        <Box className="section-body">
+          {!state.editing.metadata &&
+            (isEmpty(data.metadata) ? (
+              <Typography color="text.secondary">{t('common.metadata.empty')}</Typography>
+            ) : (
+              <Grid container>
+                <Grid item xs={12} md={6}>
+                  {Object.keys(data.metadata || {}).map((key) => (
+                    // @ts-ignore
+                    <InfoRow key={key} label={key} value={data.metadata[key]} />
+                  ))}
+                </Grid>
+              </Grid>
+            ))}
+          {state.editing.metadata && (
+            <MetadataEditor
+              data={data}
+              loading={state.loading.metadata}
+              onSave={onUpdateMetadata}
+              onCancel={() => setState((prev) => ({ editing: { ...prev.editing, metadata: false } }))}
+            />
+          )}
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.events')} />
+        <Box className="section-body">
+          <EventList features={{ toolbar: false }} object_id={data.id} />
+        </Box>
+      </Box>
+    </Root>
+  );
+}
+
+const Root = styled(Stack)``;

package/src/pages/admin/products/products/index.tsx

@@ -0,0 +1,154 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { getDurableData } from '@arcblock/ux/lib/Datatable';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TProductExpanded } from '@did-pay/types';
+import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { useRequest } from 'ahooks';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import useBus from 'use-bus';
+
+import InfoCard from '../../../../components/info-card';
+import ProductActions from '../../../../components/product/actions';
+import Status from '../../../../components/status';
+import Table from '../../../../components/table';
+import { useSettingsContext } from '../../../../contexts/settings';
+import api from '../../../../libs/api';
+import { formatProductPrice, formatTime } from '../../../../libs/util';
+
+const fetchData = (params: Record<string, any> = {}): Promise<{ list: TProductExpanded[]; count: number }> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/products?${search.toString()}`).then((res) => res.data);
+};
+
+export default function ProductsList() {
+  const listKey = 'products';
+  const persisted = getDurableData(listKey);
+
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+  const { settings } = useSettingsContext();
+  const [search, setSearch] = useState<{ active: string; pageSize: number; page: number }>({
+    active: '',
+    pageSize: persisted.rowsPerPage || 20,
+    page: persisted.page ? persisted.page + 1 : 1,
+  });
+
+  const { loading, error, data, refresh } = useRequest(() => fetchData(search));
+  useEffect(() => {
+    refresh();
+  }, [search, refresh]);
+
+  useBus('project.created', () => refresh(), []);
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const columns = [
+    {
+      label: t('admin.product.name.label'),
+      name: 'name',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const product = data.list[index] as TProductExpanded;
+          return (
+            <InfoCard
+              name={product.name}
+              description={formatProductPrice(product as any, settings.baseCurrency)}
+              logo={product.images[0]}
+            />
+          );
+        },
+      },
+    },
+    {
+      label: t('common.status'),
+      name: 'active',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index];
+          return <Status label={item?.active ? 'Active' : 'Archived'} color={item?.active ? 'success' : 'default'} />;
+        },
+      },
+    },
+    {
+      label: t('common.createdAt'),
+      name: 'created_at',
+      options: {
+        customBodyRender: (e: string) => {
+          return formatTime(e);
+        },
+      },
+    },
+    {
+      label: t('common.updatedAt'),
+      name: 'updated_at',
+      options: {
+        customBodyRender: (e: string) => {
+          return formatTime(e);
+        },
+      },
+    },
+    {
+      label: t('common.actions'),
+      name: 'id',
+      width: 100,
+      align: 'center',
+      options: {
+        sort: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const product = data.list[index] as TProductExpanded;
+          return <ProductActions data={product} onChange={refresh} />;
+        },
+      },
+    },
+  ];
+
+  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']}
+      title={
+        <div className="table-toolbar-left">
+          <ToggleButtonGroup
+            value={search.active}
+            onChange={(_, value) => setSearch((x) => ({ ...x, active: value }))}
+            exclusive>
+            <ToggleButton value="">All</ToggleButton>
+            <ToggleButton value="true">Active</ToggleButton>
+            <ToggleButton value="false">Archived</ToggleButton>
+          </ToggleButtonGroup>
+        </div>
+      }
+      data={data.list}
+      columns={columns}
+      options={{
+        count: data.count,
+        page: search.page - 1,
+        rowsPerPage: search.pageSize,
+        onRowClick: (_: any, { dataIndex }: any) => {
+          const item = data.list[dataIndex] as TProductExpanded;
+          navigate(`/admin/products/${item.id}`);
+        },
+      }}
+      loading={loading}
+      onChange={onTableChange}
+    />
+  );
+}

package/src/pages/admin/settings/branding.tsx

@@ -0,0 +1,3 @@
+export default function BrandingSettings() {
+  return <div>Branding settings</div>;
+}

package/src/pages/admin/settings/business.tsx

@@ -0,0 +1,3 @@
+export default function BusinessSettings() {
+  return <div>Business settings</div>;
+}

package/src/pages/admin/settings/index.tsx

@@ -0,0 +1,47 @@
+import Center from '@arcblock/ux/lib/Center';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Tabs from '@arcblock/ux/lib/Tabs';
+import { CircularProgress, Typography } from '@mui/material';
+import React, { Suspense, isValidElement } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+const pages = {
+  paymentMethods: React.lazy(() => import('./payment-methods')),
+  branding: React.lazy(() => import('./branding')),
+  business: React.lazy(() => import('./business')),
+};
+
+export default function SettingsIndex() {
+  const navigate = useNavigate();
+  const { t } = useLocaleContext();
+  const { page = 'payment-methods' } = useParams();
+
+  const onTabChange = (newTab: string) => {
+    navigate(`/admin/settings/${newTab}`);
+  };
+
+  // @ts-ignore
+  const TabComponent = pages[page] || pages.paymentMethods;
+  const tabs = [
+    { label: t('admin.paymentMethods'), value: 'payment-methods' },
+    { label: t('admin.branding'), value: 'branding' },
+    { label: t('admin.business'), value: 'business' },
+  ];
+
+  return (
+    <div>
+      <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
+        {t('admin.settings')}
+      </Typography>
+      <Tabs tabs={tabs} current={page} onChange={onTabChange} scrollButtons="auto" />
+      <Suspense
+        fallback={
+          <Center relative="parent">
+            <CircularProgress />
+          </Center>
+        }>
+        {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
+      </Suspense>
+    </div>
+  );
+}