Added new free tier card with custom description/benefits (#2203)

refs https://github.com/TryGhost/Team/issues/1037

Adds new free tier card with option to add custom description and benefits for free tier, behind the tiers beta flag. Also:

- updates formatting of tier prices
- changes "Free" section to "Default"
- updates price formatting of membership tiers in admin
- updates currency code handling for product card
- updates default paid product handling

Co-authored-by: Djordje Vlaisavljevic <dzvlais@gmail.com>
Co-authored-by: Peter Zimon <peter.zimon@gmail.com>

ghost/admin/app/components/gh-launch-wizard/connect-stripe.js

@@ -166,8 +166,9 @@ export default class GhLaunchWizardConnectStripeComponent extends Component {
         try {
             yield this.settings.save();
 
-            const products = yield this.store.query('product', {include: 'monthly_price,yearly_price'});
+            const products = yield this.store.query('product', {filter: 'type:paid', include: 'monthly_price,yearly_price'});
             this.product = products.firstObject;
+
             if (this.product) {
                 const yearlyDiscount = this.calculateDiscount(5, 50);
                 this.product.set('monthlyPrice', {

ghost/admin/app/components/gh-launch-wizard/set-pricing.js

@@ -173,8 +173,9 @@ export default class GhLaunchWizardSetPricingComponent extends Component {
             this.stripeMonthlyAmount = storedData.monthlyAmount;
             this.stripeYearlyAmount = storedData.yearlyAmount;
         } else {
-            const products = yield this.store.query('product', {include: 'monthly_price,yearly_price'});
+            const products = yield this.store.query('product', {filter: 'type:paid', include: 'monthly_price,yearly_price'});
             this.product = products.firstObject;
+
             let portalPlans = this.settings.get('portalPlans') || [];
 
             this.isMonthlyChecked = portalPlans.includes('monthly');

ghost/admin/app/components/gh-members-payments-setting.js

@@ -251,7 +251,7 @@ export default Component.extend({
     },
 
     saveProduct: task(function* () {
-        const products = yield this.store.query('product', {include: 'monthly_price, yearly_price'});
+        const products = yield this.store.query('product', {filter: 'type:paid', include: 'monthly_price, yearly_price'});
         this.product = products.firstObject;
         if (this.product) {
             const yearlyDiscount = this.calculateDiscount(5, 50);

ghost/admin/app/components/gh-members-recipient-select.js

@@ -148,7 +148,7 @@ export default class GhMembersRecipientSelect extends Component {
         if (this.feature.get('multipleProducts')) {
             // fetch all products w̶i̶t̶h̶ c̶o̶u̶n̶t̶s̶
             // TODO: add `include: 'count.members` to query once API supports
-            const products = yield this.store.query('product', {limit: 'all'});
+            const products = yield this.store.query('product', {filter: 'type:paid', limit: 'all'});
 
             if (products.length > 1) {
                 const productsGroup = {

ghost/admin/app/components/gh-members-segment-select.js

@@ -97,7 +97,7 @@ export default class GhMembersSegmentSelect extends Component {
         if (this.feature.get('multipleProducts')) {
             // fetch all products w̶i̶t̶h̶ c̶o̶u̶n̶t̶s̶
             // TODO: add `include: 'count.members` to query once API supports
-            const products = yield this.store.query('product', {limit: 'all', include: 'monthly_price,yearly_price,benefits'});
+            const products = yield this.store.query('product', {filter: 'type:paid', limit: 'all', include: 'monthly_price,yearly_price,benefits'});
 
             if (products.length > 0) {
                 const productsGroup = {

ghost/admin/app/components/gh-membership-products-alpha.hbs

@@ -1,54 +1,14 @@
 <label>Tiers</label>
 <div class="gh-product-cards">
 {{#each this.products as |product productIdx|}}
-    <div class="gh-main-content-card gh-product-card">
-        <button class="gh-product-card-editbutton gh-btn gh-btn-text gh-btn-link green" {{action "openEditProduct" product}}>
-            <span>Edit</span>
-        </button>
-        <div class="gh-product-card-block">
-            <h3 class="gh-product-card-name">
-                {{product.name}}
-            </h3>
-            <p class="gh-product-card-description">
-                {{product.description}}
-            </p>
-        </div>
-        <div class="gh-product-card-block benefits-block">
-            <h4>Benefits <span class="counter">({{if product.benefits.length product.benefits.length "0"}})</span></h4>
-            {{#if product.benefits.length}}
-            <ul class="benefits">
-                {{#each product.benefits as |benefit|}}
-                    <li>{{svg-jar "check"}} {{benefit.name}} </li>
-                {{/each}}
-            </ul>
-            {{else}}
-            <p class="gh-product-card-description">No benefits added for this tier.</p>
-            {{/if}}
-        </div>
-        <div class="gh-product-card-block">
-            <div class="gh-product-price-container">
-                <div class="gh-product-card-price">
-                    <div class="flex items-baseline">
-                        <span class="amount">{{gh-price-amount product.monthlyPrice.amount}}</span>
-                        <span class="currency">{{product.monthlyPrice.currency}}</span>
-                    </div>
-                    <div class="period">Monthly</div>
-                </div>
-                <div class="gh-product-card-price">
-                    <div class="flex items-baseline">
-                        <span class="amount">{{gh-price-amount product.yearlyPrice.amount}}</span>
-                        <span class="currency">{{product.monthlyPrice.currency}}</span>
-                    </div>
-                    <div class="period">Yearly</div>
-                </div>
-            </div>
-        </div>
-    </div>
+    <GhProductCard
+        @product={{product}}
+        @openEditProduct={{this.openEditProduct}}
+    />
 {{/each}}
 
 <div class="gh-product-cards-footer">
     <button class="gh-btn gh-btn-link gh-btn-text gh-btn-icon gh-btn-add-product green" {{action "openNewProduct" product}}><span>{{svg-jar "add-stroke" class="stroke-green"}}Add tier</span></button>
-    {{!-- <span>&ndash; Advanced (<a href="javascript:">learn more</a>)</span> --}}
 </div>
 </div>
 

ghost/admin/app/components/gh-portal-links.js

@@ -57,7 +57,7 @@ export default Component.extend({
         }
     },
     fetchProducts: task(function* () {
-        const products = yield this.store.query('product', {include: 'monthly_price,yearly_price'}) || [];
+        const products = yield this.store.query('product', {filter: 'type:paid', include: 'monthly_price,yearly_price'}) || [];
         this.set('products', products);
         if (products.length > 0) {
             this.set('selectedProduct', {

ghost/admin/app/components/gh-product-card.hbs

@@ -0,0 +1,57 @@
+<div class="gh-main-content-card gh-product-card">
+    <button class="gh-product-card-editbutton gh-btn gh-btn-text gh-btn-link green" {{action "openEditProduct" this.product}}>
+        <span>Edit</span>
+    </button>
+    <div class="gh-product-card-block title-block">
+        <h3 class="gh-product-card-name">
+            {{this.product.name}}
+        </h3>
+        <p class="gh-product-card-description">
+            {{this.product.description}}
+        </p>
+    </div>
+    <div class="gh-product-card-block benefits-block">
+        <h4>Benefits <span class="counter">({{if this.product.benefits.length product.benefits.length "0"}})</span></h4>
+        {{#if this.product.benefits.length}}
+            <ul class="benefits">
+                {{#each this.product.benefits as |benefit|}}
+                    <li>{{svg-jar "check"}} {{benefit.name}} </li>
+                {{/each}}
+            </ul>
+        {{else}}
+            <p class="gh-product-card-description">No benefits added for this tier.</p>
+        {{/if}}
+    </div>
+    {{#if (eq this.product.type "free" )}}
+        <div class="gh-product-card-block">
+            <div class="gh-product-price-container">
+                <div class="gh-product-card-price">
+                    <div class="flex items-start">
+                        <span class="currency">{{currency-symbol this.product.monthlyPrice.currency}}</span>
+                        <span class="amount">0</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {{/if}}
+    {{#if (eq this.product.type "paid" )}}
+        <div class="gh-product-card-block">
+            <div class="gh-product-price-container">
+                <div class="gh-product-card-price">
+                    <div class="flex items-start">
+                        <span class="currency">{{currency-symbol this.product.monthlyPrice.currency}}</span>
+                        <span class="amount">{{gh-price-amount this.product.monthlyPrice.amount}}</span>
+                    </div>
+                    <div class="period">Monthly</div>
+                </div>
+                <div class="gh-product-card-price">
+                    <div class="flex items-start">
+                        <span class="currency">{{currency-symbol this.product.monthlyPrice.currency}}</span>
+                        <span class="amount">{{gh-price-amount this.product.yearlyPrice.amount}}</span>
+                    </div>
+                    <div class="period">Yearly</div>
+                </div>
+            </div>
+        </div>
+    {{/if}}
+</div>

ghost/admin/app/components/gh-product-card.js

@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+import {getSymbol} from 'ghost-admin/utils/currency';
+import {inject as service} from '@ember/service';
+import {tracked} from '@glimmer/tracking';
+export default class extends Component {
+    @service membersUtils;
+    @service ghostPaths;
+    @service ajax;
+    @service store;
+    @service config;
+
+    @tracked showProductModal = false;
+    @tracked productModel = null;
+
+    get product() {
+        return this.args.product;
+    }
+
+    get isPaidProduct() {
+        return this.product.type === 'paid';
+    }
+
+    get hasCurrencySymbol() {
+        const currencySymbol = getSymbol(this.product?.monthlyPrice?.currency);
+        return currencySymbol?.length !== 3;
+    }
+
+    get isFreeProduct() {
+        return this.product.type === 'free';
+    }
+
+    @action
+    async openEditProduct(product) {
+        this.args.openEditProduct(product);
+    }
+}

ghost/admin/app/components/modal-member-product.js

@@ -17,7 +17,8 @@ export default class ModalMemberProduct extends ModalComponent {
 
     @task({drop: true})
     *fetchProducts() {
-        this.products = yield this.store.query('product', {include: 'monthly_price,yearly_price,benefits'});
+        this.products = yield this.store.query('product', {filter: 'type:paid', include: 'monthly_price,yearly_price,benefits'});
+
         this.loadingProducts = false;
         if (this.products.length > 0) {
             this.selectedProduct = this.products.firstObject.id;

ghost/admin/app/components/modal-portal-settings.js

@@ -72,11 +72,12 @@ export default ModalComponent.extend({
         return (this.membersUtils.isStripeEnabled && allowedPlans.includes('yearly'));
     }),
     products: computed('model.products.[]', 'settings.portalProducts.[]', 'isPreloading', function () {
-        if (this.isPreloading || !this.model.products) {
+        const paidProducts = this.model.products?.filter(product => product.type === 'paid');
+        if (this.isPreloading || !paidProducts?.length) {
             return [];
         }
         const portalProducts = this.settings.get('portalProducts') || [];
-        const products = this.model.products.map((product) => {
+        const products = paidProducts.map((product) => {
             return {
                 id: product.id,
                 name: product.name,

ghost/admin/app/components/modal-product.hbs

@@ -13,6 +13,7 @@
             <div class="gh-main-section-block span-2">
                 <h4 class="gh-main-section-header small bn">Basic</h4>
                 <div class="gh-main-section-content grey gh-product-priceform-block">
+                    {{#if (not this.isFreeProduct)}}
                         <GhFormGroup @errors={{this.errors}} @property="name">
                             <label for="name" class="fw6">Name</label>
                             <GhTextInput
@@ -24,6 +25,7 @@
                                 @class="gh-input" />
                             <GhErrorMessage @errors={{this.errors}} @property="name" />
                         </GhFormGroup>
+                    {{/if}}
                     <GhFormGroup @errors={{this.errors}} @property="description">
                         <label for="description" class="fw6">Description</label>
                         <GhTextInput
@@ -35,6 +37,7 @@
                             @class="gh-input" />
                         <GhErrorMessage @errors={{this.errors}} @property="description" />
                     </GhFormGroup>
+                    {{#if (not this.isFreeProduct)}}
                         <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices">
                             <div class="gh-settings-members-pricelabelcont">
                                 <label for="monthlyPrice">Prices</label>
@@ -86,6 +89,7 @@
                                 <p class="response w-100"><span class="red">{{this.stripePlanError}}</span></p>
                             {{/if}}
                         </GhFormGroup>
+                    {{/if}}
                 </div>
 
                 <h4 class="gh-main-section-header small bn">Benefits</h4>
@@ -149,13 +153,12 @@
                                 <li>{{svg-jar "check-2"}} <span>Expert analysis</span></li>
                             </ul>
                         {{/if}}
-                        
                         <div class="price">
-                            
+                            {{#if (not this.isFreeProduct)}}
                                 {{#if this.stripeMonthlyAmount}}
                                     <span class="monthly-price">
                                         <span class="currency">{{currency-symbol this.currency}}</span>
-                                    {{this.stripeMonthlyAmount}}
+                                        {{format-number this.stripeMonthlyAmount}}
                                         <span class="period">/month</span>
                                     </span>
                                 {{else}}
@@ -167,10 +170,16 @@
                                 {{/if}}
 
                                 {{#if this.stripeYearlyAmount}}
-                                <span class="yearly-price">{{currency-symbol this.currency}}{{this.stripeYearlyAmount}}/year</span>
+                                    <span class="yearly-price">{{currency-symbol this.currency}}{{format-number this.stripeYearlyAmount}}/year</span>
                                 {{else}}
                                     <span class="yearly-price placeholder">0<span class="currency">{{this.currency}}</span>/year</span>
                                 {{/if}}
+                            {{else}}
+                            <span class="monthly-price">
+                                <span class="currency">{{currency-symbol this.currency}}</span>
+                                0
+                            </span>
+                            {{/if}}
                         </div>
                     </div>
                 </div>

ghost/admin/app/components/modal-product.js

@@ -34,6 +34,10 @@ export default class ModalProductPrice extends ModalBase {
 
     confirm() {}
 
+    get isFreeProduct() {
+        return this.product.type === 'free';
+    }
+
     get allCurrencies() {
         return getCurrencyOptions();
     }
@@ -104,6 +108,7 @@ export default class ModalProductPrice extends ModalBase {
             yield this.send('addBenefit', this.newBenefit);
         }
 
+        if (!this.isFreeProduct) {
             const monthlyAmount = this.stripeMonthlyAmount * 100;
             const yearlyAmount = this.stripeYearlyAmount * 100;
             this.product.set('monthlyPrice', {
@@ -122,6 +127,7 @@ export default class ModalProductPrice extends ModalBase {
                 interval: 'year',
                 type: 'recurring'
             });
+        }
         this.product.set('benefits', this.benefits);
         yield this.product.save();
 

ghost/admin/app/controllers/dashboard.js

@@ -54,7 +54,9 @@ export default class DashboardController extends Controller {
     }
 
     async loadMRRStats() {
-        const products = await this.store.query('product', {include: 'monthly_price,yearly_price', limit: 'all'});
+        const products = await this.store.query('product', {
+            filter: 'type:paid', include: 'monthly_price,yearly_price', limit: 'all'
+        });
         const defaultProduct = products?.firstObject;
 
         this.mrrStatsLoading = true;

ghost/admin/app/controllers/offer.js

@@ -99,7 +99,7 @@ export default class OffersController extends Controller {
 
     @task({drop: true})
     *fetchProducts() {
-        this.products = yield this.store.query('product', {include: 'monthly_price,yearly_price'});
+        this.products = yield this.store.query('product', {filter: 'type:paid', include: 'monthly_price,yearly_price'});
         this.products = this.products.filter((d) => {
             return d.monthlyPrice && d.yearlyPrice;
         });

ghost/admin/app/controllers/offers.js

@@ -70,7 +70,9 @@ export default class MembersController extends Controller {
 
     @task({restartable: true})
     *fetchOffersTask() {
-        this.products = yield this.store.query('product', {include: 'monthly_price,yearly_price'});
+        this.products = yield this.store.query('product', {
+            filter: 'type:paid', include: 'monthly_price,yearly_price'
+        });
         this.offers = yield this.store.query('offer', {limit: 'all'});
         return this.offers;
     }

ghost/admin/app/controllers/settings/membership.js

@@ -44,6 +44,14 @@ export default class MembersAccessController extends Controller {
 
     queryParams = ['showPortalSettings'];
 
+    get freeProduct() {
+        return this.products?.find(product => product.type === 'free');
+    }
+
+    get paidProducts() {
+        return this.products?.filter(product => product.type === 'paid');
+    }
+
     get allCurrencies() {
         return getCurrencyOptions();
     }
@@ -311,7 +319,9 @@ export default class MembersAccessController extends Controller {
 
     @task({drop: true})
     *fetchProducts() {
-        this.products = yield this.store.query('product', {include: 'monthly_price,yearly_price,benefits'});
+        this.products = yield this.store.query('product', {
+            filter: 'type:paid', include: 'monthly_price,yearly_price,benefits'
+        });
         this.product = this.products.firstObject;
         this.setupPortalProduct(this.product);
     }

ghost/admin/app/helpers/gh-price-amount.js

@@ -1,12 +1,13 @@
+import {formatNumber} from './format-number';
 import {helper} from '@ember/component/helper';
 
 export function ghPriceAmount(amount) {
     if (amount) {
         let price = amount / 100;
         if (price % 1 === 0) {
-            return price;
+            return formatNumber(price);
         } else {
-            return (Math.round(price * 100) / 100).toFixed(2);
+            return formatNumber(Math.round(price * 100) / 100).toFixed(2);
         }
     }
     return 0;

ghost/admin/app/models/product.js

@@ -7,6 +7,7 @@ export default Model.extend(ValidationEngine, {
     name: attr('string'),
     description: attr('string'),
     slug: attr('string'),
+    type: attr('string', {defaultValue: 'paid'}),
     monthlyPrice: attr('stripe-price'),
     yearlyPrice: attr('stripe-price'),
     benefits: attr('product-benefits')

ghost/admin/app/styles/layouts/products.css

@@ -35,7 +35,7 @@
 }
 
 .gh-product-card-block {
-    flex-basis: 50%;
+    flex-basis: 30%;
 }
 
 .gh-product-card-block:not(:first-of-type) {
@@ -65,6 +65,10 @@
     color: var(--midgrey);
 }
 
+.gh-product-card-block.title-block {
+    flex-basis: 40%;
+}
+
 .gh-product-card-block.benefits-block .gh-product-card-description {
     margin-top: 9px;
 }
@@ -99,13 +103,15 @@
 
 .gh-product-price-container {
     display: flex;
-    margin: 0 40px 0 20px;
+    margin: 0 60px 0 20px;
+    justify-content: flex-end;
 }
 
 .gh-product-card-price {
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
     margin: 0 12px 2px 0;
     font-size: 1.3rem;
     color: var(--midgrey);
@@ -113,11 +119,13 @@
     border: 1px solid var(--whitegrey);
     border-radius: 3px;
     min-width: 90px;
+    min-height: 66px;
 }
 
 .gh-product-card-price .currency-symbol,
 .gh-product-card-price .amount,
-.gh-product-card-price .currency {
+.gh-product-card-price .currency,
+.gh-product-card-price .currency-code {
     font-weight: 600;
     color: var(--darkgrey);
 }
@@ -127,22 +135,39 @@
 }
 
 .gh-product-card-price .amount {
-    font-size: 2.1rem;
-    letter-spacing: -0.2px;
+    letter-spacing: -.2px;
     line-height: 1;
     margin-right: 2px;
+    font-size: 2.2rem;
+    font-weight: 500;
+    letter-spacing: 0.1px;
 }
 
 .gh-product-card-price .currency {
-    font-size: 1.25rem;
-    letter-spacing: -0.2px;
     text-transform: uppercase;
+    position: relative;
+    top: 2px;
+    font-size: 1.4rem;
+    font-weight: 500;
+    letter-spacing: 0.4px;
+    line-height: 1;
+}
+
+.gh-product-card-price .currency-code {
+    text-transform: uppercase;
+    position: relative;
+    top: 0;
+    font-weight: 600;
+    line-height: 1;
+    font-size: 1.25rem;
+    letter-spacing: -.2px;
 }
 
 .gh-product-card-price .period {
     font-size: 1.25rem;
     text-transform: lowercase;
     line-height: 1.2em;
+    margin-top: 2px;
 }
 
 .gh-product-cards-footer {

ghost/admin/app/templates/settings/membership.hbs

@@ -81,7 +81,7 @@
                 <div class="gh-expandable-block">
                     <div class="gh-expandable-header">
                         <div>
-                            <h4 class="gh-expandable-title">Free</h4>
+                            <h4 class="gh-expandable-title">Default</h4>
                             <p class="gh-expandable-description">Free member sign up settings</p>
                         </div>
                         <button type="button" class="gh-btn" {{on "click" (toggle "freeOpen" this)}} data-test-toggle-pub-info><span>{{if this.freeOpen "Close" "Expand"}}</span></button>
@@ -89,6 +89,10 @@
                     <div class="gh-expandable-content">
                         {{#liquid-if this.freeOpen}}
                         <div class="gh-setting-content-extended">
+                                <GhProductCard
+                                    @product={{this.freeProduct}}
+                                    @openEditProduct={{this.openEditProduct}}
+                                />
                             <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="free-welcome-page">
                                 <label for="freeWelcomePage">Welcome page</label>
                                 <GhUrlInput
@@ -143,7 +147,7 @@
                             {{else}}
                                 {{#if (feature "multipleProducts")}}
                                     <GhMembershipProductsAlpha
-                                        @products={{this.products}}
+                                        @products={{this.paidProducts}}
                                         @confirmProductSave={{this.confirmProductSave}}
                                     />
                                 {{else}}
@@ -259,4 +263,14 @@
             @close={{this.closeStripeConnect}}
             @modifier="action wide stripe-connect" />
     {{/if}}
+    {{#if this.showProductModal}}
+        <GhFullscreenModal
+            @modal="product"
+            @model={{hash
+                product=this.productModel
+            }}
+            @confirm={{this.confirmProductSave}}
+            @close={{this.closeProductModal}}
+            @modifier="edit-product action wide" />
+    {{/if}}
 </section>

ghost/admin/app/utils/currency.js

@@ -121,6 +121,9 @@ export const currencies = [
 ];
 
 export function getSymbol(currency) {
+    if (!currency) {
+        return '';
+    }
     return Intl.NumberFormat('en', {currency, style: 'currency'}).format(0).replace(/[\d\s.]/g, '');
 }