mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
88049f1692
refs https://github.com/TryGhost/Team/issues/1136 - adds dropdown for active/archived offers selection - wires active/archived offers on list screen to API - filters offers list on archived/active based on selection
129 lines
7.0 KiB
Handlebars
129 lines
7.0 KiB
Handlebars
<section class="gh-canvas gh-offers">
|
||
<GhCanvasHeader class="gh-canvas-header">
|
||
<h2 class="gh-canvas-title" data-test-screen-title>Offers</h2>
|
||
<section class="view-actions">
|
||
<LinkTo @route="offer.new" class="gh-btn gh-btn-primary"><span>New offer</span></LinkTo>
|
||
</section>
|
||
</GhCanvasHeader>
|
||
|
||
<section class="view-container">
|
||
|
||
{{#if this.offersExist}}
|
||
<section class="gh-offers-actions view-actions">
|
||
<div class="gh-contentfilter view-actions-bottom-row">
|
||
<div class="gh-contentfilter-menu gh-contentfilter-type {{if this.selectedType.value "gh-contentfilter-selected"}}" data-test-type-select="true">
|
||
<PowerSelect
|
||
@selected={{this.selectedType}}
|
||
@options={{this.availableTypes}}
|
||
@searchEnabled={{false}}
|
||
@onChange={{this.onTypeChange}}
|
||
@triggerComponent="gh-power-select/trigger"
|
||
@triggerClass="gh-contentfilter-menu-trigger"
|
||
@dropdownClass="gh-contentfilter-menu-dropdown"
|
||
@matchTriggerWidth={{false}}
|
||
as |type|
|
||
>
|
||
{{#if type.name}}{{type.name}}{{else}}<span class="red">Unknown type</span>{{/if}}
|
||
</PowerSelect>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<table class="gh-list gh-offers-list">
|
||
<tr class="gh-list-row header">
|
||
<th class="gh-list-header">{{this.offersList.length}} offers</th>
|
||
<th class="gh-list-header">Tier</th>
|
||
<th class="gh-list-header">Terms</th>
|
||
<th class="gh-list-header">Redemptions</th>
|
||
<th class="gh-list-header gh-list-cellwidth-10"></th>
|
||
</tr>
|
||
{{#each this.filteredOffers as |offer|}}
|
||
<tr class="gh-list-row" data-test-list="offers-list-item">
|
||
<LinkTo @route="offer" @model={{offer}} class="gh-list-data" data-test-list="offer-name">
|
||
<h3>{{offer.name}}</h3>
|
||
</LinkTo>
|
||
<LinkTo @route="offer" @model={{offer}} class="gh-list-data">
|
||
<span>{{offer.tier.name}}</span>
|
||
<span class="midgrey">- {{if (eq offer.cadence 'month') 'Monthly' 'Yearly'}} </span>
|
||
</LinkTo>
|
||
<LinkTo @route="offer" @model={{offer}} class="gh-list-data">
|
||
<span class="offer-value">
|
||
{{#if (eq offer.type 'percent')}}
|
||
{{svg-jar "offer"}}
|
||
<span class="green fw6">{{offer.amount}}% OFF</span>
|
||
{{/if}}
|
||
{{#if (eq offer.type 'fixed')}}
|
||
<span class="blue">{{svg-jar "offer"}}</span>
|
||
<span class="blue fw6">{{gh-price-amount offer.amount}} <span class="ttu">{{offer.currency}}</span> OFF</span>
|
||
{{/if}}
|
||
<span class="dib ml1 midgrey ttc"> – {{offer.duration}} </span>
|
||
</span>
|
||
</LinkTo>
|
||
<LinkTo @route="offer" @model={{offer}} class="gh-list-data">
|
||
<span class="midgrey">-</span>
|
||
</LinkTo>
|
||
<div class="gh-list-data gh-list-cellwidth-10 gh-tag-list-chevron">
|
||
<div class="flex items-center justify-end w-100 h-100">
|
||
<div
|
||
class="gh-btn gh-btn-icon gh-btn-text gh-offer-link-button"
|
||
data-tooltip="Get shareable link"
|
||
{{on "click" (fn this.openLinkDialog offer)}}
|
||
>
|
||
<span>{{svg-jar "link"}}</span>
|
||
</div>
|
||
<span class="nr2 lh-1">{{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1"}}</span>
|
||
</div>
|
||
</div>
|
||
</tr>
|
||
{{/each}}
|
||
</table>
|
||
{{else}}
|
||
<div class="gh-offers-list-cta">
|
||
{{svg-jar "discount-bubble" class="discount-bubble"}}
|
||
<h4>Provide special offers to new signups</h4>
|
||
<p>
|
||
Boost your subscriptions by creating targeted discounts to potential members.
|
||
</p>
|
||
<LinkTo @route="offer.new" class="gh-btn gh-btn-green gh-btn-icon">
|
||
<span>{{svg-jar "add"}} Add offer</span>
|
||
</LinkTo>
|
||
</div>
|
||
{{/if}}
|
||
|
||
<div class="gh-main-section gh-offers-help">
|
||
<h2 class="gh-main-section-header small bn">Get the most out of offers</h2>
|
||
<div class="gh-main-section-block">
|
||
<div class="gh-main-section-content grey">
|
||
<a href="https://ghost.org/resources" target="_blank" class="gh-offers-help-card">
|
||
<div>
|
||
<div class="thumbnail" style="background-image: url(assets/img/dashboard/bp1.jpg);"></div>
|
||
<h3>Discounts right on the beat</h3>
|
||
<p>Setting up the right timing for your offers is as critical as finding the right amount.</p>
|
||
</div>
|
||
<div class="gh-btn"><span>Read more</span></div>
|
||
</a>
|
||
|
||
<a href="https://ghost.org/resources" target="_blank" class="gh-offers-help-card">
|
||
<div>
|
||
<div class="thumbnail" style="background-image: url(assets/img/dashboard/bp2.jpg);"></div>
|
||
<h3>How The Browser grow their audience with special offers</h3>
|
||
<p>Learn about how The Browser work with offers</p>
|
||
</div>
|
||
<div class="gh-btn"><span>Read more</span></div>
|
||
</a>
|
||
|
||
<a href="https://ghost.org/resources" target="_blank" class="gh-offers-help-card">
|
||
<div>
|
||
<div class="thumbnail" style="background-image: url(assets/img/dashboard/join-community.jpg)"></div>
|
||
<h3>Read more about offers</h3>
|
||
<p>Check out the Ghost blog for more tips about how offers can boost your subscriptions.</p>
|
||
</div>
|
||
<div class="gh-btn"><span>Read more</span></div>
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
</section>
|