@blocklet/payment-react 1.18.56 → 1.19.1

package/es/payment/success.js

@@ -9,9 +9,9 @@ export default function PaymentSuccess({
   message,
   action,
   payee,
-  invoiceId,
-  subscriptionId,
-  subscriptions
+  invoiceId = "",
+  subscriptionId = "",
+  subscriptions = []
 }) {
   const { t } = useLocaleContext();
   const { prefix } = usePaymentContext();
@@ -81,15 +81,26 @@ export default function PaymentSuccess({
       next = /* @__PURE__ */ jsx(Button, { variant: "outlined", color: "primary", sx: { mt: 2 }, children: /* @__PURE__ */ jsx(Link, { href: joinURL(prefix, `/customer/subscription/${subscriptionId}`), children: t("payment.checkout.next.subscription", { payee }) }) });
     }
   } else if (invoiceId) {
-    next = /* @__PURE__ */ jsx(Typography, { textAlign: "center", sx: { mt: 2 }, children: /* @__PURE__ */ jsx(Link, { href: joinURL(prefix, `/customer/invoice/${invoiceId}`), children: t("payment.checkout.next.invoice", { payee }) }) });
+    next = /* @__PURE__ */ jsx(
+      Typography,
+      {
+        sx: {
+          textAlign: "center",
+          mt: 2
+        },
+        children: /* @__PURE__ */ jsx(Link, { href: joinURL(prefix, `/customer/invoice/${invoiceId}`), children: t("payment.checkout.next.invoice", { payee }) })
+      }
+    );
   }
   return /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsxs(
     Stack,
     {
       direction: "column",
-      alignItems: "center",
-      justifyContent: mode === "standalone" ? "center" : "flex-start",
-      sx: { height: mode === "standalone" ? "fit-content" : 300 },
+      sx: {
+        alignItems: "center",
+        justifyContent: mode === "standalone" ? "center" : "flex-start",
+        height: mode === "standalone" ? "fit-content" : 300
+      },
       children: [
         /* @__PURE__ */ jsx(Div, { children: /* @__PURE__ */ jsxs("div", { className: "check-icon", children: [
           /* @__PURE__ */ jsx("span", { className: "icon-line line-tip" }),
@@ -97,18 +108,34 @@ export default function PaymentSuccess({
           /* @__PURE__ */ jsx("div", { className: "icon-circle" }),
           /* @__PURE__ */ jsx("div", { className: "icon-fix" })
         ] }) }),
-        /* @__PURE__ */ jsx(Typography, { variant: "h5", color: "text.primary", mb: 3, children: message }),
-        /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", textAlign: "center", sx: { fontSize: "14px" }, children: t("payment.checkout.completed.tip", { payee }) }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "h5",
+            sx: {
+              color: "text.primary",
+              mb: 3
+            },
+            children: message
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body1",
+            sx: {
+              color: "text.secondary",
+              textAlign: "center",
+              fontSize: "14px"
+            },
+            children: t("payment.checkout.completed.tip", { payee })
+          }
+        ),
         next
       ]
     }
   ) });
 }
