payment-kit 1.13.23 → 1.13.25

package/src/libs/util.ts

@@ -132,11 +132,17 @@ export const formatProductPrice = (
   return 'No price';
 };
 
-export const formatPrice = (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity: number = 1) => {
-  const amount = fromUnitToToken(
-    new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(quantity)),
-    currency.decimal
-  ).toString();
+export const formatPrice = (
+  price: TPrice,
+  currency: TPaymentCurrency,
+  unit_label?: string,
+  quantity: number = 1,
+  bn: boolean = true
+) => {
+  const unit = getPriceUintAmountByCurrency(price, currency);
+  const amount = bn
+    ? fromUnitToToken(new BN(unit).mul(new BN(quantity)), currency.decimal).toString()
+    : +unit * quantity;
   if (price?.type === 'recurring' && price.recurring) {
     const recurring = formatRecurring(price.recurring, false, '/');
 
@@ -153,6 +159,31 @@ export const formatPrice = (price: TPrice, currency: TPaymentCurrency, unit_labe
   return `${amount} ${currency.symbol}`;
 };
 
+export const formatPriceAmount = (
+  price: TPrice,
+  currency: TPaymentCurrency,
+  unit_label?: string,
+  quantity: number = 1,
+  bn: boolean = true
+) => {
+  const unit = getPriceUintAmountByCurrency(price, currency);
+  const amount = bn
+    ? fromUnitToToken(new BN(unit).mul(new BN(quantity)), currency.decimal).toString()
+    : +unit * quantity;
+  if (price?.type === 'recurring' && price.recurring) {
+    if (unit_label) {
+      return `${amount} ${currency.symbol} / ${unit_label}`;
+    }
+    if (price.recurring.usage_type === 'metered') {
+      return `${amount} ${currency.symbol} / unit`;
+    }
+
+    return `${amount} ${currency.symbol}`;
+  }
+
+  return `${amount} ${currency.symbol}`;
+};
+
 export function getPricingModel(price: TPrice) {
   if (price.billing_scheme === 'tiered') {
     return price.tiers_mode;
@@ -173,6 +204,11 @@ export function getProductByPriceId(products: TProductExpanded[], priceId: strin
   return product;
 }
 
+export function getPriceFromProducts(products: TProductExpanded[], priceId: string) {
+  const product = products.find((x) => x.prices.some((p) => p.id === priceId));
+  return product?.prices.find((x) => x.id === priceId);
+}
+
 export function getStatementDescriptor(items: any[]) {
   for (const item of items) {
     if (item.price?.product?.statement_descriptor) {
@@ -582,3 +618,16 @@ export function stopEvent(e: React.SyntheticEvent<any>) {
     // Do nothing
   }
 }
+
+export function groupPricingTableItems(items: any[]) {
+  const grouped: { [key: string]: any[] } = {};
+  items.forEach((x: any, index) => {
+    x.index = index;
+    if (!grouped[x.product_id]) {
+      grouped[x.product_id] = [];
+    }
+    grouped[x.product_id]?.push(x);
+  });
+
+  return Object.entries(grouped);
+}

package/src/locales/en.tsx

@@ -44,6 +44,9 @@ export default flat({
     loadMore: 'View more {resource}',
     loadingMore: 'Loading more {resource}...',
     noMore: 'No more {resource}',
+    copied: 'Copied',
+    previous: 'Back',
+    continue: 'Continue',
     metadata: {
       label: 'Metadata',
       add: 'Add more metadata',
@@ -173,6 +176,7 @@ export default flat({
       info: 'Payment link information',
       add: 'Create payment link',
       save: 'Create link',
+      copyLink: 'Copy URL',
       saved: 'Payment link successfully saved',
       additional: 'Additional options',
       beforePay: 'Payment page',
@@ -210,6 +214,28 @@ export default flat({
         placeholder: 'Not consumer facing',
       },
     },
+    pricingTable: {
+      view: 'View pricing table',
+      add: 'Create pricing table',
+      save: 'Create',
+      copyLink: 'Copy URL',
+      saved: 'Pricing table successfully saved',
+      edit: 'Edit pricing table',
+      rename: 'Change name',
+      archive: 'Archive pricing table',
+      archiveTip:
+        'Archiving will hide this pricing table from new purchases. Are you sure you want to archive this pricing table?',
+      remove: 'Remove pricing table',
+      removeTip:
+        'Removing will hide this pricing table from new purchases. Are you sure you want to remove this pricing table?',
+      name: {
+        label: 'Name',
+        placeholder: 'Not consumer facing',
+      },
+      display: 'Display Settings',
+      highlight: 'Highlight product',
+      customer: 'Customer portal',
+    },
     paymentIntent: {
       name: 'Payment',
       view: 'View payment detail',
@@ -396,6 +422,8 @@ export default flat({
     method: 'Payment method',
     processing: 'Processing',
     payment: 'Pay',
+    try: 'Try for free',
+    include: 'This includes:',
     subscription: 'Subscribe',
     setup: 'Subscribe',
     continue: 'Confirm {action}',

package/src/pages/admin/payments/links/create.tsx

@@ -65,7 +65,7 @@ export default function CreatePaymentLink() {
       },
       metadata: [], // FIXME:
       custom_fields: [], // FIXME:
-      submit_type: 'pay', // FIXME:
+      submit_type: 'auto', // FIXME:
     },
   });
 

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

@@ -1,7 +1,5 @@
-import Button from '@arcblock/ux/lib/Button';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
-import { AddOutlined } from '@mui/icons-material';
 import { Stack, Typography } from '@mui/material';
 import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -9,6 +7,8 @@ import { useNavigate, useParams } from 'react-router-dom';
 const ProductCreate = React.lazy(() => import('./products/create'));
 const ProductDetail = React.lazy(() => import('./products/detail'));
 const PriceDetail = React.lazy(() => import('./prices/detail'));
+const PricingTableCreate = React.lazy(() => import('./pricing-tables/create'));
+const PricingTableDetail = React.lazy(() => import('./pricing-tables/detail'));
 
 const pages = {
   products: React.lazy(() => import('./products')),
@@ -29,6 +29,10 @@ export default function Products() {
     return <PriceDetail id={page} />;
   }
 
+  if (page.startsWith('prctbl_')) {
+    return <PricingTableDetail id={page} />;
+  }
+
   // @ts-ignore
   const TabComponent = pages[page] || pages.products;
   const tabs = [
@@ -40,17 +44,8 @@ export default function Products() {
   let extra = null;
   if (page === 'products') {
     extra = <ProductCreate />;
-  } else if (page === 'coupons') {
-    extra = (
-      <Button
-        variant="contained"
-        size="small"
-        color="primary"
-        onClick={() => navigate('/admin/products/coupons/create')}>
-        <AddOutlined />
-        {t('admin.coupon.create')}
-      </Button>
-    );
+  } else if (page === 'pricing-tables') {
+    extra = <PricingTableCreate />;
   }
 
   return (

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

@@ -0,0 +1,140 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TPricingTable } from '@did-pay/types';
+import { AddOutlined } from '@mui/icons-material';
+import { Box, Button, Stack, Typography } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { dispatch } from 'use-bus';
+
+import DrawerForm from '../../../../components/drawer-form';
+import PricingTableCustomerSettings from '../../../../components/pricing-table/customer-settings';
+import PricingTablePaymentSettings from '../../../../components/pricing-table/payment-settings';
+import PricingTablePreview from '../../../../components/pricing-table/preview';
+import PricingTableProductSettings from '../../../../components/pricing-table/product-settings';
+import { ProductsProvider } from '../../../../contexts/products';
+import { useSessionContext } from '../../../../contexts/session';
+import api from '../../../../libs/api';
+import { formatError } from '../../../../libs/util';
+
+export default function CreatePricingTable() {
+  const { t } = useLocaleContext();
+  const { session } = useSessionContext();
+  const [step, setStep] = useState(0); // ['products', 'payment', 'portal']
+  const [stashed, setStashed] = useState(0);
+
+  const methods = useForm<TPricingTable & any>({
+    shouldUnregister: false,
+    defaultValues: {
+      name: '',
+      branding_settings: {
+        background_color: '#ffffff',
+        border_style: 'default',
+        button_color: '#0074d4',
+        font_family: 'default',
+      },
+      highlight: false,
+      highlight_product_id: '',
+      highlight_text: 'popular',
+      items: [],
+      metadata: [], // FIXME:
+    },
+  });
+
+  const changes = methods.watch(['items', 'branding_settings']);
+
+  useEffect(() => {
+    api.post('/api/pricing-tables/stash', methods.getValues()).then(() => {
+      setStashed(stashed + 1);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(changes)]);
+
+  const onSubmit = (data: TPricingTable) => {
+    if (data.items.length === 0) {
+      Toast.error(t('admin.paymentLink.noProducts'));
+      return;
+    }
+
+    api
+      .post('/api/pricing-tables', data)
+      .then(() => {
+        Toast.success(t('admin.pricingTable.saved'));
+        methods.reset();
+        dispatch('drawer.submitted');
+        dispatch('pricingTable.created');
+      })
+      .catch((err) => {
+        console.error(err);
+        Toast.error(formatError(err));
+      });
+  };
+
+  const onPrevious = () => {
+    if (step > 0) {
+      setStep(step - 1);
+    }
+  };
+
+  const onContinue = () => {
+    if (step < 2) {
+      setStep(step + 1);
+    } else {
+      methods.handleSubmit(async (formData: any) => {
+        await onSubmit(formData);
+      })();
+    }
+  };
+
+  return (
+    <DrawerForm
+      icon={<AddOutlined />}
+      text={t('admin.pricingTable.add')}
+      width={1280}
+      addons={
+        // @ts-ignore
+        <Button variant="contained" size="small" onClick={methods.handleSubmit(onSubmit)}>
+          {t('admin.pricingTable.save')}
+        </Button>
+      }>
+      <FormProvider {...methods}>
+        <ProductsProvider>
+          <Stack height="92vh" spacing={2} direction="row">
+            <Box flex={1} sx={{ borderRight: '1px solid #eee' }} position="relative">
+              <Stack height="100%" spacing={2}>
+                <Box overflow="auto" sx={{ pr: 2 }}>
+                  {step === 0 && <PricingTableProductSettings />}
+                  {step === 1 && <PricingTablePaymentSettings />}
+                  {step === 2 && <PricingTableCustomerSettings />}
+                </Box>
+                <Stack
+                  padding={2}
+                  spacing={2}
+                  width="100%"
+                  direction="row"
+                  alignItems="center"
+                  justifyContent="flex-end"
+                  position="absolute"
+                  sx={{ borderTop: '1px solid #eee', left: 0, bottom: 0 }}>
+                  <Button variant="text" color="inherit" disabled={step === 0} onClick={onPrevious}>
+                    {t('common.previous')}
+                  </Button>
+                  <Button variant="contained" color="primary" onClick={onContinue}>
+                    {step === 2 ? t('common.save') : t('common.continue')}
+                  </Button>
+                </Stack>
+              </Stack>
+            </Box>
+            <Box flex={2}>
+              <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+                {t('common.preview')}
+              </Typography>
+              {stashed && <PricingTablePreview id={`prctbl_${session.user.did}`} version={stashed} />}
+            </Box>
+          </Stack>
+        </ProductsProvider>
+      </FormProvider>
+    </DrawerForm>
+  );
+}

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

@@ -0,0 +1,237 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TPricingTableExpanded, TProduct } from '@did-pay/types';
+import { ArrowBackOutlined, Edit } from '@mui/icons-material';
+import { Alert, 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 { joinURL } from 'ufo';
+
+import Copyable from '../../../../components/copyable';
+import EventList from '../../../../components/event/list';
+import InfoCard from '../../../../components/info-card';
+import InfoRow from '../../../../components/info-row';
+import MetadataEditor from '../../../../components/metadata/editor';
+import PricingTableActions from '../../../../components/pricing-table/actions';
+import PricingTablePreview from '../../../../components/pricing-table/preview';
+import SectionHeader from '../../../../components/section/header';
+import Table from '../../../../components/table';
+import { useSettingsContext } from '../../../../contexts/settings';
+import api from '../../../../libs/api';
+import { formatError, formatProductPrice, formatTime } from '../../../../libs/util';
+
+const fetchData = (id: string): Promise<TPricingTableExpanded> => {
+  return api.get(`/api/pricing-tables/${id}`).then((res) => res.data);
+};
+
+export default function PricingTableDetail(props: { id: string }) {
+  const { t, locale } = 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(() => fetchData(props.id));
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const createUpdater = (key: string) => async (updates: TProduct) => {
+    try {
+      setState((prev) => ({ loading: { ...prev.loading, [key]: true } }));
+      await api.put(`/api/payment-links/${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 onUpdateMetadata = createUpdater('metadata');
+  const onChange = (action: string) => {
+    if (action === 'remove') {
+      navigate('/admin/products/pricing-tables');
+    } else {
+      runAsync();
+    }
+  };
+
+  return (
+    <Grid container spacing={4} sx={{ mb: 4 }}>
+      <Grid item md={12}>
+        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+          <Link to="/admin/products/pricing-tables">
+            <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.pricingTables')}
+              </Typography>
+            </Stack>
+          </Link>
+          <Copyable text={props.id} style={{ marginLeft: 4 }} />
+        </Stack>
+        <Box mt={2}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Stack direction="column" alignItems="flex-start">
+              <Stack direction="row" alignItems="center" mb={1}>
+                <Typography variant="h5" sx={{ color: 'text.primary', fontWeight: 600 }}>
+                  {data.name}
+                </Typography>
+              </Stack>
+              <Copyable
+                text={joinURL(window.blocklet.appUrl, window.blocklet.prefix, `/checkout/pricing-table/${data.id}`)}>
+                <Typography variant="h6" sx={{ color: 'text.secondary', mr: 1 }}>
+                  {joinURL(window.blocklet.prefix, `/checkout/pricing-table/${data.id}`)}
+                </Typography>
+              </Copyable>
+            </Stack>
+            <PricingTableActions data={data} onChange={onChange} variant="normal" />
+          </Stack>
+        </Box>
+      </Grid>
+      <Grid item xs={12} md={4}>
+        <Div direction="column" spacing={4}>
+          <Box className="section">
+            <SectionHeader title={t('admin.products')} />
+            <Box className="section-body">
+              <Table
+                className="link-products-table"
+                toolbar={false}
+                footer={false}
+                locale={locale}
+                data={data.items}
+                columns={[
+                  {
+                    label: t('common.name'),
+                    name: 'product_id',
+                    options: {
+                      sort: false,
+                      customBodyRenderLite: (_: any, index: number) => {
+                        const item = data.items[index] as any;
+                        return (
+                          <Link to={`/admin/products/${item.product_id}`}>
+                            <InfoCard
+                              name={item.product.name}
+                              description={formatProductPrice(
+                                // @ts-ignore
+                                { ...item.product, prices: [item.price] },
+                                settings.baseCurrency
+                              )}
+                              logo={item.product.images[0]}
+                            />
+                          </Link>
+                        );
+                      },
+                    },
+                  },
+                  {
+                    label: t('common.actions'),
+                    name: 'quantity',
+                  },
+                ]}
+                options={{
+                  count: data.items.length,
+                  page: 0,
+                  rowsPerPage: 20,
+                }}
+              />
+            </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>
+            <Stack>
+              <InfoRow sizes={[1, 1]} label={t('common.createdAt')} value={formatTime(data.created_at)} />
+              <InfoRow sizes={[1, 1]} label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+            </Stack>
+          </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>
+        </Div>
+      </Grid>
+      <Grid item xs={12} md={8}>
+        <Div>
+          <Box className="section">
+            <SectionHeader title={t('common.preview')} />
+            <Box className="section-body">
+              <PricingTablePreview id={data.id} />
+            </Box>
+          </Box>
+        </Div>
+      </Grid>
+    </Grid>
+  );
+}
+
+const Div = styled(Stack)``;