@blocklet/payment-react 1.26.1 → 1.26.3

package/es/components/service-suspended-dialog.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Button, Dialog, DialogContent, Stack, Typography } from "@mui/material";
+import { alpha } from "@mui/material/styles";
+import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+export default function ServiceSuspendedDialog({ open, onClose }) {
+  const { t } = useLocaleContext();
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose,
+      PaperProps: {
+        sx: {
+          borderRadius: 3,
+          maxWidth: 400,
+          mx: "auto",
+          overflow: "hidden"
+        }
+      },
+      children: /* @__PURE__ */ jsxs(DialogContent, { sx: { p: 0 }, children: [
+        /* @__PURE__ */ jsxs(Stack, { alignItems: "center", sx: { pt: 4, pb: 3, px: 4, textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                width: 64,
+                height: 64,
+                borderRadius: "50%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                bgcolor: (theme) => alpha(theme.palette.warning.main, 0.1),
+                mb: 2.5
+              },
+              children: /* @__PURE__ */ jsx(PauseCircleOutlineIcon, { sx: { fontSize: 36, color: "warning.main" } })
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 700, fontSize: 18, mb: 1, color: "text.primary" }, children: t("payment.checkout.stopAcceptingOrders.title") }),
+          /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontSize: 14, lineHeight: 1.6 }, children: t("payment.checkout.stopAcceptingOrders.description") })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { sx: { px: 4, pb: 3 }, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            fullWidth: true,
+            variant: "contained",
+            disableElevation: true,
+            onClick: onClose,
+            sx: {
+              borderRadius: 2,
+              textTransform: "none",
+              fontWeight: 600,
+              py: 1
+            },
+            children: t("common.know")
+          }
+        ) })
+      ] })
+    }
+  );
+}

package/es/libs/util.d.ts

@@ -194,3 +194,11 @@ export declare function getTokenBalanceLink(method: TPaymentMethod, address: str
 export declare function isCreditMetered(price: TPrice): boolean;
 export declare function showStaking(method: TPaymentMethod, currency: TPaymentCurrency, noStake: boolean): boolean;
 export declare function formatLinkWithLocale(url: string, locale?: string): string;
+export declare function primaryContrastColor(theme: {
+    palette: {
+        primary: {
+            main: string;
+        };
+        getContrastText: (bg: string) => string;
+    };
+}): string;

package/es/libs/util.js

@@ -1372,3 +1372,6 @@ export function formatLinkWithLocale(url, locale) {
     return `${url}${separator}locale=${locale}`;
   }
 }
+export function primaryContrastColor(theme) {
+  return theme.palette.getContrastText(theme.palette.primary.main);
+}

package/es/locales/en.js

