@blocklet/payment-react 1.25.9 → 1.26.0

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

@@ -0,0 +1,178 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import AddIcon from "@mui/icons-material/Add";
+import CloseIcon from "@mui/icons-material/Close";
+import LocalOfferIcon from "@mui/icons-material/LocalOffer";
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  IconButton,
+  InputAdornment,
+  Stack,
+  TextField,
+  Typography
+} from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+export default function PromotionInput({
+  promotion,
+  discounts,
+  discountAmount,
+  initialShowInput = false
+}) {
+  const { t } = useLocaleContext();
+  const [showInput, setShowInput] = useState(false);
+  const [code, setCode] = useState("");
+  const [applying, setApplying] = useState(false);
+  const [error, setError] = 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__ */ jsx(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__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          children: [
+            /* @__PURE__ */ jsxs(
+              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__ */ jsx(LocalOfferIcon, { sx: { color: "#12b886", fontSize: 14 } }),
+                  /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 700, fontSize: 13, color: "#12b886" }, children: discCode }),
+                  description && /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 12, color: "#12b886", fontWeight: 500, opacity: 0.8 }, children: [
+                    "\xB7 ",
+                    description
+                  ] }),
+                  /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: promotion.remove, sx: { width: 18, height: 18, ml: 0.25 }, children: /* @__PURE__ */ jsx(CloseIcon, { sx: { fontSize: 12, color: "#12b886" } }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(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__ */ jsx(Box, { sx: { minHeight: 36 }, children: effectiveShowInput ? /* @__PURE__ */ jsxs(
+    Box,
+    {
+      onBlur: (e) => {
+        if (initialShowInput) return;
+        if (!e.currentTarget.contains(e.relatedTarget) && !code.trim()) {
+          setShowInput(false);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          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__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+                  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__ */ jsx(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__ */ jsx(Alert, { severity: "error", sx: { mt: 0.5, py: 0, fontSize: 12, borderRadius: "6px" }, children: error })
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: () => setShowInput(true),
+      startIcon: /* @__PURE__ */ jsx(AddIcon, { 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/es/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/es/checkout-v2/components/left/staking-breakdown.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import HelpOutline from "@mui/icons-material/HelpOutline";
+import { Stack, Tooltip, Typography } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { formatTrialText, whiteTooltipSx } from "../../utils/format.js";
+export default function StakingBreakdown({
+  staking,
+  paymentAmount,
+  trialActive,
+  trialDays,
+  afterTrialInterval
+}) {
+  const { t } = useLocaleContext();
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 1, sx: { mb: 1 }, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontSize: 14 }, children: t("payment.checkout.paymentRequired") }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: t("payment.checkout.stakingConfirm"),
+            placement: "top",
+            arrow: true,
+            slotProps: { popper: { sx: whiteTooltipSx } },
+            children: /* @__PURE__ */ jsx(HelpOutline, { sx: { fontSize: 16, color: "text.disabled" } })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Typography, { children: trialActive ? formatTrialText(t, trialDays, afterTrialInterval || "day") : paymentAmount })
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontSize: 14 }, children: t("payment.checkout.staking.title") }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: t("payment.checkout.staking.tooltip"),
+            placement: "top",
+            arrow: true,
+            slotProps: { popper: { sx: whiteTooltipSx } },
+            children: /* @__PURE__ */ jsx(HelpOutline, { sx: { fontSize: 16, color: "text.disabled" } })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Typography, { children: staking })
+    ] })
+  ] });
+}

