mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-01 05:50:35 +03:00
848b2d82a1
no issue This pull request removes the `suppressionList` feature flag and all its dependencies from the codebase. It makes the suppression list feature the default and consistent behavior for all email events and newsletters. It simplifies the UI, logic, and data related to email events and newsletters. It affects several files in the `ghost/admin/app`, `ghost/core/core`, and `ghost/members-api` directories.
488 lines
33 KiB
Handlebars
488 lines
33 KiB
Handlebars
<div class="gh-member-settings" ...attributes {{did-insert this.setup}}>
|
||
<section class="gh-main-section columns-3">
|
||
<GhMemberDetails @member={{@member}} />
|
||
|
||
<div class="gh-main-section-block span-2">
|
||
<div class="gh-main-section-content grey">
|
||
<div>
|
||
<div class="gh-cp-member-email-name">
|
||
<GhFormGroup class="max-width" @errors={{this.member.errors}} @hasValidated={{this.member.hasValidated}} @property="name">
|
||
<label for="member-name">Name</label>
|
||
<GhTextInput
|
||
@id="member-name"
|
||
@name="name"
|
||
@value={{this.scratchMember.name}}
|
||
@tabindex="1"
|
||
@shouldFocus="{{if this.member.isNew true}}"
|
||
@focus-out={{fn this.setProperty "name" this.scratchMember.name}}
|
||
data-test-input="member-name"
|
||
/>
|
||
<GhErrorMessage @errors={{this.member.errors}} @property="name" />
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup class="max-width" @errors={{this.member.errors}} @hasValidated={{this.member.hasValidated}} @property="email">
|
||
<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={{fn this.setProperty "email" this.scratchMember.email}}
|
||
data-test-input="member-email"
|
||
/>
|
||
<GhErrorMessage @errors={{this.member.errors}} @property="email" />
|
||
</GhFormGroup>
|
||
</div>
|
||
|
||
<GhFormGroup class="gh-member-labels">
|
||
<label for="label-input">Labels</label>
|
||
<GhMemberLabelInput
|
||
@onChange={{this.setLabels}}
|
||
@allowEdit={{true}}
|
||
@onLabelEdit={{@onLabelEdit}}
|
||
@labels={{this.member.labels}}
|
||
@triggerId="label-input"
|
||
data-test-input=""
|
||
/>
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @errors={{this.member.errors}} @hasValidated={{this.member.hasValidated}} @property="note" class="mb0 gh-member-note">
|
||
<label for="member-note">Note <span class="midgrey-d1 fw4">(not visible to member)</span></label>
|
||
<GhTextarea
|
||
@id="member-note"
|
||
@name="note"
|
||
@class="gh-member-details-textarea"
|
||
@tabindex="3"
|
||
@value={{this.scratchMember.note}}
|
||
{{on "input" this.updateProperty}}
|
||
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.canShowMultipleNewsletters}}
|
||
<Member::NewsletterPreference
|
||
@member={{this.member}}
|
||
@newsletters={{this.newslettersList}}
|
||
@setMemberNewsletters={{this.setMemberNewsletters}}
|
||
/>
|
||
{{/if}}
|
||
|
||
{{#if this.membersUtils.paidMembersEnabled}}
|
||
<h4 class="gh-main-section-header small bn">Subscriptions</h4>
|
||
|
||
{{#unless this.tiers}}
|
||
<div class="gh-main-section-content grey">
|
||
<div class="gh-cp-membertier-notier">
|
||
{{#unless this.isCreatingComplimentary}}
|
||
<div class="gh-members-no-data gh-members-no-subs">
|
||
<span class="lightgrey">{{svg-jar "no-data-subscription"}}</span>
|
||
<h4>No subscriptions</h4>
|
||
</div>
|
||
{{/unless}}
|
||
|
||
{{#if this.isAddComplimentaryAllowed}}
|
||
{{#if this.isCreatingComplimentary}}
|
||
<GhLoadingSpinner />
|
||
{{else}}
|
||
<button
|
||
type="button"
|
||
class="gh-btn gh-btn-text green gh-btn-icon gh-btn-addtier"
|
||
{{on "click" (toggle-action "showMemberTierModal" this)}}
|
||
data-test-button="add-complimentary"
|
||
>
|
||
<span>{{svg-jar "plus"}} Add complimentary subscription</span>
|
||
</button>
|
||
{{/if}}
|
||
{{/if}}
|
||
</div>
|
||
</div>
|
||
{{/unless}}
|
||
|
||
{{#each this.tiers as |tier|}}
|
||
<div class="gh-main-section-content grey gh-member-tier-container" data-test-tier={{tier.id}}>
|
||
{{#if (feature "sourceAttribution")}}
|
||
<div class="gh-main-content-card gh-cp-membertier gh-cp-membertier-attribution gh-membertier-subscription {{if (gt tier.subscriptions.length 1) "multiple-subs" ""}}">
|
||
{{#each tier.subscriptions as |sub index|}}
|
||
<div class="gh-tier-card-header flex items-center">
|
||
<div class="gh-tier-card-price">
|
||
<div class="flex items-start">
|
||
<span class="currency-symbol">{{sub.price.currencySymbol}}</span>
|
||
<span class="amount">{{sub.price.nonDecimalAmount}}</span>
|
||
</div>
|
||
<div class="period">{{if (eq sub.price.interval "year") "yearly" "monthly"}}</div>
|
||
</div>
|
||
<div style="margin-left: 16px; flex-grow: 1;">
|
||
<h3 class="gh-membertier-name" data-test-text="tier-name" style="align-items:center !important; justify-content:flex-start !important;">
|
||
{{tier.name}}
|
||
{{#if (eq sub.status "canceled")}}
|
||
<span class="gh-badge archived" data-test-text="member-subscription-status">Cancelled</span>
|
||
{{else if sub.cancel_at_period_end}}
|
||
<span class="gh-badge archived" data-test-text="member-subscription-status">Cancelled</span>
|
||
{{else if sub.compExpiry}}
|
||
<span class="gh-badge active" data-test-text="member-subscription-status">Active</span>
|
||
{{else if sub.trialUntil}}
|
||
<span class="gh-badge active" data-test-text="member-subscription-status">Active</span>
|
||
{{else}}
|
||
<span class="gh-badge active" data-test-text="member-subscription-status">Active</span>
|
||
{{/if}}
|
||
{{#if (gt tier.subscriptions.length 1)}}
|
||
<span class="gh-membertier-subcount">{{tier.subscriptions.length}} subscriptions</span>
|
||
{{/if}}
|
||
</h3>
|
||
<div>
|
||
{{#if sub.trialUntil}}
|
||
<span class="gh-cp-membertier-pricelabel">Free trial </span>
|
||
{{else}}
|
||
{{#if (or (eq sub.price.nickname "Monthly") (eq sub.price.nickname "Yearly"))}}
|
||
{{else}}
|
||
<span class="gh-cp-membertier-pricelabel">{{sub.price.nickname}}</span><span class="gh-cp-membertier-renewal"> –</span>
|
||
{{/if}}
|
||
{{/if}}
|
||
|
||
{{#if (eq sub.status "canceled")}}
|
||
<span class="gh-cp-membertier-renewal">Ended {{sub.validUntil}}</span>
|
||
{{else if sub.cancel_at_period_end}}
|
||
<span class="gh-cp-membertier-renewal">Has access until {{sub.validUntil}}</span>
|
||
{{else if sub.compExpiry}}
|
||
<span class="gh-cp-membertier-renewal">Expires {{sub.compExpiry}}</span>
|
||
{{else if sub.trialUntil}}
|
||
<span class="gh-cp-membertier-renewal">Ends {{sub.trialUntil}}</span>
|
||
{{else}}
|
||
<span class="gh-cp-membertier-renewal">Renews {{sub.validUntil}}</span>
|
||
{{/if}}
|
||
</div>
|
||
<Member::SubscriptionDetailBox @sub={{sub}} @index={{index}} />
|
||
</div>
|
||
{{#if sub.isComplimentary}}
|
||
<span class="action-menu">
|
||
<GhDropdownButton
|
||
@dropdownName="subscription-menu-complimentary"
|
||
@classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only"
|
||
@title="Actions"
|
||
data-test-button="subscription-actions"
|
||
>
|
||
<span>
|
||
{{svg-jar "dotdotdot"}}
|
||
<span class="hidden">Subscription menu</span>
|
||
</span>
|
||
</GhDropdownButton>
|
||
<GhDropdown
|
||
@name="subscription-menu-complimentary"
|
||
@tagName="ul"
|
||
@classNames="tier-actions-menu dropdown-menu dropdown-align-right"
|
||
>
|
||
<li>
|
||
<button
|
||
type="button"
|
||
{{on "click" (fn this.removeComplimentary (or tier.id tier.tier_id))}}
|
||
data-test-button="remove-complimentary"
|
||
>
|
||
<span class="red">Remove complimentary subscription</span>
|
||
</button>
|
||
</li>
|
||
</GhDropdown>
|
||
</span>
|
||
{{else}}
|
||
<span class="action-menu">
|
||
<GhDropdownButton @dropdownName="subscription-menu-{{sub.id}}" @classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only" @title="Actions">
|
||
<span>
|
||
{{svg-jar "dotdotdot"}}
|
||
<span class="hidden">Subscription menu</span>
|
||
</span>
|
||
</GhDropdownButton>
|
||
<GhDropdown @name="subscription-menu-{{sub.id}}" @tagName="ul" @classNames="tier-actions-menu dropdown-menu dropdown-align-right">
|
||
<li>
|
||
<a href="https://dashboard.stripe.com/customers/{{sub.customer.id}}" target="_blank" rel="noopener noreferrer">
|
||
View Stripe customer
|
||
</a>
|
||
</li>
|
||
<li class="divider"></li>
|
||
<li>
|
||
<a href="https://dashboard.stripe.com/subscriptions/{{sub.id}}" target="_blank" rel="noopener noreferrer">
|
||
View Stripe subscription
|
||
</a>
|
||
</li>
|
||
<li>
|
||
{{#if (not-eq sub.status "canceled")}}
|
||
{{#if sub.cancel_at_period_end}}
|
||
<button type="button" {{on "click" (fn this.continueSubscription sub.id)}}>
|
||
<span>Continue subscription</span>
|
||
</button>
|
||
{{else}}
|
||
<button type="button" {{on "click" (fn this.cancelSubscription sub.id)}}>
|
||
<span class="red">Cancel subscription</span>
|
||
</button>
|
||
{{/if}}
|
||
{{/if}}
|
||
</li>
|
||
</GhDropdown>
|
||
</span>
|
||
{{/if}}
|
||
</div>
|
||
{{/each}}
|
||
|
||
{{#if (eq tier.subscriptions.length 0)}}
|
||
<div class="gh-membertier-subscription">
|
||
<div>
|
||
<div>
|
||
<span class="gh-cp-membertier-pricelabel">Complimentary</span>
|
||
<span class="gh-badge active">Active</span>
|
||
</div>
|
||
<div class="gh-membertier-created">Created on</div>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="gh-tier-card-price">
|
||
<div class="flex items-start">
|
||
<span class="currency-symbol">$</span>
|
||
<span class="amount">0</span>
|
||
</div>
|
||
<div class="period">yearly</div>
|
||
</div>
|
||
<span class="action-menu">
|
||
<GhDropdownButton @dropdownName="subscription-menu-complimentary" @classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only" @title="Actions">
|
||
<span>
|
||
{{svg-jar "dotdotdot"}}
|
||
<span class="hidden">Subscription menu</span>
|
||
</span>
|
||
</GhDropdownButton>
|
||
<GhDropdown @name="subscription-menu-complimentary" @tagName="ul" @classNames="tier-actions-menu dropdown-menu dropdown-align-right">
|
||
<li>
|
||
<button type="button" {{on "click" (fn this.removeComplimentary tier.id)}}>
|
||
<span class="red">Remove complimentary subscription</span>
|
||
</button>
|
||
</li>
|
||
</GhDropdown>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
{{/if}}
|
||
</div>
|
||
{{else}}
|
||
<div class="gh-main-content-card gh-cp-membertier {{if (gt tier.subscriptions.length 1) "multiple-subs" ""}}">
|
||
<h3 class="gh-membertier-name" data-test-text="tier-name">
|
||
{{tier.name}}
|
||
{{#if (gt tier.subscriptions.length 1)}}
|
||
<span class="gh-membertier-subcount">{{tier.subscriptions.length}} subscriptions</span>
|
||
{{/if}}
|
||
</h3>
|
||
|
||
{{#each tier.subscriptions as |sub index|}}
|
||
<div class="gh-membertier-subscription" data-test-subscription={{index}}>
|
||
<div class="gh-membertier-details-container">
|
||
<div>
|
||
{{#if sub.trialUntil}}
|
||
<span class="gh-cp-membertier-pricelabel">Free trial</span>
|
||
{{else}}
|
||
<span class="gh-cp-membertier-pricelabel">{{sub.price.nickname}}</span>
|
||
{{/if}}
|
||
|
||
–
|
||
{{#if (eq sub.status "canceled")}}
|
||
<span class="gh-cp-membertier-renewal">Ended {{sub.validUntil}}</span>
|
||
<span class="gh-badge archived" data-test-text="member-subscription-status">Cancelled</span>
|
||
{{else if sub.cancel_at_period_end}}
|
||
<span class="gh-cp-membertier-renewal">Has access until {{sub.validUntil}}</span>
|
||
<span class="gh-badge archived" data-test-text="member-subscription-status">Cancelled</span>
|
||
{{else if sub.compExpiry}}
|
||
<span class="gh-cp-membertier-renewal">Expires {{sub.compExpiry}}</span>
|
||
<span class="gh-badge active" data-test-text="member-subscription-status">Active</span>
|
||
{{else if sub.trialUntil}}
|
||
<span class="gh-cp-membertier-renewal">Ends {{sub.trialUntil}}</span>
|
||
<span class="gh-badge active" data-test-text="member-subscription-status">Active</span>
|
||
{{else}}
|
||
<span class="gh-cp-membertier-renewal">Renews {{sub.validUntil}}</span>
|
||
<span class="gh-badge active" data-test-text="member-subscription-status">Active</span>
|
||
{{/if}}
|
||
</div>
|
||
{{#if sub.cancellationReason}}
|
||
<div class="gh-membertier-cancelreason"><span class="fw6">Cancellation reason:</span> {{sub.cancellationReason}}</div>
|
||
{{/if}}
|
||
{{#if sub.offer}}
|
||
{{#if (eq sub.offer.type "trial")}}
|
||
<div>
|
||
<span class="gh-cp-membertier-pricelabel"> {{sub.offer.name}} </span>
|
||
offer
|
||
({{sub.offer.amount}} days free)
|
||
</div>
|
||
{{else}}
|
||
<div>
|
||
<span class="gh-cp-membertier-pricelabel"> {{sub.offer.name}} </span>
|
||
offer
|
||
{{#if (eq sub.offer.type 'fixed')}}
|
||
({{currency-symbol sub.offer.currency}}{{gh-price-amount sub.offer.amount}} off)
|
||
{{else}}
|
||
({{sub.offer.amount}}% off)
|
||
{{/if}}
|
||
applied to subscription
|
||
</div>
|
||
{{/if}}
|
||
{{/if}}
|
||
<div class="gh-membertier-details">
|
||
<span class="gh-membertier-created">Created on {{sub.startDate}}</span>
|
||
{{#if (and sub.attribution sub.attribution.url sub.attribution.title) }}
|
||
<span class="gh-membertier-separator">·</span>
|
||
<span class="gh-membertier-started">Subscribed on <a href="{{sub.attribution.url}}" target="_blank" rel="noopener noreferrer">{{ sub.attribution.title }}</a></span>
|
||
{{/if}}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gh-membertier-price-container">
|
||
<div class="gh-tier-card-price">
|
||
<div class="flex items-start">
|
||
<span class="currency-symbol">{{sub.price.currencySymbol}}</span>
|
||
<span class="amount">{{sub.price.nonDecimalAmount}}</span>
|
||
</div>
|
||
<div class="period">{{if (eq sub.price.interval "year") "yearly" "monthly"}}</div>
|
||
</div>
|
||
|
||
{{#if sub.isComplimentary}}
|
||
<span class="action-menu">
|
||
<GhDropdownButton
|
||
@dropdownName="subscription-menu-complimentary"
|
||
@classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only"
|
||
@title="Actions"
|
||
data-test-button="subscription-actions"
|
||
>
|
||
<span>
|
||
{{svg-jar "dotdotdot"}}
|
||
<span class="hidden">Subscription menu</span>
|
||
</span>
|
||
</GhDropdownButton>
|
||
<GhDropdown
|
||
@name="subscription-menu-complimentary"
|
||
@tagName="ul"
|
||
@classNames="tier-actions-menu dropdown-menu dropdown-align-right"
|
||
>
|
||
<li>
|
||
<button
|
||
type="button"
|
||
{{on "click" (fn this.removeComplimentary (or tier.id tier.tier_id))}}
|
||
data-test-button="remove-complimentary"
|
||
>
|
||
<span class="red">Remove complimentary subscription</span>
|
||
</button>
|
||
</li>
|
||
</GhDropdown>
|
||
</span>
|
||
{{else}}
|
||
<span class="action-menu">
|
||
<GhDropdownButton @dropdownName="subscription-menu-{{sub.id}}" @classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only" @title="Actions">
|
||
<span>
|
||
{{svg-jar "dotdotdot"}}
|
||
<span class="hidden">Subscription menu</span>
|
||
</span>
|
||
</GhDropdownButton>
|
||
<GhDropdown @name="subscription-menu-{{sub.id}}" @tagName="ul" @classNames="tier-actions-menu dropdown-menu dropdown-align-right">
|
||
<li>
|
||
<a href="https://dashboard.stripe.com/customers/{{sub.customer.id}}" target="_blank" rel="noopener noreferrer">
|
||
View Stripe customer
|
||
</a>
|
||
</li>
|
||
<li class="divider"></li>
|
||
<li>
|
||
<a href="https://dashboard.stripe.com/subscriptions/{{sub.id}}" target="_blank" rel="noopener noreferrer">
|
||
View Stripe subscription
|
||
</a>
|
||
</li>
|
||
<li>
|
||
{{#if (not-eq sub.status "canceled")}}
|
||
{{#if sub.cancel_at_period_end}}
|
||
<button type="button" {{on "click" (fn this.continueSubscription sub.id)}}>
|
||
<span>Continue subscription</span>
|
||
</button>
|
||
{{else}}
|
||
<button type="button" {{on "click" (fn this.cancelSubscription sub.id)}}>
|
||
<span class="red">Cancel subscription</span>
|
||
</button>
|
||
{{/if}}
|
||
{{/if}}
|
||
</li>
|
||
</GhDropdown>
|
||
</span>
|
||
{{/if}}
|
||
</div>
|
||
</div>
|
||
{{/each}}
|
||
|
||
{{#if (eq tier.subscriptions.length 0)}}
|
||
<div class="gh-membertier-subscription">
|
||
<div>
|
||
<div>
|
||
<span class="gh-cp-membertier-pricelabel">Complimentary</span>
|
||
<span class="gh-badge active">Active</span>
|
||
</div>
|
||
<div class="gh-membertier-created">Created on</div>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="gh-tier-card-price">
|
||
<div class="flex items-start">
|
||
<span class="currency-symbol">$</span>
|
||
<span class="amount">0</span>
|
||
</div>
|
||
<div class="period">yearly</div>
|
||
</div>
|
||
<span class="action-menu">
|
||
<GhDropdownButton @dropdownName="subscription-menu-complimentary" @classNames="gh-btn gh-btn-outline gh-btn-icon fill gh-btn-subscription-action icon-only" @title="Actions">
|
||
<span>
|
||
{{svg-jar "dotdotdot"}}
|
||
<span class="hidden">Subscription menu</span>
|
||
</span>
|
||
</GhDropdownButton>
|
||
<GhDropdown @name="subscription-menu-complimentary" @tagName="ul" @classNames="tier-actions-menu dropdown-menu dropdown-align-right">
|
||
<li>
|
||
<button type="button" {{on "click" (fn this.removeComplimentary tier.id)}}>
|
||
<span class="red">Remove complimentary subscription</span>
|
||
</button>
|
||
</li>
|
||
</GhDropdown>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
{{/if}}
|
||
</div>
|
||
{{/if}}
|
||
</div>
|
||
{{/each}}
|
||
|
||
{{#if (and this.tiers this.isAddComplimentaryAllowed)}}
|
||
<div class="gh-membertier-list-footer {{if this.isCreatingComplimentary "min-height" ""}}">
|
||
{{#if this.isCreatingComplimentary}}
|
||
<GhLoadingSpinner />
|
||
{{else}}
|
||
<button
|
||
type="button"
|
||
class="gh-btn gh-btn-text green gh-btn-icon gh-btn-addtier"
|
||
{{on "click" (toggle-action "showMemberTierModal" this)}}
|
||
data-test-button="add-complimentary"
|
||
>
|
||
<span>{{svg-jar "plus"}} Add complimentary subscription</span>
|
||
</button>
|
||
{{/if}}
|
||
</div>
|
||
{{/if}}
|
||
{{/if}}
|
||
|
||
<Member::ActivityFeed @member={{this.member}} />
|
||
</div>
|
||
|
||
</section>
|
||
|
||
</div>
|
||
|
||
{{#if this.showMemberTierModal}}
|
||
<GhFullscreenModal @modifier="action wide member-tier">
|
||
<ModalMemberTier
|
||
@model={{this.member}}
|
||
@confirm={{this.addTier}}
|
||
@closeModal={{this.closeMemberTierModal}} />
|
||
</GhFullscreenModal>
|
||
{{/if}}
|