This repository has been archived by the owner on Nov 28, 2022. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Extracted PSM email settings into separate component
- Loading branch information
1 parent
3259e7c
commit ecff122
Showing
4 changed files
with
174 additions
and
139 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import Component from '@ember/component'; | ||
| import validator from 'validator'; | ||
| import {alias, or} from '@ember/object/computed'; | ||
| import {computed} from '@ember/object'; | ||
| import {inject as service} from '@ember/service'; | ||
| import {task} from 'ember-concurrency'; | ||
|
|
||
| export default Component.extend({ | ||
| ajax: service(), | ||
| ghostPaths: service(), | ||
| notifications: service(), | ||
| settings: service(), | ||
|
|
||
| post: null, | ||
| emailTestScratch: '', | ||
| sendTestEmailError: '', | ||
| savePost: null, | ||
|
|
||
| close() {}, | ||
| toggleEmailPreviewModal() {}, | ||
|
|
||
| emailSubject: or('emailSubjectScratch', 'post.title'), | ||
| emailSubjectScratch: alias('post.emailSubjectScratch'), | ||
|
|
||
| mailgunError: computed('settings.memberSubscriptionSettings', function () { | ||
| return !this._isMailgunConfigured(); | ||
| }), | ||
|
|
||
| actions: { | ||
| setEmailSubject(emailSubject) { | ||
| // Grab the post and current stored email subject | ||
| let post = this.post; | ||
| let currentEmailSubject = post.get('emailSubject'); | ||
|
|
||
| // If the subject entered matches the stored email subject, do nothing | ||
| if (currentEmailSubject === emailSubject) { | ||
| return; | ||
| } | ||
|
|
||
| // If the subject entered is different, set it as the new email subject | ||
| post.set('emailSubject', emailSubject); | ||
|
|
||
| // Make sure the email subject is valid and if so, save it into the post | ||
| return post.validate({property: 'emailSubject'}).then(() => { | ||
| if (post.get('isNew')) { | ||
| return; | ||
| } | ||
|
|
||
| return this.savePost.perform(); | ||
| }); | ||
| }, | ||
|
|
||
| toggleEmailPreview() { | ||
| this.toggleEmailPreviewModal(); | ||
| }, | ||
|
|
||
| discardEnter() { | ||
| return false; | ||
| } | ||
| }, | ||
|
|
||
| sendTestEmail: task(function* () { | ||
| try { | ||
| const resourceId = this.post.id; | ||
| const testEmail = this.emailTestScratch.trim(); | ||
| if (!validator.isEmail(testEmail)) { | ||
| this.set('sendTestEmailError', 'Please enter a valid email'); | ||
| return false; | ||
| } | ||
| if (!this._isMailgunConfigured()) { | ||
| this.set('sendTestEmailError', 'Please configure Mailgun in Labs → Members'); | ||
| return false; | ||
| } | ||
| this.set('sendTestEmailError', ''); | ||
| const url = this.ghostPaths.url.api('/email_preview/posts', resourceId); | ||
| const data = {emails: [testEmail]}; | ||
| const options = { | ||
| data, | ||
| dataType: 'json' | ||
| }; | ||
| return yield this.ajax.post(url, options); | ||
| } catch (error) { | ||
| if (error) { | ||
| this.notifications.showAPIError(error, {key: 'send.previewEmail'}); | ||
| } | ||
| } | ||
| }).drop(), | ||
|
|
||
| // TODO: put this on settings model | ||
| _isMailgunConfigured() { | ||
| let subSettingsValue = this.settings.get('membersSubscriptionSettings'); | ||
| let subscriptionSettings = subSettingsValue ? JSON.parse(subSettingsValue) : {}; | ||
| if (Object.keys(subscriptionSettings).includes('mailgunApiKey')) { | ||
| return (subscriptionSettings.mailgunApiKey && subscriptionSettings.mailgunDomain); | ||
| } | ||
| return true; | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| <div class="settings-menu-header subview"> | ||
| <button {{on "click" this.close}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button> | ||
| <h4>Email newsletter</h4> | ||
| <div style="width:23px;"></div> | ||
| </div> | ||
|
|
||
| <div class="settings-menu-content settings-menu-email"> | ||
| {{#if mailgunError}} | ||
| <p class="gh-box gh-box-warning settings-menu-mailgun-warning"> | ||
| {{svg-jar "info" class="w5 h5 fill-yellow nl1"}} | ||
| You need to configure Mailgun in {{#link-to "settings.labs" data-test-nav="labs"}}Labs → Members settings{{/link-to}} to | ||
| enable sending posts in email. | ||
| </p> | ||
| {{/if}} | ||
| <form {{action "discardEnter" on="submit"}}> | ||
| {{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="emailSubject"}} | ||
| <label for="og-title">Subject</label> | ||
| {{gh-text-input | ||
| class="post-setting-email-subject" | ||
| id="email-subject" | ||
| name="post-setting-email-subject" | ||
| placeholder=(truncate emailSubject 40) | ||
| value=(readonly emailSubjectScratch) | ||
| input=(action (mut emailSubjectScratch) value="target.value") | ||
| focus-out=(action "setEmailSubject" emailSubjectScratch) | ||
| stopEnterKeyDownPropagation=true | ||
| disabled=deliveredAction | ||
| data-test-field="email-subject"}} | ||
| {{gh-error-message errors=post.errors property="emailSubject" data-test-error="email-subject"}} | ||
| {{/gh-form-group}} | ||
|
|
||
| <div class="form-group"> | ||
| <div class="flex"> | ||
| <label class="nowrap flex-auto">Test email</label> | ||
| <button type="button" class="gh-btn gh-btn-link settings-menu-email-button" onclick={{action "toggleEmailPreview"}} | ||
| data-test-button="toggle-email-preview"> | ||
| <span class="blue"> | ||
| Preview in browser | ||
| </span> | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="{{if mailgunError "disabled"}}"> | ||
| {{gh-text-input | ||
| class="post-setting-email-test" | ||
| id="email-test" | ||
| name="post-setting-email-test" | ||
| placeholder=(truncate 'noreply@example.com' 40) | ||
| value=(readonly emailTestScratch) | ||
| input=(action (mut emailTestScratch) value="target.value") | ||
| stopEnterKeyDownPropagation=true | ||
| disabled=mailgunError | ||
| data-test-field="email-test"}} | ||
|
|
||
| {{#if sendTestEmailError}} | ||
| <div class="error"><p class="response">{{sendTestEmailError}}</p></div> | ||
| {{/if}} | ||
|
|
||
| {{gh-task-button "Send test email" | ||
| task=sendTestEmail | ||
| successText="Email sent" | ||
| runningText="Sending..." | ||
| class="gh-btn w-100 mt2 gh-btn-icon" | ||
| disabled=mailgunError | ||
| data-test-send-test-mail=true | ||
| }} | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> |