@blocklet/payment-react 1.18.55 → 1.19.0

package/es/payment/product-item.js

@@ -13,19 +13,14 @@ import {
 } from "../libs/util.js";
 import ProductCard from "./product-card.js";
 import dayjs from "../libs/dayjs.js";
-ProductItem.defaultProps = {
-  mode: "normal",
-  children: null,
-  trialEnd: 0
-};
 export default function ProductItem({
   item,
   items,
   trialInDays,
   trialEnd = 0,
   currency,
-  mode,
-  children,
+  mode = "normal",
+  children = null,
   onUpsell,
   onDownsell
 }) {
@@ -43,140 +38,188 @@ export default function ProductItem({
     }
     return pricing.primary;
   }, [trialInDays, trialEnd, pricing, item, locale]);
-  return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", spacing: 1, sx: { width: "100%" }, className: "product-item", children: [
-    /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", sx: { width: "100%" }, className: "product-item-content", children: [
-      /* @__PURE__ */ jsxs(
-        Stack,
-        {
-          direction: "row",
-          alignItems: "center",
-          flexWrap: "wrap",
-          spacing: 0.5,
-          justifyContent: "space-between",
-          sx: { width: "100%" },
-          children: [
-            /* @__PURE__ */ jsx(
-              ProductCard,
-              {
-                logo: item.price.product?.images[0],
-                name: item.price.product?.name,
-                extra: /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", children: item.price.type === "recurring" && item.price.recurring ? [pricing.quantity, t("common.billed", { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, "per", locale)} ${metered}` })].filter(Boolean).join(", ") : pricing.quantity })
-              }
-            ),
-            /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-end", flex: 1, children: [
-              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 500, whiteSpace: "nowrap" }, gutterBottom: true, children: primaryText }),
-              pricing.secondary && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.74375rem", color: "text.lighter" }, children: pricing.secondary })
-            ] })
-          ]
-        }
-      ),
-      formatQuantityInventory(item.price, item.quantity, locale) ? /* @__PURE__ */ jsx(
-        Status,
-        {
-          label: formatQuantityInventory(item.price, item.quantity, locale),
-          variant: "outlined",
-          sx: {
-            mt: 1,
-            borderColor: "chip.error.border",
-            backgroundColor: "chip.error.background",
-            color: "chip.error.text"
-          }
-        }
-      ) : null,
-      children
-    ] }),
-    canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && /* @__PURE__ */ jsxs(
-      Stack,
-      {
-        direction: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        sx: { width: "100%" },
-        className: "product-item-upsell",
-        children: [
-          /* @__PURE__ */ jsxs(
-            Typography,
-            {
-              component: "label",
-              htmlFor: "upsell-switch",
-              sx: {
-                fontSize: 12,
-                cursor: "pointer",
-                color: "text.secondary"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  Switch,
-                  {
-                    id: "upsell-switch",
-                    sx: { mr: 1 },
-                    variant: "success",
-                    checked: false,
-                    onChange: () => onUpsell(item.price_id, item.price.upsell?.upsells_to_id)
-                  }
-                ),
-                t("payment.checkout.upsell.save", {
-                  recurring: formatRecurring(item.price.upsell.upsells_to.recurring, true, "per", locale)
-                }),
-                /* @__PURE__ */ jsx(
-                  Status,
-                  {
-                    label: t("payment.checkout.upsell.off", { saving }),
-                    variant: "outlined",
-                    sx: {
-                      ml: 1,
-                      borderColor: "chip.warning.border",
-                      backgroundColor: "chip.warning.background",
-                      color: "chip.warning.text"
-                    }
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "column",
+      spacing: 1,
+      className: "product-item",
+      sx: {
+        alignItems: "flex-start",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "column",
+            className: "product-item-content",
+            sx: {
+              alignItems: "flex-start",
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                Stack,
+                {
+                  direction: "row",
+                  spacing: 0.5,
+                  sx: {
+                    alignItems: "center",
+                    flexWrap: "wrap",
+                    justifyContent: "space-between",
+                    width: "100%"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      ProductCard,
+                      {
+                        logo: item.price.product?.images[0],
+                        name: item.price.product?.name,
+                        extra: /* @__PURE__ */ jsx(
+                          Box,
+                          {
+                            sx: {
+                              display: "flex",
+                              alignItems: "center"
+                            },
+                            children: item.price.type === "recurring" && item.price.recurring ? [pricing.quantity, t("common.billed", { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, "per", locale)} ${metered}` })].filter(Boolean).join(", ") : pricing.quantity
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      Stack,
+                      {
+                        direction: "column",
+                        sx: {
+                          alignItems: "flex-end",
+                          flex: 1
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 500, whiteSpace: "nowrap" }, gutterBottom: true, children: primaryText }),
+                          pricing.secondary && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.74375rem", color: "text.lighter" }, children: pricing.secondary })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              formatQuantityInventory(item.price, item.quantity, locale) ? /* @__PURE__ */ jsx(
+                Status,
+                {
+                  label: formatQuantityInventory(item.price, item.quantity, locale),
+                  variant: "outlined",
+                  sx: {
+                    mt: 1,
+                    borderColor: "chip.error.border",
+                    backgroundColor: "chip.error.background",
+                    color: "chip.error.text"
                   }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 12 }, children: formatPrice(item.price.upsell.upsells_to, currency, item.price.product?.unit_label, 1, true, locale) })
-        ]
-      }
-    ),
-    canUpsell && item.upsell_price_id && /* @__PURE__ */ jsxs(
-      Stack,
-      {
-        direction: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        sx: { width: "100%" },
-        className: "product-item-upsell",
-        children: [
-          /* @__PURE__ */ jsxs(
-            Typography,
-            {
-              component: "label",
-              htmlFor: "upsell-switch",
-              sx: {
-                fontSize: 12,
-                cursor: "pointer",
-                color: "text.secondary"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  Switch,
-                  {
-                    id: "upsell-switch",
-                    sx: { mr: 1 },
-                    variant: "success",
-                    checked: true,
-                    onChange: () => onDownsell(item.upsell_price_id)
-                  }
-                ),
-                t("payment.checkout.upsell.revert", {
-                  recurring: t(`common.${formatRecurring(item.price.recurring)}`)
-                })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 12 }, children: formatPrice(item.price, currency, item.price.product?.unit_label, 1, true, locale) })
-        ]
-      }
-    )
-  ] });
+                }
+              ) : null,
+              children
+            ]
+          }
+        ),
+        canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "row",
+            className: "product-item-upsell",
+            sx: {
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                Typography,
+                {
+                  component: "label",
+                  htmlFor: "upsell-switch",
+                  sx: {
+                    fontSize: 12,
+                    cursor: "pointer",
+                    color: "text.secondary"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Switch,
+                      {
+                        id: "upsell-switch",
+                        sx: { mr: 1 },
+                        variant: "success",
+                        checked: false,
+                        onChange: () => onUpsell(item.price_id, item.price.upsell?.upsells_to_id)
+                      }
+                    ),
+                    t("payment.checkout.upsell.save", {
+                      recurring: formatRecurring(item.price.upsell.upsells_to.recurring, true, "per", locale)
+                    }),
+                    /* @__PURE__ */ jsx(
+                      Status,
+                      {
+                        label: t("payment.checkout.upsell.off", { saving }),
+                        variant: "outlined",
+                        sx: {
+                          ml: 1,
+                          borderColor: "chip.warning.border",
+                          backgroundColor: "chip.warning.background",
+                          color: "chip.warning.text"
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 12 }, children: formatPrice(item.price.upsell.upsells_to, currency, item.price.product?.unit_label, 1, true, locale) })
+            ]
+          }
+        ),
+        canUpsell && item.upsell_price_id && /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "row",
+            className: "product-item-upsell",
+            sx: {
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                Typography,
+                {
+                  component: "label",
+                  htmlFor: "upsell-switch",
+                  sx: {
+                    fontSize: 12,
+                    cursor: "pointer",
+                    color: "text.secondary"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Switch,
+                      {
+                        id: "upsell-switch",
+                        sx: { mr: 1 },
+                        variant: "success",
+                        checked: true,
+                        onChange: () => onDownsell(item.upsell_price_id)
+                      }
+                    ),
+                    t("payment.checkout.upsell.revert", {
+                      recurring: t(`common.${formatRecurring(item.price.recurring)}`)
+                    })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 12 }, children: formatPrice(item.price, currency, item.price.product?.unit_label, 1, true, locale) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }

package/es/payment/product-skeleton.js

@@ -5,10 +5,10 @@ export default function ProductSkeleton({ count }) {
     Stack,
     {
       direction: "column",
-      alignItems: "center",
-      padding: 4,
       spacing: 1,
       sx: {
+        alignItems: "center",
+        padding: 4,
         width: 320,
         border: "1px solid",
         borderColor: "grey.100",

package/es/payment/skeleton/donation.js

@@ -19,12 +19,32 @@ export default function DonationSkeleton() {
         }
       }
     ),
-    /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", spacing: 2, children: [
-      /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1.5rem", width: "40%" } }),
-      /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [
-        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Skeleton, { height: 60, width: 80 }) }),
-        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Skeleton, { height: 60, width: 120 }) })
-      ] })
-    ] })
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        spacing: 2,
+        sx: {
+          justifyContent: "space-between"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1.5rem", width: "40%" } }),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 2
+              },
+              children: [
+                /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Skeleton, { height: 60, width: 80 }) }),
+                /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Skeleton, { height: 60, width: 120 }) })
+              ]
+            }
+          )
+        ]
+      }
+    )
   ] }) });
 }

package/es/payment/skeleton/overview.js

@@ -2,9 +2,29 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Fade, Skeleton, Stack, Typography } from "@mui/material";
 export default function OverviewSkeleton() {
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
-    /* @__PURE__ */ jsx(Stack, { direction: "row", alignItems: "center", spacing: 2, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1.75rem", width: "40%" } }) }),
+    /* @__PURE__ */ jsx(
+      Stack,
+      {
+        direction: "row",
+        spacing: 2,
+        sx: {
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1.75rem", width: "40%" } })
+      }
+    ),
     /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 2 }, variant: "rounded", height: 100 }),
-    /* @__PURE__ */ jsx(Typography, { mt: 2, component: "div", variant: "h4", children: /* @__PURE__ */ jsx(Skeleton, {}) }),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        component: "div",
+        variant: "h4",
+        sx: {
+          mt: 2
+        },
+        children: /* @__PURE__ */ jsx(Skeleton, {})
+      }
+    ),
     /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h2", children: /* @__PURE__ */ jsx(Skeleton, {}) })
   ] }) });
 }

package/es/payment/skeleton/payment.js

@@ -4,12 +4,40 @@ export default function PaymentSkeleton() {
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
     /* @__PURE__ */ jsx(Skeleton, { variant: "text", sx: { fontSize: "1.75rem", width: "40%" } }),
     /* @__PURE__ */ jsx(Skeleton, { sx: { mt: 2 }, variant: "rounded", height: 68 }),
-    /* @__PURE__ */ jsxs(Box, { mt: 1, children: [
-      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", mb: -1, children: /* @__PURE__ */ jsx(Skeleton, {}) }),
-      /* @__PURE__ */ jsx(Typography, { component: "div", children: /* @__PURE__ */ jsx(Skeleton, { height: 60 }) })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          mt: 1
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              component: "div",
+              variant: "h4",
+              sx: {
+                mb: -1
+              },
+              children: /* @__PURE__ */ jsx(Skeleton, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { component: "div", children: /* @__PURE__ */ jsx(Skeleton, { height: 60 }) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Typography, { component: "div", variant: "h4", mb: -1, children: /* @__PURE__ */ jsx(Skeleton, {}) }),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          component: "div",
+          variant: "h4",
+          sx: {
+            mb: -1
+          },
+          children: /* @__PURE__ */ jsx(Skeleton, {})
+        }
+      ),
       /* @__PURE__ */ jsx(Typography, { component: "div", children: /* @__PURE__ */ jsx(Skeleton, { height: 60 }) })
     ] }),
     /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Skeleton, { height: 60 }) })

package/es/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/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

@@ -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 {};