Added auto-subscribe newsletter count when confirming newsletter creation

refs https://github.com/TryGhost/Team/issues/1528

- used the already-loaded newsletters list to pass the slugs of active newsletters to the confirm modal, this allows use of the `{{members-count-fetcher}}` resource with the query `/members/?filter=newsletters:[...slugs]` to fetch a member and full count metadata
- added inclusion of `{{join}}` helper from `ember-composable-helpers` addon
This commit is contained in:
Kevin Ansfield 2022-04-19 21:56:13 +01:00
parent f6c9ffcf60
commit baf75c39cf
3 changed files with 14 additions and 9 deletions

View File

@ -8,6 +8,7 @@ import {tracked} from '@glimmer/tracking';
export default class EditNewsletterModal extends Component { export default class EditNewsletterModal extends Component {
@service modals; @service modals;
@service store;
static modalOptions = { static modalOptions = {
className: 'fullscreen-modal-full-overlay fullscreen-modal-portal-settings' className: 'fullscreen-modal-full-overlay fullscreen-modal-portal-settings'
@ -16,6 +17,14 @@ export default class EditNewsletterModal extends Component {
@tracked tab = 'settings'; @tracked tab = 'settings';
@tracked optInExisting = this.args.data.newsletter.isNew; @tracked optInExisting = this.args.data.newsletter.isNew;
get activeNewsletterSlugs() {
const activeNewsletters = this.store.peekAll('newsletter').filter((n) => {
return n.status === 'active' && !n.isNew && !n.isDestroyed;
});
return activeNewsletters.map(n => n.slug);
}
willDestroy() { willDestroy() {
super.willDestroy(...arguments); super.willDestroy(...arguments);
this.args.data.newsletter.rollbackAttributes(); this.args.data.newsletter.rollbackAttributes();
@ -48,7 +57,8 @@ export default class EditNewsletterModal extends Component {
const shouldCreate = yield this.modals.open(ConfirmCreateModal, { const shouldCreate = yield this.modals.open(ConfirmCreateModal, {
optInExisting, optInExisting,
newsletter: this.args.data.newsletter newsletter: this.args.data.newsletter,
activeNewsletterSlugs: this.activeNewsletterSlugs
}); });
if (!shouldCreate) { if (!shouldCreate) {

View File

@ -7,17 +7,12 @@
<div class="modal-body"> <div class="modal-body">
<p> <p>
{{#if @data.optInExisting}} {{#if @data.optInExisting}}
{{!-- TODO: add members count once API supports it --}} {{#let (members-count-fetcher query=(hash filter=(concat "newsletters:[" (join @data.activeNewsletterSlugs ", ") "]"))) as |countFetcher|}}
{{!-- {{#let (members-count-fetcher query=(hash filter="")) as |countFetcher|}}
Your newsletter <strong>{{@data.newsletter.name}}</strong> will be Your newsletter <strong>{{@data.newsletter.name}}</strong> will be
immediately made live and your immediately made live and your
{{#if countFetcher.count}}<strong>{{countFetcher.count}}</strong>{{/if}} {{#if countFetcher.count}}<strong>{{countFetcher.count}}</strong>{{/if}}
existing newsletter subscribers will be automatically opted-in to receive it. existing newsletter subscribers will be automatically opted-in to receive it.
{{/let}} --}} {{/let}}
Your newsletter <strong>{{@data.newsletter.name}}</strong> will be
immediately made live and your existing newsletter subscribers
will be automatically opted-in to receive it.
{{else}} {{else}}
Your newsletter <strong>{{@data.newsletter.name}}</strong> will be Your newsletter <strong>{{@data.newsletter.name}}</strong> will be
immediately made live. Your existing newsletter subscribers will immediately made live. Your existing newsletter subscribers will

View File

@ -117,7 +117,7 @@ module.exports = function (defaults) {
includePolyfill: false includePolyfill: false
}, },
'ember-composable-helpers': { 'ember-composable-helpers': {
only: ['optional', 'pick', 'toggle', 'toggle-action'] only: ['join', 'optional', 'pick', 'toggle', 'toggle-action']
}, },
'ember-promise-modals': { 'ember-promise-modals': {
excludeCSS: true excludeCSS: true