Ghost/ghost/admin/app/components/gh-member-details.hbs
Sanne de Vries 1306921cac 🎨 Updated Member page layout (#2271)
No issue

- Changed the Member details page to be more scalable and flexible, depending on whether creators are using subscriptions, emails, and stats.

* Hidden email stats on member detail page when subscriptions are off
* Hid subscription box on member details page when Stripe is not connected
* Updated copy and layout of member details page
* Updated old activity feed styles on member page
* Fixed padding issue for empty activity feed
* Fixed current and new activity feed
* Added Last seen to member details page behind feature flag
* Updated lint todo file
* Fixed spacing issue in member details
2022-03-01 15:57:57 +01:00

99 lines
4.9 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 @member.createdAtUTC "D MMM YYYY"}}
</p>
{{#if (feature "membersLastSeenFilter")}}
<p class="gh-member-last-seen">
{{svg-jar "eye"}}
{{#if (not (is-empty @member.lastSeenAtUTC))}}
Last seen on {{moment-format @member.lastSeenAtUTC "D MMM YYYY"}}
{{else}}
<span>Not seen yet</span>
{{/if}}
</p>
{{/if}}
</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>