Add ability to specify newsletter in a custom sign-up form (#17956)

refs https://github.com/TryGhost/Product/issues/3809

When an input is added to a custom sign-up form with the attribute
`data-members-newsletter`, the value of the input will be used as the
newsletter to subscribe the member to.

apps/portal/src/data-attributes.js

@@ -16,12 +16,18 @@ export function formSubmitHandler({event, form, errorEl, siteUrl, submitHandler}
     let name = (nameInput && nameInput.value) || undefined;
     let emailType = undefined;
     let labels = [];
+    let newsletters = [];
 
     let labelInputs = event.target.querySelectorAll('input[data-members-label]') || [];
     for (let i = 0; i < labelInputs.length; ++i) {
         labels.push(labelInputs[i].value);
     }
 
+    let newsletterInputs = event.target.querySelectorAll('input[data-members-newsletter]') || [];
+    for (let i = 0; i < newsletterInputs.length; ++i) {
+        newsletters.push({id: newsletterInputs[i].value});
+    }
+
     if (form.dataset.membersForm) {
         emailType = form.dataset.membersForm;
     }
@@ -38,6 +44,9 @@ export function formSubmitHandler({event, form, errorEl, siteUrl, submitHandler}
     if (urlHistory) {
         reqBody.urlHistory = urlHistory;
     }
+    if (newsletterInputs.length > 0) {
+        reqBody.newsletters = newsletters;
+    }
 
     fetch(`${siteUrl}/members/api/send-magic-link/`, {
         method: 'POST',

apps/portal/src/tests/data-attributes.test.js

@@ -6,7 +6,7 @@ import * as helpers from '../utils/helpers';
 import {formSubmitHandler, planClickHandler} from '../data-attributes';
 
 // Mock data
-function getMockData() {
+function getMockData({newsletterQuerySelectorResult = null} = {}) {
     const site = FixturesSite.singleTier.basic;
     const member = null;
 
@@ -63,6 +63,9 @@ function getMockData() {
                         value: 'Gold'
                     }];
                 }
+                if (elem === 'input[data-members-newsletter]' && newsletterQuerySelectorResult) {
+                    return newsletterQuerySelectorResult;
+                }
             }
         }
     };
@@ -236,6 +239,61 @@ describe('Member Data attributes:', () => {
             });
         });
     });
+
+    describe('data-members-newsletter', () => {
+        test('includes specified newsletters in request', () => {
+            const {event, form, errorEl, siteUrl, submitHandler} = getMockData({
+                newsletterQuerySelectorResult: [{
+                    value: 'some_newsletter'
+                }]
+            });
+
+            formSubmitHandler({event, form, errorEl, siteUrl, submitHandler});
+
+            expect(window.fetch).toHaveBeenCalledTimes(1);
+            const expectedBody = JSON.stringify({
+                email: 'jamie@example.com',
+                emailType: 'signup',
+                labels: ['Gold'],
+                name: 'Jamie Larsen',
+                autoRedirect: true,
+                urlHistory: [{
+                    path: '/blog/',
+                    refMedium: null,
+                    refSource: 'ghost-explore',
+                    refUrl: 'https://example.com/blog/',
+                    time: 1611234567890
+                }],
+                newsletters: [{id: 'some_newsletter'}]
+            });
+            expect(window.fetch).toHaveBeenCalledWith('https://portal.localhost/members/api/send-magic-link/', {body: expectedBody, headers: {'Content-Type': 'application/json'}, method: 'POST'});
+        });
+
+        test('does not include newsletters in request if there are no newsletter inputs', () => {
+            const {event, form, errorEl, siteUrl, submitHandler} = getMockData({
+                newsletterQuerySelectorResult: []
+            });
+
+            formSubmitHandler({event, form, errorEl, siteUrl, submitHandler});
+
+            expect(window.fetch).toHaveBeenCalledTimes(1);
+            const expectedBody = JSON.stringify({
+                email: 'jamie@example.com',
+                emailType: 'signup',
+                labels: ['Gold'],
+                name: 'Jamie Larsen',
+                autoRedirect: true,
+                urlHistory: [{
+                    path: '/blog/',
+                    refMedium: null,
+                    refSource: 'ghost-explore',
+                    refUrl: 'https://example.com/blog/',
+                    time: 1611234567890
+                }]
+            });
+            expect(window.fetch).toHaveBeenCalledWith('https://portal.localhost/members/api/send-magic-link/', {body: expectedBody, headers: {'Content-Type': 'application/json'}, method: 'POST'});
+        });
+    });
 });
 
 const setup = async ({site, member = null, showPopup = true}) => {