2022-03-31 13:06:21 +03:00
<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">
2022-03-31 13:27:39 +03:00
<label class="switch">
<input
type="checkbox"
checked= {{ this .emailNewsletterEnabled }}
class="gh-input"
{{ on "change" this .toggleEmailNewsletterEnabled }}
name="email-newsletter-enabled"
data-test-checkbox="email-newsletter-enabled"
>
2022-03-31 13:06:21 +03:00
<span class="input-toggle-component mt1"></span>
</label>
</div>
</div>
</div>
</div>
</section>
{{ # if this .emailNewsletterEnabled }}
2022-04-01 18:05:26 +03:00
<Settings::MembersEmailLabs::NewsletterManagement @toggleEmailDesignSettings= {{ @ toggleEmailDesignSettings }} />
2022-03-31 13:06:21 +03:00
<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>
2022-03-31 13:27:39 +03:00
<button type="button" class="gh-btn" {{ on "click" ( toggle-action "defaultRecipientsOpen" this ) }} data-test-toggle-membersemail>
2022-03-31 13:06:21 +03:00
<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 }}
2022-03-31 13:27:39 +03:00
@onRecipientsChange= {{ this .setDefaultEmailRecipients }}
@onSegmentChange= {{ this .setDefaultEmailRecipientsFilter }}
2022-03-31 13:06:21 +03:00
/>
</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 }}
2022-03-31 13:27:39 +03:00
@onRecipientsChange= {{ this .setDefaultEmailRecipients }}
@onSegmentChange= {{ this .setDefaultEmailRecipientsFilter }}
2022-03-31 13:06:21 +03:00
/>
</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>
2022-03-31 13:27:39 +03:00
<button type="button" class="gh-btn" {{ on "click" ( toggle-action "membersEmailOpen" this ) }} data-test-toggle-membersemail>
2022-03-31 13:06:21 +03:00
<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 }}
2022-03-31 13:27:39 +03:00
@onChange= {{ this .setMailgunRegion }}
2022-03-31 13:06:21 +03:00
@class="gh-select"
@searchEnabled= {{ false }}
@triggerComponent="gh-power-select/trigger"
as |region|
>
{{ region .flag }} {{ region .name }}
</PowerSelect>
</div>
</GhFormGroup>
<GhFormGroup @class="no-margin">
2022-03-31 13:27:39 +03:00
<label class="fw6 f8" for="mailgun-domain">Mailgun domain</label>
<input
id="mailgun-domain"
type="text"
class="gh-input mt1"
value= {{ this .mailgunSettings .domain }}
{{ on "input" this .setMailgunDomain }}
data-test-mailgun-domain-input
2022-03-31 13:06:21 +03:00
/>
</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>
2022-03-31 13:27:39 +03:00
<label class="fw6 f8" for="mailgun-private-api">Mailgun Private API key</label>
<input
id="mailgun-private-api"
type="password"
value= {{ this .mailgunSettings .apiKey }}
{{ on "input" this .setMailgunApiKey }}
class="gh-input mt1 password"
autocomplete="new-password"
data-test-mailgun-api-key-input
2022-03-31 13:06:21 +03:00
/>
<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">
2022-03-31 13:37:38 +03:00
<label class="switch" data-test-label="email-track-opens">
2022-03-31 13:27:39 +03:00
<input
id="email-track-opens"
type="checkbox"
checked= {{ this .settings .emailTrackOpens }}
class="gh-input"
{{ on "change" this .toggleEmailTrackOpens }}
data-test-checkbox="email-track-opens"
>
2022-03-31 13:06:21 +03:00
<span class="input-toggle-component mt1"></span>
</label>
</div>
</div>
</div>
</div>
</section>
{{ / if }}