From c4a800e97d31f8c571dff2ddf3efc35a01675b46 Mon Sep 17 00:00:00 2001 From: Djordje Vlaisavljevic Date: Thu, 18 Jan 2024 19:00:49 +0000 Subject: [PATCH] Fixed logic for displaying toast notifications when updating email address PROD-215 refs PROD-215 - Showing toast notification instead of modal to all users (even self-hosted and legacy (Pro)) now - More compact toast notification message - Updated tests --- .../newsletters/NewsletterDetailModal.tsx | 48 ++++------------- .../test/acceptance/email/newsletters.test.ts | 52 ++----------------- 2 files changed, 15 insertions(+), 85 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 b41de9dd05..f5aecdb0d1 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 @@ -1,5 +1,5 @@ import NewsletterPreview from './NewsletterPreview'; -import NiceModal, {useModal} from '@ebay/nice-modal-react'; +import NiceModal from '@ebay/nice-modal-react'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import useFeatureFlag from '../../../../hooks/useFeatureFlag'; import useSettingGroup from '../../../../hooks/useSettingGroup'; @@ -503,56 +503,30 @@ const Sidebar: React.FC<{ }; const NewsletterDetailModalContent: React.FC<{newsletter: Newsletter; onlyOne: boolean;}> = ({newsletter, onlyOne}) => { - const modal = useModal(); - const {settings, config} = useGlobalData(); + const {config} = useGlobalData(); const {mutateAsync: editNewsletter} = useEditNewsletter(); const {updateRoute} = useRouting(); const handleError = useHandleError(); - const [supportEmailAddress, defaultEmailAddress] = getSettingValues(settings, ['support_email_address', 'default_email_address']); - const newEmailAddressesFlag = useFeatureFlag('newEmailAddresses'); const {formState, saveState, updateForm, setFormState, handleSave, validate, errors, clearError, okProps} = useForm({ initialState: newsletter, 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; - - /* TODO: Remove title, prompt, NiceModal */ - let title; - let prompt; + const {meta: {sent_email_verification: [emailToVerify] = []} = {}} = await editNewsletter(formState); ``; 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}.
; + toastMessage =
We‘ve sent a confirmation email to the new address.
; } 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}.
; + toastMessage =
We‘ve sent a confirmation email to the new address.
; } - if (title && prompt) { - 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'); - } - }); - } + if (toastMessage) { + showToast({ + icon: 'email', + message: toastMessage, + type: 'neutral' + }); } }, 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 44b8e6f2e0..9a083870fc 100644 --- a/apps/admin-x-settings/test/acceptance/email/newsletters.test.ts +++ b/apps/admin-x-settings/test/acceptance/email/newsletters.test.ts @@ -1,4 +1,3 @@ -import {NewslettersResponseType} from '@tryghost/admin-x-framework/api/newsletters'; import {chooseOptionInSelect, limitRequests, mockApi, responseFixtures} from '@tryghost/admin-x-framework/test/acceptance'; import {expect, test} from '@playwright/test'; import {globalDataRequests} from '../../utils/acceptance'; @@ -123,51 +122,8 @@ test.describe('Newsletter settings', async () => { await modal.getByLabel('Sender email').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 newsletter email address/); - await expect(page.getByTestId('confirmation-modal')).toHaveText(/default email address \(default@example.com\)/); - }); - - test('Displays the current email when changing sender address', async ({page}) => { - const response = { - ...responseFixtures.newsletters, - newsletters: [{ - ...responseFixtures.newsletters.newsletters[0], - sender_email: 'current@test.com' - }] - } satisfies NewslettersResponseType; - - await mockApi({page, requests: { - ...globalDataRequests, - browseNewsletters: {method: 'GET', path: '/newsletters/?include=count.active_members%2Ccount.posts&limit=50', response}, - editNewsletter: {method: 'PUT', path: `/newsletters/${responseFixtures.newsletters.newsletters[0].id}/?include=count.active_members%2Ccount.posts`, response: { - newsletters: response.newsletters, - meta: { - sent_email_verification: ['sender_email'] - } - }} - }}); - - await page.goto('/'); - - const section = page.getByTestId('newsletters'); - - await section.getByText('Awesome newsletter').click(); - - const modal = page.getByTestId('newsletter-modal'); - - await modal.getByLabel('Sender email').fill('not-an-email'); - await modal.getByRole('button', {name: 'Save'}).click(); - - await expect(page.getByTestId('toast-error')).toHaveText(/Can't save newsletter/); - await expect(modal).toHaveText(/Invalid email/); - - await modal.getByLabel('Sender email').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 newsletter email address/); - await expect(page.getByTestId('confirmation-modal')).toHaveText(/previous email address \(current@test.com\)/); + await expect(page.getByTestId('toast-neutral')).toHaveCount(1); + await expect(page.getByTestId('toast-neutral')).toHaveText(/sent a confirmation email to the new address/); }); }); @@ -245,7 +201,7 @@ test.describe('Newsletter settings', async () => { await modal.getByRole('button', {name: 'Save'}).click(); await expect(page.getByTestId('toast-neutral')).toHaveCount(1); - await expect(page.getByTestId('toast-neutral')).toHaveText(/sent a confirmation email to test@test.com/); + await expect(page.getByTestId('toast-neutral')).toHaveText(/sent a confirmation email to the new address/); }); }); @@ -339,7 +295,7 @@ 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('toast-neutral')).toHaveCount(1); - await expect(page.getByTestId('toast-neutral')).toHaveText(/sent a confirmation email to hermione@granger.com/); + await expect(page.getByTestId('toast-neutral')).toHaveText(/sent a confirmation email to the new address/); }); }); });