Ghost/ghost/admin/app/templates/offers.hbs

<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.membership" 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>