Wired member newsletter subscription to existing toggle

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

With multiple newsletters, the subscribed property on a member is replaced by newsletter(s) [] which defines member's subscription instead. This change -

- updates the existing subscription toggle for member on detail screen to work with new backend
- shows the new multiple newsletter subscription UI only if site has more than 1 newsletters

app/components/gh-member-settings-form.hbs

@@ -64,7 +64,7 @@
                         <p> Maximum: <b>500</b> characters. You’ve used
                             {{gh-count-down-characters this.scratchMember.note 500}}</p>
                     </GhFormGroup>
-                    {{#if (not (feature "multipleNewsletters"))}}
+                    {{#if this.hasSingleNewsletter}}
                         {{#if (not-eq this.settings.editorDefaultEmailRecipients "disabled")}}
                             <GhFormGroup @classNames="gh-members-subscribed-checkbox mb0">
                                 <div class="flex justify-between items-center">
@@ -79,6 +79,7 @@
                                                 @type="checkbox"
                                                 id="subscribed-checkbox"
                                                 name="subscribed"
+                                                {{on "click" this.updateNewsletterPreference}}
                                                 data-test-checkbox="member-subscribed"
                                             />
                                             <span class="input-toggle-component"></span>
@@ -91,7 +92,7 @@
                 </div>
             </div>
 
-            {{#if (feature "multipleNewsletters")}}
+            {{#if this.hasMultipleNewsletters}}
                 <Member::NewsletterPreference
                     @member={{this.member}}
                     @newsletters={{this.newslettersList}}

app/components/gh-member-settings-form.js

@@ -49,6 +49,17 @@ export default class extends Component {
         return hasAnActivePaidProduct;
     }
 
+    get hasSingleNewsletter() {
+        if (!this.feature.get('multipleNewsletters')) {
+            return true;
+        }
+        return this.newslettersList?.length === 1;
+    }
+
+    get hasMultipleNewsletters() {
+        return !!(this.feature.get('multipleNewsletters') && this.newslettersList?.length > 1);
+    }
+
     get isCreatingComplimentary() {
         return this.args.isSaveRunning;
     }
@@ -108,6 +119,16 @@ export default class extends Component {
         return this.settings.get('stripeConnectAccountId');
     }
 
+    @action
+    updateNewsletterPreference(event) {
+        if (!event.target.checked) {
+            this.member.set('newsletters', []);
+        } else if (this.newslettersList.firstObject) {
+            const newsletter = this.newslettersList.firstObject;
+            this.member.set('newsletters', [newsletter]);
+        }
+    }
+
     @action
     setup() {
         this.fetchProducts.perform();