payment-kit 1.13.39 → 1.13.41

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

@@ -160,10 +160,6 @@ 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,
@@ -181,21 +177,30 @@ export class Price extends Model<InferAttributes<Price>, InferCreationAttributes
 
   // eslint-disable-next-line @typescript-eslint/no-shadow
   public static initialize(sequelize: any) {
-    this.init(Price.GENESIS_ATTRIBUTES, {
-      sequelize,
-      modelName: 'Price',
-      tableName: 'prices',
-      createdAt: 'created_at',
-      updatedAt: 'updated_at',
-      hooks: {
-        afterCreate: (model: Price, options) =>
-          createEvent('Price', 'price.created', model, options).catch(console.error),
-        afterUpdate: (model: Price, options) =>
-          createEvent('Price', 'price.updated', model, options).catch(console.error),
-        afterDestroy: (model: Price, options) =>
-          createEvent('Price', 'price.deleted', model, options).catch(console.error),
+    this.init(
+      {
+        ...Price.GENESIS_ATTRIBUTES,
+        upsell: {
+          type: DataTypes.JSON,
+          allowNull: true,
+        },
       },
-    });
+      {
+        sequelize,
+        modelName: 'Price',
+        tableName: 'prices',
+        createdAt: 'created_at',
+        updatedAt: 'updated_at',
+        hooks: {
+          afterCreate: (model: Price, options) =>
+            createEvent('Price', 'price.created', model, options).catch(console.error),
+          afterUpdate: (model: Price, options) =>
+            createEvent('Price', 'price.updated', model, options).catch(console.error),
+          afterDestroy: (model: Price, options) =>
+            createEvent('Price', 'price.deleted', model, options).catch(console.error),
+        },
+      }
+    );
   }
 
   public static associate(models: any) {

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

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/lines-between-class-members */
+import pick from 'lodash/pick';
 import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model } from 'sequelize';
 import type { LiteralUnion } from 'type-fest';
 
@@ -46,6 +47,10 @@ export class Product extends Model<InferAttributes<Product>, InferCreationAttrib
   // If set, we will mint an nft to consumer on purchase
   declare nft_factory?: string;
 
+  declare cross_sell?: {
+    cross_sells_to_id: string;
+  };
+
   // TODO: goods related props are not supported
   // declare package_dimensions?: any;
   // declare shippable?: boolean;
@@ -126,21 +131,30 @@ export class Product extends Model<InferAttributes<Product>, InferCreationAttrib
   };
 
   public static initialize(sequelize: any) {
-    this.init(Product.GENESIS_ATTRIBUTES, {
-      sequelize,
-      modelName: 'Product',
-      tableName: 'products',
-      createdAt: 'created_at',
-      updatedAt: 'updated_at',
-      hooks: {
-        afterCreate: (model: Product, options) =>
-          createEvent('Product', 'product.created', model, options).catch(console.error),
-        afterUpdate: (model: Product, options) =>
-          createEvent('Product', 'product.updated', model, options).catch(console.error),
-        afterDestroy: (model: Product, options) =>
-          createEvent('Product', 'product.deleted', model, options).catch(console.error),
+    this.init(
+      {
+        ...Product.GENESIS_ATTRIBUTES,
+        cross_sell: {
+          type: DataTypes.JSON,
+          allowNull: true,
+        },
       },
-    });
+      {
+        sequelize,
+        modelName: 'Product',
+        tableName: 'products',
+        createdAt: 'created_at',
+        updatedAt: 'updated_at',
+        hooks: {
+          afterCreate: (model: Product, options) =>
+            createEvent('Product', 'product.created', model, options).catch(console.error),
+          afterUpdate: (model: Product, options) =>
+            createEvent('Product', 'product.updated', model, options).catch(console.error),
+          afterDestroy: (model: Product, options) =>
+            createEvent('Product', 'product.deleted', model, options).catch(console.error),
+        },
+      }
+    );
   }
 
   public static associate(models: any) {
@@ -154,6 +168,51 @@ export class Product extends Model<InferAttributes<Product>, InferCreationAttrib
       as: 'default_price',
     });
   }
