mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-30 11:54:33 +03:00
abe7857e18
- since there can be different Stripe customers for each subscription, it makes more sense to place the customer link together with it
214 lines
12 KiB
Handlebars
214 lines
12 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>
|
||
|
||
<h4 class="gh-main-section-header small bn">Products</h4>
|
||
|
||
{{#unless this.products}}
|
||
<div class="gh-main-section-content bordered">
|
||
<div class="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>
|
||
</div>
|
||
{{/unless}}
|
||
|
||
{{#each this.products as |product|}}
|
||
<div class="gh-main-section-content bordered">
|
||
<div class="gh-cp-memberproduct">
|
||
<h3 class="gh-memberproduct-name">
|
||
{{product.name}}
|
||
</h3>
|
||
{{#each product.subscriptions as |sub|}}
|
||
<div class="gh-memberproduct-subscription">
|
||
<div>
|
||
<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}}
|
||
</div>
|
||
<div>Created on {{sub.startDate}}</div>
|
||
|
||
<span class="action-menu">
|
||
<GhDropdownButton @dropdownName="subscription-menu-{{sub.id}}" @classNames="gh-btn gh-btn-outline gh-btn-icon only-has-icon" @title="User Actions">
|
||
<span>
|
||
{{svg-jar "dotdotdot"}}
|
||
<span class="hidden">Subscription menu</span>
|
||
</span>
|
||
</GhDropdownButton>
|
||
<GhDropdown @name="subscription-menu-{{sub.id}}" @tagName="ul" @classNames="product-actions-menu dropdown-menu dropdown-align-right">
|
||
<li>
|
||
<a href="https://dashboard.stripe.com/customers/{{sub.customer.id}}" target="_blank" rel="noopener">
|
||
View Stripe customer
|
||
</a>
|
||
</li>
|
||
<li class="divider"></li>
|
||
<li>
|
||
<a href="https://dashboard.stripe.com/subscriptions/{{sub.id}}" target="_blank" rel="noopener">
|
||
View Stripe subscription
|
||
</a>
|
||
</li>
|
||
<li>
|
||
{{#if sub.cancel_at_period_end}}
|
||
<button {{action "continueSubscription" sub.id}}>
|
||
<span>Continue subscription</span>
|
||
</button>
|
||
{{else}}
|
||
<button {{action "cancelSubscription" sub.id}}>
|
||
<span class="red">Cancel subscription</span>
|
||
</button>
|
||
{{/if}}
|
||
</li>
|
||
</GhDropdown>
|
||
</span>
|
||
</div>
|
||
{{/each}}
|
||
</div>
|
||
</div>
|
||
{{/each}}
|
||
</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}} |