@blocklet/payment-react 1.14.20 → 1.14.22

package/lib/payment/product-card.js

@@ -20,7 +20,7 @@ function ProductCard({
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     direction: "row",
-    alignItems: "flex-start",
+    alignItems: "center",
     spacing: 1,
     flex: 2,
     sx: {
@@ -56,7 +56,8 @@ function ProductCard({
         sx: {
           fontWeight: 500,
           mb: 0.5,
-          lineHeight: 1
+          lineHeight: 1,
+          fontSize: 16
         },
         color: "text.primary",
         children: name
@@ -69,14 +70,14 @@ function ProductCard({
           lineHeight: 1,
           textAlign: "left"
         },
-        color: "text.secondary",
+        color: "text.lighter",
         children: description
       }), extra && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "body1",
         sx: {
           fontSize: "0.85rem"
         },
-        color: "text.secondary",
+        color: "text.lighter",
         children: extra
       })]
     })]

package/lib/payment/product-donation.js

@@ -11,6 +11,7 @@ var _ahooks = require("ahooks");
 var _react = require("react");
 var _switchButton = _interopRequireDefault(require("../components/switch-button"));
 var _util = require("../libs/util");
+var _payment = require("../contexts/payment");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ProductDonation({
   item,
@@ -22,6 +23,9 @@ function ProductDonation({
     t,
     locale
   } = (0, _context.useLocaleContext)();
+  const {
+    setPayable
+  } = (0, _payment.usePaymentContext)();
   const preset = settings.amount.preset || settings.amount.presets?.[0] || "0";
   const [state, setState] = (0, _ahooks.useSetState)({
     selected: preset,
@@ -73,6 +77,7 @@ function ProductDonation({
         input: value,
         error: (0, _util.formatAmountPrecisionLimit)(value, locale, precision)
       });
+      setPayable(false);
       return;
     }
     if (value < min || value > max) {
@@ -83,8 +88,10 @@ function ProductDonation({
           max
         })
       });
+      setPayable(false);
       return;
     }
+    setPayable(true);
     setState({
       error: "",
       input: value
@@ -126,7 +133,7 @@ function ProductDonation({
       sx: {
         marginRight: 2,
         marginLeft: 0.5,
-        color: "text.secondary"
+        color: "text.lighter"
       }
     }), !state.custom && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
       display: "flex",
@@ -136,7 +143,7 @@ function ProductDonation({
       children: settings.amount.presets && settings.amount.presets.length > 0 && settings.amount.presets.map(amount => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Card, {
         variant: "outlined",
         sx: {
-          minWidth: 120,
+          minWidth: 115,
           textAlign: "center",
           ...(state.selected === amount && !state.custom ? {
             borderColor: "primary.main"

package/lib/payment/product-item.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+import React from 'react';
 type Props = {
     item: TLineItemExpanded;
     items: TLineItemExpanded[];
@@ -10,7 +10,7 @@ type Props = {
     mode?: 'normal' | 'cross-sell';
     children?: React.ReactNode;
 };
-declare function ProductItem({ item, items, trialInDays, currency, mode, children, onUpsell, onDownsell, }: Props): import("react").JSX.Element;
+declare function ProductItem({ item, items, trialInDays, currency, mode, children, onUpsell, onDownsell, }: Props): JSX.Element;
 declare namespace ProductItem {
     var defaultProps: {
         mode: string;

package/lib/payment/product-item.js

@@ -7,6 +7,7 @@ module.exports = ProductItem;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
+var _react = require("react");
 var _status = _interopRequireDefault(require("../components/status"));
 var _switchButton = _interopRequireDefault(require("../components/switch-button"));
 var _util = require("../libs/util");
@@ -34,6 +35,14 @@ function ProductItem({
   const saving = (0, _util.formatUpsellSaving)(items, currency);
   const metered = item.price?.recurring?.usage_type === "metered" ? t("common.metered") : "";
   const canUpsell = mode === "normal" && items.length === 1;
+  const primaryText = (0, _react.useMemo)(() => {
+    const price = item.upsell_price || item.price || {};
+    const isRecurring = price?.type === "recurring" && price?.recurring;
+    if (isRecurring && trialInDays <= 0 && price?.recurring?.usage_type !== "metered") {
+      return `${pricing.primary} ${price.recurring ? (0, _util.formatRecurring)(price.recurring, false, "slash", locale) : ""}`;
+    }
+    return pricing.primary;
+  }, [trialInDays, pricing, item, locale]);
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     direction: "column",
     alignItems: "flex-start",
@@ -41,15 +50,18 @@ function ProductItem({
     sx: {
       width: "100%"
     },
+    className: "product-item",
     children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "column",
-      alignItems: "flex-end",
+      alignItems: "flex-start",
       sx: {
         width: "100%"
       },
+      className: "product-item-content",
       children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
-        alignItems: "flex-start",
+        alignItems: "center",
+        flexWrap: "wrap",
         spacing: 0.5,
         justifyContent: "space-between",
         sx: {
@@ -58,19 +70,12 @@ function ProductItem({
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_productCard.default, {
           logo: item.price.product?.images[0],
           name: item.price.product?.name,
-          description: item.price.product?.description,
-          extra: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          extra: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             display: "flex",
             alignItems: "center",
-            children: [item.price.type === "recurring" && item.price.recurring ? [pricing.quantity, t("common.billed", {
+            children: item.price.type === "recurring" && item.price.recurring ? [pricing.quantity, t("common.billed", {
               rule: `${(0, _util.formatRecurring)(item.upsell_price?.recurring || item.price.recurring, true, "per", locale)} ${metered}`
-            })].filter(Boolean).join(", ") : pricing.quantity, (0, _util.formatQuantityInventory)(item.price, item.quantity, locale) ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-              sx: {
-                fontSize: "0.85rem",
-                color: "red"
-              },
-              children: ["\uFF08", (0, _util.formatQuantityInventory)(item.price, item.quantity, locale), "\uFF09"]
-            }) : ""]
+            })].filter(Boolean).join(", ") : pricing.quantity
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "column",
@@ -79,19 +84,29 @@ function ProductItem({
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             sx: {
               color: "text.primary",
-              fontWeight: 500
+              fontWeight: 500,
+              whiteSpace: "nowrap"
             },
             gutterBottom: true,
-            children: pricing.primary
+            children: primaryText
           }), pricing.secondary && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             sx: {
               fontSize: "0.85rem",
-              color: "text.secondary"
+              color: "text.lighter"
             },
             children: pricing.secondary
           })]
         })]
-      }), children]
+      }), (0, _util.formatQuantityInventory)(item.price, item.quantity, locale) ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+        label: (0, _util.formatQuantityInventory)(item.price, item.quantity, locale),
+        variant: "outlined",
+        sx: {
+          mt: 1,
+          borderColor: "var(--tags-tag-red-border, #FFC8D3)",
+          background: "var(--tags-tag-red-bg, #FFE2E6)",
+          color: "var(--tags-tag-red-text, #E40031)"
+        }
+      }) : null, children]
     }), canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "row",
       alignItems: "center",
@@ -99,13 +114,14 @@ function ProductItem({
       sx: {
         width: "100%"
       },
+      className: "product-item-upsell",
       children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
         component: "label",
         htmlFor: "upsell-switch",
         sx: {
           fontSize: 12,
           cursor: "pointer",
-          color: "text.primary"
+          color: "text.secondary"
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_switchButton.default, {
           id: "upsell-switch",
@@ -121,10 +137,12 @@ function ProductItem({
           label: t("payment.checkout.upsell.off", {
             saving
           }),
-          color: "primary",
           variant: "outlined",
           sx: {
-            ml: 1
+            ml: 1,
+            borderColor: " var(--tags-tag-orange-border, #FFE467)",
+            background: "var(--tags-tag-orange-bg, #FFF4BC)",
+            color: "var(--tags-tag-orange-text, #D24000)"
           }
         })]
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -141,6 +159,7 @@ function ProductItem({
       sx: {
         width: "100%"
       },
+      className: "product-item-upsell",
       children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
         component: "label",
         htmlFor: "upsell-switch",

package/lib/payment/summary.js

@@ -13,30 +13,36 @@ var _util = require("@ocap/util");
 var _ahooks = require("ahooks");
 var _noop = _interopRequireDefault(require("lodash/noop"));
 var _useBus = _interopRequireDefault(require("use-bus"));
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
+var _styles = require("@mui/material/styles");
 var _status = _interopRequireDefault(require("../components/status"));
 var _api = _interopRequireDefault(require("../libs/api"));
 var _util2 = require("../libs/util");
 var _amount = _interopRequireDefault(require("./amount"));
 var _productDonation = _interopRequireDefault(require("./product-donation"));
 var _productItem = _interopRequireDefault(require("./product-item"));
+var _livemode = _interopRequireDefault(require("../components/livemode"));
+var _payment = require("../contexts/payment");
+var _mobile = require("../hooks/mobile");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const shake = (0, _material.keyframes)`
-  0% {
-    transform: rotate(0deg);
-  }
-  25% {
-    transform: rotate(2deg);
-  }
-  50% {
-    transform: rotate(0eg);
-  }
-  75% {
-    transform: rotate(-2deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-`;
+const ExpandMore = (0, _styles.styled)(props => {
+  const {
+    expand,
+    ...other
+  } = props;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+    ...other
+  });
+})(({
+  theme,
+  expand
+}) => ({
+  transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
+  marginLeft: "auto",
+  transition: theme.transitions.create("transform", {
+    duration: theme.transitions.duration.shortest
+  })
+}));
 async function fetchCrossSell(id) {
   try {
     const {
@@ -107,9 +113,14 @@ function PaymentSummary({
     t,
     locale
   } = (0, _context.useLocaleContext)();
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
+  const settings = (0, _payment.usePaymentContext)();
   const [state, setState] = (0, _ahooks.useSetState)({
     loading: false,
-    shake: false
+    shake: false,
+    expanded: items?.length < 3
   });
   const {
     data,
@@ -117,6 +128,7 @@ function PaymentSummary({
   } = (0, _ahooks.useRequest)(() => checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null));
   const headlines = (0, _util2.formatCheckoutHeadlines)(items, currency, trialInDays, locale);
   const staking = showStaking ? getStakingSetup(items, currency, billingThreshold) : "0";
+  const totalAmount = (0, _util.fromUnitToToken)(new _util.BN((0, _util.fromTokenToUnit)(headlines.actualAmount, currency?.decimal)).add(new _util.BN(staking)).toString(), currency?.decimal);
   (0, _useBus.default)("error.REQUIRE_CROSS_SELL", () => {
     setState({
       shake: true
@@ -165,60 +177,37 @@ function PaymentSummary({
       });
     }
   };
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
-    in: true,
-    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-      className: "cko-product",
-      direction: "column",
-      ...rest,
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-        className: "cko-product-summary",
-        direction: "column",
-        alignItems: "flex-start",
-        sx: {
-          mb: {
-            xs: 1,
-            sm: 3
-          }
-        },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-          className: "cko-ellipsis",
-          component: "div",
-          title: action || headlines.action,
-          sx: {
-            fontWeight: 500,
-            fontSize: "1.15rem",
-            color: "text.secondary"
-          },
-          children: action || headlines.action
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
-          amount: headlines.amount
-        }), headlines.then && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-          component: "div",
+  const ProductCardList = /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    className: "cko-product-list",
+    sx: {
+      flex: "0 1 auto",
+      overflow: "auto"
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+      spacing: {
+        xs: 1,
+        sm: 2
+      },
+      children: items.map(x => x.price.custom_unit_amount && onChangeAmount && donationSettings ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_productDonation.default, {
+        item: x,
+        settings: donationSettings,
+        onChange: onChangeAmount,
+        currency
+      }, `${x.price_id}-${currency.id}`) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_productItem.default, {
+        item: x,
+        items,
+        trialInDays,
+        currency,
+        onUpsell: handleUpsell,
+        onDownsell: handleDownsell,
+        children: x.cross_sell && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
           sx: {
-            fontSize: "0.9rem",
-            color: "text.secondary"
+            width: 1
           },
-          children: headlines.then
-        })]
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-        spacing: {
-          xs: 1,
-          sm: 2
-        },
-        children: items.map(x => x.price.custom_unit_amount && onChangeAmount && donationSettings ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_productDonation.default, {
-          item: x,
-          settings: donationSettings,
-          onChange: onChangeAmount,
-          currency
-        }, `${x.price_id}-${currency.id}`) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_productItem.default, {
-          item: x,
-          items,
-          trialInDays,
-          currency,
-          onUpsell: handleUpsell,
-          onDownsell: handleDownsell,
-          children: x.cross_sell && /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {
             size: "small",
             loadingPosition: "end",
             color: "error",
@@ -226,37 +215,26 @@ function PaymentSummary({
             loading: state.loading,
             onClick: handleCancelCrossSell,
             children: t("payment.checkout.cross_sell.remove")
-          })
-        }, `${x.price_id}-${currency.id}`))
-      }), data && items.some(x => x.price_id === data.id) === false && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grow, {
-        in: true,
-        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-          direction: "column",
-          alignItems: "flex-end",
-          spacing: 0.5,
-          sx: {
-            border: "1px solid #eee",
-            borderRadius: 1,
-            padding: 1,
-            animation: state.shake ? `${shake} 0.2s 5 ease-in-out` : "none",
-            mt: {
-              xs: 1,
-              sm: 2
-            }
+          })]
+        })
+      }, `${x.price_id}-${currency.id}`))
+    }), data && items.some(x => x.price_id === data.id) === false && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grow, {
+      in: true,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+        mt: 1,
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_productItem.default, {
+          item: {
+            quantity: 1,
+            price: data,
+            price_id: data.id,
+            cross_sell: true
           },
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_productItem.default, {
-            item: {
-              quantity: 1,
-              price: data,
-              price_id: data.id,
-              cross_sell: true
-            },
-            items,
-            trialInDays,
-            currency,
-            onUpsell: _noop.default,
-            onDownsell: _noop.default
-          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          items,
+          trialInDays,
+          currency,
+          onUpsell: _noop.default,
+          onDownsell: _noop.default,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
             direction: "row",
             alignItems: "center",
             justifyContent: "space-between",
@@ -281,44 +259,158 @@ function PaymentSummary({
               onClick: handleApplyCrossSell,
               children: t("payment.checkout.cross_sell.add")
             })]
-          })]
+          })
         })
