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 aefd3c2845..b41de9dd05 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 @@ -237,15 +237,7 @@ const Sidebar: React.FC<{
updateNewsletter({sender_name: e.target.value})} /> {renderSenderEmailField()} - {/* Banner - when changing sender address */} - {/* - We‘ve sent a confirmation email to dzvlais@gmail.com. Until the address has been verified, newsletters will be sent from the noreply@localhost. - */} - {/* Banner - when changing reply-to address */} - {/* - We‘ve sent a confirmation email to dzvlais@gmail.com. Until the address has been verified, replies will continue to go to noreply@localhost. - */}
(settings, ['support_email_address', 'default_email_address']); + const newEmailAddressesFlag = useFeatureFlag('newEmailAddresses'); const {formState, saveState, updateForm, setFormState, handleSave, validate, errors, clearError, okProps} = useForm({ initialState: newsletter, @@ -526,28 +519,40 @@ const NewsletterDetailModalContent: React.FC<{newsletter: Newsletter; onlyOne: b const previousFrom = renderSenderEmail(updatedNewsletter, config, defaultEmailAddress); const previousReplyTo = renderReplyToEmail(updatedNewsletter, config, supportEmailAddress, defaultEmailAddress) || previousFrom; + /* TODO: Remove title, prompt, NiceModal */ let title; let prompt; + let toastMessage; if (emailToVerify && emailToVerify === 'sender_email') { 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})` : ''}.; + toastMessage =
We‘ve sent a confirmation email to {formState.sender_email}.
; } else if (emailToVerify && emailToVerify === 'sender_reply_to') { title = 'Confirm reply-to address'; 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}.; + toastMessage =
We‘ve sent a confirmation email to {formState.sender_reply_to}.
; } if (title && prompt) { - NiceModal.show(ConfirmationModal, { - title: title, - prompt: prompt, - cancelLabel: '', - onOk: (confirmModal) => { - confirmModal?.remove(); - modal.remove(); - updateRoute('newsletters'); - } - }); + if (newEmailAddressesFlag || isManagedEmail(config)) { + showToast({ + icon: 'email', + message: toastMessage, + type: 'neutral' + }); + } else { + NiceModal.show(ConfirmationModal, { + title: title, + prompt: prompt, + cancelLabel: '', + onOk: (confirmModal) => { + confirmModal?.remove(); + modal.remove(); + updateRoute('newsletters'); + } + }); + } } }, onSaveError: handleError, 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 08f5e58539..44b8e6f2e0 100644 --- a/apps/admin-x-settings/test/acceptance/email/newsletters.test.ts +++ b/apps/admin-x-settings/test/acceptance/email/newsletters.test.ts @@ -244,10 +244,8 @@ test.describe('Newsletter settings', async () => { await replyToEmail.fill('test@test.com'); 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 test@test.com/); - await expect(page.getByTestId('confirmation-modal')).toHaveText(/replies will continue to go to support@example.com/); + await expect(page.getByTestId('toast-neutral')).toHaveCount(1); + await expect(page.getByTestId('toast-neutral')).toHaveText(/sent a confirmation email to test@test.com/); }); }); @@ -340,10 +338,8 @@ test.describe('Newsletter settings', async () => { // 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(/replies will continue to go to support@example.com/); + await expect(page.getByTestId('toast-neutral')).toHaveCount(1); + await expect(page.getByTestId('toast-neutral')).toHaveText(/sent a confirmation email to hermione@granger.com/); }); }); }); diff --git a/ghost/core/core/server/services/newsletters/emails/verify-email.js b/ghost/core/core/server/services/newsletters/emails/verify-email.js index 5196411498..14238461b4 100644 --- a/ghost/core/core/server/services/newsletters/emails/verify-email.js +++ b/ghost/core/core/server/services/newsletters/emails/verify-email.js @@ -49,6 +49,10 @@ module.exports = ({email, url}) => ` max-width: 100% !important; width: auto !important; } + table[class=body] p[class=small], + table[class=body] a[class=small] { + font-size: 11px !important; + } } /* ------------------------------------- PRESERVE THESE STYLES IN THE HEAD @@ -90,26 +94,30 @@ module.exports = ({email, url}) => ` border-bottom-width: 1px; border-bottom-color: #EEF5F8; } + a { + color: #3A464C; + } - - + +
- + + + + + + + + + + +
  -
+
+
+ -
+
-

Hey there,

-

Please confirm your email address with this link:

+

Hey there,

+

Please confirm your email address with this link:

@@ -117,7 +125,7 @@ module.exports = ({email, url}) => `
- +
Confirm email address Confirm email address
@@ -125,36 +133,34 @@ module.exports = ({email, url}) => `
-

For your security, the link will expire in 24 hours time.

+

For your security, the link will expire in 24 hours time.

-

You can also copy & paste this URL into your browser:

-

${url}

+

You can also copy & paste this URL into your browser:

+

${url}
+

If you did not make this request, you can simply delete this message. This email address will not be used.

+
+

This message was sent to ${email}

+
- -
- - - - - - - -
- If you did not make this request, you can simply delete this message.
This email address will not be used. -
- Sent to ${email} -
-
- - diff --git a/ghost/core/test/e2e-api/admin/__snapshots__/newsletters.test.js.snap b/ghost/core/test/e2e-api/admin/__snapshots__/newsletters.test.js.snap index 68b93c6583..75f8856f49 100644 --- a/ghost/core/test/e2e-api/admin/__snapshots__/newsletters.test.js.snap +++ b/ghost/core/test/e2e-api/admin/__snapshots__/newsletters.test.js.snap @@ -386,6 +386,10 @@ exports[`Newsletters API Can add a newsletter - with custom sender_email 4: [htm max-width: 100% !important; width: auto !important; } + table[class=body] p[class=small], + table[class=body] a[class=small] { + font-size: 11px !important; + } } /* ------------------------------------- PRESERVE THESE STYLES IN THE HEAD @@ -427,26 +431,30 @@ exports[`Newsletters API Can add a newsletter - with custom sender_email 4: [htm border-bottom-width: 1px; border-bottom-color: #EEF5F8; } + a { + color: #3A464C; + } - - + +
- + + + + + + + + + + +
  -
+
+
+ Confirm your email address -
+
-

Hey there,

-

Please confirm your email address with this link:

+

Hey there,

+

Please confirm your email address with this link:

@@ -454,7 +462,7 @@ exports[`Newsletters API Can add a newsletter - with custom sender_email 4: [htm
- +
Confirm email address Confirm email address
@@ -462,36 +470,34 @@ exports[`Newsletters API Can add a newsletter - with custom sender_email 4: [htm
-

For your security, the link will expire in 24 hours time.

+

For your security, the link will expire in 24 hours time.

-

You can also copy & paste this URL into your browser:

-

http://127.0.0.1:2369/ghost/#/settings/newsletters/?verifyEmail=REPLACED_TOKEN

+

You can also copy & paste this URL into your browser:

+

http://127.0.0.1:2369/ghost/#/settings/newsletters/?verifyEmail=REPLACED_TOKEN
+

If you did not make this request, you can simply delete this message. This email address will not be used.

+
+

This message was sent to test@example.com

+
- -
- - - - - - - -
- If you did not make this request, you can simply delete this message.
This email address will not be used. -
- Sent to test@example.com -
-
- - @@ -814,6 +820,10 @@ exports[`Newsletters API Can add a newsletter - with custom sender_email and sub max-width: 100% !important; width: auto !important; } + table[class=body] p[class=small], + table[class=body] a[class=small] { + font-size: 11px !important; + } } /* ------------------------------------- PRESERVE THESE STYLES IN THE HEAD @@ -855,26 +865,30 @@ exports[`Newsletters API Can add a newsletter - with custom sender_email and sub border-bottom-width: 1px; border-bottom-color: #EEF5F8; } + a { + color: #3A464C; + } - - + +
- + + + + + + + + + + +
  -
+
+
+ Confirm your email address -
+
-

Hey there,

-

Please confirm your email address with this link:

+

Hey there,

+

Please confirm your email address with this link:

@@ -882,7 +896,7 @@ exports[`Newsletters API Can add a newsletter - with custom sender_email and sub
- +
Confirm email address Confirm email address
@@ -890,36 +904,34 @@ exports[`Newsletters API Can add a newsletter - with custom sender_email and sub
-

For your security, the link will expire in 24 hours time.

+

For your security, the link will expire in 24 hours time.

-

You can also copy & paste this URL into your browser:

-

http://127.0.0.1:2369/ghost/#/settings/newsletters/?verifyEmail=REPLACED_TOKEN

+

You can also copy & paste this URL into your browser:

+

http://127.0.0.1:2369/ghost/#/settings/newsletters/?verifyEmail=REPLACED_TOKEN
+

If you did not make this request, you can simply delete this message. This email address will not be used.

+
+

This message was sent to test@example.com

+
- -
- - - - - - - -
- If you did not make this request, you can simply delete this message.
This email address will not be used. -
- Sent to test@example.com -
-
- - @@ -1422,6 +1434,10 @@ exports[`Newsletters API Can edit a newsletters and update the sender_email when max-width: 100% !important; width: auto !important; } + table[class=body] p[class=small], + table[class=body] a[class=small] { + font-size: 11px !important; + } } /* ------------------------------------- PRESERVE THESE STYLES IN THE HEAD @@ -1463,26 +1479,30 @@ exports[`Newsletters API Can edit a newsletters and update the sender_email when border-bottom-width: 1px; border-bottom-color: #EEF5F8; } + a { + color: #3A464C; + } - - + +
- + + + + + + + + + + +
  -
+
+
+ Confirm your email address -
+
-

Hey there,

-

Please confirm your email address with this link:

+

Hey there,

+

Please confirm your email address with this link:

@@ -1490,7 +1510,7 @@ exports[`Newsletters API Can edit a newsletters and update the sender_email when
- +
Confirm email address Confirm email address
@@ -1498,36 +1518,34 @@ exports[`Newsletters API Can edit a newsletters and update the sender_email when
-

For your security, the link will expire in 24 hours time.

+

For your security, the link will expire in 24 hours time.

-

You can also copy & paste this URL into your browser:

-

http://127.0.0.1:2369/ghost/#/settings/newsletters/?verifyEmail=REPLACED_TOKEN

+

You can also copy & paste this URL into your browser:

+

http://127.0.0.1:2369/ghost/#/settings/newsletters/?verifyEmail=REPLACED_TOKEN
+

If you did not make this request, you can simply delete this message. This email address will not be used.

+
+

This message was sent to updated@example.com

+
- -
- - - - - - - -
- If you did not make this request, you can simply delete this message.
This email address will not be used. -
- Sent to updated@example.com -
-
- - @@ -2195,6 +2213,10 @@ exports[`Newsletters API Can verify property updates 2: [html 1] 1`] = ` max-width: 100% !important; width: auto !important; } + table[class=body] p[class=small], + table[class=body] a[class=small] { + font-size: 11px !important; + } } /* ------------------------------------- PRESERVE THESE STYLES IN THE HEAD @@ -2236,26 +2258,30 @@ exports[`Newsletters API Can verify property updates 2: [html 1] 1`] = ` border-bottom-width: 1px; border-bottom-color: #EEF5F8; } + a { + color: #3A464C; + } - - + +
- + + + + + + + + + + +
  -
+
+
+ Confirm your email address -
+
-

Hey there,

-

Please confirm your email address with this link:

+

Hey there,

+

Please confirm your email address with this link:

@@ -2263,7 +2289,7 @@ exports[`Newsletters API Can verify property updates 2: [html 1] 1`] = `
- +
Confirm email address Confirm email address
@@ -2271,36 +2297,34 @@ exports[`Newsletters API Can verify property updates 2: [html 1] 1`] = `
-

For your security, the link will expire in 24 hours time.

+

For your security, the link will expire in 24 hours time.

-

You can also copy & paste this URL into your browser:

-

http://127.0.0.1:2369/ghost/#/settings/newsletters/?verifyEmail=REPLACED_TOKEN

+

You can also copy & paste this URL into your browser:

+

http://127.0.0.1:2369/ghost/#/settings/newsletters/?verifyEmail=REPLACED_TOKEN
+

If you did not make this request, you can simply delete this message. This email address will not be used.

+
+

This message was sent to verify@example.com

+
- -
- - - - - - - -
- If you did not make this request, you can simply delete this message.
This email address will not be used. -
- Sent to verify@example.com -
-
- - @@ -3094,6 +3118,10 @@ exports[`Newsletters API Managed email with custom sending domain Can set newsle max-width: 100% !important; width: auto !important; } + table[class=body] p[class=small], + table[class=body] a[class=small] { + font-size: 11px !important; + } } /* ------------------------------------- PRESERVE THESE STYLES IN THE HEAD @@ -3135,26 +3163,30 @@ exports[`Newsletters API Managed email with custom sending domain Can set newsle border-bottom-width: 1px; border-bottom-color: #EEF5F8; } + a { + color: #3A464C; + } - - + +
- + + + + + + + + + + +
  -
+
+
+ Confirm your email address -
+
-

Hey there,

-

Please confirm your email address with this link:

+

Hey there,

+

Please confirm your email address with this link:

@@ -3162,7 +3194,7 @@ exports[`Newsletters API Managed email with custom sending domain Can set newsle
- +
Confirm email address Confirm email address
@@ -3170,36 +3202,34 @@ exports[`Newsletters API Managed email with custom sending domain Can set newsle
-

For your security, the link will expire in 24 hours time.

+

For your security, the link will expire in 24 hours time.

-

You can also copy & paste this URL into your browser:

-

http://127.0.0.1:2369/ghost/#/settings/newsletters/?verifyEmail=REPLACED_TOKEN

+

You can also copy & paste this URL into your browser:

+

http://127.0.0.1:2369/ghost/#/settings/newsletters/?verifyEmail=REPLACED_TOKEN
+

If you did not make this request, you can simply delete this message. This email address will not be used.

+
+

This message was sent to hello@acme.com

+
- -
- - - - - - - -
- If you did not make this request, you can simply delete this message.
This email address will not be used. -
- Sent to hello@acme.com -
-
- - @@ -3971,6 +4001,10 @@ exports[`Newsletters API Managed email without custom sending domain Can set new max-width: 100% !important; width: auto !important; } + table[class=body] p[class=small], + table[class=body] a[class=small] { + font-size: 11px !important; + } } /* ------------------------------------- PRESERVE THESE STYLES IN THE HEAD @@ -4012,26 +4046,30 @@ exports[`Newsletters API Managed email without custom sending domain Can set new border-bottom-width: 1px; border-bottom-color: #EEF5F8; } + a { + color: #3A464C; + } - - + +
- + + + + + + + + + + +
  -
+
+
+ Confirm your email address -
+
-

Hey there,

-

Please confirm your email address with this link:

+

Hey there,

+

Please confirm your email address with this link:

@@ -4039,7 +4077,7 @@ exports[`Newsletters API Managed email without custom sending domain Can set new
- +
Confirm email address Confirm email address
@@ -4047,36 +4085,34 @@ exports[`Newsletters API Managed email without custom sending domain Can set new
-

For your security, the link will expire in 24 hours time.

+

For your security, the link will expire in 24 hours time.

-

You can also copy & paste this URL into your browser:

-

http://127.0.0.1:2369/ghost/#/settings/newsletters/?verifyEmail=REPLACED_TOKEN

+

You can also copy & paste this URL into your browser:

+

http://127.0.0.1:2369/ghost/#/settings/newsletters/?verifyEmail=REPLACED_TOKEN
+

If you did not make this request, you can simply delete this message. This email address will not be used.

+
+

This message was sent to hello@acme.com

+
- -
- - - - - - - -
- If you did not make this request, you can simply delete this message.
This email address will not be used. -
- Sent to hello@acme.com -
-
- -