payment-kit 1.13.30 → 1.13.32

package/api/src/routes/payment-links.ts

@@ -1,7 +1,7 @@
 import { Router } from 'express';
 import Joi from 'joi';
 import pick from 'lodash/pick';
-import { Op, WhereOptions } from 'sequelize';
+import type { WhereOptions } from 'sequelize';
 
 import { authenticate } from '../libs/security';
 import { isLineItemAligned } from '../libs/session';
@@ -141,7 +141,7 @@ const paginationSchema = Joi.object<{
 });
 router.get('/', auth, async (req, res) => {
   const { page, pageSize, ...query } = await paginationSchema.validateAsync(req.query, { stripUnknown: true });
-  const where: WhereOptions<PaymentLink> = { id: { [Op.notIn]: [`plink_${req.user?.did}`] } };
+  const where: WhereOptions<PaymentLink> = {};
 
   if (typeof query.active === 'boolean') {
     where.active = query.active;
@@ -255,6 +255,7 @@ router.post('/stash', auth, async (req, res) => {
     raw.livemode = !!req.livemode;
     raw.created_via = req.user?.via;
     raw.currency_id = raw.currency_id || req.currency.id;
+    raw.metadata = { preview: '1' };
 
     let doc = await PaymentLink.findByPk(raw.id);
     if (doc) {

package/api/src/routes/prices.ts

@@ -3,6 +3,7 @@ import { Router } from 'express';
 import pick from 'lodash/pick';
 
 import { authenticate } from '../libs/security';
+import { canUpsell } from '../libs/session';
 import { PaymentCurrency } from '../store/models/payment-currency';
 import { Price } from '../store/models/price';
 import { Product } from '../store/models/product';
@@ -55,32 +56,42 @@ router.get('/:id', auth, async (req, res) => {
   });
 
   if (price) {
-    const doc = price.toJSON();
-    if (doc.currency_options) {
-      const currencies = await PaymentCurrency.findAll();
-      doc.currency_options.forEach((x) => {
+    const currencies = await PaymentCurrency.findAll();
+    const doc = Price.formatAfterRead(price.toJSON(), currencies);
+
+    if (doc.upsell?.upsells_to_id) {
+      const to = await Price.findByPk(doc.upsell.upsells_to_id);
+      if (to) {
         // @ts-ignore
-        x.currency = currencies.find((c) => c.id === x.currency_id);
-      });
-    } else {
-      doc.currency_options = [
-        {
-          currency_id: doc.currency_id,
-          unit_amount: doc.unit_amount,
-          // @ts-ignore
-          currency: doc.currency,
-          tiers: null,
-          custom_unit_amount: null,
-        },
-      ];
+        doc.upsell.upsells_to = Price.formatAfterRead(to.toJSON(), currencies);
+      }
     }
+
     res.json(doc);
   } else {
     res.json(null);
   }
 });
 
+router.get('/:id/upsell', auth, async (req, res) => {
+  const price = await Price.findByPkOrLookupKey(req.params.id as string, {
+    include: [{ model: PaymentCurrency, as: 'currency' }],
+  });
+
+  if (price) {
+    const prices = await Price.findAll({
+      where: { product_id: price.product_id },
+      include: [{ model: PaymentCurrency, as: 'currency' }],
+    });
+    const upsells = prices.filter((x) => canUpsell(price, x));
+    res.json(upsells);
+  } else {
+    res.json(null);
+  }
+});
+
 // update price
+// FIXME: upsell validate https://stripe.com/docs/payments/checkout/upsells
 router.put('/:id', auth, async (req, res) => {
   const price = await Price.findByPkOrLookupKey(req.params.id as string);
 
@@ -92,12 +103,12 @@ router.put('/:id', auth, async (req, res) => {
     return res.status(403).json({ error: 'price archived' });
   }
 
-  const updates: Partial<Price> = Price.format(
+  const updates: Partial<Price> = Price.formatBeforeSave(
     pick(
       req.body,
       price.locked
-        ? ['nickname', 'description', 'metadata']
-        : ['type', 'model', 'active', 'livemode', 'nickname', 'recurring', 'description', 'tiers', 'unit_amount', 'transform_quantity', 'metadata', 'lookup_key', 'currency_options'] // prettier-ignore
+        ? ['nickname', 'description', 'metadata', 'upsell']
+        : ['type', 'model', 'active', 'livemode', 'nickname', 'recurring', 'description', 'tiers', 'unit_amount', 'transform_quantity', 'metadata', 'lookup_key', 'currency_options', 'upsell'] // prettier-ignore
     )
   );
 
@@ -140,7 +151,7 @@ router.put('/:id', auth, async (req, res) => {
     }
   }
 
-  await price.update(Price.format(updates));
+  await price.update(Price.formatBeforeSave(updates));
 
   return res.json(price);
 });

package/api/src/store/migrations/20231023-upsell.ts

@@ -0,0 +1,11 @@
+import { DataTypes } from 'sequelize';
+
+import type { Migration } from '../migrate';
+
+export const up: Migration = async ({ context }) => {
+  await context.addColumn('prices', 'upsell', { type: DataTypes.JSON, allowNull: true });
+};
+
+export const down: Migration = async ({ context }) => {
+  await context.removeColumn('prices', 'upsell');
+};

package/api/src/store/models/index.ts

@@ -85,9 +85,17 @@ export * from './webhook-attempt';
 export * from './webhook-endpoint';
 export * from './types';
 
-export type TPriceExpanded = TPrice & { object: 'price'; product: TProduct; currency: TPaymentCurrency };
+export type TPriceExpanded = TPrice & {
+  object: 'price';
+  product: TProduct;
+  currency: TPaymentCurrency;
+  upsell?: {
+    upsells_to: TPriceExpanded;
+    upsells_to_id: string;
+  };
+};
 
-export type TLineItemExpanded = LineItem & { price: TPriceExpanded };
+export type TLineItemExpanded = LineItem & { price: TPriceExpanded; upsell_price: TPriceExpanded };
 
 export type TProductExpanded = TProduct & { object: 'price'; prices: TPrice[]; default_price: TPrice };
 

package/api/src/store/models/price.ts

@@ -20,6 +20,18 @@ import type { CustomUnitAmount, LineItem, PriceCurrency, PriceRecurring, PriceTi
 
 const nextId = createIdGenerator('price', 24);
 
+// Duplicate here
+type TPriceExpanded = TPrice & {
+  object: 'price';
+  product: any;
+  currency: TPaymentCurrency;
+  upsell?: {
+    upsells_to: TPriceExpanded;
+    upsells_to_id: string;
+  };
+};
+type TLineItemExpanded = LineItem & { price: TPriceExpanded; upsell_price: TPriceExpanded };
+
 // @link https://stripe.com/docs/api/prices
 export class Price extends Model<InferAttributes<Price>, InferCreationAttributes<Price>> {
   // Unique identifier for the object.
@@ -148,6 +160,10 @@ export class Price extends Model<InferAttributes<Price>, InferCreationAttributes
       type: DataTypes.JSON,
       defaultValue: [],
     },
+    upsell: {
+      type: DataTypes.JSON,
+      allowNull: true,
+    },
     created_at: {
       type: DataTypes.DATE,
       defaultValue: DataTypes.NOW,
@@ -207,29 +223,33 @@ export class Price extends Model<InferAttributes<Price>, InferCreationAttributes
     return 'standard';
   }
 
-  public static format(price: Partial<TPrice & { model: string }>) {
-    if (price.type === 'recurring') {
-      if (!price.recurring) {
-        throw new Error('recurring config is required for recurring prices');
+  public static formatBeforeSave(price: Partial<TPrice & { model: string }>) {
+    if (price.type) {
+      if (price.type === 'recurring') {
+        if (!price.recurring) {
+          throw new Error('recurring config is required for recurring prices');
+        }
+        price.recurring.interval_count = Number(price.recurring.interval_count);
+      } else {
+        price.recurring = null;
       }
-      price.recurring.interval_count = Number(price.recurring.interval_count);
-    } else {
-      price.recurring = null;
     }
 
-    if (price.model && ['graduated', 'volume'].includes(price.model)) {
-      price.billing_scheme = 'tiered';
-      price.tiers_mode = price.model;
-      if (isEmpty(price.tiers)) {
-        throw new Error('tiers is required for graduated and volume prices');
+    if (price.model) {
+      if (['graduated', 'volume'].includes(price.model)) {
+        price.billing_scheme = 'tiered';
+        price.tiers_mode = price.model;
+        if (isEmpty(price.tiers)) {
+          throw new Error('tiers is required for graduated and volume prices');
+        }
+      } else {
+        price.billing_scheme = 'per_unit';
+        price.tiers = null;
       }
-    } else {
-      price.billing_scheme = 'per_unit';
-      price.tiers = null;
-    }
 
-    if (price.model !== 'package') {
-      price.transform_quantity = null;
+      if (price.model !== 'package') {
+        price.transform_quantity = null;
+      }
     }
 
     price.metadata = formatMetadata(price.metadata);
@@ -237,6 +257,28 @@ export class Price extends Model<InferAttributes<Price>, InferCreationAttributes
     return price;
   }
 
+  public static formatAfterRead(doc: TPrice, currencies: TPaymentCurrency[]) {
+    if (doc.currency_options) {
+      doc.currency_options.forEach((x) => {
+        // @ts-ignore
+        x.currency = currencies.find((c) => c.id === x.currency_id);
+      });
+    } else {
+      doc.currency_options = [
+        {
+          currency_id: doc.currency_id,
+          unit_amount: doc.unit_amount,
+          // @ts-ignore
+          currency: doc.currency,
+          tiers: null,
+          custom_unit_amount: null,
+        },
+      ];
+    }
+
+    return doc;
+  }
+
   public static formatCurrencies(options: PriceCurrency[], currencies: TPaymentCurrency[]) {
     return options.map((x) => {
       const currency = currencies.find((c) => c.id === x.currency_id);
@@ -254,13 +296,20 @@ export class Price extends Model<InferAttributes<Price>, InferCreationAttributes
     });
   }
 
-  public static async expand(items: LineItem[], deep: boolean = true): Promise<(LineItem & { price: TPrice })[]> {
-    const priceIds: string[] = items.map((i) => i.price_id);
+  public static async expand(
+    items: LineItem[],
+    { product = true, upsell }: { product?: boolean; upsell?: boolean } = {}
+  ): Promise<TLineItemExpanded[]> {
+    const priceIds: string[] = items
+      .map((i) => i.price_id)
+      .concat(items.map((i) => i.upsell_price_id as string))
+      .filter(Boolean);
     const prices = await Price.findAll({
       where: { id: priceIds },
-      include: deep ? [{ model: sequelize.models.Product, as: 'product' }] : [],
+      include: product ? [{ model: sequelize.models.Product, as: 'product' }] : [],
     });
 
+    // expand currency_options
     prices.forEach((x) => {
       if (!x.currency_options || x.currency_options?.length === 0) {
         x.currency_options = [
@@ -274,10 +323,27 @@ export class Price extends Model<InferAttributes<Price>, InferCreationAttributes
       }
     });
 
+    // expand upsell
+    if (upsell) {
+      await Promise.all(
+        prices.map(async (x) => {
+          if (x.upsell?.upsells_to_id) {
+            const to = await Price.findByPk(x.upsell?.upsells_to_id);
+            if (to) {
+              // @ts-ignore
+              x.upsell.upsells_to = to;
+            }
+          }
+        })
+      );
+    }
+
+    // @ts-ignore
     return items.map((x) => ({
       ...x,
       price: prices.find((p) => p.id === x.price_id),
-    })) as (LineItem & { price: TPrice })[];
+      upsell_price: x.upsell_price_id ? prices.find((p) => p.id === x.upsell_price_id) : null,
+    })) as TLineItemExpanded[];
   }
 
   public static async insert(price: TPrice & { model: string }) {
@@ -289,7 +355,7 @@ export class Price extends Model<InferAttributes<Price>, InferCreationAttributes
     }
 
     // @ts-ignore
-    return this.create(this.format(price));
+    return this.create(this.formatBeforeSave(price));
   }
 
   public static findByPkOrLookupKey(id: string, options: FindOptions<Price> = {}) {

package/api/src/store/models/types.ts

@@ -146,6 +146,7 @@ export type LineItem = {
     maximum: number;
     minimum: number;
   };
+  upsell_price_id?: string;
   // TODO: following are not supported
   // price_data?: any;
   // dynamic_tax_rates?: any;

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.30
+version: 1.13.32
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.30",
+  "version": "1.13.32",
   "scripts": {
     "dev": "blocklet dev",
     "eject": "vite eject",
@@ -40,25 +40,25 @@
     ]
   },
   "dependencies": {
-    "@arcblock/did": "^1.18.92",
+    "@arcblock/did": "^1.18.93",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.7.28",
-    "@arcblock/did-util": "^1.18.92",
-    "@arcblock/ux": "^2.7.28",
-    "@blocklet/logger": "1.16.17-beta-703fb879",
-    "@blocklet/sdk": "1.16.17-beta-703fb879",
-    "@blocklet/ui-react": "^2.7.28",
-    "@blocklet/uploader": "^0.0.26",
+    "@arcblock/did-connect": "^2.8.2",
+    "@arcblock/did-util": "^1.18.93",
+    "@arcblock/ux": "^2.8.2",
+    "@blocklet/logger": "1.16.17-beta-952ef53d",
+    "@blocklet/sdk": "1.16.17-beta-952ef53d",
+    "@blocklet/ui-react": "^2.8.2",
+    "@blocklet/uploader": "^0.0.32",
     "@mui/icons-material": "^5.14.13",
     "@mui/lab": "^5.0.0-alpha.148",
     "@mui/material": "^5.14.13",
     "@mui/styles": "^5.14.13",
     "@mui/system": "^5.14.13",
-    "@ocap/asset": "^1.18.92",
-    "@ocap/client": "^1.18.92",
-    "@ocap/mcrypto": "^1.18.92",
-    "@ocap/util": "^1.18.92",
-    "@ocap/wallet": "^1.18.92",
+    "@ocap/asset": "^1.18.93",
+    "@ocap/client": "^1.18.93",
+    "@ocap/mcrypto": "^1.18.93",
+    "@ocap/util": "^1.18.93",
+    "@ocap/wallet": "^1.18.93",
     "@stripe/react-stripe-js": "^2.3.1",
     "@stripe/stripe-js": "^2.1.7",
     "ahooks": "^3.7.8",
@@ -100,10 +100,10 @@
     "validator": "^13.11.0"
   },
   "devDependencies": {
-    "@abtnode/types": "1.16.17-beta-703fb879",
+    "@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.30",
+    "@did-pay/types": "1.13.32",
     "@types/cookie-parser": "^1.4.4",
     "@types/cors": "^2.8.14",
     "@types/dotenv-flow": "^3.3.1",
@@ -140,5 +140,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "eb3b428db29ac33c697ca9ae3796d377ec779335"
+  "gitHead": "354fff1bd72e201fb51e8cf0ee6d26dbf5211b7c"
 }

package/src/components/blockchain/tx.tsx

@@ -50,7 +50,9 @@ export default function TxLink(props: { details: PaymentDetails; method: TPaymen
   return (
     <Link href={link} target="_blank" rel="noopener noreferrer">
       <Stack component="span" direction="row" alignItems="center" spacing={1}>
-        <Typography component="span">{text}</Typography>
+        <Typography component="span" color="primary">
+          {text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join('...') : text}
+        </Typography>
         <OpenInNewOutlined fontSize="small" />
       </Stack>
     </Link>

package/src/components/checkout/pay.tsx

@@ -1,4 +1,5 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
 import type {
   TCheckoutSessionExpanded,
   TCustomer,
@@ -9,11 +10,13 @@ import type {
 } from '@did-pay/types';
 import { Box, Fade, Stack } from '@mui/material';
 import { styled } from '@mui/system';
+import { useSetState } from 'ahooks';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import { useSessionContext } from '../../contexts/session';
 import { useSettingsContext } from '../../contexts/settings';
+import api from '../../libs/api';
 import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from '../../libs/util';
 import PaymentError from './error';
 import CheckoutFooter from './footer';
@@ -57,6 +60,7 @@ export default function CheckoutPay({
   onPaid,
   onError,
 }: Props) {
+  const { t } = useLocaleContext();
   const { refresh, livemode, setLivemode } = useSettingsContext();
 
   useEffect(() => {
@@ -92,22 +96,12 @@ export default function CheckoutPay({
 
   // expired session
   if (checkoutSession.expires_at <= Math.round(Date.now() / 1000)) {
-    return (
-      <PaymentError
-        title="Expired Link"
-        description="This link has expired. This means that your payment has already been processed or your session has expired."
-      />
-    );
+    return <PaymentError title={t('checkout.expired.title')} description={t('checkout.expired.description')} />;
   }
 
   // completed session
   if (checkoutSession.status === 'complete') {
-    return (
-      <PaymentError
-        title="Checkout Completed"
-        description="This checkout session has completed. This means that your payment has already been successfully processed."
-      />
-    );
+    return <PaymentError title={t('checkout.complete.title')} description={t('checkout.complete.description')} />;
   }
 
   return (
@@ -154,8 +148,9 @@ export function CheckoutPayMain({
   const { t } = useLocaleContext();
   const { session } = useSessionContext();
   const { settings } = useSettingsContext();
+  const [state, setState] = useSetState({ checkoutSession });
 
-  const defaultCurrencyId = checkoutSession?.currency_id || checkoutSession?.line_items[0]?.price.currency_id;
+  const defaultCurrencyId = state.checkoutSession.currency_id || state.checkoutSession.line_items[0]?.price.currency_id;
   const defaultMethodId = paymentMethods.find((m) => m.payment_currencies.some((c) => c.id === defaultCurrencyId))?.id;
 
   const methods = useForm({
@@ -185,30 +180,55 @@ export function CheckoutPayMain({
     (findCurrency(paymentMethods as TPaymentMethodExpanded[], currencyId as string) as TPaymentCurrency) ||
     settings.baseCurrency;
 
+  const onUpsell = async (from: string, to: string) => {
+    try {
+      const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/upsell`, { from, to });
+      setState({ checkoutSession: data });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+
+  const onDownsell = async (from: string) => {
+    try {
+      const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/downsell`, { from });
+      setState({ checkoutSession: data });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+
   return (
     <FormProvider {...methods}>
       <PaymentRoot>
         <Stack direction="row" className="cko-container">
           <Fade in>
             <Stack className="cko-overview" direction="column">
-              <PaymentHeader checkoutSession={checkoutSession} />
-              <PaymentSummary checkoutSession={checkoutSession} currency={currency} />
+              <PaymentHeader checkoutSession={state.checkoutSession} />
+              <PaymentSummary
+                checkoutSession={state.checkoutSession}
+                currency={currency}
+                onUpsell={onUpsell}
+                onDownsell={onDownsell}
+              />
             </Stack>
           </Fade>
           <Stack className="cko-payment" direction="column" spacing={4}>
             {completed && (
               <PaymentSuccess
-                payee={getStatementDescriptor(checkoutSession.line_items)}
-                action={checkoutSession.mode}
+                payee={getStatementDescriptor(state.checkoutSession.line_items)}
+                action={state.checkoutSession.mode}
                 message={
                   paymentLink?.after_completion?.hosted_confirmation?.custom_message ||
-                  t(`checkout.completed.${checkoutSession.mode}`)
+                  t(`checkout.completed.${state.checkoutSession.mode}`)
                 }
               />
             )}
             {!completed && (
               <PaymentForm
-                checkoutSession={checkoutSession}
+                checkoutSession={state.checkoutSession}
                 paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
                 paymentIntent={paymentIntent}
                 customer={customer}

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

@@ -25,15 +25,11 @@ export default function ProductCard({ size, variant, name, logo, description, ex
         </Avatar>
       )}
       <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
-        <Typography variant="body1" sx={{ fontWeight: 500 }} color="text.primary" gutterBottom>
+        <Typography variant="body1" sx={{ fontWeight: 500 }} color="text.primary">
           {name}
         </Typography>
         {description && (
-          <Typography
-            variant="body1"
-            sx={{ fontSize: '0.85rem', lineHeight: '120%' }}
-            color="text.secondary"
-            gutterBottom>
+          <Typography variant="body1" sx={{ fontSize: '0.85rem', lineHeight: '120%' }} color="text.secondary">
             {description}
           </Typography>
         )}