a2fc31aa0a
Refs https://www.notion.so/ghost/Unify-icons-across-Admin-7e3d124d5db34c63beccca029af595e7 - Reduced duplicate plus icons - Replaced fill trash, info and pen icons by stroke icons - Removed fill styles from default button classes - Removed launch-wizard css
111 lines
4.7 KiB
Handlebars
111 lines
4.7 KiB
Handlebars
<div class="gh-main-content-card gh-tier-card" data-test-tier-card={{@tier.slug}}>
|
|
<div class="gh-tier-card-block title-block">
|
|
<h3 class="gh-tier-card-name" data-test-name>
|
|
{{@tier.name}}
|
|
</h3>
|
|
<p class="gh-tier-card-description" data-test-description>
|
|
{{#if @tier.description.length}}
|
|
{{@tier.description}}
|
|
{{else}}
|
|
No description added for this tier.
|
|
{{/if}}
|
|
</p>
|
|
</div>
|
|
<div class="gh-tier-card-block benefits-block" data-test-benefits>
|
|
<h4>Benefits <span class="counter">({{or @tier.benefits.length "0"}})</span></h4>
|
|
{{#if @tier.benefits.length}}
|
|
<ul class="benefits">
|
|
{{#each @tier.benefits as |benefit|}}
|
|
<li>{{svg-jar "check"}} {{benefit.name}} </li>
|
|
{{/each}}
|
|
</ul>
|
|
{{else}}
|
|
<p class="gh-tier-card-description">No benefits added for this tier.</p>
|
|
{{/if}}
|
|
</div>
|
|
{{#if (eq @tier.type "free" )}}
|
|
<div class="gh-tier-card-block">
|
|
<div class="gh-tier-price-container">
|
|
<div class="gh-tier-card-price" data-test-free-price>
|
|
<div class="flex items-start">
|
|
<span class="currency">{{currency-symbol this.tierCurrency}}</span>
|
|
<span class="amount">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
{{#if (eq @tier.type "paid" )}}
|
|
<div class="gh-tier-card-block price-block">
|
|
<div class="gh-tier-price-container">
|
|
<div class="gh-tier-price-cards">
|
|
<div class="gh-tier-card-price" data-test-monthly-price>
|
|
<div class="flex items-start">
|
|
<span class="currency">{{currency-symbol this.tierCurrency}}</span>
|
|
<span class="amount">{{gh-price-amount @tier.monthlyPrice}}</span>
|
|
</div>
|
|
<div class="period">Monthly</div>
|
|
</div>
|
|
<div class="gh-tier-card-price" data-test-yearly-price>
|
|
<div class="flex items-start">
|
|
<span class="currency">{{currency-symbol this.tierCurrency}}</span>
|
|
<span class="amount">{{gh-price-amount @tier.yearlyPrice}}</span>
|
|
</div>
|
|
<div class="period">Yearly</div>
|
|
</div>
|
|
</div>
|
|
{{#if (and (feature 'freeTrial') this.isFreeTrialEnabled)}}
|
|
<div class="gh-tier-free-trial-label">
|
|
<span class="gh-tier-free-trial-days">{{this.tierTrialDays}} day</span> free trial
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
{{#if (eq @tier.type "paid" )}}
|
|
<div class="gh-tier-card-button-container">
|
|
<span class="dropdown">
|
|
<GhDropdownButton
|
|
@dropdownName="tiers-actions-menu-{{@tier.name}}"
|
|
@classNames="gh-btn gh-btn-action-icon gh-btn-icon fill gh-btn-outline gh-tier-card-actions-button icon-only"
|
|
@title="Tiers Actions"
|
|
data-test-button="tiers-actions"
|
|
>
|
|
<span>
|
|
{{svg-jar "dotdotdot"}}
|
|
<span class="hidden">Actions</span>
|
|
</span>
|
|
</GhDropdownButton>
|
|
<GhDropdown
|
|
@name="tiers-actions-menu-{{@tier.name}}"
|
|
@tagName="ul"
|
|
@classNames="gh-tier-actions-menu dropdown-menu dropdown-triangle-top-right"
|
|
>
|
|
<li>
|
|
<button class="mr2" type="button" {{on "click" (fn this.openEditTier @tier)}}>
|
|
<span>Edit</span>
|
|
</button>
|
|
</li>
|
|
{{#if this.showArchiveOption}}
|
|
<li>
|
|
<Settings::Members::ArchiveTier
|
|
@tier={{@tier}}
|
|
@onUnarchive={{@onUnarchive}}
|
|
@onArchive={{@onArchive}}
|
|
/>
|
|
</li>
|
|
{{/if}}
|
|
</GhDropdown>
|
|
</span>
|
|
</div>
|
|
{{else}}
|
|
<div class="gh-tier-card-button-container">
|
|
<button type="button" {{on "click" (fn this.openEditTier @tier)}} class="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-tier-card-edit-button icon-only" data-test-button="edit-tier">
|
|
<span>
|
|
{{svg-jar "pen"}}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|