Updated newsletter email verification to render the verified address (#19148)

refs GRO-80
- added a new meta field "email_verified" to the /verification endpoint
for newsletters. This meta field contains which email has been verified,
"sender_email" or "sender_reply_to"
- updated copy in newsletter settings, based on which email has been
verified

apps/admin-x-framework/src/api/newsletters.ts

@@ -87,6 +87,10 @@ export interface NewslettersEditResponseType extends NewslettersResponseType {
     meta?: Meta & {sent_email_verification: string[]}
 }
 
+export interface NewslettersVerifyResponseType extends NewslettersResponseType {
+    meta?: Meta & {email_verified: string}
+}
+
 export const useEditNewsletter = createMutation<NewslettersEditResponseType, Newsletter>({
     method: 'PUT',
     path: newsletter => `/newsletters/${newsletter.id}/`,
@@ -99,7 +103,7 @@ export const useEditNewsletter = createMutation<NewslettersEditResponseType, New
     }
 });
 
-export const useVerifyNewsletterEmail = createMutation<NewslettersResponseType, {token: string}>({
+export const useVerifyNewsletterEmail = createMutation<NewslettersVerifyResponseType, {token: string}>({
     method: 'PUT',
     path: () => '/newsletters/verifications/',
     body: ({token}) => ({token}),

apps/admin-x-settings/src/components/settings/email/Newsletters.tsx

@@ -48,11 +48,24 @@ const Newsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
 
         const verify = async () => {
             try {
-                const {newsletters: [updatedNewsletter]} = await verifyEmail({token: verifyEmailToken});
+                const {newsletters: [updatedNewsletter], meta: {email_verified: emailVerified = []} = {}} = await verifyEmail({token: verifyEmailToken});
+                let title;
+                let prompt;
+
+                if (emailVerified && emailVerified === 'sender_email') {
+                    title = 'Newsletter email verified';
+                    prompt = <>Newsletter <NavigateToNewsletter id={updatedNewsletter.id}>{updatedNewsletter.name}</NavigateToNewsletter> will now be sent from <strong>{updatedNewsletter.sender_email}</strong>.</>;
+                } else if (emailVerified && emailVerified === 'sender_reply_to') {
+                    title = 'Reply-to address verified';
+                    prompt = <>Newsletter <NavigateToNewsletter id={updatedNewsletter.id}>{updatedNewsletter.name}</NavigateToNewsletter> will now use <strong>{updatedNewsletter.sender_reply_to}</strong> as the reply-to address.</>;
+                } else {
+                    title = 'Email address verified';
+                    prompt = <>Email address for newsletter <NavigateToNewsletter id={updatedNewsletter.id}>{updatedNewsletter.name}</NavigateToNewsletter> has been changed.</>;
+                }
 
                 NiceModal.show(ConfirmationModal, {
-                    title: 'Email address verified',
-                    prompt: <>Success! Email address for newsletter <NavigateToNewsletter id={updatedNewsletter.id}>{updatedNewsletter.name}</NavigateToNewsletter> has been changed.</>,
+                    title,
+                    prompt,
                     okLabel: 'Close',
                     cancelLabel: '',
                     onOk: confirmModal => confirmModal?.remove()

apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx

@@ -34,10 +34,6 @@ const renderSenderEmail = (newsletter: Newsletter, config: Config, defaultEmailA
 };
 
 const renderReplyToEmail = (newsletter: Newsletter, config: Config, supportEmailAddress: string|undefined, defaultEmailAddress: string|undefined) => {
-    if (!newsletter.sender_reply_to) {
-        return '';
-    }
-
     if (newsletter.sender_reply_to === 'newsletter') {
         return renderSenderEmail(newsletter, config, defaultEmailAddress);
     }
@@ -559,44 +555,31 @@ const NewsletterDetailModalContent: React.FC<{newsletter: Newsletter; onlyOne: b
         initialState: newsletter,
         savingDelay: 500,
         onSave: async () => {
-            const {newsletters, meta} = await editNewsletter(formState);
-            if (meta?.sent_email_verification) {
-                if (meta?.sent_email_verification[0] === 'sender_email') {
-                    const previousFrom = renderSenderEmail(newsletters[0], config, defaultEmailAddress);
+            const {newsletters: [updatedNewsletter], meta: {sent_email_verification: [emailToVerify] = []} = {}} = await editNewsletter(formState); ``;
+            let title;
+            let prompt;
 
-                    NiceModal.show(ConfirmationModal, {
-                        title: 'Confirm newsletter email address',
-                        prompt: <>
-                            We&lsquo;ve sent a confirmation email to <strong>{formState.sender_email}</strong>.
-                            Until the address has been verified newsletters will be sent from the
-                            {newsletters[0].sender_email ? ' previous' : ' default'} email address
-                            ({previousFrom}).
-                        </>,
-                        cancelLabel: '',
-                        onOk: (confirmModal) => {
-                            confirmModal?.remove();
-                            modal.remove();
-                            updateRoute('newsletters');
-                        }
-                    });
-                } else if (meta?.sent_email_verification[0] === 'sender_reply_to') {
-                    const previousReplyTo = renderReplyToEmail(newsletters[0], config, supportEmailAddress, defaultEmailAddress);
+            if (emailToVerify && emailToVerify === 'sender_email') {
+                const previousFrom = renderSenderEmail(updatedNewsletter, config, defaultEmailAddress);
+                title = 'Confirm newsletter email address';
+                prompt = <>We&lsquo;ve sent a confirmation email to <strong>{formState.sender_email}</strong>. 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&lsquo;ve sent a confirmation email to <strong>{formState.sender_reply_to}</strong>. Until the address has been verified, newsletters will use the previous reply-to address{previousReplyTo ? ` (${previousReplyTo})` : ''}.</>;
+            }
 
-                    NiceModal.show(ConfirmationModal, {
-                        title: 'Confirm reply-to address',
-                        prompt: <>
-                            We&lsquo;ve sent a confirmation email to <strong>{formState.sender_reply_to}</strong>.
-                            Until the address has been verified, newsletters will use the previous reply-to address
-                            {previousReplyTo ? ` (${previousReplyTo})` : ''}.
-                        </>,
-                        cancelLabel: '',
-                        onOk: (confirmModal) => {
-                            confirmModal?.remove();
-                            modal.remove();
-                            updateRoute('newsletters');
-                        }
-                    });
-                }
+            if (title && prompt) {
+                NiceModal.show(ConfirmationModal, {
+                    title: title,
+                    prompt: prompt,
+                    cancelLabel: '',
+                    onOk: (confirmModal) => {
+                        confirmModal?.remove();
+                        modal.remove();
+                        updateRoute('newsletters');
+                    }
+                });
             }
         },
         onSaveError: handleError,

ghost/core/core/server/services/newsletters/NewslettersService.js

@@ -237,7 +237,12 @@ class NewslettersService {
         const attrs = {};
         attrs[property] = value;
 
-        return this.NewsletterModel.edit(attrs, {id});
+        const updatedNewsletter = await this.NewsletterModel.edit(attrs, {id});
+
+        updatedNewsletter.meta = updatedNewsletter.meta || {};
+        updatedNewsletter.meta.email_verified = property;
+
+        return updatedNewsletter;
     }
 
     /* Email verification Internals */

ghost/core/test/e2e-api/admin/__snapshots__/newsletters.test.js.snap

@@ -2331,6 +2331,9 @@ exports[`Newsletters API Can verify property updates 3: [text 1] 1`] = `
 
 exports[`Newsletters API Can verify property updates 4: [body] 1`] = `
 Object {
+  "meta": Object {
+    "email_verified": "sender_email",
+  },
   "newsletters": Array [
     Object {
       "background_color": "light",