@blocklet/payment-react 1.14.23 → 1.14.25

package/lib/libs/util.js

@@ -28,6 +28,7 @@ exports.formatToDatetime = formatToDatetime;
 exports.formatTotalPrice = formatTotalPrice;
 exports.formatUpsellSaving = formatUpsellSaving;
 exports.getCheckoutAmount = getCheckoutAmount;
+exports.getFreeTrialTime = getFreeTrialTime;
 exports.getInvoiceStatusColor = getInvoiceStatusColor;
 exports.getPaymentIntentStatusColor = getPaymentIntentStatusColor;
 exports.getPayoutStatusColor = getPayoutStatusColor;
@@ -266,7 +267,10 @@ function getPriceCurrencyOptions(price) {
     tiers: null
   }];
 }
-function formatLineItemPricing(item, currency, trial, locale = "en") {
+function formatLineItemPricing(item, currency, {
+  trialEnd,
+  trialInDays
+}, locale = "en") {
   const price = item.upsell_price || item.price;
   let quantity = (0, _locales.t)("common.qty", locale, {
     count: item.quantity
@@ -277,6 +281,10 @@ function formatLineItemPricing(item, currency, trial, locale = "en") {
   const unitValue = new _util.BN(getPriceUintAmountByCurrency(price, currency));
   const total = `${(0, _util.fromUnitToToken)(unitValue.mul(new _util.BN(item.quantity)), currency.decimal)} ${currency.symbol}`;
   const unit = `${(0, _util.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}`;
@@ -289,10 +297,11 @@ function formatLineItemPricing(item, currency, trial, locale = "en") {
     }) : "";
   };
   if (price.type === "recurring" && price.recurring) {
-    if (trial > 0) {
+    if (trialResult.count > 0) {
       return {
         primary: (0, _locales.t)("common.trial", locale, {
-          count: trial
+          count: trialResult.count,
+          interval: trialResult.interval
         }),
         secondary: `${appendUnit(total, total)} ${formatRecurring(price.recurring, false, "slash", locale)}`,
         quantity
@@ -502,13 +511,54 @@ function formatPriceDisplay({
   }
   return [amount, then].filter(Boolean).join(" ");
 }
-function formatCheckoutHeadlines(items, currency, trialInDays, locale = "en") {
+function getFreeTrialTime({
+  trialInDays,
+  trialEnd
+}, locale = "en") {
+  const now = (0, _dayjs.default)().unix();
+  if (trialEnd > 0 && trialEnd > now) {
+    if (trialEnd - now < 3600) {
+      return {
+        count: Math.ceil((trialEnd - now) / 60),
+        interval: (0, _locales.t)("common.minute", locale)
+      };
+    }
+    if (trialEnd - now < 86400) {
+      return {
+        count: Math.ceil((trialEnd - now) / 3600),
+        interval: (0, _locales.t)("common.hour", locale)
+      };
+    }
+    return {
+      count: Math.ceil((trialEnd - now) / 86400),
+      interval: (0, _locales.t)("common.day", locale)
+    };
+  }
+  if (trialInDays > 0) {
+    return {
+      count: trialInDays,
+      interval: (0, _locales.t)("common.day", locale)
+    };
+  }
+  return {
+    count: 0,
+    interval: (0, _locales.t)("common.day", locale)
+  };
+}
+function formatCheckoutHeadlines(items, currency, {
+  trialInDays,
+  trialEnd
+}, locale = "en") {
   const brand = getStatementDescriptor(items);
   const {
     total
   } = getCheckoutAmount(items, currency, trialInDays > 0);
   const actualAmount = (0, _util.fromUnitToToken)(total, currency.decimal);
   const amount = `${(0, _util.fromUnitToToken)(total, currency.decimal)} ${currency.symbol}`;
+  const trialResult = getFreeTrialTime({
+    trialInDays,
+    trialEnd
+  }, locale);
   if (items.length === 0) {
     return {
       action: (0, _locales.t)("payment.checkout.empty", locale),
@@ -551,17 +601,18 @@ function formatCheckoutHeadlines(items, currency, trialInDays, locale = "en") {
       if (x.price.recurring?.usage_type === "metered") {
         return acc;
       }
-      return acc.add(new _util.BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new _util.BN(x.quantity)));
+      return acc.add(new _util.BN(getPriceUintAmountByCurrency(x.upsell_price || x.price, currency)).mul(new _util.BN(x.quantity)));
     }, new _util.BN(0)), currency.decimal), currency.symbol].filter(Boolean).join(" ");
     if (items.length > 1) {
-      if (trialInDays > 0) {
+      if (trialResult.count > 0) {
         const result4 = {
           action: (0, _locales.t)("payment.checkout.try2", locale, {
             name,
             count: items.length - 1
           }),
           amount: (0, _locales.t)("payment.checkout.free", locale, {
-            count: trialInDays
+            count: trialResult.count,
+            interval: trialResult.interval
           }),
           then: formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale),
           showThen: true,
@@ -589,13 +640,14 @@ function formatCheckoutHeadlines(items, currency, trialInDays, locale = "en") {
         priceDisplay: formatPriceDisplay(result3, recurring, hasMetered, locale)
       };
     }
-    if (trialInDays > 0) {
+    if (trialResult.count > 0) {
       const result3 = {
         action: (0, _locales.t)("payment.checkout.try1", locale, {
           name
         }),
         amount: (0, _locales.t)("payment.checkout.free", locale, {
-          count: trialInDays
+          count: trialResult.count,
+          interval: trialResult.interval
         }),
         then: formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale),
         showThen: true,

package/lib/locales/en.js

@@ -67,9 +67,10 @@ module.exports = (0, _flat.default)({
     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",
@@ -140,7 +141,7 @@ module.exports = (0, _flat.default)({
       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/lib/locales/zh.js

@@ -67,9 +67,10 @@ module.exports = (0, _flat.default)({
     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",
@@ -140,7 +141,7 @@ module.exports = (0, _flat.default)({
       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/lib/payment/form/currency.js

@@ -79,16 +79,6 @@ const Root = (0, _system.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/lib/payment/index.js

@@ -194,6 +194,7 @@ function PaymentInner({
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_summary.default, {
             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
             state.checkoutSession.subscription_data?.min_stake_amount || 0),
@@ -395,23 +396,18 @@ const Root = exports.Root = (0, _system.styled)(_material.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 {
@@ -424,14 +420,11 @@ const Root = exports.Root = (0, _system.styled)(_material.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;
@@ -459,8 +452,6 @@ const Root = exports.Root = (0, _system.styled)(_material.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 {
@@ -485,10 +476,6 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
   }
 
   .cko-payment-form {
-    // .MuiInputAdornment-positionStart {
-    //   width: 50px;
-    // }
-
     .MuiFormLabel-root {
       color: var(--foregrounds-fg-base, #010714);
       font-weight: 500;

package/lib/payment/product-donation.js

@@ -151,7 +151,8 @@ function ProductDonation({
           children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
             direction: "row",
             sx: {
-              py: 1
+              py: 1,
+              px: 0.5
             },
             spacing: 0.5,
             alignItems: "flex-end",
@@ -159,7 +160,7 @@ function ProductDonation({
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               component: "strong",
               lineHeight: 1,
-              variant: "h5",
+              variant: "h3",
               sx: {
                 fontVariantNumeric: "tabular-nums",
                 fontWeight: 400

package/lib/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/lib/payment/product-item.js

@@ -12,15 +12,18 @@ var _status = _interopRequireDefault(require("../components/status"));
 var _switchButton = _interopRequireDefault(require("../components/switch-button"));
 var _util = require("../libs/util");
 var _productCard = _interopRequireDefault(require("./product-card"));
+var _dayjs = _interopRequireDefault(require("../libs/dayjs"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 ProductItem.defaultProps = {
   mode: "normal",
-  children: null
+  children: null,
+  trialEnd: 0
 };
 function ProductItem({
   item,
   items,
   trialInDays,
+  trialEnd = 0,
   currency,
   mode,
   children,
@@ -31,18 +34,22 @@ function ProductItem({
     t,
     locale
   } = (0, _context.useLocaleContext)();
-  const pricing = (0, _util.formatLineItemPricing)(item, currency, trialInDays, locale);
+  const pricing = (0, _util.formatLineItemPricing)(item, currency, {
+    trialEnd,
+    trialInDays
+  }, locale);
   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") {
+    const trial = trialInDays > 0 || trialEnd > (0, _dayjs.default)().unix();
+    if (isRecurring && !trial && 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]);
+  }, [trialInDays, trialEnd, pricing, item, locale]);
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     direction: "column",
     alignItems: "flex-start",

package/lib/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/lib/payment/summary.js

@@ -90,7 +90,8 @@ PaymentSummary.defaultProps = {
   crossSellBehavior: "",
   showStaking: false,
   donationSettings: null,
-  action: ""
+  action: "",
+  trialEnd: 0
 };
 function PaymentSummary({
   items,
@@ -107,6 +108,7 @@ function PaymentSummary({
   showStaking,
   donationSettings,
   action,
+  trialEnd = 0,
   ...rest
 }) {
   const {
@@ -126,7 +128,10 @@ function PaymentSummary({
     data,
     runAsync
   } = (0, _ahooks.useRequest)(() => checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null));
-  const headlines = (0, _util2.formatCheckoutHeadlines)(items, currency, trialInDays, locale);
+  const headlines = (0, _util2.formatCheckoutHeadlines)(items, currency, {
+    trialEnd,
+    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", () => {
@@ -197,6 +202,7 @@ function PaymentSummary({
         item: x,
         items,
         trialInDays,
+        trialEnd,
         currency,
         onUpsell: handleUpsell,
         onDownsell: handleDownsell,
@@ -232,6 +238,7 @@ function PaymentSummary({
           items,
           trialInDays,
           currency,
+          trialEnd,
           onUpsell: _noop.default,
           onDownsell: _noop.default,
           children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -289,7 +296,7 @@ function PaymentSummary({
           },
           children: action || t("payment.checkout.orderSummary")
         }), !settings.livemode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_livemode.default, {})]
-      }), isMobile ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      }), isMobile && !donationSettings ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           justifyContent: "space-between",
           flexDirection: "row",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.14.23",
+  "version": "1.14.25",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -93,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.14.23",
+    "@blocklet/payment-types": "1.14.25",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -123,5 +123,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "868311b6e37e21e5755e7a78daf335f3057dd1c8"
+  "gitHead": "d326f7f50aeb5a0b727b1eb1f5b042f82e2e4059"
 }

package/src/checkout/donate.tsx

@@ -301,7 +301,16 @@ function useDonation(settings: DonationSettings, livemode: boolean = true, mode
   };
 }
 
-function CheckoutDonateInner({ settings, livemode, timeout, onPaid, onError, mode, inlineOptions = {} }: DonateProps) {
+function CheckoutDonateInner({
+  settings,
+  livemode,
+  timeout,
+  onPaid,
+  onError,
+  mode,
+  inlineOptions = {},
+  theme,
+}: DonateProps) {
   // eslint-disable-line
   const { state, setState, donation, supporters } = useDonation(settings, livemode, mode);
 
@@ -442,14 +451,28 @@ function CheckoutDonateInner({ settings, livemode, timeout, onPaid, onError, mod
           maxWidth="md"
           showCloseButton
           disableEscapeKeyDown
+          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: any, reason: string) => setState({ open: reason === 'backdropClick' })}>
-          <Box sx={{ mb: 1, height: '100%' }}>
+          <Box sx={{ height: '100%', width: '100%' }}>
             <CheckoutForm
               id={donation.data?.id}
               onPaid={handlePaid}
               onError={onError}
               action={settings.appearance?.button?.text}
               mode="inline"
+              theme={theme}
             />
           </Box>
         </Dialog>

package/src/libs/util.ts

@@ -294,7 +294,7 @@ export function getPriceCurrencyOptions(price: TPrice): PriceCurrency[] {
 export function formatLineItemPricing(
   item: TLineItemExpanded,
   currency: TPaymentCurrency,
-  trial: number,
+  { trialEnd, trialInDays }: { trialEnd: number; trialInDays: number },
   locale: string = 'en'
 ): { primary: string; secondary?: string; quantity: string } {
   const price = item.upsell_price || item.price;
@@ -303,13 +303,14 @@ export function formatLineItemPricing(
   if (price.recurring?.usage_type === 'metered' || +item.quantity === 1) {
     quantity = '';
   }
-
   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: string, alt: string) => {
     if (price.product.unit_label) {
       return `${v}/${price.product.unit_label}`;
@@ -322,9 +323,9 @@ export function formatLineItemPricing(
   };
 
   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,
       };
@@ -559,10 +560,48 @@ export function formatPriceDisplay(
   }
   return [amount, then].filter(Boolean).join(' ');
 }
+
+export function getFreeTrialTime(
+  { trialInDays, trialEnd }: { trialInDays: number; trialEnd: number },
+  locale: string = 'en'
+): {
+  count: number;
+  interval: string;
+} {
+  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: TLineItemExpanded[],
   currency: TPaymentCurrency,
-  trialInDays: number,
+  { trialInDays, trialEnd }: { trialInDays: number; trialEnd: number },
   locale: string = 'en'
 ): {
   action: string;
@@ -577,6 +616,7 @@ export function formatCheckoutHeadlines(
   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);
 
   // empty
   if (items.length === 0) {
@@ -618,7 +658,10 @@ export function formatCheckoutHeadlines(
           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
       ),
@@ -627,10 +670,10 @@ export function formatCheckoutHeadlines(
       .filter(Boolean)
       .join(' ');
     if (items.length > 1) {
-      if (trialInDays > 0) {
+      if (trialResult.count > 0) {
         const result = {
           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(subscription, recurring, hasMetered && Number(subscription) === 0, locale),
           showThen: true,
           actualAmount: '0',
@@ -653,10 +696,10 @@ export function formatCheckoutHeadlines(
       };
     }
 
-    if (trialInDays > 0) {
+    if (trialResult.count > 0) {
       const result = {
         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(subscription, recurring, hasMetered && Number(subscription) === 0, locale),
         showThen: true,
         actualAmount: '0',

package/src/locales/en.tsx

@@ -62,9 +62,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',
@@ -136,7 +137,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',