@blocklet/payment-react 1.26.2 → 1.26.3

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/right/payment-panel.js

@@ -562,6 +562,7 @@ function PaymentPanel() {
           },
           discounts,
           discountAmount: pricing.discount,
+          currency,
           isAmountLoading
         })]
       }), (() => {
@@ -855,7 +856,8 @@ function PaymentPanel() {
           remove: promotion.remove
         },
         discounts,
-        discountAmount: pricing.discount
+        discountAmount: pricing.discount,
+        currency
       })]
     }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
       sx: {

package/lib/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/lib/checkout-v2/views/error-view.js

@@ -150,6 +150,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,

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

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

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

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

package/lib/locales/en.js

@@ -387,6 +387,10 @@ module.exports = (0, _flat.default)({
         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/lib/locales/zh.js

@@ -416,6 +416,10 @@ module.exports = (0, _flat.default)({
         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/lib/payment/form/index.js

@@ -40,6 +40,7 @@ var _loadingButton = _interopRequireDefault(require("../../components/loading-bu
 var _overDueInvoicePayment = _interopRequireDefault(require("../../components/over-due-invoice-payment"));
 var _currency2 = require("../../libs/currency");
 var _confirm = _interopRequireDefault(require("../../components/confirm"));
+var _serviceSuspendedDialog = _interopRequireDefault(require("../../components/service-suspended-dialog"));
 var _priceChangeConfirm = _interopRequireDefault(require("../../components/price-change-confirm"));
 var _validator = require("../../libs/validator");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -181,6 +182,7 @@ function PaymentForm({
     stripeContext: void 0,
     customer,
     customerLimited: false,
+    serviceSuspended: false,
     stripePaying: false,
     fastCheckoutInfo: null,
     creditInsufficientInfo: null,
@@ -1039,6 +1041,12 @@ function PaymentForm({
             customerLimited: true
           });
         }
+        if (errorCode === "STOP_ACCEPTING_ORDERS") {
+          shouldToast = false;
+          setState({
+            serviceSuspended: true
+          });
+        }
       }
       if (shouldToast) {
         _Toast.default.error((0, _util2.formatError)(err));
@@ -1307,6 +1315,11 @@ function PaymentForm({
           }),
           title: t("payment.customer.pastDue.alert.title")
         }
+      }), state.serviceSuspended && /* @__PURE__ */(0, _jsxRuntime.jsx)(_serviceSuspendedDialog.default, {
+        open: true,
+        onClose: () => setState({
+          serviceSuspended: false
+        })
       }), FastCheckoutConfirmDialog, CreditInsufficientDialog, PriceUpdatedDialog, state.priceChangeConfirm?.open && /* @__PURE__ */(0, _jsxRuntime.jsx)(_priceChangeConfirm.default, {
         open: true,
         changePercent: state.priceChangeConfirm.changePercent,
@@ -1617,6 +1630,16 @@ function PaymentForm({
         }),
         title: t("payment.customer.pastDue.alert.title")
       }
+    }), state.serviceSuspended && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
+      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, state.priceChangeConfirm?.open && /* @__PURE__ */(0, _jsxRuntime.jsx)(_priceChangeConfirm.default, {
       open: true,
       changePercent: state.priceChangeConfirm.changePercent,

package/lib/payment/index.js

@@ -87,6 +87,10 @@ function PaymentInner({
     return Array.from(currencyIds);
   }, [paymentMethods]);
   const defaultCurrencyId = (0, _react.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;
     }
@@ -104,7 +108,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 = (0, _reactHookForm.useForm)({
@@ -127,13 +131,20 @@ function PaymentInner({
     }
   });
   (0, _react.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]);
   (0, _react.useEffect)(() => {
     if (!(0, _util2.isMobileSafari)()) {
       return () => {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.26.2",
+  "version": "1.26.3",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -59,7 +59,7 @@
     "@arcblock/react-hooks": "^3.5.1",
     "@arcblock/ux": "^3.5.1",
     "@arcblock/ws": "^1.28.5",
-    "@blocklet/payment-react-headless": "1.26.2",
+    "@blocklet/payment-react-headless": "1.26.3",
     "@blocklet/theme": "^3.5.1",
     "@blocklet/ui-react": "^3.5.1",
     "@mui/icons-material": "^7.1.2",
@@ -97,7 +97,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.26.2",
+    "@blocklet/payment-types": "1.26.3",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -128,5 +128,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "71242a68d27d56666487176425153dc08071960f"
+  "gitHead": "18c5d045139c572b52465e15c4c63b3e327efab5"
 }

package/src/checkout-v2/components/dialogs/checkout-dialogs.tsx

@@ -9,6 +9,7 @@ import {
 import StripeForm from '../../../payment/form/stripe';
 import ConfirmDialog from '../../../components/confirm';
 import PriceChangeConfirm from '../../../components/price-change-confirm';
+import ServiceSuspendedDialog from '../../../components/service-suspended-dialog';
 import { formatTokenAmount } from '../../utils/format';
 
 function getRedirectUrl(session: any): string | undefined {
@@ -119,6 +120,9 @@ export default function CheckoutDialogs() {
         />
       )}
 
+      {/* Service Suspended Dialog */}
+      {(submit.context as any)?.type === 'service_suspended' && <ServiceSuspendedDialog open onClose={submit.cancel} />}
+
       {/* Credit Insufficient Dialog (matches V1 ConfirmDialog) */}
       {submit.status === 'credit_insufficient' && submit.context?.type === 'credit_insufficient' && (
         <ConfirmDialog

package/src/checkout-v2/components/left/promotion-input.tsx

@@ -15,6 +15,7 @@ import {
   Typography,
 } from '@mui/material';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { formatCouponTerms } from '../../../libs/util';
 
 interface PromotionInputProps {
   promotion: {
@@ -27,6 +28,8 @@ interface PromotionInputProps {
   };
   discounts: any[];
   discountAmount: string | null;
+  // eslint-disable-next-line react/require-default-props
+  currency?: any;
   /** Start with input field visible (skip the "Add promotion code" button) */
   initialShowInput?: boolean;
   /** Show skeleton for the discount amount while switching */
@@ -37,10 +40,11 @@ export default function PromotionInput({
   promotion,
   discounts,
   discountAmount,
+  currency = null,
   initialShowInput = false,
   isAmountLoading = false,
 }: PromotionInputProps) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const [showInput, setShowInput] = useState(false);
   const [code, setCode] = useState('');
   const [applying, setApplying] = useState(false);
@@ -77,19 +81,7 @@ export default function PromotionInput({
           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 (
             <Stack
               key={disc.promotion_code || disc.coupon || i}

package/src/checkout-v2/components/right/customer-info-card.tsx

@@ -1,4 +1,4 @@
-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';
@@ -17,7 +17,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;
 }
@@ -39,20 +41,31 @@ export default function CustomerInfoCard({ form, isLoggedIn }: CustomerInfoCardP
   const { t } = useLocaleContext();
   const labels = fieldLabelMap(t);
 
-  // Default to confirmed view if required fields have values
-  const hasRequiredData = !!(form.values.customer_name && form.values.customer_email);
-  const [showEditForm, setShowEditForm] = useState(!hasRequiredData);
-  const autoConfirmedRef = useRef(false);
+  // Don't render until first validation completes — avoids flash.
+  // Valid → show collapsed summary; invalid → show expanded form.
+  // After first check, only manual "Edit"/"Confirm" toggles.
+  const [showEditForm, setShowEditForm] = useState(false);
+  const [ready, setReady] = useState(false);
+  const checkedRef = useRef(false);
 
-  // When data arrives (e.g. prefetch), auto-switch to confirmed if valid
   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 (checkedRef.current) return;
+    // Wait for data to arrive before making a decision
+    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]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  if (!isLoggedIn) return null;
+  // Wrap onChange to delegate to parent form
+  const handleChange: typeof form.onChange = useCallback(
+    (field, value) => form.onChange(field, value),
+    [form.onChange] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  if (!isLoggedIn || !ready) return null;
 
   // Summary view
   if (!showEditForm) {
@@ -162,8 +175,8 @@ export default function CustomerInfoCard({ form, isLoggedIn }: CustomerInfoCardP
                   key={name}
                   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={label}
                   error={form.errors[name]}
@@ -177,14 +190,14 @@ export default function CustomerInfoCard({ form, isLoggedIn }: CustomerInfoCardP
                 <InputBase
                   fullWidth
                   value={value || ''}
-                  onChange={(e) => form.onChange(name, e.target.value)}
+                  onChange={(e) => handleChange(name, e.target.value)}
                   onBlur={() => form.validateField(name)}
                   startAdornment={
                     isPostalCode ? (
                       <InputAdornment position="start" sx={{ mr: 0.5, ml: -0.5 }}>
                         <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/src/checkout-v2/components/right/status-feedback.tsx

@@ -19,8 +19,8 @@ export default function StatusFeedback({ status, context, onReset }: StatusFeedb
     prevStatusRef.current = status;
 
     if (status === 'failed' && context?.type === 'error') {
-      // CUSTOMER_LIMITED is handled by parent (overdue invoice dialog)
-      if (context.code === 'CUSTOMER_LIMITED') return;
+      // CUSTOMER_LIMITED / STOP_ACCEPTING_ORDERS are handled by CheckoutDialogs
+      if (context.code === 'CUSTOMER_LIMITED' || context.code === 'STOP_ACCEPTING_ORDERS') return;
 
       Toast.error(context.message || 'Payment failed');
       onReset();

package/src/checkout-v2/layouts/checkout-layout.tsx

@@ -27,14 +27,26 @@ const fadeIn = {
   animation: { xs: 'none', md: 'fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both' },
 } as const;
 
-// Desktop: right panel slides in from the right
-const slideInFromRight = {
-  '@keyframes slideInRight': {
-    from: { transform: 'translateX(100%)' },
-    to: { transform: 'translateX(0)' },
-  },
-  animation: { xs: 'none', md: 'slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards' },
-} as const;
+// Desktop: right panel slides in from right (non-Safari) or fades in (Safari)
+// Safari has flexbox reflow bugs with translateX(100%), so we use a subtle fade instead
+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' },
+  } as const)
+  : ({
+    '@keyframes slideInRight': {
+      from: { transform: 'translateX(100%)' },
+      to: { transform: 'translateX(0)' },
+    },
+    animation: { xs: 'none', md: 'slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards' },
+  } as const);
 
 interface CheckoutLayoutProps {
   left: React.ReactNode;
@@ -94,6 +106,7 @@ export default function CheckoutLayout({ left, right, mode = 'inline' }: Checkou
           <Box
             sx={{
               flex: 1,
+              minWidth: 0,
               bgcolor: (t) => (t.palette.mode === 'dark' ? 'background.default' : '#f8faff'),
               p: { xs: 3, md: 5 },
               pt: { xs: 3, md: 4 },
@@ -170,7 +183,8 @@ export default function CheckoutLayout({ left, right, mode = 'inline' }: Checkou
       {!hideLeft && (
         <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' },
@@ -196,7 +210,8 @@ export default function CheckoutLayout({ left, right, mode = 'inline' }: Checkou
       {/* Right panel — full width when left is hidden */}
       <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/src/checkout-v2/panels/right/payment-panel.tsx

@@ -459,6 +459,7 @@ export default function PaymentPanel() {
               }}
               discounts={discounts}
               discountAmount={pricing.discount}
+              currency={currency}
               isAmountLoading={isAmountLoading}
             />
           </>
@@ -657,6 +658,7 @@ export default function PaymentPanel() {
             }}
             discounts={discounts}
             discountAmount={pricing.discount}
+            currency={currency}
           />
         </Drawer>
       )}

package/src/checkout-v2/views/error-view.tsx

@@ -7,7 +7,7 @@ import { primaryContrastColor } from '../utils/format';
 
 interface ErrorViewProps {
   error: string;
-  errorCode?: 'SESSION_EXPIRED' | 'EMPTY_LINE_ITEMS' | null;
+  errorCode?: 'SESSION_EXPIRED' | 'EMPTY_LINE_ITEMS' | 'STOP_ACCEPTING_ORDERS' | null;
   mode?: string;
 }
 
@@ -128,6 +128,14 @@ function getErrorConfig(
     };
   }
 
+  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,