@blocklet/payment-react 1.26.1 → 1.26.3

package/es/checkout-v2/components/dialogs/checkout-dialogs.js

@@ -10,6 +10,7 @@ import {
 import StripeForm from "../../../payment/form/stripe/index.js";
 import ConfirmDialog from "../../../components/confirm.js";
 import PriceChangeConfirm from "../../../components/price-change-confirm.js";
+import ServiceSuspendedDialog from "../../../components/service-suspended-dialog.js";
 import { formatTokenAmount } from "../../utils/format.js";
 function getRedirectUrl(session) {
   try {
@@ -92,6 +93,7 @@ export default function CheckoutDialogs() {
         color: "primary"
       }
     ),
+    submit.context?.type === "service_suspended" && /* @__PURE__ */ jsx(ServiceSuspendedDialog, { open: true, onClose: submit.cancel }),
     submit.status === "credit_insufficient" && submit.context?.type === "credit_insufficient" && /* @__PURE__ */ jsx(
       ConfirmDialog,
       {

package/es/checkout-v2/components/left/cross-sell-card.js

@@ -3,7 +3,7 @@ import AddShoppingCartIcon from "@mui/icons-material/AddShoppingCart";
 import ShoppingCartCheckoutIcon from "@mui/icons-material/ShoppingCartCheckout";
 import { Avatar, Box, Button, Chip, Stack, Typography } from "@mui/material";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { formatDynamicUnitPrice, tSafe, INTERVAL_LOCALE_KEY } from "../../utils/format.js";
+import { formatDynamicUnitPrice, tSafe, INTERVAL_LOCALE_KEY, primaryContrastColor } from "../../utils/format.js";
 export default function CrossSellCard({
   crossSellItem,
   currency,
@@ -40,7 +40,7 @@ export default function CrossSellCard({
           fontWeight: 900,
           letterSpacing: "0.12em",
           bgcolor: "primary.main",
-          color: "#fff",
+          color: (theme) => primaryContrastColor(theme),
           boxShadow: "0 4px 12px rgba(45,124,243,0.2)",
           "& .MuiChip-label": { px: 1.5 }
         }
@@ -147,7 +147,7 @@ export default function CrossSellCard({
                   transition: "all 0.2s",
                   "&:hover": {
                     bgcolor: "primary.main",
-                    color: "#fff",
+                    color: (theme) => primaryContrastColor(theme),
                     borderColor: "primary.main"
                   },
                   "&:active": { transform: "scale(0.95)" }

package/es/checkout-v2/components/left/product-item-card.js

@@ -22,7 +22,13 @@ import {
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import { getPriceUnitAmountByCurrency } from "@blocklet/payment-react-headless";
 import Toast from "@arcblock/ux/lib/Toast";
-import { INTERVAL_LOCALE_KEY, formatDynamicUnitPrice, formatTokenAmount, formatTrialText } from "../../utils/format.js";
+import {
+  INTERVAL_LOCALE_KEY,
+  formatDynamicUnitPrice,
+  formatTokenAmount,
+  formatTrialText,
+  primaryContrastColor
+} from "../../utils/format.js";
 export default function ProductItemCard({
   item,
   currency,
@@ -217,7 +223,7 @@ export default function ProductItemCard({
           fontWeight: 900,
           letterSpacing: "0.12em",
           bgcolor: "primary.main",
-          color: "#fff",
+          color: (th) => primaryContrastColor(th),
           boxShadow: "0 4px 12px rgba(45,124,243,0.2)",
           "& .MuiChip-label": { px: 1.5 }
         }
@@ -388,7 +394,7 @@ export default function ProductItemCard({
               ]
             }
           ),
-          discountCode && perItemDiscount && /* @__PURE__ */ jsx(Box, { sx: { mt: 1.5 }, children: /* @__PURE__ */ jsx(
+          discountCode && perItemDiscount && /* @__PURE__ */ jsx(Box, { sx: { mt: 1.5 }, children: isRateLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: 160, height: 22, sx: { borderRadius: "6px" } }) : /* @__PURE__ */ jsx(
             Chip,
             {
               icon: /* @__PURE__ */ jsx(LocalOfferIcon, { sx: { color: "warning.main", fontSize: "small" } }),

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

@@ -12,8 +12,11 @@ interface PromotionInputProps {
     };
     discounts: any[];
     discountAmount: string | null;
+    currency?: any;
     /** Start with input field visible (skip the "Add promotion code" button) */
     initialShowInput?: boolean;
+    /** Show skeleton for the discount amount while switching */
+    isAmountLoading?: boolean;
 }
-export default function PromotionInput({ promotion, discounts, discountAmount, initialShowInput, }: PromotionInputProps): import("react").JSX.Element | null;
+export default function PromotionInput({ promotion, discounts, discountAmount, currency, initialShowInput, isAmountLoading, }: PromotionInputProps): import("react").JSX.Element | null;
 export {};

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

@@ -10,18 +10,22 @@ import {
   CircularProgress,
   IconButton,
   InputAdornment,
+  Skeleton,
   Stack,
   TextField,
   Typography
 } from "@mui/material";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { formatCouponTerms } from "../../../libs/util.js";
 export default function PromotionInput({
   promotion,
   discounts,
   discountAmount,
-  initialShowInput = false
+  currency = null,
+  initialShowInput = false,
+  isAmountLoading = false
 }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const [showInput, setShowInput] = useState(false);
   const [code, setCode] = useState("");
   const [applying, setApplying] = useState(false);
@@ -49,16 +53,7 @@ export default function PromotionInput({
     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 });
-      }
+      const description = coupon && currency ? formatCouponTerms(coupon, currency, locale) : "";
       return /* @__PURE__ */ jsxs(
         Stack,
         {
@@ -91,7 +86,7 @@ export default function PromotionInput({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs(Typography, { sx: { color: "text.primary", fontWeight: 600, fontSize: 14 }, children: [
+            isAmountLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 80, height: 22 }) : /* @__PURE__ */ jsxs(Typography, { sx: { color: "text.primary", fontWeight: 600, fontSize: 14 }, children: [
               "-",
               discountAmount || "0"
             ] })

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

@@ -9,7 +9,9 @@ interface CustomerInfoCardProps {
         values: Record<string, any>;
         onChange: (field: string, value: string | boolean | Record<string, string>) => void;
         errors: Partial<Record<string, string>>;
+        checkValid: () => Promise<boolean>;
         validateField: (field: string) => Promise<void>;
+        prefetched: boolean;
     };
     isLoggedIn: boolean;
 }

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from "react";
+import { useState, useRef, useCallback, useEffect } 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";
@@ -19,16 +19,24 @@ const fieldLabelMap = (t) => ({
 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);
+  const [showEditForm, setShowEditForm] = useState(false);
+  const [ready, setReady] = useState(false);
+  const checkedRef = 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 (checkedRef.current) return;
+    if (!form.prefetched && !form.values.customer_name && !form.values.customer_email) return;
+    checkedRef.current = true;
+    form.checkValid().then((valid) => {
+      setShowEditForm(!valid);
+      setReady(true);
+    });
+  }, [form.prefetched]);
+  const handleChange = useCallback(
+    (field, value) => form.onChange(field, value),
+    [form.onChange]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  if (!isLoggedIn || !ready) 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: [
@@ -108,8 +116,8 @@ export default function CustomerInfoCard({ form, isLoggedIn }) {
               {
                 value: value || "",
                 country: form.values.billing_address?.country || "",
-                onChange: (phone) => form.onChange("customer_phone", phone),
-                onCountryChange: (c) => form.onChange("billing_address.country", c),
+                onChange: (phone) => handleChange("customer_phone", phone),
+                onCountryChange: (c) => handleChange("billing_address.country", c),
                 onBlur: () => form.validateField(name),
                 label,
                 error: form.errors[name]
@@ -124,13 +132,13 @@ export default function CustomerInfoCard({ form, isLoggedIn }) {
               {
                 fullWidth: true,
                 value: value || "",
-                onChange: (e) => form.onChange(name, e.target.value),
+                onChange: (e) => handleChange(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),
+                    onChange: (v) => handleChange("billing_address.country", v),
                     sx: {
                       ".MuiOutlinedInput-notchedOutline": { borderColor: "transparent !important" },
                       "& .MuiSelect-select": { py: 0, pr: "20px !important" }

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

@@ -8,7 +8,7 @@ export default function StatusFeedback({ status, context, onReset }) {
     if (status === prevStatusRef.current) return;
     prevStatusRef.current = status;
     if (status === "failed" && context?.type === "error") {
-      if (context.code === "CUSTOMER_LIMITED") return;
+      if (context.code === "CUSTOMER_LIMITED" || context.code === "STOP_ACCEPTING_ORDERS") return;
       Toast.error(context.message || "Payment failed");
       onReset();
     }

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

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Button, CircularProgress } from "@mui/material";
+import { primaryContrastColor } from "../../utils/format.js";
 export default function SubmitButton({
   canSubmit,
   isProcessing,
@@ -21,7 +22,8 @@ export default function SubmitButton({
         py: 1.5,
         fontSize: "1.3rem",
         fontWeight: 600,
-        textTransform: "none"
+        textTransform: "none",
+        color: (theme) => primaryContrastColor(theme)
       },
       children: isProcessing ? processingLabel : label
     }

package/es/checkout-v2/layouts/checkout-layout.js

@@ -22,7 +22,14 @@ const fadeIn = {
   },
   animation: { xs: "none", md: "fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both" }
 };
-const slideInFromRight = {
+const isSafari = typeof navigator !== "undefined" && /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
+const slideInFromRight = isSafari ? {
+  "@keyframes panelFadeIn": {
+    from: { opacity: 0, transform: "translateX(24px)" },
+    to: { opacity: 1, transform: "none" }
+  },
+  animation: { xs: "none", md: "panelFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both" }
+} : {
   "@keyframes slideInRight": {
     from: { transform: "translateX(100%)" },
     to: { transform: "translateX(0)" }
@@ -79,6 +86,7 @@ export default function CheckoutLayout({ left, right, mode = "inline" }) {
             {
               sx: {
                 flex: 1,
+                minWidth: 0,
                 bgcolor: (t) => t.palette.mode === "dark" ? "background.default" : "#f8faff",
                 p: { xs: 3, md: 5 },
                 pt: { xs: 3, md: 4 },
@@ -156,7 +164,8 @@ export default function CheckoutLayout({ left, right, mode = "inline" }) {
           Box,
           {
             sx: {
-              width: { xs: "100%", md: "50%" },
+              flex: { xs: "none", md: "0 0 50%" },
+              width: { xs: "100%" },
               height: { xs: "auto", md: "100vh" },
               display: "flex",
               justifyContent: { md: "center" },
@@ -185,7 +194,8 @@ export default function CheckoutLayout({ left, right, mode = "inline" }) {
           Box,
           {
             sx: {
-              width: hideLeft ? "100%" : { xs: "100%", md: "50%" },
+              flex: hideLeft ? "none" : { xs: "none", md: "0 0 50%" },
+              width: hideLeft ? "100%" : { xs: "100%" },
               height: hideLeft ? "100vh" : { xs: "auto", md: "100vh" },
               bgcolor: "background.paper",
               boxShadow: hideLeft ? "none" : { md: "-4px 0 16px rgba(0,0,0,0.04)" },

package/es/checkout-v2/panels/left/composite-panel.js

@@ -17,7 +17,13 @@ import {
   useProduct
 } from "@blocklet/payment-react-headless";
 import { useMobile } from "../../../hooks/mobile.js";
-import { INTERVAL_LOCALE_KEY, formatTrialText, getSessionHeaderMeta, tSafe } from "../../utils/format.js";
+import {
+  INTERVAL_LOCALE_KEY,
+  formatTrialText,
+  getSessionHeaderMeta,
+  tSafe,
+  primaryContrastColor
+} from "../../utils/format.js";
 import ProductItemCard from "../../components/left/product-item-card.js";
 import BillingToggle from "../../components/left/billing-toggle.js";
 import CrossSellCard from "../../components/left/cross-sell-card.js";
@@ -51,6 +57,9 @@ export default function CompositePanel() {
   const canUpsell = nonCrossSellItems.length <= 1;
   const hasTopUpsell = canUpsell && !!upsellPrimaryItem && ["subscription", "setup"].includes(mode);
   const isUpselled = !!upsellPrimaryItem?.upsell_price;
+  const [upsellSwitching, setUpsellSwitching] = useState(false);
+  const [pendingUpsell, setPendingUpsell] = useState(null);
+  const visualIsUpselled = pendingUpsell !== null ? pendingUpsell : isUpselled;
   const currentInterval = hasTopUpsell ? upsellPrimaryItem.price?.recurring?.interval : null;
   const upsellInterval = hasTopUpsell ? upsellTarget?.recurring?.interval : null;
   let upsellSavings = 0;
@@ -75,7 +84,7 @@ export default function CompositePanel() {
   const isMultiItem = lineItems.items.length > 1;
   const activeSx = {
     bgcolor: "primary.main",
-    color: "#fff",
+    color: (theme) => primaryContrastColor(theme),
     boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)"
   };
   const inactiveSx = {
@@ -223,17 +232,23 @@ export default function CompositePanel() {
                   Box,
                   {
                     onClick: async () => {
-                      if (isUpselled) {
+                      if (isUpselled && !upsellSwitching) {
+                        setPendingUpsell(false);
+                        setUpsellSwitching(true);
                         try {
                           await lineItems.downsell(
                             upsellPrimaryItem.upsell_price?.id || upsellPrimaryItem.price_id
                           );
                         } catch (err) {
+                          setPendingUpsell(null);
                           Toast.error(err?.response?.data?.error || err?.message || "Failed");
+                        } finally {
+                          setUpsellSwitching(false);
+                          setPendingUpsell(null);
                         }
                       }
                     },
-                    sx: capsuleBtnSx(!isUpselled),
+                    sx: capsuleBtnSx(!visualIsUpselled),
                     children: /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 14, fontWeight: 700, color: "inherit", lineHeight: 1 }, children: t(INTERVAL_LOCALE_KEY[currentInterval] || "") })
                   }
                 ),
@@ -241,15 +256,21 @@ export default function CompositePanel() {
                   Box,
                   {
                     onClick: async () => {
-                      if (!isUpselled) {
+                      if (!isUpselled && !upsellSwitching) {
+                        setPendingUpsell(true);
+                        setUpsellSwitching(true);
                         try {
                           await lineItems.upsell(upsellPrimaryItem.price_id, upsellTarget.id);
                         } catch (err) {
+                          setPendingUpsell(null);
                           Toast.error(err?.response?.data?.error || err?.message || "Failed");
+                        } finally {
+                          setUpsellSwitching(false);
+                          setPendingUpsell(null);
                         }
                       }
                     },
-                    sx: capsuleBtnSx(isUpselled),
+                    sx: capsuleBtnSx(visualIsUpselled),
                     children: /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 14, fontWeight: 700, color: "inherit", lineHeight: 1 }, children: t(INTERVAL_LOCALE_KEY[upsellInterval] || "") })
                   }
                 )

package/es/checkout-v2/panels/right/payment-panel.js

@@ -40,9 +40,9 @@ import {
 import { joinURL } from "ufo";
 import { usePaymentContext } from "../../../contexts/payment.js";
 import { useMobile } from "../../../hooks/mobile.js";
-import { getPrefix } from "../../../libs/util.js";
+import { getPrefix, getStatementDescriptor } from "../../../libs/util.js";
 import OverdueInvoicePayment from "../../../components/over-due-invoice-payment.js";
-import { tSafe, whiteTooltipSx } from "../../utils/format.js";
+import { tSafe, whiteTooltipSx, primaryContrastColor } from "../../utils/format.js";
 import CustomerInfoCard from "../../components/right/customer-info-card.js";
 import SubscriptionDisclaimer from "../../components/right/subscription-disclaimer.js";
 import StatusFeedback from "../../components/right/status-feedback.js";
@@ -412,7 +412,9 @@ export default function PaymentPanel() {
               remove: promotion.remove
             },
             discounts,
-            discountAmount: pricing.discount
+            discountAmount: pricing.discount,
+            currency,
+            isAmountLoading
           }
         )
       ] }),
@@ -502,7 +504,7 @@ export default function PaymentPanel() {
           ] })
         ] });
       })(),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         Button,
         {
           variant: "contained",
@@ -511,15 +513,43 @@ export default function PaymentPanel() {
           disabled: !canSubmit || submit.status === "waiting_stripe",
           onClick: handleAction,
           startIcon: isProcessing ? /* @__PURE__ */ jsx(CircularProgress, { size: 20, color: "inherit" }) : null,
-          endIcon: !isProcessing ? /* @__PURE__ */ jsx(ArrowForwardIcon, {}) : void 0,
           sx: {
             py: 1.5,
             fontSize: "1.1rem",
             fontWeight: 600,
             textTransform: "none",
-            borderRadius: "12px"
+            borderRadius: "12px",
+            color: (theme) => primaryContrastColor(theme),
+            position: "relative",
+            overflow: "hidden",
+            "&:hover": { bgcolor: "primary.main" },
+            "&:hover .arrow-icon": { transform: "translateX(4px)" },
+            "&:hover .shine-layer": { transform: "translateX(100%)" }
           },
-          children: isProcessing ? `${t("payment.checkout.processing")}...` : buttonLabel
+          children: [
+            /* @__PURE__ */ jsx(Box, { component: "span", sx: { position: "relative", zIndex: 1 }, children: isProcessing ? `${t("payment.checkout.processing")}...` : buttonLabel }),
+            !isProcessing && /* @__PURE__ */ jsx(
+              ArrowForwardIcon,
+              {
+                className: "arrow-icon",
+                sx: { ml: 1, position: "relative", zIndex: 1, transition: "transform 0.2s ease" }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                className: "shine-layer",
+                sx: {
+                  position: "absolute",
+                  inset: 0,
+                  background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent)",
+                  transform: "translateX(-100%)",
+                  transition: "transform 0.7s ease",
+                  pointerEvents: "none"
+                }
+              }
+            )
+          ]
         }
       ),
       isMobile && /* @__PURE__ */ jsxs(
@@ -575,7 +605,8 @@ export default function PaymentPanel() {
                 remove: promotion.remove
               },
               discounts,
-              discountAmount: pricing.discount
+              discountAmount: pricing.discount,
+              currency
             }
           )
         ]
@@ -588,7 +619,7 @@ export default function PaymentPanel() {
           mode,
           subscription,
           staking: pricing.staking,
-          appName: session?.metadata?.app_name || "New Payment Kit"
+          appName: getStatementDescriptor(session?.line_items || [])
         }
       ),
       !isMobile && /* @__PURE__ */ jsxs(

package/es/checkout-v2/utils/format.d.ts

@@ -1,4 +1,5 @@
 import type { TPaymentCurrency } from '@blocklet/payment-types';
+export { primaryContrastColor } from '../../libs/util';
 export declare const INTERVAL_LOCALE_KEY: Record<string, string>;
 export declare function countryCodeToFlag(code: string): string;
 export declare function formatTokenAmount(unitAmount: string | number | bigint, currency: TPaymentCurrency | null): string;
@@ -56,4 +57,3 @@ interface ItemMeta {
  * Works for the "primary product" header above the item list.
  */
 export declare function getSessionHeaderMeta(t: TFn, session: any, product: any, items: any[]): ItemMeta;
-export {};

package/es/checkout-v2/utils/format.js

@@ -1,4 +1,5 @@
 import { fromUnitToToken } from "@ocap/util";
+export { primaryContrastColor } from "../../libs/util.js";
 export const INTERVAL_LOCALE_KEY = {
   day: "common.daily",
   week: "common.weekly",

package/es/checkout-v2/views/error-view.d.ts

@@ -1,6 +1,6 @@
 interface ErrorViewProps {
     error: string;
-    errorCode?: 'SESSION_EXPIRED' | 'EMPTY_LINE_ITEMS' | null;
+    errorCode?: 'SESSION_EXPIRED' | 'EMPTY_LINE_ITEMS' | 'STOP_ACCEPTING_ORDERS' | null;
     mode?: string;
 }
 export default function ErrorView({ error, errorCode, mode }: ErrorViewProps): import("react").JSX.Element;

package/es/checkout-v2/views/error-view.js

@@ -4,6 +4,7 @@ import { alpha, useTheme } from "@mui/material/styles";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import Header from "@blocklet/ui-react/lib/Header";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { primaryContrastColor } from "../utils/format.js";
 function GeometricDecoration() {
   const theme = useTheme();
   const gridColor = alpha(theme.palette.primary.main, 0.06);
@@ -113,6 +114,13 @@ function getErrorConfig(errorCode, error, t) {
       color: "#94a3b8"
     };
   }
+  if (errorCode === "STOP_ACCEPTING_ORDERS") {
+    return {
+      title: t("payment.checkout.stopAcceptingOrders.title"),
+      description: t("payment.checkout.stopAcceptingOrders.description"),
+      color: "#f59e0b"
+    };
+  }
   return {
     title: t("payment.checkout.error.title"),
     description: error,
@@ -173,6 +181,7 @@ function ErrorContent({ error, errorCode = void 0 }) {
           fontWeight: 600,
           fontSize: 16,
           letterSpacing: "0.02em",
+          color: (th) => primaryContrastColor(th),
           boxShadow: `0 8px 32px -4px ${alpha(primaryColor, 0.3)}`,
           "&:hover": {
             boxShadow: `0 12px 40px -4px ${alpha(primaryColor, 0.4)}`,

package/es/checkout-v2/views/success-view.js

@@ -22,7 +22,7 @@ import { joinURL } from "ufo";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { usePaymentMethodContext } from "@blocklet/payment-react-headless";
 import { getPrefix } from "../../libs/util.js";
-import { formatTokenAmount } from "../utils/format.js";
+import { formatTokenAmount, primaryContrastColor } from "../utils/format.js";
 const scaleIn = keyframes`
   from { transform: scale(0); opacity: 0; }
   60% { transform: scale(1.15); }
@@ -452,6 +452,7 @@ function SubscriptionLinks({
           fontWeight: 700,
           fontSize: { xs: 16, md: 17 },
           letterSpacing: "0.02em",
+          color: (theme) => primaryContrastColor(theme),
           boxShadow: "0 8px 24px -4px rgba(59,130,246,0.25)",
           "&:hover": {
             boxShadow: "0 12px 28px -4px rgba(59,130,246,0.35)"
@@ -486,6 +487,7 @@ function InvoiceLink({
         fontWeight: 700,
         fontSize: { xs: 16, md: 17 },
         letterSpacing: "0.02em",
+        color: (theme) => primaryContrastColor(theme),
         boxShadow: "0 8px 24px -4px rgba(59,130,246,0.25)",
         "&:hover": {
           boxShadow: "0 12px 28px -4px rgba(59,130,246,0.35)"

package/es/components/over-due-invoice-payment.js

@@ -11,7 +11,7 @@ import Dialog from "@arcblock/ux/lib/Dialog/dialog";
 import { CheckCircle as CheckCircleIcon } from "@mui/icons-material";
 import debounce from "lodash/debounce";
 import { usePaymentContext } from "../contexts/payment.js";
-import { formatAmount, formatError, getPrefix, isCrossOrigin } from "../libs/util.js";
+import { formatAmount, formatError, getPrefix, isCrossOrigin, primaryContrastColor } from "../libs/util.js";
 import { useSubscription } from "../hooks/subscription.js";
 import api from "../libs/api.js";
 import LoadingButton from "./loading-button.js";
@@ -290,6 +290,7 @@ function OverdueInvoicePayment({
     const { currency } = item;
     const inProcess = payLoading && selectCurrencyId === currency.id;
     const status = paymentStatus[currency.id] || "idle";
+    const containedColorSx = (options?.variant || "contained") === "contained" ? { color: (th) => primaryContrastColor(th) } : {};
     if (status === "success") {
       return /* @__PURE__ */ jsx(
         Button,
@@ -297,6 +298,7 @@ function OverdueInvoicePayment({
           variant: options?.variant || "contained",
           size: "small",
           onClick: () => checkAndHandleInvoicePaid(currency.id),
+          sx: containedColorSx,
           ...primaryButton ? {} : {
             color: "success",
             startIcon: /* @__PURE__ */ jsx(CheckCircleIcon, {})
@@ -334,7 +336,7 @@ function OverdueInvoicePayment({
               disabled: paying || status === "processing",
               loading: paying || status === "processing",
               onClick: onPay,
-              sx: options?.sx,
+              sx: { ...containedColorSx, ...options?.sx || {} },
               children: buttonText
             }
           )
@@ -349,7 +351,7 @@ function OverdueInvoicePayment({
         disabled: inProcess,
         loading: inProcess,
         onClick: () => handlePay(item),
-        sx: options?.sx,
+        sx: { ...containedColorSx, ...options?.sx || {} },
         children: status === "error" ? t("payment.subscription.overdue.retry") : t("payment.subscription.overdue.payNow")
       }
     );

package/es/components/service-suspended-dialog.d.ts

@@ -0,0 +1,4 @@
+export default function ServiceSuspendedDialog({ open, onClose }: {
+    open: boolean;
+    onClose: () => void;
+}): import("react").JSX.Element;