@blocklet/payment-react 1.15.4 → 1.15.5

package/es/payment/product-card.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Avatar, Stack, Typography } from "@mui/material";
+import { Avatar, Box, Stack, Typography } from "@mui/material";
 export default function ProductCard({ size, variant, name, logo, description, extra }) {
   const s = { width: size, height: size };
   return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, flex: 2, sx: { width: "100%" }, children: [
@@ -39,7 +39,7 @@ export default function ProductCard({ size, variant, name, logo, description, ex
               children: description
             }
           ),
-          extra && /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { fontSize: "0.85rem" }, color: "text.lighter", children: extra })
+          extra && /* @__PURE__ */ jsx(Box, { sx: { fontSize: "0.85rem" }, color: "text.lighter", children: extra })
         ]
       }
     )

package/lib/checkout/donate.d.ts

@@ -26,7 +26,7 @@ declare function CheckoutDonate(props: DonateProps): import("react").JSX.Element
 declare namespace CheckoutDonate {
     var defaultProps: {
         theme: string;
-        livemode: boolean;
+        livemode: undefined;
         timeout: number;
         mode: string;
         inlineOptions: {

package/lib/checkout/donate.js

@@ -17,6 +17,7 @@ var _api = _interopRequireDefault(require("../libs/api"));
 var _util = require("../libs/util");
 var _form = _interopRequireDefault(require("./form"));
 var _theme = require("../theme");
+var _payment = require("../contexts/payment");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const donationCache = {};
 const createOrUpdateDonation = (settings, livemode = true) => {
@@ -249,7 +250,7 @@ function SupporterSimple({
     })]
   });
 }
