@blocklet/payment-react 1.25.9 → 1.26.0

package/lib/checkout-v2/components/left/promotion-input.d.ts

@@ -0,0 +1,19 @@
+interface PromotionInputProps {
+    promotion: {
+        applied: boolean;
+        code: string | null;
+        active: boolean;
+        inactiveReason: string | null;
+        apply: (code: string) => Promise<{
+            success: boolean;
+            error?: string;
+        }>;
+        remove: () => Promise<void>;
+    };
+    discounts: any[];
+    discountAmount: string | null;
+    /** Start with input field visible (skip the "Add promotion code" button) */
+    initialShowInput?: boolean;
+}
+export default function PromotionInput({ promotion, discounts, discountAmount, initialShowInput, }: PromotionInputProps): import("react").JSX.Element | null;
+export {};

package/lib/checkout-v2/components/left/promotion-input.js

@@ -0,0 +1,220 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = PromotionInput;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+var _LocalOffer = _interopRequireDefault(require("@mui/icons-material/LocalOffer"));
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function PromotionInput({
+  promotion,
+  discounts,
+  discountAmount,
+  initialShowInput = false
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [showInput, setShowInput] = (0, _react.useState)(false);
+  const [code, setCode] = (0, _react.useState)("");
+  const [applying, setApplying] = (0, _react.useState)(false);
+  const [error, setError] = (0, _react.useState)("");
+  const effectiveShowInput = initialShowInput || showInput;
+  const handleApply = async () => {
+    if (!code.trim()) return;
+    setApplying(true);
+    setError("");
+    const result = await promotion.apply(code.trim());
+    if (!result.success) {
+      setError(result.error || "Invalid code");
+    } else {
+      setCode("");
+      setShowInput(false);
+    }
+    setApplying(false);
+  };
+  const handleKeyPress = event => {
+    if (event.key === "Enter" && !applying && code.trim()) {
+      handleApply();
+    }
+  };
+  if (discounts?.length > 0) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      children: discounts.map((disc, i) => {
+        const discCode = disc.promotion_code_details?.code || disc.verification_data?.code || disc.promotion_code || "";
+        const coupon = disc.coupon_details || {};
+        const couponOff = coupon.percent_off > 0 ? t("payment.checkout.coupon.percentage", {
+          percent: coupon.percent_off
+        }) : `${coupon.percent_off || 0}%`;
+        let description = "";
+        if (coupon.duration === "repeating" && coupon.duration_in_months) {
+          const months = coupon.duration_in_months;
+          description = `${couponOff} for ${months} month${months > 1 ? "s" : ""}`;
+        } else if (coupon.duration === "forever") {
+          description = t("payment.checkout.coupon.terms.forever", {
+            couponOff
+          });
+        } else if (coupon.duration === "once") {
+          description = t("payment.checkout.coupon.terms.once", {
+            couponOff
+          });
+        }
+        return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            alignItems: "center",
+            spacing: 0.5,
+            sx: {
+              bgcolor: theme => theme.palette.mode === "dark" ? "rgba(18,184,134,0.1)" : "#ebfef5",
+              px: 1.5,
+              py: 0.5,
+              borderRadius: "8px",
+              border: "1px solid",
+              borderColor: theme => theme.palette.mode === "dark" ? "rgba(18,184,134,0.2)" : "#d3f9e8"
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_LocalOffer.default, {
+              sx: {
+                color: "#12b886",
+                fontSize: 14
+              }
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                fontWeight: 700,
+                fontSize: 13,
+                color: "#12b886"
+              },
+              children: discCode
+            }), description && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+              sx: {
+                fontSize: 12,
+                color: "#12b886",
+                fontWeight: 500,
+                opacity: 0.8
+              },
+              children: ["\xB7 ", description]
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+              size: "small",
+              onClick: promotion.remove,
+              sx: {
+                width: 18,
+                height: 18,
+                ml: 0.25
+              },
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Close.default, {
+                sx: {
+                  fontSize: 12,
+                  color: "#12b886"
+                }
+              })
+            })]
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            sx: {
+              color: "text.primary",
+              fontWeight: 600,
+              fontSize: 14
+            },
+            children: ["-", discountAmount || "0"]
+          })]
+        }, disc.promotion_code || disc.coupon || i);
+      })
+    });
+  }
+  if (!promotion.active) return null;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+    sx: {
+      minHeight: 36
+    },
+    children: effectiveShowInput ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      onBlur: e => {
+        if (initialShowInput) return;
+        if (!e.currentTarget.contains(e.relatedTarget) && !code.trim()) {
+          setShowInput(false);
+        }
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+        fullWidth: true,
+        size: "small",
+        value: code,
+        onChange: e => setCode(e.target.value),
+        onKeyPress: handleKeyPress,
+        placeholder: t("payment.checkout.promotion.placeholder"),
+        disabled: applying,
+        autoFocus: true,
+        slotProps: {
+          input: {
+            endAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+              position: "end",
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+                size: "small",
+                onClick: handleApply,
+                disabled: !code.trim() || applying,
+                variant: "text",
+                sx: {
+                  color: "primary.main",
+                  fontSize: 13,
+                  textTransform: "none",
+                  minWidth: "auto",
+                  fontWeight: 600
+                },
+                children: applying ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+                  size: 16
+                }) : t("payment.checkout.promotion.apply")
+              })
+            })
+          }
+        },
+        sx: {
+          "& .MuiOutlinedInput-root": {
+            pr: 1,
+            borderRadius: "8px",
+            height: 36
+          },
+          "& .MuiOutlinedInput-input": {
+            py: "6px",
+            fontSize: 13
+          }
+        }
+      }), error && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
+        severity: "error",
+        sx: {
+          mt: 0.5,
+          py: 0,
+          fontSize: 12,
+          borderRadius: "6px"
+        },
+        children: error
+      })]
+    }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+      onClick: () => setShowInput(true),
+      startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Add.default, {
+        sx: {
+          fontSize: 18
+        }
+      }),
+      variant: "text",
+      sx: {
+        fontWeight: 600,
+        fontSize: 13,
+        textTransform: "none",
+        justifyContent: "flex-start",
+        p: 0,
+        height: 36,
+        color: "primary.main",
+        "&:hover": {
+          backgroundColor: "transparent",
+          textDecoration: "underline"
+        }
+      },
+      children: t("payment.checkout.promotion.add_code")
+    })
+  });
+}

