@blocklet/payment-react 1.19.0 → 1.19.1

package/es/locales/zh.js

@@ -31,6 +31,10 @@ export default flat({
     change: "\u66F4\u6362",
     confirm: "\u786E\u8BA4",
     cancel: "\u53D6\u6D88",
+    clear: "\u6E05\u7A7A",
+    selectTimeRange: "\u9009\u62E9\u65F6\u95F4\u8303\u56F4",
+    startDate: "\u5F00\u59CB\u65E5\u671F",
+    endDate: "\u7ED3\u675F\u65E5\u671F",
     close: "\u5173\u95ED",
     back: "\u8FD4\u56DE",
     every: "\u6BCF",
@@ -100,7 +104,8 @@ export default flat({
       scan: "\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\u5B8C\u6210\u672C\u6B21{action}",
       confirm: "\u786E\u8BA4",
       cancel: "\u53D6\u6D88"
-    }
+    },
+    paymentMethod: "\u652F\u4ED8\u65B9\u5F0F"
   },
   payment: {
     checkout: {
@@ -212,6 +217,11 @@ export default flat({
         add: "\u6DFB\u52A0\u5230\u8BA2\u5355",
         remove: "\u4ECE\u8BA2\u5355\u79FB\u9664"
       },
+      credit: {
+        oneTimeInfo: "\u4ED8\u6B3E\u5B8C\u6210\u540E\u60A8\u5C06\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6",
+        recurringInfo: "\u60A8\u5C06{period}\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6",
+        expiresIn: "\u989D\u5EA6\u6709\u6548\u671F\u4E3A {duration} {unit}"
+      },
       emptyItems: {
         title: "\u6CA1\u6709\u4EFB\u4F55\u8D2D\u4E70\u9879\u76EE",
         description: "\u53EF\u80FD\u8FD9\u4E2A\u4ED8\u6B3E\u94FE\u63A5\u6CA1\u6709\u6B63\u786E\u914D\u7F6E"
@@ -232,7 +242,15 @@ export default flat({
         payer: "\u8D26\u6237\u5730\u5740",
         amount: "\u652F\u4ED8\u91D1\u989D",
         failed: "\u8D26\u6237\u53D1\u751F\u53D8\u5316\uFF0C\u65E0\u6CD5\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\uFF0C\u8BF7\u624B\u52A8\u652F\u4ED8\u3002",
-        balanceLink: "\u67E5\u770B\u4F59\u989D"
+        balanceLink: "\u67E5\u770B\u4F59\u989D",
+        credit: {
+          title: "\u786E\u8BA4\u989D\u5EA6\u652F\u4ED8",
+          availableAmount: "\u53EF\u7528\u989D\u5EA6\uFF1A{amount}",
+          confirmMessage: "\u60A8\u5C06\u4F7F\u7528 {amount} \u989D\u5EA6\u6765\u8BA2\u9605\u6B64\u670D\u52A1\u3002",
+          meteringSubscriptionMessage: "\u6B64\u8BA2\u9605\u670D\u52A1\u5C06\u6839\u636E\u5B9E\u9645\u4F7F\u7528\u60C5\u51B5\u5B9E\u65F6\u6263\u9664\u989D\u5EA6\u3002\u60A8\u5F53\u524D\u53EF\u7528\u989D\u5EA6\u4E3A {available}\uFF0C\u786E\u8BA4\u662F\u5426\u7EE7\u7EED\uFF1F",
+          insufficientTitle: "\u989D\u5EA6\u4E0D\u8DB3",
+          insufficientMessage: "\u6B64\u8BA2\u9605\u670D\u52A1\u5C06\u6839\u636E\u5B9E\u9645\u4F7F\u7528\u60C5\u51B5\u5B9E\u65F6\u6263\u9664\u989D\u5EA6\u3002\u60A8\u5F53\u524D\u53EF\u7528\u989D\u5EA6\u4E0D\u8DB3\uFF0C\u8BF7\u5148\u5145\u503C\u989D\u5EA6\u3002"
+        }
       }
     },
     customer: {

package/es/payment/form/index.js

@@ -131,7 +131,8 @@ export default function PaymentForm({
     customer,
     customerLimited: false,
     stripePaying: false,
-    fastCheckoutInfo: null
+    fastCheckoutInfo: null,
+    creditInsufficientInfo: null
   });
   const currencies = flattenPaymentMethods(paymentMethods);
   const onCheckoutComplete = useMemoizedFn(async ({ response }) => {
@@ -300,6 +301,9 @@ export default function PaymentForm({
   const handleFastCheckoutCancel = () => {
     setState({ fastCheckoutInfo: null });
   };
+  const handleCreditInsufficientClose = () => {
+    setState({ creditInsufficientInfo: null });
+  };
   const openConnect = () => {
     try {
       if (!["arcblock", "ethereum", "base"].includes(method.type)) {
@@ -355,7 +359,27 @@ export default function PaymentForm({
         customerLimited: false
       });
       if (["arcblock", "ethereum", "base"].includes(method.type)) {
-        if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode && result.data.fastPayInfo) {
+        if (paymentCurrency?.type === "credit") {
+          if (result.data.creditSufficient === true) {
+            setState({
+              fastCheckoutInfo: {
+                open: true,
+                loading: false,
+                sourceType: "credit",
+                amount: result.data.fastPayInfo?.amount || "0",
+                payer: result.data.fastPayInfo?.payer,
+                availableCredit: result.data.fastPayInfo?.amount || "0",
+                balance: result.data.fastPayInfo?.token?.balance || "0"
+              }
+            });
+          } else {
+            setState({
+              creditInsufficientInfo: {
+                open: true
+              }
+            });
+          }
+        } else if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode && result.data.fastPayInfo) {
           setState({
             fastCheckoutInfo: {
               open: true,
@@ -445,8 +469,10 @@ export default function PaymentForm({
     {
       onConfirm: handleFastCheckoutConfirm,
       onCancel: handleFastCheckoutCancel,
-      title: t("payment.checkout.fastPay.title"),
-      message: /* @__PURE__ */ jsxs(Stack, { children: [
+      title: state.fastCheckoutInfo.sourceType === "credit" ? t("payment.checkout.fastPay.credit.title") : t("payment.checkout.fastPay.title"),
+      message: state.fastCheckoutInfo.sourceType === "credit" ? /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.credit.meteringSubscriptionMessage", {
+        available: `${fromUnitToToken(state.fastCheckoutInfo?.balance || "0", paymentCurrency?.decimal || 18).toString()} ${paymentCurrency?.symbol}`
+      }) }) : /* @__PURE__ */ jsxs(Stack, { children: [
         /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.autoPaymentReason") }),
         /* @__PURE__ */ jsx(Divider, { sx: { mt: 1.5, mb: 1.5 } }),
         /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
@@ -521,6 +547,16 @@ export default function PaymentForm({
       color: "primary"
     }
   );
+  const CreditInsufficientDialog = state.creditInsufficientInfo && /* @__PURE__ */ jsx(
+    ConfirmDialog,
+    {
+      onConfirm: handleCreditInsufficientClose,
+      onCancel: handleCreditInsufficientClose,
+      title: t("payment.checkout.fastPay.credit.insufficientTitle"),
+      message: /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.credit.insufficientMessage") }),
+      confirm: t("common.confirm")
+    }
+  );
   if (onlyShowBtn) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsxs(
@@ -573,7 +609,8 @@ export default function PaymentForm({
           }
         }
       ),
-      FastCheckoutConfirmDialog
+      FastCheckoutConfirmDialog,
+      CreditInsufficientDialog
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -768,6 +805,7 @@ export default function PaymentForm({
         }
       }
     ),
-    FastCheckoutConfirmDialog
+    FastCheckoutConfirmDialog,
+    CreditInsufficientDialog
   ] });
 }

package/es/payment/index.js

@@ -18,7 +18,8 @@ import {
   getQueryParams,
   getStatementDescriptor,
   isMobileSafari,
-  isValidCountry
+  isValidCountry,
+  showStaking
 } from "../libs/util.js";
 import PaymentError from "./error.js";
 import CheckoutFooter from "./footer.js";
@@ -166,6 +167,18 @@ function PaymentInner({
       Toast.error(formatError(err));
     }
   };
+  const onQuantityChange = async (itemId, quantity) => {
+    try {
+      const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/adjust-quantity`, {
+        itemId,
+        quantity
+      });
+      setState({ checkoutSession: data });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
   const onCancelCrossSell = async () => {
     try {
       const { data } = await api.delete(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`);
@@ -211,17 +224,19 @@ function PaymentInner({
             // @ts-ignore
             state.checkoutSession.subscription_data?.min_stake_amount || 0
           ),
-          showStaking: method.type === "arcblock" && !state.checkoutSession.subscription_data?.no_stake,
+          showStaking: showStaking(method, currency, !!state.checkoutSession.subscription_data?.no_stake),
           currency,
           onUpsell,
           onDownsell,
+          onQuantityChange,
           onApplyCrossSell,
           onCancelCrossSell,
           onChangeAmount,
           checkoutSessionId: state.checkoutSession.id,
           crossSellBehavior: state.checkoutSession.cross_sell_behavior,
           donationSettings: paymentLink?.donation_settings,
-          action
+          action,
+          completed
         }
       ),
       mode === "standalone" && !isMobile && /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer", sx: { color: "text.lighter" } })

package/es/payment/product-item.d.ts

@@ -10,6 +10,13 @@ type Props = {
     onDownsell: Function;
     mode?: 'normal' | 'cross-sell';
     children?: React.ReactNode;
+    adjustableQuantity?: {
+        enabled: boolean;
+        minimum?: number;
+        maximum?: number;
+    };
+    onQuantityChange?: (itemId: string, quantity: number) => void;
+    completed?: boolean;
 };
-export default function ProductItem({ item, items, trialInDays, trialEnd, currency, mode, children, onUpsell, onDownsell, }: Props): JSX.Element;
+export default function ProductItem({ item, items, trialInDays, trialEnd, currency, mode, children, onUpsell, onDownsell, completed, adjustableQuantity, onQuantityChange, }: Props): JSX.Element;
 export {};

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,6 +15,7 @@ import {
 } from "../libs/util.js";
 import ProductCard from "./product-card.js";
 import dayjs from "../libs/dayjs.js";
+import { usePaymentContext } from "../contexts/payment.js";
 export default function ProductItem({
   item,
   items,
@@ -22,13 +25,77 @@ export default function ProductItem({
   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;
@@ -38,6 +105,7 @@ export default function ProductItem({
     }
     return pricing.primary;
   }, [trialInDays, trialEnd, pricing, item, locale]);
+  const quantityInventoryError = formatQuantityInventory(item.price, localQuantity, locale);
   return /* @__PURE__ */ jsxs(
     Stack,
     {
@@ -105,10 +173,10 @@ export default function ProductItem({
                   ]
                 }
               ),
-              formatQuantityInventory(item.price, item.quantity, locale) ? /* @__PURE__ */ jsx(
+              quantityInventoryError ? /* @__PURE__ */ jsx(
                 Status,
                 {
-                  label: formatQuantityInventory(item.price, item.quantity, locale),
+                  label: quantityInventoryError,
                   variant: "outlined",
                   sx: {
                     mt: 1,
@@ -118,6 +186,70 @@ export default function ProductItem({
                   }
                 }
               ) : 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
             ]
           }

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,6 +16,7 @@ type Props = {
     crossSellBehavior?: string;
     donationSettings?: DonationSettings;
     action?: string;
+    completed?: boolean;
 };
-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 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

@@ -73,6 +73,7 @@ export default function PaymentSummary({
   billingThreshold,
   onUpsell = noop,
   onDownsell = noop,
+  onQuantityChange = noop,
   onApplyCrossSell = noop,
   onCancelCrossSell = noop,
   onChangeAmount = noop,
@@ -82,6 +83,7 @@ export default function PaymentSummary({
   donationSettings = void 0,
   action = "",
   trialEnd = 0,
+  completed = false,
   ...rest
 }) {
   const { t, locale } = useLocaleContext();
@@ -111,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();
@@ -166,6 +172,9 @@ export default function PaymentSummary({
               currency,
               onUpsell: handleUpsell,
               onDownsell: handleDownsell,
+              adjustableQuantity: x.adjustable_quantity,
+              completed,
+              onQuantityChange: handleQuantityChange,
               children: x.cross_sell && /* @__PURE__ */ jsxs(
                 Stack,
                 {

package/lib/components/blockchain/tx.d.ts

@@ -1,5 +1,5 @@
 import type { PaymentDetails, TPaymentMethod } from '@blocklet/payment-types';
-export default function TxLink(rawProps: {
+export default function TxLink({ details, method, mode, align, }: {
     details: PaymentDetails;
     method: TPaymentMethod;
     mode?: 'customer' | 'dashboard';

package/lib/components/blockchain/tx.js

@@ -10,15 +10,16 @@ var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
 var _system = require("@mui/system");
 var _util = require("../../libs/util");
-function TxLink(rawProps) {
-  const props = Object.assign({
-    mode: "dashboard",
-    align: "left"
-  }, rawProps);
+function TxLink({
+  details,
+  method,
+  mode = "dashboard",
+  align = "left"
+}) {
   const {
     t
   } = (0, _context.useLocaleContext)();
-  if (!props.details || props.mode === "customer" && props.method.type === "stripe") {
+  if (!details || mode === "customer" && method.type === "stripe") {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       component: "small",
       sx: {
@@ -30,7 +31,7 @@ function TxLink(rawProps) {
   const {
     text,
     link
-  } = (0, _util.getTxLink)(props.method, props.details);
+  } = (0, _util.getTxLink)(method, details);
   if (link && text) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
       href: link,
@@ -39,7 +40,7 @@ function TxLink(rawProps) {
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
         direction: "row",
         alignItems: "center",
-        justifyContent: props.align === "left" ? "flex-start" : "flex-end",
+        justifyContent: align === "left" ? "flex-start" : "flex-end",
         sx: {
           color: "text.link"
         },

package/lib/components/country-select.d.ts

@@ -8,5 +8,5 @@ export type CountrySelectProps = {
     showDialCode?: boolean;
 };
 export default function CountrySelect({ ref, value, onChange, name, sx, showDialCode, }: CountrySelectProps & {
-    ref?: React.RefObject<HTMLDivElement>;
+    ref?: React.RefObject<HTMLDivElement | null>;
 }): import("react").JSX.Element;

package/lib/components/date-range-picker.d.ts

@@ -0,0 +1,13 @@
+export interface DateRangeValue {
+    start: number | undefined;
+    end: number | undefined;
+}
+export interface DateRangePickerProps {
+    value: DateRangeValue;
+    onChange: (value: DateRangeValue) => void;
+    label?: string;
+    size?: 'small' | 'medium';
+    fullWidth?: boolean;
+    disabled?: boolean;
+}
+export default function DateRangePicker({ value, onChange, label, size, fullWidth, disabled, }: DateRangePickerProps): import("react").JSX.Element;