@blocklet/payment-react 1.18.56 → 1.19.0

package/es/payment/product-donation.js

@@ -91,14 +91,12 @@ export default function ProductDonation({
     maxPreset = Math.min(maxPreset, systemMax);
     const detectPrecision = () => {
       let maxPrecision = 2;
-      if (!hasPresets)
-        return 0;
+      if (!hasPresets) return 0;
       const allIntegers = presets.every((preset) => {
         const num = parseFloat(preset);
         return num === Math.floor(num);
       });
-      if (allIntegers)
-        return 0;
+      if (allIntegers) return 0;
       presets.forEach((preset) => {
         const decimalPart = preset.toString().split(".")[1];
         if (decimalPart) {
@@ -213,101 +211,152 @@ export default function ProductDonation({
     Box,
     {
       ref: containerRef,
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "flex-start",
-      gap: 1.5,
       onKeyDown: handleKeyDown,
       tabIndex: 0,
-      sx: { outline: "none" },
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: 1.5,
+        outline: "none"
+      },
       children: [
         supportPreset && /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-          presets.map((amount) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, sm: 3, children: /* @__PURE__ */ jsx(
-            Card,
+          presets.map((amount) => /* @__PURE__ */ jsx(
+            Grid,
             {
-              variant: "outlined",
-              className: "tab-navigable-card",
-              sx: {
-                minWidth: 115,
-                textAlign: "center",
-                transition: "all 0.3s",
-                cursor: "pointer",
-                "&:hover": {
-                  transform: "translateY(-4px)",
-                  boxShadow: 3
-                },
-                ".MuiCardActionArea-focusHighlight": {
-                  backgroundColor: "transparent"
-                },
-                height: "42px",
-                ...formatAmount(state.selected) === formatAmount(amount) && !state.custom ? { borderColor: "primary.main", borderWidth: 1 } : {}
+              size: {
+                xs: 6,
+                sm: 3
               },
               children: /* @__PURE__ */ jsx(
-                CardActionArea,
+                Card,
                 {
-                  onClick: () => handleSelect(amount),
-                  tabIndex: 0,
-                  "aria-selected": formatAmount(state.selected) === formatAmount(amount) && !state.custom,
-                  children: /* @__PURE__ */ jsxs(
-                    Stack,
+                  variant: "outlined",
+                  className: "tab-navigable-card",
+                  sx: {
+                    minWidth: 115,
+                    textAlign: "center",
+                    transition: "all 0.3s",
+                    cursor: "pointer",
+                    "&:hover": {
+                      transform: "translateY(-4px)",
+                      boxShadow: 3
+                    },
+                    ".MuiCardActionArea-focusHighlight": {
+                      backgroundColor: "transparent"
+                    },
+                    height: "42px",
+                    ...formatAmount(state.selected) === formatAmount(amount) && !state.custom ? { borderColor: "primary.main", borderWidth: 1 } : {}
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    CardActionArea,
                     {
-                      direction: "row",
-                      sx: { py: 1.5, px: 1.5 },
-                      spacing: 0.5,
-                      alignItems: "center",
-                      justifyContent: "center",
-                      children: [
-                        /* @__PURE__ */ jsx(Avatar, { src: currency?.logo, sx: { width: 16, height: 16, mr: 0.5 }, alt: currency?.symbol }),
-                        /* @__PURE__ */ jsx(
-                          Typography,
-                          {
-                            component: "strong",
-                            lineHeight: 1,
-                            variant: "h3",
-                            sx: { fontVariantNumeric: "tabular-nums", fontWeight: 400 },
-                            children: amount
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(Typography, { lineHeight: 1, fontSize: 14, color: "text.secondary", children: currency?.symbol })
-                      ]
+                      onClick: () => handleSelect(amount),
+                      tabIndex: 0,
+                      "aria-selected": formatAmount(state.selected) === formatAmount(amount) && !state.custom,
+                      children: /* @__PURE__ */ jsxs(
+                        Stack,
+                        {
+                          direction: "row",
+                          spacing: 0.5,
+                          sx: {
+                            alignItems: "center",
+                            justifyContent: "center",
+                            py: 1.5,
+                            px: 1.5
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(Avatar, { src: currency?.logo, sx: { width: 16, height: 16, mr: 0.5 }, alt: currency?.symbol }),
+                            /* @__PURE__ */ jsx(
+                              Typography,
+                              {
+                                component: "strong",
+                                variant: "h3",
+                                sx: {
+                                  lineHeight: 1,
+                                  fontVariantNumeric: "tabular-nums",
+                                  fontWeight: 400
+                                },
+                                children: amount
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Typography,
+                              {
+                                sx: {
+                                  lineHeight: 1,
+                                  fontSize: 14,
+                                  color: "text.secondary"
+                                },
+                                children: currency?.symbol
+                              }
+                            )
+                          ]
+                        }
+                      )
                     }
                   )
                 }
               )
-            }
-          ) }, amount)),
-          supportCustom && /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, sm: 3, children: /* @__PURE__ */ jsx(
-            Card,
+            },
+            amount
+          )),
+          supportCustom && /* @__PURE__ */ jsx(
+            Grid,
             {
-              variant: "outlined",
-              className: "tab-navigable-card",
-              sx: {
-                textAlign: "center",
-                transition: "all 0.3s",
-                cursor: "pointer",
-                "&:hover": {
-                  transform: "translateY(-4px)",
-                  boxShadow: 3
-                },
-                ".MuiCardActionArea-focusHighlight": {
-                  backgroundColor: "transparent"
-                },
-                height: "42px",
-                ...state.custom ? { borderColor: "primary.main", borderWidth: 1 } : {}
+              size: {
+                xs: 6,
+                sm: 3
               },
-              children: /* @__PURE__ */ jsx(CardActionArea, { onClick: handleCustomSelect, tabIndex: 0, "aria-selected": state.custom, children: /* @__PURE__ */ jsx(
-                Stack,
+              children: /* @__PURE__ */ jsx(
+                Card,
                 {
-                  direction: "row",
-                  sx: { py: 1.5, px: 1.5 },
-                  spacing: 0.5,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  children: /* @__PURE__ */ jsx(Typography, { variant: "h3", lineHeight: 1, sx: { fontWeight: 400 }, children: t("common.custom") })
+                  variant: "outlined",
+                  className: "tab-navigable-card",
+                  sx: {
+                    textAlign: "center",
+                    transition: "all 0.3s",
+                    cursor: "pointer",
+                    "&:hover": {
+                      transform: "translateY(-4px)",
+                      boxShadow: 3
+                    },
+                    ".MuiCardActionArea-focusHighlight": {
+                      backgroundColor: "transparent"
+                    },
+                    height: "42px",
+                    ...state.custom ? { borderColor: "primary.main", borderWidth: 1 } : {}
+                  },
+                  children: /* @__PURE__ */ jsx(CardActionArea, { onClick: handleCustomSelect, tabIndex: 0, "aria-selected": state.custom, children: /* @__PURE__ */ jsx(
+                    Stack,
+                    {
+                      direction: "row",
+                      spacing: 0.5,
+                      sx: {
+                        alignItems: "center",
+                        justifyContent: "center",
+                        py: 1.5,
+                        px: 1.5
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          variant: "h3",
+                          sx: {
+                            lineHeight: 1,
+                            fontWeight: 400
+                          },
+                          children: t("common.custom")
+                        }
+                      )
+                    }
+                  ) })
                 }
-              ) })
-            }
-          ) }, "custom")
+              )
+            },
+            "custom"
+          )
         ] }),
         state.custom && /* @__PURE__ */ jsx(
           TextField,
@@ -320,37 +369,6 @@ export default function ProductDonation({
             error: !!state.error,
             helperText: state.error,
             inputRef: customInputRef,
-            InputProps: {
-              endAdornment: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { ml: 1 }, children: [
-                /* @__PURE__ */ jsx(
-                  IconButton,
-                  {
-                    size: "small",
-                    onClick: handleCustomSelect,
-                    disabled: state.animating,
-                    sx: {
-                      mr: 0.5,
-                      opacity: state.animating ? 0.5 : 1,
-                      transition: "all 0.2s ease",
-                      "&:hover": {
-                        transform: "scale(1.2)",
-                        transition: "transform 0.3s ease"
-                      }
-                    },
-                    "aria-label": t("common.random"),
-                    children: /* @__PURE__ */ jsx(AutoAwesomeIcon, { fontSize: "small" })
-                  }
-                ),
-                /* @__PURE__ */ jsx(Avatar, { src: currency?.logo, sx: { width: 16, height: 16 }, alt: currency?.symbol }),
-                /* @__PURE__ */ jsx(Typography, { children: currency?.symbol })
-              ] }),
-              autoComplete: "off",
-              sx: {
-                "& input": {
-                  transition: "all 0.25s ease"
-                }
-              }
-            },
             sx: {
               mt: defaultPreset !== "0" ? 0 : 1,
               "& .MuiInputBase-root": {
@@ -366,8 +384,51 @@ export default function ProductDonation({
               "& input[type=number]::-webkit-inner-spin-button": {
                 WebkitAppearance: "none",
                 margin: 0
+              },
+              "& input": {
+                transition: "all 0.25s ease"
               }
-            }
+            },
+            slotProps: {
+              input: {
+                endAdornment: /* @__PURE__ */ jsxs(
+                  Stack,
+                  {
+                    direction: "row",
+                    spacing: 0.5,
+                    sx: {
+                      alignItems: "center",
+                      ml: 1
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          size: "small",
+                          onClick: handleCustomSelect,
+                          disabled: state.animating,
+                          sx: {
+                            mr: 0.5,
+                            opacity: state.animating ? 0.5 : 1,
+                            transition: "all 0.2s ease",
+                            "&:hover": {
+                              transform: "scale(1.2)",
+                              transition: "transform 0.3s ease"
+                            }
+                          },
+                          "aria-label": t("common.random"),
+                          children: /* @__PURE__ */ jsx(AutoAwesomeIcon, { fontSize: "small" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Avatar, { src: currency?.logo, sx: { width: 16, height: 16 }, alt: currency?.symbol }),
+                      /* @__PURE__ */ jsx(Typography, { children: currency?.symbol })
+                    ]
+                  }
+                ),
+                autoComplete: "off"
+              }
+            },
+            autoComplete: "off"
           }
         )
       ]

package/es/payment/product-item.d.ts

@@ -11,12 +11,5 @@ type Props = {
     mode?: 'normal' | 'cross-sell';
     children?: React.ReactNode;
 };
-declare function ProductItem({ item, items, trialInDays, trialEnd, currency, mode, children, onUpsell, onDownsell, }: Props): JSX.Element;
-declare namespace ProductItem {
-    var defaultProps: {
-        mode: string;
-        children: null;
-        trialEnd: number;
-    };
-}
-export default ProductItem;
+export default function ProductItem({ item, items, trialInDays, trialEnd, currency, mode, children, onUpsell, onDownsell, }: Props): JSX.Element;
+export {};