payment-kit 1.13.229 → 1.13.231

package/api/src/routes/payment-methods.ts

@@ -174,7 +174,7 @@ router.get('/', auth, async (req, res) => {
   const list = await PaymentMethod.findAll({
     where,
     order: [['created_at', 'ASC']],
-    include: [{ model: PaymentCurrency, as: 'payment_currencies' }],
+    include: [{ model: PaymentCurrency, as: 'payment_currencies', order: [['created_at', 'ASC']] }],
   });
 
   res.json(list);

package/api/src/routes/settings.ts

@@ -8,13 +8,15 @@ import { PaymentMethod } from '../store/models/payment-method';
 const router = Router();
 
 router.get('/', async (req, res) => {
-  const attributes = ['id', 'name', 'symbol', 'decimal', 'logo'];
+  const attributes = ['id', 'name', 'symbol', 'decimal', 'logo', 'payment_method_id'];
   const where: WhereOptions<PaymentMethod> = { livemode: req.livemode, active: true };
 
   const methods = await PaymentMethod.findAll({
     where,
     order: [['created_at', 'ASC']],
-    include: [{ model: PaymentCurrency, as: 'payment_currencies', where: { active: true } }],
+    include: [
+      { model: PaymentCurrency, as: 'payment_currencies', where: { active: true }, order: [['created_at', 'ASC']] },
+    ],
   });
 
   methods.forEach((method) => {
@@ -23,7 +25,9 @@ router.get('/', async (req, res) => {
   });
 
   res.json({
-    paymentMethods: methods.map((x) => pick(x, ['id', 'name', 'type', 'logo', 'payment_currencies'])),
+    paymentMethods: methods.map((x) =>
+      pick(x, ['id', 'name', 'type', 'logo', 'payment_currencies', 'default_currency_id'])
+    ),
     baseCurrency: await PaymentCurrency.findOne({
       where: { is_base_currency: true, livemode: req.livemode },
       attributes,

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.229",
+  "version": "1.13.231",
   "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.229",
+    "@blocklet/payment-react": "1.13.231",
     "@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.229",
+    "@blocklet/payment-types": "1.13.231",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -155,5 +155,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "7def3178288871dff00ba89e16c5adcec6d4dfc9"
+  "gitHead": "256dbf9b77d59252cbb5db1832544ce5c7dfa4f4"
 }

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

@@ -152,13 +152,7 @@ export default function InvoiceDetail(props: { id: string }) {
           {!!data.paymentIntent.payment_details?.ethereum && (
             <InfoRow
               label={t('common.txGas')}
-              value={
-                <TxGas
-                  details={data.paymentIntent.payment_details as any}
-                  method={data.paymentMethod}
-                  currency={data.paymentCurrency}
-                />
-              }
+              value={<TxGas details={data.paymentIntent.payment_details as any} method={data.paymentMethod} />}
             />
           )}
           {data.paymentIntent && data.paymentIntent.payment_details && (

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';
@@ -109,7 +109,7 @@ function Admin() {
 
 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) {
@@ -117,9 +117,5 @@ export default function WrappedAdmin() {
     }
   }, [session.user]);
 
-  return (
-    <PaymentProvider session={session} connect={connectApi}>
-      <Admin />
-    </PaymentProvider>
-  );
+  return <Admin />;
 }

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

@@ -158,13 +158,7 @@ export default function PaymentIntentDetail(props: { id: string }) {
           {!!data.payment_details?.ethereum && (
             <InfoRow
               label={t('common.txGas')}
-              value={
-                <TxGas
-                  details={data.payment_details as any}
-                  method={data.paymentMethod}
-                  currency={data.paymentCurrency}
-                />
-              }
+              value={<TxGas details={data.payment_details as any} method={data.paymentMethod} />}
             />
           )}
           <InfoRow

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

@@ -155,13 +155,7 @@ export default function PayoutDetail(props: { id: string }) {
           {!!data.payment_details?.ethereum && (
             <InfoRow
               label={t('common.txGas')}
-              value={
-                <TxGas
-                  details={data.payment_details as any}
-                  method={data.paymentMethod}
-                  currency={data.paymentCurrency}
-                />
-              }
+              value={<TxGas details={data.payment_details as any} method={data.paymentMethod} />}
             />
           )}
           <InfoRow

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

@@ -155,13 +155,7 @@ export default function RefundDetail(props: { id: string }) {
             {!!data.payment_details?.ethereum && (
               <InfoRow
                 label={t('common.txGas')}
-                value={
-                  <TxGas
-                    details={data.payment_details as any}
-                    method={data.paymentMethod}
-                    currency={data.paymentCurrency}
-                  />
-                }
+                value={<TxGas details={data.payment_details as any} method={data.paymentMethod} />}
               />
             )}
             <InfoRow

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

@@ -152,13 +152,7 @@ export default function CustomerInvoiceDetail() {
           {!!data.paymentIntent.payment_details?.ethereum && (
             <InfoRow
               label={t('common.txGas')}
-              value={
-                <TxGas
-                  details={data.paymentIntent.payment_details as any}
-                  method={data.paymentMethod}
-                  currency={data.paymentCurrency}
-                />
-              }
+              value={<TxGas details={data.paymentIntent.payment_details as any} method={data.paymentMethod} />}
             />
           )}
           {data.paymentIntent && data.paymentIntent.payment_details && (

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)`