payment-kit 1.14.28 → 1.14.30

package/api/src/routes/subscriptions.ts

@@ -6,6 +6,8 @@ import isObject from 'lodash/isObject';
 import pick from 'lodash/pick';
 import uniq from 'lodash/uniq';
 
+import { literal } from 'sequelize';
+import type { Literal } from 'sequelize/types/utils';
 import { ensureStripeCustomer, ensureStripePrice, ensureStripeSubscription } from '../integrations/stripe/resource';
 import { createListParamSchema, getWhereFromKvQuery, getWhereFromQuery } from '../libs/api';
 import dayjs from '../libs/dayjs';
@@ -72,10 +74,12 @@ const schema = createListParamSchema<{
   status?: string;
   customer_id?: string;
   customer_did?: string;
+  activeFirst?: boolean;
 }>({
   status: Joi.string().empty(''),
   customer_id: Joi.string().empty(''),
   customer_did: Joi.string().empty(''),
+  activeFirst: Joi.boolean().optional(),
 });
 router.get('/', authMine, async (req, res) => {
   const { page, pageSize, status, livemode, ...query } = await schema.validateAsync(req.query, {
@@ -113,10 +117,19 @@ router.get('/', authMine, async (req, res) => {
       where[key] = query[key];
     });
 
+  const order: [Literal | string, 'ASC' | 'DESC'][] = [['created_at', query.o === 'asc' ? 'ASC' : 'DESC']];
+
+  if (query.activeFirst) {
+    order.unshift([
+      literal("CASE status WHEN 'active' THEN 1 WHEN 'trialing' THEN 2 WHEN 'past_due' THEN 3 ELSE 4 END"),
+      'ASC',
+    ]);
+  }
+
   try {
     const { rows: list, count } = await Subscription.findAndCountAll({
       where,
-      order: [['created_at', query.o === 'asc' ? 'ASC' : 'DESC']],
+      order,
       offset: (page - 1) * pageSize,
       limit: pageSize,
       include: [
@@ -128,7 +141,6 @@ router.get('/', authMine, async (req, res) => {
       // https://github.com/sequelize/sequelize/issues/9481
       distinct: true,
     });
-
     const products = (await Product.findAll()).map((x) => x.toJSON());
     const prices = (await Price.findAll()).map((x) => x.toJSON());
     const docs = list.map((x) => x.toJSON());

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.14.28",
+  "version": "1.14.30",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -52,7 +52,7 @@
     "@arcblock/validator": "^1.18.128",
     "@blocklet/js-sdk": "1.16.28",
     "@blocklet/logger": "1.16.28",
-    "@blocklet/payment-react": "1.14.28",
+    "@blocklet/payment-react": "1.14.30",
     "@blocklet/sdk": "1.16.28",
     "@blocklet/ui-react": "^2.10.16",
     "@blocklet/uploader": "^0.1.20",
@@ -118,7 +118,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.28",
     "@arcblock/eslint-config-ts": "^0.3.2",
-    "@blocklet/payment-types": "1.14.28",
+    "@blocklet/payment-types": "1.14.30",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -160,5 +160,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "79178aa9251fb54006f6e0fe32a14619d1e8f06e"
+  "gitHead": "f98dee7bce684f81f4e060b942efaa9ad8730b55"
 }

package/src/components/invoice/list.tsx

@@ -129,7 +129,7 @@ export default function InvoiceList({
     {
       label: t('common.amount'),
       name: 'total',
-      width: 60,
+      width: 80,
       align: 'right',
       options: {
         customBodyRenderLite: (_: string, index: number) => {

package/src/components/payment-intent/actions.tsx

@@ -206,7 +206,7 @@ export function PaymentIntentActionsInner({ data, variant, onChange }: Props) {
           reset();
           const curAmount = formatBNStr(res?.amount, data.paymentCurrency.decimal);
           if (Number(curAmount) <= 0) {
-            Toast.info(t('admin.paymentIntent.refund.empty'));
+            Toast.info(t('admin.paymentIntent.refundForm.empty'));
             return;
           }
           setValue('refund.amount', curAmount);

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

@@ -11,7 +11,11 @@ import ProductSelect from '../payment-link/product-select';
 import CreateProduct from '../product/create';
 import ProductItem from './product-item';
 
-export default function PricingTableProductSettings() {
+export default function PricingTableProductSettings({
+  triggerError = () => {},
+}: {
+  triggerError: (keys: { [key: string]: boolean }) => void;
+}) {
   const { t } = useLocaleContext();
   const [params, setParams] = useSearchParams();
   const { products, refresh } = useProductsContext();
@@ -98,6 +102,13 @@ export default function PricingTableProductSettings() {
 
   const grouped = groupPricingTableItems(items.fields);
 
+  useEffect(() => {
+    const hasDifferentCurrency = items.fields.some(
+      (_, index) => !isPriceCurrencyAligned(items.fields as any[], products, index)
+    );
+    triggerError({ items: hasDifferentCurrency });
+  }, [items.fields, products]);
+
   return (
     <Stack spacing={2} alignItems="flex-start">
       <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>

package/src/components/subscription/portal/list.tsx

@@ -1,21 +1,16 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Empty from '@arcblock/ux/lib/Empty';
-import {
-  Status,
-  api,
-  formatPrice,
-  getSubscriptionStatusColor,
-  getSubscriptionTimeSummary,
-  useMobile,
-  formatSubscriptionStatus,
-} from '@blocklet/payment-react';
+import { api, formatPrice, getSubscriptionTimeSummary, useMobile } from '@blocklet/payment-react';
 import type { Paginated, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Avatar, AvatarGroup, Box, Button, CircularProgress, Stack, StackProps, Typography } from '@mui/material';
 import { useInfiniteScroll } from 'ahooks';
 
+import { useRef } from 'react';
 import SubscriptionDescription from '../description';
 import SubscriptionActions from './actions';
+import SubscriptionStatus from '../status';
+import useDelayedLoading from '../../../hooks/loading';
 
 const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TSubscriptionExpanded>> => {
   const search = new URLSearchParams();
@@ -47,168 +42,196 @@ export default function CurrentSubscriptions({
 }: Props) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile();
+  const listRef = useRef<HTMLDivElement | null>(null);
 
-  const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TSubscriptionExpanded>>(
+  const { data, loadMore, loadingMore, loading, reload } = useInfiniteScroll<Paginated<TSubscriptionExpanded>>(
     (d) => {
       const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
-      return fetchData({ page, pageSize, status, customer_id: id });
+      return fetchData({ page, pageSize, status, customer_id: id, activeFirst: true });
     },
     {
       reloadDeps: [id, status],
+      ...(isMobile
+        ? {}
+        : {
+            target: listRef,
+            isNoMore: (d) => {
+              return d?.list?.length === 0 || (d?.list?.length ?? 0) >= (d?.count ?? 0);
+            },
+          }),
     }
   );
 
+  const showLoadingMore = useDelayedLoading(loadingMore);
+
   if (loading || !data) {
     return <CircularProgress />;
   }
 
-  if (data && data.list.length === 0) {
-    return <Typography color="text.secondary">{t('payment.customer.subscriptions.empty')}</Typography>;
-  }
-
-  const hasMore = data && data.list.length < data.count;
+  const hasMore = data && data.list?.length < data.count;
   const size = { width: 48, height: 48 };
 
   return (
     <Stack direction="column" spacing={2} sx={{ mt: 2 }}>
       {data.list?.length > 0 ? (
         <>
-          {data.list.map((subscription) => {
-            return (
-              <Stack
-                key={subscription.id}
-                direction="row"
-                justifyContent="space-between"
-                gap={{
-                  xs: 1,
-                  sm: 2,
-                }}
-                sx={{
-                  padding: 1.5,
-                  background: 'var(--backgrounds-bg-subtle, #F9FAFB)',
-                  '&:hover': {
-                    backgroundColor: 'grey.50',
-                    transition: 'background-color 200ms linear',
-                    cursor: 'pointer',
-                  },
-                }}
-                flexWrap="wrap">
-                <Stack direction="column" flex={1} spacing={0.5} {...rest}>
-                  <Stack
-                    direction={isMobile ? 'column' : 'row'}
-                    spacing={1}
-                    alignItems={isMobile ? 'flex-start' : 'center'}
-                    flexWrap="wrap"
-                    justifyContent="space-between"
-                    onClick={() => onClickSubscription(subscription)}>
-                    <Stack direction="row" spacing={1.5}>
-                      <AvatarGroup max={3}>
-                        {subscription.items.map((item) =>
-                          item.price.product.images.length > 0 ? (
+          <Box
+            ref={listRef}
+            sx={{
+              maxHeight: {
+                xs: '100%',
+                md: '450px',
+              },
+              overflowY: 'auto',
+            }}>
+            {data.list.map((subscription) => {
+              return (
+                <Stack
+                  key={subscription.id}
+                  direction="row"
+                  justifyContent="space-between"
+                  gap={{
+                    xs: 1,
+                    sm: 2,
+                  }}
+                  sx={{
+                    padding: 1.5,
+                    background: 'var(--backgrounds-bg-subtle, #F9FAFB)',
+                    '&:hover': {
+                      backgroundColor: 'grey.50',
+                      transition: 'background-color 200ms linear',
+                      cursor: 'pointer',
+                    },
+                  }}
+                  flexWrap="wrap">
+                  <Stack direction="column" flex={1} spacing={0.5} {...rest}>
+                    <Stack
+                      direction={isMobile ? 'column' : 'row'}
+                      spacing={1}
+                      alignItems={isMobile ? 'flex-start' : 'center'}
+                      flexWrap="wrap"
+                      justifyContent="space-between"
+                      onClick={() => onClickSubscription(subscription)}>
+                      <Stack direction="row" spacing={1.5}>
+                        <AvatarGroup max={3}>
+                          {subscription.items.map((item) =>
+                            item.price.product.images.length > 0 ? (
+                              // @ts-ignore
+                              <Avatar
+                                key={item.price.product_id}
+                                src={item.price.product.images[0]}
+                                alt={item.price.product.name}
+                                variant="rounded"
+                                sx={size}
+                              />
+                            ) : (
+                              <Avatar key={item.price.product_id} variant="rounded" sx={size}>
+                                {item.price.product.name.slice(0, 1)}
+                              </Avatar>
+                            )
+                          )}
+                        </AvatarGroup>
+                        <Stack
+                          direction="column"
+                          spacing={0.5}
+                          sx={{
+                            '.MuiTypography-body1': {
+                              fontSize: '16px',
+                            },
+                          }}>
+                          <SubscriptionDescription subscription={subscription} hideSubscription variant="body1" />
+                          <SubscriptionStatus
+                            subscription={subscription}
+                            sx={{ height: 18, width: 'fit-content' }}
+                            size="small"
+                          />
+                        </Stack>
+                      </Stack>
+                      <Stack>
+                        <Typography variant="subtitle1" fontWeight={500} fontSize={16}>
+                          {
                             // @ts-ignore
-                            <Avatar
-                              key={item.price.product_id}
-                              src={item.price.product.images[0]}
-                              alt={item.price.product.name}
-                              variant="rounded"
-                              sx={size}
-                            />
-                          ) : (
-                            <Avatar key={item.price.product_id} variant="rounded" sx={size}>
-                              {item.price.product.name.slice(0, 1)}
-                            </Avatar>
-                          )
-                        )}
-                      </AvatarGroup>
-                      <Stack
-                        direction="column"
-                        spacing={0.5}
-                        sx={{
-                          '.MuiTypography-body1': {
-                            fontSize: '16px',
-                          },
-                        }}>
-                        <SubscriptionDescription subscription={subscription} hideSubscription variant="body1" />
-                        <Status
-                          size="small"
-                          sx={{ height: 18, width: 'fit-content' }}
-                          label={formatSubscriptionStatus(subscription.status)}
-                          color={getSubscriptionStatusColor(subscription.status)}
-                        />
+                            formatPrice(subscription.items[0].price, subscription.paymentCurrency)
+                          }
+                        </Typography>
                       </Stack>
                     </Stack>
-                    <Stack>
-                      <Typography variant="subtitle1" fontWeight={500} fontSize={16}>
-                        {
-                          // @ts-ignore
-                          formatPrice(subscription.items[0].price, subscription.paymentCurrency)
-                        }
-                      </Typography>
-                    </Stack>
-                  </Stack>
-                  <Stack
-                    gap={1}
-                    justifyContent="space-between"
-                    flexWrap="wrap"
-                    sx={{
-                      flexDirection: {
-                        xs: 'column',
-                        lg: 'row',
-                      },
-                      alignItems: {
-                        xs: 'flex-start',
-                        lg: 'center',
-                      },
-                    }}>
-                    <Box
-                      component="div"
-                      onClick={() => onClickSubscription(subscription)}
-                      sx={{ display: 'flex', gap: 0.5, flexDirection: isMobile ? 'column' : 'row' }}>
-                      {getSubscriptionTimeSummary(subscription)
-                        .split(',')
-                        .map((x) => (
-                          <Typography key={x} variant="body1" color="text.secondary">
-                            {x}
-                          </Typography>
-                        ))}
-                    </Box>
-                    <SubscriptionActions
-                      subscription={subscription}
-                      onChange={onChange}
-                      actionProps={{
-                        cancel: {
-                          variant: 'outlined',
-                          color: 'primary',
+                    <Stack
+                      gap={1}
+                      justifyContent="space-between"
+                      flexWrap="wrap"
+                      sx={{
+                        flexDirection: {
+                          xs: 'column',
+                          lg: 'row',
                         },
-                        recover: {
-                          variant: 'outlined',
-                          color: 'info',
+                        alignItems: {
+                          xs: 'flex-start',
+                          lg: 'center',
                         },
-                        pastDue: {
-                          variant: 'outlined',
-                          color: 'primary',
-                        },
-                      }}
-                    />
+                      }}>
+                      <Box
+                        component="div"
+                        onClick={() => onClickSubscription(subscription)}
+                        sx={{ display: 'flex', gap: 0.5, flexDirection: isMobile ? 'column' : 'row' }}>
+                        {getSubscriptionTimeSummary(subscription)
+                          .split(',')
+                          .map((x) => (
+                            <Typography key={x} variant="body1" color="text.secondary">
+                              {x}
+                            </Typography>
+                          ))}
+                      </Box>
+                      <SubscriptionActions
+                        subscription={subscription}
+                        onChange={(v) => {
+                          reload();
+                          if (onChange) {
+                            onChange(v);
+                          }
+                        }}
+                        actionProps={{
+                          cancel: {
+                            variant: 'outlined',
+                            color: 'primary',
+                          },
+                          recover: {
+                            variant: 'outlined',
+                            color: 'info',
+                          },
+                          pastDue: {
+                            variant: 'outlined',
+                            color: 'primary',
+                          },
+                        }}
+                      />
+                    </Stack>
                   </Stack>
                 </Stack>
-              </Stack>
-            );
-          })}
-          <Box>
-            {hasMore && (
-              <Button variant="text" type="button" color="inherit" onClick={loadMore} disabled={loadingMore}>
-                {loadingMore
-                  ? t('common.loadingMore', { resource: t('admin.subscriptions') })
-                  : t('common.loadMore', { resource: t('admin.subscriptions') })}
-              </Button>
-            )}
-            {!hasMore && data.count > pageSize && (
-              <Typography color="text.secondary">
-                {t('common.noMore', { resource: t('admin.subscriptions') })}
-              </Typography>
+              );
+            })}
+            {hasMore && !isMobile && showLoadingMore && (
+              <Box alignItems="center" gap={0.5} display="flex" mt={0.5}>
+                {t('common.loadingMore', { resource: t('admin.subscriptions') })}
+              </Box>
             )}
           </Box>
+          {isMobile && (
+            <Box>
+              {hasMore && (
+                <Button variant="text" type="button" color="inherit" onClick={loadMore} disabled={loadingMore}>
+                  {loadingMore
+                    ? t('common.loadingMore', { resource: t('admin.subscriptions') })
+                    : t('common.loadMore', { resource: t('admin.subscriptions') })}
+                </Button>
+              )}
+              {!hasMore && data.count > pageSize && (
+                <Typography color="text.secondary">
+                  {t('common.noMore', { resource: t('admin.subscriptions') })}
+                </Typography>
+              )}
+            </Box>
+          )}
         </>
       ) : (
         <Empty>

package/src/hooks/loading.ts

@@ -0,0 +1,28 @@
+import { useState, useEffect, useRef } from 'react';
+
+function useDelayedLoading(loading: boolean, delay: number = 300) {
+  const [showLoading, setShowLoading] = useState(false);
+  const delayTimeout = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (delayTimeout.current) {
+      clearTimeout(delayTimeout.current);
+    }
+    if (loading) {
+      delayTimeout.current = setTimeout(() => {
+        setShowLoading(true);
+      }, delay);
+    } else {
+      setShowLoading(false);
+    }
+    return () => {
+      if (delayTimeout.current) {
+        clearTimeout(delayTimeout.current);
+      }
+    };
+  }, [loading, delay]);
+
+  return showLoading;
+}
+
+export default useDelayedLoading;

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

@@ -81,7 +81,7 @@ export default function PriceActions({ data, onChange, variant, setAsDefault }:
     try {
       setState({ loading: true });
       await api.put(`/api/products/${data.product_id}`, { default_price_id: data.id }).then((res) => res.data);
-      Toast.success(t('common.removed'));
+      Toast.success(t('common.saveAsDefaultPriceSuccess'));
       onChange(state.action);
     } catch (err) {
       console.error(err);
@@ -135,7 +135,7 @@ export default function PriceActions({ data, onChange, variant, setAsDefault }:
     { label: t('admin.pricingTable.add'), handler: onCreatePricingTable, color: 'primary', disabled: !data.recurring },
   ];
 
-  if (setAsDefault) {
+  if (!setAsDefault) {
     actions.splice(4, 0, {
       label: t('admin.price.setAsDefault'),
       handler: onSetAsDefault,

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

@@ -10,8 +10,9 @@ import { FormProvider, useForm } from 'react-hook-form';
 import { useSearchParams } from 'react-router-dom';
 import { dispatch } from 'use-bus';
 
+import { useSetState } from 'ahooks';
 import DrawerForm from '../../../../components/drawer-form';
-import PricingTableCustomerSettings from '../../../../components/pricing-table/customer-settings';
+// import PricingTableCustomerSettings from '../../../../components/pricing-table/customer-settings';
 import PricingTablePaymentSettings from '../../../../components/pricing-table/payment-settings';
 import PricingTablePreview from '../../../../components/pricing-table/preview';
 import PricingTableProductSettings from '../../../../components/pricing-table/product-settings';
@@ -25,6 +26,7 @@ export default function CreatePricingTable() {
   const [step, setStep] = useState(0); // ['products', 'payment', 'portal']
   const [stashed, setStashed] = useState(0);
   const fullScreenRef = useRef(null);
+  const [errors, triggerError] = useSetState({});
 
   const methods = useForm<TPricingTable & any>({
     shouldUnregister: false,
@@ -64,6 +66,7 @@ export default function CreatePricingTable() {
       .then(() => {
         Toast.success(t('admin.pricingTable.saved'));
         methods.reset();
+        setStep(0);
         dispatch('drawer.submitted');
         dispatch('pricingTable.created');
       })
@@ -80,7 +83,10 @@ export default function CreatePricingTable() {
   };
 
   const onContinue = () => {
-    if (step < 2) {
+    if (Object.values(errors).some((v) => v)) {
+      return;
+    }
+    if (step < 1) {
       setStep(step + 1);
     } else {
       methods.handleSubmit(async (formData: any) => {
@@ -107,9 +113,9 @@ export default function CreatePricingTable() {
             <Box flex={2} sx={{ borderRight: '1px solid #eee' }} position="relative">
               <Stack height="100%" spacing={2}>
                 <Box overflow="auto" sx={{ pr: 2 }}>
-                  {step === 0 && <PricingTableProductSettings />}
+                  {step === 0 && <PricingTableProductSettings triggerError={triggerError} />}
                   {step === 1 && <PricingTablePaymentSettings />}
-                  {step === 2 && <PricingTableCustomerSettings />}
+                  {/* {step === 2 && <PricingTableCustomerSettings />} */}
                 </Box>
                 <Stack
                   padding={2}
@@ -124,7 +130,7 @@ export default function CreatePricingTable() {
                     {t('common.previous')}
                   </Button>
                   <Button variant="contained" color="primary" onClick={onContinue}>
-                    {step === 2 ? t('common.save') : t('common.continue')}
+                    {step === 1 ? t('common.save') : t('common.continue')}
                   </Button>
                 </Stack>
               </Stack>