package/lib/checkout-v2/components/left/staking-breakdown.d.ts

@@ -0,0 +1,9 @@
+interface StakingBreakdownProps {
+    staking: string;
+    paymentAmount: string;
+    trialActive: boolean;
+    trialDays: number;
+    afterTrialInterval: string | null;
+}
+export default function StakingBreakdown({ staking, paymentAmount, trialActive, trialDays, afterTrialInterval, }: StakingBreakdownProps): import("react").JSX.Element;
+export {};

package/lib/checkout-v2/components/left/staking-breakdown.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = StakingBreakdown;
+var _jsxRuntime = require("react/jsx-runtime");
+var _HelpOutline = _interopRequireDefault(require("@mui/icons-material/HelpOutline"));
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _format = require("../../utils/format");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function StakingBreakdown({
+  staking,
+  paymentAmount,
+  trialActive,
+  trialDays,
+  afterTrialInterval
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    spacing: 1,
+    sx: {
+      mb: 1
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 0.5,
+        alignItems: "center",
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            color: "text.secondary",
+            fontSize: 14
+          },
+          children: t("payment.checkout.paymentRequired")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+          title: t("payment.checkout.stakingConfirm"),
+          placement: "top",
+          arrow: true,
+          slotProps: {
+            popper: {
+              sx: _format.whiteTooltipSx
+            }
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_HelpOutline.default, {
+            sx: {
+              fontSize: 16,
+              color: "text.disabled"
+            }
+          })
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: trialActive ? (0, _format.formatTrialText)(t, trialDays, afterTrialInterval || "day") : paymentAmount
+      })]
+    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 0.5,
+        alignItems: "center",
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            color: "text.secondary",
+            fontSize: 14
+          },
+          children: t("payment.checkout.staking.title")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+          title: t("payment.checkout.staking.tooltip"),
+          placement: "top",
+          arrow: true,
+          slotProps: {
+            popper: {
+              sx: _format.whiteTooltipSx
+            }
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_HelpOutline.default, {
+            sx: {
+              fontSize: 16,
+              color: "text.disabled"
+            }
+          })
+        })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: staking
+      })]
+    })]
+  });
+}

package/lib/checkout-v2/components/left/trial-info.d.ts

@@ -0,0 +1,13 @@
+import type { TLineItemExpanded } from '@blocklet/payment-types';
+interface TrialInfoProps {
+    trial: {
+        active: boolean;
+        days: number;
+        afterTrialPrice: string | null;
+        afterTrialInterval: string | null;
+    };
+    mode: string;
+    items: TLineItemExpanded[];
+}
+export default function TrialInfo({ trial, mode, items }: TrialInfoProps): import("react").JSX.Element | null;
+export {};

