frontend/app/templates/pro.hbs
<div class="pro-hero">
<div class="container">
{{#if currentUser.isPro}}
<h2>You're <span class="big-badge">PRO</span> and we love you for it.</h2>
<span class="pro-period">
{{#if currentUser.proMembershipPlan.recurring}}
You are subscribed to PRO. <a {{action "cancelPro"}}>Cancel?</a>
{{else}}
You have {{daysRemaining}} days of PRO remaining.
{{/if}}
</span>
{{else}}
<h2>You should be <span class="big-badge">PRO</span></h2>
{{/if}}
</div>
</div>
<div class="container">
<div class="pro-right">
<div class="purchase-block panel">
<div class="btn-group" role="group">
<button type="button" {{bind-attr class=":btn :btn-default showSubscriptions:active"}} {{action "selectSubscriptions"}}>Subscription</button>
<button type="button" {{bind-attr class=":btn :btn-default showOneTime:active"}} {{action "selectOneTime"}}>One-time / Gift</button>
</div>
<div class="payment-wrapper">
{{#if isLoading}}
<div class="loading-state">
<div class="state-content">
<i class="fa fa-refresh fa-spin"></i>
<div>Processing...</div>
</div>
</div>
{{/if}}
{{#if isComplete}}
<div class="success-state">
<div class="state-content">
<i class="fa fa-check-circle"></i>
<div>Congrats, you are PRO!</div>
</div>
</div>
{{/if}}
{{#if isGifted}}
<div class="gifted-state">
<div class="state-content">
<i class="fa fa-gift"></i>
<div>Your gift is on its way!</div>
</div>
</div>
{{/if}}
{{#if isError}}
<div class="error-state">
<div class="state-content">
<i class="fa fa-warning"></i>
<div>{{errorMessage}}.</div>
<small>Please try again later.</small>
</div>
</div>
{{/if}}
{{#if showSubscriptions}}
{{#if currentUser.proMembershipPlan.recurring}}
<p>You are currently on the <strong>{{currentUser.proMembershipPlan.name}}</strong> plan. Do you want to switch to a different plan?</p>
{{else}}
<p>What type of subscription would you like?</p>
{{/if}}
<ul>
{{#each arrangedContent as |plan|}}
<li>
<label>
{{radio-button name="plan"
class="nomargin"
id=plan.id
value=plan.id
checked=selectedPlanId}}
{{plan.name}}
</label>
</li>
{{/each}}
</ul>
{{#if currentUser.proMembershipPlan.recurring}}
<small style="opacity:0.5">* You will only be charged when your subscription runs out in {{daysRemaining}} days.</small>
{{/if}}
{{/if}}
{{#if showOneTime}}
{{view "select" content=arrangedContent
value=selectedPlanId
optionValuePath="content.id"
optionLabelPath="content.name"}}
<ul>
<li>
<label>
{{radio-button id="notgift" value="notgift" checked=giftValue}}
purchase for myself
</label>
</li>
<li>
<label>
{{radio-button id="gift" value="gift" checked=giftValue}}
purchase as a gift
</label>
{{#if isGift}}
<div class="gift-details">
{{input type="text" class="gift-input inline" placeholder="Enter a username..." size="13" maxlength="20" value=giftTo}}
<ul class="indent">
<li>
{{textarea class="giftmessage gift-input" rows="2" placeholder="Go ahead, say something clever..." value=giftMessage}}
</li>
</ul>
</div>
{{/if}}
</li>
</ul>
{{/if}}
{{#if currentUser.isSignedIn}}
<button class="pro-button" type="button" {{bind-attr disabled=disablePurchase}} {{action "purchasePro"}}>Purchase PRO</button>
{{else}}
<div style="margin: 30px 0">
{{#link-to 'sign-in' class="pro-button"}}
Sign in to purchase PRO
{{/link-to}}
</div>
{{/if}}
</div>
</div>
</div>
<div class="pro-left">
<div class="pro-card">
<div class="panel panel-default">
<div class="panel-body pro-panel">
<div class="perks-header">
{{#if currentUser.isPro}}
<h3 class="perks-greeting">Thanks for helping us make Hummingbird a better place.</h3>
<small>Enjoy the perks below, you deserve them!</small>
{{else}}
<h3 class="perks-greeting">Show support for our growing community by going PRO.</h3>
<small>As our way of saying <i>Arigatō</i>, we’re throwing in a few cool perks.</small>
{{/if}}
</div>
<ul class="perks-body">
<li class="perk">
<i class="fa fa-ban"></i>
<h3>The Adblock of Legends</h3>
<p>Sure, you could just use adblock but dammit, you realize that ads are a necessary deal with the devil if we want to pay the bills to keep the site online. PRO will send those ads back to the hell they crawled out of.</p>
</li>
<li class="perk">
<i class="fa fa-certificate"></i>
<h3>The One Badge to Rule Them All</h3>
<p>Showing off your power level amongst an almost never-ending horde of weebs is no trivial matter. What you need is an arbitrary badge beside your name that says nothing and everything all at once.</p>
</li>
<li class="perk">
<i class="fa fa-calendar"></i>
<h3>The Phone Microwave</h3>
<p>Early access to new features. When we deploy something new, you’ll be the first to get your hands on it. Sure, it’ll be buggy but what really matters is that you were using it before it was cool.</p>
</li>
<li class="perk">
<i class="fa fa-gift"></i>
<h3>The PRO Partners</h3>
<p>Special benefits from exceptional products and services related to our industry. We don’t charge PRO partners for being in this program. We ask that they give all the benefits to you lovely guys and gals.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="pro-card">
<div class="panel panel-default">
<div class="panel-body pro-panel">
<div class="perks-header">
<h3 class="perks-greeting">Awesome stuff from our PRO partners.</h3>
<small>Want your company to be a PRO partner? <a href="https://hbrd.wufoo.com/forms/hummingbird-pro-partner-application/">Apply here.</a></small>
</div>
<ul class="pro-partners">
{{#each partnerDeals itemController="partner-deal" as |deal|}}
<li>
<div class="partner-logo">
<img {{bind-attr src=deal.model.partnerLogo}}>
</div>
<div class="partner-deal">
<h4>{{deal.model.dealTitle}}</h4>
<p>{{deal.model.dealDescription}}</p>
{{#if currentUser.isPro}}
{{#if deal.hasRedeemed}}
<div class="offer-clipping">{{deal.model.code}}</div>
<p class="redemption-instructions">{{deal.model.redemptionInfo}}</p>
{{#if deal.model.recurring}}
<p>You'll be able to redeem another code in {{pluralize deal.daysUntilRedeem "day" "days"}}.</p>
{{/if}}
{{else}}
{{#if deal.model.hasCodes}}
<a class="redeem-button" {{action "redeemDeal"}}>
{{#if deal.isRedeeming}}
<i class="fa fa-spin fa-spinner"></i> Redeeming Offer
{{else}}
Redeem Offer
{{/if}}
</a>
{{else}}
<p>We've run out of codes temporarily, watch this space!</p>
{{/if}}
{{/if}}
{{/if}}
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
</div>