@blocklet/payment-react 1.15.3 → 1.15.5

package/es/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/es/checkout/donate.js

@@ -26,6 +26,7 @@ import api from "../libs/api.js";
 import { formatAmount, formatBNStr, formatDateTime, formatError, getCustomerAvatar, lazyLoad } from "../libs/util.js";
 import CheckoutForm from "./form.js";
 import { PaymentThemeProvider } from "../theme/index.js";
+import { usePaymentContext } from "../contexts/payment.js";
 const donationCache = {};
 const createOrUpdateDonation = (settings, livemode = true) => {
   if (!donationCache[settings.target]) {
@@ -177,7 +178,7 @@ function SupporterSimple({ supporters = [], totalAmount = "0", currency, method
     }
   );
 }
-function useDonation(settings, livemode = true, mode = "default") {
+function useDonation(settings, livemode, mode = "default") {
   const [state, setState] = useSetState({
     open: false,
     supporterLoaded: false,
@@ -217,7 +218,7 @@ function useDonation(settings, livemode = true, mode = "default") {
 }
 function CheckoutDonateInner({
   settings,
-  livemode,
+  livemode = true,
   timeout,
   onPaid,
   onError,
@@ -375,7 +376,10 @@ function CheckoutDonateInner({
             onError,
             action: settings.appearance?.button?.text,
             mode: "inline",
-            theme
+            theme,
+            extraParams: {
+              livemode
+            }
           }
         ) })
       }
@@ -383,17 +387,19 @@ function CheckoutDonateInner({
   ] });
 }
 export default function CheckoutDonate(props) {
+  const { livemode } = usePaymentContext();
+  const content = /* @__PURE__ */ jsx(CheckoutDonateInner, { ...props, livemode: props.livemode === void 0 ? livemode : props.livemode });
   if (props.theme === "inherit") {
-    return /* @__PURE__ */ jsx(CheckoutDonateInner, { ...props });
+    return content;
   }
   if (props.theme && typeof props.theme === "object") {
-    return /* @__PURE__ */ jsx(PaymentThemeProvider, { theme: props.theme, children: /* @__PURE__ */ jsx(CheckoutDonateInner, { ...props }) });
+    return /* @__PURE__ */ jsx(PaymentThemeProvider, { theme: props.theme, children: content });
   }
-  return /* @__PURE__ */ jsx(PaymentThemeProvider, { children: /* @__PURE__ */ jsx(CheckoutDonateInner, { ...props }) });
+  return /* @__PURE__ */ jsx(PaymentThemeProvider, { children: content });
 }
 CheckoutDonate.defaultProps = {
   theme: "default",
-  livemode: true,
+  livemode: void 0,
   timeout: 5e3,
   mode: "default",
   inlineOptions: {

package/es/checkout/table.js

@@ -66,44 +66,63 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
   }
   if (!sessionId && !hashSessionId) {
     if (mode === "standalone") {
-      return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", p: 2.5, children: [
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            sx: {
-              display: "flex",
-              flexDirection: "column",
-              fontSize: "24px",
-              alignItems: "center",
-              margin: {
-                xs: "20px 0",
-                md: "20px 20px"
-              },
-              maxWidth: {
-                xs: "100%",
-                md: 400
-              },
-              textAlign: "center"
+      return /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "column",
+          alignItems: "center",
+          sx: {
+            overflow: {
+              xs: "auto",
+              md: "hidden"
             },
-            children: [
-              !data.livemode && /* @__PURE__ */ jsx(Livemode, { sx: { display: "flex", marginBottom: "8px", width: "fit-content", ml: 0 } }),
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  color: "text.primary",
-                  fontWeight: 600,
-                  sx: {
-                    lineHeight: "32px",
-                    fontSize: "24px"
+            height: "100%",
+            pt: {
+              xs: 2.5,
+              md: 7.5
+            },
+            px: 2.5
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  flexDirection: "column",
+                  fontSize: "24px",
+                  alignItems: "center",
+                  margin: {
+                    xs: "20px 0",
+                    md: "20px 20px"
+                  },
+                  maxWidth: {
+                    xs: "100%",
+                    md: 400
                   },
-                  children: /* @__PURE__ */ jsx(TruncatedText, { text: data.name, maxLength: 60, useWidth: true })
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(PricingTable, { table: data, onSelect: handleSelect })
-      ] });
+                  textAlign: "center"
+                },
+                children: [
+                  !data.livemode && /* @__PURE__ */ jsx(Livemode, { sx: { display: "flex", marginBottom: "8px", width: "fit-content", ml: 0 } }),
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      color: "text.primary",
+                      fontWeight: 600,
+                      sx: {
+                        lineHeight: "32px",
+                        fontSize: "24px"
+                      },
+                      children: /* @__PURE__ */ jsx(TruncatedText, { text: data.name, maxLength: 60, useWidth: true })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(PricingTable, { table: data, onSelect: handleSelect })
+          ]
+        }
+      );
     }
     return /* @__PURE__ */ jsx(PricingTable, { mode: "select", table: data, onSelect: handleSelect });
   }