Ghost-Admin/app/components/gh-member-details.hbs

97 lines
4.8 KiB
Handlebars

<section class="gh-member-details" ...attributes>
<div class="flex flex-column mt4">
<div class="gh-member-details-identity">
{{#if (or @member.name @member.email)}}
<GhMemberAvatar
@member={{@member}}
@sizeClass={{if @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 fw5 lh-zero tracked-1">N</span>
</div>
{{/if}}
<div>
<h3>
{{or @member.name @member.email}}
{{#unless (or @member.name @member.email)}}
{{#if @member.isNew}}
<span class="midgrey">New member</span>
{{/if}}
{{/unless}}
</h3>
<p>
{{#if (and @member.name @member.email)}}
<a href="mailto:{{@member.email}}">{{@member.email}}</a>
{{/if}}
</p>
</div>
</div>
{{#unless @member.isNew}}
<div class="gh-member-details-meta">
<p>
{{svg-jar "pin"}}
{{#if @member.geolocation}}
{{#if (and (eq @member.geolocation.country_code "US") @member.geolocation.region)}}
{{@member.geolocation.region}}, US
{{else}}
{{or @member.geolocation.country "Unknown location"}}
{{/if}}
{{else}}
Unknown location
{{/if}}
</p>
<p>
{{svg-jar "member-add"}}
Created on {{moment-format (moment-site-tz @member.createdAtUTC) "D MMM YYYY"}}
</p>
<p class="gh-member-last-seen">
{{svg-jar "eye"}}
{{#if (not (is-empty @member.lastSeenAtUTC))}}
Last seen on {{moment-format (moment-site-tz @member.lastSeenAtUTC) "D MMM YYYY"}}
{{else}}
<span>Not seen yet</span>
{{/if}}
</p>
</div>
{{#if (and (not-eq this.settings.membersSignupAccess "none") (not-eq this.settings.editorDefaultEmailRecipients "disabled"))}}
<div class="gh-member-details-stats-container">
<h4 class="gh-main-section-header small bn">Engagement</h4>
{{#if (eq @member.emailCount 0)}}
<div class="gh-members-no-stats">
<p>
{{#if @member.name}}
We'll show {{first-name @member.name}}'s email stats here once they receive their first newsletter.
{{else}}
We'll show this member's email stats here once they receive their first newsletter.
{{/if}}
</p>
</div>
{{else}}
<div class="gh-member-details-stats">
<div class="gh-member-details-stat">
<p>Emails received</p>
<div class="gh-data-summary gh-cp-data-summary">{{@member.emailCount}}</div>
</div>
<div class="gh-member-details-stat">
<p>Emails opened</p>
<div class="gh-data-summary gh-cp-data-summary">{{@member.emailOpenedCount}}</div>
</div>
<div class="gh-member-details-stat open-rate">
<p>Average open rate</p>
<div class="gh-data-summary gh-cp-data-summary {{if (is-empty @member.emailOpenRate) "gh-data-unavailable-label"}}">
{{#if (is-empty @member.emailOpenRate)}}
This metric is calculated once a member has received 5 newsletters.
{{else}}
{{@member.emailOpenRate}}<span>%</span>
{{/if}}
</div>
</div>
</div>
{{/if}}
</div>
{{/if}}
{{/unless}}
</div>
</section>