@blocklet/payment-react 1.14.29 → 1.14.31

package/es/checkout/table.js

@@ -11,6 +11,7 @@ import api from "../libs/api.js";
 import { mergeExtraParams } from "../libs/util.js";
 import CheckoutForm from "./form.js";
 import { PaymentThemeProvider } from "../theme/index.js";
+import TruncatedText from "../components/truncated-text.js";
 const fetchData = async (id) => {
   const { data } = await api.get(`/api/pricing-tables/${id}`);
   return data;
@@ -85,7 +86,7 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
               textAlign: "center"
             },
             children: [
-              !data.livemode && /* @__PURE__ */ jsx(Livemode, { sx: { display: "flex", marginBottom: "8px", width: "fit-content" } }),
+              !data.livemode && /* @__PURE__ */ jsx(Livemode, { sx: { display: "flex", marginBottom: "8px", width: "fit-content", ml: 0 } }),
               /* @__PURE__ */ jsx(
                 Typography,
                 {
@@ -95,7 +96,7 @@ function CheckoutTableInner({ id, mode, onPaid, onError, onChange, extraParams,
                     lineHeight: "32px",
                     fontSize: "24px"
                   },
-                  children: data.name
+                  children: /* @__PURE__ */ jsx(TruncatedText, { text: data.name, maxLength: 60, useWidth: true })
                 }
               )
             ]

package/es/components/pricing-table.js

@@ -32,6 +32,7 @@ import {
 } from "../libs/util.js";
 import Amount from "../payment/amount.js";
 import { useMobile } from "../hooks/mobile.js";
+import TruncatedText from "./truncated-text.js";
 const sortOrder = {
   year: 1,
   month: 2,
@@ -294,7 +295,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                                   fontSize: "18px !important",
                                   fontWeight: "600"
                                 },
-                                children: x.product.name
+                                children: /* @__PURE__ */ jsx(TruncatedText, { text: x.product.name, maxLength: 26, useWidth: true })
                               }
                             ),
                             x.is_highlight && /* @__PURE__ */ jsx(

package/es/components/truncated-text.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+interface TruncatedTextProps {
+    text?: string;
+    maxLength?: number;
+    useWidth?: boolean;
+}
+declare function TruncatedText({ text, maxLength, useWidth }: TruncatedTextProps): import("react").JSX.Element | null;
+declare namespace TruncatedText {
+    var defaultProps: {
+        useWidth: boolean;
+        text: string;
+        maxLength: number;
+    };
+}
+export default TruncatedText;

package/es/components/truncated-text.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { Tooltip, tooltipClasses } from "@mui/material";
+import { styled } from "@mui/system";
+import { truncateText } from "../libs/util.js";
+const CustomTooltip = styled(({ className, ...props }) => /* @__PURE__ */ jsx(Tooltip, { ...props, classes: { popper: className } }))({
+  [`& .${tooltipClasses.tooltip}`]: {
+    fontSize: 11,
+    maxHeight: 120,
+    maxWidth: 500,
+    overflowY: "auto"
+  }
+});
+export default function TruncatedText({ text = "", maxLength = 100, useWidth = false }) {
+  if (!text) {
+    return null;
+  }
+  const truncatedText = truncateText(text, maxLength, useWidth);
+  if (!truncatedText.endsWith("...")) {
+    return /* @__PURE__ */ jsx("span", { children: truncatedText });
+  }
+  return /* @__PURE__ */ jsx(CustomTooltip, { title: text, placement: "bottom", enterTouchDelay: 0, children: /* @__PURE__ */ jsx("span", { title: text, children: truncatedText }) });
+}
+TruncatedText.defaultProps = {
+  useWidth: false,
+  text: "",
+  maxLength: 100
+};

package/es/history/invoice/list.js

@@ -96,7 +96,7 @@ const InvoiceTable = React.memo((props) => {
     {
       label: t("common.amount"),
       name: "total",
-      width: 60,
+      width: 80,
       align: "right",
       options: {
         customBodyRenderLite: (_, index) => {
@@ -146,9 +146,8 @@ const InvoiceTable = React.memo((props) => {
     },
     {
       label: t("common.status"),
-      name: "created_at",
+      name: "status",
       options: {
-        sort: true,
         customBodyRenderLite: (val, index) => {
           const invoice = data?.list[index];
           const link = getInvoiceLink(invoice, action);
@@ -300,7 +299,17 @@ const InvoiceList = React.memo((props) => {
               ] }) }),
               /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at, locale, "HH:mm:ss") }) }),
               !action && /* @__PURE__ */ jsx(Hidden, { mdDown: true, children: /* @__PURE__ */ jsx(Box, { flex: 2, className: "invoice-description", textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: invoice.description || invoice.id }) }) }),
