diff --git a/ghost/admin/app/components/modal-tier.hbs b/ghost/admin/app/components/modal-tier.hbs index 19eac1de99..a88f5be529 100644 --- a/ghost/admin/app/components/modal-tier.hbs +++ b/ghost/admin/app/components/modal-tier.hbs @@ -219,21 +219,47 @@ 0 {{else}} - {{#if this.stripeYearlyAmount}} -
- {{currency-symbol this.currency}} - {{#if (eq this.previewCadence "monthly")}} - - {{format-number this.stripeMonthlyAmount}} - - /month - {{else}} - - {{format-number this.stripeYearlyAmount}} - - /year + {{#if (feature 'freeTrial')}} + {{#if this.freeTrialEnabled}} +
+ {{ this.trialDays }} days free +
+ {{/if}} + {{/if}} + {{#if this.stripeYearlyAmount}} + {{#if (feature 'freeTrial')}} + {{#unless this.freeTrialEnabled}} +
+ {{currency-symbol this.currency}} + {{#if (eq this.previewCadence "monthly")}} + + {{format-number this.stripeMonthlyAmount}} + + /month + {{else}} + + {{format-number this.stripeYearlyAmount}} + + /year + {{/if}} +
+ {{/unless}} + {{else}} +
+ {{currency-symbol this.currency}} + {{#if (eq this.previewCadence "monthly")}} + + {{format-number this.stripeMonthlyAmount}} + + /month + {{else}} + + {{format-number this.stripeYearlyAmount}} + + /year + {{/if}} +
{{/if}} -
{{#if (and (eq this.previewCadence "yearly") (gt this.discountValue 0))}} @@ -246,9 +272,19 @@ /year {{/if}} - {{/if}} + {{#if (feature 'freeTrial')}} + {{#if this.freeTrialEnabled}} + Then + {{#if (eq this.previewCadence "yearly")}} + {{currency-symbol this.currency}}{{ format-number this.stripeYearlyAmount }}/year + {{else}} + {{currency-symbol this.currency}}{{ format-number this.stripeMonthlyAmount }}/month + {{/if}} + + {{/if}} + {{/if}}
diff --git a/ghost/admin/app/components/modal-tier.js b/ghost/admin/app/components/modal-tier.js index 1d84a019b1..b2d71ed5d0 100644 --- a/ghost/admin/app/components/modal-tier.js +++ b/ghost/admin/app/components/modal-tier.js @@ -82,6 +82,7 @@ export default class ModalTierPrice extends ModalBase { this.calculateDiscount(); if (this.tier.get('trialDays')) { this.freeTrialEnabled = true; + this.trialDays = this.tier.get('trialDays'); } this.accentColorStyle = htmlSafe(`color: ${this.settings.get('accentColor')}`); } diff --git a/ghost/admin/app/styles/layouts/tiers.css b/ghost/admin/app/styles/layouts/tiers.css index c0d9382eca..75d2fb5cac 100644 --- a/ghost/admin/app/styles/layouts/tiers.css +++ b/ghost/admin/app/styles/layouts/tiers.css @@ -759,6 +759,15 @@ opacity: 0.35; } +.gh-tier-form-tierpreview .after-trial-amount { + display: block; + font-size: 1.5rem; + font-weight: 500; + color: #7f7f7f; + margin-top: 12px; + line-height: 1; +} + .gh-tier-setting-title { font-size: 1.3rem; font-weight: 600;