-      }), staking > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-        direction: "row",
-        justifyContent: "space-between",
+      })
+    })]
+  });
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+    in: true,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      className: "cko-product",
+      direction: "column",
+      ...rest,
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        display: "flex",
         alignItems: "center",
-        spacing: 1,
         sx: {
-          border: "1px solid #eee",
-          borderRadius: 1,
-          padding: 1,
-          mt: {
-            xs: 1,
-            sm: 2
-          }
+          mb: 2.5
         },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          title: t("payment.checkout.orderSummary"),
+          sx: {
+            color: "text.primary",
+            fontSize: {
+              xs: "18px",
+              md: "24px"
+            },
+            fontWeight: "700",
+            lineHeight: "32px"
+          },
+          children: action || t("payment.checkout.orderSummary")
+        }), !settings.livemode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_livemode.default, {})]
+      }), isMobile ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-          direction: "row",
+          justifyContent: "space-between",
+          flexDirection: "row",
           alignItems: "center",
-          spacing: 0.5,
+          mb: 1.5,
+          onClick: () => setState({
+            expanded: !state.expanded
+          }),
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            children: t("payment.checkout.staking.title")
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
-            title: t("payment.checkout.staking.tooltip"),
-            placement: "top",
-            sx: {
-              maxWidth: "150px"
-            },
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.InfoOutlined, {
-              fontSize: "small",
+            children: t("payment.checkout.productListTotal", {
+              total: items.length
+            })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(ExpandMore, {
+            expand: state.expanded,
+            "aria-expanded": state.expanded,
+            "aria-label": "show more",
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_ExpandMore.default, {})
+          })]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Collapse, {
+          in: state.expanded || !isMobile,
+          timeout: "auto",
+          unmountOnExit: true,
+          children: ProductCardList
+        })]
+      }) : ProductCardList, /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Divider, {
+        sx: {
+          mt: 2.5,
+          mb: 2.5
+        }
+      }), staking > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          spacing: 1,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            alignItems: "center",
+            spacing: 0.5,
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               sx: {
                 color: "text.secondary"
-              }
-            })
+              },
+              children: t("payment.checkout.paymentRequired")
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                children: t("payment.checkout.stakingConfirm")
+              }),
+              placement: "top",
+              sx: {
+                maxWidth: "150px"
+              },
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.HelpOutline, {
+                fontSize: "small",
+                sx: {
+                  color: "text.lighter"
+                }
+              })
+            })]
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            children: headlines.amount
+          })]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          spacing: 1,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            alignItems: "center",
+            spacing: 0.5,
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                color: "text.secondary"
+              },
+              children: t("payment.checkout.staking.title")
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                children: t("payment.checkout.staking.tooltip")
+              }),
+              placement: "top",
+              sx: {
+                maxWidth: "150px"
+              },
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.HelpOutline, {
+                fontSize: "small",
+                sx: {
+                  color: "text.lighter"
+                }
+              })
+            })]
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            children: [(0, _util2.formatAmount)(staking, currency.decimal), " ", currency.symbol]
           })]
-        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-          children: [(0, _util2.formatAmount)(staking, currency.decimal), " ", currency.symbol]
         })]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        display: "flex",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "center",
+        sx: {
+          width: "100%"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          className: "base-label",
+          children: [t("common.total"), " "]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
+          amount: `${totalAmount} ${currency.symbol}`,
+          sx: {
+            fontSize: "16px"
+          }
+        })]
+      }), headlines.then && headlines.showThen && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        component: "div",
+        sx: {
+          fontSize: "0.9rem",
+          color: "text.lighter",
+          textAlign: "right",
+          margin: "-2px 0 8px"
+        },
+        children: headlines.then
       })]
     })
   });