package/es/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/es/checkout-v2/components/left/trial-info.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Stack, Typography } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { INTERVAL_LOCALE_KEY } from "../../utils/format.js";
+export default function TrialInfo({ trial, mode, items }) {
+  const { t } = useLocaleContext();
+  if (trial.active && trial.afterTrialPrice) {
+    return /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        sx: { borderTop: "1px solid", borderColor: "divider", pt: 1, mt: 1 },
+        children: [
+          /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontSize: 14 }, children: t("common.nextCharge") }),
+          /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 16, color: "text.secondary" }, children: [
+            trial.afterTrialPrice,
+            trial.afterTrialInterval ? ` ${t(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__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        sx: { borderTop: "1px solid", borderColor: "divider", pt: 1, mt: 1 },
+        children: [
+          /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontSize: 14, fontWeight: 600 }, children: t("common.nextCharge") }),
+          /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 16, color: "text.secondary" }, children: t("payment.checkout.metered", { recurring: recurringText }) })
+        ]
+      }
+    );
+  }
+  return null;
+}

package/es/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/es/checkout-v2/components/right/currency-grid.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar, Card, Radio, Stack, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+const CurrencyRoot = 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]};
+  }
+`;
+export default function CurrencyGrid({ currencies, selectedId, onSelect }) {
+  if (!currencies?.length) return null;
+  return /* @__PURE__ */ 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__ */ jsx(
+      Card,
+      {
+        variant: "outlined",
+        onClick: () => onSelect(cur.id),
+        className: selected ? "cko-payment-card" : "cko-payment-card-unselect",
+        children: /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { alignItems: "center", position: "relative" }, children: [
+          /* @__PURE__ */ jsx(Avatar, { src: cur.logo, alt: cur.name, sx: { width: 40, height: 40, mr: "12px" } }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 16, color: "text.primary", fontWeight: 500 }, children: cur.symbol }),
+            /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontSize: 14 }, children: methodName })
+          ] }),
+          /* @__PURE__ */ jsx(Radio, { checked: selected, sx: { position: "absolute", right: 0 } })
+        ] })
+      },
+      cur.id
+    );
+  }) });
+}

package/es/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 {};

package/es/checkout-v2/components/right/customer-info-card.js

