Ghost/ghost/admin/app/components/gh-product-card.hbs
Kevin Ansfield 4b646d40ea Added non-Stripe members setting screen acceptance tests
refs https://github.com/TryGhost/Team/issues/1358

- added acceptance tests for members settings screen
  - subscription access management
  - default post access management
  - free tier management
- fixed `enableLabsFlag()` test helper overwriting existing flag settings when enabling another one
- updated API mocks and fixtures
  - matched product fixtures to default tiers-enabled products
  - updated product API mocks to include benefit handling
2022-02-18 22:36:01 +00:00

103 lines
4.4 KiB
Handlebars

<div class="gh-main-content-card gh-product-card" data-test-product-card={{@product.slug}}>
<div class="gh-product-card-block title-block">
<h3 class="gh-product-card-name" data-test-name>
{{@product.name}}
</h3>
<p class="gh-product-card-description" data-test-description>
{{#if @product.description.length}}
{{@product.description}}
{{else}}
No description added for this tier.
{{/if}}
</p>
</div>
<div class="gh-product-card-block benefits-block" data-test-benefits>
<h4>Benefits <span class="counter">({{or @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>
{{#if (eq @product.type "free" )}}
<div class="gh-product-card-block">
<div class="gh-product-price-container">
<div class="gh-product-card-price" data-test-free-price>
<div class="flex items-start">
<span class="currency">{{currency-symbol this.productCurrency}}</span>
<span class="amount">0</span>
</div>
</div>
</div>
</div>
{{/if}}
{{#if (eq @product.type "paid" )}}
<div class="gh-product-card-block">
<div class="gh-product-price-container">
<div class="gh-product-card-price" data-test-monthly-price>
<div class="flex items-start">
<span class="currency">{{currency-symbol this.productCurrency}}</span>
<span class="amount">{{gh-price-amount @product.monthlyPrice.amount}}</span>
</div>
<div class="period">Monthly</div>
</div>
<div class="gh-product-card-price" data-test-yearly-price>
<div class="flex items-start">
<span class="currency">{{currency-symbol this.productCurrency}}</span>
<span class="amount">{{gh-price-amount @product.yearlyPrice.amount}}</span>
</div>
<div class="period">Yearly</div>
</div>
</div>
</div>
{{/if}}
{{#if (eq @product.type "paid" )}}
<div class="gh-product-card-button-container">
<span class="dropdown">
<GhDropdownButton
@dropdownName="tiers-actions-menu-{{@product.name}}"
@classNames="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-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-{{@product.name}}"
@tagName="ul"
@classNames="gh-tier-actions-menu dropdown-menu dropdown-triangle-top-right"
>
<li>
<button class="mr2" type="button" {{on "click" (fn this.openEditProduct @product)}}>
<span>Edit</span>
</button>
</li>
{{#if this.showArchiveOption}}
<li>
<Settings::Members::ArchiveTier
@product={{@product}}
@onUnarchive={{@onUnarchive}}
/>
</li>
{{/if}}
</GhDropdown>
</span>
</div>
{{else}}
<div class="gh-product-card-button-container">
<button type="button" {{on "click" (fn this.openEditProduct @product)}} class="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-edit-button icon-only" data-test-button="edit-product">
<span>
{{svg-jar "pen"}}
</span>
</button>
</div>
{{/if}}
</div>