@blocklet/payment-react 1.18.56 → 1.19.1

package/lib/payment/product-item.js

@@ -7,33 +7,38 @@ module.exports = ProductItem;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
 var _react = require("react");
 var _status = _interopRequireDefault(require("../components/status"));
 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
-};
+var _payment = require("../contexts/payment");
+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
+  onDownsell,
+  completed = false,
+  adjustableQuantity = {
+    enabled: false
+  },
+  onQuantityChange = () => {}
 }) {
   const {
     t,
     locale
   } = (0, _context.useLocaleContext)();
+  const {
+    settings
+  } = (0, _payment.usePaymentContext)();
   const pricing = (0, _util.formatLineItemPricing)(item, currency, {
     trialEnd,
     trialInDays
@@ -41,6 +46,65 @@ function ProductItem({
   const saving = (0, _util.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 ? (0, _util.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] = (0, _react.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 ((0, _util.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: (0, _util.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 = (0, _react.useMemo)(() => {
     const price = item.upsell_price || item.price || {};
     const isRecurring = price?.type === "recurring" && price?.recurring;
@@ -50,44 +114,49 @@ function ProductItem({
     }
     return pricing.primary;
   }, [trialInDays, trialEnd, pricing, item, locale]);
+  const quantityInventoryError = (0, _util.formatQuantityInventory)(item.price, localQuantity, 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",
@@ -104,8 +173,8 @@ function ProductItem({
             children: pricing.secondary
           })]
         })]
-      }), (0, _util.formatQuantityInventory)(item.price, item.quantity, locale) ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
-        label: (0, _util.formatQuantityInventory)(item.price, item.quantity, locale),
+      }), quantityInventoryError ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+        label: quantityInventoryError,
         variant: "outlined",
         sx: {
           mt: 1,
@@ -113,15 +182,85 @@ function ProductItem({
           backgroundColor: "chip.error.background",
           color: "chip.error.text"
         }
-      }) : null, children]
+      }) : null, canAdjustQuantity && !completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          mt: 1,
+          p: 1
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          spacing: 1,
+          sx: {
+            alignItems: "center"
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            variant: "body2",
+            sx: {
+              color: "text.secondary",
+              minWidth: "fit-content"
+            },
+            children: [t("common.quantity"), ":"]
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+            size: "small",
+            onClick: handleQuantityDecrease,
+            disabled: localQuantity <= minQuantity,
+            sx: {
+              minWidth: 32,
+              width: 32,
+              height: 32
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Remove, {
+              fontSize: "small"
+            })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+            size: "small",
+            value: localQuantity,
+            onChange: handleQuantityInputChange,
+            sx: {
+              width: 60
+            },
+            type: "number",
+            slotProps: {
+              htmlInput: {
+                min: minQuantity,
+                max: maxQuantity,
+                style: {
+                  textAlign: "center",
+                  padding: "4px"
+                }
+              }
+            }
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+            size: "small",
+            onClick: handleQuantityIncrease,
+            disabled: localQuantity >= maxQuantity,
+            sx: {
+              minWidth: 32,
+              width: 32,
+              height: 32
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Add, {
+              fontSize: "small"
+            })
+          })]
+        })
+      }), isCreditProduct && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(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 +300,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

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