From 95d7e3ddf2058ad75af8dfc75b108f385bf34103 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Tue, 12 Apr 2022 14:01:27 +0100 Subject: [PATCH] Updated newsletter model and form for latest schema refs https://github.com/TryGhost/Team/issues/1500 - `senderEmail` is now nullable with a fallback to `noreply@{site domain}` - `senderName` is not nullable and has no fallback - updated preview and input placeholder to match real-world behaviour - inserted site title as the default value when creating a new newsletter to avoid friction with the sender name needing to be filled in when saving - switched `senderReplyTo` input field to a select with "newsletter" and "support" options - added basic `` component as `` had re-rendering issues causing loss of selected value when the label of the newsletter email changed to reflect a custom newsletter email value --- app/components/inputs/select.hbs | 6 +++++ app/components/inputs/select/option.hbs | 7 ++++++ .../modals/edit-newsletter/preview.hbs | 2 +- .../modals/edit-newsletter/settings.hbs | 24 +++++++++---------- .../modals/edit-newsletter/settings.js | 8 +++++-- app/models/newsletter.js | 2 +- .../members-email-labs/new-newsletter.js | 5 +++- app/validators/newsletter.js | 18 +++++--------- ember-cli-build.js | 2 +- 9 files changed, 44 insertions(+), 30 deletions(-) create mode 100644 app/components/inputs/select.hbs create mode 100644 app/components/inputs/select/option.hbs diff --git a/app/components/inputs/select.hbs b/app/components/inputs/select.hbs new file mode 100644 index 000000000..c073bcb70 --- /dev/null +++ b/app/components/inputs/select.hbs @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/app/components/inputs/select/option.hbs b/app/components/inputs/select/option.hbs new file mode 100644 index 000000000..0b2c0b371 --- /dev/null +++ b/app/components/inputs/select/option.hbs @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/app/components/modals/edit-newsletter/preview.hbs b/app/components/modals/edit-newsletter/preview.hbs index 704210c06..9f893ad2e 100644 --- a/app/components/modals/edit-newsletter/preview.hbs +++ b/app/components/modals/edit-newsletter/preview.hbs @@ -2,7 +2,7 @@

- {{or @newsletter.senderName this.config.blogTitle}} <{{full-email-address (or @newsletter.senderEmail this.settings.membersFromAddress)}}> + {{@newsletter.senderName}} <{{full-email-address (or @newsletter.senderEmail "noreply")}}>

To: Jamie Larson <jamie@example.com>

