payment-kit 1.13.152 → 1.13.153

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.152",
+  "version": "1.13.153",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev --open",
     "eject": "vite eject",
@@ -50,7 +50,7 @@
     "@arcblock/jwt": "^1.18.110",
     "@arcblock/ux": "^2.9.29",
     "@blocklet/logger": "1.16.23",
-    "@blocklet/payment-react": "1.13.152",
+    "@blocklet/payment-react": "1.13.153",
     "@blocklet/sdk": "1.16.23",
     "@blocklet/ui-react": "^2.9.29",
     "@blocklet/uploader": "^0.0.73",
@@ -110,7 +110,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.23",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@blocklet/payment-types": "1.13.152",
+    "@blocklet/payment-types": "1.13.153",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -149,5 +149,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "5d6d2b6a8c0422e1055ddcec4e3179fd734cdbc5"
+  "gitHead": "db16f61414e8f72da55dfa2faf9c17d79fcb6655"
 }

package/src/app.tsx

@@ -20,7 +20,7 @@ const HomePage = React.lazy(() => import('./pages/home'));
 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 CustomerInvoiceDetail = React.lazy(() => import('./pages/customer/invoice/detail'));
 const CustomerInvoicePastDue = React.lazy(() => import('./pages/customer/invoice/past-due'));
 const CustomerSubscriptionDetail = React.lazy(() => import('./pages/customer/subscription/detail'));
 const CustomerSubscriptionUpdate = React.lazy(() => import('./pages/customer/subscription/update'));
@@ -94,7 +94,7 @@ function App() {
                 path="/customer/invoice/:id"
                 element={
                   <Layout>
-                    <CustomerInvoice />
+                    <CustomerInvoiceDetail />
                   </Layout>
                 }
               />

package/src/pages/customer/{invoice.tsx → invoice/detail.tsx}

@@ -9,12 +9,12 @@ import { useRequest, useSetState } from 'ahooks';
 import { useEffect } from 'react';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
 
-import Currency from '../../components/currency';
-import InfoRow from '../../components/info-row';
-import InvoiceTable from '../../components/invoice/table';
-import SectionHeader from '../../components/section/header';
-import { useSessionContext } from '../../contexts/session';
-import CustomerRefundList from './refund/list';
+import Currency from '../../../components/currency';
+import InfoRow from '../../../components/info-row';
+import InvoiceTable from '../../../components/invoice/table';
+import SectionHeader from '../../../components/section/header';
+import { useSessionContext } from '../../../contexts/session';
+import CustomerRefundList from '../refund/list';
 
 const fetchData = (id: string): Promise<TInvoiceExpanded> => {
   return api.get(`/api/invoices/${id}`).then((res) => res.data);
@@ -101,33 +101,39 @@ export default function CustomerInvoiceDetail() {
           </Stack>
         </Link>
         <Stack direction="row" justifyContent="flex-end" alignItems="center">
-          {['open', 'uncollectible'].includes(data.status) && (
-            <Button variant="contained" color="primary" disabled={state.paying} onClick={onPay}>
-              {t('payment.customer.invoice.pay')}
-            </Button>
-          )}
           {['open', 'paid', 'uncollectible'].includes(data.status) && (
             <Button
               variant="contained"
-              color="primary"
+              color="secondary"
               size="small"
               disabled={state.downloading}
               onClick={() => setState({ downloading: true })}>
               {t('payment.customer.invoice.download')}
             </Button>
           )}
+          {['open', 'uncollectible'].includes(data.status) && (
+            <Button
+              variant="contained"
+              color="primary"
+              size="small"
+              disabled={state.paying}
+              sx={{ mr: 1 }}
+              onClick={onPay}>
+              {t('payment.customer.invoice.pay')}
+            </Button>
+          )}
         </Stack>
       </Stack>
       <Box>
         <SectionHeader title={t('payment.customer.invoice.summary')} />
         <Stack sx={{ mt: 1, display: 'grid', gridTemplateColumns: '50% 50%' }}>
           <InfoRow label={t('admin.invoice.number')} value={data.number} />
-          <InfoRow label={t('admin.invoice.from')} value={data.statement_descriptor || blocklet.appName} />
-          <InfoRow label={t('admin.invoice.customer')} value={data.customer.name} />
           <InfoRow
             label={t('common.status')}
             value={<Status label={data.status} color={getInvoiceStatusColor(data.status)} />}
           />
+          <InfoRow label={t('admin.invoice.from')} value={data.statement_descriptor || blocklet.appName} />
+          <InfoRow label={t('admin.invoice.customer')} value={data.customer.name} />
           {data.period_start > 0 && data.period_end > 0 && (
             <InfoRow
               label={t('admin.subscription.currentPeriod')}

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

@@ -50,7 +50,7 @@ export default function CustomerRefundList({ invoice_id }: Props) {
   }
 
   if (data && data.list.length === 0) {
-    return <Typography color="text.secondary">{t('payment.customer.payment.empty')}</Typography>;
+    return <Typography color="text.secondary">{t('payment.customer.refund.empty')}</Typography>;
   }
 
   const hasMore = data && data.list.length < data.count;