payment-kit 1.13.92 → 1.13.94

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

@@ -99,6 +99,7 @@ export type TLineItemExpanded = LineItem & {
   price: TPriceExpanded;
   upsell_price: TPriceExpanded;
   metadata?: Record<string, any>;
+  [key: string]: any;
 };
 
 export type TProductExpanded = TProduct & {
@@ -214,6 +215,8 @@ export type TSetupIntentExpanded = TSetupIntent & {
 export type TPricingTableItem = PricingTableItem & {
   price: TPrice;
   product: TProduct;
+  is_selected?: boolean;
+  is_disabled?: boolean;
 };
 
 export type TPricingTableExpanded = TPricingTable & {

package/api/src/store/models/pricing-table.ts

@@ -1,9 +1,11 @@
 /* eslint-disable @typescript-eslint/lines-between-class-members */
+import pick from 'lodash/pick';
+import uniq from 'lodash/uniq';
 import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model } from 'sequelize';
 import type { LiteralUnion } from 'type-fest';
 
 import { createEvent } from '../../libs/audit';
-import { createIdGenerator } from '../../libs/util';
+import { createIdGenerator, formatMetadata } from '../../libs/util';
 import type { BrandSettings, PricingTableItem } from './types';
 
 const nextId = createIdGenerator('prctbl', 24);
@@ -102,6 +104,128 @@ export class PricingTable extends Model<InferAttributes<PricingTable>, InferCrea
   public static associate() {
     // Do nothing
   }
+
+  public static formatItem(payload: any) {
+    const item = Object.assign(
+      {
+        adjustable_quantity: {
+          enabled: false,
+          maximum: 1,
+          minimum: 0,
+        },
+        after_completion: {
+          type: 'hosted_confirmation',
+          hosted_confirmation: {
+            custom_message: '',
+          },
+        },
+        allow_promotion_codes: false,
+        customer_creation: 'always',
+        consent_collection: {
+          promotions: 'none',
+          terms_of_service: 'none',
+        },
+        invoice_creation: {
+          enabled: true,
+        },
+        phone_number_collection: {
+          enabled: false,
+        },
+        billing_address_collection: 'auto',
+        subscription_data: {
+          description: '',
+          trial_period_days: 0,
+        },
+        nft_mint_settings: {
+          enabled: false,
+          factory: '',
+        },
+        submit_type: 'auto',
+        cross_sell_behavior: 'auto',
+      },
+      pick(payload, [
+        'adjustable_quantity',
+        'after_completion',
+        'allow_promotion_codes',
+        'billing_address_collection',
+        'consent_collection',
+        'cross_sell_behavior',
+        'custom_fields',
+        'highlight_text',
+        'is_highlight',
+        'nft_mint_settings',
+        'phone_number_collection',
+        'price_id',
+        'product_id',
+        'submit_type',
+        'subscription_data',
+      ])
+    );
+
+    if (item.adjustable_quantity?.enabled) {
+      item.adjustable_quantity.minimum = Number(item.adjustable_quantity?.minimum);
+      item.adjustable_quantity.maximum = Number(item.adjustable_quantity?.maximum);
+    }
+    if (item.after_completion?.type === 'hosted_confirmation') {
+      // @ts-ignore
+      item.after_completion.redirect = null;
+    }
+    if (item.after_completion?.type === 'redirect') {
+      // @ts-ignore
+      item.after_completion.hosted_confirmation = null;
+    }
+
+    return item;
+  }
+
+  public static format(payload: any) {
+    const raw: Partial<PricingTable> = Object.assign(
+      {
+        branding_settings: {
+          background_color: '#ffffff',
+          border_style: 'default',
+          button_color: '#0074d4',
+          font_family: 'default',
+        },
+      },
+      pick(payload, ['name', 'items', 'metadata', 'brand_settings'])
+    );
+
+    raw.items = raw.items?.map((x) => PricingTable.formatItem(x));
+
+    if (payload.highlight && payload.highlight_product_id) {
+      raw.items?.forEach((x) => {
+        if (x.product_id === payload.highlight_product_id) {
+          x.is_highlight = x.product_id === payload.highlight_product_id;
+          x.highlight_text = payload.highlight_text || 'popular';
+        } else {
+          x.is_highlight = false;
+          x.highlight_text = 'popular';
+        }
+      });
+    }
+
+    raw.metadata = formatMetadata(raw.metadata);
+
+    return raw;
+  }
+
+  public async expand() {
+    const { Price, Product } = this.sequelize.models;
+
+    const doc = this.toJSON();
+    const prices = await Price!.findAll({ where: { id: uniq(doc.items.map((x) => x.price_id)) } });
+    const products = await Product!.findAll({ where: { id: uniq(doc.items.map((x) => x.product_id)) } });
+
+    doc.items.forEach((i) => {
+      // @ts-ignore
+      i.price = prices.find((p) => p.id === i.price_id);
+      // @ts-ignore
+      i.product = products.find((p) => p.id === i.product_id);
+    });
+
+    return doc;
+  }
 }
 
 export type TPricingTable = InferAttributes<PricingTable>;

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

@@ -360,6 +360,10 @@ export class Subscription extends Model<InferAttributes<Subscription>, InferCrea
     return ['active', 'trialing'].includes(this.status);
   }
 
