Ghost/ghost/admin/app/templates/offers.hbs
Peter Zimon e244304538 Offer list and detail improvements
- added icon to offer value
- added link popup to list
- renamed "Delete offer" to "Archive offer"
2021-10-07 11:21:53 +02:00

104 lines
5.5 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}}
<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.offersList as |offer|}}
<tr class="gh-list-row">
<LinkTo @route="offer" @model={{offer.offerModel}} class="gh-list-data">
<h3>{{offer.name}}</h3>
</LinkTo>
<LinkTo @route="offer" @model={{offer.offerModel}} class="gh-list-data">
<span>{{offer.tier.name}}</span> <span class="midgrey">- {{offer.cadenceInterval}}</span>
</LinkTo>
<LinkTo @route="offer" @model={{offer.offerModel}} class="gh-list-data">
<span class="offer-value">
{{svg-jar "offer"}}
{{#if (eq offer.type 'percent')}}
<span class="green fw6">{{offer.amount}}% OFF</span>
{{/if}}
{{#if (eq offer.type 'fixed')}}
<span class="green fw6">20% OFF</span>
{{/if}}
<span class="dib ml1 midgrey">  {{offer.duration}} </span>
</span>
</LinkTo>
<LinkTo @route="offer" @model={{offer.offerModel}} class="gh-list-data">
<span class="midgrey">-</span>
</LinkTo>
<LinkTo @route="offer" @model={{@offer.offerModel}} class="gh-list-data gh-list-cellwidth-10 gh-tag-list-chevron">
<div class="flex items-center justify-end w-100 h-100">
<LinkTo @route="offers.link" class="gh-btn gh-btn-icon gh-btn-text gh-offer-link-button" data-tooltip="Get shareable link">
<span>{{svg-jar "link"}}</span>
</LinkTo>
<span class="nr2 lh-1">{{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1"}}</span>
</div>
</LinkTo>
</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>