@blocklet/payment-react 1.18.56 → 1.19.0

package/lib/payment/product-donation.js

@@ -14,7 +14,7 @@ var _util = require("../libs/util");
 var _payment = require("../contexts/payment");
 var _scroll = require("../hooks/scroll");
 var _keyboard = require("../hooks/keyboard");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DONATION_PRESET_KEY_BASE = "payment-donation-preset";
 const DONATION_CUSTOM_AMOUNT_KEY_BASE = "payment-donation-custom-amount";
 const formatAmount = amount => {
@@ -259,22 +259,23 @@ function ProductDonation({
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     ref: containerRef,
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start",
-    gap: 1.5,
     onKeyDown: handleKeyDown,
     tabIndex: 0,
     sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      gap: 1.5,
       outline: "none"
     },
     children: [supportPreset && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Grid, {
       container: true,
       spacing: 2,
       children: [presets.map(amount => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grid, {
-        item: true,
-        xs: 6,
-        sm: 3,
+        size: {
+          xs: 6,
+          sm: 3
+        },
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Card, {
           variant: "outlined",
           className: "tab-navigable-card",
@@ -302,13 +303,13 @@ function ProductDonation({
             "aria-selected": formatAmount(state.selected) === formatAmount(amount) && !state.custom,
             children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
               direction: "row",
+              spacing: 0.5,
               sx: {
+                alignItems: "center",
+                justifyContent: "center",
                 py: 1.5,
                 px: 1.5
               },
-              spacing: 0.5,
-              alignItems: "center",
-              justifyContent: "center",
               children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
                 src: currency?.logo,
                 sx: {
@@ -319,26 +320,29 @@ function ProductDonation({
                 alt: currency?.symbol
               }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                 component: "strong",
-                lineHeight: 1,
                 variant: "h3",
                 sx: {
+                  lineHeight: 1,
                   fontVariantNumeric: "tabular-nums",
                   fontWeight: 400
                 },
                 children: amount
               }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                lineHeight: 1,
-                fontSize: 14,
-                color: "text.secondary",
+                sx: {
+                  lineHeight: 1,
+                  fontSize: 14,
+                  color: "text.secondary"
+                },
                 children: currency?.symbol
               })]
             })
           })
         })
       }, amount)), supportCustom && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grid, {
-        item: true,
-        xs: 6,
-        sm: 3,
+        size: {
+          xs: 6,
+          sm: 3
+        },
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Card, {
           variant: "outlined",
           className: "tab-navigable-card",
@@ -365,17 +369,17 @@ function ProductDonation({
             "aria-selected": state.custom,
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
               direction: "row",
+              spacing: 0.5,
               sx: {
+                alignItems: "center",
+                justifyContent: "center",
                 py: 1.5,
                 px: 1.5
               },
-              spacing: 0.5,
-              alignItems: "center",
-              justifyContent: "center",
               children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                 variant: "h3",
-                lineHeight: 1,
                 sx: {
+                  lineHeight: 1,
                   fontWeight: 400
                 },
                 children: t("common.custom")
@@ -393,49 +397,6 @@ function ProductDonation({
       error: !!state.error,
       helperText: state.error,
       inputRef: customInputRef,
-      InputProps: {
-        endAdornment: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-          direction: "row",
-          spacing: 0.5,
-          alignItems: "center",
-          sx: {
-            ml: 1
-          },
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_AutoAwesome.default, {
-              fontSize: "small"
-            })
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
-            src: currency?.logo,
-            sx: {
-              width: 16,
-              height: 16
-            },
-            alt: currency?.symbol
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            children: currency?.symbol
-          })]
-        }),
-        autoComplete: "off",
-        sx: {
-          "& input": {
-            transition: "all 0.25s ease"
-          }
-        }
-      },
       sx: {
         mt: defaultPreset !== "0" ? 0 : 1,
         "& .MuiInputBase-root": {
@@ -451,8 +412,52 @@ function ProductDonation({
         "& input[type=number]::-webkit-inner-spin-button": {
           WebkitAppearance: "none",
           margin: 0
+        },
+        "& input": {
+          transition: "all 0.25s ease"
         }
-      }
+      },
+      slotProps: {
+        input: {
+          endAdornment: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            spacing: 0.5,
+            sx: {
+              alignItems: "center",
+              ml: 1
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_AutoAwesome.default, {
+                fontSize: "small"
+              })
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+              src: currency?.logo,
+              sx: {
+                width: 16,
+                height: 16
+              },
+              alt: currency?.symbol
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: currency?.symbol
+            })]
+          }),
+          autoComplete: "off"
+        }
+      },
+      autoComplete: "off"
     })]
   });
 }

