Updated member details
This commit is contained in:
Peter Zimon
parent
e26ef16461
commit
b298444893
|
|
@ -1,11 +1,8 @@
|
|||
<div class="gh-member-feed" ...attributes>
|
||||
|
||||
<div class="flex justify-between mt8">
|
||||
<h4 class="midlightgrey f-small fw5 ttu">Member activity</h4>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto bg-grouped-table gh-content-box mt2 flex flex-column justify-between items-stretch">
|
||||
<div class="pt5 pb5">
|
||||
<div class="gh-member-feed gh-main-section-content pr" ...attributes>
|
||||
<h4 class="gh-main-section-heading no-border">Member activity</h4>
|
||||
|
||||
<div class="gh-content-box flex-auto flex flex-column justify-between items-stretch">
|
||||
<div>
|
||||
{{#if this.activities}}
|
||||
{{#each this.firstActivities as |activity|}}
|
||||
<GhMemberActivityFeedItem @activity={{activity}} />
|
||||
|
|
@ -28,11 +25,10 @@
|
|||
</button>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<p class="ma0 pa8 tc midgrey">No member activity yet</p>
|
||||
<p class="ma0 pa12 tc midgrey fw3">No member activity yet</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{{#if this.emailPreview}}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="mt2 pb2 gh-member-settings" ...attributes>
|
||||
<div class="flex-auto bg-grouped-table gh-content-box mt2 flex flex-column justify-between items-stretch gh-member-details">
|
||||
<div>
|
||||
<div class="flex items-center pa5 pb3">
|
||||
<div class="gh-member-settings" ...attributes>
|
||||
<section class="gh-main-section no-heading gh-member-detail-overview flex items-start">
|
||||
<div class="gh-main-section-content pr width-50">
|
||||
<div class="flex items-center">
|
||||
{{#if (or this.member.name this.member.email)}}
|
||||
<GhMemberAvatar
|
||||
@member={{this.member}}
|
||||
|
|
@ -14,16 +14,16 @@
|
|||
</div>
|
||||
{{/if}}
|
||||
<div>
|
||||
<h3 class="f2 fw6 ma0 pa0">
|
||||
<h3>
|
||||
{{or this.member.name this.member.email}}
|
||||
</h3>
|
||||
<p class="f7 pa0 ma0 midlightgrey-d1">
|
||||
<p>
|
||||
{{#if (and this.member.name this.member.email)}}
|
||||
<a href="mailto:{{this.member.email}}" class="darkgrey fw5">{{this.member.email}}</a>
|
||||
<a href="mailto:{{this.member.email}}">{{this.member.email}}</a>
|
||||
{{/if}}
|
||||
</p>
|
||||
{{#unless this.member.isNew}}
|
||||
<p class="f7 pa0 ma0 midgrey {{if this.member.name "nudge-bottom--2"}}">
|
||||
<p class="{{if this.member.name "nudge-bottom--2"}}">
|
||||
{{#if this.member.geolocation}}
|
||||
{{#if (and (eq this.member.geolocation.country_code "US") @member.geolocation.region)}}
|
||||
{{this.member.geolocation.region}}, US
|
||||
|
|
@ -38,19 +38,20 @@
|
|||
{{/unless}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex mb5 pa5 pt3 bb b--whitegrey">
|
||||
</div>
|
||||
<div class="width-50">
|
||||
<div class="flex">
|
||||
<div class="flex-auto flex flex-column justify-center items-start">
|
||||
<div class="f8 fw5 midgrey">Emails received</div>
|
||||
<div class="gh-member-email-stats">{{@member.emailCount}}</div>
|
||||
<div class="gh-heading-xs">Emails received</div>
|
||||
<div class="gh-data-summary">{{@member.emailCount}}</div>
|
||||
</div>
|
||||
<div class="flex-auto flex flex-column justify-center items-start">
|
||||
<div class="f8 fw5 midgrey">Emails opened</div>
|
||||
<div class="gh-member-email-stats">{{@member.emailOpenedCount}}</div>
|
||||
<div class="gh-heading-xs">Emails opened</div>
|
||||
<div class="gh-data-summary">{{@member.emailOpenedCount}}</div>
|
||||
</div>
|
||||
<div class="flex-auto flex flex-column justify-center items-start">
|
||||
<div class="f8 fw5 midgrey">Avg. open rate</div>
|
||||
<div class="gh-member-email-stats">
|
||||
<div class="gh-heading-xs">Avg. open rate</div>
|
||||
<div class="gh-data-summary">
|
||||
{{#if (is-empty @member.emailOpenRate)}}
|
||||
<span data-tooltip="Insufficient data available">–</span>
|
||||
{{else}}
|
||||
|
|
@ -59,28 +60,32 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<GhFormGroup @errors={{this.member.errors}} @hasValidated={{this.member.hasValidated}} @property="name" @classNames="max-width pl5 pr5">
|
||||
<section class="gh-main-section flex items-start">
|
||||
<div class="width-67 gh-main-section-content pt pr">
|
||||
<div>
|
||||
<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}} data-test-input="member-name" />
|
||||
<GhErrorMessage @errors={{member.errors}} @property="name" />
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup @errors={{this.member.errors}} @hasValidated={{this.member.hasValidated}} @property="email" @classNames="max-width pl5 pr5">
|
||||
<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}} data-test-input="member-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>
|
||||
<h4 class="gh-setting-title m">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">
|
||||
|
|
@ -93,203 +98,208 @@
|
|||
</div>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto bg-grouped-table gh-content-box grey mt2 flex flex-column items-stretch gh-member-internal-info">
|
||||
<div class="pa5">
|
||||
<GhFormGroup @classNames="gh-member-labels">
|
||||
<label for="label-input">Labels</label>
|
||||
<GhMemberLabelInput @onChange={{action "setLabels"}} @labels={{this.member.labels}} @triggerId="label-input" data-test-input="" />
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @errors={{this.member.errors}} @hasValidated={{this.member.hasValidated}} @property="note" @classNames="mb0 gh-member-note">
|
||||
<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}} data-test-input="member-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>
|
||||
|
||||
{{#if this.canShowStripeInfo}}
|
||||
<div class="gh-member-stripe">
|
||||
<h4 class="midlightgrey f-small fw5 ttu mt8 gh-member-label-stripe">Stripe info</h4>
|
||||
|
||||
{{#if this.isLoading}}
|
||||
<div class="pa20 bg-grouped-table gh-content-box grey mt2">
|
||||
<div class="flex justify-center flex-auto">
|
||||
<div class="gh-loading-spinner"> </div>
|
||||
</div>
|
||||
<div class="gh-main-section-content pt width-34">
|
||||
<div class="flex-auto flex flex-column items-stretch">
|
||||
<div>
|
||||
<GhFormGroup @classNames="gh-member-labels">
|
||||
<label for="label-input">Labels</label>
|
||||
<GhMemberLabelInput @onChange={{action "setLabels"}} @labels={{this.member.labels}} @triggerId="label-input" data-test-input="" />
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup @errors={{this.member.errors}} @hasValidated={{this.member.hasValidated}} @property="note" @classNames="mb0 gh-member-note">
|
||||
<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}} data-test-input="member-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>
|
||||
{{else}}
|
||||
<div class="bg-grouped-table gh-content-box grey mt2">
|
||||
{{#if this.subscriptions}}
|
||||
<div class="gh-member-header-stripeinfo">
|
||||
<div class="flex items-center justify-between gh-btn-group w-100 ma5 mb0">
|
||||
<button type="button" class="gh-btn gh-member-btn-stripe-toggle w-100 {{if (eq this.stripeDetailsType "subscription") "gh-btn-group-selected"}}" {{on "click" (fn this.changeStripeDetailsType "subscription")}}><span>Subscription</span></button>
|
||||
<button type="button" class="gh-btn gh-member-btn-stripe-toggle w-100 {{if (eq this.stripeDetailsType "customer") "gh-btn-group-selected"}}" {{on "click" (fn this.changeStripeDetailsType "customer")}}><span>Customer</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex items-start">
|
||||
<div class="gh-main-section width-67">
|
||||
<GhMemberActivityFeed @emailRecipients={{this.member.emailRecipients}} />
|
||||
</div>
|
||||
<div class="gh-main-section width-34">
|
||||
{{#if this.canShowStripeInfo}}
|
||||
<h4 class="gh-main-section-heading">Stripe info</h4>
|
||||
<div class="gh-member-stripe">
|
||||
{{#if this.isLoading}}
|
||||
<div class="pa20 bg-grouped-table gh-content-box grey mt2">
|
||||
<div class="flex justify-center flex-auto">
|
||||
<div class="gh-loading-spinner"> </div>
|
||||
</div>
|
||||
</div>
|
||||
{{#if (eq this.stripeDetailsType "subscription")}}
|
||||
{{#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
|
||||
{{else}}
|
||||
<div class="bg-grouped-table gh-content-box grey mt2">
|
||||
{{#if this.subscriptions}}
|
||||
<div class="gh-member-header-stripeinfo">
|
||||
<div class="flex items-center justify-between gh-btn-group w-100 ma5 mb0">
|
||||
<button type="button" class="gh-btn gh-member-btn-stripe-toggle w-100 {{if (eq this.stripeDetailsType "subscription") "gh-btn-group-selected"}}" {{on "click" (fn this.changeStripeDetailsType "subscription")}}><span>Subscription</span></button>
|
||||
<button type="button" class="gh-btn gh-member-btn-stripe-toggle w-100 {{if (eq this.stripeDetailsType "customer") "gh-btn-group-selected"}}" {{on "click" (fn this.changeStripeDetailsType "customer")}}><span>Customer</span></button>
|
||||
</div>
|
||||
</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="flex-auto">
|
||||
<table class="gh-member-stripe-table">
|
||||
<tr class="gh-member-stripe-row">
|
||||
<td class="gh-member-stripe-label">Stripe subscription ID</td>
|
||||
<td class="gh-member-stripe-data gh-member-stripe-id">
|
||||
<a href="https://dashboard.stripe.com/subscriptions/{{subscription.id}}" target="_blank" rel="noopener"
|
||||
data-tooltip="View on Stripe">
|
||||
{{subscription.id}}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="gh-member-stripe-row">
|
||||
<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 class="gh-member-stripe-row">
|
||||
<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 (eq this.stripeDetailsType "subscription")}}
|
||||
{{#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="flex-auto">
|
||||
<table class="gh-member-stripe-table">
|
||||
<tr class="gh-member-stripe-row">
|
||||
<td class="gh-member-stripe-label">Stripe subscription ID</td>
|
||||
<td class="gh-member-stripe-data gh-member-stripe-id">
|
||||
<a href="https://dashboard.stripe.com/subscriptions/{{subscription.id}}" target="_blank" rel="noopener"
|
||||
data-tooltip="View on Stripe">
|
||||
{{subscription.id}}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="gh-member-stripe-row">
|
||||
<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 class="gh-member-stripe-row">
|
||||
<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 class="gh-member-stripe-row">
|
||||
<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}}
|
||||
</td>
|
||||
</tr>
|
||||
{{#if subscription.cancellationReason}}
|
||||
<tr class="gh-member-stripe-row">
|
||||
<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>
|
||||
|
||||
{{#if (eq subscription.status "active")}}
|
||||
{{#if subscription.cancelAtPeriodEnd}}
|
||||
<GhTaskButton
|
||||
@buttonText="Continue subscription"
|
||||
@successText=""
|
||||
@task={{this.continueSubscription}}
|
||||
@taskArgs={{subscription.id}}
|
||||
@class="mt1 mb6 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="mt1 mb6 gh-btn gh-btn-icon gh-member-btn-cancelsub"
|
||||
data-test-button="cancel-subscription"
|
||||
/>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/each}}
|
||||
{{else}}
|
||||
|
||||
<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="flex-auto">
|
||||
<table class="gh-member-stripe-table">
|
||||
<tr class="gh-member-stripe-row">
|
||||
<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 class="gh-member-stripe-label">Stripe customer ID</td>
|
||||
<td class="gh-member-stripe-data gh-member-stripe-id">
|
||||
<a href="https://dashboard.stripe.com/customers/{{customer.id}}" target="_blank" rel="noopener" data-tooltip="View on Stripe">
|
||||
{{customer.id}}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{{/if}}
|
||||
<tr class="gh-member-stripe-row">
|
||||
<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>
|
||||
|
||||
{{#if (eq subscription.status "active")}}
|
||||
{{#if subscription.cancelAtPeriodEnd}}
|
||||
<GhTaskButton
|
||||
@buttonText="Continue subscription"
|
||||
@successText=""
|
||||
@task={{this.continueSubscription}}
|
||||
@taskArgs={{subscription.id}}
|
||||
@class="mt1 mb6 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="mt1 mb6 gh-btn gh-btn-icon gh-member-btn-cancelsub"
|
||||
data-test-button="cancel-subscription"
|
||||
/>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
<tr class="gh-member-stripe-row">
|
||||
<td class="gh-member-stripe-label">Name</td>
|
||||
<td class="gh-member-stripe-data">
|
||||
{{#if customer.name}}
|
||||
{{customer.name}}
|
||||
{{else}}
|
||||
<span class="midgrey-d1">No name</span>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="gh-member-stripe-row">
|
||||
<td class="gh-member-stripe-label">Email</td>
|
||||
<td class="gh-member-stripe-data gh-member-stripe-email">
|
||||
{{#if customer.email}}
|
||||
{{customer.email}}
|
||||
{{else}}
|
||||
<span class="midgrey-d1">No email</span>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="gh-member-stripe-row">
|
||||
<td class="gh-member-stripe-label">Customer since</td>
|
||||
<td class="gh-member-stripe-data">
|
||||
{{#if customer.startDate}}
|
||||
{{customer.startDate}}
|
||||
{{else}}
|
||||
<span class="midgrey-d1">No data</span>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
{{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 gh-members-comped">
|
||||
<div class="mr5">
|
||||
<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 gh-members-comped-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>
|
||||
</section>
|
||||
{{/each}}
|
||||
{{else}}
|
||||
|
||||
<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="flex-auto">
|
||||
<table class="gh-member-stripe-table">
|
||||
<tr class="gh-member-stripe-row">
|
||||
<td class="gh-member-stripe-label">Stripe customer ID</td>
|
||||
<td class="gh-member-stripe-data gh-member-stripe-id">
|
||||
<a href="https://dashboard.stripe.com/customers/{{customer.id}}" target="_blank" rel="noopener" data-tooltip="View on Stripe">
|
||||
{{customer.id}}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="gh-member-stripe-row">
|
||||
<td class="gh-member-stripe-label">Name</td>
|
||||
<td class="gh-member-stripe-data">
|
||||
{{#if customer.name}}
|
||||
{{customer.name}}
|
||||
{{else}}
|
||||
<span class="midgrey-d1">No name</span>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="gh-member-stripe-row">
|
||||
<td class="gh-member-stripe-label">Email</td>
|
||||
<td class="gh-member-stripe-data gh-member-stripe-email">
|
||||
{{#if customer.email}}
|
||||
{{customer.email}}
|
||||
{{else}}
|
||||
<span class="midgrey-d1">No email</span>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="gh-member-stripe-row">
|
||||
<td class="gh-member-stripe-label">Customer since</td>
|
||||
<td class="gh-member-stripe-data">
|
||||
{{#if customer.startDate}}
|
||||
{{customer.startDate}}
|
||||
{{else}}
|
||||
<span class="midgrey-d1">No data</span>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<div class="pa20">
|
||||
<p class="ma0 pa0 tc midgrey">Member doesn't have an active Stripe subscription</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</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 gh-members-comped">
|
||||
<div class="mr5">
|
||||
<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 gh-members-comped-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}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<GhMemberActivityFeed @emailRecipients={{this.member.emailRecipients}} />
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
{{!-- Chart title/filter graph --}}
|
||||
<div class="gh-members-chart-box">
|
||||
<div class="gh-members-chart-header">
|
||||
<h2 class="gh-members-chart-summary-heading">Total members</h2>
|
||||
<h2 class="gh-heading-xs">Total members</h2>
|
||||
<div class="view-actions">
|
||||
<div class="gh-contentfilter gh-contentfilter-menu gh-contentfilter-type">
|
||||
<PowerSelect
|
||||
|
|
@ -45,20 +45,20 @@
|
|||
{{!-- Summary --}}
|
||||
<div class="gh-content-box vertical gh-members-chart-summary">
|
||||
<section>
|
||||
<h3 class="gh-members-chart-summary-heading">Total Members</h3>
|
||||
<div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.total)}}</div>
|
||||
<h3 class="gh-heading-xs">Total Members</h3>
|
||||
<div class="gh-data-summary">{{if (not this.stats) "-" (format-number this.stats.total)}}</div>
|
||||
</section>
|
||||
<section>
|
||||
{{#if (eq this.selectedRange.days "all-time")}}
|
||||
<h3 class="gh-members-chart-summary-heading">All time signups</h3>
|
||||
<h3 class="gh-heading-xs">All time signups</h3>
|
||||
{{else}}
|
||||
<h3 class="gh-members-chart-summary-heading">Signed up in the last {{this.selectedRange.days}} days</h3>
|
||||
<h3 class="gh-heading-xs">Signed up in the last {{this.selectedRange.days}} days</h3>
|
||||
{{/if}}
|
||||
<div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.total_in_range)}}</div>
|
||||
<div class="gh-data-summary">{{if (not this.stats) "-" (format-number this.stats.total_in_range)}}</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3 class="gh-members-chart-summary-heading">Signed up today</h3>
|
||||
<div class="gh-members-chart-summary-data">{{if (not this.stats) "-" (format-number this.stats.new_today)}}</div>
|
||||
<h3 class="gh-heading-xs">Signed up today</h3>
|
||||
<div class="gh-data-summary">{{if (not this.stats) "-" (format-number this.stats.new_today)}}</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -18,7 +18,7 @@ export function countCharacters(params) {
|
|||
if (length > 180) {
|
||||
el.style.color = '#f05230';
|
||||
} else {
|
||||
el.style.color = '#738a94';
|
||||
el.style.color = '#45C32E';
|
||||
}
|
||||
|
||||
el.innerHTML = 200 - length;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
.ember-power-select-trigger[aria-expanded="true"],
|
||||
.ember-power-select-search input {
|
||||
outline: 0;
|
||||
border-color: color-mod(var(--whitegrey) a(70%) s(-10%));
|
||||
border-color: var(--input-border-color);
|
||||
}
|
||||
|
||||
.ember-power-select-dropdown {
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
z-index: 1000;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: 1px solid color-mod(var(--whitegrey) a(70%) s(-10%));
|
||||
border: var(--input-border);
|
||||
border-top: 0 none;
|
||||
background: #fff;
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
|
|
@ -187,7 +187,7 @@
|
|||
.ember-power-select-multiple-trigger {
|
||||
background: #fff;
|
||||
padding: 4px;
|
||||
border: rgb(214, 227, 235) 1px solid;
|
||||
border: var(--input-border);
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,12 @@
|
|||
--mainmenu-padding: var(--main-layout-area-padding);
|
||||
}
|
||||
|
||||
/* Utils */
|
||||
.width-25 { width: 25%; }
|
||||
.width-34 { width: 34%; }
|
||||
.width-50 { width: 50%; }
|
||||
.width-67 { width: 67%; }
|
||||
|
||||
/* Global Layout
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
|
@ -337,7 +343,7 @@
|
|||
color: color-mod(var(--middarkgrey) l(-10%));
|
||||
transition: none;
|
||||
font-weight: 400;
|
||||
padding: 8px var(--mainmenu-padding) 8px calc(var(--mainmenu-padding) + 7px);
|
||||
padding: 7px var(--mainmenu-padding) 7px calc(var(--mainmenu-padding) + 7px);
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
|
|
@ -943,10 +949,45 @@
|
|||
padding: 0 var(--main-layout-content-sidepadding);
|
||||
}
|
||||
|
||||
.gh-main-section-content.pt { padding-top: 10px; }
|
||||
.gh-main-section-content.pr { padding-right: 54px; }
|
||||
.gh-main-section-content.pb { padding-bottom: 10px; }
|
||||
.gh-main-section-content.pl { padding-left: 54px; }
|
||||
|
||||
.gh-main-white .gh-canvas-header {
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.gh-main-section {
|
||||
margin-bottom: 3vw;
|
||||
}
|
||||
|
||||
.gh-main-section-heading {
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: .2px;
|
||||
color: var(--black);
|
||||
border-bottom: 1px solid var(--whitegrey);
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.gh-main-section-heading.no-border {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.gh-main-section.no-heading {
|
||||
border-top: 1px solid var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-main-section.border-bottom {
|
||||
border-bottom: 1px solid var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-main-section.border-all {
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-canvas-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -239,20 +239,8 @@ p.gh-members-list-email {
|
|||
}
|
||||
|
||||
.gh-members-chart-summary-heading {
|
||||
font-size: 1.1rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.gh-members-chart-summary-data {
|
||||
font-size: 3.9rem;
|
||||
color: var(--black);
|
||||
line-height: 4.0rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gh-members-chart.black {
|
||||
|
|
@ -497,11 +485,35 @@ label[for="member-description"] + p {
|
|||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
.gh-member-detail-overview {
|
||||
padding: 32px 0 0;
|
||||
}
|
||||
|
||||
.gh-member-detail-overview h3 {
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-member-detail-overview p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.3rem;
|
||||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
.gh-member-detail-overview a,
|
||||
.gh-member-detail-overview a:hover {
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
textarea.gh-member-details-textarea {
|
||||
max-width: 100%;
|
||||
min-width: auto;
|
||||
min-height: 50px;
|
||||
height: 154px;
|
||||
height: 85px;
|
||||
}
|
||||
|
||||
.gh-member-info-icon {
|
||||
|
|
@ -598,6 +610,7 @@ textarea.gh-member-details-textarea {
|
|||
.gh-members-subscribed-checkbox,
|
||||
.gh-members-comped-checkbox {
|
||||
max-width: 100%;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.gh-new-member-avatar {
|
||||
|
|
@ -644,12 +657,6 @@ textarea.gh-member-details-textarea {
|
|||
color: color-mod(var(--blue) l(-7%) saturation(-10%));
|
||||
}
|
||||
|
||||
.gh-member-details,
|
||||
.gh-member-feed {
|
||||
float: left;
|
||||
width: 69%;
|
||||
}
|
||||
|
||||
.gh-member-internal-info,
|
||||
.gh-member-stripe {
|
||||
float: right;
|
||||
|
|
|
|||
|
|
@ -193,12 +193,17 @@
|
|||
font-size: 1.5rem;
|
||||
line-height: 1.15em;
|
||||
font-weight: 600;
|
||||
color: var(--darkgrey);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.gh-setting-title.m {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-setting-desc {
|
||||
line-height: 1.3em;
|
||||
color: var(--midgrey);
|
||||
color: var(--middarkgrey);
|
||||
letter-spacing: 0.3px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,10 +25,10 @@
|
|||
.gh-btn-grey span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 0 14px;
|
||||
height: 33px;
|
||||
padding: 0 14px 1px;
|
||||
height: 34px;
|
||||
font-size: 1.35rem;
|
||||
line-height: 33px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.2px;
|
||||
border-radius: 3px;
|
||||
|
|
@ -236,11 +236,6 @@ fieldset[disabled] .gh-btn {
|
|||
border: none;
|
||||
}
|
||||
|
||||
.gh-btn-white span {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.gh-btn-strong {
|
||||
border-color: color-mod(var(--midgrey) l(+25%));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
form label {
|
||||
display: block;
|
||||
color: var(--darkgrey);
|
||||
color: var(--black);
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
user-select: text;
|
||||
|
|
@ -67,9 +67,9 @@ input {
|
|||
|
||||
.form-group p {
|
||||
margin: 4px 0 0 0;
|
||||
color: var(--midgrey);
|
||||
color: var(--middarkgrey);
|
||||
font-size: 1.3rem;
|
||||
font-weight: 400;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.form-group p.green {
|
||||
|
|
@ -479,11 +479,10 @@ textarea {
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--whitegrey-l2);
|
||||
border: 1px solid color-mod(var(--lightgrey) l(-3%));
|
||||
background: var(--lightgrey);
|
||||
transition: .3s;
|
||||
width: 50px !important;
|
||||
height: 28px !important;
|
||||
width: 48px !important;
|
||||
height: 26px !important;
|
||||
border-radius: 999px;
|
||||
transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
||||
}
|
||||
|
|
@ -502,13 +501,12 @@ textarea {
|
|||
top: 2px !important;
|
||||
background-color: white;
|
||||
transition: .3s;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.1);
|
||||
border: 1px solid color-mod(var(--lightgrey) l(-3%));
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.15);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.for-switch input:checked + .input-toggle-component {
|
||||
background: var(--green);
|
||||
background: var(--black);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -157,7 +157,8 @@
|
|||
|
||||
/* Inputs */
|
||||
--input-bg-color: var(--white);
|
||||
--input-border: color-mod(var(--lightgrey) l(-5%) s(-10%)) 1px solid;
|
||||
--input-border-color: color-mod(var(--lightgrey) l(-5%) s(-10%));
|
||||
--input-border: var(--input-border-color) 1px solid;
|
||||
}
|
||||
|
||||
/* Colour classes
|
||||
|
|
@ -337,6 +338,23 @@ h6 {
|
|||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.gh-heading-xs {
|
||||
font-size: 1.1rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: .2px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.gh-data-summary {
|
||||
font-size: 3.9rem;
|
||||
line-height: 4rem;
|
||||
font-weight: 600;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
|
|
|
|||
Loading…
Reference in New Issue