+
+  public static async expand(id: string) {
+    // @ts-ignore
+    const { Price, PaymentCurrency } = this.sequelize.models;
+    const product = await Product.findOne({
+      where: { id },
+      include: [
+        { model: Price, as: 'prices', include: [{ model: PaymentCurrency, as: 'currency' }] },
+        { model: Price, as: 'default_price' },
+      ],
+    });
+
+    if (product) {
+      const doc = product.toJSON();
+      // @ts-ignore
+      const currencies = await PaymentCurrency.findAll();
+      // @ts-ignore
+      for (const price of doc.prices) {
+        if (Array.isArray(price.currency_options)) {
+          price.currency_options.forEach((x: any) => {
+            x.currency = currencies.find((c: any) => c.id === x.currency_id);
+          });
+          const exist = price.currency_options.find((x: any) => x.currency_id === price.currency_id);
+          if (!exist) {
+            price.currency_options.unshift(
+              pick(price, ['currency_id', 'unit_amount', 'tiers', 'custom_unit_amount', 'currency'])
+            );
+          }
+        } else {
+          price.currency_options = [
+            pick(price, ['currency_id', 'unit_amount', 'tiers', 'custom_unit_amount', 'currency']),
+          ];
+        }
+      }
+
+      if (doc.cross_sell?.cross_sells_to_id) {
+        // @ts-ignore
+        doc.cross_sell.cross_sells_to = await Product.expand(doc.cross_sell.cross_sells_to_id);
+      }
+
+      return doc;
+    }
+
+    return null;
+  }
 }
 
 export type TProduct = InferAttributes<Product>;

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

@@ -147,6 +147,7 @@ export type LineItem = {
     minimum: number;
   };
   upsell_price_id?: string;
+  cross_sell?: boolean;
   // TODO: following are not supported
   // price_data?: any;
   // dynamic_tax_rates?: any;
@@ -337,6 +338,8 @@ export type PricingTableItem = {
   };
 
   nft_mint_settings?: NftMintSettings;