-              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: action ? link.connect ? /* @__PURE__ */ jsx(Button, { variant: "contained", color: "primary", size: "small", onClick: () => onPay(invoice.id), children: t("payment.customer.invoice.pay") }) : /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: action ? link.connect ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "contained",
+                  color: "primary",
+                  size: "small",
+                  onClick: () => onPay(invoice.id),
+                  sx: { whiteSpace: "nowrap" },
+                  children: t("payment.customer.invoice.pay")
+                }
+              ) : /* @__PURE__ */ jsx(
                 Button,
                 {
                   component: "a",
@@ -308,6 +317,7 @@ const InvoiceList = React.memo((props) => {
                   size: "small",
                   href: link.url,
                   target: link.external ? "_blank" : target,
+                  sx: { whiteSpace: "nowrap" },
                   rel: "noreferrer",
                   children: t("payment.customer.invoice.pay")
                 }

package/es/index.d.ts

@@ -25,6 +25,7 @@ import ProductSkeleton from './payment/product-skeleton';
 import PaymentSummary from './payment/summary';
 import PricingItem from './components/pricing-item';
 import CountrySelect from './components/country-select';
+import TruncatedText from './components/truncated-text';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -33,4 +34,4 @@ export * from './hooks/subscription';
 export * from './hooks/mobile';
 export * from './hooks/table';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, };
+export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, };

package/es/index.js

@@ -25,6 +25,7 @@ import ProductSkeleton from "./payment/product-skeleton.js";
 import PaymentSummary from "./payment/summary.js";
 import PricingItem from "./components/pricing-item.js";
 import CountrySelect from "./components/country-select.js";
+import TruncatedText from "./components/truncated-text.js";
 export { PaymentThemeProvider } from "./theme/index.js";
 export * from "./libs/util.js";
 export * from "./libs/connect.js";
@@ -60,5 +61,6 @@ export {
   SafeGuard,
   PricingItem,
   CountrySelect,
-  Table
+  Table,
+  TruncatedText
 };

package/es/libs/util.d.ts

@@ -105,3 +105,5 @@ export declare function formatQuantityInventory(price: TPrice, quantity: string
 export declare function formatSubscriptionStatus(status: string): string;
 export declare function formatAmountPrecisionLimit(amount: string, locale?: string, precision?: number): string;
 export declare function getWordBreakStyle(value: any): 'break-word' | 'break-all';
+export declare function isMobileSafari(): boolean;
+export declare function truncateText(text: string, maxLength: number, useWidth?: boolean): string;

package/es/libs/util.js

@@ -2,6 +2,7 @@ import { BN, fromUnitToToken } from "@ocap/util";
 import omit from "lodash/omit";
 import trimEnd from "lodash/trimEnd";
 import numbro from "numbro";
+import stringWidth from "string-width";
 import { defaultCountries } from "react-international-phone";
 import { joinURL } from "ufo";
 import { t } from "../locales/index.js";
@@ -805,3 +806,35 @@ export function getWordBreakStyle(value) {
   }
   return "break-all";
 }
+export function isMobileSafari() {
+  const ua = navigator.userAgent.toLowerCase();
+  const isSafari = ua.indexOf("safari") > -1 && ua.indexOf("chrome") === -1;
+  const isMobile = ua.indexOf("mobile") > -1 || /iphone|ipad|ipod/.test(ua);
+  const isIOS = /iphone|ipad|ipod/.test(ua);
+  return isSafari && isMobile && isIOS;
+}
+export function truncateText(text, maxLength, useWidth = false) {
+  if (!text || !maxLength) {
+    return text;
+  }
+  if (!useWidth) {
+    if (text.length <= maxLength) {
+      return text;
+    }
+    return `${text.substring(0, maxLength)}...`;
+  }
+  let width = 0;
+  let truncated = "";
+  for (let i = 0; i < text.length; i++) {
+    const charWidth = stringWidth(text.charAt(i));
+    if (width + charWidth > maxLength) {
+      break;
+    }
+    truncated += text.charAt(i);
+    width += charWidth;
+  }
+  if (truncated === text) {
+    return truncated;
+  }
+  return `${truncated}...`;
+}

package/es/locales/en.js

@@ -202,6 +202,7 @@ export default flat({
         title: "Cancel your subscription",
         comment: "Any additional feedback?",
         description: "Your subscription will be canceled, but it is still available until the end of your current billing period on {date}",
+        trialDescription: "Free trial subscriptions will be canceled immediately and no longer available, confirm to continue",
         feedback: {
           tip: "We would love your feedback, it will help us improve our service",
           too_expensive: "The service is too expensive",
@@ -303,7 +304,8 @@ export default flat({
         threshold: "Metered usage billing",
         cancel: "Subscription cancel",
         manual: "Manual invoice",
-        upcoming: "Upcoming invoice"
+        upcoming: "Upcoming invoice",
+        slashStake: "Slash stake"
       }
     }
   },

package/es/locales/zh.js

@@ -202,6 +202,7 @@ export default flat({
         title: "\u53D6\u6D88\u60A8\u7684\u8BA2\u9605",
         comment: "\u4F60\u8FD8\u6709\u5176\u4ED6\u53CD\u9988\u4E48\uFF1F",
         description: "\u60A8\u7684\u8BA2\u9605\u5C06\u88AB\u53D6\u6D88\uFF0C\u4F46\u4ECD\u7136\u53EF\u7528\u76F4\u5230\u60A8\u5F53\u524D\u8BA1\u8D39\u5468\u671F\u7ED3\u675F\u4E8E{date}",
+        trialDescription: "\u514D\u8D39\u8BD5\u7528\u7684\u8BA2\u9605\u5C06\u88AB\u7ACB\u5373\u53D6\u6D88\uFF0C\u4E0D\u518D\u53EF\u7528\uFF0C\u786E\u8BA4\u662F\u5426\u7EE7\u7EED",
         feedback: {
           tip: "\u6211\u4EEC\u5E0C\u671B\u542C\u5230\u60A8\u7684\u53CD\u9988\uFF0C\u8FD9\u5C06\u5E2E\u52A9\u6211\u4EEC\u6539\u8FDB\u6211\u4EEC\u7684\u670D\u52A1",
           too_expensive: "\u670D\u52A1\u8D39\u7528\u592A\u9AD8",
@@ -303,7 +304,8 @@ export default flat({
         threshold: "\u7528\u91CF\u8D26\u5355",
         cancel: "\u8BA2\u9605\u53D6\u6D88",
         manual: "\u4EBA\u5DE5\u8D26\u5355",
-        upcoming: "\u672A\u6765\u8D26\u5355"
+        upcoming: "\u672A\u6765\u8D26\u5355",
+        slashStake: "\u7F5A\u6CA1\u8D28\u62BC"
       }
     }
   },

package/es/payment/form/index.js

@@ -3,15 +3,16 @@ import "react-international-phone/style.css";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
 import { LoadingButton } from "@mui/lab";
-import { Divider, Fade, FormLabel, Stack, Typography } from "@mui/material";
+import { Box, Divider, Fade, FormLabel, Stack, Typography } from "@mui/material";
 import { useMemoizedFn, useSetState } from "ahooks";
 import { PhoneNumberUtil } from "google-libphonenumber";
 import pWaitFor from "p-wait-for";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { joinURL } from "ufo";
 import { dispatch } from "use-bus";
 import isEmail from "validator/es/lib/isEmail";
+import { isEmpty } from "lodash";
 import ConfirmDialog from "../../components/confirm.js";
 import FormInput from "../../components/input.js";
 import { usePaymentContext } from "../../contexts/payment.js";
@@ -29,6 +30,7 @@ import AddressForm from "./address.js";
 import CurrencySelector from "./currency.js";
 import PhoneInput from "./phone.js";
 import StripeCheckout from "./stripe.js";
+import { useMobile } from "../../hooks/mobile.js";
 const phoneUtil = PhoneNumberUtil.getInstance();
 const waitForCheckoutComplete = async (sessionId) => {
   let result;
@@ -62,9 +64,17 @@ export default function PaymentForm({
   action
 }) {
   const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
   const { session, connect, payable } = usePaymentContext();
   const subscription = useSubscription("events");
-  const { control, getValues, setValue, handleSubmit } = useFormContext();
+  const {
+    control,
+    getValues,
+    setValue,
+    handleSubmit,
+    formState: { errors }
+  } = useFormContext();
+  const errorRef = useRef(null);
   const quantityInventoryStatus = useMemo(() => {
     let status = true;
     for (const item of checkoutSession.line_items) {
@@ -163,6 +173,11 @@ export default function PaymentForm({
       setState({ paying: false });
     }
   };
+  useEffect(() => {
+    if (errorRef.current && !isEmpty(errors) && isMobile) {
+      errorRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [errors, isMobile]);
   const onUserLoggedIn = async () => {
     const { data: profile } = await api.get("/api/customers/me?fallback=1");
     if (profile) {
@@ -267,6 +282,9 @@ export default function PaymentForm({
     setState({ submitting: false });
   };
   const onAction = () => {
+    if (errorRef.current && !isEmpty(errors) && isMobile) {
+      errorRef.current.scrollIntoView({ behavior: "smooth" });
+    }
     if (session?.user) {
       if (hasDidWallet(session.user)) {
         handleSubmit(onFormSubmit, onFormError)();
@@ -343,68 +361,79 @@ export default function PaymentForm({
         )
       ] }) }),
       /* @__PURE__ */ jsx(Stack, { direction: "row", sx: { mb: 1 }, alignItems: "center", justifyContent: "space-between" }),
-      /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, sx: { flex: 1, overflow: "auto" }, children: [
-        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.customer.name") }),
-        /* @__PURE__ */ jsx(
-          FormInput,
-          {
-            name: "customer_name",
-            variant: "outlined",
-            errorPosition: "right",
-            rules: {
-              required: t("payment.checkout.required")
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.customer.email") }),
-        /* @__PURE__ */ jsx(
-          FormInput,
-          {
-            name: "customer_email",
-            variant: "outlined",
-            errorPosition: "right",
-            rules: {
-              required: t("payment.checkout.required"),
-              validate: (x) => isEmail(x) ? true : t("payment.checkout.invalid")
-            }
-          }
-        ),
-        checkoutSession.phone_number_collection?.enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.customer.phone") }),
-          /* @__PURE__ */ jsx(
-            PhoneInput,
-            {
-              name: "customer_phone",
-              variant: "outlined",
-              errorPosition: "right",
-              placeholder: "Phone number",
-              rules: {
-                required: t("payment.checkout.required"),
-                validate: (x) => {
-                  try {
-                    const parsed = phoneUtil.parseAndKeepRawInput(x);
-                    return phoneUtil.isValidNumber(parsed) ? true : t("payment.checkout.invalid");
-                  } catch {
-                    return t("payment.checkout.invalid");
+      /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "column",
+          className: "cko-payment-form",
+          id: "cko-payment-form",
+          spacing: 0,
+          ref: !isEmpty(errors) ? errorRef : void 0,
+          sx: { flex: 1, overflow: "auto" },
+          children: [
+            /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.customer.name") }),
+            /* @__PURE__ */ jsx(
+              FormInput,
+              {
+                name: "customer_name",
+                variant: "outlined",
+                errorPosition: "right",
+                rules: {
+                  required: t("payment.checkout.required")
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.customer.email") }),
+            /* @__PURE__ */ jsx(
+              FormInput,
+              {
+                name: "customer_email",
+                variant: "outlined",
+                errorPosition: "right",
+                rules: {
+                  required: t("payment.checkout.required"),
+                  validate: (x) => isEmail(x) ? true : t("payment.checkout.invalid")
+                }
+              }
+            ),
+            checkoutSession.phone_number_collection?.enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.customer.phone") }),
+              /* @__PURE__ */ jsx(
+                PhoneInput,
+                {
+                  name: "customer_phone",
+                  variant: "outlined",
+                  errorPosition: "right",
+                  placeholder: "Phone number",
+                  rules: {
+                    required: t("payment.checkout.required"),
+                    validate: (x) => {
+                      try {
+                        const parsed = phoneUtil.parseAndKeepRawInput(x);
+                        return phoneUtil.isValidNumber(parsed) ? true : t("payment.checkout.invalid");
+                      } catch {
+                        return t("payment.checkout.invalid");
+                      }
+                    }
                   }
                 }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              AddressForm,
+              {
+                mode: checkoutSession.billing_address_collection,
+                stripe: method?.type === "stripe",
+                sx: { marginTop: "0 !important" }
               }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          AddressForm,
-          {
-            mode: checkoutSession.billing_address_collection,
-            stripe: method?.type === "stripe",
-            sx: { marginTop: "0 !important" }
-          }
-        )
-      ] })
+            )
+          ]
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsx(Divider, { sx: { mt: 2.5, mb: 2.5 } }),
     /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-submit", children: [
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsx(
         LoadingButton,
         {
           variant: "contained",
@@ -417,7 +446,7 @@ export default function PaymentForm({
           loading: state.submitting || state.paying,
           children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
         }
-      ),
+      ) }),
       ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */ jsx(Typography, { sx: { mt: 2.5, color: "text.lighter", fontSize: "0.9rem", lineHeight: "1.1rem" }, children: t("payment.checkout.confirm", { payee }) })
     ] }) }),
     state.customerLimited && /* @__PURE__ */ jsx(

package/es/payment/index.js

@@ -11,7 +11,7 @@ import { useEffect, useState } from "react";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
 import { usePaymentContext } from "../contexts/payment.js";
 import api from "../libs/api.js";
-import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from "../libs/util.js";
+import { findCurrency, formatError, getStatementDescriptor, isMobileSafari, isValidCountry } from "../libs/util.js";
 import PaymentError from "./error.js";
 import CheckoutFooter from "./footer.js";
 import PaymentForm from "./form/index.js";
@@ -66,6 +66,25 @@ function PaymentInner({
       )
     }
   });
+  useEffect(() => {
+    if (!isMobileSafari()) {
+      return () => {
+      };
+    }
+    let scrollTop = 0;
+    const focusinHandler = () => {
+      scrollTop = window.scrollY;
+    };
+    const focusoutHandler = () => {
+      window.scrollTo(0, scrollTop);
+    };
+    document.body.addEventListener("focusin", focusinHandler);
+    document.body.addEventListener("focusout", focusoutHandler);
+    return () => {
+      document.body.removeEventListener("focusin", focusinHandler);
+      document.body.removeEventListener("focusout", focusoutHandler);
+    };
+  }, []);
   const currencyId = useWatch({ control: methods.control, name: "payment_currency", defaultValue: defaultCurrencyId });
   const currency = findCurrency(paymentMethods, currencyId) || settings.baseCurrency;
   const method = paymentMethods.find((x) => x.id === currency.payment_method_id);
@@ -221,7 +240,9 @@ export default function Payment({
   const { t } = useLocaleContext();
   const { refresh, livemode, setLivemode } = usePaymentContext();
   const [delay, setDelay] = useState(false);
+  const { isMobile } = useMobile();
   const hideSummaryCard = mode.endsWith("-minimal") || !showCheckoutSummary;
+  const isMobileSafariEnv = isMobileSafari();
   useEffect(() => {
     setTimeout(() => {
       setDelay(true);
@@ -291,7 +312,10 @@ export default function Payment({
     {
       display: "flex",
       flexDirection: "column",
-      sx: { height: mode === "standalone" ? "100vh" : "auto", overflow: "hidden" },
+      sx: {
+        height: mode === "standalone" ? "100vh" : "auto",
+        overflow: isMobileSafariEnv ? "visible" : "hidden"
+      },
       children: [
         mode === "standalone" ? /* @__PURE__ */ jsx(
           Header,
@@ -306,17 +330,58 @@ export default function Payment({
             sx: { borderBottom: "1px solid var(--stroke-border-base, #EFF1F5)" }
           }
         ) : null,
-        /* @__PURE__ */ jsxs(Root, { mode, sx: { flex: 1 }, children: [
-          goBack && /* @__PURE__ */ jsx(
-            ArrowBackOutlined,
-            {
-              sx: { mr: 0.5, color: "text.secondary", alignSelf: "flex-start", margin: "16px 0", cursor: "pointer" },
-              onClick: goBack,
-              fontSize: "medium"
-            }
-          ),
-          /* @__PURE__ */ jsx(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8 } }, children: renderContent() })
-        ] })
+        /* @__PURE__ */ jsxs(
+          Root,
+          {
+            mode,
+            sx: {
+              flex: 1,
+              overflow: {
+                xs: isMobileSafariEnv ? "visible" : "auto",
+                md: "hidden"
+              },
+              ...isMobile && mode === "standalone" ? {
+                ".cko-payment-submit-btn": {
+                  position: "fixed",
+                  bottom: 20,
+                  left: 0,
+                  right: 0,
+                  zIndex: 999,
+                  background: "#fff",
+                  padding: "10px",
+                  textAlign: "center",
+                  button: {
+                    color: "#fff",
+                    maxWidth: 542
+                  }
+                },
+                ".cko-footer": {
+                  position: "fixed",
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  zIndex: 999,
+                  background: "#fff",
+                  marginBottom: 0
+                },
+                ".cko-payment": {
+                  paddingBottom: "100px"
+                }
+              } : {}
+            },
+            children: [
+              goBack && /* @__PURE__ */ jsx(
+                ArrowBackOutlined,
+                {
+                  sx: { mr: 0.5, color: "text.secondary", alignSelf: "flex-start", margin: "16px 0", cursor: "pointer" },
+                  onClick: goBack,
+                  fontSize: "medium"
+                }
+              ),
+              /* @__PURE__ */ jsx(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : mode === "inline" ? 4 : 8 } }, children: renderContent() })
+            ]
+          }
+        )
       ]
     }
   );
@@ -461,7 +526,6 @@ export const Root = styled(Box)`
   }
 
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
-    background: ${(props) => props.mode === "standalone" ? "var(--backgrounds-bg-subtle, #F9FAFB)" : "transparent"};
     padding-top: 0;
     overflow: auto;
     &:before {
@@ -470,7 +534,8 @@ export const Root = styled(Box)`
     .cko-container {
       flex-direction: column;
       align-items: center;
-      gap: 32px;
+      justify-content: flex-start;
+      gap: 0;
       overflow: visible;
       min-width: 200px;
     }
@@ -483,6 +548,7 @@ export const Root = styled(Box)`
       width: 100%;
       height: fit-content;
       flex: none;
+      border-top: 1px solid var(--stroke-border-base, #eff1f5);
       &:before {
         display: none;
       }

package/es/payment/summary.js

@@ -277,30 +277,14 @@ export default function PaymentSummary({
       /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 1, children: [
         /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
           /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.paymentRequired") }),
-          /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              title: /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.stakingConfirm") }),
-              placement: "top",
-              sx: { maxWidth: "150px" },
-              children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } })
-            }
-          )
+          /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.stakingConfirm"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } }) })
         ] }),
         /* @__PURE__ */ jsx(Typography, { children: headlines.amount })
       ] }),
       /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 1, children: [
         /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
           /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.staking.title") }),
-          /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              title: /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.staking.tooltip") }),
-              placement: "top",
-              sx: { maxWidth: "150px" },
-              children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } })
-            }
-          )
+          /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.staking.tooltip"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } }) })
         ] }),
         /* @__PURE__ */ jsxs(Typography, { children: [
           formatAmount(staking, currency.decimal),