@blocklet/payment-react 1.18.56 → 1.19.1

package/es/payment/product-item.js

@@ -1,10 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Box, Stack, Typography } from "@mui/material";
-import { useMemo } from "react";
+import { Box, Stack, Typography, IconButton, TextField, Alert } from "@mui/material";
+import { Add, Remove } from "@mui/icons-material";
+import { useMemo, useState } from "react";
 import Status from "../components/status.js";
 import Switch from "../components/switch-button.js";
 import {
+  findCurrency,
   formatLineItemPricing,
   formatPrice,
   formatQuantityInventory,
@@ -13,27 +15,87 @@ 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
-};
+import { usePaymentContext } from "../contexts/payment.js";
 export default function ProductItem({
   item,
   items,
   trialInDays,
   trialEnd = 0,
   currency,
-  mode,
-  children,
+  mode = "normal",
+  children = null,
   onUpsell,
-  onDownsell
+  onDownsell,
+  completed = false,
+  adjustableQuantity = { enabled: false },
+  onQuantityChange = () => {
+  }
 }) {
   const { t, locale } = useLocaleContext();
+  const { settings } = usePaymentContext();
   const pricing = formatLineItemPricing(item, currency, { trialEnd, trialInDays }, locale);
   const saving = formatUpsellSaving(items, currency);
   const metered = item.price?.recurring?.usage_type === "metered" ? t("common.metered") : "";
   const canUpsell = mode === "normal" && items.length === 1;
+  const isCreditProduct = item.price.product?.type === "credit" && item.price.metadata?.credit_config?.credit_amount;
+  const creditAmount = isCreditProduct ? Number(item.price.metadata.credit_config.credit_amount) : 0;
+  const creditCurrency = isCreditProduct ? findCurrency(settings.paymentMethods, item.price.metadata?.credit_config?.currency_id ?? "") : null;
+  const validDuration = item.price.metadata?.credit_config?.valid_duration_value;
+  const validDurationUnit = item.price.metadata?.credit_config?.valid_duration_unit || "days";
+  const [localQuantity, setLocalQuantity] = useState(item.quantity);
+  const canAdjustQuantity = adjustableQuantity.enabled && mode === "normal";
+  const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
+  const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
+  const maxQuantity = Math.min(adjustableQuantity.maximum || 999, quantityAvailable || 999);
+  const handleQuantityChange = (newQuantity) => {
+    if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
+      setLocalQuantity(newQuantity);
+      if (formatQuantityInventory(item.price, newQuantity, locale)) {
+        return;
+      }
+      onQuantityChange(item.price_id, newQuantity);
+    }
+  };
+  const handleQuantityIncrease = () => {
+    if (localQuantity < maxQuantity) {
+      handleQuantityChange(localQuantity + 1);
+    }
+  };
+  const handleQuantityDecrease = () => {
+    if (localQuantity > minQuantity) {
+      handleQuantityChange(localQuantity - 1);
+    }
+  };
+  const handleQuantityInputChange = (event) => {
+    const value = parseInt(event.target.value, 10);
+    if (!Number.isNaN(value)) {
+      handleQuantityChange(value);
+    }
+  };
+  const formatCreditInfo = () => {
+    if (!isCreditProduct) return null;
+    const isRecurring = item.price.type === "recurring";
+    const totalCredit = creditAmount * localQuantity;
+    let message = "";
+    if (isRecurring) {
+      message = t("payment.checkout.credit.recurringInfo", {
+        amount: totalCredit,
+        period: formatRecurring(item.price.recurring, true, "per", locale)
+      });
+    } else {
+      message = t("payment.checkout.credit.oneTimeInfo", {
+        amount: totalCredit,
+        symbol: creditCurrency?.symbol || "Credits"
+      });
+    }
+    if (validDuration && validDuration > 0) {
+      message += `\uFF0C${t("payment.checkout.credit.expiresIn", {
+        duration: validDuration,
+        unit: t(`common.${validDurationUnit}`)
+      })}`;
+    }
+    return message;
+  };
   const primaryText = useMemo(() => {
     const price = item.upsell_price || item.price || {};
     const isRecurring = price?.type === "recurring" && price?.recurring;
@@ -43,140 +105,253 @@ 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)
+  const quantityInventoryError = formatQuantityInventory(item.price, localQuantity, locale);
+  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 })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              quantityInventoryError ? /* @__PURE__ */ jsx(
+                Status,
+                {
+                  label: quantityInventoryError,
+                  variant: "outlined",
+                  sx: {
+                    mt: 1,
+                    borderColor: "chip.error.border",
+                    backgroundColor: "chip.error.background",
+                    color: "chip.error.text"
                   }
-                ),
-                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",
-        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,
+              canAdjustQuantity && !completed && /* @__PURE__ */ jsx(Box, { sx: { mt: 1, p: 1 }, children: /* @__PURE__ */ jsxs(
+                Stack,
+                {
+                  direction: "row",
+                  spacing: 1,
+                  sx: {
+                    alignItems: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      Typography,
+                      {
+                        variant: "body2",
+                        sx: {
+                          color: "text.secondary",
+                          minWidth: "fit-content"
+                        },
+                        children: [
+                          t("common.quantity"),
+                          ":"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        size: "small",
+                        onClick: handleQuantityDecrease,
+                        disabled: localQuantity <= minQuantity,
+                        sx: { minWidth: 32, width: 32, height: 32 },
+                        children: /* @__PURE__ */ jsx(Remove, { fontSize: "small" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      TextField,
+                      {
+                        size: "small",
+                        value: localQuantity,
+                        onChange: handleQuantityInputChange,
+                        sx: { width: 60 },
+                        type: "number",
+                        slotProps: {
+                          htmlInput: {
+                            min: minQuantity,
+                            max: maxQuantity,
+                            style: { textAlign: "center", padding: "4px" }
+                          }
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        size: "small",
+                        onClick: handleQuantityIncrease,
+                        disabled: localQuantity >= maxQuantity,
+                        sx: { minWidth: 32, width: 32, height: 32 },
+                        children: /* @__PURE__ */ jsx(Add, { fontSize: "small" })
+                      }
+                    )
+                  ]
+                }
+              ) }),
+              isCreditProduct && /* @__PURE__ */ jsx(Alert, { severity: "info", sx: { mt: 1, fontSize: "0.875rem" }, icon: false, children: formatCreditInfo() }),
+              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 {};