-PaymentSuccess.defaultProps = {
-  invoiceId: "",
-  subscriptionId: "",
-  subscriptions: []
-};
 const Div = styled("div")`
   width: 80px;
   height: 115px;

package/es/payment/summary.d.ts

@@ -8,6 +8,7 @@ type Props = {
     showStaking?: boolean;
     onUpsell?: Function;
     onDownsell?: Function;
+    onQuantityChange?: Function;
     onChangeAmount?: Function;
     onApplyCrossSell?: Function;
     onCancelCrossSell?: Function;
@@ -15,21 +16,7 @@ type Props = {
     crossSellBehavior?: string;
     donationSettings?: DonationSettings;
     action?: string;
+    completed?: boolean;
 };
-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, onQuantityChange, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, completed, ...rest }: Props): import("react").JSX.Element;
+export {};

package/es/payment/summary.js

@@ -66,35 +66,24 @@ function getStakingSetup(items, currency, billingThreshold = 0) {
   }
   return "0";
 }
-PaymentSummary.defaultProps = {
-  onUpsell: noop,
-  onDownsell: noop,
-  onApplyCrossSell: noop,
-  onCancelCrossSell: noop,
-  onChangeAmount: noop,
-  checkoutSessionId: "",
-  crossSellBehavior: "",
-  showStaking: false,
-  donationSettings: null,
-  action: "",
-  trialEnd: 0
-};
 export default function PaymentSummary({
   items,
   currency,
   trialInDays,
   billingThreshold,
-  onUpsell,
-  onDownsell,
-  onApplyCrossSell,
-  onCancelCrossSell,
-  onChangeAmount,
-  checkoutSessionId,
-  crossSellBehavior,
-  showStaking,
-  donationSettings,
-  action,
+  onUpsell = noop,
+  onDownsell = noop,
+  onQuantityChange = noop,
+  onApplyCrossSell = noop,
+  onCancelCrossSell = noop,
+  onChangeAmount = noop,
+  checkoutSessionId = "",
+  crossSellBehavior = "",
+  showStaking = false,
+  donationSettings = void 0,
+  action = "",
   trialEnd = 0,
+  completed = false,
   ...rest
 }) {
   const { t, locale } = useLocaleContext();
@@ -124,6 +113,10 @@ export default function PaymentSummary({
     await onUpsell(from, to);
     runAsync();
   };
+  const handleQuantityChange = async (itemId, quantity) => {
+    await onQuantityChange(itemId, quantity);
+    runAsync();
+  };
   const handleDownsell = async (from) => {
     await onDownsell(from);
     runAsync();
@@ -179,86 +172,131 @@ export default function PaymentSummary({
               currency,
               onUpsell: handleUpsell,
               onDownsell: handleDownsell,
-              children: x.cross_sell && /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: 1 }, children: [
-                /* @__PURE__ */ jsx(Typography, {}),
-                /* @__PURE__ */ jsx(
-                  LoadingButton,
-                  {
-                    size: "small",
-                    loadingPosition: "end",
-                    endIcon: null,
-                    color: "error",
-                    variant: "text",
-                    loading: state.loading,
-                    onClick: handleCancelCrossSell,
-                    children: t("payment.checkout.cross_sell.remove")
-                  }
-                )
-              ] })
+              adjustableQuantity: x.adjustable_quantity,
+              completed,
+              onQuantityChange: handleQuantityChange,
+              children: x.cross_sell && /* @__PURE__ */ jsxs(
+                Stack,
+                {
+                  direction: "row",
+                  sx: {
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    width: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Typography, {}),
+                    /* @__PURE__ */ jsx(
+                      LoadingButton,
+                      {
+                        size: "small",
+                        loadingPosition: "end",
+                        endIcon: null,
+                        color: "error",
+                        variant: "text",
+                        loading: state.loading,
+                        onClick: handleCancelCrossSell,
+                        children: t("payment.checkout.cross_sell.remove")
+                      }
+                    )
+                  ]
+                }
+              )
             },
             `${x.price_id}-${currency.id}`
           )
         ) }),
-        data && items.some((x) => x.price_id === data.id) === false && /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsx(Stack, { mt: 1, children: /* @__PURE__ */ jsx(
-          ProductItem,
+        data && items.some((x) => x.price_id === data.id) === false && /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsx(
+          Stack,
           {
-            item: { quantity: 1, price: data, price_id: data.id, cross_sell: true },
-            items,
-            trialInDays,
-            currency,
-            trialEnd,
-            onUpsell: noop,
-            onDownsell: noop,
-            children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: 1 }, children: [
-              /* @__PURE__ */ jsx(Typography, { children: crossSellBehavior === "required" && /* @__PURE__ */ jsx(Status, { label: t("payment.checkout.required"), color: "info", variant: "outlined", sx: { mr: 1 } }) }),
-              /* @__PURE__ */ jsx(
-                LoadingButton,
-                {
-                  size: "small",
-                  loadingPosition: "end",
-                  endIcon: null,
-                  color: crossSellBehavior === "required" ? "info" : "info",
-                  variant: crossSellBehavior === "required" ? "text" : "text",
-                  loading: state.loading,
-                  onClick: handleApplyCrossSell,
-                  children: t("payment.checkout.cross_sell.add")
-                }
-              )
-            ] })
+            sx: {
+              mt: 1
+            },
+            children: /* @__PURE__ */ jsx(
+              ProductItem,
+              {
+                item: { quantity: 1, price: data, price_id: data.id, cross_sell: true },
+                items,
+                trialInDays,
+                currency,
+                trialEnd,
+                onUpsell: noop,
+                onDownsell: noop,
+                children: /* @__PURE__ */ jsxs(
+                  Stack,
+                  {
+                    direction: "row",
+                    sx: {
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      width: 1
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Typography, { children: crossSellBehavior === "required" && /* @__PURE__ */ jsx(Status, { label: t("payment.checkout.required"), color: "info", variant: "outlined", sx: { mr: 1 } }) }),
+                      /* @__PURE__ */ jsx(
+                        LoadingButton,
+                        {
+                          size: "small",
+                          loadingPosition: "end",
+                          endIcon: null,
+                          color: crossSellBehavior === "required" ? "info" : "info",
+                          variant: crossSellBehavior === "required" ? "text" : "text",
+                          loading: state.loading,
+                          onClick: handleApplyCrossSell,
+                          children: t("payment.checkout.cross_sell.add")
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
           }
-        ) }) })
+        ) })
       ]
     }
   );
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-product", direction: "column", ...rest, children: [
-    /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", sx: { mb: 2.5 }, children: [
-      /* @__PURE__ */ jsx(
-        Typography,
-        {
-          title: t("payment.checkout.orderSummary"),
-          sx: {
-            color: "text.primary",
-            fontSize: {
-              xs: "18px",
-              md: "24px"
-            },
-            fontWeight: "700",
-            lineHeight: "32px"
-          },
-          children: action || t("payment.checkout.orderSummary")
-        }
-      ),
-      !settings.livemode && /* @__PURE__ */ jsx(Livemode, {})
-    ] }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          mb: 2.5
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              title: t("payment.checkout.orderSummary"),
+              sx: {
+                color: "text.primary",
+                fontSize: {
+                  xs: "18px",
+                  md: "24px"
+                },
+                fontWeight: "700",
+                lineHeight: "32px"
+              },
+              children: action || t("payment.checkout.orderSummary")
+            }
+          ),
+          !settings.livemode && /* @__PURE__ */ jsx(Livemode, {})
+        ]
+      }
+    ),
     isMobile && !donationSettings ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
         Stack,
         {
-          justifyContent: "space-between",
-          flexDirection: "row",
-          alignItems: "center",
-          mb: 1.5,
           onClick: () => setState({ expanded: !state.expanded }),
+          sx: {
+            justifyContent: "space-between",
+            flexDirection: "row",
+            alignItems: "center",
+            mb: 1.5
+          },
           children: [
             /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.productListTotal", { total: items.length }) }),
             /* @__PURE__ */ jsx(ExpandMore, { expand: state.expanded, "aria-expanded": state.expanded, "aria-label": "show more", children: /* @__PURE__ */ jsx(ExpandMoreIcon, {}) })
@@ -269,33 +307,77 @@ export default function PaymentSummary({
     ] }) : ProductCardList,
     /* @__PURE__ */ jsx(Divider, { sx: { mt: 2.5, mb: 2.5 } }),
     staking > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 1, children: [
-        /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-          /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.paymentRequired") }),
-          /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.stakingConfirm"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } }) })
-        ] }),
-        /* @__PURE__ */ jsx(Typography, { children: headlines.amount })
-      ] }),
-      /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 1, children: [
-        /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-          /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.staking.title") }),
-          /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.staking.tooltip"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } }) })
-        ] }),
-        /* @__PURE__ */ jsxs(Typography, { children: [
-          formatAmount(staking, currency.decimal),
-          " ",
-          currency.symbol
-        ] })
-      ] })
+      /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          spacing: 1,
+          sx: {
+            justifyContent: "space-between",
+            alignItems: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                direction: "row",
+                spacing: 0.5,
+                sx: {
+                  alignItems: "center"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.paymentRequired") }),
+                  /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.stakingConfirm"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Typography, { children: headlines.amount })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          spacing: 1,
+          sx: {
+            justifyContent: "space-between",
+            alignItems: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                direction: "row",
+                spacing: 0.5,
+                sx: {
+                  alignItems: "center"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.staking.title") }),
+                  /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.staking.tooltip"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(Typography, { children: [
+              formatAmount(staking, currency.decimal),
+              " ",
+              currency.symbol
+            ] })
+          ]
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs(
       Stack,
       {
-        display: "flex",
-        justifyContent: "space-between",
-        flexDirection: "row",
-        alignItems: "center",
-        sx: { width: "100%" },
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          flexDirection: "row",
+          alignItems: "center",
+          width: "100%"
+        },
         children: [
           /* @__PURE__ */ jsxs(Box, { className: "base-label", children: [
             t("common.total"),

package/es/theme/index.d.ts

@@ -7,9 +7,4 @@ export declare function PaymentThemeProvider({ children, theme: customTheme, }:
     children: React.ReactNode;
     theme?: PaymentThemeOptions;
 }): JSX.Element;
-export declare namespace PaymentThemeProvider {
-    var defaultProps: {
-        theme: {};
-    };
-}
 export { typography };

package/es/theme/index.js

@@ -7,9 +7,6 @@ import { useMemo } from "react";
 import "./index.css";
 import "./types";
 import { typography } from "./typography.js";
-PaymentThemeProvider.defaultProps = {
-  theme: {}
-};
 export function PaymentThemeProvider({
   children,
   theme: customTheme = {}
@@ -261,7 +258,7 @@ export function PaymentThemeProvider({
                   backgroundColor: palette.chip.default.background,
                   borderColor: palette.chip.default.border
                 },
-                "&.MuiChip-filledSecondary": {
+                "&.MuiChip-filled.MuiChip-colorSecondary": {
                   color: palette.chip.secondary.text,
                   backgroundColor: palette.chip.secondary.background,
                   borderColor: palette.chip.secondary.border
@@ -276,7 +273,7 @@ export function PaymentThemeProvider({
                   backgroundColor: palette.chip.warning.background,
                   borderColor: palette.chip.warning.border
                 },
-                "&.MuiChip-filledPrimary,&.MuiChip-filledInfo": {
+                "&.MuiChip-filled.MuiChip-colorPrimary,&.MuiChip-filledInfo": {
                   color: palette.chip.info.text,
                   backgroundColor: palette.chip.info.background,
                   borderColor: palette.chip.info.border

package/es/theme/typography.d.ts

@@ -1,2 +1,2 @@
-import type { TypographyOptions } from '@mui/material/styles/createTypography';
-export declare const typography: TypographyOptions;
+import type { TypographyStyleOptions } from '@mui/material/styles/createTypography';
+export declare const typography: TypographyStyleOptions;

package/lib/checkout/donate.d.ts

@@ -50,18 +50,4 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     children?: (openDialog: () => void, donateTotalAmount: string, supporters: DonateHistory, loading?: boolean, donateSettings?: DonationSettings) => React.ReactNode;
 };
 export declare function DonateDetails({ supporters, currency, method }: DonateHistory): import("react").JSX.Element;
-declare function CheckoutDonate(props: DonateProps): import("react").JSX.Element;
-declare namespace CheckoutDonate {
-    var defaultProps: {
-        theme: string;
-        livemode: undefined;
-        timeout: number;
-        mode: string;
-        inlineOptions: {
-            button: {
-                text: string;
-            };
-        };
-    };
-}
-export default CheckoutDonate;
+export default function CheckoutDonate(rawProps: DonateProps): import("react").JSX.Element;