@blocklet/payment-react 1.14.23 → 1.14.25

package/src/locales/zh.tsx

@@ -62,9 +62,10 @@ export default flat({
     continue: '继续',
     qty: '{count} 件',
     each: '每件 {unit}',
-    trial: '免费试用 {count} 天',
+    trial: '免费试用 {count} {interval}',
     billed: '{rule}收费',
     metered: '按用量',
+    minute: '分钟',
     hour: '小时',
     day: '天',
     week: '周',
@@ -135,7 +136,7 @@ export default flat({
       then: '然后 {subscription} {recurring}',
       meteredThen: '然后{recurring}按用量计费',
       metered: '{recurring}按用量计费',
-      free: '免费试用 {count} 天',
+      free: '免费试用 {count} {interval}',
       least: '至少',
       completed: {
         payment: '感谢您的购买',

package/src/payment/form/currency.tsx

@@ -63,16 +63,6 @@ const Root = styled<any>('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/src/payment/index.tsx

@@ -155,6 +155,7 @@ function PaymentInner({
     setState({ checkoutSession: result.checkoutSession });
     onPaid(result);
   };
+
   return (
     <FormProvider {...methods}>
       <Stack className="cko-container" sx={{ gap: { sm: mode === 'standalone' ? 0 : mode === 'inline' ? 4 : 8 } }}>
@@ -164,6 +165,7 @@ function PaymentInner({
               <PaymentSummary
                 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
@@ -376,23 +378,18 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
   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 {
@@ -405,14 +402,11 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
   }
 
   .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;
@@ -440,8 +434,6 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
 
   .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 {
@@ -466,10 +458,6 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
   }
 
   .cko-payment-form {
-    // .MuiInputAdornment-positionStart {
-    //   width: 50px;
-    // }
-
     .MuiFormLabel-root {
       color: var(--foregrounds-fg-base, #010714);
       font-weight: 500;

package/src/payment/product-donation.tsx

@@ -99,11 +99,16 @@ export default function ProductDonation({
                   ...(state.selected === amount && !state.custom ? { borderColor: 'primary.main' } : {}),
                 }}>
                 <CardActionArea onClick={() => handleSelect(amount)}>
-                  <Stack direction="row" sx={{ py: 1 }} spacing={0.5} alignItems="flex-end" justifyContent="center">
+                  <Stack
+                    direction="row"
+                    sx={{ py: 1, px: 0.5 }}
+                    spacing={0.5}
+                    alignItems="flex-end"
+                    justifyContent="center">
                     <Typography
                       component="strong"
                       lineHeight={1}
-                      variant="h5"
+                      variant="h3"
                       sx={{ fontVariantNumeric: 'tabular-nums', fontWeight: 400 }}>
                       {amount}
                     </Typography>

package/src/payment/product-item.tsx

@@ -13,11 +13,13 @@ import {
   formatUpsellSaving,
 } from '../libs/util';
 import ProductCard from './product-card';
+import dayjs from '../libs/dayjs';
 
 type Props = {
   item: TLineItemExpanded;
   items: TLineItemExpanded[];
   trialInDays: number;
+  trialEnd?: number;
   currency: TPaymentCurrency;
   onUpsell: Function;
   onDownsell: Function;
@@ -28,12 +30,14 @@ type Props = {
 ProductItem.defaultProps = {
   mode: 'normal',
   children: null,
+  trialEnd: 0,
 };
 
 export default function ProductItem({
   item,
   items,
   trialInDays,
+  trialEnd = 0,
   currency,
   mode,
   children,
@@ -41,18 +45,19 @@ export default function ProductItem({
   onDownsell,
 }: Props) {
   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 (
     <Stack direction="column" alignItems="flex-start" spacing={1} sx={{ width: '100%' }} className="product-item">

package/src/payment/summary.tsx

@@ -67,6 +67,7 @@ type Props = {
   items: TLineItemExpanded[];
   currency: TPaymentCurrency;
   trialInDays: number;
+  trialEnd?: number;
   billingThreshold: number;
   showStaking?: boolean;
   onUpsell?: Function;
@@ -131,6 +132,7 @@ PaymentSummary.defaultProps = {
   showStaking: false,
   donationSettings: null,
   action: '',
+  trialEnd: 0,
 };
 
 export default function PaymentSummary({
@@ -148,6 +150,7 @@ export default function PaymentSummary({
   showStaking,
   donationSettings,
   action,
+  trialEnd = 0,
   ...rest
 }: Props) {
   const { t, locale } = useLocaleContext();
@@ -157,7 +160,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(),
@@ -231,6 +234,7 @@ export default function PaymentSummary({
               item={x}
               items={items}
               trialInDays={trialInDays}
+              trialEnd={trialEnd}
               currency={currency}
               onUpsell={handleUpsell}
               onDownsell={handleDownsell}>
@@ -260,6 +264,7 @@ export default function PaymentSummary({
               items={items}
               trialInDays={trialInDays}
               currency={currency}
+              trialEnd={trialEnd}
               onUpsell={noop}
               onDownsell={noop}>
               <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: 1 }}>
@@ -303,7 +308,7 @@ export default function PaymentSummary({
           </Typography>
           {!settings.livemode && <Livemode />}
         </Box>
-        {isMobile ? (
+        {isMobile && !donationSettings ? (
           <>
             <Stack
               justifyContent="space-between"