@@ -0,0 +1,156 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { Box, Button, InputBase, InputAdornment, Stack, Typography } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import CountrySelect from "../../../components/country-select.js";
+import PhoneField from "../../../components/phone-field.js";
+import { countryCodeToFlag } from "../../utils/format.js";
+const fieldLabelMap = (t) => ({
+  customer_name: t("payment.checkout.customer.name"),
+  customer_email: t("payment.checkout.customer.email"),
+  customer_phone: t("payment.checkout.customer.phone"),
+  "billing_address.country": t("payment.checkout.billing.country"),
+  "billing_address.state": t("payment.checkout.billing.state"),
+  "billing_address.city": t("payment.checkout.billing.city"),
+  "billing_address.line1": t("payment.checkout.billing.line1"),
+  "billing_address.line2": t("payment.checkout.billing.line2"),
+  "billing_address.postal_code": t("payment.checkout.billing.postal_code")
+});
+export default function CustomerInfoCard({ form, isLoggedIn }) {
+  const { t } = useLocaleContext();
+  const labels = fieldLabelMap(t);
+  const hasRequiredData = !!(form.values.customer_name && form.values.customer_email);
+  const [showEditForm, setShowEditForm] = useState(!hasRequiredData);
+  const autoConfirmedRef = useRef(false);
+  useEffect(() => {
+    if (!autoConfirmedRef.current && form.values.customer_name && form.values.customer_email) {
+      autoConfirmedRef.current = true;
+      setShowEditForm(false);
+    }
+  }, [form.values.customer_name, form.values.customer_email]);
+  if (!isLoggedIn) return null;
+  if (!showEditForm) {
+    return /* @__PURE__ */ jsxs(Box, { sx: { mt: 2 }, children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 1 }, children: [
+        /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 13, fontWeight: 600, color: "text.secondary" }, children: t("payment.checkout.customerInfo") }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            variant: "text",
+            onClick: () => setShowEditForm(true),
+            sx: { minWidth: 0, fontSize: 13, fontWeight: 600, p: 0 },
+            children: t("common.edit")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          spacing: 0.5,
+          sx: {
+            p: 2,
+            backgroundColor: "background.paper",
+            borderRadius: 1,
+            border: "1px solid",
+            borderColor: "divider"
+          },
+          children: [
+            form.values.customer_name && /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.primary", fontWeight: 600, fontSize: "0.9375rem" }, children: form.values.customer_name }),
+            form.values.customer_email && /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", fontSize: "0.8125rem" }, children: form.values.customer_email }),
+            form.fields.some((f) => f.name === "customer_phone") && form.values.customer_phone && /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", fontSize: "0.8125rem" }, children: form.values.customer_phone }),
+            (form.values.billing_address?.country || form.values.billing_address?.state || form.values.billing_address?.postal_code) && /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.75, children: [
+              form.values.billing_address?.country && /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, lineHeight: 1 }, children: countryCodeToFlag(form.values.billing_address.country) }),
+              /* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: { color: "text.secondary", fontSize: "0.8125rem" }, children: [
+                form.values.billing_address?.state || "",
+                form.values.billing_address?.postal_code ? ` [ ${t("payment.checkout.billing.postal_code")}: ${form.values.billing_address.postal_code} ]` : ""
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Box, { sx: { mt: 2 }, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 1 }, children: [
+      /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 13, fontWeight: 600, color: "text.secondary" }, children: t("payment.checkout.customerInfo") }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          variant: "text",
+          onClick: () => setShowEditForm(false),
+          sx: { minWidth: 0, fontSize: 13, fontWeight: 600, p: 0 },
+          children: t("common.confirm")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Stack,
+      {
+        spacing: 0,
+        sx: {
+          p: 2,
+          backgroundColor: "background.paper",
+          borderRadius: 1,
+          border: "1px solid",
+          borderColor: "divider"
+        },
+        children: form.fields.filter((f) => f.name !== "billing_address.country").map((field) => {
+          const { name } = field;
+          const label = labels[name] || name;
+          const value = name.includes(".") ? name.split(".").reduce((o, k) => o?.[k], form.values) : form.values[name];
+          const isPostalCode = name === "billing_address.postal_code";
+          const isPhone = name === "customer_phone";
+          if (isPhone) {
+            return /* @__PURE__ */ jsx(
+              PhoneField,
+              {
+                value: value || "",
+                country: form.values.billing_address?.country || "",
+                onChange: (phone) => form.onChange("customer_phone", phone),
+                onCountryChange: (c) => form.onChange("billing_address.country", c),
+                onBlur: () => form.validateField(name),
+                label,
+                error: form.errors[name]
+              },
+              name
+            );
+          }
+          return /* @__PURE__ */ jsxs(Box, { sx: { mb: 1.5 }, children: [
+            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 13, fontWeight: 600, color: "text.primary", mb: 0.5 }, children: label }),
+            /* @__PURE__ */ jsx(
+              InputBase,
+              {
+                fullWidth: true,
+                value: value || "",
+                onChange: (e) => form.onChange(name, e.target.value),
+                onBlur: () => form.validateField(name),
+                startAdornment: isPostalCode ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", sx: { mr: 0.5, ml: -0.5 }, children: /* @__PURE__ */ jsx(
+                  CountrySelect,
+                  {
+                    value: form.values.billing_address?.country || "",
+                    onChange: (v) => form.onChange("billing_address.country", v),
+                    sx: {
+                      ".MuiOutlinedInput-notchedOutline": { borderColor: "transparent !important" },
+                      "& .MuiSelect-select": { py: 0, pr: "20px !important" }
+                    }
+                  }
+                ) }) : void 0,
+                sx: {
+                  bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "grey.50",
+                  borderRadius: "8px",
+                  px: 1.5,
+                  py: 0.75,
+                  fontSize: 14,
+                  "& .MuiInputBase-input": { p: 0 }
+                }
+              }
+            ),
+            form.errors[name] && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 12, color: "error.main", mt: 0.25 }, children: form.errors[name] })
+          ] }, name);
+        })
+      }
+    )
+  ] });
+}

package/es/checkout-v2/components/right/status-feedback.d.ts

@@ -0,0 +1,7 @@
+interface StatusFeedbackProps {
+    status: string;
+    context: any;
+    onReset: () => void;
+}
+export default function StatusFeedback({ status, context, onReset }: StatusFeedbackProps): null;
+export {};

