@blocklet/payment-react 1.15.1 → 1.15.3

package/es/contexts/payment.js

@@ -6,9 +6,24 @@ import api from "../libs/api.js";
 import { getPrefix } from "../libs/util.js";
 const PaymentContext = createContext({ api });
 const { Provider, Consumer } = PaymentContext;
-const getSettings = async () => {
-  const { data } = await api.get("/api/settings");
-  return data;
+let settingsPromise = null;
+const getSettings = () => {
+  const cacheKey = `payment-settings-${window.location.pathname}`;
+  const cachedData = sessionStorage.getItem(cacheKey);
+  if (cachedData) {
+    return JSON.parse(cachedData);
+  }
+  if (!settingsPromise) {
+    settingsPromise = api.get("/api/settings").then(({ data }) => {
+      sessionStorage.setItem(cacheKey, JSON.stringify(data));
+      return data;
+    }).catch((error) => {
+      throw error;
+    }).finally(() => {
+      settingsPromise = null;
+    });
+  }
+  return settingsPromise;
 };
 const getCurrency = (currencyId, methods) => {
   const currencies = methods.reduce((acc, x) => acc.concat(x.payment_currencies), []);
@@ -40,8 +55,8 @@ function PaymentProvider({ session, connect, children, baseUrl }) {
         prefix,
         livemode: !!livemode,
         settings: data,
-        getCurrency: (currencyId) => getCurrency(currencyId, data.paymentMethods),
-        getMethod: (methodId) => getMethod(methodId, data.paymentMethods),
+        getCurrency: (currencyId) => getCurrency(currencyId, data?.paymentMethods || []),
+        getMethod: (methodId) => getMethod(methodId, data?.paymentMethods || []),
         refresh: run,
         setLivemode,
         api,

package/es/libs/theme.d.ts

@@ -1 +1 @@
-export default function create(settings?: any): any;
+export default function create(settings?: any): import("@mui/material").Theme;

package/es/payment/product-donation.js

@@ -117,7 +117,10 @@ export default function ProductDonation({
         margin: "none",
         fullWidth: true,
         error: !!state.error,
-        helperText: state.error
+        helperText: state.error,
+        sx: {
+          mt: preset !== "0" ? 0 : 1
+        }
       }
     )
   ] });

package/lib/contexts/payment.js

@@ -22,11 +22,26 @@ const {
   Consumer
 } = PaymentContext;
 exports.SettingsConsumer = Consumer;
