Ghost/ghost/admin/app/components/gh-product-card.hbs
Rishabh Garg 86b55b0f81 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>
2022-01-18 00:23:43 +05:30

58 lines
2.5 KiB
Handlebars

<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>