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.
This commit is contained in:
Michael Barrett 2023-09-07 16:31:14 +01:00 committed by GitHub
parent 608795d45a
commit b70fd30a39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 68 additions and 1 deletions

View File

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

View File

@ -6,7 +6,7 @@ import * as helpers from '../utils/helpers';
import {formSubmitHandler, planClickHandler} from '../data-attributes'; import {formSubmitHandler, planClickHandler} from '../data-attributes';
// Mock data // Mock data
function getMockData() { function getMockData({newsletterQuerySelectorResult = null} = {}) {
const site = FixturesSite.singleTier.basic; const site = FixturesSite.singleTier.basic;
const member = null; const member = null;
@ -63,6 +63,9 @@ function getMockData() {
value: 'Gold' 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}) => { const setup = async ({site, member = null, showPopup = true}) => {