@blocklet/payment-react 1.14.23 → 1.14.25

package/es/checkout/donate.js

@@ -211,7 +211,16 @@ function useDonation(settings, livemode = true, mode = "default") {
     setState
   };
 }
-function CheckoutDonateInner({ settings, livemode, timeout, onPaid, onError, mode, inlineOptions = {} }) {
+function CheckoutDonateInner({
+  settings,
+  livemode,
+  timeout,
+  onPaid,
+  onError,
+  mode,
+  inlineOptions = {},
+  theme
+}) {
   const { state, setState, donation, supporters } = useDonation(settings, livemode, mode);
   const [anchorEl, setAnchorEl] = useState(null);
   const [popoverOpen, setPopoverOpen] = useState(false);
@@ -340,15 +349,29 @@ function CheckoutDonateInner({ settings, livemode, timeout, onPaid, onError, mod
         maxWidth: "md",
         showCloseButton: true,
         disableEscapeKeyDown: true,
+        sx: {
+          ".MuiDialogContent-root": {
+            padding: {
+              xs: 0,
+              md: "0 16px 0"
+            },
+            borderTop: "1px solid var(--stroke-border-base, #EFF1F5)",
+            width: {
+              xs: "100%",
+              md: 900
+            }
+          }
+        },
         onClose: (e, reason) => setState({ open: reason === "backdropClick" }),
-        children: /* @__PURE__ */ jsx(Box, { sx: { mb: 1, height: "100%" }, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(Box, { sx: { height: "100%", width: "100%" }, children: /* @__PURE__ */ jsx(
           CheckoutForm,
           {
             id: donation.data?.id,
             onPaid: handlePaid,
             onError,
             action: settings.appearance?.button?.text,
-            mode: "inline"
+            mode: "inline",
+            theme
           }
         ) })
       }

package/es/libs/util.d.ts

@@ -19,7 +19,10 @@ export declare function getStatementDescriptor(items: any[]): any;
 export declare function formatRecurring(recurring: PriceRecurring, translate?: boolean, separator?: string, locale?: string): string;
 export declare function getPriceUintAmountByCurrency(price: TPrice, currency: TPaymentCurrency): string;
 export declare function getPriceCurrencyOptions(price: TPrice): PriceCurrency[];
-export declare function formatLineItemPricing(item: TLineItemExpanded, currency: TPaymentCurrency, trial: number, locale?: string): {
+export declare function formatLineItemPricing(item: TLineItemExpanded, currency: TPaymentCurrency, { trialEnd, trialInDays }: {
+    trialEnd: number;
+    trialInDays: number;
+}, locale?: string): {
     primary: string;
     secondary?: string;
     quantity: string;
@@ -47,7 +50,17 @@ export declare function formatPriceDisplay({ amount, then, actualAmount, showThe
     actualAmount: string;
     showThen?: boolean;
 }, recurring: string, hasMetered: boolean, locale?: string): string;
-export declare function formatCheckoutHeadlines(items: TLineItemExpanded[], currency: TPaymentCurrency, trialInDays: number, locale?: string): {
+export declare function getFreeTrialTime({ trialInDays, trialEnd }: {
+    trialInDays: number;
+    trialEnd: number;
+}, locale?: string): {
+    count: number;
+    interval: string;
+};
+export declare function formatCheckoutHeadlines(items: TLineItemExpanded[], currency: TPaymentCurrency, { trialInDays, trialEnd }: {
+    trialInDays: number;
+    trialEnd: number;
+}, locale?: string): {
     action: string;
     amount: string;
     then?: string;

package/es/libs/util.js

@@ -202,7 +202,7 @@ export function getPriceCurrencyOptions(price) {
     }
   ];
 }
-export function formatLineItemPricing(item, currency, trial, locale = "en") {
+export function formatLineItemPricing(item, currency, { trialEnd, trialInDays }, locale = "en") {
   const price = item.upsell_price || item.price;
   let quantity = t("common.qty", locale, { count: item.quantity });
   if (price.recurring?.usage_type === "metered" || +item.quantity === 1) {
@@ -211,6 +211,7 @@ export function formatLineItemPricing(item, currency, trial, locale = "en") {
   const unitValue = new BN(getPriceUintAmountByCurrency(price, currency));
   const total = `${fromUnitToToken(unitValue.mul(new BN(item.quantity)), currency.decimal)} ${currency.symbol}`;
   const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol}`;
+  const trialResult = getFreeTrialTime({ trialInDays, trialEnd }, locale);
   const appendUnit = (v, alt) => {
     if (price.product.unit_label) {
       return `${v}/${price.product.unit_label}`;
@@ -221,9 +222,9 @@ export function formatLineItemPricing(item, currency, trial, locale = "en") {
     return quantity ? t("common.each", locale, { unit }) : "";
   };
   if (price.type === "recurring" && price.recurring) {
-    if (trial > 0) {
+    if (trialResult.count > 0) {
       return {
-        primary: t("common.trial", locale, { count: trial }),
+        primary: t("common.trial", locale, { count: trialResult.count, interval: trialResult.interval }),
         secondary: `${appendUnit(total, total)} ${formatRecurring(price.recurring, false, "slash", locale)}`,
         quantity
       };
@@ -415,11 +416,43 @@ export function formatPriceDisplay({ amount, then, actualAmount, showThen }, rec
   }
   return [amount, then].filter(Boolean).join(" ");
 }
-export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "en") {
+export function getFreeTrialTime({ trialInDays, trialEnd }, locale = "en") {
+  const now = dayjs().unix();
+  if (trialEnd > 0 && trialEnd > now) {
+    if (trialEnd - now < 3600) {
+      return {
+        count: Math.ceil((trialEnd - now) / 60),
+        interval: t("common.minute", locale)
+      };
+    }
+    if (trialEnd - now < 86400) {
+      return {
+        count: Math.ceil((trialEnd - now) / 3600),
+        interval: t("common.hour", locale)
+      };
+    }
+    return {
+      count: Math.ceil((trialEnd - now) / 86400),
+      interval: t("common.day", locale)
+    };
+  }
+  if (trialInDays > 0) {
+    return {
+      count: trialInDays,
+      interval: t("common.day", locale)
+    };
+  }
+  return {
+    count: 0,
+    interval: t("common.day", locale)
+  };
+}
+export function formatCheckoutHeadlines(items, currency, { trialInDays, trialEnd }, locale = "en") {
   const brand = getStatementDescriptor(items);
   const { total } = getCheckoutAmount(items, currency, trialInDays > 0);
   const actualAmount = fromUnitToToken(total, currency.decimal);
   const amount = `${fromUnitToToken(total, currency.decimal)} ${currency.symbol}`;
+  const trialResult = getFreeTrialTime({ trialInDays, trialEnd }, locale);
   if (items.length === 0) {
     return {
       action: t("payment.checkout.empty", locale),
@@ -453,17 +486,19 @@ export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "
           if (x.price.recurring?.usage_type === "metered") {
             return acc;
           }
-          return acc.add(new BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new BN(x.quantity)));
+          return acc.add(
+            new BN(getPriceUintAmountByCurrency(x.upsell_price || x.price, currency)).mul(new BN(x.quantity))
+          );
         }, new BN(0)),
         currency.decimal
       ),
       currency.symbol
     ].filter(Boolean).join(" ");
     if (items.length > 1) {
-      if (trialInDays > 0) {
+      if (trialResult.count > 0) {
         const result4 = {
           action: t("payment.checkout.try2", locale, { name, count: items.length - 1 }),
-          amount: t("payment.checkout.free", locale, { count: trialInDays }),
+          amount: t("payment.checkout.free", locale, { count: trialResult.count, interval: trialResult.interval }),
           then: formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale),
           showThen: true,
           actualAmount: "0"
@@ -485,10 +520,10 @@ export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "
         priceDisplay: formatPriceDisplay(result3, recurring, hasMetered, locale)
       };
     }
-    if (trialInDays > 0) {
+    if (trialResult.count > 0) {
       const result3 = {
         action: t("payment.checkout.try1", locale, { name }),
-        amount: t("payment.checkout.free", locale, { count: trialInDays }),
+        amount: t("payment.checkout.free", locale, { count: trialResult.count, interval: trialResult.interval }),
         then: formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale),
         showThen: true,
         actualAmount: "0"

package/es/locales/en.js

@@ -60,9 +60,10 @@ export default flat({
     continue: "Continue",
     qty: "Qty {count}",
     each: "{unit} each",
-    trial: "Free for {count} day{count > 1 ? 's' : ''}",
+    trial: "Free for {count} {interval}{count > 1 ? 's' : ''}",
     billed: "billed {rule}",
     metered: "based on usage",
+    minute: "minute",
     hour: "hour",
     day: "day",
     week: "week",
@@ -133,7 +134,7 @@ export default flat({
       then: "Then {subscription} {recurring}",
       meteredThen: "Then {recurring} based on usage",
       metered: "{recurring} based on usage",
-      free: "{count} day{count > 1 ? 's' : ''} free",
+      free: "{count} {interval}{count > 1 ? 's' : ''} free",
       least: "continue with at least",
       completed: {
         payment: "Thanks for your purchase",

package/es/locales/zh.js

@@ -60,9 +60,10 @@ export default flat({
     continue: "\u7EE7\u7EED",
     qty: "{count} \u4EF6",
     each: "\u6BCF\u4EF6 {unit}",
-    trial: "\u514D\u8D39\u8BD5\u7528 {count} \u5929",
+    trial: "\u514D\u8D39\u8BD5\u7528 {count} {interval}",
     billed: "{rule}\u6536\u8D39",
     metered: "\u6309\u7528\u91CF",
+    minute: "\u5206\u949F",
     hour: "\u5C0F\u65F6",
     day: "\u5929",
     week: "\u5468",
@@ -133,7 +134,7 @@ export default flat({
       then: "\u7136\u540E {subscription} {recurring}",
       meteredThen: "\u7136\u540E{recurring}\u6309\u7528\u91CF\u8BA1\u8D39",
       metered: "{recurring}\u6309\u7528\u91CF\u8BA1\u8D39",
-      free: "\u514D\u8D39\u8BD5\u7528 {count} \u5929",
+      free: "\u514D\u8D39\u8BD5\u7528 {count} {interval}",
       least: "\u81F3\u5C11",
       completed: {
         payment: "\u611F\u8C22\u60A8\u7684\u8D2D\u4E70",

package/es/payment/form/currency.js

@@ -61,16 +61,6 @@ const Root = styled("section")`
     background: var(--backgrounds-bg-field, #f9fafb);
   }
 
-  // .cko-payment-card::before {
-  //   content: '';
-  //   position: absolute;
-  //   right: 0;
-  //   bottom: 0;
-  //   border: 12px solid ${(props) => props.theme.palette.primary.main};
-  //   border-top-color: transparent;
-  //   border-left-color: transparent;
-  // }
-
   .cko-payment-card-unselect {
     border: 1px solid #ddd;
     padding: 4px 8px;

package/es/payment/index.js

@@ -133,6 +133,7 @@ function PaymentInner({
         {
           items: state.checkoutSession.line_items,
           trialInDays: state.checkoutSession.subscription_data?.trial_period_days || 0,
+          trialEnd: state.checkoutSession.subscription_data?.trial_end || 0,
           billingThreshold: Math.max(
             state.checkoutSession.subscription_data?.billing_threshold_amount || 0,
             // @ts-ignore
@@ -321,23 +322,18 @@ export const Root = styled(Box)`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  // justify-content: center;
   align-items: center;
   overflow: hidden;
-  // min-height: ${(props) => props.mode === "standalone" ? "100vh" : "auto"};
   position: relative;
   .cko-container {
     overflow: hidden;
     width: 100%;
-    // max-width: ${(props) => props.mode.endsWith("-minimal") ? "400px" : "1000px"};
     display: flex;
     flex-direction: row;
     justify-content: center;
-    // gap: 4px;
     position: relative;
     flex: 1;
     padding: 1px;
-    // padding: ${(props) => props.mode === "standalone" ? "0 16px" : "0"};
   }
 
   .base-card {
@@ -350,14 +346,11 @@ export const Root = styled(Box)`
   }
 
   .cko-overview {
-    // width: ${(props) => props.mode.endsWith("-minimal") ? "100%" : "400px"};
-    // min-height: ${(props) => props.mode === "standalone" ? "540px" : "auto"};
     position: relative;
     flex-direction: column;
     display: ${(props) => props.mode.endsWith("-minimal") ? "none" : "flex"};
     background: var(--backgrounds-bg-base);
     min-height: 'auto';
-    // width: 502px;
   }
   .cko-header {
     left: 0;
@@ -385,8 +378,6 @@ export const Root = styled(Box)`
 
   .cko-payment {
     width: 502px;
-    // width: ${(props) => props.mode.endsWith("-minimal") ? "100%" : "400px"};
-    // box-shadow: -4px 0px 8px 0px rgba(2, 7, 19, 0.04);
     padding-left: ${(props) => props.mode === "standalone" ? "40px" : "20px"};
     position: relative;
     &:before {
@@ -411,10 +402,6 @@ export const Root = styled(Box)`
   }
 
   .cko-payment-form {
-    // .MuiInputAdornment-positionStart {
-    //   width: 50px;
-    // }
-
     .MuiFormLabel-root {
       color: var(--foregrounds-fg-base, #010714);
       font-weight: 500;

package/es/payment/product-donation.js

@@ -79,20 +79,30 @@ export default function ProductDonation({
           textAlign: "center",
           ...state.selected === amount && !state.custom ? { borderColor: "primary.main" } : {}
         },
-        children: /* @__PURE__ */ jsx(CardActionArea, { onClick: () => handleSelect(amount), children: /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { py: 1 }, spacing: 0.5, alignItems: "flex-end", justifyContent: "center", children: [
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              component: "strong",
-              lineHeight: 1,
-              variant: "h5",
-              sx: { fontVariantNumeric: "tabular-nums", fontWeight: 400 },
-              children: amount
-            }
-          ),
-          /* @__PURE__ */ jsx(Typography, { component: "small", lineHeight: 1, fontSize: 12, children: "ABT" }),
-          " "
-        ] }) })
+        children: /* @__PURE__ */ jsx(CardActionArea, { onClick: () => handleSelect(amount), children: /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "row",
+            sx: { py: 1, px: 0.5 },
+            spacing: 0.5,
+            alignItems: "flex-end",
+            justifyContent: "center",
+            children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  component: "strong",
+                  lineHeight: 1,
+                  variant: "h3",
+                  sx: { fontVariantNumeric: "tabular-nums", fontWeight: 400 },
+                  children: amount
+                }
+              ),
+              /* @__PURE__ */ jsx(Typography, { component: "small", lineHeight: 1, fontSize: 12, children: "ABT" }),
+              " "
+            ]
+          }
+        ) })
       },
       amount
     )) }),

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

@@ -4,17 +4,19 @@ type Props = {
     item: TLineItemExpanded;
     items: TLineItemExpanded[];
     trialInDays: number;
+    trialEnd?: number;
     currency: TPaymentCurrency;
     onUpsell: Function;
     onDownsell: Function;
     mode?: 'normal' | 'cross-sell';
     children?: React.ReactNode;
 };
-declare function ProductItem({ item, items, trialInDays, currency, mode, children, onUpsell, onDownsell, }: Props): JSX.Element;
+declare function ProductItem({ item, items, trialInDays, trialEnd, currency, mode, children, onUpsell, onDownsell, }: Props): JSX.Element;
 declare namespace ProductItem {
     var defaultProps: {
         mode: string;
         children: null;
+        trialEnd: number;
     };
 }
 export default ProductItem;

package/es/payment/product-item.js

@@ -12,14 +12,17 @@ import {
   formatUpsellSaving
 } from "../libs/util.js";
 import ProductCard from "./product-card.js";
+import dayjs from "../libs/dayjs.js";
 ProductItem.defaultProps = {
   mode: "normal",
-  children: null
+  children: null,
+  trialEnd: 0
 };
 export default function ProductItem({
   item,
   items,
   trialInDays,
+  trialEnd = 0,
   currency,
   mode,
   children,
@@ -27,18 +30,19 @@ export default function ProductItem({
   onDownsell
 }) {
   const { t, locale } = useLocaleContext();
-  const pricing = formatLineItemPricing(item, currency, trialInDays, locale);
+  const pricing = formatLineItemPricing(item, currency, { trialEnd, trialInDays }, locale);
   const saving = formatUpsellSaving(items, currency);
   const metered = item.price?.recurring?.usage_type === "metered" ? t("common.metered") : "";
   const canUpsell = mode === "normal" && items.length === 1;
   const primaryText = useMemo(() => {
     const price = item.upsell_price || item.price || {};
     const isRecurring = price?.type === "recurring" && price?.recurring;
-    if (isRecurring && trialInDays <= 0 && price?.recurring?.usage_type !== "metered") {
+    const trial = trialInDays > 0 || trialEnd > dayjs().unix();
+    if (isRecurring && !trial && price?.recurring?.usage_type !== "metered") {
       return `${pricing.primary} ${price.recurring ? formatRecurring(price.recurring, false, "slash", locale) : ""}`;
     }
     return pricing.primary;
-  }, [trialInDays, pricing, item, locale]);
+  }, [trialInDays, trialEnd, pricing, item, locale]);
   return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", spacing: 1, sx: { width: "100%" }, className: "product-item", children: [
     /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", sx: { width: "100%" }, className: "product-item-content", children: [
       /* @__PURE__ */ jsxs(

package/es/payment/summary.d.ts

@@ -4,6 +4,7 @@ type Props = {
     items: TLineItemExpanded[];
     currency: TPaymentCurrency;
     trialInDays: number;
+    trialEnd?: number;
     billingThreshold: number;
     showStaking?: boolean;
     onUpsell?: Function;
@@ -16,7 +17,7 @@ type Props = {
     donationSettings?: DonationSettings;
     action?: string;
 };
-declare function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, ...rest }: Props): import("react").JSX.Element;
+declare function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, ...rest }: Props): import("react").JSX.Element;
 declare namespace PaymentSummary {
     var defaultProps: {
         onUpsell: any;
@@ -29,6 +30,7 @@ declare namespace PaymentSummary {
         showStaking: boolean;
         donationSettings: null;
         action: string;
+        trialEnd: number;
     };
 }
 export default PaymentSummary;

package/es/payment/summary.js

@@ -83,7 +83,8 @@ PaymentSummary.defaultProps = {
   crossSellBehavior: "",
   showStaking: false,
   donationSettings: null,
-  action: ""
+  action: "",
+  trialEnd: 0
 };
 export default function PaymentSummary({
   items,
@@ -100,6 +101,7 @@ export default function PaymentSummary({
   showStaking,
   donationSettings,
   action,
+  trialEnd = 0,
   ...rest
 }) {
   const { t, locale } = useLocaleContext();
@@ -109,7 +111,7 @@ export default function PaymentSummary({
   const { data, runAsync } = useRequest(
     () => checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null)
   );
-  const headlines = formatCheckoutHeadlines(items, currency, trialInDays, locale);
+  const headlines = formatCheckoutHeadlines(items, currency, { trialEnd, trialInDays }, locale);
   const staking = showStaking ? getStakingSetup(items, currency, billingThreshold) : "0";
   const totalAmount = fromUnitToToken(
     new BN(fromTokenToUnit(headlines.actualAmount, currency?.decimal)).add(new BN(staking)).toString(),
@@ -180,6 +182,7 @@ export default function PaymentSummary({
               item: x,
               items,
               trialInDays,
+              trialEnd,
               currency,
               onUpsell: handleUpsell,
               onDownsell: handleDownsell,
@@ -209,6 +212,7 @@ export default function PaymentSummary({
             items,
             trialInDays,
             currency,
+            trialEnd,
             onUpsell: noop,
             onDownsell: noop,
             children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: 1 }, children: [
@@ -251,7 +255,7 @@ export default function PaymentSummary({
       ),
       !settings.livemode && /* @__PURE__ */ jsx(Livemode, {})
     ] }),
-    isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    isMobile && !donationSettings ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
         Stack,
         {

package/lib/checkout/donate.js

@@ -293,7 +293,8 @@ function CheckoutDonateInner({
   onPaid,
   onError,
   mode,
-  inlineOptions = {}
+  inlineOptions = {},
+  theme
 }) {
   const {
     state,
@@ -446,20 +447,34 @@ function CheckoutDonateInner({
       maxWidth: "md",
       showCloseButton: true,
       disableEscapeKeyDown: true,
+      sx: {
+        ".MuiDialogContent-root": {
+          padding: {
+            xs: 0,
+            md: "0 16px 0"
+          },
+          borderTop: "1px solid var(--stroke-border-base, #EFF1F5)",
+          width: {
+            xs: "100%",
+            md: 900
+          }
+        }
+      },
       onClose: (e, reason) => setState({
         open: reason === "backdropClick"
       }),
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
-          mb: 1,
-          height: "100%"
+          height: "100%",
+          width: "100%"
         },
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
           id: donation.data?.id,
           onPaid: handlePaid,
           onError,
           action: settings.appearance?.button?.text,
-          mode: "inline"
+          mode: "inline",
+          theme
         })
       })
     })]

package/lib/libs/util.d.ts

@@ -19,7 +19,10 @@ export declare function getStatementDescriptor(items: any[]): any;
 export declare function formatRecurring(recurring: PriceRecurring, translate?: boolean, separator?: string, locale?: string): string;
 export declare function getPriceUintAmountByCurrency(price: TPrice, currency: TPaymentCurrency): string;
 export declare function getPriceCurrencyOptions(price: TPrice): PriceCurrency[];
-export declare function formatLineItemPricing(item: TLineItemExpanded, currency: TPaymentCurrency, trial: number, locale?: string): {
+export declare function formatLineItemPricing(item: TLineItemExpanded, currency: TPaymentCurrency, { trialEnd, trialInDays }: {
+    trialEnd: number;
+    trialInDays: number;
+}, locale?: string): {
     primary: string;
     secondary?: string;
     quantity: string;
@@ -47,7 +50,17 @@ export declare function formatPriceDisplay({ amount, then, actualAmount, showThe
     actualAmount: string;
     showThen?: boolean;
 }, recurring: string, hasMetered: boolean, locale?: string): string;
-export declare function formatCheckoutHeadlines(items: TLineItemExpanded[], currency: TPaymentCurrency, trialInDays: number, locale?: string): {
+export declare function getFreeTrialTime({ trialInDays, trialEnd }: {
+    trialInDays: number;
+    trialEnd: number;
+}, locale?: string): {
+    count: number;
+    interval: string;
+};
+export declare function formatCheckoutHeadlines(items: TLineItemExpanded[], currency: TPaymentCurrency, { trialInDays, trialEnd }: {
+    trialInDays: number;
+    trialEnd: number;
+}, locale?: string): {
     action: string;
     amount: string;
     then?: string;