@@ -380,6 +380,10 @@ export default flat({
         title: "Nothing to show here",
         description: "It seems this checkout session is not configured properly"
       },
+      stopAcceptingOrders: {
+        title: "Service Suspended",
+        description: "New order placement is temporarily unavailable due to a system-level service suspension."
+      },
       error: {
         title: "Something went wrong"
       },

package/es/locales/zh.js

@@ -409,6 +409,10 @@ export default flat({
         title: "\u6CA1\u6709\u4EFB\u4F55\u8D2D\u4E70\u9879\u76EE",
         description: "\u53EF\u80FD\u8FD9\u4E2A\u4ED8\u6B3E\u94FE\u63A5\u6CA1\u6709\u6B63\u786E\u914D\u7F6E"
       },
+      stopAcceptingOrders: {
+        title: "\u6682\u505C\u670D\u52A1",
+        description: "\u56E0\u7CFB\u7EDF\u7B56\u7565\u8C03\u6574\uFF0C\u5F53\u524D\u5DF2\u6682\u505C\u65B0\u8BA2\u5355\u670D\u52A1\u3002"
+      },
       error: {
         title: "\u51FA\u4E86\u70B9\u95EE\u9898"
       },

package/es/payment/form/index.js

@@ -48,6 +48,7 @@ import LoadingButton from "../../components/loading-button.js";
 import OverdueInvoicePayment from "../../components/over-due-invoice-payment.js";
 import { saveCurrencyPreference } from "../../libs/currency.js";
 import ConfirmDialog from "../../components/confirm.js";
+import ServiceSuspendedDialog from "../../components/service-suspended-dialog.js";
 import PriceChangeConfirm from "../../components/price-change-confirm.js";
 import { getFieldValidation, validatePostalCode } from "../../libs/validator.js";
 const generateIdempotencyKey = (sessionId, currencyId) => {
@@ -164,6 +165,7 @@ export default function PaymentForm({
     stripeContext: void 0,
     customer,
     customerLimited: false,
+    serviceSuspended: false,
     stripePaying: false,
     fastCheckoutInfo: null,
     creditInsufficientInfo: null,
@@ -932,6 +934,10 @@ export default function PaymentForm({
           shouldToast = false;
           setState({ customerLimited: true });
         }
+        if (errorCode === "STOP_ACCEPTING_ORDERS") {
+          shouldToast = false;
+          setState({ serviceSuspended: true });
+        }
       }
       if (shouldToast) {
         Toast.error(formatError(err));
@@ -1179,6 +1185,7 @@ export default function PaymentForm({
           }
         }
       ),
+      state.serviceSuspended && /* @__PURE__ */ jsx(ServiceSuspendedDialog, { open: true, onClose: () => setState({ serviceSuspended: false }) }),
       FastCheckoutConfirmDialog,
       CreditInsufficientDialog,
       PriceUpdatedDialog,
@@ -1444,6 +1451,16 @@ export default function PaymentForm({
         }
       }
     ),
+    state.serviceSuspended && /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        onConfirm: () => setState({ serviceSuspended: false }),
+        onCancel: () => setState({ serviceSuspended: false }),
+        title: t("payment.checkout.stopAcceptingOrders.title"),
+        message: t("payment.checkout.stopAcceptingOrders.description"),
+        confirm: t("common.confirm")
+      }
+    ),
     FastCheckoutConfirmDialog,
     CreditInsufficientDialog,
     PriceUpdatedDialog,

package/es/payment/index.js

@@ -78,6 +78,10 @@ function PaymentInner({
     return Array.from(currencyIds);
   }, [paymentMethods]);
   const defaultCurrencyId = useMemo(() => {
+    const hasAppliedDiscount = Boolean(state.checkoutSession?.discounts?.length);
+    if (hasAppliedDiscount && state.checkoutSession.currency_id && availableCurrencyIds.includes(state.checkoutSession.currency_id)) {
+      return state.checkoutSession.currency_id;
+    }
     if (query.currencyId && availableCurrencyIds.includes(query.currencyId)) {
       return query.currencyId;
     }
@@ -95,7 +99,7 @@ function PaymentInner({
       return state.checkoutSession.currency_id;
     }
     return availableCurrencyIds?.[0];
-  }, [query.currencyId, availableCurrencyIds, session?.user, state.checkoutSession.currency_id, paymentMethods]);
+  }, [query.currencyId, availableCurrencyIds, session?.user, state.checkoutSession, paymentMethods]);
   const defaultMethodId = paymentMethods.find((m) => m.payment_currencies.some((c) => c.id === defaultCurrencyId))?.id;
   const hideSummaryCard = mode.endsWith("-minimal") || !showCheckoutSummary;
   const methods = useForm({
@@ -122,13 +126,20 @@ function PaymentInner({
     }
   });
   useEffect(() => {
+    const hasAppliedDiscount = Boolean(state.checkoutSession?.discounts?.length);
+    const currentCurrency = methods.getValues("payment_currency");
+    const currentMethod = methods.getValues("payment_method");
     if (defaultCurrencyId) {
-      methods.setValue("payment_currency", defaultCurrencyId);
+      if (!hasAppliedDiscount || !currentCurrency) {
+        methods.setValue("payment_currency", defaultCurrencyId);
+      }
     }
     if (defaultMethodId) {
-      methods.setValue("payment_method", defaultMethodId);
+      if (!hasAppliedDiscount || !currentMethod) {
+        methods.setValue("payment_method", defaultMethodId);
+      }
     }
-  }, [defaultCurrencyId, defaultMethodId]);
+  }, [defaultCurrencyId, defaultMethodId, state.checkoutSession.discounts]);
   useEffect(() => {
     if (!isMobileSafari()) {
       return () => {

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

@@ -11,6 +11,7 @@ var _paymentReactHeadless = require("@blocklet/payment-react-headless");
 var _stripe = _interopRequireDefault(require("../../../payment/form/stripe"));
 var _confirm = _interopRequireDefault(require("../../../components/confirm"));
 var _priceChangeConfirm = _interopRequireDefault(require("../../../components/price-change-confirm"));
+var _serviceSuspendedDialog = _interopRequireDefault(require("../../../components/service-suspended-dialog"));
 var _format = require("../../utils/format");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function getRedirectUrl(session) {
@@ -118,6 +119,9 @@ function CheckoutDialogs() {
       }),
       loading: false,
       color: "primary"
+    }), submit.context?.type === "service_suspended" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_serviceSuspendedDialog.default, {
+      open: true,
+      onClose: submit.cancel
     }), submit.status === "credit_insufficient" && submit.context?.type === "credit_insufficient" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
       onConfirm: submit.cancel,
       onCancel: submit.cancel,

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

@@ -54,7 +54,7 @@ function CrossSellCard({
         fontWeight: 900,
         letterSpacing: "0.12em",
         bgcolor: "primary.main",
-        color: "#fff",
+        color: theme => (0, _format.primaryContrastColor)(theme),
         boxShadow: "0 4px 12px rgba(45,124,243,0.2)",
         "& .MuiChip-label": {
           px: 1.5
@@ -236,7 +236,7 @@ function CrossSellCard({
                 transition: "all 0.2s",
                 "&:hover": {
                   bgcolor: "primary.main",
-                  color: "#fff",
+                  color: theme => (0, _format.primaryContrastColor)(theme),
                   borderColor: "primary.main"
                 },
                 "&:active": {

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

@@ -246,7 +246,7 @@ function ProductItemCard({
         fontWeight: 900,
         letterSpacing: "0.12em",
         bgcolor: "primary.main",
-        color: "#fff",
+        color: th => (0, _format.primaryContrastColor)(th),
         boxShadow: "0 4px 12px rgba(45,124,243,0.2)",
         "& .MuiChip-label": {
           px: 1.5
@@ -513,7 +513,14 @@ function ProductItemCard({
         sx: {
           mt: 1.5
         },
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+        children: isRateLoading ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+          variant: "rounded",
+          width: 160,
+          height: 22,
+          sx: {
+            borderRadius: "6px"
+          }
+        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
           icon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_LocalOffer.default, {
             sx: {
               color: "warning.main",

package/lib/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/lib/checkout-v2/components/left/promotion-input.js

@@ -11,15 +11,19 @@ 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");
+var _util = require("../../../libs/util");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function PromotionInput({
   promotion,
   discounts,
   discountAmount,
-  initialShowInput = false
+  currency = null,
+  initialShowInput = false,
+  isAmountLoading = false
 }) {
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const [showInput, setShowInput] = (0, _react.useState)(false);
   const [code, setCode] = (0, _react.useState)("");
@@ -49,22 +53,7 @@ function PromotionInput({
       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 ? (0, _util.formatCouponTerms)(coupon, currency, locale) : "";
         return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
           justifyContent: "space-between",
@@ -116,7 +105,11 @@ function PromotionInput({
                 }
               })
             })]
-          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          }), isAmountLoading ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+            variant: "text",
+            width: 80,
+            height: 22
+          }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
             sx: {
               color: "text.primary",
               fontWeight: 600,

package/lib/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/lib/checkout-v2/components/right/customer-info-card.js

@@ -31,16 +31,22 @@ function CustomerInfoCard({
     t
   } = (0, _context.useLocaleContext)();
   const labels = fieldLabelMap(t);
-  const hasRequiredData = !!(form.values.customer_name && form.values.customer_email);
-  const [showEditForm, setShowEditForm] = (0, _react.useState)(!hasRequiredData);
-  const autoConfirmedRef = (0, _react.useRef)(false);
+  const [showEditForm, setShowEditForm] = (0, _react.useState)(false);
+  const [ready, setReady] = (0, _react.useState)(false);
+  const checkedRef = (0, _react.useRef)(false);
   (0, _react.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 = (0, _react.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__ */(0, _jsxRuntime.jsxs)(_material.Box, {
       sx: {
@@ -177,8 +183,8 @@ function CustomerInfoCard({
           return /* @__PURE__ */(0, _jsxRuntime.jsx)(_phoneField.default, {
             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]
@@ -199,7 +205,7 @@ function CustomerInfoCard({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputBase, {
             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__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
               position: "start",
@@ -209,7 +215,7 @@ function CustomerInfoCard({
               },
               children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
                 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"

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

@@ -21,7 +21,7 @@ function StatusFeedback({
     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.default.error(context.message || "Payment failed");
       onReset();
     }

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = SubmitButton;
 var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
+var _format = require("../../utils/format");
 function SubmitButton({
   canSubmit,
   isProcessing,
@@ -28,7 +29,8 @@ function SubmitButton({
       py: 1.5,
       fontSize: "1.3rem",
       fontWeight: 600,
-      textTransform: "none"
+      textTransform: "none",
+      color: theme => (0, _format.primaryContrastColor)(theme)
     },
     children: isProcessing ? processingLabel : label
   });

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

@@ -47,7 +47,23 @@ const fadeIn = {
     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%)"
@@ -117,6 +133,7 @@ function CheckoutLayout({
       children: [!hideLeft && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
           flex: 1,
+          minWidth: 0,
           bgcolor: t => t.palette.mode === "dark" ? "background.default" : "#f8faff",
           p: {
             xs: 3,
@@ -205,9 +222,12 @@ function CheckoutLayout({
       }
     }), !hideLeft && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
       sx: {
+        flex: {
+          xs: "none",
+          md: "0 0 50%"
+        },
         width: {
-          xs: "100%",
-          md: "50%"
+          xs: "100%"
         },
         height: {
           xs: "auto",
@@ -246,9 +266,12 @@ function CheckoutLayout({
       })
     }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
       sx: {
+        flex: hideLeft ? "none" : {
+          xs: "none",
+          md: "0 0 50%"
+        },
         width: hideLeft ? "100%" : {
-          xs: "100%",
-          md: "50%"
+          xs: "100%"
         },
         height: hideLeft ? "100vh" : {
           xs: "auto",

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

@@ -61,6 +61,9 @@ function CompositePanel() {
   const canUpsell = nonCrossSellItems.length <= 1;
   const hasTopUpsell = canUpsell && !!upsellPrimaryItem && ["subscription", "setup"].includes(mode);
   const isUpselled = !!upsellPrimaryItem?.upsell_price;
+  const [upsellSwitching, setUpsellSwitching] = (0, _react.useState)(false);
+  const [pendingUpsell, setPendingUpsell] = (0, _react.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;
@@ -88,7 +91,7 @@ function CompositePanel() {
   const isMultiItem = lineItems.items.length > 1;
   const activeSx = {
     bgcolor: "primary.main",
-    color: "#fff",
+    color: theme => (0, _format.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 = {
@@ -277,15 +280,21 @@ function CompositePanel() {
             },
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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.default.error(err?.response?.data?.error || err?.message || "Failed");
+                  } finally {
+                    setUpsellSwitching(false);
+                    setPendingUpsell(null);
                   }
                 }
               },
-              sx: capsuleBtnSx(!isUpselled),
+              sx: capsuleBtnSx(!visualIsUpselled),
               children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                 component: "span",
                 sx: {
@@ -298,15 +307,21 @@ function CompositePanel() {
               })
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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.default.error(err?.response?.data?.error || err?.message || "Failed");
+                  } finally {
+                    setUpsellSwitching(false);
+                    setPendingUpsell(null);
                   }
                 }
               },
-              sx: capsuleBtnSx(isUpselled),
+              sx: capsuleBtnSx(visualIsUpselled),
               children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                 component: "span",
                 sx: {

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

@@ -561,7 +561,9 @@ function PaymentPanel() {
             remove: promotion.remove
           },
           discounts,
-          discountAmount: pricing.discount
+          discountAmount: pricing.discount,
+          currency,
+          isAmountLoading
         })]
       }), (() => {
         const totalStr = pricing.total || "0";
@@ -710,7 +712,7 @@ function PaymentPanel() {
             })]
           })]
         });
-      })(), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+      })(), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
         variant: "contained",
         size: "large",
         fullWidth: true,
@@ -720,15 +722,51 @@ function PaymentPanel() {
           size: 20,
           color: "inherit"
         }) : null,
-        endIcon: !isProcessing ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_ArrowForward.default, {}) : void 0,
         sx: {
           py: 1.5,
           fontSize: "1.1rem",
           fontWeight: 600,
           textTransform: "none",
-          borderRadius: "12px"
+          borderRadius: "12px",
+          color: theme => (0, _format.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__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          component: "span",
+          sx: {
+            position: "relative",
+            zIndex: 1
+          },
+          children: isProcessing ? `${t("payment.checkout.processing")}...` : buttonLabel
+        }), !isProcessing && /* @__PURE__ */(0, _jsxRuntime.jsx)(_ArrowForward.default, {
+          className: "arrow-icon",
+          sx: {
+            ml: 1,
+            position: "relative",
+            zIndex: 1,
+            transition: "transform 0.2s ease"
+          }
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
         alignItems: "center",
@@ -818,7 +856,8 @@ function PaymentPanel() {
           remove: promotion.remove
         },
         discounts,
-        discountAmount: pricing.discount
+        discountAmount: pricing.discount,
+        currency
       })]
     }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
       sx: {
@@ -828,7 +867,7 @@ function PaymentPanel() {
         mode,
         subscription,
         staking: pricing.staking,
-        appName: session?.metadata?.app_name || "New Payment Kit"
+        appName: (0, _util.getStatementDescriptor)(session?.line_items || [])
       }), !isMobile && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
         alignItems: "center",