payment-kit 1.13.30 → 1.13.32

package/src/components/checkout/product-item.tsx

@@ -1,38 +1,101 @@
-import type { TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency } from '@did-pay/types';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { PriceRecurring, TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency } from '@did-pay/types';
 import { Stack, Typography } from '@mui/material';
 
-import { formatLineItemPricing, formatRecurring } from '../../libs/util';
+import { formatLineItemPricing, formatPrice, formatRecurring, formatUpsellSaving } from '../../libs/util';
+import Status from '../status';
+import Switch from '../switch';
 import ProductCard from './product-card';
 
 type Props = {
   item: TLineItemExpanded;
   session: TCheckoutSessionExpanded;
   currency: TPaymentCurrency;
+  onUpsell: Function;
+  onDownsell: Function;
 };
 
-export default function ProductItem({ item, session, currency }: Props) {
+export default function ProductItem({ item, session, currency, onUpsell, onDownsell }: Props) {
+  const { t } = useLocaleContext();
   const pricing = formatLineItemPricing(item, currency, session.subscription_data?.trial_period_days || 0);
+  const saving = formatUpsellSaving(session, currency);
   const metered = item.price?.recurring?.usage_type === 'metered' ? ' based on usage' : '';
+  const canUpsell = session.line_items.length === 1;
   return (
-    <Stack direction="row" alignItems="center" justifyContent="space-between">
-      <ProductCard
-        logo={item.price.product?.images[0]}
-        name={item.price.product?.name}
-        description={item.price.product?.description}
-        extra={
-          item.price.type === 'recurring' && item.price.recurring
-            ? `Billed ${formatRecurring(item.price.recurring)} ${metered}`
-            : undefined
-        }
-      />
-      <Stack direction="column" alignItems="flex-end" flex={1}>
-        <Typography sx={{ color: 'text.primary', fontWeight: 500 }} gutterBottom>
-          {pricing.primary}
-        </Typography>
-        {pricing.secondary && (
-          <Typography sx={{ fontSize: '0.85rem', color: 'text.secondary' }}>{pricing.secondary}</Typography>
-        )}
+    <Stack direction="column" alignItems="flex-start" spacing={1} sx={{ width: '100%' }}>
+      <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
+        <ProductCard
+          logo={item.price.product?.images[0]}
+          name={item.price.product?.name}
+          description={item.price.product?.description}
+          extra={
+            item.price.type === 'recurring' && item.price.recurring
+              ? `Billed ${formatRecurring(item.upsell_price?.recurring || item.price.recurring)} ${metered}`
+              : undefined
+          }
+        />
+        <Stack direction="column" alignItems="flex-end" flex={1}>
+          <Typography sx={{ color: 'text.primary', fontWeight: 500 }} gutterBottom>
+            {pricing.primary}
+          </Typography>
+          {pricing.secondary && (
+            <Typography sx={{ fontSize: '0.85rem', color: 'text.secondary' }}>{pricing.secondary}</Typography>
+          )}
+        </Stack>
       </Stack>
+      {canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && (
+        <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
+          <Typography
+            component="label"
+            htmlFor="upsell-switch"
+            sx={{
+              fontSize: 12,
+              cursor: 'pointer',
+              color: 'text.primary',
+            }}>
+            <Switch
+              id="upsell-switch"
+              sx={{ mr: 1 }}
+              variant="success"
+              checked={false}
+              onChange={() => onUpsell(item.price_id, item.price.upsell?.upsells_to_id)}
+            />
+            {t('checkout.upsell.save', {
+              recurring: formatRecurring(item.price.upsell.upsells_to.recurring as PriceRecurring),
+            })}
+            <Status label={t('checkout.upsell.off', { saving })} color="primary" variant="outlined" sx={{ ml: 0.5 }} />
+          </Typography>
+          <Typography component="span" sx={{ fontSize: 12 }}>
+            {formatPrice(item.price.upsell.upsells_to, currency)}
+          </Typography>
+        </Stack>
+      )}
+      {canUpsell && item.upsell_price_id && (
+        <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
+          <Typography
+            component="label"
+            htmlFor="upsell-switch"
+            sx={{
+              fontSize: 12,
+              cursor: 'pointer',
+              color: 'text.secondary',
+            }}>
+            <Switch
+              id="upsell-switch"
+              sx={{ mr: 1 }}
+              variant="success"
+              checked
+              onChange={() => onDownsell(item.upsell_price_id)}
+            />
+            {t('checkout.upsell.revert', {
+              recurring: formatRecurring(item.price.recurring as PriceRecurring),
+            })}
+          </Typography>
+          <Typography component="span" sx={{ fontSize: 12 }}>
+            {formatPrice(item.price, currency)}
+          </Typography>
+        </Stack>
+      )}
     </Stack>
   );
 }

package/src/components/checkout/summary.tsx

@@ -8,9 +8,11 @@ import ProductItem from './product-item';
 type Props = {
   checkoutSession: TCheckoutSessionExpanded;
   currency: TPaymentCurrency;
+  onUpsell: Function;
+  onDownsell: Function;
 };
 
-export default function PaymentSummary({ checkoutSession, currency }: Props) {
+export default function PaymentSummary({ checkoutSession, currency, onUpsell, onDownsell }: Props) {
   const headlines = formatCheckoutHeadlines(checkoutSession, currency);
   return (
     <Fade in>
@@ -26,7 +28,14 @@ export default function PaymentSummary({ checkoutSession, currency }: Props) {
         </Stack>
         <Stack spacing={2}>
           {checkoutSession.line_items.map((x: TLineItemExpanded) => (
-            <ProductItem key={x.price_id} item={x} session={checkoutSession} currency={currency} />
+            <ProductItem
+              key={x.price_id}
+              item={x}
+              session={checkoutSession}
+              currency={currency}
+              onUpsell={onUpsell}
+              onDownsell={onDownsell}
+            />
           ))}
         </Stack>
       </Stack>

package/src/components/info-row.tsx

@@ -4,19 +4,21 @@ import type { ReactNode } from 'react';
 type Props = {
   label: string | ReactNode;
   value?: string | ReactNode;
+  alignItems?: string;
   sizes?: [number, number];
 };
 
 InfoRow.defaultProps = {
   value: undefined,
   sizes: [1, 3],
+  alignItems: 'center',
 };
 
 export default function InfoRow(props: Props) {
   const isNone = props.value === '' || typeof props.value === 'undefined';
   const sizes = props.sizes || [1, 3];
   return (
-    <Stack direction="row" alignItems="flex-start" justifyContent="space-between" flexWrap="wrap" sx={{ mb: 1 }}>
+    <Stack direction="row" alignItems={props.alignItems} justifyContent="space-between" flexWrap="wrap" sx={{ mb: 1 }}>
       <Box flex={sizes[0]} color="text.secondary">
         {props.label}
       </Box>

package/src/components/invoice/table.tsx

@@ -62,7 +62,7 @@ export default function InvoiceTable({ invoice, simple }: Props) {
             <TableCell align="right">{formatAmount(line.amount, invoice.paymentCurrency.decimal)}</TableCell>
             {!simple && (
               <TableCell align="right">
-                <LineItemActions data={line} />
+                <LineItemActions data={line as any} />
               </TableCell>
             )}
           </TableRow>

package/src/components/price/upsell-select.tsx

@@ -0,0 +1,83 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TPriceExpanded } from '@did-pay/types';
+import { AddOutlined } from '@mui/icons-material';
+import { Alert, CircularProgress, MenuItem, Select, Stack, Typography } from '@mui/material';
+import { useRequest, useSetState } from 'ahooks';
+
+import api from '../../libs/api';
+import { formatError, formatPrice } from '../../libs/util';
+import AddPrice from '../product/add-price';
+
+type Props = {
+  price: TPriceExpanded;
+  onSelect: Function;
+};
+
+const fetchData = (id: string): Promise<TPriceExpanded[]> => {
+  return api.get(`/api/prices/${id}/upsell`).then((res) => res.data);
+};
+
+export default function UpsellSelect({ price, onSelect }: Props) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({ loading: false, adding: false, action: '' });
+
+  const { loading, error, data } = useRequest(() => fetchData(price.id));
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const onSelectPrice = (e: any) => {
+    if (e.target.value) {
+      if (e.target.value === 'add') {
+        setState({ action: 'add' });
+      } else {
+        onSelect(e.target.value);
+      }
+    }
+  };
+
+  const onAddPrice = async (formData: any) => {
+    try {
+      setState({ adding: true });
+      await api.post('/api/prices', { ...formData, product_id: price.product_id });
+      Toast.success(t('common.saved'));
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ adding: false });
+    }
+  };
+
+  return (
+    <>
+      <Select value="empty" sx={{ width: 300 }} size="small" onChange={onSelectPrice}>
+        <MenuItem value="empty">
+          <Stack direction="row" alignItems="center">
+            <Typography>{t('admin.price.find')}</Typography>
+          </Stack>
+        </MenuItem>
+        <MenuItem value="add">
+          <Stack direction="row" alignItems="center">
+            <AddOutlined />
+            <Typography>{t('admin.price.add')}</Typography>
+          </Stack>
+        </MenuItem>
+        {data.map((x) => (
+          <MenuItem key={x.id} value={x.id}>
+            {formatPrice(x, x.currency)}
+          </MenuItem>
+        ))}
+      </Select>
+      {state.action === 'add' && (
+        <AddPrice loading={state.adding} onSave={onAddPrice} onCancel={() => setState({ action: '' })} />
+      )}
+    </>
+  );
+}

package/src/components/price/upsell.tsx

@@ -0,0 +1,74 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { TPriceExpanded } from '@did-pay/types';
+import { DeleteOutlineOutlined } from '@mui/icons-material';
+import { CircularProgress, Grid, IconButton, Stack, Typography } from '@mui/material';
+import { useSetState } from 'ahooks';
+
+import { useSettingsContext } from '../../contexts/settings';
+import api from '../../libs/api';
+import { formatError, formatPrice } from '../../libs/util';
+import InfoRow from '../info-row';
+import UpsellSelect from './upsell-select';
+
+export function UpsellForm({ data, onChange }: { data: TPriceExpanded; onChange: Function }) {
+  const { settings } = useSettingsContext();
+  const [state, setState] = useSetState({
+    loading: false,
+  });
+
+  const onRemoveUpsell = async () => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/prices/${data.id}`, { upsell: { upsells_to_id: '' } }).then((res) => res.data);
+      setState({ loading: false });
+      onChange();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+      setState({ loading: false });
+    }
+  };
+
+  const onSelectUpsell = async (id: string) => {
+    try {
+      setState({ loading: true });
+      await api.put(`/api/prices/${data.id}`, { upsell: { upsells_to_id: id } }).then((res) => res.data);
+      setState({ loading: false });
+      onChange();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+      setState({ loading: false });
+    }
+  };
+
+  if (state.loading) {
+    return <CircularProgress />;
+  }
+
+  if (data.upsell?.upsells_to_id) {
+    return (
+      <Stack spacing={1} direction="row" alignItems="center">
+        <Typography>{formatPrice(data.upsell.upsells_to, settings.baseCurrency)}</Typography>
+        <IconButton size="small" sx={{ ml: 1 }} onClick={onRemoveUpsell}>
+          <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
+        </IconButton>
+      </Stack>
+    );
+  }
+
+  return <UpsellSelect price={data} onSelect={onSelectUpsell} />;
+}
+
+export default function PriceUpsell({ data, onChange }: { data: TPriceExpanded; onChange: Function }) {
+  const { t } = useLocaleContext();
+
+  return (
+    <Grid container>
+      <Grid item xs={12} md={6}>
+        <InfoRow label={t('admin.price.upsell.to')} value={<UpsellForm data={data} onChange={onChange} />} />
+      </Grid>
+    </Grid>
+  );
+}

package/src/components/status.tsx

@@ -3,9 +3,9 @@ import { Chip, ChipProps } from '@mui/material';
 export default function Status(props: ChipProps) {
   return (
     <Chip
-      {...props}
       size="small"
       variant="outlined"
+      {...props}
       sx={{ ...(props.sx || {}), borderRadius: '4px', height: 20, lineHeight: 20, textTransform: 'capitalize' }}
     />
   );

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

@@ -7,39 +7,37 @@ import { formatTime } from '../../../libs/util';
 
 export default function SubscriptionCancelForm({ data }: { data: TSubscriptionExpanded }) {
   const { t } = useLocaleContext();
-  const { control, formState } = useFormContext();
-  const isCustom = useWatch({ control, name: 'cancel.at' }) === 'custom';
+  const { control, setValue, formState } = useFormContext();
+  const cancelAt = useWatch({ control, name: 'cancel.at' });
+  const isCustom = cancelAt === 'custom';
 
   return (
     <Box sx={{ width: 400 }}>
       <Stack direction="row" spacing={3} alignItems="flex-start">
         <Typography>{t('admin.subscription.cancel.at.title')}</Typography>
         <Stack>
-          <Controller
-            name="cancel.at"
-            control={control}
-            render={({ field }) => (
-              <RadioGroup {...field}>
-                <FormControlLabel
-                  value="now"
-                  control={<Radio checked={field.value === 'now'} />}
-                  label={t('admin.subscription.cancel.at.now', { date: formatTime(new Date()) })}
-                />
-                <FormControlLabel
-                  value="current_period_end"
-                  control={<Radio checked={field.value === 'current_period_end'} />}
-                  label={t('admin.subscription.cancel.at.current_period_end', {
-                    date: formatTime(new Date(data.current_period_end * 1000)),
-                  })}
-                />
-                <FormControlLabel
-                  value="custom"
-                  control={<Radio checked={field.value === 'custom'} />}
-                  label={t('admin.subscription.cancel.at.custom')}
-                />
-              </RadioGroup>
-            )}
-          />
+          <RadioGroup>
+            <FormControlLabel
+              value="now"
+              onClick={() => setValue('cancel.at', 'now')}
+              control={<Radio checked={cancelAt === 'now'} />}
+              label={t('admin.subscription.cancel.at.now', { date: formatTime(new Date()) })}
+            />
+            <FormControlLabel
+              value="current_period_end"
+              onClick={() => setValue('cancel.at', 'current_period_end')}
+              control={<Radio checked={cancelAt === 'current_period_end'} />}
+              label={t('admin.subscription.cancel.at.current_period_end', {
+                date: formatTime(new Date(data.current_period_end * 1000)),
+              })}
+            />
+            <FormControlLabel
+              value="custom"
+              onClick={() => setValue('cancel.at', 'custom')}
+              control={<Radio checked={cancelAt === 'custom'} />}
+              label={t('admin.subscription.cancel.at.custom')}
+            />
+          </RadioGroup>
           {isCustom && (
             <Controller
               name="cancel.time"

package/src/components/subscription/items/index.tsx

@@ -81,7 +81,7 @@ export default function SubscriptionItemList({ data, currency }: ListProps) {
         sort: false,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data[index] as TSubscriptionItemExpanded;
-          return <LineItemActions data={item} />;
+          return <LineItemActions data={item as any} />;
         },
       },
     },

package/src/libs/util.ts

@@ -259,64 +259,61 @@ export function formatLineItemPricing(
   currency: TPaymentCurrency,
   trial: number
 ): { primary: string; secondary?: string } {
+  const price = item.upsell_price || item.price;
   const amount = fromUnitToToken(
-    new BN(getPriceUintAmountByCurrency(item.price, currency)).mul(new BN(item.quantity)),
+    new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(item.quantity)),
     currency.decimal
   ).toString();
 
-  if (item.price.type === 'recurring' && item.price.recurring) {
+  if (price.type === 'recurring' && price.recurring) {
     if (trial > 0) {
-      const secondary = item.price.product.unit_label
-        ? `${amount} ${currency.symbol} / ${item.price.product.unit_label}`
+      const secondary = price.product.unit_label
+        ? `${amount} ${currency.symbol} / ${price.product.unit_label}`
         : `${amount} ${currency.symbol}`;
       return {
         primary: `Free for ${trial} days`,
-        secondary: `${secondary} ${formatRecurring(item.price.recurring, false, '/')}`,
+        secondary: `${secondary} ${formatRecurring(price.recurring, false, '/')}`,
       };
     }
 
     return {
       primary: `${amount} ${currency.symbol}`,
-      secondary: item.price.product.unit_label ? `${amount} ${currency.symbol} / ${item.price.product.unit_label}` : '',
+      secondary: price.product.unit_label ? `${amount} ${currency.symbol} / ${price.product.unit_label}` : '',
     };
   }
 
   return {
     primary: `${amount} ${currency.symbol}`,
-    secondary: item.price.product.unit_label ? `${amount} ${currency.symbol} / ${item.price.product.unit_label}` : '',
+    secondary: price.product.unit_label ? `${amount} ${currency.symbol} / ${price.product.unit_label}` : '',
   };
 }
 
-export function getCheckoutAmount(items: TLineItemExpanded[], currency: TPaymentCurrency, includeFreeTrial = false) {
-  const subtotal = items
-    .reduce((acc, x) => {
-      if (x.price.type === 'recurring') {
-        if (includeFreeTrial) {
-          return acc;
-        }
-        if (x.price.recurring?.usage_type === 'metered') {
-          return acc;
-        }
-      }
-      return acc.add(new BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new BN(x.quantity)));
-    }, new BN(0))
-    .toString();
+export function getCheckoutAmount(
+  items: TLineItemExpanded[],
+  currency: TPaymentCurrency,
+  includeFreeTrial = false,
+  upsell = true
+) {
+  let renew = new BN(0);
 
   const total = items
     .reduce((acc, x) => {
-      if (x.price.type === 'recurring') {
+      const price = upsell ? x.upsell_price || x.price : x.price;
+      if (price.type === 'recurring') {
+        renew = renew.add(new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(x.quantity)));
+
         if (includeFreeTrial) {
           return acc;
         }
-        if (x.price.recurring?.usage_type === 'metered') {
+        if (price.recurring?.usage_type === 'metered') {
           return acc;
         }
       }
-      return acc.add(new BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new BN(x.quantity)));
+      return acc.add(new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(x.quantity)));
     }, new BN(0))
     .toString();
 
-  return { subtotal, total, discount: '0', shipping: '0', tax: '0' };
+  return { subtotal: total, total, renew: renew.toString(), discount: '0', shipping: '0', tax: '0' };
 }
 
 export function formatPaymentLinkPricing(link: TPaymentLinkExpanded, currency: TPaymentCurrency) {
@@ -336,6 +333,27 @@ export function formatPaymentLinkPricing(link: TPaymentLinkExpanded, currency: T
   );
 }
 
+export function formatUpsellSaving(session: TCheckoutSessionExpanded, currency: TPaymentCurrency) {
+  const items = session.line_items as TLineItemExpanded[];
+  const from = getCheckoutAmount(items, currency, false, false);
+  const to = getCheckoutAmount(
+    items.map((x) => ({
+      ...x,
+      upsell_price_id: x.price.upsell?.upsells_to_id,
+      upsell_price: x.price.upsell?.upsells_to,
+    })) as TLineItemExpanded[],
+    currency,
+    false,
+    true
+  );
+
+  const factor = 12; // FIXME: interval
+  const before = new BN(from.total).mul(new BN(factor));
+  const after = new BN(to.total);
+
+  return Number(before.sub(after).mul(new BN(100)).div(after).toString()).toFixed(0);
+}
+
 export function formatCheckoutHeadlines(
   session: TCheckoutSessionExpanded,
   currency: TPaymentCurrency
@@ -354,7 +372,11 @@ export function formatCheckoutHeadlines(
 
   // empty
   if (items.length === 0) {
-    throw new Error('No line items for the checkout session');
+    return {
+      action: 'No thing to pay',
+      amount: '0',
+      then: '',
+    };
   }
 
   const { name } = items[0]?.price.product || { name: '' };
@@ -368,10 +390,8 @@ export function formatCheckoutHeadlines(
     return { action: `Pay ${brand}`, amount, then: '' };
   }
 
-  const recurring = formatRecurring(
-    items.find((x) => x.price.type === 'recurring')?.price.recurring as PriceRecurring,
-    false
-  );
+  const item = items.find((x) => x.price.type === 'recurring');
+  const recurring = formatRecurring((item?.upsell_price || item?.price)?.recurring as PriceRecurring, false);
 
   // all recurring
   if (items.every((x) => x.price.type === 'recurring')) {
@@ -566,7 +586,7 @@ export function isPriceAligned(list: LineItem[], products: TProductExpanded[], i
 }
 
 export function formatSubscriptionProduct(items: TSubscriptionItemExpanded[], maxLength = 2) {
-  const names = items.map((x) => x.price.product.name);
+  const names = items.map((x) => x.price.product?.name).filter(Boolean);
   return (
     names.slice(0, maxLength).join(', ') + (names.length > maxLength ? ` and ${names.length - maxLength} more` : '')
   );

package/src/locales/en.tsx

@@ -36,7 +36,7 @@ export default flat({
     no: 'No',
     email: 'Email',
     did: 'DID',
-    txHash: 'Transaction Hash',
+    txHash: 'Transaction',
     customer: 'Customer',
     custom: 'Custom',
     description: 'Description',
@@ -150,6 +150,7 @@ export default flat({
       amountTip: 'Choose recurring for subscriptions and one-time for everything else.',
       duplicate: 'Duplicate price',
       edit: 'Edit price',
+      find: 'Find or add a price',
       archive: 'Archive price',
       archiveTip: 'Archiving will hide this price from new purchases. Are you sure you want to archive this price?',
       remove: 'Remove price',
@@ -194,6 +195,11 @@ export default flat({
         last_during_period: 'Most recent usage value during period',
         last_ever: 'Most recent usage value',
       },
+      upsell: {
+        title: 'Upsells',
+        to: 'Upsells to',
+        tip: '',
+      },
     },
     coupon: {
       create: 'Create Coupon',
@@ -380,7 +386,7 @@ export default flat({
         at: {
           title: 'Cancel',
           now: 'Immediately ({date})',
-          current_period_end: 'End of the current period ({date})',
+          current_period_end: 'End of current period ({date})',
           custom: 'On a custom date',
         },
       },
@@ -509,6 +515,21 @@ export default flat({
       phonePlaceholder: 'Phone number',
       phoneTip: 'In case we need to contact you about your order',
     },
+    upsell: {
+      save: 'Save with {recurring} billing',
+      revert: 'Switch to {recurring} billing',
+      off: '{saving}% off',
+    },
+    expired: {
+      title: 'Expired Link',
+      description:
+        'This link has expired. This means that your payment has already been processed or your session has expired.',
+    },
+    complete: {
+      title: 'Checkout Completed',
+      description:
+        'This checkout session has completed. This means that your payment has already been successfully processed.',
+    },
   },
   customer: {
     subscriptions: 'Current Subscriptions',