Ghost/ghost/admin/app/components/settings/newsletters.hbs
Kevin Ansfield 63b1e4e8ad
Resolved power-select related deprecation warnings for loading components by string (#15466)
no issue

- in many places we were passing a string as an argument to a `<PowerSelect>` related component that referred to a component name, that was throwing deprecation warnings because those strings were used dynamically with `{{component}}` later on which isn't statically analyzable
- switched to passing a component explicitly with `{{component}}`
- https://github.com/embroider-build/embroider/blob/main/REPLACING-COMPONENT-HELPER.md#when-youre-passing-a-component-to-someone-else
2022-09-24 17:00:05 +02:00

230 lines
13 KiB
Handlebars

<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">
<input
type="checkbox"
checked={{this.emailNewsletterEnabled}}
class="gh-input"
{{on "change" this.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}}
<Settings::Newsletters::NewsletterManagement />
<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" {{on "click" (toggle-action "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={{this.setDefaultEmailRecipients}}
@onSegmentChange={{this.setDefaultEmailRecipientsFilter}}
/>
</div>
</div>
{{else}}
<div class="gh-setting-richdd-container gh-setting-rich-dropdown form-group" data-test-select="default-recipients">
<Settings::MembersEmail::DefaultRecipientsSelect
@recipients={{this.recipientsSelectValue}}
@segment={{this.settings.editorDefaultEmailRecipientsFilter}}
@onRecipientsChange={{this.setDefaultEmailRecipients}}
@onSegmentChange={{this.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" {{on "click" (toggle-action "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={{this.setMailgunRegion}}
@class="gh-select"
@searchEnabled={{false}}
@triggerComponent={{component "gh-power-select/trigger"}}
as |region|
>
{{region.flag}} {{region.name}}
</PowerSelect>
</div>
</GhFormGroup>
<GhFormGroup @class="no-margin">
<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
/>
</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" 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
/>
<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}}
{{#if this.feature.emailClicks }}
<div class="gh-expandable-block">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Newsletter analytics</h4>
<p class="gh-expandable-description">Track how many members are opening emails and clicking links</p>
</div>
<button type="button" class="gh-btn" {{on "click" (toggle-action "newsletterTrackingOpen" this)}} data-test-toggle-membersemail>
<span>{{if this.newsletterTrackingOpen "Close" "Expand"}}</span>
</button>
</div>
<div class="gh-expandable-content">
{{#liquid-if this.newsletterTrackingOpen}}
<div class="mb6">
<div class="gh-newsletter-tracking">
<div class="gh-newsletter-tracking-row">
<div>
<h4 class="gh-newsletter-tracking-title">Track newsletter opens</h4>
</div>
<div class="for-switch">
<label class="switch" data-test-label="email-track-opens">
<input
id="email-track-opens"
type="checkbox"
checked={{this.settings.emailTrackOpens}}
class="gh-input"
{{on "change" this.toggleEmailTrackOpens}}
data-test-checkbox="email-track-opens"
>
<span class="input-toggle-component mt1"></span>
</label>
</div>
</div>
<div class="gh-newsletter-tracking-row">
<div>
<h4 class="gh-newsletter-tracking-title">Track newsletter link clicks</h4>
</div>
<div class="for-switch">
<label class="switch" data-test-label="email-track-opens">
<input
id="email-track-clicks"
type="checkbox"
checked={{this.settings.emailTrackClicks}}
class="gh-input"
{{on "change" this.toggleEmailTrackClicks}}
data-test-checkbox="email-track-clicks"
>
<span class="input-toggle-component mt1"></span>
</label>
</div>
</div>
</div>
</div>
{{/liquid-if}}
</div>
</div>
{{else}}
<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" data-test-label="email-track-opens">
<input
id="email-track-opens"
type="checkbox"
checked={{this.settings.emailTrackOpens}}
class="gh-input"
{{on "change" this.toggleEmailTrackOpens}}
data-test-checkbox="email-track-opens"
>
<span class="input-toggle-component mt1"></span>
</label>
</div>
</div>
</div>
{{/if}}
</div>
</section>
{{/if}}