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;