diff --git a/app/components/modals/edit-newsletter/settings.hbs b/app/components/modals/edit-newsletter/settings.hbs index a0812e979..f1f1f73ef 100644 --- a/app/components/modals/edit-newsletter/settings.hbs +++ b/app/components/modals/edit-newsletter/settings.hbs @@ -8,7 +8,7 @@ type="text" class="gh-input miw-100 form-text" value={{@newsletter.name}} - placeholder={{this.config.blogTitle}} + placeholder={{this.settings.title}} {{on "input" (fn this.onInput "name")}} /> @@ -33,7 +33,6 @@ type="text" class="gh-input miw-100 form-text" value={{@newsletter.senderName}} - placeholder={{this.config.blogTitle}} {{on "input" (fn this.onInput "senderName")}} /> @@ -46,22 +45,23 @@ type="text" class="gh-input miw-100 form-text" value={{@newsletter.senderEmail}} - placeholder={{full-email-address this.settings.membersFromAddress}} + placeholder={{full-email-address "noreply"}} {{on "input" (fn this.onInput "senderEmail")}} /> - - Reply-to email address + + @value={{@newsletter.senderReplyTo}} + @onChange={{fn this.onValueChange "senderReplyTo"}} + as |select| + > + Newsletter ({{full-email-address (or @newsletter.senderEmail "noreply")}}) + Support ({{full-email-address this.settings.membersSupportAddress}}) +
@@ -75,7 +75,7 @@ type="checkbox" id="subscribe-on-signup" checked={{@newsletter.subscribeOnSignup}} - {{on "change" (fn this.onChange "subscribeOnSignup")}} + {{on "change" (fn this.onCheckboxChange "subscribeOnSignup")}} > diff --git a/app/components/modals/edit-newsletter/settings.js b/app/components/modals/edit-newsletter/settings.js index fa46536ca..2cdb6db8d 100644 --- a/app/components/modals/edit-newsletter/settings.js +++ b/app/components/modals/edit-newsletter/settings.js @@ -3,11 +3,10 @@ import {action} from '@ember/object'; import {inject as service} from '@ember/service'; export default class EditNewsletterSettingsForm extends Component { - @service config; @service settings; @action - onChange(property, event) { + onCheckboxChange(property, event) { this.args.newsletter[property] = event.target.checked; } @@ -20,4 +19,9 @@ export default class EditNewsletterSettingsForm extends Component { onInput(property, event) { this.args.newsletter[property] = event.target.value; } + + @action + onValueChange(property, value) { + this.args.newsletter[property] = value; + } } diff --git a/app/models/newsletter.js b/app/models/newsletter.js index 35ee9d7cd..1557bdcc7 100644 --- a/app/models/newsletter.js +++ b/app/models/newsletter.js @@ -10,7 +10,7 @@ export default class Newsletter extends Model.extend(ValidationEngine) { @attr senderName; @attr senderEmail; - @attr senderReplyTo; + @attr({defaultValue: 'newsletter'}) senderReplyTo; @attr({defaultValue: 'active'}) status; @attr({defaultValue: ''}) recipientFilter; diff --git a/app/routes/settings/members-email-labs/new-newsletter.js b/app/routes/settings/members-email-labs/new-newsletter.js index 6eb958634..3dfebd642 100644 --- a/app/routes/settings/members-email-labs/new-newsletter.js +++ b/app/routes/settings/members-email-labs/new-newsletter.js @@ -6,12 +6,15 @@ import {inject as service} from '@ember/service'; export default class NewNewsletterRoute extends AdminRoute { @service modals; @service router; + @service settings; @service store; newsletterModal = null; model() { - return this.store.createRecord('newsletter'); + return this.store.createRecord('newsletter', { + senderName: this.settings.get('title') + }); } setupController(controller, model) { diff --git a/app/validators/newsletter.js b/app/validators/newsletter.js index 92f88467f..875e4234a 100644 --- a/app/validators/newsletter.js +++ b/app/validators/newsletter.js @@ -12,7 +12,7 @@ export default BaseValidator.create({ } if (!validator.isLength(model.name || '', 0, 191)) { - model.errors.add('name', 'Name cannot be longer than 191 characters.'); + model.errors.add('name', 'Cannot be longer than 191 characters.'); this.invalidate(); } @@ -26,7 +26,7 @@ export default BaseValidator.create({ } if (!validator.isLength(model.senderName || '', 0, 191)) { - model.errors.add('senderName', 'Sender name cannot be longer than 191 characters.'); + model.errors.add('senderName', 'Cannot be longer than 191 characters.'); this.invalidate(); } @@ -34,16 +34,13 @@ export default BaseValidator.create({ }, senderEmail(model) { - if (isBlank(model.senderEmail)) { - model.errors.add('senderEmail', 'Please enter a newsletter email address.'); - this.invalidate(); - } else if (!validator.isEmail(model.senderEmail)) { + if (model.senderEmail && !validator.isEmail(model.senderEmail)) { model.errors.add('senderEmail', 'Invalid email.'); this.invalidate(); } if (!validator.isLength(model.senderEmail || '', 0, 191)) { - model.errors.add('senderEmail', 'Sender email cannot be longer than 191 characters.'); + model.errors.add('senderEmail', 'Cannot be longer than 191 characters.'); this.invalidate(); } @@ -54,13 +51,10 @@ export default BaseValidator.create({ if (isBlank(model.senderReplyTo)) { model.errors.add('senderReplyTo', 'Please enter a reply-to email address.'); this.invalidate(); - } else if (!validator.isEmail(model.senderReplyTo)) { - model.errors.add('senderReplyTo', 'Invalid email.'); - this.invalidate(); } - if (!validator.isLength(model.senderReplyTo || '', 0, 191)) { - model.errors.add('senderReplyTo', 'Reply-to email cannot be longer than 191 characters.'); + if (!validator.isIn(model.senderReplyTo, ['newsletter', 'support'])) { + model.errors.add('senderReplyTo', 'Can only be set to "newsletter" or "support".'); this.invalidate(); } diff --git a/ember-cli-build.js b/ember-cli-build.js index ad4a4dcc9..3f5b2743b 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -117,7 +117,7 @@ module.exports = function (defaults) { includePolyfill: false }, 'ember-composable-helpers': { - only: ['optional', 'toggle', 'toggle-action'] + only: ['optional', 'pick', 'toggle', 'toggle-action'] }, 'ember-promise-modals': { excludeCSS: true