dc1bba781b
fixes https://linear.app/tryghost/issue/PROD-319/offer-is-not-preselected-in-filter-dropdown-after-navigating-to - fixes the URL builder for when Redeemed offers are selected to ensure the selected tier is preselected in the members filter
187 lines
11 KiB
Handlebars
187 lines
11 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">
|
||
{{#if this.membersUtils.hasActiveTiers}}
|
||
<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>
|
||
{{/if}}
|
||
</section>
|
||
</GhCanvasHeader>
|
||
|
||
<section class="view-container">
|
||
{{#if (not this.membersUtils.hasActiveTiers)}}
|
||
<div class="gh-offers-list-cta missing-tiers">
|
||
{{svg-jar "discount-bubble" class="discount-bubble"}}
|
||
<h4>You must have an active tier to create offers</h4>
|
||
<LinkTo @route="settings-x.settings-x" @model="tiers" class="gh-btn gh-btn-green">
|
||
<span>Manage tiers</span>
|
||
</LinkTo>
|
||
</div>
|
||
{{else if (and this.offersExist this.filteredOffers.length)}}
|
||
<table class="gh-list gh-offers-list" data-test-offers-list>
|
||
<thead>
|
||
<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>
|
||
</thead>
|
||
<tbody>
|
||
{{#each this.filteredOffers as |offer|}}
|
||
<tr class="gh-list-row" data-test-list="offers-list-item" data-test-offer="{{offer.name}}">
|
||
<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 (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 (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="members" @query={{hash filter=(concat "offer_redemptions:[" offer.id "]")}} class="gh-list-data" data-test-list="redemption-count">
|
||
<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">
|
||
<button
|
||
type="button"
|
||
class="gh-btn gh-btn-icon gh-btn-text gh-offer-link-button"
|
||
data-tooltip="Get shareable link"
|
||
aria-label="Get shareable link"
|
||
{{on "click" (fn this.openLinkDialog offer)}}
|
||
>
|
||
<span>{{svg-jar "link"}}</span>
|
||
</button>
|
||
<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}}
|
||
</tbody>
|
||
</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="active" 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>
|