Ghost/ghost/admin/app/templates/offers.hbs
Rishabh 88049f1692 Updated offers list to filter on archived offers
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
2021-10-13 21:23:30 +05:30

129 lines
7.0 KiB
Handlebars
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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