mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
ecfb77b980
refs https://github.com/TryGhost/Ghost/issues/12461 - Added "Emails received", "Emails opened", and "Avg. open rate" to member details - Adjusted visual display of avatar, name and email. Made email a mailto link - Rearranged Name and Email fields to reduce height - Changed height of the notes textarea Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>
285 lines
16 KiB
Handlebars
285 lines
16 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>
|
||
<div class="flex items-center pa5 pb3 pt6">
|
||
{{#if (or this.member.name this.member.email)}}
|
||
<GhMemberAvatar
|
||
@member={{this.member}}
|
||
@sizeClass={{if this.member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-headline fw4 lh-zero tracked-1'}}
|
||
@containerClass="w20 h20 mr4 gh-member-detail-avatar"
|
||
/>
|
||
{{else}}
|
||
<div class="flex items-center justify-center br-100 w18 h18 mr4 gh-new-member-avatar">
|
||
<span class="gh-member-avatar-label f-subheadline fw4 lh-zero tracked-1">N</span>
|
||
</div>
|
||
{{/if}}
|
||
<div>
|
||
<h3 class="f2 fw6 ma0 pa0">
|
||
{{or this.member.name this.member.email}}
|
||
</h3>
|
||
<p class="f7 pa0 ma0 midlightgrey-d1">
|
||
{{#if (and this.member.name this.member.email)}}
|
||
<span class="darkgrey fw5"><a href="mailto:{{this.member.email}}">{{this.member.email}}</a></span>
|
||
{{/if}}
|
||
</p>
|
||
{{#unless this.member.isNew}}
|
||
<p class="f7 pa0 ma0 midgrey-d1 {{if this.member.name "nudge-bottom--2"}}">
|
||
{{#if this.member.geolocation}}
|
||
{{#if (eq this.member.geolocation.country_code "US")}}
|
||
{{this.member.geolocation.region}}, US
|
||
{{else}}
|
||
{{this.member.geolocation.country}}
|
||
{{/if}}
|
||
{{else}}
|
||
Unknown location
|
||
{{/if}}
|
||
– Created on {{moment-format @member.createdAtUTC "D MMM YYYY"}}
|
||
</p>
|
||
{{/unless}}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex mb5 pa5 pt3 pb5 bb b--whitegrey">
|
||
<div class="flex-auto flex flex-column justify-center items-start">
|
||
<div class="f7 midgrey-d1">Emails received</div>
|
||
<div class="f2 fw6">{{@member.emailCount}}</div>
|
||
</div>
|
||
<div class="flex-auto flex flex-column justify-center items-start">
|
||
<div class="f7 midgrey-d1">Emails opened</div>
|
||
<div class="f2 fw6">{{@member.emailOpenedCount}}</div>
|
||
</div>
|
||
<div class="flex-auto flex flex-column justify-center items-start">
|
||
<div class="f7 midgrey-d1">Avg. open rate</div>
|
||
<div class="f2 fw6">
|
||
{{#if (is-empty @member.emailOpenRate)}}
|
||
<span data-tooltip="Insufficient data available">–</span>
|
||
{{else}}
|
||
{{@member.emailOpenRate}}%
|
||
{{/if}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex">
|
||
<GhFormGroup @errors={{this.member.errors}} @hasValidated={{this.member.hasValidated}} @property="name" @classNames="max-width pl5">
|
||
<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 pl4 pr5">
|
||
<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>
|
||
|
||
<div class="pa5 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 pt6 pb6">
|
||
<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 (and subscription.cancelAtPeriodEnd (not-eq subscription.status 'canceled'))}}
|
||
<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}}
|