mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
Created labs versions of members-email settings code
refs https://github.com/TryGhost/Team/issues/1441 - duplicated route/controller/template and component to `-labs` versions so larger changes and refactors can be made without affecting the GA code - added redirect for `/settings/members-email -> /settings/members-email-labs` when `multipleNewsletters` flag is enabled - cleaned up multiple-newsletters related code from the non-labs component
This commit is contained in:
Kevin Ansfield
parent
3e4c8fb429
commit
d6487d3630
237
ghost/admin/app/components/settings/members-email-labs.hbs
Normal file
237
ghost/admin/app/components/settings/members-email-labs.hbs
Normal file
@ -0,0 +1,237 @@
|
||||
<section class="gh-main-section">
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Enable newsletter sending</h4>
|
||||
<p class="gh-expandable-description">Newsletter features are active, posts can be sent by email</p>
|
||||
</div>
|
||||
<div class="for-switch">
|
||||
<label class="switch" for="email-newsletter-enabled" {{on "click" (action "toggleEmailNewsletterEnabled")}}>
|
||||
<input type="checkbox" checked={{this.emailNewsletterEnabled}} class="gh-input" {{on "click" (action "toggleEmailNewsletterEnabled")}} name="email-newsletter-enabled" data-test-checkbox="email-newsletter-enabled">
|
||||
<span class="input-toggle-component mt1"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{#if this.emailNewsletterEnabled}}
|
||||
<div class="gh-main-section gh-newsletters">
|
||||
<div class="flex justify-between items-center">
|
||||
<h4 class="gh-main-section-header small bn">Newsletters</h4>
|
||||
{{#if (not-eq this.archivedNewsletterCount 0)}}
|
||||
<div>
|
||||
<div class="gh-contentfilter-menu gh-contentfilter-type {{if (not (eq this.selectedType.value "active")) "gh-contentfilter-selected"}}" data-test-type-select="true">
|
||||
{{!-- <PowerSelect
|
||||
@selected={{this.selectedType}}
|
||||
@options={{this.availableTypes}}
|
||||
@searchEnabled={{false}}
|
||||
@onChange={{this.onTypeChange}}
|
||||
@triggerComponent="gh-power-select/trigger"
|
||||
@triggerClass="gh-contentfilter-menu-trigger gh-contentfilter-menu-trigger-tiers"
|
||||
@dropdownClass="gh-contentfilter-menu-dropdown"
|
||||
@matchTriggerWidth={{false}}
|
||||
as |type|
|
||||
>
|
||||
{{#if type.name}}{{type.name}}{{else}}<span class="red">Unknown type</span>{{/if}}
|
||||
</PowerSelect> --}}
|
||||
<span>Active</span>
|
||||
<span>{{svg-jar "arrow-down-small" class="w2"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<section class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
{{#each this.newsletters.newsletters as |newsletter|}}
|
||||
{{#if (eq newsletter.status "active")}}
|
||||
<div class="gh-main-content-card gh-newsletter-card {{if (gt this.activeNewsletterCount 1) "multiple"}}">
|
||||
{{svg-jar "grab" class="grab-newsletter"}}
|
||||
<div class="gh-newsletter-card-block title-block">
|
||||
<h3 class="gh-newsletter-card-name">
|
||||
{{newsletter.name}}
|
||||
</h3>
|
||||
<p class="gh-newsletter-card-description">
|
||||
{{newsletter.description}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="gh-newsletter-card-block stats-block {{if (gt this.activeNewsletterCount 1) "multiple"}}">
|
||||
<div>
|
||||
<h3 class="gh-newsletter-card-name">{{newsletter.members.total}}</h3>
|
||||
<p class="gh-newsletter-card-description">Subscribers</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="gh-newsletter-card-name">{{newsletter.posts.total}}</h3>
|
||||
<p class="gh-newsletter-card-description">Posts sent</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-newsletter-card-block cta-block">
|
||||
{{#if (eq this.activeNewsletterCount 1)}}
|
||||
<button class="gh-btn gh-btn-green" type="button" {{on "click" @toggleEmailDesignSettings}}><span>Customize →</span></button>
|
||||
{{else}}
|
||||
<span class="dropdown">
|
||||
<GhDropdownButton
|
||||
@dropdownName="newsletter-actions-menu-newsletter-{{newsletter.id}}"
|
||||
@classNames="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-actions-button icon-only"
|
||||
>
|
||||
<span>
|
||||
{{svg-jar "dotdotdot"}}
|
||||
<span class="hidden">Actions</span>
|
||||
</span>
|
||||
</GhDropdownButton>
|
||||
<GhDropdown
|
||||
@name="newsletter-actions-menu-newsletter-{{newsletter.id}}"
|
||||
@tagName="ul"
|
||||
@classNames="gh-newsletter-actions-menu dropdown-menu dropdown-triangle-top-right"
|
||||
>
|
||||
<li>
|
||||
<button class="mr2" type="button" {{on "click" @toggleEmailDesignSettings}}>
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="mr2" type="button" {{on "click" (fn this.archiveNewsletter newsletter.id)}}>
|
||||
<span>Archive</span>
|
||||
</button>
|
||||
</li>
|
||||
</GhDropdown>
|
||||
</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</section>
|
||||
<button type="button" class="gh-add-newsletter" {{on "click" @toggleEmailDesignSettings}} {{on "click" this.addNewsletter}}>{{svg-jar "add-stroke"}}Add newsletter</button>
|
||||
</div>
|
||||
|
||||
<section class="gh-main-section">
|
||||
<h4 class="gh-main-section-header small bn">General settings</h4>
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Default newsletter recipients</h4>
|
||||
<p class="gh-expandable-description">When you publish new content, who do you usually want to send it to?</p>
|
||||
</div>
|
||||
<button type="button" class="gh-btn" {{action (toggle "defaultRecipientsOpen" this)}} data-test-toggle-membersemail>
|
||||
<span>{{if this.defaultRecipientsOpen "Close" "Expand"}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if this.defaultRecipientsOpen}}
|
||||
{{#if (gt this.activeNewsletterCount 1)}}
|
||||
<div class="form-group">
|
||||
<label class="fw6 f8">Default newsletter</label>
|
||||
<div class="gh-input"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="fw6 f8">Default member selection</label>
|
||||
<div class="gh-setting-richdd-container gh-setting-rich-dropdown">
|
||||
<Settings::MembersEmail::DefaultRecipientsSelect
|
||||
@recipients={{this.recipientsSelectValue}}
|
||||
@segment={{this.settings.editorDefaultEmailRecipientsFilter}}
|
||||
@onRecipientsChange={{action "setDefaultEmailRecipients"}}
|
||||
@onSegmentChange={{action "setDefaultEmailRecipientsFilter"}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="gh-setting-richdd-container gh-setting-rich-dropdown form-group">
|
||||
<Settings::MembersEmail::DefaultRecipientsSelect
|
||||
@recipients={{this.recipientsSelectValue}}
|
||||
@segment={{this.settings.editorDefaultEmailRecipientsFilter}}
|
||||
@onRecipientsChange={{action "setDefaultEmailRecipients"}}
|
||||
@onSegmentChange={{action "setDefaultEmailRecipientsFilter"}}
|
||||
/>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#unless this.config.mailgunIsConfigured}}
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Mailgun configuration</h4>
|
||||
<p class="gh-expandable-description">The Mailgun API is used for bulk email newsletter delivery. <a href="https://ghost.org/docs/faq/mailgun-newsletters/" target="_blank" rel="noopener noreferrer">Why is this required?</a></p>
|
||||
</div>
|
||||
<button type="button" class="gh-btn" {{action (toggle "membersEmailOpen" this)}} data-test-toggle-membersemail>
|
||||
<span>{{if this.membersEmailOpen "Close" "Expand"}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if this.membersEmailOpen}}
|
||||
<div class="flex flex-column flex">
|
||||
<GhFormGroup>
|
||||
<div class="flex items-center">
|
||||
<GhFormGroup @class="gh-mailgun-region no-margin">
|
||||
<label class="fw6 f8">Mailgun region</label>
|
||||
<div class="mt1">
|
||||
<PowerSelect
|
||||
@options={{this.mailgunRegions}}
|
||||
@selected={{this.mailgunRegion}}
|
||||
@onChange={{action "setMailgunRegion"}}
|
||||
@class="gh-select"
|
||||
@searchEnabled={{false}}
|
||||
@triggerComponent="gh-power-select/trigger"
|
||||
as |region|
|
||||
>
|
||||
{{region.flag}} {{region.name}}
|
||||
</PowerSelect>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @class="no-margin">
|
||||
<label class="fw6 f8">Mailgun domain</label>
|
||||
<GhTextInput
|
||||
@value={{readonly this.mailgunSettings.domain}}
|
||||
@input={{action "setMailgunDomain"}}
|
||||
@class="mt1"
|
||||
data-test-mailgun-domain-input={{true}}
|
||||
/>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<p>Find your Mailgun region and domain
|
||||
<a href="https://app.mailgun.com/app/sending/domains" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
|
||||
</p>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup>
|
||||
<label class="fw6 f8">Mailgun Private API key</label>
|
||||
<GhTextInput
|
||||
@type="password"
|
||||
@value={{readonly this.mailgunSettings.apiKey}}
|
||||
@input={{action "setMailgunApiKey"}}
|
||||
@class="mt1 password" @autocomplete="new-password"
|
||||
data-test-mailgun-api-key-input={{true}}
|
||||
/>
|
||||
<p>Find your Mailgun API keys
|
||||
<a href="https://app.mailgun.com/app/account/security/api_keys" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
|
||||
</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/unless}}
|
||||
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Enable newsletter open-rate</h4>
|
||||
<p class="gh-expandable-description">Track how many members are reading your emails</p>
|
||||
</div>
|
||||
<div class="for-switch">
|
||||
<label class="switch" for="email-track-opens" {{on "click" (action "toggleEmailTrackOpens")}}>
|
||||
<input type="checkbox" checked={{this.settings.emailTrackOpens}} class="gh-input" {{on "click" (action "toggleEmailTrackOpens")}} name="email-track-opens" data-test-checkbox="email-track-opens">
|
||||
<span class="input-toggle-component mt1"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
246
ghost/admin/app/components/settings/members-email-labs.js
Normal file
246
ghost/admin/app/components/settings/members-email-labs.js
Normal file
@ -0,0 +1,246 @@
|
||||
import Component from '@ember/component';
|
||||
import classic from 'ember-classic-decorator';
|
||||
import {action, computed} from '@ember/object';
|
||||
import {inject as service} from '@ember/service';
|
||||
import {task} from 'ember-concurrency';
|
||||
|
||||
const US = {flag: '🇺🇸', name: 'US', baseUrl: 'https://api.mailgun.net/v3'};
|
||||
const EU = {flag: '🇪🇺', name: 'EU', baseUrl: 'https://api.eu.mailgun.net/v3'};
|
||||
|
||||
@classic
|
||||
export default class MembersEmailLabs extends Component {
|
||||
@service config;
|
||||
@service ghostPaths;
|
||||
@service ajax;
|
||||
@service settings;
|
||||
@service newsletters;
|
||||
|
||||
replyAddresses = null;
|
||||
recipientsSelectValue = null;
|
||||
showFromAddressConfirmation = false;
|
||||
showEmailDesignSettings = false;
|
||||
|
||||
@computed('settings.editorDefaultEmailRecipients')
|
||||
get emailNewsletterEnabled() {
|
||||
return this.get('settings.editorDefaultEmailRecipients') !== 'disabled';
|
||||
}
|
||||
|
||||
@computed('recipientsSelectValue')
|
||||
get emailPreviewVisible() {
|
||||
return this.recipientsSelectValue !== 'none';
|
||||
}
|
||||
|
||||
@computed('settings.membersReplyAddress')
|
||||
get selectedReplyAddress() {
|
||||
return this.replyAddresses.findBy('value', this.get('settings.membersReplyAddress'));
|
||||
}
|
||||
|
||||
@computed('fromAddress')
|
||||
get disableUpdateFromAddressButton() {
|
||||
const savedFromAddress = this.get('settings.membersFromAddress') || '';
|
||||
if (!savedFromAddress.includes('@') && this.config.emailDomain) {
|
||||
return !this.fromAddress || (this.fromAddress === `${savedFromAddress}@${this.config.emailDomain}`);
|
||||
}
|
||||
return !this.fromAddress || (this.fromAddress === savedFromAddress);
|
||||
}
|
||||
|
||||
@computed('settings.mailgunBaseUrl')
|
||||
get mailgunRegion() {
|
||||
if (!this.settings.get('mailgunBaseUrl')) {
|
||||
return US;
|
||||
}
|
||||
|
||||
return [US, EU].find((region) => {
|
||||
return region.baseUrl === this.settings.get('mailgunBaseUrl');
|
||||
});
|
||||
}
|
||||
|
||||
@computed('settings.{mailgunBaseUrl,mailgunApiKey,mailgunDomain}')
|
||||
get mailgunSettings() {
|
||||
return {
|
||||
apiKey: this.get('settings.mailgunApiKey') || '',
|
||||
domain: this.get('settings.mailgunDomain') || '',
|
||||
baseUrl: this.get('settings.mailgunBaseUrl') || ''
|
||||
};
|
||||
}
|
||||
|
||||
@computed('newsletters.newsletters.@each.status')
|
||||
get activeNewsletterCount() {
|
||||
return this.newsletters.newsletters.filter(n => n.status === 'active').length;
|
||||
}
|
||||
|
||||
@computed('newsletters.newsletters.@each.status')
|
||||
get archivedNewsletterCount() {
|
||||
return this.newsletters.newsletters.filter(n => n.status === 'archived').length;
|
||||
}
|
||||
|
||||
init() {
|
||||
super.init(...arguments);
|
||||
this.set('mailgunRegions', [US, EU]);
|
||||
this.set('replyAddresses', [
|
||||
{
|
||||
label: 'Newsletter email address (' + this.fromAddress + ')',
|
||||
value: 'newsletter'
|
||||
},
|
||||
{
|
||||
label: 'Support email address (' + this.supportAddress + ')',
|
||||
value: 'support'
|
||||
}
|
||||
]);
|
||||
|
||||
// set recipientsSelectValue as a static property because within this
|
||||
// component's lifecycle it's not always derived from the settings values.
|
||||
// e.g. can be set to "segment" when the filter is empty which is not derivable
|
||||
// from settings as it would equate to "none"
|
||||
this.set('recipientsSelectValue', this._getDerivedRecipientsSelectValue());
|
||||
}
|
||||
|
||||
@action
|
||||
toggleFromAddressConfirmation() {
|
||||
this.toggleProperty('showFromAddressConfirmation');
|
||||
}
|
||||
|
||||
@action
|
||||
closeEmailDesignSettings() {
|
||||
this.set('showEmailDesignSettings', false);
|
||||
}
|
||||
|
||||
@action
|
||||
setMailgunDomain(event) {
|
||||
this.set('settings.mailgunDomain', event.target.value);
|
||||
if (!this.get('settings.mailgunBaseUrl')) {
|
||||
this.set('settings.mailgunBaseUrl', this.mailgunRegion.baseUrl);
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
setMailgunApiKey(event) {
|
||||
this.set('settings.mailgunApiKey', event.target.value);
|
||||
if (!this.get('settings.mailgunBaseUrl')) {
|
||||
this.set('settings.mailgunBaseUrl', this.mailgunRegion.baseUrl);
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
setMailgunRegion(region) {
|
||||
this.set('settings.mailgunBaseUrl', region.baseUrl);
|
||||
}
|
||||
|
||||
@action
|
||||
setFromAddress(fromAddress) {
|
||||
this.setEmailAddress('fromAddress', fromAddress);
|
||||
}
|
||||
|
||||
@action
|
||||
toggleEmailTrackOpens(event) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
this.set('settings.emailTrackOpens', !this.settings.get('emailTrackOpens'));
|
||||
}
|
||||
|
||||
@action
|
||||
toggleEmailNewsletterEnabled(event) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
const newsletterEnabled = !this.emailNewsletterEnabled;
|
||||
|
||||
if (newsletterEnabled) {
|
||||
this.set('settings.editorDefaultEmailRecipients', 'visibility');
|
||||
} else {
|
||||
this.set('settings.editorDefaultEmailRecipients', 'disabled');
|
||||
this.set('settings.editorDefaultEmailRecipientsFilter', null);
|
||||
}
|
||||
|
||||
this.set('recipientsSelectValue', this._getDerivedRecipientsSelectValue());
|
||||
}
|
||||
|
||||
@action
|
||||
setReplyAddress(event) {
|
||||
const newReplyAddress = event.value;
|
||||
|
||||
this.set('settings.membersReplyAddress', newReplyAddress);
|
||||
}
|
||||
|
||||
@action
|
||||
setDefaultEmailRecipients(value) {
|
||||
// Update the underlying setting properties to match the selected recipients option
|
||||
|
||||
if (['visibility', 'disabled'].includes(value)) {
|
||||
this.settings.set('editorDefaultEmailRecipients', value);
|
||||
this.settings.set('editorDefaultEmailRecipientsFilter', null);
|
||||
} else {
|
||||
this.settings.set('editorDefaultEmailRecipients', 'filter');
|
||||
}
|
||||
|
||||
if (value === 'all-members') {
|
||||
this.settings.set('editorDefaultEmailRecipientsFilter', 'status:free,status:-free');
|
||||
}
|
||||
|
||||
if (value === 'paid-only') {
|
||||
this.settings.set('editorDefaultEmailRecipientsFilter', 'status:-free');
|
||||
}
|
||||
|
||||
if (value === 'none') {
|
||||
this.settings.set('editorDefaultEmailRecipientsFilter', null);
|
||||
}
|
||||
|
||||
// Update the value used to display the selected recipients option explicitly
|
||||
// because it's local non-derived state
|
||||
this.set('recipientsSelectValue', value);
|
||||
}
|
||||
|
||||
@action
|
||||
setDefaultEmailRecipientsFilter(filter) {
|
||||
this.settings.set('editorDefaultEmailRecipientsFilter', filter);
|
||||
}
|
||||
|
||||
@action
|
||||
archiveNewsletter(id) {
|
||||
this.newsletters.archive(id);
|
||||
}
|
||||
|
||||
@action
|
||||
addNewsletter() {
|
||||
this.newsletters.add();
|
||||
}
|
||||
|
||||
@(task(function* () {
|
||||
let url = this.get('ghostPaths.url').api('/settings/members/email');
|
||||
try {
|
||||
const response = yield this.ajax.post(url, {
|
||||
data: {
|
||||
email: this.fromAddress,
|
||||
type: 'fromAddressUpdate'
|
||||
}
|
||||
});
|
||||
this.toggleProperty('showFromAddressConfirmation');
|
||||
return response;
|
||||
} catch (e) {
|
||||
// Failed to send email, retry
|
||||
return false;
|
||||
}
|
||||
}).drop())
|
||||
updateFromAddress;
|
||||
|
||||
_getDerivedRecipientsSelectValue() {
|
||||
const defaultEmailRecipients = this.settings.get('editorDefaultEmailRecipients');
|
||||
const defaultEmailRecipientsFilter = this.settings.get('editorDefaultEmailRecipientsFilter');
|
||||
|
||||
if (defaultEmailRecipients === 'filter') {
|
||||
if (defaultEmailRecipientsFilter === 'status:free,status:-free') {
|
||||
return 'all-members';
|
||||
} else if (defaultEmailRecipientsFilter === 'status:-free') {
|
||||
return 'paid-only';
|
||||
} else if (defaultEmailRecipientsFilter === null) {
|
||||
return 'none';
|
||||
} else {
|
||||
return 'segment';
|
||||
}
|
||||
}
|
||||
|
||||
return defaultEmailRecipients;
|
||||
}
|
||||
}
|
||||
@ -1,224 +1,121 @@
|
||||
{{#if (feature "multipleNewsletters")}}
|
||||
<section class="gh-main-section">
|
||||
<section class="gh-main-section gh-setting-email-section">
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Enable newsletter sending</h4>
|
||||
<p class="gh-expandable-description">Newsletter features are active, posts can be sent by email</p>
|
||||
</div>
|
||||
<div class="for-switch">
|
||||
<label class="switch" for="email-newsletter-enabled" {{on "click" (action "toggleEmailNewsletterEnabled")}}>
|
||||
<input type="checkbox" checked={{this.emailNewsletterEnabled}} class="gh-input" {{on "click" (action "toggleEmailNewsletterEnabled")}} name="email-newsletter-enabled" data-test-checkbox="email-newsletter-enabled">
|
||||
<span class="input-toggle-component mt1"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{#if this.emailNewsletterEnabled}}
|
||||
|
||||
<section class="gh-main-section gh-setting-email-section">
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Enable newsletter sending</h4>
|
||||
<p class="gh-expandable-description">Newsletter features are active, posts can be sent by email</p>
|
||||
</div>
|
||||
<div class="for-switch">
|
||||
<label class="switch" for="email-newsletter-enabled" {{on "click" (action "toggleEmailNewsletterEnabled")}}>
|
||||
<input type="checkbox" checked={{this.emailNewsletterEnabled}} class="gh-input" {{on "click" (action "toggleEmailNewsletterEnabled")}} name="email-newsletter-enabled" data-test-checkbox="email-newsletter-enabled">
|
||||
<span class="input-toggle-component mt1"></span>
|
||||
</label>
|
||||
<h4 class="gh-expandable-title">Email design</h4>
|
||||
<p class="gh-expandable-description">Customize the look and feel of your newsletters</p>
|
||||
</div>
|
||||
<button type="button" class="gh-btn gh-btn-green" {{on "click" @toggleEmailDesignSettings}} data-test-toggle-membersFrom><span> Customize design →</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{#if this.emailNewsletterEnabled}}
|
||||
<div class="gh-main-section gh-newsletters">
|
||||
<div class="flex justify-between items-center">
|
||||
<h4 class="gh-main-section-header small bn">Newsletters</h4>
|
||||
{{#if (not-eq this.archivedNewsletterCount 0)}}
|
||||
<div>
|
||||
<div class="gh-contentfilter-menu gh-contentfilter-type {{if (not (eq this.selectedType.value "active")) "gh-contentfilter-selected"}}" data-test-type-select="true">
|
||||
{{!-- <PowerSelect
|
||||
@selected={{this.selectedType}}
|
||||
@options={{this.availableTypes}}
|
||||
@searchEnabled={{false}}
|
||||
@onChange={{this.onTypeChange}}
|
||||
@triggerComponent="gh-power-select/trigger"
|
||||
@triggerClass="gh-contentfilter-menu-trigger gh-contentfilter-menu-trigger-tiers"
|
||||
@dropdownClass="gh-contentfilter-menu-dropdown"
|
||||
@matchTriggerWidth={{false}}
|
||||
as |type|
|
||||
>
|
||||
{{#if type.name}}{{type.name}}{{else}}<span class="red">Unknown type</span>{{/if}}
|
||||
</PowerSelect> --}}
|
||||
<span>Active</span>
|
||||
<span>{{svg-jar "arrow-down-small" class="w2"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<section class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
{{#each this.newsletters.newsletters as |newsletter|}}
|
||||
{{#if (eq newsletter.status "active")}}
|
||||
<div class="gh-main-content-card gh-newsletter-card {{if (gt this.activeNewsletterCount 1) "multiple"}}">
|
||||
{{svg-jar "grab" class="grab-newsletter"}}
|
||||
<div class="gh-newsletter-card-block title-block">
|
||||
<h3 class="gh-newsletter-card-name">
|
||||
{{newsletter.name}}
|
||||
</h3>
|
||||
<p class="gh-newsletter-card-description">
|
||||
{{newsletter.description}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="gh-newsletter-card-block stats-block {{if (gt this.activeNewsletterCount 1) "multiple"}}">
|
||||
<div>
|
||||
<h3 class="gh-newsletter-card-name">{{newsletter.members.total}}</h3>
|
||||
<p class="gh-newsletter-card-description">Subscribers</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="gh-newsletter-card-name">{{newsletter.posts.total}}</h3>
|
||||
<p class="gh-newsletter-card-description">Posts sent</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-newsletter-card-block cta-block">
|
||||
{{#if (eq this.activeNewsletterCount 1)}}
|
||||
<button class="gh-btn gh-btn-green" type="button" {{on "click" @toggleEmailDesignSettings}}><span>Customize →</span></button>
|
||||
{{else}}
|
||||
<span class="dropdown">
|
||||
<GhDropdownButton
|
||||
@dropdownName="newsletter-actions-menu-newsletter-{{newsletter.id}}"
|
||||
@classNames="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-product-card-actions-button icon-only"
|
||||
>
|
||||
<span>
|
||||
{{svg-jar "dotdotdot"}}
|
||||
<span class="hidden">Actions</span>
|
||||
</span>
|
||||
</GhDropdownButton>
|
||||
<GhDropdown
|
||||
@name="newsletter-actions-menu-newsletter-{{newsletter.id}}"
|
||||
@tagName="ul"
|
||||
@classNames="gh-newsletter-actions-menu dropdown-menu dropdown-triangle-top-right"
|
||||
>
|
||||
<li>
|
||||
<button class="mr2" type="button" {{on "click" @toggleEmailDesignSettings}}>
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="mr2" type="button" {{on "click" (fn this.archiveNewsletter newsletter.id)}}>
|
||||
<span>Archive</span>
|
||||
</button>
|
||||
</li>
|
||||
</GhDropdown>
|
||||
</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</section>
|
||||
<button type="button" class="gh-add-newsletter" {{on "click" @toggleEmailDesignSettings}} {{on "click" this.addNewsletter}}>{{svg-jar "add-stroke"}}Add newsletter</button>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<section class="gh-main-section">
|
||||
<h4 class="gh-main-section-header small bn">General settings</h4>
|
||||
<section class="gh-main-section gh-setting-email-section content-preview">
|
||||
<div>
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-setting-richdd-container gh-setting-rich-dropdown">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Default newsletter recipients</h4>
|
||||
<p class="gh-expandable-description">When you publish new content, who do you usually want to send it to?</p>
|
||||
</div>
|
||||
<button type="button" class="gh-btn" {{action (toggle "defaultRecipientsOpen" this)}} data-test-toggle-membersemail>
|
||||
<span>{{if this.defaultRecipientsOpen "Close" "Expand"}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<Settings::MembersEmail::DefaultRecipientsSelect
|
||||
@recipients={{this.recipientsSelectValue}}
|
||||
@segment={{this.settings.editorDefaultEmailRecipientsFilter}}
|
||||
@onRecipientsChange={{action "setDefaultEmailRecipients"}}
|
||||
@onSegmentChange={{action "setDefaultEmailRecipientsFilter"}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Email addresses</h4>
|
||||
<p class="gh-expandable-description">Contact information used for newsletters and member login emails</p>
|
||||
</div>
|
||||
<button type="button" class="gh-btn" {{action (toggle "membersFromOpen" this)}} data-test-toggle-membersFrom><span>{{if this.membersFromOpen "Close" "Expand"}}</span></button>
|
||||
</div>
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if this.defaultRecipientsOpen}}
|
||||
{{#if (gt this.activeNewsletterCount 1)}}
|
||||
<div class="form-group">
|
||||
<label class="fw6 f8">Default newsletter</label>
|
||||
<div class="gh-input"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="fw6 f8">Default member selection</label>
|
||||
<div class="gh-setting-richdd-container gh-setting-rich-dropdown">
|
||||
<Settings::MembersEmail::DefaultRecipientsSelect
|
||||
@recipients={{this.recipientsSelectValue}}
|
||||
@segment={{this.settings.editorDefaultEmailRecipientsFilter}}
|
||||
@onRecipientsChange={{action "setDefaultEmailRecipients"}}
|
||||
@onSegmentChange={{action "setDefaultEmailRecipientsFilter"}}
|
||||
{{#liquid-if this.membersFromOpen}}
|
||||
<div>
|
||||
<GhFormGroup>
|
||||
<label class="fw6 f8">Newsletter email address</label>
|
||||
<div class="flex items-center justify-center mt1">
|
||||
<GhTextInput
|
||||
@value={{readonly this.fromAddress}}
|
||||
@input={{action "setFromAddress" value="target.value"}}
|
||||
@class="gh-labs-members-emailinput"
|
||||
/>
|
||||
<GhTaskButton
|
||||
@buttonText="Update newsletter address"
|
||||
@runningText="Sending..."
|
||||
@successText="Confirmation email sent"
|
||||
@disabled={{this.disableUpdateFromAddressButton}}
|
||||
@task={{this.updateFromAddress}}
|
||||
@class="gh-btn gh-btn-icon gh-btn-green gh-btn-textfield-group gh-labs-members-emaildropdown"
|
||||
data-test-button="update-from-address"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="gh-setting-richdd-container gh-setting-rich-dropdown form-group">
|
||||
<Settings::MembersEmail::DefaultRecipientsSelect
|
||||
@recipients={{this.recipientsSelectValue}}
|
||||
@segment={{this.settings.editorDefaultEmailRecipientsFilter}}
|
||||
@onRecipientsChange={{action "setDefaultEmailRecipients"}}
|
||||
@onSegmentChange={{action "setDefaultEmailRecipientsFilter"}}
|
||||
/>
|
||||
</div>
|
||||
{{/if}}
|
||||
<p>The address your newsletter posts are sent from</p>
|
||||
</GhFormGroup>
|
||||
{{#if this.showFromAddressConfirmation}}
|
||||
<div class="flex items-center green-d1 nt3 lh-1">
|
||||
{{svg-jar "check-circle" class="w4 h4 mr1 stroke-green-d1"}} <span class="nudge-left--2">Check your inbox and confirm before saving your settings</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<GhFormGroup @class="for-select gh-members-defaultemaildd">
|
||||
<label class="fw6 f8" for="reply-address">Newsletter replies go to</label>
|
||||
<span class="gh-select mt1">
|
||||
{{one-way-select this.selectedReplyAddress
|
||||
id="reply-address"
|
||||
name="reply-address"
|
||||
options=(readonly this.replyAddresses)
|
||||
optionValuePath="value"
|
||||
optionLabelPath="label"
|
||||
update=(action "setReplyAddress")
|
||||
}}
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
<div class="flex justify-between">
|
||||
<p>Where you receive responses to newsletters</p>
|
||||
{{#if (eq this.settings.membersReplyAddress "support")}}
|
||||
<LinkTo @route="settings.membership" class="gh-update-support-address" type="button" @query={{hash showPortalSettings=true}}>Change support email address</LinkTo>
|
||||
{{/if}}
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#unless this.config.mailgunIsConfigured}}
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Mailgun configuration</h4>
|
||||
<p class="gh-expandable-description">The Mailgun API is used for bulk email newsletter delivery. <a href="https://ghost.org/docs/faq/mailgun-newsletters/" target="_blank" rel="noopener noreferrer">Why is this required?</a></p>
|
||||
</div>
|
||||
<button type="button" class="gh-btn" {{action (toggle "membersEmailOpen" this)}} data-test-toggle-membersemail>
|
||||
<span>{{if this.membersEmailOpen "Close" "Expand"}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if this.membersEmailOpen}}
|
||||
<div class="flex flex-column flex">
|
||||
<GhFormGroup>
|
||||
<div class="flex items-center">
|
||||
<GhFormGroup @class="gh-mailgun-region no-margin">
|
||||
<label class="fw6 f8">Mailgun region</label>
|
||||
<div class="mt1">
|
||||
<PowerSelect
|
||||
@options={{this.mailgunRegions}}
|
||||
@selected={{this.mailgunRegion}}
|
||||
@onChange={{action "setMailgunRegion"}}
|
||||
@class="gh-select"
|
||||
@searchEnabled={{false}}
|
||||
@triggerComponent="gh-power-select/trigger"
|
||||
as |region|
|
||||
>
|
||||
{{region.flag}} {{region.name}}
|
||||
</PowerSelect>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @class="no-margin">
|
||||
<label class="fw6 f8">Mailgun domain</label>
|
||||
<GhTextInput
|
||||
@value={{readonly this.mailgunSettings.domain}}
|
||||
@input={{action "setMailgunDomain"}}
|
||||
@class="mt1"
|
||||
data-test-mailgun-domain-input={{true}}
|
||||
/>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<p>Find your Mailgun region and domain
|
||||
<a href="https://app.mailgun.com/app/sending/domains" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
|
||||
</p>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup>
|
||||
<label class="fw6 f8">Mailgun Private API key</label>
|
||||
<GhTextInput
|
||||
@type="password"
|
||||
@value={{readonly this.mailgunSettings.apiKey}}
|
||||
@input={{action "setMailgunApiKey"}}
|
||||
@class="mt1 password" @autocomplete="new-password"
|
||||
data-test-mailgun-api-key-input={{true}}
|
||||
/>
|
||||
<p>Find your Mailgun API keys
|
||||
<a href="https://app.mailgun.com/app/account/security/api_keys" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
|
||||
</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/unless}}
|
||||
|
||||
</div>
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
@ -234,253 +131,116 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<section class="gh-main-section gh-setting-email-section">
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Enable newsletter sending</h4>
|
||||
<p class="gh-expandable-description">Newsletter features are active, posts can be sent by email</p>
|
||||
</div>
|
||||
<div class="for-switch">
|
||||
<label class="switch" for="email-newsletter-enabled" {{on "click" (action "toggleEmailNewsletterEnabled")}}>
|
||||
<input type="checkbox" checked={{this.emailNewsletterEnabled}} class="gh-input" {{on "click" (action "toggleEmailNewsletterEnabled")}} name="email-newsletter-enabled" data-test-checkbox="email-newsletter-enabled">
|
||||
<span class="input-toggle-component mt1"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-email-publishmenu-preview">
|
||||
<h4 class="gh-main-section-header small bn">Preview</h4>
|
||||
<div class="gh-publishmenu-dropdown-container">
|
||||
<div class="gh-publishmenu-dropdown">
|
||||
<header class="gh-publishmenu-heading">Ready to <span class="gh-publishmenu-heading-dropdown">{{#if this.emailPreviewVisible}} publish & send {{else}} publish {{/if}}{{svg-jar "arrow-down"}}</span> this post?</header>
|
||||
<section class="gh-publishmenu-content">
|
||||
<div class="gh-publishmenu-section {{if this.emailPreviewVisible "" "mb7"}}">
|
||||
<div class="gh-publishmenu-radio active">
|
||||
<div class="gh-publishmenu-radio-button"></div>
|
||||
<div class="gh-publishmenu-radio-content">
|
||||
<div class="gh-publishmenu-radio-label">Set it live now</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-publishmenu-radio">
|
||||
<div class="gh-publishmenu-radio-button"></div>
|
||||
<div class="gh-publishmenu-radio-content">
|
||||
<div class="gh-publishmenu-radio-label">Schedule it for later</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{#if this.emailPreviewVisible}}
|
||||
<div class="gh-publishmenu-section">
|
||||
<div class="gh-publishmenu-email">
|
||||
<div class="gh-publishmenu-email-label">
|
||||
<label class="gh-publishmenu-radio-label mb3">Send by email to</label>
|
||||
<div class="form-group">
|
||||
<GhMembersRecipientSelect
|
||||
@filter={{this.settings.editorDefaultEmailRecipientsFilter}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{#if this.emailNewsletterEnabled}}
|
||||
|
||||
<section class="gh-main-section gh-setting-email-section">
|
||||
{{#unless this.config.mailgunIsConfigured}}
|
||||
<hr>
|
||||
<section class="gh-main-section">
|
||||
<h4 class="gh-main-section-header small bn">Advanced</h4>
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Email design</h4>
|
||||
<p class="gh-expandable-description">Customize the look and feel of your newsletters</p>
|
||||
<h4 class="gh-expandable-title">Mailgun configuration</h4>
|
||||
<p class="gh-expandable-description">The Mailgun API is used for bulk email newsletter delivery. <a href="https://ghost.org/docs/faq/mailgun-newsletters/" target="_blank" rel="noopener noreferrer">Why is this required?</a></p>
|
||||
</div>
|
||||
<button type="button" class="gh-btn gh-btn-green" {{on "click" @toggleEmailDesignSettings}} data-test-toggle-membersFrom><span> Customize design →</span></button>
|
||||
<button type="button" class="gh-btn" {{action (toggle "membersEmailOpen" this)}} data-test-toggle-membersemail>
|
||||
<span>{{if this.membersEmailOpen "Close" "Expand"}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section class="gh-main-section gh-setting-email-section content-preview">
|
||||
<div>
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-setting-richdd-container gh-setting-rich-dropdown">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Default newsletter recipients</h4>
|
||||
<p class="gh-expandable-description">When you publish new content, who do you usually want to send it to?</p>
|
||||
</div>
|
||||
</div>
|
||||
<Settings::MembersEmail::DefaultRecipientsSelect
|
||||
@recipients={{this.recipientsSelectValue}}
|
||||
@segment={{this.settings.editorDefaultEmailRecipientsFilter}}
|
||||
@onRecipientsChange={{action "setDefaultEmailRecipients"}}
|
||||
@onSegmentChange={{action "setDefaultEmailRecipientsFilter"}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Email addresses</h4>
|
||||
<p class="gh-expandable-description">Contact information used for newsletters and member login emails</p>
|
||||
</div>
|
||||
<button type="button" class="gh-btn" {{action (toggle "membersFromOpen" this)}} data-test-toggle-membersFrom><span>{{if this.membersFromOpen "Close" "Expand"}}</span></button>
|
||||
</div>
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if this.membersFromOpen}}
|
||||
<div>
|
||||
<GhFormGroup>
|
||||
<label class="fw6 f8">Newsletter email address</label>
|
||||
<div class="flex items-center justify-center mt1">
|
||||
<GhTextInput
|
||||
@value={{readonly this.fromAddress}}
|
||||
@input={{action "setFromAddress" value="target.value"}}
|
||||
@class="gh-labs-members-emailinput"
|
||||
/>
|
||||
<GhTaskButton
|
||||
@buttonText="Update newsletter address"
|
||||
@runningText="Sending..."
|
||||
@successText="Confirmation email sent"
|
||||
@disabled={{this.disableUpdateFromAddressButton}}
|
||||
@task={{this.updateFromAddress}}
|
||||
@class="gh-btn gh-btn-icon gh-btn-green gh-btn-textfield-group gh-labs-members-emaildropdown"
|
||||
data-test-button="update-from-address"
|
||||
/>
|
||||
</div>
|
||||
<p>The address your newsletter posts are sent from</p>
|
||||
</GhFormGroup>
|
||||
{{#if this.showFromAddressConfirmation}}
|
||||
<div class="flex items-center green-d1 nt3 lh-1">
|
||||
{{svg-jar "check-circle" class="w4 h4 mr1 stroke-green-d1"}} <span class="nudge-left--2">Check your inbox and confirm before saving your settings</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<GhFormGroup @class="for-select gh-members-defaultemaildd">
|
||||
<label class="fw6 f8" for="reply-address">Newsletter replies go to</label>
|
||||
<span class="gh-select mt1">
|
||||
{{one-way-select this.selectedReplyAddress
|
||||
id="reply-address"
|
||||
name="reply-address"
|
||||
options=(readonly this.replyAddresses)
|
||||
optionValuePath="value"
|
||||
optionLabelPath="label"
|
||||
update=(action "setReplyAddress")
|
||||
}}
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
<div class="flex justify-between">
|
||||
<p>Where you receive responses to newsletters</p>
|
||||
{{#if (eq this.settings.membersReplyAddress "support")}}
|
||||
<LinkTo @route="settings.membership" class="gh-update-support-address" type="button" @query={{hash showPortalSettings=true}}>Change support email address</LinkTo>
|
||||
{{/if}}
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Enable newsletter open-rate</h4>
|
||||
<p class="gh-expandable-description">Track how many members are reading your emails</p>
|
||||
</div>
|
||||
<div class="for-switch">
|
||||
<label class="switch" for="email-track-opens" {{on "click" (action "toggleEmailTrackOpens")}}>
|
||||
<input type="checkbox" checked={{this.settings.emailTrackOpens}} class="gh-input" {{on "click" (action "toggleEmailTrackOpens")}} name="email-track-opens" data-test-checkbox="email-track-opens">
|
||||
<span class="input-toggle-component mt1"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-email-publishmenu-preview">
|
||||
<h4 class="gh-main-section-header small bn">Preview</h4>
|
||||
<div class="gh-publishmenu-dropdown-container">
|
||||
<div class="gh-publishmenu-dropdown">
|
||||
<header class="gh-publishmenu-heading">Ready to <span class="gh-publishmenu-heading-dropdown">{{#if this.emailPreviewVisible}} publish & send {{else}} publish {{/if}}{{svg-jar "arrow-down"}}</span> this post?</header>
|
||||
<section class="gh-publishmenu-content">
|
||||
<div class="gh-publishmenu-section {{if this.emailPreviewVisible "" "mb7"}}">
|
||||
<div class="gh-publishmenu-radio active">
|
||||
<div class="gh-publishmenu-radio-button"></div>
|
||||
<div class="gh-publishmenu-radio-content">
|
||||
<div class="gh-publishmenu-radio-label">Set it live now</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-publishmenu-radio">
|
||||
<div class="gh-publishmenu-radio-button"></div>
|
||||
<div class="gh-publishmenu-radio-content">
|
||||
<div class="gh-publishmenu-radio-label">Schedule it for later</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{#if this.emailPreviewVisible}}
|
||||
<div class="gh-publishmenu-section">
|
||||
<div class="gh-publishmenu-email">
|
||||
<div class="gh-publishmenu-email-label">
|
||||
<label class="gh-publishmenu-radio-label mb3">Send by email to</label>
|
||||
<div class="form-group">
|
||||
<GhMembersRecipientSelect
|
||||
@filter={{this.settings.editorDefaultEmailRecipientsFilter}}
|
||||
/>
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if this.membersEmailOpen}}
|
||||
<div class="flex flex-column flex">
|
||||
<GhFormGroup>
|
||||
<div class="flex items-center">
|
||||
<GhFormGroup @class="gh-mailgun-region no-margin">
|
||||
<label class="fw6 f8">Mailgun region</label>
|
||||
<div class="mt1">
|
||||
<PowerSelect
|
||||
@options={{this.mailgunRegions}}
|
||||
@selected={{this.mailgunRegion}}
|
||||
@onChange={{action "setMailgunRegion"}}
|
||||
@class="gh-select"
|
||||
@searchEnabled={{false}}
|
||||
@triggerComponent="gh-power-select/trigger"
|
||||
as |region|
|
||||
>
|
||||
{{region.flag}} {{region.name}}
|
||||
</PowerSelect>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @class="no-margin">
|
||||
<label class="fw6 f8">Mailgun domain</label>
|
||||
<GhTextInput
|
||||
@value={{readonly this.mailgunSettings.domain}}
|
||||
@input={{action "setMailgunDomain"}}
|
||||
@class="mt1"
|
||||
data-test-mailgun-domain-input={{true}}
|
||||
/>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</section>
|
||||
<p>Find your Mailgun region and domain
|
||||
<a href="https://app.mailgun.com/app/sending/domains" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
|
||||
</p>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup>
|
||||
<label class="fw6 f8">Mailgun Private API key</label>
|
||||
<GhTextInput
|
||||
@type="password"
|
||||
@value={{readonly this.mailgunSettings.apiKey}}
|
||||
@input={{action "setMailgunApiKey"}}
|
||||
@class="mt1 password" @autocomplete="new-password"
|
||||
data-test-mailgun-api-key-input={{true}}
|
||||
/>
|
||||
<p>Find your Mailgun API keys
|
||||
<a href="https://app.mailgun.com/app/account/security/api_keys" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
|
||||
</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/unless}}
|
||||
|
||||
{{#unless this.config.mailgunIsConfigured}}
|
||||
<hr>
|
||||
<section class="gh-main-section">
|
||||
<h4 class="gh-main-section-header small bn">Advanced</h4>
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Mailgun configuration</h4>
|
||||
<p class="gh-expandable-description">The Mailgun API is used for bulk email newsletter delivery. <a href="https://ghost.org/docs/faq/mailgun-newsletters/" target="_blank" rel="noopener noreferrer">Why is this required?</a></p>
|
||||
</div>
|
||||
<button type="button" class="gh-btn" {{action (toggle "membersEmailOpen" this)}} data-test-toggle-membersemail>
|
||||
<span>{{if this.membersEmailOpen "Close" "Expand"}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if this.membersEmailOpen}}
|
||||
<div class="flex flex-column flex">
|
||||
<GhFormGroup>
|
||||
<div class="flex items-center">
|
||||
<GhFormGroup @class="gh-mailgun-region no-margin">
|
||||
<label class="fw6 f8">Mailgun region</label>
|
||||
<div class="mt1">
|
||||
<PowerSelect
|
||||
@options={{this.mailgunRegions}}
|
||||
@selected={{this.mailgunRegion}}
|
||||
@onChange={{action "setMailgunRegion"}}
|
||||
@class="gh-select"
|
||||
@searchEnabled={{false}}
|
||||
@triggerComponent="gh-power-select/trigger"
|
||||
as |region|
|
||||
>
|
||||
{{region.flag}} {{region.name}}
|
||||
</PowerSelect>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @class="no-margin">
|
||||
<label class="fw6 f8">Mailgun domain</label>
|
||||
<GhTextInput
|
||||
@value={{readonly this.mailgunSettings.domain}}
|
||||
@input={{action "setMailgunDomain"}}
|
||||
@class="mt1"
|
||||
data-test-mailgun-domain-input={{true}}
|
||||
/>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<p>Find your Mailgun region and domain
|
||||
<a href="https://app.mailgun.com/app/sending/domains" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
|
||||
</p>
|
||||
</GhFormGroup>
|
||||
<GhFormGroup>
|
||||
<label class="fw6 f8">Mailgun Private API key</label>
|
||||
<GhTextInput
|
||||
@type="password"
|
||||
@value={{readonly this.mailgunSettings.apiKey}}
|
||||
@input={{action "setMailgunApiKey"}}
|
||||
@class="mt1 password" @autocomplete="new-password"
|
||||
data-test-mailgun-api-key-input={{true}}
|
||||
/>
|
||||
<p>Find your Mailgun API keys
|
||||
<a href="https://app.mailgun.com/app/account/security/api_keys" target="_blank" class="fw5" rel="noopener noreferrer">here</a>
|
||||
</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/unless}}
|
||||
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
@ -13,7 +13,6 @@ export default class MembersEmail extends Component {
|
||||
@service ghostPaths;
|
||||
@service ajax;
|
||||
@service settings;
|
||||
@service newsletters;
|
||||
|
||||
replyAddresses = null;
|
||||
recipientsSelectValue = null;
|
||||
@ -64,16 +63,6 @@ export default class MembersEmail extends Component {
|
||||
};
|
||||
}
|
||||
|
||||
@computed('newsletters.newsletters.@each.status')
|
||||
get activeNewsletterCount() {
|
||||
return this.newsletters.newsletters.filter(n => n.status === 'active').length;
|
||||
}
|
||||
|
||||
@computed('newsletters.newsletters.@each.status')
|
||||
get archivedNewsletterCount() {
|
||||
return this.newsletters.newsletters.filter(n => n.status === 'archived').length;
|
||||
}
|
||||
|
||||
init() {
|
||||
super.init(...arguments);
|
||||
this.set('mailgunRegions', [US, EU]);
|
||||
@ -197,16 +186,6 @@ export default class MembersEmail extends Component {
|
||||
this.settings.set('editorDefaultEmailRecipientsFilter', filter);
|
||||
}
|
||||
|
||||
@action
|
||||
archiveNewsletter(id) {
|
||||
this.newsletters.archive(id);
|
||||
}
|
||||
|
||||
@action
|
||||
addNewsletter() {
|
||||
this.newsletters.add();
|
||||
}
|
||||
|
||||
@(task(function* () {
|
||||
let url = this.get('ghostPaths.url').api('/settings/members/email');
|
||||
try {
|
||||
|
||||
74
ghost/admin/app/controllers/settings/members-email-labs.js
Normal file
74
ghost/admin/app/controllers/settings/members-email-labs.js
Normal file
@ -0,0 +1,74 @@
|
||||
import Controller from '@ember/controller';
|
||||
import {action} from '@ember/object';
|
||||
import {inject as service} from '@ember/service';
|
||||
import {task} from 'ember-concurrency';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
export default class MembersEmailLabsController extends Controller {
|
||||
@service config;
|
||||
@service session;
|
||||
@service settings;
|
||||
|
||||
queryParams = ['showEmailDesignSettings'];
|
||||
|
||||
// from/supportAddress are set here so that they can be reset to saved values on save
|
||||
// to avoid it looking like they've been saved when they have a separate update process
|
||||
@tracked fromAddress = '';
|
||||
@tracked supportAddress = '';
|
||||
|
||||
@tracked showEmailDesignSettings = false;
|
||||
@tracked showLeaveSettingsModal = false;
|
||||
|
||||
@action
|
||||
setEmailAddress(property, email) {
|
||||
this[property] = email;
|
||||
}
|
||||
|
||||
@action
|
||||
toggleEmailDesignSettings() {
|
||||
this.showEmailDesignSettings = !this.showEmailDesignSettings;
|
||||
}
|
||||
|
||||
leaveRoute(transition) {
|
||||
if (this.settings.get('hasDirtyAttributes')) {
|
||||
transition.abort();
|
||||
this.leaveSettingsTransition = transition;
|
||||
this.showLeaveSettingsModal = true;
|
||||
}
|
||||
this.showEmailDesignSettings = false;
|
||||
}
|
||||
|
||||
@action
|
||||
async confirmLeave() {
|
||||
this.settings.rollbackAttributes();
|
||||
this.showLeaveSettingsModal = false;
|
||||
this.leaveSettingsTransition.retry();
|
||||
}
|
||||
|
||||
@action
|
||||
cancelLeave() {
|
||||
this.showLeaveSettingsModal = false;
|
||||
this.leaveSettingsTransition = null;
|
||||
}
|
||||
|
||||
parseEmailAddress(address) {
|
||||
const emailAddress = address || 'noreply';
|
||||
// Adds default domain as site domain
|
||||
if (emailAddress.indexOf('@') < 0 && this.config.emailDomain) {
|
||||
return `${emailAddress}@${this.config.emailDomain}`;
|
||||
}
|
||||
return emailAddress;
|
||||
}
|
||||
|
||||
resetEmailAddresses() {
|
||||
this.fromAddress = this.parseEmailAddress(this.settings.get('membersFromAddress'));
|
||||
this.supportAddress = this.parseEmailAddress(this.settings.get('membersSupportAddress'));
|
||||
}
|
||||
|
||||
@task({drop: true})
|
||||
*saveSettings() {
|
||||
const response = yield this.settings.save();
|
||||
this.resetEmailAddresses();
|
||||
return response;
|
||||
}
|
||||
}
|
||||
@ -43,6 +43,7 @@ Router.map(function () {
|
||||
this.route('settings.general', {path: '/settings/general'});
|
||||
this.route('settings.membership', {path: '/settings/members'});
|
||||
this.route('settings.members-email', {path: '/settings/members-email'});
|
||||
this.route('settings.members-email-labs', {path: '/settings/members-email-labs'});
|
||||
this.route('settings.code-injection', {path: '/settings/code-injection'});
|
||||
|
||||
this.route('settings.design', {path: '/settings/design'}, function () {
|
||||
|
||||
43
ghost/admin/app/routes/settings/members-email-labs.js
Normal file
43
ghost/admin/app/routes/settings/members-email-labs.js
Normal file
@ -0,0 +1,43 @@
|
||||
import AdminRoute from 'ghost-admin/routes/admin';
|
||||
import {action} from '@ember/object';
|
||||
import {inject as service} from '@ember/service';
|
||||
|
||||
export default class MembersEmailLabsRoute extends AdminRoute {
|
||||
@service feature;
|
||||
@service notifications;
|
||||
@service settings;
|
||||
|
||||
beforeModel(transition) {
|
||||
super.beforeModel(...arguments);
|
||||
|
||||
if (!this.feature.multipleNewsletters) {
|
||||
return this.transitionTo('settings.members-email');
|
||||
}
|
||||
|
||||
if (transition.to.queryParams?.fromAddressUpdate === 'success') {
|
||||
this.notifications.showAlert(
|
||||
`Newsletter email address has been updated`,
|
||||
{type: 'success', key: 'members.settings.from-address.updated'}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
model() {
|
||||
return this.settings.reload();
|
||||
}
|
||||
|
||||
setupController(controller) {
|
||||
controller.resetEmailAddresses();
|
||||
}
|
||||
|
||||
@action
|
||||
willTransition(transition) {
|
||||
return this.controller.leaveRoute(transition);
|
||||
}
|
||||
|
||||
buildRouteInfoMetadata() {
|
||||
return {
|
||||
titleToken: 'Settings - Email newsletter'
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -3,12 +3,17 @@ import {action} from '@ember/object';
|
||||
import {inject as service} from '@ember/service';
|
||||
|
||||
export default class MembersEmailRoute extends AdminRoute {
|
||||
@service feature;
|
||||
@service notifications;
|
||||
@service settings;
|
||||
|
||||
beforeModel(transition) {
|
||||
super.beforeModel(...arguments);
|
||||
|
||||
if (this.feature.multipleNewsletters) {
|
||||
return this.transitionTo('settings.members-email-labs');
|
||||
}
|
||||
|
||||
if (transition.to.queryParams?.fromAddressUpdate === 'success') {
|
||||
this.notifications.showAlert(
|
||||
`Newsletter email address has been updated`,
|
||||
@ -32,7 +37,7 @@ export default class MembersEmailRoute extends AdminRoute {
|
||||
|
||||
buildRouteInfoMetadata() {
|
||||
return {
|
||||
titleToken: 'Settings - Members'
|
||||
titleToken: 'Settings - Email newsletter'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
48
ghost/admin/app/templates/settings/members-email-labs.hbs
Normal file
48
ghost/admin/app/templates/settings/members-email-labs.hbs
Normal file
@ -0,0 +1,48 @@
|
||||
<section class="gh-canvas gh-setting-email">
|
||||
<GhCanvasHeader class="gh-canvas-header">
|
||||
<h2 class="gh-canvas-title" data-test-screen-title>
|
||||
<LinkTo @route="settings">Settings</LinkTo>
|
||||
<span>{{svg-jar "arrow-right"}}</span>
|
||||
Email newsletter
|
||||
</h2>
|
||||
<section class="view-actions">
|
||||
<GhTaskButton
|
||||
@buttonText="Save"
|
||||
@task={{this.saveSettings}}
|
||||
@successText="Saved"
|
||||
@runningText="Saving"
|
||||
@class="gh-btn gh-btn-primary gh-btn-icon"
|
||||
{{on-key "cmd+s"}}
|
||||
data-test-button="save-members-settings"
|
||||
/>
|
||||
</section>
|
||||
</GhCanvasHeader>
|
||||
|
||||
<section class="view-container settings-debug">
|
||||
<div class="gh-setting-liquid-section">
|
||||
<Settings::MembersEmailLabs
|
||||
@fromAddress={{this.fromAddress}}
|
||||
@supportAddress={{this.supportAddress}}
|
||||
@setEmailAddress={{this.setEmailAddress}}
|
||||
@toggleEmailDesignSettings={{this.toggleEmailDesignSettings}}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{#if this.showLeaveSettingsModal}}
|
||||
<GhFullscreenModal
|
||||
@modal="leave-settings"
|
||||
@confirm={{this.confirmLeave}}
|
||||
@close={{this.cancelLeave}}
|
||||
@modifier="action wide"
|
||||
/>
|
||||
{{/if}}
|
||||
</section>
|
||||
|
||||
{{#if this.showEmailDesignSettings}}
|
||||
<GhFullscreenModal @modifier="full-overlay portal-settings">
|
||||
<ModalEmailDesignSettings
|
||||
@closeModal={{this.toggleEmailDesignSettings}}
|
||||
/>
|
||||
</GhFullscreenModal>
|
||||
{{/if}}
|
||||
@ -0,0 +1,48 @@
|
||||
import {authenticateSession} from 'ember-simple-auth/test-support';
|
||||
import {click, currentURL, find} from '@ember/test-helpers';
|
||||
import {disableLabsFlag, enableLabsFlag} from '../../helpers/labs-flag';
|
||||
import {expect} from 'chai';
|
||||
import {setupApplicationTest} from 'ember-mocha';
|
||||
import {setupMirage} from 'ember-cli-mirage/test-support';
|
||||
import {visit} from '../../helpers/visit';
|
||||
|
||||
describe('Acceptance: Settings - Members email (multipleNewsletters)', function () {
|
||||
const hooks = setupApplicationTest();
|
||||
setupMirage(hooks);
|
||||
|
||||
beforeEach(async function () {
|
||||
this.server.loadFixtures('configs');
|
||||
|
||||
const role = this.server.create('role', {name: 'Owner'});
|
||||
this.server.create('user', {roles: [role]});
|
||||
|
||||
enableLabsFlag(this.server, 'multipleNewsletters');
|
||||
|
||||
return await authenticateSession();
|
||||
});
|
||||
|
||||
it('without flag - redirects labs to original', async function () {
|
||||
disableLabsFlag(this.server, 'multipleNewsletters');
|
||||
await visit('/settings/members-email-labs');
|
||||
expect(currentURL()).to.equal('/settings/members-email');
|
||||
});
|
||||
|
||||
it('with flag - redirects original to labs', async function () {
|
||||
await visit('/settings/members-email');
|
||||
expect(currentURL()).to.equal('/settings/members-email-labs');
|
||||
});
|
||||
|
||||
it('can manage open rate tracking', async function () {
|
||||
this.server.db.settings.update({key: 'email_track_opens'}, {value: 'true'});
|
||||
|
||||
await visit('/settings/members-email-labs');
|
||||
expect(find('[data-test-checkbox="email-track-opens"]')).to.be.checked;
|
||||
|
||||
await click('label[for="email-track-opens"]');
|
||||
expect(find('[data-test-checkbox="email-track-opens"]')).to.not.be.checked;
|
||||
|
||||
await click('[data-test-button="save-members-settings"]');
|
||||
|
||||
expect(this.server.db.settings.findBy({key: 'email_track_opens'}).value).to.equal(false);
|
||||
});
|
||||
});
|
||||
@ -1,5 +1,5 @@
|
||||
import {authenticateSession} from 'ember-simple-auth/test-support';
|
||||
import {click, find} from '@ember/test-helpers';
|
||||
import {click, currentURL, find} from '@ember/test-helpers';
|
||||
import {expect} from 'chai';
|
||||
import {setupApplicationTest} from 'ember-mocha';
|
||||
import {setupMirage} from 'ember-cli-mirage/test-support';
|
||||
@ -18,6 +18,11 @@ describe('Acceptance: Settings - Members email', function () {
|
||||
return await authenticateSession();
|
||||
});
|
||||
|
||||
it('loads non-labs route', async function () {
|
||||
await visit('/settings/members-email');
|
||||
expect(currentURL()).to.equal('/settings/members-email');
|
||||
});
|
||||
|
||||
it('can manage open rate tracking', async function () {
|
||||
this.server.db.settings.update({key: 'email_track_opens'}, {value: 'true'});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user