package/es/checkout-v2/components/right/status-feedback.js

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from "react";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import Toast from "@arcblock/ux/lib/Toast";
+export default function StatusFeedback({ status, context, onReset }) {
+  const { t } = useLocaleContext();
+  const prevStatusRef = useRef(status);
+  useEffect(() => {
+    if (status === prevStatusRef.current) return;
+    prevStatusRef.current = status;
+    if (status === "failed" && context?.type === "error") {
+      if (context.code === "CUSTOMER_LIMITED") return;
+      Toast.error(context.message || "Payment failed");
+      onReset();
+    }
+  }, [status, context, t, onReset]);
+  return null;
+}

package/es/checkout-v2/components/right/submit-button.d.ts

@@ -0,0 +1,10 @@
+interface SubmitButtonProps {
+    canSubmit: boolean;
+    isProcessing: boolean;
+    isWaitingStripe: boolean;
+    label: string;
+    processingLabel: string;
+    onSubmit: () => Promise<void>;
+}
+export default function SubmitButton({ canSubmit, isProcessing, isWaitingStripe, label, processingLabel, onSubmit, }: SubmitButtonProps): import("react").JSX.Element;
+export {};

package/es/checkout-v2/components/right/submit-button.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { Button, CircularProgress } from "@mui/material";
+export default function SubmitButton({
+  canSubmit,
+  isProcessing,
+  isWaitingStripe,
+  label,
+  processingLabel,
+  onSubmit
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "contained",
+      size: "large",
+      fullWidth: true,
+      disabled: !canSubmit || isWaitingStripe,
+      onClick: onSubmit,
+      startIcon: isProcessing ? /* @__PURE__ */ jsx(CircularProgress, { size: 20, color: "inherit" }) : null,
+      sx: {
+        py: 1.5,
+        fontSize: "1.3rem",
+        fontWeight: 600,
+        textTransform: "none"
+      },
+      children: isProcessing ? processingLabel : label
+    }
+  );
+}

package/es/checkout-v2/components/right/subscription-disclaimer.d.ts

@@ -0,0 +1,11 @@
+interface SubscriptionDisclaimerProps {
+    mode: string;
+    subscription: {
+        confirmMessage: string;
+        showStake: boolean;
+    } | null;
+    staking: string | null;
+    appName: string;
+}
+export default function SubscriptionDisclaimer({ mode, subscription, staking, appName }: SubscriptionDisclaimerProps): import("react").JSX.Element | null;
+export {};

package/es/checkout-v2/components/right/subscription-disclaimer.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { Typography } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+export default function SubscriptionDisclaimer({ mode, subscription, staking, appName }) {
+  const { t } = useLocaleContext();
+  if (!["subscription", "setup"].includes(mode) || !subscription) return null;
+  return /* @__PURE__ */ jsx(Typography, { sx: { mt: 2.5, color: "text.secondary", fontSize: "0.7875rem", lineHeight: "0.9625rem" }, children: subscription.confirmMessage || (subscription.showStake && staking ? t("payment.checkout.confirm.withStake", { payee: appName || "New Payment Kit" }) : t("payment.checkout.confirm.withoutStake", { payee: appName || "New Payment Kit" })) });
+}

package/es/checkout-v2/components/shared/exchange-rate-footer.d.ts

@@ -0,0 +1,23 @@
+interface ExchangeRateFooterProps {
+    hasDynamicPricing: boolean;
+    rate: {
+        value: string | null;
+        display: string | null;
+        provider: string | null;
+        providerDisplay: string | null;
+        fetchedAt: number | null;
+        status: 'loading' | 'available' | 'unavailable';
+    };
+    slippage: {
+        percent: number;
+        set: (config: {
+            mode: string;
+            percent: number;
+            base_currency?: string;
+        }) => Promise<void>;
+    };
+    currencySymbol: string;
+    isSubscription: boolean;
+}
+export default function ExchangeRateFooter({ hasDynamicPricing, rate, slippage, currencySymbol, isSubscription, }: ExchangeRateFooterProps): import("react").JSX.Element | null;
+export {};