payment-kit 1.13.24 → 1.13.26

package/src/components/pricing-table/product-settings.tsx

@@ -0,0 +1,195 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Checkbox, FormControlLabel, MenuItem, Select, Stack, Typography } from '@mui/material';
+import { useSetState } from 'ahooks';
+import { useEffect } from 'react';
+import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
+
+import { useProductsContext } from '../../contexts/products';
+import { getProductByPriceId, groupPricingTableItems, isPriceCurrencyAligned } from '../../libs/util';
+import ProductSelect from '../payment-link/product-select';
+import CreateProduct from '../product/create';
+import ProductItem from './product-item';
+
+export default function PricingTableProductSettings() {
+  const { t } = useLocaleContext();
+  const { products, refresh } = useProductsContext();
+  const { control, setValue, getValues } = useFormContext();
+  const items = useFieldArray({ control, name: 'items' });
+  const [state, setState] = useSetState({ creating: false });
+  const highlight = useWatch({ control, name: 'highlight' });
+
+  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) {
+      const product = getProductByPriceId(products, priceId);
+      if (product) {
+        items.append({
+          price_id: priceId,
+          product_id: product.id,
+          is_highlight: false,
+          highlight_text: 'popular',
+          adjustable_quantity: {
+            enabled: false,
+            maximum: 1,
+            minimum: 0,
+          },
+          after_completion: {
+            type: 'hosted_confirmation',
+            hosted_confirmation: {
+              custom_message: '',
+            },
+            redirect: {
+              url: '',
+            },
+          },
+          allow_promotion_codes: false,
+          customer_creation: 'always',
+          consent_collection: {
+            promotions: 'none',
+            terms_of_service: 'none',
+          },
+          phone_number_collection: {
+            enabled: false,
+          },
+          billing_address_collection: 'auto',
+          include_free_trial: false,
+          subscription_data: {
+            description: '',
+            trial_period_days: 0,
+          },
+          custom_fields: [],
+          submit_type: 'auto',
+        });
+      }
+    }
+  };
+
+  const onProductCreated = () => {
+    setState({ creating: false });
+    refresh();
+  };
+
+  const grouped = groupPricingTableItems(items.fields);
+
+  return (
+    <Stack spacing={2} alignItems="flex-start">
+      <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+        {t('admin.paymentLink.products')}
+      </Typography>
+      <Stack spacing={2} sx={{ width: '100%' }}>
+        {grouped.map((item) => {
+          const [productId, prices] = item;
+          // @ts-ignore
+          const product = products.find((x) => x.id === productId);
+          if (!product) {
+            return null;
+          }
+
+          return (
+            <ProductItem
+              key={productId}
+              // @ts-ignore
+              valid={prices.every((x) => isPriceCurrencyAligned(items.fields, products, x.index))}
+              product={product}
+              prices={prices}
+              onUpdate={refresh}
+              onRemove={(i: number) => items.remove(i)}
+            />
+          );
+        })}
+        {items.fields.some((_, index) => !isPriceCurrencyAligned(items.fields as any[], products, index)) && (
+          <Typography color="error" fontSize="small">
+            {t('admin.paymentLink.currencyNotAligned')}
+          </Typography>
+        )}
+        <ProductSelect
+          mode={items.fields.length ? 'waiting' : 'selecting'}
+          onSelect={onProductSelected}
+          hasSelected={(price) => price.type !== 'recurring' || items.fields.some((x: any) => x.price_id === price.id)}
+        />
+        {state.creating && <CreateProduct onCancel={() => setState({ creating: false })} onSave={onProductCreated} />}
+      </Stack>
+      <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+        {t('admin.pricingTable.display')}
+      </Typography>
+      {grouped.length > 0 && (
+        <Stack direction="column" spacing={2}>
+          <Controller
+            name="highlight"
+            control={control}
+            render={({ field }) => (
+              <FormControlLabel
+                label={t('admin.pricingTable.highlight')}
+                control={
+                  <Checkbox
+                    checked={getValues().highlight}
+                    {...field}
+                    onChange={(_, checked) => {
+                      setValue(field.name, checked);
+                      if (checked && !getValues().highlight_product_id && grouped[0]) {
+                        setValue('highlight_product_id', grouped[0][0]);
+                      }
+                    }}
+                  />
+                }
+              />
+            )}
+          />
+          {highlight && (
+            <Stack direction="row" alignItems="center" spacing={0.5}>
+              <Controller
+                name="highlight_product_id"
+                control={control}
+                render={({ field }) => (
+                  <Select {...field} size="small">
+                    {grouped.map(([productId]) => {
+                      const product = products.find((x) => x.id === productId);
+                      if (!product) {
+                        return null;
+                      }
+
+                      return (
+                        <MenuItem key={productId} value={productId}>
+                          {product.name}
+                        </MenuItem>
+                      );
+                    })}
+                  </Select>
+                )}
+              />
+              <Typography>as</Typography>
+              <Controller
+                name="highlight_text"
+                control={control}
+                render={({ field }) => (
+                  <Select {...field} size="small">
+                    <MenuItem key="deal" value="deal">
+                      Best deal
+                    </MenuItem>
+                    <MenuItem key="popular" value="popular">
+                      Most popular
+                    </MenuItem>
+                    <MenuItem key="recommended" value="recommended">
+                      Recommended
+                    </MenuItem>
+                  </Select>
+                )}
+              />
+            </Stack>
+          )}
+        </Stack>
+      )}
+    </Stack>
+  );
+}

package/src/components/pricing-table/rename.tsx

@@ -0,0 +1,67 @@
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TPricingTable } 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 RenamePricingTable({
+  data,
+  loading,
+  onSave,
+  onCancel,
+}: {
+  data: TPricingTable;
+  loading: boolean;
+  onSave: EventHandler<any>;
+  onCancel: EventHandler<any>;
+}) {
+  const { t } = useLocaleContext();
+  const methods = useForm<TPricingTable>({
+    defaultValues: {
+      name: data.name,
+    },
+  });
+
+  const { handleSubmit, reset } = methods;
+  const onSubmit = () => {
+    handleSubmit(async (formData: any) => {
+      await onSave(formData);
+      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"
+          rules={{ required: true }}
+          label={t('admin.paymentLink.name.label')}
+          placeholder={t('admin.paymentLink.name.placeholder')}
+          autoFocus
+        />
+      </FormProvider>
+    </Dialog>
+  );
+}

package/src/libs/util.ts

@@ -159,6 +159,31 @@ export const formatPrice = (
   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;
@@ -179,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) {
@@ -588,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

@@ -45,6 +45,8 @@ export default flat({
     loadingMore: 'Loading more {resource}...',
     noMore: 'No more {resource}',
     copied: 'Copied',
+    previous: 'Back',
+    continue: 'Continue',
     metadata: {
       label: 'Metadata',
       add: 'Add more metadata',
@@ -212,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',
@@ -398,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>
+  );
+}