+  public isScheduledToCancel() {
+    return this.isActive() && (!!this.cancel_at_period_end || !!this.cancel_at);
+  }
+
   public async start() {
     if (this.isActive()) {
       logger.warn(`subscription already started: ${this.id}`);

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

@@ -347,6 +347,14 @@ export type BrandSettings = {
   font_family: string;
 };
 
+export type SubscriptionUpdateItem = {
+  id?: string;
+  deleted?: boolean;
+  clear_usage?: boolean;
+  price_id?: string;
+  quantity?: number;
+};
+
 export type EventType = LiteralUnion<
   | 'account.application.authorized'
   | 'account.application.deauthorized'

package/api/tests/libs/util.spec.ts

@@ -3,7 +3,7 @@ import {
   createCodeGenerator,
   createIdGenerator,
   formatMetadata,
-  getMetadataFromQuery,
+  getDataObjectFromQuery,
   getNextRetry,
   tryWithTimeout,
 } from '../../src/libs/util';
@@ -134,9 +134,9 @@ describe('getNextRetry', () => {
   });
 });
 
-describe('getMetadataFromQuery', () => {
+describe('getDataObjectFromQuery', () => {
   it('should return an empty object when the query object is empty', () => {
-    const result = getMetadataFromQuery({});
+    const result = getDataObjectFromQuery({});
     expect(result).toEqual({});
   });
 
@@ -145,7 +145,7 @@ describe('getMetadataFromQuery', () => {
       'metadata.key1': 'value1',
       'metadata.key2': 'value2',
     };
-    const result = getMetadataFromQuery(query);
+    const result = getDataObjectFromQuery(query);
     expect(result).toEqual({
       key1: 'value1',
       key2: 'value2',
@@ -157,7 +157,7 @@ describe('getMetadataFromQuery', () => {
       'metadata.key1': 'value1',
       key2: 'value2',
     };
-    const result = getMetadataFromQuery(query);
+    const result = getDataObjectFromQuery(query);
     expect(result).toEqual({
       key1: 'value1',
     });
@@ -169,7 +169,7 @@ describe('getMetadataFromQuery', () => {
       'metadata.key2': undefined,
       'metadata.key3': null,
     };
-    const result = getMetadataFromQuery(query);
+    const result = getDataObjectFromQuery(query);
     expect(result).toEqual({
       key1: 'value1',
     });

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.92",
+  "version": "1.13.94",
   "scripts": {
     "dev": "COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev",
     "eject": "vite eject",
@@ -45,13 +45,13 @@
     "@abtnode/cron": "1.16.21",
     "@arcblock/did": "^1.18.108",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.9.9",
+    "@arcblock/did-connect": "^2.9.13",
     "@arcblock/did-util": "^1.18.108",
     "@arcblock/jwt": "^1.18.108",
-    "@arcblock/ux": "^2.9.9",
+    "@arcblock/ux": "^2.9.13",
     "@blocklet/logger": "1.16.21",
     "@blocklet/sdk": "1.16.21",
-    "@blocklet/ui-react": "^2.9.9",
+    "@blocklet/ui-react": "^2.9.13",
     "@blocklet/uploader": "^0.0.64",
     "@mui/icons-material": "^5.14.19",
     "@mui/lab": "^5.0.0-alpha.155",
@@ -110,7 +110,7 @@
     "@abtnode/types": "1.16.21",
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.92",
+    "@did-pay/types": "1.13.94",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -149,5 +149,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "1e2c450bea035a3c6410849f3fcac790b92da38c"
+  "gitHead": "3491fe2d96de870635ad6486e6e0972267d2fc64"
 }

package/src/app.tsx

@@ -20,7 +20,8 @@ const CheckoutPage = React.lazy(() => import('./pages/checkout'));
 const AdminPage = React.lazy(() => import('./pages/admin'));
 const CustomerHome = React.lazy(() => import('./pages/customer/index'));
 const CustomerInvoice = React.lazy(() => import('./pages/customer/invoice'));
-const CustomerSubscription = React.lazy(() => import('./pages/customer/subscription'));
+const CustomerSubscriptionDetail = React.lazy(() => import('./pages/customer/subscription/detail'));
+const CustomerSubscriptionUpdate = React.lazy(() => import('./pages/customer/subscription/update'));
 
 const theme = createTheme({
   typography: {
@@ -58,13 +59,21 @@ function App() {
                   </Layout>
                 }
               />
-              ,
               <Route
                 key="customer-subscription"
                 path="/customer/subscription/:id"
                 element={
                   <Layout>
-                    <CustomerSubscription />
+                    <CustomerSubscriptionDetail />
+                  </Layout>
+                }
+              />
+              <Route
+                key="customer-subscription"
+                path="/customer/subscription/:id/update"
+                element={
+                  <Layout>
+                    <CustomerSubscriptionUpdate />
                   </Layout>
                 }
               />
@@ -77,7 +86,6 @@ function App() {
                   </Layout>
                 }
               />
-              ,
               <Route key="customer-fallback" path="/customer/*" element={<Navigate to="/customer" />} />,
               <Route path="*" element={<Navigate to="/" />} />
             </Routes>

package/src/components/checkout/form/address.tsx

@@ -7,9 +7,10 @@ import FormInput from '../../input';
 
 type Props = {
   mode: string;
+  stripe: boolean;
 };
 
-export default function AddressForm({ mode }: Props) {
+export default function AddressForm({ mode, stripe }: Props) {
   const { t } = useLocaleContext();
   const { control, setValue } = useFormContext();
 
@@ -74,39 +75,45 @@ export default function AddressForm({ mode }: Props) {
     );
   }
 
-  return (
-    <Fade in>
-      <Stack className="cko-payment-address cko-payment-form">
-        <Typography sx={{ mb: 1, color: 'text.primary', fontWeight: 600 }}>{t(`checkout.billing.${mode}`)}</Typography>
-        <Stack direction="column" className="cko-payment-form" spacing={0}>
-          <Stack direction="row" spacing={0}>
-            <Controller
-              name="billing_address.country"
-              control={control}
-              render={({ field }) => (
-                <CountrySelector
-                  selectedCountry={field.value}
-                  onSelect={({ iso2 }) => setValue(field.name, iso2)}
-                  buttonStyle={{
-                    width: '64px',
-                    height: '40px',
-                    border: '1px solid #ccc',
-                    marginLeft: -1,
-                    marginTop: -1,
-                  }}
-                />
-              )}
-            />
-            <FormInput
-              name="billing_address.postal_code"
-              rules={{ required: t('checkout.required') }}
-              errorPosition="right"
-              variant="outlined"
-              placeholder={t('checkout.billing.postal_code')}
-            />
+  if (stripe) {
+    return (
+      <Fade in>
+        <Stack className="cko-payment-address cko-payment-form">
+          <Typography sx={{ mb: 1, color: 'text.primary', fontWeight: 600 }}>
+            {t(`checkout.billing.${mode}`)}
+          </Typography>
+          <Stack direction="column" className="cko-payment-form" spacing={0}>
+            <Stack direction="row" spacing={0}>
+              <Controller
+                name="billing_address.country"
+                control={control}
+                render={({ field }) => (
+                  <CountrySelector
+                    selectedCountry={field.value}
+                    onSelect={({ iso2 }) => setValue(field.name, iso2)}
+                    buttonStyle={{
+                      width: '64px',
+                      height: '40px',
+                      border: '1px solid #ccc',
+                      marginLeft: -1,
+                      marginTop: -1,
+                    }}
+                  />
+                )}
+              />
+              <FormInput
+                name="billing_address.postal_code"
+                rules={{ required: t('checkout.required') }}
+                errorPosition="right"
+                variant="outlined"
+                placeholder={t('checkout.billing.postal_code')}
+              />
+            </Stack>
           </Stack>
         </Stack>
-      </Stack>
-    </Fade>
-  );
+      </Fade>
+    );
+  }
+
+  return null;
 }

package/src/components/checkout/form/index.tsx

@@ -317,7 +317,7 @@ export default function PaymentForm({
           </Stack>
         </Stack>
       </Fade>
-      <AddressForm mode={checkoutSession.billing_address_collection as string} />
+      <AddressForm mode={checkoutSession.billing_address_collection as string} stripe={method.type === 'stripe'} />
       <Fade in>
         <Stack direction="column" className="cko-payment-methods">
           <Typography sx={{ mb: 2, color: 'text.primary', fontWeight: 600 }}>{t('checkout.method')}</Typography>

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

@@ -0,0 +1,205 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import type { PriceRecurring, TPricingTableExpanded, TPricingTableItem } from '@did-pay/types';
+import { CheckOutlined } from '@mui/icons-material';
+import { LoadingButton } from '@mui/lab';
+import {
+  Box,
+  Chip,
+  Fade,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Stack,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography,
+} from '@mui/material';
+import { useSetState } from 'ahooks';
+import { useEffect } from 'react';
+
+import { formatError, formatPriceAmount, formatRecurring } from '../../libs/util';
+import PaymentAmount from './amount';
+
+const groupItemsByRecurring = (items: TPricingTableItem[]) => {
+  const grouped: { [key: string]: TPricingTableItem[] } = {};
+  const recurring: { [key: string]: PriceRecurring } = {};
+
+  items.forEach((x) => {
+    const key = [x.price.recurring?.interval, x.price.recurring?.interval_count].join('-');
+    recurring[key] = x.price.recurring as PriceRecurring;
+
+    if (!grouped[key]) {
+      grouped[key] = [];
+    }
+
+    // @ts-ignore
+    grouped[key].push(x);
+  });
+
+  return { recurring, grouped };
+};
+
+type Props = {
+  table: TPricingTableExpanded;
+  onSelect: (priceId: string) => void;
+  alignItems?: 'center' | 'left';
+  mode?: 'checkout' | 'select';
+  interval?: string;
+};
+
+PricingTable.defaultProps = {
+  alignItems: 'center',
+  mode: 'checkout',
+  interval: '',
+};
+
+export default function PricingTable({ table, alignItems, interval, mode, onSelect }: Props) {
+  const { t, locale } = useLocaleContext();
+  const [state, setState] = useSetState({ interval, loading: '' });
+  const { recurring, grouped } = groupItemsByRecurring(table.items);
+
+  useEffect(() => {
+    if (table) {
+      if (!state.interval || !grouped[state.interval]) {
+        const keys = Object.keys(recurring);
+        if (keys[0]) {
+          setState({ interval: keys[0] });
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table]);
+
+  const handleSelect = async (priceId: string) => {
+    try {
+      setState({ loading: priceId });
+      await onSelect(priceId);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: '' });
+    }
+  };
+
+  return (
+    <Stack
+      direction="column"
+      alignItems={alignItems === 'center' ? 'center' : 'flex-start'}
+      sx={{
+        pt: {
+          xs: 4,
+          sm: 2,
+        },
+        gap: {
+          xs: 3,
+          sm: mode === 'select' ? 3 : 5,
+        },
+      }}>
+      {Object.keys(recurring).length > 1 && (
+        <ToggleButtonGroup
+          color="primary"
+          value={state.interval}
+          onChange={(_, value) => {
+            if (value !== null) {
+              setState({ interval: value });
+            }
+          }}
+          exclusive>
+          {Object.keys(recurring).map((x) => (
+            <ToggleButton key={x} value={x} sx={{ textTransform: 'capitalize' }}>
+              {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
+            </ToggleButton>
+          ))}
+        </ToggleButtonGroup>
+      )}
+      <Stack
+        flexWrap="wrap"
+        direction="row"
+        gap={{ xs: 3, sm: 5, md: mode === 'checkout' ? 10 : 5 }}
+        justifyContent={alignItems === 'center' ? 'center' : 'flex-start'}>
+        {grouped[state.interval as string]?.map((x: TPricingTableItem) => {
+          let action = x.subscription_data?.trial_period_days ? t('checkout.try') : t('checkout.subscription');
+          if (mode === 'select') {
+            action = x.is_selected ? t('checkout.selected') : t('checkout.select');
+          }
+
+          return (
+            <Fade key={x.price_id} in>
+              <Stack
+                padding={4}
+                spacing={2}
+                direction="column"
+                alignItems="center"
+                sx={{
+                  width: 320,
+                  cursor: 'pointer',
+                  borderWidth: '1px',
+                  borderStyle: 'solid',
+                  borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#eee',
+                  borderRadius: 1,
+                  transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
+                  boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',
+                  '&:hover': {
+                    borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#ddd',
+                    boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
+                  },
+                }}>
+                <Box textAlign="center">
+                  <Stack direction="row" alignItems="center" spacing={1}>
+                    <Typography variant="h5" color="text.primary" fontWeight={600}>
+                      {x.product.name}
+                    </Typography>
+                    {x.is_highlight && <Chip label={x.highlight_text} color="default" size="small" />}
+                  </Stack>
+                  <Typography color="text.secondary">{x.product.description}</Typography>
+                </Box>
+                <Stack direction="row" alignItems="center" spacing={1}>
+                  <PaymentAmount amount={formatPriceAmount(x.price, table.currency, x.product.unit_label)} />
+                  <Stack direction="column" alignItems="flex-start">
+                    <Typography component="span" color="text.secondary" fontSize="0.8rem">
+                      {t('checkout.per')}
+                    </Typography>
+                    <Typography component="span" color="text.secondary" fontSize="0.8rem">
+                      {formatRecurring(x.price.recurring as PriceRecurring, false, '', locale)}
+                    </Typography>
+                  </Stack>
+                </Stack>
+                <LoadingButton
+                  fullWidth
+                  size="large"
+                  loadingPosition="end"
+                  variant={x.is_highlight || x.is_selected ? 'contained' : 'outlined'}
+                  color={x.is_highlight || x.is_selected ? 'primary' : 'info'}
+                  sx={{ fontSize: '1.2rem' }}
+                  loading={state.loading === x.price_id}
+                  disabled={x.is_disabled}
+                  onClick={() => handleSelect(x.price_id)}>
+                  {action}
+                </LoadingButton>
+                {x.product.features.length > 0 && (
+                  <Box>
+                    <Typography>{t('checkout.include')}</Typography>
+                    <List dense>
+                      {x.product.features.map((f: any) => (
+                        <ListItem key={f.name} disableGutters disablePadding>
+                          <ListItemIcon sx={{ minWidth: 25 }}>
+                            <CheckOutlined color="success" fontSize="small" />
+                          </ListItemIcon>
+                          <ListItemText primary={f.name} />
+                        </ListItem>
+                      ))}
+                    </List>
+                  </Box>
+                )}
+              </Stack>
+            </Fade>
+          );
+        })}
+      </Stack>
+    </Stack>
+  );
+}

package/src/components/payment-link/product-select.tsx

@@ -1,7 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { TProductExpanded } from '@did-pay/types';
 import { AddOutlined } from '@mui/icons-material';
-import { Box, ListSubheader, MenuItem, Select, Typography } from '@mui/material';
+import { Avatar, Box, ListSubheader, MenuItem, Select, Stack, Typography } from '@mui/material';
 import cloneDeep from 'lodash/cloneDeep';
 import { useState } from 'react';
 import type { LiteralUnion } from 'type-fest';
@@ -38,6 +38,7 @@ export default function ProductSelect({ mode: initialMode, hasSelected, onSelect
   };
 
   if (mode === 'selecting') {
+    const size = { width: 16, height: 16 };
     return (
       <Select value="" fullWidth size="small" onChange={handleSelect} MenuProps={{ style: { maxHeight: 480 } }}>
         <MenuItem value="add">
@@ -46,10 +47,19 @@ export default function ProductSelect({ mode: initialMode, hasSelected, onSelect
         </MenuItem>
         {filterProducts(products, hasSelected).map((product) => [
           <ListSubheader key={product.id} sx={{ fontSize: '1rem', color: 'text.secondary', lineHeight: '2.5rem' }}>
-            {product.name}
+            <Stack direction="row" alignItems="center" spacing={0.5}>
+              {product.images[0] ? (
+                <Avatar src={product.images[0]} alt={product.name} variant="square" sx={size} />
+              ) : (
+                <Avatar variant="square" sx={size}>
+                  {product.name.slice(0, 1)}
+                </Avatar>
+              )}
+              <Typography component="span">{product.name}</Typography>
+            </Stack>
           </ListSubheader>,
           ...product.prices.map((price) => (
-            <MenuItem key={price.id} sx={{ pl: 3 }} value={price.id}>
+            <MenuItem key={price.id} sx={{ pl: 4.5 }} value={price.id}>
               <Typography color="text.primary">{formatPrice(price, settings.baseCurrency)}</Typography>
               <Typography color="text.secondary" sx={{ ml: 2 }}>
                 {getPriceCurrencyOptions(price).length > 1