payment-kit 1.13.230 → 1.13.232

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.230",
+  "version": "1.13.232",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev --open",
     "eject": "vite eject",
@@ -51,7 +51,7 @@
     "@arcblock/ux": "^2.9.68",
     "@arcblock/validator": "^1.18.115",
     "@blocklet/logger": "1.16.25",
-    "@blocklet/payment-react": "1.13.230",
+    "@blocklet/payment-react": "1.13.232",
     "@blocklet/sdk": "1.16.25",
     "@blocklet/ui-react": "^2.9.68",
     "@blocklet/uploader": "^0.0.76",
@@ -116,7 +116,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.25",
     "@arcblock/eslint-config-ts": "^0.3.0",
-    "@blocklet/payment-types": "1.13.230",
+    "@blocklet/payment-types": "1.13.232",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -155,5 +155,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "c7209ae95049960f39b4e9eb65714626fb56ceab"
+  "gitHead": "250cff1f7b3b483e089a5f19587e58556d7ef063"
 }

package/src/components/layout/admin.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { PaymentProvider } from '@blocklet/payment-react';
 import Dashboard from '@blocklet/ui-react/lib/Dashboard';
 import { styled } from '@mui/system';
 import { useEffect } from 'react';
@@ -52,7 +53,7 @@ const Root = styled(Dashboard)`
 
 export default function Layout(props: any) {
   const { t } = useLocaleContext();
-  const { session, events } = useSessionContext();
+  const { session, connectApi, events } = useSessionContext();
 
   useEffect(() => {
     events.once('logout', () => {
@@ -68,7 +69,11 @@ export default function Layout(props: any) {
   }, [session.initialized]);
 
   if (session.user) {
-    return <Root {...props} footerProps={{ className: 'dashboard-footer' }} />;
+    return (
+      <PaymentProvider session={session} connect={connectApi}>
+        <Root {...props} footerProps={{ className: 'dashboard-footer' }} />
+      </PaymentProvider>
+    );
   }
 
   return t('common.redirecting');

package/src/pages/admin/index.tsx

@@ -1,5 +1,5 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { PaymentProvider, Switch, usePaymentContext } from '@blocklet/payment-react';
+import { Switch, usePaymentContext } from '@blocklet/payment-react';
 import { Box, Chip, Stack } from '@mui/material';
 import React, { isValidElement, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -72,7 +72,7 @@ function Admin() {
   const group2 = [{ label: t('admin.developers'), value: 'developers' }];
 
   return (
-    <Layout>
+    <>
       <ProgressBar pending={isPending} />
       <Stack
         direction="row"
@@ -103,13 +103,13 @@ function Admin() {
         </Stack>
       </Stack>
       <div className="page-content">{isValidElement(TabComponent) ? TabComponent : <TabComponent />}</div>
-    </Layout>
+    </>
   );
 }
 
 export default function WrappedAdmin() {
   const navigate = useNavigate();
-  const { session, connectApi } = useSessionContext();
+  const { session } = useSessionContext();
 
   useEffect(() => {
     if (session.user && ['owner', 'admin'].includes(session.user.role) === false) {
@@ -118,8 +118,8 @@ export default function WrappedAdmin() {
   }, [session.user]);
 
   return (
-    <PaymentProvider session={session} connect={connectApi}>
+    <Layout>
       <Admin />
-    </PaymentProvider>
+    </Layout>
   );
 }

package/src/pages/checkout/index.tsx

@@ -1,5 +1,4 @@
 import { PaymentProvider } from '@blocklet/payment-react';
-import { Box } from '@mui/material';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -16,11 +15,7 @@ function Checkout() {
   // @ts-ignore
   const TabComponent = pages[action];
 
-  return (
-    <Box>
-      <TabComponent id={id} />
-    </Box>
-  );
+  return <TabComponent id={id} />;
 }
 
 export default function WrappedAdmin() {

package/src/pages/customer/index.tsx

@@ -1,7 +1,7 @@
 import DID from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { CustomerInvoiceList, PaymentProvider, formatError, getPrefix } from '@blocklet/payment-react';
+import { CustomerInvoiceList, formatError, getPrefix } from '@blocklet/payment-react';
 import type { GroupedBN, TCustomerExpanded } from '@blocklet/payment-types';
 import { Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Grid, Stack, Tooltip } from '@mui/material';
@@ -31,7 +31,7 @@ const fetchData = (): Promise<Result> => {
 
 export default function CustomerHome() {
   const { t } = useLocaleContext();
-  const { events, session, connectApi } = useSessionContext();
+  const { events } = useSessionContext();
   const [state, setState] = useSetState({ editing: false, loading: false });
   const navigate = useNavigate();
   const { isPending, startTransition } = useTransitionContext();
@@ -174,20 +174,18 @@ export default function CustomerHome() {
             </Box>
             <Box className="section">
               <SectionHeader title={t('payment.customer.summary')} />
-              <PaymentProvider session={session} connect={connectApi}>
-                <Stack
-                  className="section-body"
-                  direction="column"
-                  spacing={2}
-                  justifyContent="flex-start"
-                  sx={{ width: '100%' }}>
-                  <InfoMetric label={t('admin.customer.spent')} value={<BalanceList data={data.summary.paid} />} />
-                  <InfoMetric label={t('admin.customer.stake')} value={<BalanceList data={data.summary.stake} />} />
-                  <InfoMetric label={t('admin.customer.token')} value={<BalanceList data={data.summary.token} />} />
-                  <InfoMetric label={t('admin.customer.due')} value={<BalanceList data={data.summary.due} />} />
-                  <InfoMetric label={t('admin.customer.refund')} value={<BalanceList data={data.summary.refunded} />} />
-                </Stack>
-              </PaymentProvider>
+              <Stack
+                className="section-body"
+                direction="column"
+                spacing={2}
+                justifyContent="flex-start"
+                sx={{ width: '100%' }}>
+                <InfoMetric label={t('admin.customer.spent')} value={<BalanceList data={data.summary.paid} />} />
+                <InfoMetric label={t('admin.customer.stake')} value={<BalanceList data={data.summary.stake} />} />
+                <InfoMetric label={t('admin.customer.token')} value={<BalanceList data={data.summary.token} />} />
+                <InfoMetric label={t('admin.customer.due')} value={<BalanceList data={data.summary.due} />} />
+                <InfoMetric label={t('admin.customer.refund')} value={<BalanceList data={data.summary.refunded} />} />
+              </Stack>
             </Box>
           </Root>
         </Grid>

package/src/pages/customer/invoice/past-due.tsx

@@ -1,12 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import {
-  CustomerInvoiceList,
-  PaymentProvider,
-  formatError,
-  getPrefix,
-  usePaymentContext,
-} from '@blocklet/payment-react';
+import { CustomerInvoiceList, formatError, getPrefix, usePaymentContext } from '@blocklet/payment-react';
 import type { TCustomerExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
@@ -24,7 +18,7 @@ const fetchData = (): Promise<TCustomerExpanded> => {
   return api.get('/api/customers/me').then((res) => res.data);
 };
 
-export function CustomerInvoicePastDue() {
+export default function CustomerInvoicePastDue() {
   const { t } = useLocaleContext();
   const { events } = useSessionContext();
   const { connect } = usePaymentContext();
@@ -126,13 +120,3 @@ const Root = styled(Stack)`
     text-decoration: underline;
   }
 `;
-
-export default function PastDueWrapper() {
-  const { session, connectApi } = useSessionContext();
-
-  return (
-    <PaymentProvider session={session} connect={connectApi}>
-      <CustomerInvoicePastDue />
-    </PaymentProvider>
-  );
-}

package/src/pages/customer/subscription/change-payment.tsx

@@ -6,7 +6,6 @@ import Toast from '@arcblock/ux/lib/Toast';
 import {
   AddressForm,
   CurrencySelector,
-  PaymentProvider,
   PaymentSummary,
   StripeForm,
   api,
@@ -33,7 +32,6 @@ import { joinURL } from 'ufo';
 
 import SectionHeader from '../../../components/section/header';
 import SubscriptionDescription from '../../../components/subscription/description';
-import { useSessionContext } from '../../../contexts/session';
 
 const fetchData = async (id: string): Promise<{ subscription: TSubscriptionExpanded; customer: TCustomer }> => {
   const [subscription, customer] = await Promise.all([
@@ -311,7 +309,6 @@ export default function DataWrapper() {
   const { t } = useLocaleContext();
   const { id } = useParams() as { id: string };
   const { loading, error, data, runAsync } = useRequest(() => fetchData(id));
-  const { session, connectApi } = useSessionContext();
 
   if (error) {
     return <Alert severity="error">{error.message}</Alert>;
@@ -325,11 +322,7 @@ export default function DataWrapper() {
     return <Alert severity="error">{t('payment.customer.changePlan.subscriptionNotFound')}</Alert>;
   }
 
-  return (
-    <PaymentProvider session={session} connect={connectApi}>
-      <FormWrapper subscription={data.subscription} customer={data.customer} onComplete={runAsync} />
-    </PaymentProvider>
-  );
+  return <FormWrapper subscription={data.subscription} customer={data.customer} onComplete={runAsync} />;
 }
 
 const Root = styled(Stack)`