From a5dcae80e7699a66ba7c71b75ac3559008f13960 Mon Sep 17 00:00:00 2001 From: Sag Date: Wed, 6 Dec 2023 16:56:25 -0300 Subject: [PATCH] Updated copy during email verification in newsletter settings (#19265) fixes PROD-202 --- .../newsletters/NewsletterDetailModal.tsx | 7 +++-- .../test/acceptance/email/newsletters.test.ts | 28 ++++--------------- 2 files changed, 10 insertions(+), 25 deletions(-) diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx index d340fa72d2..23341e7b8a 100644 --- a/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx +++ b/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx @@ -533,17 +533,18 @@ const NewsletterDetailModalContent: React.FC<{newsletter: Newsletter; onlyOne: b savingDelay: 500, onSave: async () => { const {newsletters: [updatedNewsletter], meta: {sent_email_verification: [emailToVerify] = []} = {}} = await editNewsletter(formState); ``; + const previousFrom = renderSenderEmail(updatedNewsletter, config, defaultEmailAddress); + const previousReplyTo = renderReplyToEmail(updatedNewsletter, config, supportEmailAddress, defaultEmailAddress) || previousFrom; + let title; let prompt; if (emailToVerify && emailToVerify === 'sender_email') { - const previousFrom = renderSenderEmail(updatedNewsletter, config, defaultEmailAddress); title = 'Confirm newsletter email address'; prompt = <>We‘ve sent a confirmation email to {formState.sender_email}. Until the address has been verified, newsletters will be sent from the {updatedNewsletter.sender_email ? ' previous' : ' default'} email address{previousFrom ? ` (${previousFrom})` : ''}.; } else if (emailToVerify && emailToVerify === 'sender_reply_to') { - const previousReplyTo = renderReplyToEmail(updatedNewsletter, config, supportEmailAddress, defaultEmailAddress); title = 'Confirm reply-to address'; - prompt = <>We‘ve sent a confirmation email to {formState.sender_reply_to}. Until the address has been verified, newsletters will use the previous reply-to address{previousReplyTo ? ` (${previousReplyTo})` : ''}.; + prompt = <>We‘ve sent a confirmation email to {formState.sender_reply_to}. Until the address has been verified, replies will continue to go to {previousReplyTo}.; } if (title && prompt) { diff --git a/apps/admin-x-settings/test/acceptance/email/newsletters.test.ts b/apps/admin-x-settings/test/acceptance/email/newsletters.test.ts index 7a4e8ba9d4..7f8e18cdc5 100644 --- a/apps/admin-x-settings/test/acceptance/email/newsletters.test.ts +++ b/apps/admin-x-settings/test/acceptance/email/newsletters.test.ts @@ -247,12 +247,12 @@ test.describe('Newsletter settings', async () => { await expect(page.getByTestId('confirmation-modal')).toHaveCount(1); await expect(page.getByTestId('confirmation-modal')).toHaveText(/Confirm reply-to address/); await expect(page.getByTestId('confirmation-modal')).toHaveText(/sent a confirmation email to test@test.com/); - await expect(page.getByTestId('confirmation-modal')).toHaveText(/previous reply-to address \(support@example.com\)/); + await expect(page.getByTestId('confirmation-modal')).toHaveText(/replies will continue to go to support@example.com/); }); }); - test.describe('For Ghost (Pro) users with custom domain', () => { - test('Allow sender and reply-to addresses to be changed without verification, but not their domain name', async ({page}) => { + test.describe('For Ghost (Pro) users with custom sending domain', () => { + test('Allow sender address to be changed partially (username but not domain name)', async ({page}) => { await mockApi({page, requests: { ...globalDataRequests, browseNewsletters: {method: 'GET', path: '/newsletters/?include=count.active_members%2Ccount.posts&limit=50', response: responseFixtures.newsletters}, @@ -283,25 +283,17 @@ test.describe('Newsletter settings', async () => { await section.getByText('Awesome newsletter').click(); const modal = page.getByTestId('newsletter-modal'); const senderEmail = modal.getByLabel('Sender email'); - const replyToEmail = modal.getByLabel('Reply-to email'); - - // The sending domain is rendered as placeholder text - expect(modal).toHaveText(/@customdomain\.com/); // The sender email field should keep the username part of the email address await senderEmail.fill('harry@potter.com'); expect(await senderEmail.inputValue()).toBe('harry'); - // Full flexibility for the reply-to address - await replyToEmail.fill('hermione@customdomain.com'); - expect(await replyToEmail.inputValue()).toBe('hermione@customdomain.com'); - // The new username is saved without a confirmation popup await modal.getByRole('button', {name: 'Save'}).click(); await expect(page.getByTestId('confirmation-modal')).toHaveCount(0); }); - test('Reply-To addresses without a matching domain require verification', async ({page}) => { + test('Allow full customisation of the reply-to address, with verification', async ({page}) => { await mockApi({page, requests: { ...globalDataRequests, browseNewsletters: {method: 'GET', path: '/newsletters/?include=count.active_members%2Ccount.posts&limit=50', response: responseFixtures.newsletters}, @@ -331,26 +323,18 @@ test.describe('Newsletter settings', async () => { const section = page.getByTestId('newsletters'); await section.getByText('Awesome newsletter').click(); const modal = page.getByTestId('newsletter-modal'); - const senderEmail = modal.getByLabel('Sender email'); const replyToEmail = modal.getByLabel('Reply-to email'); - // The sending domain is rendered as placeholder text - expect(modal).toHaveText(/@customdomain\.com/); - - // The sender email field should keep the username part of the email address - await senderEmail.fill('harry@potter.com'); - expect(await senderEmail.inputValue()).toBe('harry'); - // Full flexibility for the reply-to address await replyToEmail.fill('hermione@granger.com'); expect(await replyToEmail.inputValue()).toBe('hermione@granger.com'); - // The new username is saved without a confirmation popup + // There is a verification popup for the new reply-to address await modal.getByRole('button', {name: 'Save'}).click(); await expect(page.getByTestId('confirmation-modal')).toHaveCount(1); await expect(page.getByTestId('confirmation-modal')).toHaveText(/Confirm reply-to address/); await expect(page.getByTestId('confirmation-modal')).toHaveText(/sent a confirmation email to hermione@granger.com/); - await expect(page.getByTestId('confirmation-modal')).toHaveText(/previous reply-to address \(support@example.com\)/); + await expect(page.getByTestId('confirmation-modal')).toHaveText(/replies will continue to go to support@example.com/); }); }); });