package/lib/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 {};

package/lib/payment/product-item.js

@@ -13,20 +13,15 @@ var _switchButton = _interopRequireDefault(require("../components/switch-button"
 var _util = require("../libs/util");
 var _productCard = _interopRequireDefault(require("./product-card"));
 var _dayjs = _interopRequireDefault(require("../libs/dayjs"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-ProductItem.defaultProps = {
-  mode: "normal",
-  children: null,
-  trialEnd: 0
-};
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function ProductItem({
   item,
   items,
   trialInDays,
   trialEnd = 0,
   currency,
-  mode,
-  children,
+  mode = "normal",
+  children = null,
   onUpsell,
   onDownsell
 }) {
@@ -52,42 +47,46 @@ function ProductItem({
   }, [trialInDays, trialEnd, pricing, item, locale]);
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     direction: "column",
-    alignItems: "flex-start",
     spacing: 1,
+    className: "product-item",
     sx: {
+      alignItems: "flex-start",
       width: "100%"
     },
-    className: "product-item",
     children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "column",
-      alignItems: "flex-start",
+      className: "product-item-content",
       sx: {
+        alignItems: "flex-start",
         width: "100%"
       },
-      className: "product-item-content",
       children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
-        alignItems: "center",
-        flexWrap: "wrap",
         spacing: 0.5,
-        justifyContent: "space-between",
         sx: {
+          alignItems: "center",
+          flexWrap: "wrap",
+          justifyContent: "space-between",
           width: "100%"
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_productCard.default, {
           logo: item.price.product?.images[0],
           name: item.price.product?.name,
           extra: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-            display: "flex",
-            alignItems: "center",
+            sx: {
+              display: "flex",
+              alignItems: "center"
+            },
             children: item.price.type === "recurring" && item.price.recurring ? [pricing.quantity, t("common.billed", {
               rule: `${(0, _util.formatRecurring)(item.upsell_price?.recurring || item.price.recurring, true, "per", locale)} ${metered}`
             })].filter(Boolean).join(", ") : pricing.quantity
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "column",
-          alignItems: "flex-end",
-          flex: 1,
+          sx: {
+            alignItems: "flex-end",
+            flex: 1
+          },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             sx: {
               color: "text.primary",
@@ -116,12 +115,12 @@ function ProductItem({
       }) : null, children]
     }), canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
+      className: "product-item-upsell",
       sx: {
+        alignItems: "center",
+        justifyContent: "space-between",
         width: "100%"
       },
-      className: "product-item-upsell",
       children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
         component: "label",
         htmlFor: "upsell-switch",
@@ -161,12 +160,12 @@ function ProductItem({
       })]
     }), canUpsell && item.upsell_price_id && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
+      className: "product-item-upsell",
       sx: {
+        alignItems: "center",
+        justifyContent: "space-between",
         width: "100%"
       },
-      className: "product-item-upsell",
       children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
         component: "label",
         htmlFor: "upsell-switch",

package/lib/payment/product-skeleton.js

@@ -13,10 +13,10 @@ function ProductSkeleton({
     in: true,
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "column",
-      alignItems: "center",
-      padding: 4,
       spacing: 1,
       sx: {
+        alignItems: "center",
+        padding: 4,
         width: 320,
         border: "1px solid",
         borderColor: "grey.100",

package/lib/payment/skeleton/donation.js

@@ -36,8 +36,10 @@ function DonationSkeleton() {
         }
       }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
-        justifyContent: "space-between",
         spacing: 2,
+        sx: {
+          justifyContent: "space-between"
+        },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
           variant: "text",
           sx: {
@@ -45,9 +47,11 @@ function DonationSkeleton() {
             width: "40%"
           }
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-          display: "flex",
-          alignItems: "center",
-          gap: 2,
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 2
+          },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
               height: 60,

package/lib/payment/skeleton/overview.js

@@ -13,8 +13,10 @@ function OverviewSkeleton() {
       direction: "column",
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
         direction: "row",
-        alignItems: "center",
         spacing: 2,
+        sx: {
+          alignItems: "center"
+        },
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
           variant: "text",
           sx: {
@@ -29,9 +31,11 @@ function OverviewSkeleton() {
         variant: "rounded",
         height: 100
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        mt: 2,
         component: "div",
         variant: "h4",
+        sx: {
+          mt: 2
+        },
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         component: "div",

package/lib/payment/skeleton/payment.js

@@ -24,11 +24,15 @@ function PaymentSkeleton() {
         variant: "rounded",
         height: 68
       }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-        mt: 1,
+        sx: {
+          mt: 1
+        },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "div",
           variant: "h4",
-          mb: -1,
+          sx: {
+            mb: -1
+          },
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "div",
@@ -40,7 +44,9 @@ function PaymentSkeleton() {
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "div",
           variant: "h4",
-          mb: -1,
+          sx: {
+            mb: -1
+          },
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {})
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "div",

package/lib/payment/success.d.ts

@@ -7,12 +7,5 @@ type Props = {
     subscriptionId?: string;
     subscriptions?: any[];
 };
-declare function PaymentSuccess({ mode, message, action, payee, invoiceId, subscriptionId, subscriptions, }: Props): import("react").JSX.Element;
-declare namespace PaymentSuccess {
-    var defaultProps: {
-        invoiceId: string;
-        subscriptionId: string;
-        subscriptions: never[];
-    };
-}
-export default PaymentSuccess;
+export default function PaymentSuccess({ mode, message, action, payee, invoiceId, subscriptionId, subscriptions, }: Props): import("react").JSX.Element;
+export {};

package/lib/payment/success.js

@@ -15,9 +15,9 @@ function PaymentSuccess({
   message,
   action,
   payee,
-  invoiceId,
-  subscriptionId,
-  subscriptions
+  invoiceId = "",
+  subscriptionId = "",
+  subscriptions = []
 }) {
   const {
     t
@@ -91,8 +91,8 @@ function PaymentSuccess({
     }
   } else if (invoiceId) {
     next = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-      textAlign: "center",
       sx: {
+        textAlign: "center",
         mt: 2
       },
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
@@ -107,9 +107,9 @@ function PaymentSuccess({
     in: true,
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "column",
-      alignItems: "center",
-      justifyContent: mode === "standalone" ? "center" : "flex-start",
       sx: {
+        alignItems: "center",
+        justifyContent: mode === "standalone" ? "center" : "flex-start",
         height: mode === "standalone" ? "fit-content" : 300
       },
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(Div, {
@@ -127,14 +127,16 @@ function PaymentSuccess({
         })
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h5",
-        color: "text.primary",
-        mb: 3,
+        sx: {
+          color: "text.primary",
+          mb: 3
+        },
         children: message
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "body1",
-        color: "text.secondary",
-        textAlign: "center",
         sx: {
+          color: "text.secondary",
+          textAlign: "center",
           fontSize: "14px"
         },
         children: t("payment.checkout.completed.tip", {
@@ -144,11 +146,6 @@ function PaymentSuccess({
     })
   });
 }
-PaymentSuccess.defaultProps = {
-  invoiceId: "",
-  subscriptionId: "",
-  subscriptions: []
-};
 const Div = (0, _material.styled)("div")`
   width: 80px;
   height: 115px;

package/lib/payment/summary.d.ts

@@ -16,20 +16,5 @@ type Props = {
     donationSettings?: DonationSettings;
     action?: string;
 };
-declare function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, ...rest }: Props): import("react").JSX.Element;
-declare namespace PaymentSummary {
-    var defaultProps: {
-        onUpsell: any;
-        onDownsell: any;
-        onApplyCrossSell: any;
-        onCancelCrossSell: any;
-        onChangeAmount: any;
-        checkoutSessionId: string;
-        crossSellBehavior: string;
-        showStaking: boolean;
-        donationSettings: null;
-        action: string;
-        trialEnd: number;
-    };
-}
-export default PaymentSummary;
+export default function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, ...rest }: Props): import("react").JSX.Element;
+export {};