-const getSettings = async () => {
-  const {
-    data
-  } = await _api.default.get("/api/settings");
-  return data;
+let settingsPromise = null;
+const getSettings = () => {
+  const cacheKey = `payment-settings-${window.location.pathname}`;
+  const cachedData = sessionStorage.getItem(cacheKey);
+  if (cachedData) {
+    return JSON.parse(cachedData);
+  }
+  if (!settingsPromise) {
+    settingsPromise = _api.default.get("/api/settings").then(({
+      data
+    }) => {
+      sessionStorage.setItem(cacheKey, JSON.stringify(data));
+      return data;
+    }).catch(error => {
+      throw error;
+    }).finally(() => {
+      settingsPromise = null;
+    });
+  }
+  return settingsPromise;
 };
 const getCurrency = (currencyId, methods) => {
   const currencies = methods.reduce((acc, x) => acc.concat(x.payment_currencies), []);
@@ -71,8 +86,8 @@ function PaymentProvider({
       prefix,
       livemode: !!livemode,
       settings: data,
-      getCurrency: currencyId => getCurrency(currencyId, data.paymentMethods),
-      getMethod: methodId => getMethod(methodId, data.paymentMethods),
+      getCurrency: currencyId => getCurrency(currencyId, data?.paymentMethods || []),
+      getMethod: methodId => getMethod(methodId, data?.paymentMethods || []),
       refresh: run,
       setLivemode,
       api: _api.default,

package/lib/libs/theme.d.ts

@@ -1 +1 @@
-export default function create(settings?: any): any;
+export default function create(settings?: any): import("@mui/material").Theme;

package/lib/payment/product-donation.js

@@ -187,7 +187,10 @@ function ProductDonation({
       margin: "none",
       fullWidth: true,
       error: !!state.error,
-      helperText: state.error
+      helperText: state.error,
+      sx: {
+        mt: preset !== "0" ? 0 : 1
+      }
     })]
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.15.1",
+  "version": "1.15.3",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.10.25",
-    "@arcblock/ux": "2.10.24",
+    "@arcblock/did-connect": "^2.10.30",
+    "@arcblock/ux": "^2.10.30",
     "@arcblock/ws": "^1.18.135",
-    "@blocklet/ui-react": "^2.10.25",
+    "@blocklet/ui-react": "^2.10.30",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.15.1",
+    "@blocklet/payment-types": "1.15.3",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -122,5 +122,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "ff06b03c0e25d6c4d9ea8f5495592c4f5c20829b"
+  "gitHead": "e9841f27db3993526f7871e2a0118d89c6958470"
 }

package/src/components/confirm.tsx

@@ -32,7 +32,7 @@ export default function ConfirmDialog({
       onCancel={onCancel}
       confirmButton={{
         text: confirm || t('common.confirm'),
-        props: { color, size: 'small', variant: 'contained', disabled: !!loading },
+        props: { color: color as any, size: 'small', variant: 'contained', disabled: !!loading },
       }}
       cancelButton={{ text: cancel || t('common.cancel'), props: { color: 'inherit', size: 'small' } }}
       showCancelButton={typeof cancel !== 'boolean' || !!cancel}>

package/src/contexts/payment.tsx

@@ -39,9 +39,28 @@ export type PaymentContextProps = {
 const PaymentContext = createContext<PaymentContextType>({ api });
 const { Provider, Consumer } = PaymentContext;
 
-const getSettings = async () => {
-  const { data } = await api.get('/api/settings');
-  return data;
+let settingsPromise: Promise<any> | null = null;
+const getSettings = () => {
+  const cacheKey = `payment-settings-${window.location.pathname}`;
+  const cachedData = sessionStorage.getItem(cacheKey);
+  if (cachedData) {
+    return JSON.parse(cachedData);
+  }
+  if (!settingsPromise) {
+    settingsPromise = api
+      .get('/api/settings')
+      .then(({ data }) => {
+        sessionStorage.setItem(cacheKey, JSON.stringify(data));
+        return data;
+      })
+      .catch((error) => {
+        throw error;
+      })
+      .finally(() => {
+        settingsPromise = null;
+      });
+  }
+  return settingsPromise;
 };
 
 const getCurrency = (currencyId: string, methods: TPaymentMethodExpanded[]) => {
@@ -79,9 +98,9 @@ function PaymentProvider({ session, connect, children, baseUrl }: PaymentContext
         connect,
         prefix,
         livemode: !!livemode,
-        settings: data,
-        getCurrency: (currencyId: string) => getCurrency(currencyId, data.paymentMethods),
-        getMethod: (methodId: string) => getMethod(methodId, data.paymentMethods),
+        settings: data as Settings,
+        getCurrency: (currencyId: string) => getCurrency(currencyId, (data as Settings)?.paymentMethods || []),
+        getMethod: (methodId: string) => getMethod(methodId, (data as Settings)?.paymentMethods || []),
         refresh: run,
         setLivemode,
         api,

package/src/payment/product-donation.tsx

@@ -132,6 +132,9 @@ export default function ProductDonation({
           fullWidth
           error={!!state.error}
           helperText={state.error}
+          sx={{
+            mt: preset !== '0' ? 0 : 1,
+          }}
         />
       )}
     </Box>

package/src/theme/index.tsx

@@ -1,4 +1,4 @@
-import { type ThemeOptions, ThemeProvider, useTheme } from '@mui/material/styles';
+import { type Theme, ThemeProvider, useTheme } from '@mui/material/styles';
 import { create } from '@arcblock/ux/lib/Theme';
 import { cloneDeep, merge } from 'lodash';
 import { Box, CssBaseline } from '@mui/material';
@@ -26,7 +26,7 @@ export function PaymentThemeProvider({
   const parentTheme = useTheme();
   const rootStyle = getComputedStyle(document.documentElement);
 
-  const themeOverrides: Partial<ThemeOptions> = {
+  const themeOverrides: Partial<Theme> = {
     shape: {
       borderRadius: 8,
     },
@@ -242,6 +242,7 @@ export function PaymentThemeProvider({
       },
     },
   };
+
   const mergeTheme = create(
     merge(
       cloneDeep({