OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed logic for displaying toast notifications when updating email address PROD-215

Browse Source 
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
This commit is contained in:
Djordje Vlaisavljevic 2024-01-18 19:00:49 +00:00 committed by GitHub
parent b4fc45008a
commit c4a800e97d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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<string>(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&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})` : ''}.</>;
toastMessage = <div>We&lsquo;ve sent a confirmation email to <strong>{formState.sender_email}</strong>.</div>;
toastMessage = <div>We&lsquo;ve sent a confirmation email to the new address.</div>;
} else if (emailToVerify && emailToVerify === 'sender_reply_to') {
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, replies will continue to go to {previousReplyTo}.</>;
toastMessage = <div>We&lsquo;ve sent a confirmation email to <strong>{formState.sender_reply_to}</strong>.</div>;
toastMessage = <div>We&lsquo;ve sent a confirmation email to the new address.</div>;
}
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,

52
apps/admin-x-settings/test/acceptance/email/newsletters.test.ts
View File

@ -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/);
});
});
});