+
+  cross_sell_behavior?: LiteralUnion<'auto' | 'required', string>;
 };
 
 export type BrandSettings = {

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.39",
+  "version": "1.13.41",
   "scripts": {
     "dev": "blocklet dev",
     "eject": "vite eject",
@@ -42,13 +42,13 @@
   "dependencies": {
     "@arcblock/did": "^1.18.93",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.8.5",
+    "@arcblock/did-connect": "^2.8.6",
     "@arcblock/did-util": "^1.18.93",
-    "@arcblock/ux": "^2.8.5",
-    "@blocklet/logger": "1.16.17-beta-952ef53d",
-    "@blocklet/sdk": "1.16.17-beta-952ef53d",
-    "@blocklet/ui-react": "^2.8.5",
-    "@blocklet/uploader": "^0.0.32",
+    "@arcblock/ux": "^2.8.6",
+    "@blocklet/logger": "1.16.17",
+    "@blocklet/sdk": "1.16.17",
+    "@blocklet/ui-react": "^2.8.6",
+    "@blocklet/uploader": "^0.0.33",
     "@mui/icons-material": "^5.14.15",
     "@mui/lab": "^5.0.0-alpha.150",
     "@mui/material": "^5.14.15",
@@ -100,10 +100,10 @@
     "validator": "^13.11.0"
   },
   "devDependencies": {
-    "@abtnode/types": "1.16.17-beta-952ef53d",
+    "@abtnode/types": "1.16.17",
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.39",
+    "@did-pay/types": "1.13.41",
     "@types/cookie-parser": "^1.4.5",
     "@types/cors": "^2.8.15",
     "@types/dotenv-flow": "^3.3.2",
@@ -140,5 +140,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "d50fe71988ab503ca4f0adf0eef4293008a3ae4f"
+  "gitHead": "5f150269dbc497d19cc4d8422b03c67d29793cf2"
 }

package/src/components/checkout/pay.tsx

@@ -200,6 +200,26 @@ export function CheckoutPayMain({
     }
   };
 
+  const onApplyCrossSell = async (to: string) => {
+    try {
+      const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`, { to });
+      setState({ checkoutSession: data });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+
+  const onCancelCrossSell = async () => {
+    try {
+      const { data } = await api.delete(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`);
+      setState({ checkoutSession: data });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+
   return (
     <FormProvider {...methods}>
       <PaymentRoot>
@@ -212,6 +232,8 @@ export function CheckoutPayMain({
                 currency={currency}
                 onUpsell={onUpsell}
                 onDownsell={onDownsell}
+                onApplyCrossSell={onApplyCrossSell}
+                onCancelCrossSell={onCancelCrossSell}
               />
             </Stack>
           </Fade>
@@ -276,6 +298,7 @@ export const PaymentRoot = styled(Box)`
 
   .cko-overview {
     width: 380px;
+    min-height: 540px;
   }
 
   .cko-payment {

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

@@ -13,35 +13,45 @@ type Props = {
   currency: TPaymentCurrency;
   onUpsell: Function;
   onDownsell: Function;
+  mode?: 'normal' | 'cross-sell';
+  children?: React.ReactNode;
 };
 
-export default function ProductItem({ item, session, currency, onUpsell, onDownsell }: Props) {
+ProductItem.defaultProps = {
+  mode: 'normal',
+  children: null,
+};
+
+export default function ProductItem({ item, session, currency, mode, children, 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;
+  const canUpsell = mode === 'normal' && session.line_items.length === 1;
   return (
     <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
-              ? [pricing.quantity, `billed ${formatRecurring(item.upsell_price?.recurring || item.price.recurring)} ${metered}`].filter(Boolean).join(', ') // prettier-ignore
-              : pricing.quantity
-          }
-        />
-        <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-end" 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
+                ? [pricing.quantity, `billed ${formatRecurring(item.upsell_price?.recurring || item.price.recurring)} ${metered}`].filter(Boolean).join(', ') // prettier-ignore
+                : pricing.quantity
+            }
+          />
+          <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>
+        {children}
       </Stack>
       {canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && (
         <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>

package/src/components/checkout/summary.tsx

@@ -1,7 +1,13 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency } from '@did-pay/types';
+import { LoadingButton } from '@mui/lab';
 import { Fade, Stack, Typography } from '@mui/material';
+import { useRequest, useSetState } from 'ahooks';
+import noop from 'lodash/noop';
 
+import api from '../../libs/api';
 import { formatCheckoutHeadlines } from '../../libs/util';
+import Status from '../status';
 import PaymentAmount from './amount';
 import ProductItem from './product-item';
 
@@ -10,10 +16,70 @@ type Props = {
   currency: TPaymentCurrency;
   onUpsell: Function;
   onDownsell: Function;
+  onApplyCrossSell: Function;
+  onCancelCrossSell: Function;
 };
 
-export default function PaymentSummary({ checkoutSession, currency, onUpsell, onDownsell }: Props) {
+async function fetchCrossSell(id: string) {
+  try {
+    const { data } = await api.get(`/api/checkout-sessions/${id}/cross-sell`);
+    if (!data.error) {
+      return data;
+    }
+
+    return null;
+  } catch (err) {
+    return null;
+  }
+}
+
+export default function PaymentSummary({
+  checkoutSession,
+  currency,
+  onUpsell,
+  onDownsell,
+  onApplyCrossSell,
+  onCancelCrossSell,
+}: Props) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({ loading: false });
+  const { data, runAsync } = useRequest(() => fetchCrossSell(checkoutSession.id));
   const headlines = formatCheckoutHeadlines(checkoutSession, currency);
+
+  const handleUpsell = async (from: string, to: string) => {
+    await onUpsell(from, to);
+    runAsync();
+  };
+
+  const handleDownsell = async (from: string) => {
+    await onDownsell(from);
+    runAsync();
+  };
+
+  const handleApplyCrossSell = async () => {
+    if (data) {
+      try {
+        setState({ loading: true });
+        await onApplyCrossSell(data.id);
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setState({ loading: false });
+      }
+    }
+  };
+
+  const handleCancelCrossSell = async () => {
+    try {
+      setState({ loading: true });
+      await onCancelCrossSell();
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setState({ loading: false });
+    }
+  };
+
   return (
     <Fade in>
       <Stack className="cko-product" direction="column" sx={{ mt: 4 }}>
@@ -33,11 +99,53 @@ export default function PaymentSummary({ checkoutSession, currency, onUpsell, on
               item={x}
               session={checkoutSession}
               currency={currency}
-              onUpsell={onUpsell}
-              onDownsell={onDownsell}
-            />
+              onUpsell={handleUpsell}
+              onDownsell={handleDownsell}>
+              {x.cross_sell && (
+                <LoadingButton
+                  size="small"
+                  loadingPosition="end"
+                  color="error"
+                  variant="text"
+                  loading={state.loading}
+                  onClick={handleCancelCrossSell}>
+                  {t('checkout.cross_sell.remove')}
+                </LoadingButton>
+              )}
+            </ProductItem>
           ))}
         </Stack>
+        {data && checkoutSession.line_items.some((x) => x.price_id === data.id) === false && (
+          <Stack
+            direction="column"
+            alignItems="flex-end"
+            spacing={0.5}
+            sx={{ border: '1px solid #eee', borderRadius: 1, padding: 1, mt: 8, mb: 4 }}>
+            <ProductItem
+              item={{ quantity: 1, price: data, price_id: data.id, cross_sell: true } as TLineItemExpanded}
+              session={checkoutSession}
+              currency={currency}
+              onUpsell={noop}
+              onDownsell={noop}
+            />
+            <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: 1 }}>
+              <Typography>
+                {checkoutSession.cross_sell_behavior === 'required' && (
+                  <Status label={t('checkout.required')} color="info" variant="outlined" sx={{ mr: 1 }} />
+                )}
+              </Typography>
+              <LoadingButton
+                size="small"
+                loadingPosition="end"
+                color={checkoutSession.cross_sell_behavior === 'required' ? 'info' : 'info'}
+                variant={checkoutSession.cross_sell_behavior === 'required' ? 'text' : 'text'}
+                loading={state.loading}
+                onClick={handleApplyCrossSell}>
+                {t('checkout.cross_sell.add')}
+              </LoadingButton>
+            </Stack>
+          </Stack>
+        )}
       </Stack>
     </Fade>
   );

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

@@ -156,6 +156,22 @@ export default function BeforePay() {
           />
         )}
       />
+      <Controller
+        name="cross_sell_behavior"
+        control={control}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={getValues().cross_sell_behavior === 'required'}
+                {...field}
+                onChange={(_, checked) => setValue(field.name, checked ? 'required' : 'auto')}
+              />
+            }
+            label={t('admin.paymentLink.requireCrossSell')}
+          />
+        )}
+      />
       <Controller
         name="include_free_trial"
         control={control}

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

@@ -34,7 +34,7 @@ export default function UpsellSelect({ price, onSelect, onAdd }: Props) {
   }
 
   const onSelectPrice = (e: any) => {
-    if (e.target.value) {
+    if (e.target.value && e.target.value !== 'empty') {
       if (e.target.value === 'add') {
         setState({ action: 'add' });
       } else {
@@ -59,7 +59,12 @@ export default function UpsellSelect({ price, onSelect, onAdd }: Props) {
 
   return (
     <>
-      <Select value="empty" sx={{ width: 300 }} size="small" onChange={onSelectPrice}>
+      <Select
+        value="empty"
+        sx={{ width: 300 }}
+        size="small"
+        onChange={onSelectPrice}
+        MenuProps={{ style: { maxHeight: 480 } }}>
         <MenuItem value="empty">
           <Stack direction="row" alignItems="center">
             <Typography>{t('admin.price.find')}</Typography>

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

@@ -71,6 +71,22 @@ export function PricePaymentSettings({ index }: { index: number }) {
           />
         )}
       />
+      <Controller
+        name={getFieldName('cross_sell_behavior')}
+        control={control}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={get(values, getFieldName('cross_sell_behavior')) === 'required'}
+                {...field}
+                onChange={(_, checked) => setValue(field.name, checked ? 'required' : 'auto')}
+              />
+            }
+            label={t('admin.paymentLink.requireCrossSell')}
+          />
+        )}
+      />
       <Controller
         name={getFieldName('after_completion.type')}
         control={control}

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

@@ -76,6 +76,7 @@ export default function PricingTableProductSettings() {
           },
           custom_fields: [],
           submit_type: 'auto',
+          cross_sell_behavior: 'auto',
         });
       }
     }

package/src/components/product/cross-sell-select.tsx

@@ -0,0 +1,51 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TProductExpanded } from '@did-pay/types';
+import { MenuItem, Select, Stack, Typography } from '@mui/material';
+
+import { useProductsContext } from '../../contexts/products';
+import { useSettingsContext } from '../../contexts/settings';
+import { formatProductPrice } from '../../libs/util';
+import InfoCard from '../info-card';
+
+type Props = {
+  data: TProductExpanded;
+  onSelect: Function;
+};
+
+export default function CrossSellSelect({ data, onSelect }: Props) {
+  const { t } = useLocaleContext();
+  const { products } = useProductsContext();
+  const { settings } = useSettingsContext();
+
+  const onSelectPrice = (e: any) => {
+    if (e.target.value && e.target.value !== 'empty') {
+      onSelect(e.target.value);
+    }
+  };
+
+  return (
+    <Select
+      value="empty"
+      sx={{ width: 300 }}
+      size="small"
+      onChange={onSelectPrice}
+      MenuProps={{ style: { maxHeight: 480 } }}>
+      <MenuItem value="empty">
+        <Stack direction="row" alignItems="center">
+          <Typography>{t('admin.product.find')}</Typography>
+        </Stack>
+      </MenuItem>
+      {products
+        .filter((x) => x.id !== data.id)
+        .map((x) => (
+          <MenuItem key={x.id} value={x.id}>
+            <InfoCard
+              name={x.name}
+              description={formatProductPrice(x as any, settings.baseCurrency)}
+              logo={x.images[0]}
+            />
+          </MenuItem>
+        ))}
+    </Select>
+  );
+}