mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-30 11:54:33 +03:00
540c50f331
refs https://github.com/TryGhost/Team/issues/627 This is the reworked Member detail screen for Custom Products and adds new functionality, or includes existing including: - List Products for a Member, and the associated Subscriptions - Allow cancelling/continuing said Subscriptions - Adding a Product to a Member with a zero-amount Price
262 lines
15 KiB
Handlebars
262 lines
15 KiB
Handlebars
<div class="gh-member-settings" ...attributes>
|
||
|
||
<section class="gh-main-section no-heading gh-member-detail-overview">
|
||
<div class="gh-main-section-block">
|
||
<div class="gh-main-section-content">
|
||
<div class="flex items-center">
|
||
{{#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-subheadline fw4 lh-zero tracked-1'}}
|
||
@containerClass="w20 h20 mr4 gh-member-detail-avatar"
|
||
/>
|
||
{{else}}
|
||
<div class="flex items-center justify-center br-100 mr4 gh-new-member-avatar">
|
||
<span class="gh-member-avatar-label f-subheadline fw4 lh-zero tracked-1">N</span>
|
||
</div>
|
||
{{/if}}
|
||
<div>
|
||
<h3>
|
||
{{or this.member.name this.member.email}}
|
||
{{#unless (or this.member.name this.member.email)}}
|
||
{{#if this.member.isNew}}
|
||
<span class="midgrey">New member</span>
|
||
{{/if}}
|
||
{{/unless}}
|
||
</h3>
|
||
<p>
|
||
{{#if (and this.member.name this.member.email)}}
|
||
<a href="mailto:{{this.member.email}}">{{this.member.email}}</a>
|
||
{{/if}}
|
||
</p>
|
||
{{#unless this.member.isNew}}
|
||
<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
|
||
{{else}}
|
||
{{or this.member.geolocation.country "Unknown location"}}
|
||
{{/if}}
|
||
{{else}}
|
||
Unknown location
|
||
{{/if}}
|
||
– Created on {{moment-format @member.createdAtUTC "D MMM YYYY"}}
|
||
</p>
|
||
{{/unless}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="gh-main-section columns-3">
|
||
<div class="gh-main-section-block span-2">
|
||
<div class="gh-main-section-content grey">
|
||
<div>
|
||
<div class="gh-cp-member-email-name">
|
||
<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">
|
||
<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>
|
||
|
||
<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>
|
||
|
||
<GhFormGroup @classNames="gh-members-subscribed-checkbox mb0">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<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">
|
||
<label class="switch" for="subscribed-checkbox">
|
||
<Input @checked={{this.member.subscribed}} @type="checkbox" @id="subscribed-checkbox"
|
||
@name="subscribed" data-test-checkbox="member-subscribed" />
|
||
<span class="input-toggle-component"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</GhFormGroup>
|
||
</div>
|
||
</div>
|
||
|
||
{{#if this.canShowStripeInfo}}
|
||
{{#if this.customer}}
|
||
<h4 class="gh-main-section-header small bn">Stripe info</h4>
|
||
<div class="gh-main-section-content grey">
|
||
<section class="gh-member-stripe-info flex flex-column flex-row-ns items-start justify-between">
|
||
<div class="flex items-start w-50">
|
||
<div class="flex-auto">
|
||
<table class="gh-member-stripe-table gh-cp-table">
|
||
<tr class="gh-member-stripe-row">
|
||
<td class="gh-member-stripe-label">Name:</td>
|
||
<td class="gh-member-stripe-data">
|
||
{{#if this.customer.name}}
|
||
{{this.customer.name}}
|
||
{{else}}
|
||
<span class="midgrey-l2">No name</span>
|
||
{{/if}}
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start w-50">
|
||
<div class="flex-auto">
|
||
<table class="gh-member-stripe-table gh-cp-table">
|
||
<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 this.customer.email}}
|
||
{{this.customer.email}}
|
||
{{else}}
|
||
<span class="midgrey-l2">No email</span>
|
||
{{/if}}
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<div>
|
||
<a href="https://dashboard.stripe.com/customers/{{customer.id}}" class="gh-cp-table-link" target="_blank" rel="noopener">
|
||
View on Stripe
|
||
</a>
|
||
</div>
|
||
</div>
|
||
{{/if}}
|
||
{{/if}}
|
||
|
||
<h4 class="gh-main-section-header small bn">Products</h4>
|
||
<div class="gh-main-section-content">
|
||
<ol class="gh-memberproduct-list gh-list">
|
||
<li class="gh-list-row header empty">
|
||
<div class="gh-list-header"></div>
|
||
</li>
|
||
{{#unless this.products}}
|
||
<li class="gh-list-row">
|
||
<div class="gh-list-data gh-cp-memberproduct-noproduct">
|
||
<div class="mb2">This member doesn't have any products.</div>
|
||
{{#unless this.member.isNew}}
|
||
<button type="button" class="gh-btn gh-btn-text green gh-btn-icon gh-btn-addproduct" {{action (toggle "showMemberProductModal" this)}}>
|
||
<span>{{svg-jar "add"}} Add product</span>
|
||
</button>
|
||
{{/unless}}
|
||
</div>
|
||
</li>
|
||
{{/unless}}
|
||
{{#each this.products as |product|}}
|
||
<li class="gh-list-row">
|
||
<div class="gh-list-data gh-cp-memberproduct-title">
|
||
<h3 class="gh-memberproduct-name">
|
||
{{product.name}}
|
||
</h3>
|
||
{{#each product.subscriptions as |sub|}}
|
||
<div class="gh-memberproduct-description gh-cp-memberproduct-showmore">
|
||
<input type="checkbox" id="show-more-{{sub.id}}" role="button">
|
||
<label for="show-more-{{sub.id}}">
|
||
{{svg-jar "arrow-right"}}
|
||
<span class="gh-cp-memberproduct-pricelabel">{{sub.price.nickname}}</span>
|
||
–
|
||
<span class="gh-cp-memberproduct-price">{{sub.price.currencySymbol}}{{sub.price.nonDecimalAmount}}/{{sub.price.interval}}</span>
|
||
–
|
||
{{#if sub.cancel_at_period_end}}
|
||
<span class="gh-cp-memberproduct-renewal">Cancels {{sub.validUntil}}</span>
|
||
<span class="gh-badge archived">Cancelled</span>
|
||
{{else}}
|
||
<span class="gh-cp-memberproduct-renewal">Renews {{sub.validUntil}}</span>
|
||
<span class="gh-badge active">Active</span>
|
||
{{/if}}
|
||
</label>
|
||
|
||
<div class="details">
|
||
<span>Created on {{sub.startDate}}</span>
|
||
<div class="actions">
|
||
<a href="https://dashboard.stripe.com/subscriptions/{{sub.id}}" target="_blank" rel="noopener">
|
||
View on Stripe
|
||
</a>
|
||
<span class="ml1 mr1 dib">–</span>
|
||
{{#if sub.cancel_at_period_end}}
|
||
<button class="gh-btn gh-btn-link gh-btn-text green" {{action "continueSubscription" sub.id}}>
|
||
<span>Continue subscription</span>
|
||
</button>
|
||
{{else}}
|
||
<button class="gh-btn gh-btn-link gh-btn-text red" {{action "cancelSubscription" sub.id}}>
|
||
<span>Cancel subscription</span>
|
||
</button>
|
||
{{/if}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{/each}}
|
||
</div>
|
||
</li>
|
||
{{/each}}
|
||
{{#if this.products}}
|
||
<tr class="gh-list-row gh-memberproduct-add-product">
|
||
<td colspan="2" class="gh-list-data">
|
||
<button type="button" class="gh-btn gh-btn-text green gh-btn-icon gh-btn-addproduct" {{action (toggle "showMemberProductModal" this)}}>
|
||
<span>{{svg-jar "add"}} Add product</span>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
{{/if}}
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
<div class="gh-main-section-block">
|
||
<div class="gh-main-section-content bordered">
|
||
<div class="gh-heading-xs">Emails received</div>
|
||
<div class="gh-data-summary gh-cp-data-summary">{{@member.emailCount}}</div>
|
||
<div class="gh-heading-xs">Emails opened</div>
|
||
<div class="gh-data-summary gh-cp-data-summary">{{@member.emailOpenedCount}}</div>
|
||
<div class="gh-heading-xs">Avg. open rate</div>
|
||
<div class="gh-data-summary gh-cp-data-summary">
|
||
{{#if (is-empty @member.emailOpenRate)}}
|
||
<span data-tooltip="Insufficient data available">–</span>
|
||
{{else}}
|
||
{{@member.emailOpenRate}}%
|
||
{{/if}}
|
||
</div>
|
||
</div>
|
||
|
||
<h4 class="gh-main-section-header small bn">Member activity</h4>
|
||
<div class="gh-main-section-content bordered">
|
||
<GhMemberActivityFeed @emailRecipients={{this.member.emailRecipients}} />
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
{{#if this.showMemberProductModal}}
|
||
<GhFullscreenModal @modifier="action wide member-product">
|
||
<ModalMemberProduct
|
||
@model={{this.member}}
|
||
@confirm={{this.addProduct}}
|
||
@closeModal={{this.closeMemberProductModal}} />
|
||
</GhFullscreenModal>
|
||
{{/if}} |