payment-kit 1.14.27 → 1.14.29

package/api/src/routes/prices.ts

@@ -176,12 +176,12 @@ const priceAmountSchema = Joi.object({
   currency_options: Joi.array()
     .items(
       Joi.object({
-        unit_amount: Joi.number().greater(0).required(),
+        unit_amount: Joi.number().greater(0).optional(),
         // 其他属性
       }).unknown(true)
     )
     .optional(),
-  unit_amount: Joi.number().greater(0).required(),
+  unit_amount: Joi.number().greater(0).optional(),
 });
 
 // FIXME: @wangshijun use schema validation

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.14.27",
+  "version": "1.14.29",
   "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.27",
+    "@blocklet/payment-react": "1.14.29",
     "@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.27",
+    "@blocklet/payment-types": "1.14.29",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -160,5 +160,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "8a67ed1dbdda51526d4cd03c9c10c6930a9ac6a0"
+  "gitHead": "104f4189d9ef96c1e332ffa90824ebd3063c989d"
 }

package/src/components/copyable.tsx

@@ -1,5 +1,6 @@
 import { CopyButton } from '@arcblock/ux/lib/ClickToCopy';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { getWordBreakStyle } from '@blocklet/payment-react';
 import { Box, Stack, Typography } from '@mui/material';
 
 export default function Copyable({ text, children, style }: { text: string; children?: React.ReactNode; style?: any }) {
@@ -18,10 +19,13 @@ export default function Copyable({ text, children, style }: { text: string; chil
               sx={{
                 mr: 0.5,
                 maxWidth: 480,
-                overflow: 'hidden',
-                fontSize: 'inherit',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
+                // overflow: 'hidden',
+                // fontSize: 'inherit',
+                // textOverflow: 'ellipsis',
+                // whiteSpace: 'nowrap',
+                wordBreak: getWordBreakStyle(text),
+                whiteSpace: 'break-spaces',
+                minWidth: '60px',
               }}>
               {text}
             </Typography>

package/src/components/filter-toolbar.tsx

@@ -2,7 +2,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { api, useMobile, usePaymentContext } from '@blocklet/payment-react';
 import type { TCustomer } from '@blocklet/payment-types';
 import { Add, Close } from '@mui/icons-material';
-import { Button, ClickAwayListener, Menu, MenuItem } from '@mui/material';
+import { Button, Menu, MenuItem } from '@mui/material';
 import { Box, styled } from '@mui/system';
 import { useEffect, useState } from 'react';
 
@@ -54,7 +54,12 @@ export default function FilterToolbar(props: Props) {
   };
 
   return (
-    <Root>
+    <Root
+      sx={{
+        '.MuiTouchRipple-root': {
+          display: 'none !important',
+        },
+      }}>
       <Box className="table-toolbar-left">
         <SearchStatus setSearch={handleSearch} search={search} status={status} formatStatus={formatStatus} />
         {!isMobile && (
@@ -308,7 +313,7 @@ function SearchCustomers({ setSearch, search }: Pick<Props, 'setSearch' | 'searc
 }
 
 function SearchProducts({ setSearch }: Pick<Props, 'setSearch'>) {
-  const [show, setShow] = useState(false);
+  const [show, setShow] = useState(null);
   const [price, setPrice] = useState({} as any);
   const [display, setDisplay] = useState('');
   const isSubscription = window.location.pathname.includes('subscriptions');
@@ -334,51 +339,53 @@ function SearchProducts({ setSearch }: Pick<Props, 'setSearch'>) {
   }, [price]);
 
   return (
-    <ClickAwayListener
-      onClickAway={(e) => {
-        e.stopPropagation();
-        setShow(false);
-      }}>
-      <section onClick={() => setShow(!show)}>
-        <Button className="option-btn" variant="text">
-          {display ? (
-            <Close
-              sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
-              onClick={(e) => {
-                e.stopPropagation();
-                setSearch({
-                  q: '',
-                });
-                setDisplay('');
-                setShow(false);
-              }}
-            />
-          ) : (
-            <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
-          )}
-          {t('admin.subscription.product')}
-          <span>{display}</span>
-        </Button>
-
-        <ul
-          className="status-options"
-          style={{ display: show ? 'block' : 'none' }}
-          onClick={(e) => e.stopPropagation()}>
-          <Box sx={{ height: '10px' }} />
-          <ProductsProvider>
-            <ProductSelect
-              mode="inline"
-              hasSelected={() => false}
-              onSelect={(p: any) => {
-                setPrice(p);
-                setDisplay(`${p.productName}(${p.displayPrice})`);
-                setShow(false);
-              }}
-            />
-          </ProductsProvider>
-        </ul>
-      </section>
-    </ClickAwayListener>
+    <section>
+      <Button
+        className="option-btn"
+        variant="text"
+        onClick={(e) => {
+          setShow(e.currentTarget as any);
+        }}>
+        {display ? (
+          <Close
+            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
+            onClick={(e) => {
+              e.stopPropagation();
+              setSearch({
+                q: '',
+              });
+              setDisplay('');
+              setShow(null);
+            }}
+          />
+        ) : (
+          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
+        )}
+        {t('admin.subscription.product')}
+        <span>{display}</span>
+      </Button>
+      <Menu
+        anchorEl={show}
+        open={Boolean(show)}
+        className="status-options"
+        sx={{ height: 300 }}
+        onClose={(e: any) => {
+          e.stopPropagation();
+          setShow(null);
+        }}>
+        <ProductsProvider>
+          <ProductSelect
+            mode="inline"
+            hasSelected={() => false}
+            onSelect={(p: any) => {
+              setPrice(p);
+              setDisplay(`${p.productName}(${p.displayPrice})`);
+              setShow(null);
+            }}
+          />
+        </ProductsProvider>
+      </Menu>
+    </section>
   );
 }
 
@@ -458,12 +465,13 @@ const Root = styled(Box)`
     color: #555;
     font-size: 14px;
     line-height: 14px;
-    overflow: hidden;
+    overflow: visible;
   }
 
   .option-btn span {
     color: #3773f2;
     padding: 0 3px;
+    overflow: visible;
   }
 
   .status-options {

package/src/components/info-card.tsx

@@ -1,3 +1,4 @@
+import { getWordBreakStyle } from '@blocklet/payment-react';
 import { Avatar, Stack, SxProps, Typography } from '@mui/material';
 import type { LiteralUnion } from 'type-fest';
 
@@ -22,7 +23,11 @@ export default function InfoCard(props: Props) {
           {props.name.slice(0, 1)}
         </Avatar>
       )}
-      <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
+      <Stack
+        direction="column"
+        alignItems="flex-start"
+        justifyContent="space-around"
+        sx={{ wordBreak: getWordBreakStyle(props.name), minWidth: 140 }}>
         <Typography variant="body1" color="text.primary">
           {props.name}
         </Typography>

package/src/components/info-row.tsx

@@ -1,6 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Box, Stack, SxProps } from '@mui/material';
 import type { ReactNode } from 'react';
+import { getWordBreakStyle } from '@blocklet/payment-react';
 import { isEmptyExceptNumber } from '../libs/util';
 
 type Props = {
@@ -49,7 +50,12 @@ export default function InfoRow(props: Props) {
         }}>
         {props.label}
       </Box>
-      <Box flex={sizes[1]} color={isNone ? 'text.disabled' : 'text.secondary'} className="info-row-value" fontSize={14}>
+      <Box
+        flex={sizes[1]}
+        color={isNone ? 'text.disabled' : 'text.secondary'}
+        className="info-row-value"
+        fontSize={14}
+        sx={{ wordBreak: getWordBreakStyle(props.value) }}>
         {isNone ? t('common.none') : props.value}
       </Box>
     </Stack>

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

@@ -141,6 +141,7 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
         control={control}
         rules={{
           required: t('common.required'),
+          validate: (value) => value.trim() !== '' || t('common.required'),
         }}
         render={({ field }) => (
           <TextField
@@ -205,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/payment-link/before-pay.tsx

@@ -12,7 +12,11 @@ import CreateProduct from '../product/create';
 import LineItem from './item';
 import ProductSelect from './product-select';
 
-export default function BeforePay() {
+export default function BeforePay({
+  triggerError = () => {},
+}: {
+  triggerError: (keys: { [key: string]: boolean }) => void;
+}) {
   const { t } = useLocaleContext();
   const [params, setParams] = useSearchParams();
   const { products, refresh } = useProductsContext();
@@ -69,6 +73,14 @@ export default function BeforePay() {
     refresh();
   };
 
+  useEffect(() => {
+    const hasDifferentCurrencyOrRecurring = items.fields.some((_, index) => {
+      const priceAlignResult = isPriceAligned(items.fields as any[], products, index);
+      return !priceAlignResult.currency || !priceAlignResult.recurring;
+    });
+    triggerError({ line_items: hasDifferentCurrencyOrRecurring });
+  }, [items.fields, products]);
+
   return (
     <Stack spacing={2} sx={{ width: '100%' }}>
       <Typography variant="h6" sx={{ fontWeight: 600 }}>

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

@@ -18,9 +18,9 @@ const PricingTablePreview = forwardRef(({ id, version = 1 }: { id: string; versi
   return (
     <div ref={innerRef}>
       {fullscreen ? (
-        <div style={{ width: '100%', height: '100%', background: '#fff', border: 'none' }}>
+        <div style={{ width: '100%', height: '100%', background: '#fff' }}>
           <IframeResizer
-            style={{ width: '100%', height: '100vh', overflow: 'hidden' }}
+            style={{ width: '100%', height: '100vh', overflow: 'hidden', border: 'none' }}
             src={`${window.blocklet.prefix}checkout/pricing-table/${id}?preview=1&version=${version}`}
           />
         </div>

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,5 +1,6 @@
 /* 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,
@@ -29,11 +30,21 @@ type Props = {
   status: string;
   onChange?: (action?: string) => any | Promise<any>;
   onClickSubscription: (subscription: TSubscriptionExpanded) => void | Promise<void>;
+  onlyActive?: boolean;
+  changeActive?: (active: boolean) => void;
 } & Omit<StackProps, 'onChange'>;
 
 const pageSize = 4;
 
-export default function CurrentSubscriptions({ id, status, onChange, onClickSubscription, ...rest }: Props) {
+export default function CurrentSubscriptions({
+  id,
+  status,
+  onChange,
+  onClickSubscription,
+  onlyActive,
+  changeActive = () => {},
+  ...rest
+}: Props) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile();
 
@@ -184,30 +195,43 @@ export default function CurrentSubscriptions({ id, status, onChange, onClickSubs
               </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>
+            )}
+          </Box>
         </>
       ) : (
-        <Box sx={{ textAlign: 'center' }}>
-          <Typography>📦</Typography>
-          <Typography>{t('admin.subscription.empty')}</Typography>
-        </Box>
+        <Empty>
+          {onlyActive ? (
+            <Box sx={{ textAlign: 'center' }}>
+              <Typography>{t('admin.subscription.noActiveEmpty')}</Typography>
+              {changeActive && (
+                <Button onClick={() => changeActive(false)} variant="text" sx={{ color: 'text.link' }}>
+                  {t('admin.subscription.viewAll')}
+                </Button>
+              )}
+            </Box>
+          ) : (
+            t('admin.subscription.empty')
+          )}
+        </Empty>
       )}
-
-      <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>
     </Stack>
   );
 }
 
 CurrentSubscriptions.defaultProps = {
   onChange: null,
+  onlyActive: false,
+  changeActive: null,
 };

package/src/components/uploader.tsx

@@ -27,7 +27,9 @@ export default function Uploader({ onUploaded, preview, maxFileSize, maxNumberOf
   useEffect(() => {
     if (uploaderRef.current) {
       const uploader = uploaderRef.current.getUploader();
-      uploader.onUploadSuccess((result: any) => onUploaded({ url: result.response.data.fileUrl }));
+      uploader.onUploadSuccess((result: any) => {
+        onUploaded({ url: result.response.data.url });
+      });
     }
   }, [onUploaded]);
 

package/src/locales/en.tsx

@@ -422,6 +422,8 @@ export default flat({
       view: 'View subscription',
       name: 'Subscription',
       empty: 'No subscription',
+      viewAll: 'View all subscriptions',
+      noActiveEmpty: 'You currently have no active subscriptions. You can choose to view your subscription history.',
       attention: 'Past due subscriptions',
       product: 'Product',
       collectionMethod: 'Billing',
@@ -513,6 +515,7 @@ export default flat({
         spent: 'Spent',
         due: 'Due',
         stake: 'Stake',
+        stats: 'Stats',
         balance: 'Balance',
       },
       address: {

package/src/locales/zh.tsx

@@ -414,6 +414,8 @@ export default flat({
       view: '查看订阅',
       name: '订阅',
       empty: '没有订阅',
+      viewAll: '查看历史订阅',
+      noActiveEmpty: '您当前没有服务中的订阅，您可以选择查看历史订阅',
       product: '产品',
       attention: '将过期的订阅',
       collectionMethod: '计费',
@@ -504,6 +506,7 @@ export default flat({
         spent: '花费金额',
         due: '欠款金额',
         stake: '质押金额',
+        stats: '统计',
         balance: '余额',
       },
       address: {

package/src/pages/admin/billing/invoices/detail.tsx

@@ -195,7 +195,7 @@ export default function InvoiceDetail(props: { id: string }) {
             width: {
               xs: '100%',
               md: '100%',
-              lg: '580px',
+              lg: '320px',
             },
             maxWidth: {
               xs: '100%',

package/src/pages/admin/billing/subscriptions/detail.tsx

@@ -173,7 +173,7 @@ export default function SubscriptionDetail(props: { id: string }) {
             width: {
               xs: '100%',
               md: '100%',
-              lg: '580px',
+              lg: '320px',
             },
             maxWidth: {
               xs: '100%',

package/src/pages/admin/customers/customers/detail.tsx

@@ -256,7 +256,7 @@ export default function CustomerDetail(props: { id: string }) {
             width: {
               xs: '100%',
               md: '100%',
-              lg: '580px',
+              lg: '320px',
             },
             maxWidth: {
               xs: '100%',

package/src/pages/admin/payments/intents/detail.tsx

@@ -199,7 +199,7 @@ export default function PaymentIntentDetail(props: { id: string }) {
             width: {
               xs: '100%',
               md: '100%',
-              lg: '580px',
+              lg: '320px',
             },
             maxWidth: {
               xs: '100%',

package/src/pages/admin/payments/payouts/detail.tsx

@@ -196,7 +196,7 @@ export default function PayoutDetail(props: { id: string }) {
             width: {
               xs: '100%',
               md: '100%',
-              lg: '580px',
+              lg: '320px',
             },
             maxWidth: {
               xs: '100%',

package/src/pages/admin/payments/refunds/detail.tsx

@@ -198,7 +198,7 @@ export default function RefundDetail(props: { id: string }) {
             width: {
               xs: '100%',
               md: '100%',
-              lg: '580px',
+              lg: '320px',
             },
             maxWidth: {
               xs: '100%',

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

@@ -11,6 +11,7 @@ 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 AfterPay from '../../../../components/payment-link/after-pay';
 import BeforePay from '../../../../components/payment-link/before-pay';
@@ -30,6 +31,7 @@ export default function CreatePaymentLink() {
   const [stashed, setStashed] = useState(0);
   const { settings } = usePaymentContext();
   const fullScreenRef = useRef(null);
+  const [errors, triggerError] = useSetState({});
 
   const methods = useForm<PaymentLink>({
     shouldUnregister: false,
@@ -92,7 +94,11 @@ export default function CreatePaymentLink() {
   }, [JSON.stringify(changes)]);
 
   const tabs = [
-    { label: t('admin.paymentLink.beforePay'), value: 'beforePay', component: BeforePay },
+    {
+      label: t('admin.paymentLink.beforePay'),
+      value: 'beforePay',
+      component: BeforePay,
+    },
     { label: t('admin.paymentLink.afterPay'), value: 'afterPay', component: AfterPay },
   ];
   const TabComponent = tabs.find((x) => x.value === current)?.component || BeforePay;
@@ -112,6 +118,9 @@ export default function CreatePaymentLink() {
       return;
     }
 
+    if (Object.values(errors).some((v) => v)) {
+      return;
+    }
     api
       .post('/api/payment-links', data)
       .then(() => {
@@ -152,7 +161,7 @@ export default function CreatePaymentLink() {
               scrollButtons="auto"
             />
             <ProductsProvider>
-              <TabComponent />
+              <TabComponent triggerError={triggerError} />
             </ProductsProvider>
           </Stack>
           <Stack flex={1} sx={{ maxWidth: 680 }}>

package/src/pages/admin/products/links/detail.tsx

@@ -206,7 +206,7 @@ export default function PaymentLinkDetail(props: { id: string }) {
               width: {
                 xs: '100%',
                 md: '100%',
-                lg: '580px',
+                lg: '320px',
               },
               maxWidth: {
                 xs: '100%',

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/prices/detail.tsx

@@ -194,7 +194,7 @@ export default function PriceDetail(props: { id: string }) {
             width: {
               xs: '100%',
               md: '100%',
-              lg: '580px',
+              lg: '320px',
             },
             maxWidth: {
               xs: '100%',

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>

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

@@ -193,7 +193,7 @@ export default function PricingTableDetail(props: { id: string }) {
               width: {
                 xs: '100%',
                 md: '100%',
-                lg: '580px',
+                lg: '320px',
               },
               maxWidth: {
                 xs: '100%',

package/src/pages/admin/products/products/detail.tsx

@@ -228,7 +228,7 @@ export default function ProductDetail(props: { id: string }) {
             width: {
               xs: '100%',
               md: '100%',
-              lg: '580px',
+              lg: '320px',
             },
             maxWidth: {
               xs: '100%',

package/src/pages/customer/index.tsx

@@ -187,6 +187,8 @@ export default function CustomerHome() {
       <Box className="section-body">
         <CurrentSubscriptions
           id={data.id}
+          onlyActive={state.onlyActive}
+          changeActive={(v) => setState({ onlyActive: v })}
           status={state.onlyActive ? 'active,trialing' : 'active,trialing,paused,past_due,canceled'}
           style={{
             cursor: 'pointer',
@@ -203,7 +205,7 @@ export default function CustomerHome() {
   const SummaryCard = (
     <Box className="base-card section section-summary">
       <Box className="section-header">
-        <Typography variant="h3">{t('admin.customer.summary.balance')}</Typography>
+        <Typography variant="h3">{t('admin.customer.summary.stats')}</Typography>
         <FormControl
           sx={{
             '.MuiInputBase-root': {
@@ -222,31 +224,41 @@ export default function CustomerHome() {
             inputProps={{ 'aria-label': 'Without label' }}>
             {currencies.map((c) => (
               <MenuItem key={c.id} value={c.id}>
-                {c.symbol}
+                <Box alignItems="center" display="flex" gap={1}>
+                  <Avatar src={c?.logo} alt={c?.name} sx={{ width: 18, height: 18 }} />
+                  <Typography
+                    variant="h5"
+                    component="div"
+                    sx={{ fontSize: '16px', color: 'text.primary', fontWeight: '500' }}>
+                    {c?.name}
+                  </Typography>
+                  <Typography sx={{ fontSize: 12 }} color="text.lighter">
+                    {c?.symbol}
+                  </Typography>
+                </Box>
+                {/* {c.symbol} */}
               </MenuItem>
             ))}
           </Select>
         </FormControl>
       </Box>
-      <Box alignItems="center" display="flex" gap={1}>
-        <Avatar src={currency?.logo} alt={currency?.name} sx={{ width: 18, height: 18 }} />
-        <Typography variant="h5" component="div" sx={{ fontSize: '16px', color: 'text.primary', fontWeight: '500' }}>
-          {currency?.name}
-        </Typography>
-        <Typography sx={{ fontSize: 12 }} color="text.lighter">
-          {currency?.symbol}
-        </Typography>
-      </Box>
-      <Typography variant="h3" color="text.primary" gutterBottom>
-        {formatBNStr(data.summary.token?.[currency?.id], currency.decimal, 6, false)}
-      </Typography>
       <Stack
         className="section-body"
         sx={{
           display: 'grid',
           gridTemplateColumns: '1fr 1fr',
           gap: 2,
+          mt: 1.5,
         }}>
+        <CurrencyCard
+          label={t('admin.customer.summary.balance')}
+          data={data.summary.token || {}}
+          currency={currency}
+          sx={{
+            background: 'var(--tags-tag-orange-bg, #B7FEE3)',
+            color: 'var(--tags-tag-orange-text, #007C52)',
+          }}
+        />
         <CurrencyCard
           label={t('admin.customer.summary.spent')}
           data={data.summary.paid || {}}

package/src/pages/customer/invoice/detail.tsx

@@ -285,7 +285,7 @@ export default function CustomerInvoiceDetail() {
       <Divider />
       <Box className="section">
         <Typography variant="h3" mb={1.5} className="section-header">
-          {t('payment.customer.specifics')}
+          {t('payment.customer.products')}
         </Typography>
         <InvoiceTable invoice={data} simple />
       </Box>

package/src/pages/customer/refund/list.tsx

@@ -66,6 +66,8 @@ const RefundTable = memo(({ invoice_id }: Props) => {
     {
       label: t('common.amount'),
       name: 'id',
+      width: 80,
+      align: 'right',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TRefundExpanded;

package/src/pages/home.tsx

@@ -17,7 +17,7 @@ function Home() {
       />
       <Stack alignItems="center" justifyContent="center" sx={{ height: '60vh', width: '100vw' }}>
         <Stack maxWidth="sm" direction="column" alignItems="center" spacing={3}>
-          <Avatar src={window.blocklet.appLogo} sx={{ width: 80, height: 80 }} />
+          <Avatar src={window.blocklet.appLogo} sx={{ width: 80, height: 80 }} variant="square" />
           <Stack direction="column" alignItems="center" spacing={1}>
             <Typography variant="h4">Payment Kit</Typography>
             <Typography variant="h5" color="text.secondary" fontWeight="normal">