-function useDonation(settings, livemode = true, mode = "default") {
+function useDonation(settings, livemode, mode = "default") {
   const [state, setState] = (0, _ahooks.useSetState)({
     open: false,
     supporterLoaded: false,
@@ -288,7 +289,7 @@ function useDonation(settings, livemode = true, mode = "default") {
 }
 function CheckoutDonateInner({
   settings,
-  livemode,
+  livemode = true,
   timeout,
   onPaid,
   onError,
@@ -474,35 +475,39 @@ function CheckoutDonateInner({
           onError,
           action: settings.appearance?.button?.text,
           mode: "inline",
-          theme
+          theme,
+          extraParams: {
+            livemode
+          }
         })
       })
     })]
   });
 }
 function CheckoutDonate(props) {
+  const {
+    livemode
+  } = (0, _payment.usePaymentContext)();
+  const content = /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutDonateInner, {
+    ...props,
+    livemode: props.livemode === void 0 ? livemode : props.livemode
+  });
   if (props.theme === "inherit") {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutDonateInner, {
-      ...props
-    });
+    return content;
   }
   if (props.theme && typeof props.theme === "object") {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
       theme: props.theme,
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutDonateInner, {
-        ...props
-      })
+      children: content
     });
   }
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
-    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutDonateInner, {
-      ...props
-    })
+    children: content
   });
 }
 CheckoutDonate.defaultProps = {
   theme: "default",
-  livemode: true,
+  livemode: void 0,
   timeout: 5e3,
   mode: "default",
   inlineOptions: {

package/lib/checkout/table.js

@@ -100,7 +100,18 @@ function CheckoutTableInner({
       return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "column",
         alignItems: "center",
-        p: 2.5,
+        sx: {
+          overflow: {
+            xs: "auto",
+            md: "hidden"
+          },
+          height: "100%",
+          pt: {
+            xs: 2.5,
+            md: 7.5
+          },
+          px: 2.5
+        },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_system.Box, {
           sx: {
             display: "flex",

package/lib/components/pricing-table.js

@@ -67,8 +67,19 @@ function PricingTable({
   const {
     settings: {
       paymentMethods = []
-    }
+    },
+    livemode,
+    setLivemode,
+    refresh
   } = (0, _payment.usePaymentContext)();
+  const isMobileSafariEnv = (0, _util2.isMobileSafari)();
+  (0, _react.useEffect)(() => {
+    if (table) {
+      if (livemode !== table.livemode) {
+        setLivemode(table.livemode);
+      }
+    }
+  }, [table, livemode, setLivemode, refresh]);
   const [currency, setCurrency] = (0, _react.useState)(table.currency || {});
   const {
     recurring,
@@ -152,6 +163,13 @@ function PricingTable({
       width: 100%;
       gap: 20px;
     }
+    .price-table-wrap {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
     @media (max-width: ${({
     theme
   }) => theme.breakpoints.values.sm}px) {
@@ -177,6 +195,15 @@ function PricingTable({
     }
   `;
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
+    sx: {
+      flex: 1,
+      overflow: {
+        xs: isMobileSafariEnv ? "visible" : "hidden",
+        md: "hidden"
+      },
+      display: "flex",
+      flexDirection: "column"
+    },
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "column",
       alignItems: alignItems === "center" ? "center" : "flex-start",
@@ -184,6 +211,11 @@ function PricingTable({
         gap: {
           xs: 3,
           sm: mode === "select" ? 3 : 5
+        },
+        height: "100%",
+        overflow: {
+          xs: "auto",
+          md: "hidden"
         }
       },
       children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -263,6 +295,11 @@ function PricingTable({
         direction: "row",
         gap: "20px",
         justifyContent: alignItems === "center" ? "center" : "flex-start",
+        sx: {
+          flex: "0 1 auto",
+          overflow: "auto",
+          pb: 2.5
+        },
         className: "price-table-wrap",
         children: productList?.map(x => {
           let action = x.subscription_data?.trial_period_days ? t("payment.checkout.try") : t("payment.checkout.subscription");
@@ -293,8 +330,10 @@ function PricingTable({
                 md: "320px"
               },
               maxWidth: "360px",
+              minWidth: "300px",
               padding: "20px",
-              position: "relative"
+              position: "relative",
+              height: "fit-content"
             },
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
               textAlign: "center",

package/lib/contexts/payment.js

@@ -24,13 +24,18 @@ const {
 exports.SettingsConsumer = Consumer;
 let settingsPromise = null;
 const getSettings = () => {
-  const cacheKey = `payment-settings-${window.location.pathname}`;
+  const livemode = localStorage.getItem("livemode") !== "false";
+  const cacheKey = `payment-settings-${window.location.pathname}-${livemode}`;
   const cachedData = sessionStorage.getItem(cacheKey);
   if (cachedData) {
     return JSON.parse(cachedData);
   }
   if (!settingsPromise) {
-    settingsPromise = _api.default.get("/api/settings").then(({
+    settingsPromise = _api.default.get("/api/settings", {
+      params: {
+        livemode
+      }
+    }).then(({
       data
     }) => {
       sessionStorage.setItem(cacheKey, JSON.stringify(data));
@@ -59,14 +64,16 @@ function PaymentProvider({
   if (baseUrl) {
     window.__PAYMENT_KIT_BASE_URL = baseUrl;
   }
+  const [livemode, setLivemode] = (0, _ahooks.useLocalStorageState)("livemode", {
+    defaultValue: true
+  });
   const {
     data,
     error,
     run,
     loading
-  } = (0, _ahooks.useRequest)(getSettings);
-  const [livemode, setLivemode] = (0, _ahooks.useLocalStorageState)("livemode", {
-    defaultValue: true
+  } = (0, _ahooks.useRequest)(getSettings, {
+    refreshDeps: [livemode]
   });
   const prefix = (0, _util.getPrefix)();
   const [payable, setPayable] = (0, _react.useState)(true);

package/lib/history/invoice/list.d.ts

@@ -10,6 +10,7 @@ type Props = {
     target?: string;
     action?: string;
     type?: 'list' | 'table';
+    onTableDataChange?: Function;
 };
 declare function CustomerInvoiceList(props: Props): JSX.Element;
 declare namespace CustomerInvoiceList {
@@ -24,6 +25,7 @@ declare namespace CustomerInvoiceList {
         target: string;
         action: string;
         type: string;
+        onTableDataChange: () => void;
     };
 }
 export default CustomerInvoiceList;

package/lib/history/invoice/list.js

@@ -67,7 +67,8 @@ const InvoiceTable = _react.default.memo(props => {
     currency_id,
     subscription_id,
     include_staking,
-    include_recovered_from
+    include_recovered_from,
+    onTableDataChange
   } = props;
   const listKey = "invoice-table";
   const {
@@ -83,7 +84,8 @@ const InvoiceTable = _react.default.memo(props => {
     data = {
       list: [],
       count: 0
-    }
+    },
+    refresh
   } = (0, _ahooks.useRequest)(() => fetchData({
     ...search,
     status,
@@ -96,6 +98,24 @@ const InvoiceTable = _react.default.memo(props => {
   }), {
     refreshDeps: [search]
   });
+  (0, _react.useEffect)(() => {
+    if (onTableDataChange) {
+      onTableDataChange(data);
+    }
+  }, [data]);
+  const subscription = (0, _subscription.useSubscription)("events");
+  (0, _react.useEffect)(() => {
+    if (subscription && customer_id) {
+      subscription.on("invoice.paid", ({
+        response
+      }) => {
+        if (response.customer_id === customer_id) {
+          _Toast.default.success(t("payment.customer.invoice.paySuccess"));
+          refresh();
+        }
+      });
+    }
+  }, [subscription]);
   const columns = [{
     label: t("common.amount"),
     name: "total",
@@ -270,7 +290,8 @@ const InvoiceList = _react.default.memo(props => {
     pageSize,
     target,
     action,
-    onPay
+    onPay,
+    onTableDataChange
   } = props;
   const size = pageSize || 10;
   const subscription = (0, _subscription.useSubscription)("events");
@@ -300,12 +321,18 @@ const InvoiceList = _react.default.memo(props => {
   }, {
     reloadDeps: [customer_id, subscription_id, status, include_staking, include_recovered_from]
   });
+  (0, _react.useEffect)(() => {
+    if (onTableDataChange) {
+      onTableDataChange(data);
+    }
+  }, [data]);
   (0, _react.useEffect)(() => {
     if (subscription && customer_id) {
       subscription.on("invoice.paid", async ({
         response
       }) => {
         if (response.customer_id === customer_id) {
+          _Toast.default.success(t("payment.customer.invoice.paySuccess"));
           await reloadAsync();
         }
       });
@@ -538,7 +565,8 @@ CustomerInvoiceList.defaultProps = {
   pageSize: 10,
   target: "_self",
   action: "",
-  type: "list"
+  type: "list",
+  onTableDataChange: () => {}
 };
 const Root = (0, _system.styled)(_material.Stack)`
   @media (max-width: ${({

package/lib/libs/util.js

@@ -1012,5 +1012,6 @@ function truncateText(text, maxLength, useWidth = false) {
   return `${truncated}...`;
 }
 function getCustomerAvatar(did, updated_at, imageSize = 48) {
-  return `/.well-known/service/user/avatar/${did}?imageFilter=resize&w=${imageSize}&h=${imageSize}&updateAt=${updated_at || (0, _dayjs.default)().unix()}`;
+  const updated = typeof updated_at === "number" ? updated_at : (0, _dayjs.default)(updated_at).unix();
+  return `/.well-known/service/user/avatar/${did}?imageFilter=resize&w=${imageSize}&h=${imageSize}&updateAt=${updated || (0, _dayjs.default)().unix()}`;
 }

package/lib/payment/index.js

@@ -320,9 +320,6 @@ function Payment({
     if (checkoutSession) {
       if (livemode !== checkoutSession.livemode) {
         setLivemode(checkoutSession.livemode);
-        setTimeout(() => {
-          refresh();
-        }, 10);
       }
     }
   }, [checkoutSession, livemode, setLivemode, refresh]);

package/lib/payment/product-card.js

@@ -72,8 +72,7 @@ function ProductCard({
         },
         color: "text.lighter",
         children: description
-      }), extra && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        variant: "body1",
+      }), extra && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
           fontSize: "0.85rem"
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.15.4",
+  "version": "1.15.5",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.10.30",
-    "@arcblock/ux": "^2.10.30",
+    "@arcblock/did-connect": "^2.10.33",
+    "@arcblock/ux": "^2.10.33",
     "@arcblock/ws": "^1.18.135",
-    "@blocklet/ui-react": "^2.10.30",
+    "@blocklet/ui-react": "^2.10.33",
     "@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.4",
+    "@blocklet/payment-types": "1.15.5",
     "@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": "d1c51f0dffe33e5d42b3dc601a554df6c8f88828"
+  "gitHead": "013d9fb8161d6021b66da18916f49242dc156580"
 }

package/src/checkout/donate.tsx

@@ -38,6 +38,7 @@ import { formatAmount, formatBNStr, formatDateTime, formatError, getCustomerAvat
 import { CheckoutProps, PaymentThemeOptions } from '../types';
 import CheckoutForm from './form';
 import { PaymentThemeProvider } from '../theme';
+import { usePaymentContext } from '../contexts/payment';
 
 export type DonateHistory = {
   supporters: TCheckoutSessionExpanded[];
@@ -261,7 +262,7 @@ function SupporterSimple({ supporters = [], totalAmount = '0', currency, method
   );
 }
 
-function useDonation(settings: DonationSettings, livemode: boolean = true, mode = 'default') {
+function useDonation(settings: DonationSettings, livemode: boolean, mode = 'default') {
   const [state, setState] = useSetState({
     open: false,
     supporterLoaded: false,
@@ -307,7 +308,7 @@ function useDonation(settings: DonationSettings, livemode: boolean = true, mode
 
 function CheckoutDonateInner({
   settings,
-  livemode,
+  livemode = true,
   timeout,
   onPaid,
   onError,
@@ -477,6 +478,9 @@ function CheckoutDonateInner({
               action={settings.appearance?.button?.text}
               mode="inline"
               theme={theme}
+              extraParams={{
+                livemode,
+              }}
             />
           </Box>
         </Dialog>
@@ -486,26 +490,22 @@ function CheckoutDonateInner({
 }
 
 export default function CheckoutDonate(props: DonateProps) {
+  const { livemode } = usePaymentContext();
+  const content = (
+    <CheckoutDonateInner {...props} livemode={props.livemode === undefined ? livemode : props.livemode} />
+  );
   if (props.theme === 'inherit') {
-    return <CheckoutDonateInner {...props} />;
+    return content;
   }
   if (props.theme && typeof props.theme === 'object') {
-    return (
-      <PaymentThemeProvider theme={props.theme}>
-        <CheckoutDonateInner {...props} />
-      </PaymentThemeProvider>
-    );
+    return <PaymentThemeProvider theme={props.theme}>{content}</PaymentThemeProvider>;
   }
-  return (
-    <PaymentThemeProvider>
-      <CheckoutDonateInner {...props} />
-    </PaymentThemeProvider>
-  );
+  return <PaymentThemeProvider>{content}</PaymentThemeProvider>;
 }
 
 CheckoutDonate.defaultProps = {
   theme: 'default',
-  livemode: true,
+  livemode: undefined,
   timeout: 5000,
   mode: 'default',
   inlineOptions: {

package/src/checkout/table.tsx

@@ -84,7 +84,21 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
   if (!sessionId && !hashSessionId) {
     if (mode === 'standalone') {
       return (
-        <Stack direction="column" alignItems="center" p={2.5}>
+        <Stack
+          direction="column"
+          alignItems="center"
+          sx={{
+            overflow: {
+              xs: 'auto',
+              md: 'hidden',
+            },
+            height: '100%',
+            pt: {
+              xs: 2.5,
+              md: 7.5,
+            },
+            px: 2.5,
+          }}>
           <Box
             sx={{
               display: 'flex',

package/src/components/pricing-table.tsx

@@ -31,6 +31,7 @@ import {
   formatRecurring,
   getPriceCurrencyOptions,
   getPriceUintAmountByCurrency,
+  isMobileSafari,
 } from '../libs/util';
 import Amount from '../payment/amount';
 import { useMobile } from '../hooks/mobile';
@@ -84,7 +85,20 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
   const { isMobile } = useMobile();
   const {
     settings: { paymentMethods = [] },
+    livemode,
+    setLivemode,
+    refresh,
   } = usePaymentContext();
+  const isMobileSafariEnv = isMobileSafari();
+
+  useEffect(() => {
+    if (table) {
+      if (livemode !== table.livemode) {
+        setLivemode(table.livemode);
+      }
+    }
+  }, [table, livemode, setLivemode, refresh]);
+
   const [currency, setCurrency] = useState(table.currency || {});
   const { recurring, grouped } = useMemo(() => groupItemsByRecurring(table.items, currency), [table.items, currency]);
   const recurringKeysList = useMemo(() => {
@@ -167,6 +181,13 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       width: 100%;
       gap: 20px;
     }
+    .price-table-wrap {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
     @media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
       // .price-table-item {
       //   width: 90% !important;
@@ -188,7 +209,16 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     }
   `;
   return (
-    <Root>
+    <Root
+      sx={{
+        flex: 1,
+        overflow: {
+          xs: isMobileSafariEnv ? 'visible' : 'hidden',
+          md: 'hidden',
+        },
+        display: 'flex',
+        flexDirection: 'column',
+      }}>
       <Stack
         direction="column"
         alignItems={alignItems === 'center' ? 'center' : 'flex-start'}
@@ -197,6 +227,11 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
             xs: 3,
             sm: mode === 'select' ? 3 : 5,
           },
+          height: '100%',
+          overflow: {
+            xs: 'auto',
+            md: 'hidden',
+          },
         }}>
         <Stack className="btn-row" flexDirection="row">
           {recurringKeysList.length > 0 && (
@@ -277,6 +312,11 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
           direction="row"
           gap="20px"
           justifyContent={alignItems === 'center' ? 'center' : 'flex-start'}
+          sx={{
+            flex: '0 1 auto',
+            overflow: 'auto',
+            pb: 2.5,
+          }}
           className="price-table-wrap">
           {productList?.map((x: TPricingTableItem & { is_selected?: boolean; is_disabled?: boolean }) => {
             let action: string = x.subscription_data?.trial_period_days
@@ -312,9 +352,11 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                     md: '320px',
                   },
                   maxWidth: '360px',
+                  minWidth: '300px',
 
                   padding: '20px',
                   position: 'relative',
+                  height: 'fit-content',
                 }}>
                 <Box textAlign="center">
                   <Stack

package/src/contexts/payment.tsx

@@ -41,14 +41,15 @@ const { Provider, Consumer } = PaymentContext;
 
 let settingsPromise: Promise<any> | null = null;
 const getSettings = () => {
-  const cacheKey = `payment-settings-${window.location.pathname}`;
+  const livemode = localStorage.getItem('livemode') !== 'false';
+  const cacheKey = `payment-settings-${window.location.pathname}-${livemode}`;
   const cachedData = sessionStorage.getItem(cacheKey);
   if (cachedData) {
     return JSON.parse(cachedData);
   }
   if (!settingsPromise) {
     settingsPromise = api
-      .get('/api/settings')
+      .get('/api/settings', { params: { livemode } })
       .then(({ data }) => {
         sessionStorage.setItem(cacheKey, JSON.stringify(data));
         return data;
@@ -78,8 +79,11 @@ function PaymentProvider({ session, connect, children, baseUrl }: PaymentContext
     window.__PAYMENT_KIT_BASE_URL = baseUrl;
   }
 
-  const { data, error, run, loading } = useRequest(getSettings);
   const [livemode, setLivemode] = useLocalStorageState('livemode', { defaultValue: true });
+
+  const { data, error, run, loading } = useRequest(getSettings, {
+    refreshDeps: [livemode],
+  });
   const prefix = getPrefix();
   const [payable, setPayable] = useState(true);