mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-21 01:41:46 +03:00
2c498ab193
Refs https://www.notion.so/ghost/Switch-breadcrumb-style-513a624c0e0d490ca39a2fdb97a6971a - Separating out the breadcrumbs and the title makes it easier to navigate back on multiple levels for nested pages. - Avoids very long titles, as it doesn't include breadcrumbs anymore
174 lines
9.9 KiB
Handlebars
174 lines
9.9 KiB
Handlebars
<section class="gh-canvas gh-offers">
|
||
<GhCanvasHeader class="gh-canvas-header sticky">
|
||
<h2 class="gh-canvas-title" data-test-screen-title>Offers</h2>
|
||
<section class="gh-offers-actions view-actions">
|
||
<div>
|
||
<div class="gh-contentfilter-menu gh-contentfilter-type {{if (not (eq this.selectedType.value "active")) "gh-contentfilter-selected"}}" data-test-type-select="true">
|
||
<PowerSelect
|
||
@selected={{this.selectedType}}
|
||
@options={{this.availableTypes}}
|
||
@searchEnabled={{false}}
|
||
@onChange={{this.onTypeChange}}
|
||
@triggerComponent={{component "gh-power-select/trigger"}}
|
||
@triggerClass="gh-contentfilter-menu-trigger"
|
||
@dropdownClass="gh-contentfilter-menu-dropdown"
|
||
@matchTriggerWidth={{false}}
|
||
as |type|
|
||
>
|
||
{{#if type.name}}{{type.name}} offers{{else}}<span class="red">Unknown type</span>{{/if}}
|
||
</PowerSelect>
|
||
</div>
|
||
</div>
|
||
<LinkTo @route="offer.new" class="gh-btn gh-btn-primary"><span>New offer</span></LinkTo>
|
||
</section>
|
||
</GhCanvasHeader>
|
||
|
||
<section class="view-container">
|
||
|
||
{{#if (and this.offersExist this.filteredOffers.length)}}
|
||
<table class="gh-list gh-offers-list">
|
||
<tr class="gh-list-row header">
|
||
<th class="gh-list-header">
|
||
{{#if (eq this.selectedType.value "active")}}
|
||
{{gh-pluralize this.filteredOffers.length "active offer"}}
|
||
{{else}}
|
||
{{gh-pluralize this.filteredOffers.length "archived offer"}}
|
||
{{/if}}
|
||
</th>
|
||
<th class="gh-list-header">Tier</th>
|
||
<th class="gh-list-header">Terms</th>
|
||
<th class="gh-list-header">Price</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">-</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}}
|
||
{{#if (feature 'freeTrial')}}
|
||
{{#if (eq offer.type 'trial')}}
|
||
<span class="pink">{{svg-jar "offer"}}</span>
|
||
<span class="pink fw6"><span class="ttu">{{offer.amount}}</span> DAYS FREE</span>
|
||
{{/if}}
|
||
{{/if}}
|
||
{{#if (not (eq offer.type 'trial'))}}
|
||
<span class="dib ml1 midgrey ttc"> –
|
||
{{if (eq offer.duration 'once') "First-payment" "Repeating"}}
|
||
</span>
|
||
{{/if}}
|
||
</span>
|
||
</LinkTo>
|
||
<LinkTo @route="offer" @model={{offer}} class="gh-list-data">
|
||
{{#if (eq offer.type 'trial')}}
|
||
<span>{{currency-symbol offer.finalCurrency}}{{gh-price-amount offer.originalPrice}}</span>
|
||
{{else}}
|
||
<span>{{currency-symbol offer.finalCurrency}}{{gh-price-amount offer.updatedPrice}}</span>
|
||
<span class="midgrey strike ml2">{{currency-symbol offer.finalCurrency}}{{gh-price-amount offer.originalPrice}}</span>
|
||
{{/if}}
|
||
</LinkTo>
|
||
<LinkTo @route="offer" @model={{offer}} class="gh-list-data">
|
||
<span class="midgrey">{{offer.redemptionCount}}</span>
|
||
</LinkTo>
|
||
<div class="gh-list-data gh-list-cellwidth-10 gh-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>
|
||
<LinkTo @route="offer" @model={{offer}}>
|
||
<span class="nr2 lh-1">{{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1"}}</span>
|
||
</LinkTo>
|
||
</div>
|
||
</div>
|
||
</tr>
|
||
{{/each}}
|
||
</table>
|
||
{{else}}
|
||
{{#if (eq this.selectedType.value "active")}}
|
||
<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 "plus"}} Add offer</span>
|
||
</LinkTo>
|
||
</div>
|
||
{{else}}
|
||
<div class="no-posts-box">
|
||
<div class="no-posts">
|
||
<h4>You have no archived offers.</h4>
|
||
<LinkTo @route="offers" @query={{hash type=null author=null tag=null}} class="gh-btn gh-btn-lg">
|
||
<span>Show active offers</span>
|
||
</LinkTo>
|
||
</div>
|
||
</div>
|
||
{{/if}}
|
||
{{/if}}
|
||
|
||
{{#if (eq this.selectedType.value "active")}}
|
||
<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/help/offers" target="_blank" class="gh-offers-help-card" rel="noopener noreferrer">
|
||
<div class="gh-offers-help-content">
|
||
<div class="thumbnail" style="background-image: url(assets/img/marketing/offers-1.jpg);"></div>
|
||
<div class="text">
|
||
<h3>How to create offers in Ghost</h3>
|
||
<p>Find out how to create and promote offers to increase your subscriptions.</p>
|
||
</div>
|
||
</div>
|
||
<div class="gh-btn"><span>Read more</span></div>
|
||
</a>
|
||
|
||
<a href="https://ghost.org/resources/proven-discount-strategies" target="_blank" class="gh-offers-help-card" rel="noopener noreferrer">
|
||
<div class="gh-offers-help-content">
|
||
<div class="thumbnail" style="background-image: url(assets/img/marketing/offers-3.jpg);"></div>
|
||
<div class="text">
|
||
<h3>Proven discount strategies for publishers</h3>
|
||
<p>Setting up the right timing for your offers is as critical as finding the right amount.</p>
|
||
</div>
|
||
</div>
|
||
<div class="gh-btn"><span>Read more</span></div>
|
||
</a>
|
||
|
||
<a href="https://ghost.org/resources/conversion-vs-retention-offers" target="_blank" class="gh-offers-help-card" rel="noopener noreferrer">
|
||
<div class="gh-offers-help-content">
|
||
<div class="thumbnail" style="background-image: url(assets/img/marketing/offers-2.jpg)"></div>
|
||
<div class="text">
|
||
<h3>Offer pricing: Conversion vs retention</h3>
|
||
<p>As your business evolves, your discount strategy should too.</p>
|
||
</div>
|
||
</div>
|
||
<div class="gh-btn"><span>Read more</span></div>
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{/if}}
|
||
|
||
</section>
|
||
</section>
|