mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
9cd6ed06a7
refs https://github.com/TryGhost/Ghost/issues/12403 This is only displayed when it is present, so as not to clutter the UI unless it's required.
222 lines
13 KiB
Handlebars
222 lines
13 KiB
Handlebars
<div class="flex items-stretch mt2">
|
||
<div class="flex-auto br4 shadow-1 bg-grouped-table mt2 flex flex-column justify-between items-stretch gh-member-settings-primary mr6">
|
||
<div class="pa5 pb0 pt4">
|
||
<GhFormGroup @errors={{this.member.errors}} @hasValidated={{this.member.hasValidated}} @property="name" @classNames="max-width">
|
||
<label for="member-name">Name</label>
|
||
<GhTextInput @id="member-name" @name="name" @value={{this.scratchMember.name}} @tabindex="1"
|
||
@focus-out={{action "setProperty" "name" this.scratchMember.name}} />
|
||
<GhErrorMessage @errors={{member.errors}} @property="name" />
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @errors={{this.member.errors}} @hasValidated={{this.member.hasValidated}} @property="email" @classNames="max-width">
|
||
<label for="member-email">Email</label>
|
||
<GhTextInput @value={{this.scratchMember.email}} @id="member-email" @name="email" @tabindex="2"
|
||
@autocapitalize="off" @autocorrect="off" @autocomplete="off"
|
||
@focus-out={{action "setProperty" "email" this.scratchMember.email}} />
|
||
<GhErrorMessage @errors={{this.member.errors}} @property="email" />
|
||
</GhFormGroup>
|
||
</div>
|
||
<div class="pa5 pt5 pb6 bt b--whitegrey">
|
||
<GhFormGroup @classNames="gh-members-subscribed-checkbox mb0">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<h4 class="gh-setting-title">Subscribed to newsletter</h4>
|
||
<p class="gh-setting-desc">If disabled, member will <em>not</em> receive newsletter emails</p>
|
||
</div>
|
||
<div class="for-switch">
|
||
<label class="switch" for="subscribed-checkbox">
|
||
<Input @checked={{this.member.subscribed}} @type="checkbox" @id="subscribed-checkbox"
|
||
@name="subscribed" />
|
||
<span class="input-toggle-component"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</GhFormGroup>
|
||
</div>
|
||
</div>
|
||
<div class="flex-auto br4 shadow-1 bg-grouped-table mt2 flex flex-column items-stretch gh-member-settings-secondary">
|
||
<div class="pa5 pt4">
|
||
<GhFormGroup>
|
||
<label for="label-input">Labels</label>
|
||
<GhMemberLabelInput @member={{this.member}} @triggerId="label-input" />
|
||
</GhFormGroup>
|
||
<GhFormGroup @errors={{this.member.errors}} @hasValidated={{this.member.hasValidated}} @property="note" @classNames="mb0">
|
||
<label for="member-note">Note <span class="midgrey-l2 fw4">(not visible to member)</span></label>
|
||
<GhTextarea @id="member-note" @name="note" @class="gh-member-details-textarea" @tabindex="3"
|
||
@value={{this.scratchMember.note}} @focus-out={{action "setProperty" "note" this.scratchMember.note}} />
|
||
<GhErrorMessage @errors={{this.member.errors}} @property="note" />
|
||
<p> Maximum: <b>500</b> characters. You’ve used
|
||
{{gh-count-down-characters this.scratchMember.note 500}}</p>
|
||
</GhFormGroup>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{#if canShowStripeInfo}}
|
||
<h4 class="midlightgrey f-small fw5 ttu mt12">Stripe info</h4>
|
||
|
||
{{#if this.isLoading}}
|
||
<div class="pa20 br4 shadow-1 bg-grouped-table mt2">
|
||
<div class="flex justify-center flex-auto">
|
||
<div class="gh-loading-spinner"> </div>
|
||
</div>
|
||
</div>
|
||
{{else}}
|
||
<div class="br4 shadow-1 bg-grouped-table mt2">
|
||
{{#if this.subscriptions}}
|
||
{{#if this.hasMultipleSubscriptions}}
|
||
<div class="pa2 flex flex-column flex-row-ns items-center justify-center f7 fw5 bg-whitegrey-l2 bb b--whitegrey br4 br--top">
|
||
{{svg-jar "info" class="gh-member-info-icon mr2 fill-darkgrey"}} Member has multiple Stripe subscriptions
|
||
</div>
|
||
{{/if}}
|
||
{{#each this.subscriptions as |subscription|}}
|
||
<section class="gh-member-stripe-info pa5 pb0 pt4 flex flex-column flex-row-ns items-start justify-between">
|
||
<div class="flex items-start w-100">
|
||
<div class="w-50 flex-auto mr8">
|
||
<div class="gh-member-header-stripeinfo">
|
||
<h4 class="f6 fw6">Customer</h4>
|
||
</div>
|
||
<table class="gh-member-stripe-table">
|
||
<tr>
|
||
<td class="gh-member-stripe-label">Stripe customer ID</td>
|
||
<td class="gh-member-stripe-data">
|
||
<a href="https://dashboard.stripe.com/customers/{{subscription.customer.id}}" target="_blank" rel="noopener" data-tooltip="View on Stripe">
|
||
{{subscription.customer.id}}
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="gh-member-stripe-label">Name</td>
|
||
<td class="gh-member-stripe-data">
|
||
{{#if subscription.customer.name}}
|
||
{{subscription.customer.name}}
|
||
{{else}}
|
||
<span class="midgrey-d1">No name</span>
|
||
{{/if}}
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="gh-member-stripe-label">Email</td>
|
||
<td class="gh-member-stripe-data">
|
||
{{#if subscription.customer.email}}
|
||
{{subscription.customer.email}}
|
||
{{else}}
|
||
<span class="midgrey-d1">No email</span>
|
||
{{/if}}
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="gh-member-stripe-label">Customer since</td>
|
||
<td class="gh-member-stripe-data">
|
||
{{#if subscription.startDate}}
|
||
{{subscription.startDate}}
|
||
{{else}}
|
||
<span class="midgrey-d1">No data</span>
|
||
{{/if}}
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="w-50 flex-auto">
|
||
<div class="gh-member-header-stripeinfo">
|
||
<h4 class="f6 fw6">Subscription</h4>
|
||
{{#if (eq subscription.status "active")}}
|
||
{{#if subscription.cancelAtPeriodEnd}}
|
||
<GhTaskButton
|
||
@buttonText="Continue subscription"
|
||
@successText=""
|
||
@task={{this.continueSubscription}}
|
||
@taskArgs={{subscription.id}}
|
||
@class="gh-btn gh-btn-icon gh-member-btn-cancelsub"
|
||
data-test-button="continue-subscription"
|
||
/>
|
||
{{else}}
|
||
<GhTaskButton
|
||
@buttonText="Cancel subscription"
|
||
@successText=""
|
||
@task={{this.cancelSubscription}}
|
||
@taskArgs={{subscription.id}}
|
||
@class="gh-btn gh-btn-icon gh-member-btn-cancelsub"
|
||
data-test-button="cancel-subscription"
|
||
/>
|
||
{{/if}}
|
||
{{/if}}
|
||
</div>
|
||
<table class="gh-member-stripe-table">
|
||
<tr>
|
||
<td class="gh-member-stripe-label">Stripe subscription ID</td>
|
||
<td class="gh-member-stripe-data">
|
||
<a href="https://dashboard.stripe.com/subscriptions/{{subscription.id}}" target="_blank" rel="noopener"
|
||
data-tooltip="View on Stripe">
|
||
{{subscription.id}}
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="gh-member-stripe-label">Plan</td>
|
||
<td class="gh-member-stripe-data">
|
||
{{subscription.plan.nickname}}
|
||
<span class="midgrey-d1">({{subscription.amount}}
|
||
<span class="ttu">{{subscription.plan.currency}}</span>/{{subscription.plan.interval}})
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="gh-member-stripe-label">Status</td>
|
||
<td class="gh-member-stripe-data">
|
||
{{#if subscription.cancelAtPeriodEnd}}
|
||
<span class="gh-member-cancels-on-label">Cancels on {{subscription.validUntil}}</span>
|
||
{{else}}
|
||
<span class="gh-member-stripe-status">{{subscription.statusLabel}}</span>
|
||
{{/if}}
|
||
</td>
|
||
</tr>
|
||
{{#if subscription.cancellationReason}}
|
||
<tr>
|
||
<td class="gh-member-stripe-label">Cancellation reason</td>
|
||
<td class="gh-member-stripe-data">
|
||
<span class="gh-member-stripe-cancellation-reason">{{subscription.cancellationReason}}</span>
|
||
</td>
|
||
</tr>
|
||
{{/if}}
|
||
<tr>
|
||
<td class="gh-member-stripe-label">Next renewal date</td>
|
||
<td class="gh-member-stripe-data">
|
||
{{#if subscription.cancelAtPeriodEnd}}
|
||
No further renewal
|
||
{{else}}
|
||
{{subscription.validUntil}}
|
||
{{/if}}
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{{/each}}
|
||
{{else}}
|
||
<div class="pa20">
|
||
<p class="ma0 pa0 tc midgrey">Member doesn't have an active Stripe subscription</p>
|
||
</div>
|
||
{{/if}}
|
||
<div class="pa5 pb0 pt4 flex flex-column justify-between bt b--whitegrey">
|
||
<GhFormGroup @classNames="gh-members-comped-checkbox">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<h4 class="gh-setting-title">Complimentary premium plan</h4>
|
||
<p class="gh-setting-desc">If enabled, member will be placed onto a free of charge premium subscription</p>
|
||
</div>
|
||
<div class="for-switch">
|
||
<label class="switch" for="comped-checkbox">
|
||
<Input @checked={{this.member.comped}} @type="checkbox" @id="comped-checkbox" @name="comped" />
|
||
<span class="input-toggle-component"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</GhFormGroup>
|
||
</div>
|
||
</div>
|
||
{{/if}}
|
||
{{/if}}
|