forked from TryGhost/Ghost
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updated design for sender and reply-to email address flow PROD-215 PR…
…OD-216 refs PROD-215 PROD-216 - Added toast notifications for successful sender and reply-to email address change behind the flag, instead of the modal - Updated email template for verifying new sender or reply-to email
- Loading branch information
1 parent
3e67544
commit 501b1a2
Showing
4 changed files
with
265 additions
and
222 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -237,15 +237,7 @@ const Sidebar: React.FC<{ | |
| <Form className='mt-6' gap='sm' margins='lg' title='Email info'> | ||
| <TextField placeholder={siteTitle} title="Sender name" value={newsletter.sender_name || ''} onChange={e => updateNewsletter({sender_name: e.target.value})} /> | ||
| {renderSenderEmailField()} | ||
| {/* Banner - when changing sender address */} | ||
| {/* <Banner className='-mt-2 p-3 text-sm' color='yellow'> | ||
| We‘ve sent a confirmation email to <span className='font-semibold'>[email protected]</span>. Until the address has been verified, newsletters will be sent from the <span className='font-semibold'>noreply@localhost</span>. | ||
| </Banner> */} | ||
| <ReplyToEmailField clearError={clearError} errors={errors} newsletter={newsletter} updateNewsletter={updateNewsletter} validate={validate} /> | ||
| {/* Banner - when changing reply-to address */} | ||
| {/* <Banner className='-mt-2 p-3 text-sm' color='yellow'> | ||
| We‘ve sent a confirmation email to <span className='font-semibold'>[email protected]</span>. Until the address has been verified, replies will continue to go to <span className='font-semibold'>noreply@localhost</span>. | ||
| </Banner> */} | ||
| </Form> | ||
| <Form className='mt-6' gap='sm' margins='lg' title='Member settings'> | ||
| <Toggle | ||
|
|
@@ -517,6 +509,7 @@ const NewsletterDetailModalContent: React.FC<{newsletter: Newsletter; onlyOne: b | |
| 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, | ||
|
|
@@ -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 <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‘ve sent a confirmation email to <strong>{formState.sender_email}</strong>.</div>; | ||
| } else if (emailToVerify && emailToVerify === 'sender_reply_to') { | ||
| title = 'Confirm reply-to address'; | ||
| prompt = <>We‘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‘ve sent a confirmation email to <strong>{formState.sender_reply_to}</strong>.</div>; | ||
| } | ||
|
|
||
| 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, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -244,10 +244,8 @@ test.describe('Newsletter settings', async () => { | |
| await replyToEmail.fill('[email protected]'); | ||
| 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/); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.