@blocklet/payment-react 1.26.2 → 1.26.4

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/promotion-input.d.ts

@@ -12,10 +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, isAmountLoading, }: 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

@@ -16,14 +16,16 @@ import {
   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,
+  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);
@@ -51,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,
         {

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

@@ -413,6 +413,7 @@ export default function PaymentPanel() {
             },
             discounts,
             discountAmount: pricing.discount,
+            currency,
             isAmountLoading
           }
         )
@@ -604,7 +605,8 @@ export default function PaymentPanel() {
                 remove: promotion.remove
               },
               discounts,
-              discountAmount: pricing.discount
+              discountAmount: pricing.discount,
+              currency
             }
           )
         ]

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

@@ -114,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,

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;

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

@@ -0,0 +1,63 @@
+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,
+      slotProps: {
+        paper: {
+          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/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,7 @@ export default function PaymentForm({
         }
       }
     ),
+    state.serviceSuspended && /* @__PURE__ */ jsx(ServiceSuspendedDialog, { open: true, onClose: () => setState({ serviceSuspended: false }) }),
     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/promotion-input.d.ts

@@ -12,10 +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, isAmountLoading, }: 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,16 +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,
+  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)("");
@@ -50,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",

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/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",