payment-kit 1.13.35 → 1.13.36

package/api/src/routes/checkout-sessions.ts

@@ -205,44 +205,44 @@ router.post('/', auth, async (req, res) => {
 });
 
 export async function startCheckoutSessionFromPaymentLink(id: string, req: Request, res: Response) {
-  const link = await PaymentLink.findByPk(id);
-  if (!link) {
-    res.status(400).json({ error: 'Payment link not found, please contact the source of the payment link.' });
-    return;
-  }
-  if (!link.active) {
-    res.status(400).json({ error: 'Payment link archived, we can not create new checkout session.' });
-    return;
-  }
+  try {
+    const link = await PaymentLink.findByPk(id);
+    if (!link) {
+      res.status(400).json({ error: 'Payment link not found, please contact the source of the payment link.' });
+      return;
+    }
+    if (!link.active) {
+      res.status(400).json({ error: 'Payment link archived, we can not create new checkout session.' });
+      return;
+    }
 
-  const items = await Price.expand(link.line_items, { upsell: true });
-
-  const raw: Partial<CheckoutSession> = await formatCheckoutSession(link, false);
-  raw.livemode = link.livemode;
-  raw.created_via = 'portal';
-  raw.currency_id = link.currency_id || req.currency.id;
-  raw.payment_link_id = link.id;
-
-  if (link.after_completion?.hosted_confirmation?.custom_message) {
-    raw.payment_intent_data = {
-      description: link.after_completion?.hosted_confirmation?.custom_message,
-    };
-  } else {
-    raw.payment_intent_data = {
-      // TODO: bake default into this
-      description: 'Thanks for your purchase',
-    };
-  }
-  if (link.after_completion?.redirect?.url) {
-    raw.success_url = link.after_completion?.redirect?.url;
-  }
+    const items = await Price.expand(link.line_items, { upsell: true });
 
-  if (req.query.redirect) {
-    raw.success_url = req.query.redirect as string;
-    raw.cancel_url = req.query.redirect as string;
-  }
+    const raw: Partial<CheckoutSession> = await formatCheckoutSession(link, false);
+    raw.livemode = link.livemode;
+    raw.created_via = 'portal';
+    raw.currency_id = link.currency_id || req.currency.id;
+    raw.payment_link_id = link.id;
+
+    if (link.after_completion?.hosted_confirmation?.custom_message) {
+      raw.payment_intent_data = {
+        description: link.after_completion?.hosted_confirmation?.custom_message,
+      };
+    } else {
+      raw.payment_intent_data = {
+        // TODO: bake default into this
+        description: 'Thanks for your purchase',
+      };
+    }
+    if (link.after_completion?.redirect?.url) {
+      raw.success_url = link.after_completion?.redirect?.url;
+    }
+
+    if (req.query.redirect) {
+      raw.success_url = req.query.redirect as string;
+      raw.cancel_url = req.query.redirect as string;
+    }
 
-  try {
     let doc;
     if (req.query.preview === '1') {
       doc = await CheckoutSession.findOne({ where: { payment_link_id: link.id, metadata: { preview: '1' } } });

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.13.35
+version: 1.13.36
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.35",
+  "version": "1.13.36",
   "scripts": {
     "dev": "blocklet dev",
     "eject": "vite eject",
@@ -103,7 +103,7 @@
     "@abtnode/types": "1.16.17-beta-952ef53d",
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.35",
+    "@did-pay/types": "1.13.36",
     "@types/cookie-parser": "^1.4.4",
     "@types/cors": "^2.8.14",
     "@types/dotenv-flow": "^3.3.1",
@@ -140,5 +140,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "25a3e75f4894d8aefb016605548c58645c0ca194"
+  "gitHead": "9f921f0988c77ca3d0e9c6f383631f6e61fcd32f"
 }

package/src/components/checkout/header.tsx

@@ -15,7 +15,7 @@ export default function PaymentHeader({ checkoutSession }: Props) {
 
   return (
     <Stack className="cko-header" direction="row" spacing={1} alignItems="center">
-      <Avatar src={window.blocklet.appLogo} sx={{ width: 32, height: 32 }} />
+      <Avatar variant="square" src={window.blocklet.appLogo} sx={{ width: 32, height: 32 }} />
       <Typography sx={{ color: 'text.primary', fontWeight: 600 }}>{brand}</Typography>
       {!livemode && <Livemode />}
     </Stack>

package/src/components/drawer-form.tsx

@@ -13,16 +13,18 @@ type Props = {
   addons: React.ReactNode;
   children: React.ReactNode;
   width?: number;
+  open?: boolean;
   style?: Record<string, any>;
 };
 
 DrawerForm.defaultProps = {
   style: {},
+  open: false,
   width: 960,
 };
 
 export default function DrawerForm(props: Props) {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(props.open);
   const settings = useSettingsContext();
 
   useBus('drawer.submitted', () => setOpen(false), []);

package/src/components/payment-link/before-pay.tsx

@@ -3,6 +3,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Checkbox, FormControlLabel, Stack, TextField, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
+import { useSearchParams } from 'react-router-dom';
 
 import { useProductsContext } from '../../contexts/products';
 import { getProductByPriceId, isPriceAligned } from '../../libs/util';
@@ -12,6 +13,7 @@ import ProductSelect from './product-select';
 
 export default function BeforePay() {
   const { t } = useLocaleContext();
+  const [params, setParams] = useSearchParams();
   const { products, refresh } = useProductsContext();
   const { control, setValue, getValues } = useFormContext();
   const items = useFieldArray({ control, name: 'line_items' });
@@ -47,6 +49,15 @@ export default function BeforePay() {
     }
   };
 
+  useEffect(() => {
+    if (params.get('price_id') && getValues().line_items.length === 0) {
+      onProductSelected(params.get('price_id') as string);
+      params.set('price_id', '');
+      setParams(params);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const onProductCreated = () => {
     setState({ creating: false });
     refresh();

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

@@ -3,6 +3,7 @@ import { Checkbox, FormControlLabel, MenuItem, Select, Stack, Typography } from
 import { useSetState } from 'ahooks';
 import { useEffect } from 'react';
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
+import { useSearchParams } from 'react-router-dom';
 
 import { useProductsContext } from '../../contexts/products';
 import { getProductByPriceId, groupPricingTableItems, isPriceCurrencyAligned } from '../../libs/util';
@@ -12,6 +13,7 @@ import ProductItem from './product-item';
 
 export default function PricingTableProductSettings() {
   const { t } = useLocaleContext();
+  const [params, setParams] = useSearchParams();
   const { products, refresh } = useProductsContext();
   const { control, setValue, getValues } = useFormContext();
   const items = useFieldArray({ control, name: 'items' });
@@ -79,6 +81,15 @@ export default function PricingTableProductSettings() {
     }
   };
 
+  useEffect(() => {
+    if (params.get('price_id') && products.length && getValues().items.length === 0) {
+      onProductSelected(params.get('price_id') as string);
+      params.set('price_id', '');
+      setParams(params);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [products.length]);
+
   const onProductCreated = () => {
     setState({ creating: false });
     refresh();

package/src/libs/util.ts

@@ -626,8 +626,8 @@ export function formatSubscriptionProduct(items: TSubscriptionItemExpanded[], ma
   );
 }
 
-export function formatAmount(amount: string, decimals: number, points = 2) {
-  return Number(fromUnitToToken(amount, decimals)).toFixed(points);
+export function formatAmount(amount: string, decimals: number) {
+  return fromUnitToToken(amount, decimals);
 }
 
 export function findCurrency(methods: TPaymentMethodExpanded[], currencyId: string) {

package/src/locales/en.tsx

@@ -72,6 +72,7 @@ export default flat({
     paymentMethods: 'Payment methods',
     customers: 'Customers',
     products: 'Products',
+    pricing: 'Pricing',
     coupons: 'Coupons',
     pricingTables: 'Pricing tables',
     billing: 'Billing',

package/src/locales/zh.tsx

@@ -73,6 +73,7 @@ export default flat({
     customers: '客户管理',
     products: '产品定价',
     coupons: '优惠券',
+    pricing: '定价',
     pricingTables: '价格表',
     billing: '订阅和发票',
     invoices: '发票',

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

@@ -7,6 +7,7 @@ import { AddOutlined } from '@mui/icons-material';
 import { Button, Stack, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
+import { useSearchParams } from 'react-router-dom';
 import { dispatch } from 'use-bus';
 
 import DrawerForm from '../../../../components/drawer-form';
@@ -25,6 +26,7 @@ type PaymentLink = InferFormType<TPaymentLink> & {
 
 export default function CreatePaymentLink() {
   const { t } = useLocaleContext();
+  const [params] = useSearchParams();
   const { session } = useSessionContext();
   const [current, setCurrent] = useState('beforePay');
   const [stashed, setStashed] = useState(0);
@@ -128,6 +130,7 @@ export default function CreatePaymentLink() {
     <DrawerForm
       icon={<AddOutlined />}
       text={t('admin.paymentLink.add')}
+      open={!!params.get('price_id')}
       width={1280}
       addons={
         // @ts-ignore

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

@@ -2,6 +2,8 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TPrice } from '@did-pay/types';
 import { useSetState } from 'ahooks';
+import noop from 'lodash/noop';
+import { useNavigate } from 'react-router-dom';
 
 import Actions from '../../../../components/actions';
 import ConfirmDialog from '../../../../components/confirm';
@@ -21,12 +23,13 @@ PriceActions.defaultProps = {
   setAsDefault: false,
 };
 
-export default function PriceActions(props: Props) {
+export default function PriceActions({ data, onChange, variant, setAsDefault }: Props) {
   const { t } = useLocaleContext();
+  const navigate = useNavigate();
 
-  const canEdit = props.data.active;
-  const canArchive = props.data.active;
-  const canRemove = !props.data.locked && !props.setAsDefault;
+  const canEdit = data.active;
+  const canArchive = data.active;
+  const canRemove = !data.locked && !setAsDefault;
 
   const [state, setState] = useSetState({
     action: '',
@@ -36,9 +39,9 @@ export default function PriceActions(props: Props) {
   const onEditPrice = async (updates: TPrice) => {
     try {
       setState({ loading: true });
-      await api.put(`/api/prices/${props.data.id}`, updates).then((res) => res.data);
+      await api.put(`/api/prices/${data.id}`, updates).then((res) => res.data);
       Toast.success(t('common.saved'));
-      props.onChange(state.action);
+      onChange(state.action);
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
@@ -49,9 +52,9 @@ export default function PriceActions(props: Props) {
   const onArchivePrice = async () => {
     try {
       setState({ loading: true });
-      await api.put(`/api/prices/${props.data.id}/archive`).then((res) => res.data);
+      await api.put(`/api/prices/${data.id}/archive`).then((res) => res.data);
       Toast.success(t('common.saved'));
-      props.onChange(state.action);
+      onChange(state.action);
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
@@ -62,9 +65,9 @@ export default function PriceActions(props: Props) {
   const onRemovePrice = async () => {
     try {
       setState({ loading: true });
-      await api.delete(`/api/prices/${props.data.id}`).then((res) => res.data);
+      await api.delete(`/api/prices/${data.id}`).then((res) => res.data);
       Toast.success(t('common.removed'));
-      props.onChange(state.action);
+      onChange(state.action);
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
@@ -75,11 +78,9 @@ export default function PriceActions(props: Props) {
   const onSetAsDefault = async () => {
     try {
       setState({ loading: true });
-      await api
-        .put(`/api/products/${props.data.product_id}`, { default_price_id: props.data.id })
-        .then((res) => res.data);
+      await api.put(`/api/products/${data.product_id}`, { default_price_id: data.id }).then((res) => res.data);
       Toast.success(t('common.removed'));
-      props.onChange(state.action);
+      onChange(state.action);
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
@@ -88,7 +89,21 @@ export default function PriceActions(props: Props) {
     }
   };
 
+  const onCreatePaymentLink = () => {
+    navigate(`/admin/payments/links?price_id=${data.id}`);
+  };
+
+  const onCreatePricingTable = () => {
+    navigate(`/admin/products/pricing-tables?price_id=${data.id}`);
+  };
+
   const actions = [
+    {
+      label: t('admin.pricing'),
+      handler: noop,
+      color: 'text.primary',
+      disabled: true,
+    },
     {
       label: t('admin.price.edit'),
       handler: () => setState({ action: 'edit' }),
@@ -100,35 +115,40 @@ export default function PriceActions(props: Props) {
       handler: () => setState({ action: 'archive' }),
       color: canArchive ? 'text.primary' : 'text.disabled',
       disabled: !canArchive,
-      divider: true,
     },
     {
       label: t('admin.price.remove'),
       handler: () => setState({ action: 'remove' }),
       color: canRemove ? 'error.main' : 'text.disabled',
       disabled: !canRemove,
-      divider: props.setAsDefault,
+      divider: !setAsDefault,
+    },
+    {
+      label: t('admin.payments'),
+      handler: noop,
+      color: 'text.primary',
+      disabled: true,
     },
-    // FIXME: add these features later
-    // { label: 'Create payment link', handler: props.onRemove, color: 'error', divider: true },
-    // { label: 'Create pricing table', handler: props.onRemove, color: 'error', divider: true },
+    { label: 'Create payment link', handler: onCreatePaymentLink, color: 'primary' },
+    { label: 'Create pricing table', handler: onCreatePricingTable, color: 'primary' },
   ];
 
-  if (props.setAsDefault) {
-    actions.push({
+  if (setAsDefault) {
+    actions.splice(4, 0, {
       label: t('admin.price.setAsDefault'),
       handler: onSetAsDefault,
       color: 'text.primary',
       disabled: false,
+      divider: true,
     });
   }
 
   return (
     <>
-      <Actions variant={props.variant} actions={actions} />
+      <Actions variant={variant} actions={actions} />
       {state.action === 'edit' && (
         // @ts-ignore
-        <EditPrice price={props.data} onSave={onEditPrice} onCancel={() => setState({ action: '' })} />
+        <EditPrice price={data} onSave={onEditPrice} onCancel={() => setState({ action: '' })} />
       )}
       {state.action === 'archive' && (
         <ConfirmDialog

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

@@ -6,6 +6,7 @@ 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 { useSearchParams } from 'react-router-dom';
 import { dispatch } from 'use-bus';
 
 import DrawerForm from '../../../../components/drawer-form';
@@ -20,6 +21,7 @@ import { formatError } from '../../../../libs/util';
 
 export default function CreatePricingTable() {
   const { t } = useLocaleContext();
+  const [params] = useSearchParams();
   const { session } = useSessionContext();
   const [step, setStep] = useState(0); // ['products', 'payment', 'portal']
   const [stashed, setStashed] = useState(0);
@@ -91,6 +93,7 @@ export default function CreatePricingTable() {
     <DrawerForm
       icon={<AddOutlined />}
       text={t('admin.pricingTable.add')}
+      open={!!params.get('price_id')}
       width={1280}
       addons={
         // @ts-ignore

package/src/pages/customer/index.tsx

@@ -135,4 +135,8 @@ export default function CustomerHome() {
   );
 }
 
-const Root = styled(Stack)``;
+const Root = styled(Stack)`
+  a {
+    text-decoration: underline;
+  }
+`;