package/lib/checkout-v2/components/left/trial-info.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = TrialInfo;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _format = require("../../utils/format");
+function TrialInfo({
+  trial,
+  mode,
+  items
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  if (trial.active && trial.afterTrialPrice) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      sx: {
+        borderTop: "1px solid",
+        borderColor: "divider",
+        pt: 1,
+        mt: 1
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          color: "text.secondary",
+          fontSize: 14
+        },
+        children: t("common.nextCharge")
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+        sx: {
+          fontSize: 16,
+          color: "text.secondary"
+        },
+        children: [trial.afterTrialPrice, trial.afterTrialInterval ? ` ${t(_format.INTERVAL_LOCALE_KEY[trial.afterTrialInterval] || "")}` : ""]
+      })]
+    });
+  }
+  if (!trial.active && ["subscription", "setup"].includes(mode)) {
+    const meteredItem = items.find(item => (item.upsell_price || item.price)?.recurring?.usage_type === "metered");
+    if (!meteredItem) return null;
+    const meteredInterval = (meteredItem.upsell_price || meteredItem.price)?.recurring?.interval;
+    if (!meteredInterval) return null;
+    const recurringText = t("common.per", {
+      interval: t(`common.${meteredInterval}`)
+    });
+    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      sx: {
+        borderTop: "1px solid",
+        borderColor: "divider",
+        pt: 1,
+        mt: 1
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          color: "text.secondary",
+          fontSize: 14,
+          fontWeight: 600
+        },
+        children: t("common.nextCharge")
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontSize: 16,
+          color: "text.secondary"
+        },
+        children: t("payment.checkout.metered", {
+          recurring: recurringText
+        })
+      })]
+    });
+  }
+  return null;
+}

package/lib/checkout-v2/components/right/currency-grid.d.ts

@@ -0,0 +1,8 @@
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+interface CurrencyGridProps {
+    currencies: TPaymentCurrency[];
+    selectedId: string | undefined;
+    onSelect: (id: string) => Promise<void>;
+}
+export default function CurrencyGrid({ currencies, selectedId, onSelect }: CurrencyGridProps): import("react").JSX.Element | null;
+export {};

package/lib/checkout-v2/components/right/currency-grid.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = CurrencyGrid;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
+const CurrencyRoot = (0, _styles.styled)("section")`
+  display: grid;
+  width: 100%;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+
+  .cko-payment-card {
+    position: relative;
+    border: 1px solid ${({
+  theme
+}) => theme.palette.primary.main};
+    padding: 4px 8px;
+    cursor: pointer;
+    background: ${({
+  theme
+}) => theme.palette.grey[50]};
+  }
+
+  .cko-payment-card-unselect {
+    border: 1px solid ${({
+  theme
+}) => theme.palette.divider};
+    padding: 4px 8px;
+    cursor: pointer;
+    background: ${({
+  theme
+}) => theme.palette.grey[50]};
+  }
+`;
+function CurrencyGrid({
+  currencies,
+  selectedId,
+  onSelect
+}) {
+  if (!currencies?.length) return null;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(CurrencyRoot, {
+    style: {
+      display: currencies.length > 1 ? "grid" : "block"
+    },
+    children: currencies.map(cur => {
+      const selected = cur.id === selectedId;
+      const methodName = cur.method?.name || cur.name || "";
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Card, {
+        variant: "outlined",
+        onClick: () => onSelect(cur.id),
+        className: selected ? "cko-payment-card" : "cko-payment-card-unselect",
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          sx: {
+            alignItems: "center",
+            position: "relative"
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+            src: cur.logo,
+            alt: cur.name,
+            sx: {
+              width: 40,
+              height: 40,
+              mr: "12px"
+            }
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                fontSize: 16,
+                color: "text.primary",
+                fontWeight: 500
+              },
+              children: cur.symbol
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                color: "text.secondary",
+                fontSize: 14
+              },
+              children: methodName
+            })]
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Radio, {
+            checked: selected,
+            sx: {
+              position: "absolute",
+              right: 0
+            }
+          })]
+        })
+      }, cur.id);
+    })
+  });
+}

package/lib/checkout-v2/components/right/customer-info-card.d.ts

@@ -0,0 +1,17 @@
+interface FieldConfig {
+    name: string;
+    type: string;
+    required: boolean;
+}
+interface CustomerInfoCardProps {
+    form: {
+        fields: FieldConfig[];
+        values: Record<string, any>;
+        onChange: (field: string, value: string | boolean | Record<string, string>) => void;
+        errors: Partial<Record<string, string>>;
+        validateField: (field: string) => Promise<void>;
+    };
+    isLoggedIn: boolean;
+}
+export default function CustomerInfoCard({ form, isLoggedIn }: CustomerInfoCardProps): import("react").JSX.Element | null;
+export {};