diff --git a/apps/admin-x-settings/src/api/newsletters.ts b/apps/admin-x-settings/src/api/newsletters.ts index eebbc02bba..b59fed8f10 100644 --- a/apps/admin-x-settings/src/api/newsletters.ts +++ b/apps/admin-x-settings/src/api/newsletters.ts @@ -97,3 +97,15 @@ export const useEditNewsletter = createMutation({ + method: 'PUT', + path: () => '/newsletters/verifications/', + body: ({token}) => ({token}), + defaultSearchParams: {include: 'count.active_members,count.posts'}, + updateQueries: { + dataType, + emberUpdateType: 'createOrUpdate', + update: updateQueryCache('newsletters') + } +}); diff --git a/apps/admin-x-settings/src/components/settings/email/Newsletters.tsx b/apps/admin-x-settings/src/components/settings/email/Newsletters.tsx index be039dcac4..c10b228605 100644 --- a/apps/admin-x-settings/src/components/settings/email/Newsletters.tsx +++ b/apps/admin-x-settings/src/components/settings/email/Newsletters.tsx @@ -1,12 +1,27 @@ import Button from '../../../admin-x-ds/global/Button'; +import ConfirmationModal from '../../../admin-x-ds/global/modal/ConfirmationModal'; import NewslettersList from './newsletters/NewslettersList'; -import React, {useState} from 'react'; +import NiceModal, {useModal} from '@ebay/nice-modal-react'; +import React, {ReactNode, useEffect, useState} from 'react'; import SettingGroup from '../../../admin-x-ds/settings/SettingGroup'; import TabView from '../../../admin-x-ds/global/TabView'; +import useHandleError from '../../../utils/api/handleError'; +import useQueryParams from '../../../hooks/useQueryParams'; import useRouting from '../../../hooks/useRouting'; -import {useBrowseNewsletters} from '../../../api/newsletters'; +import {APIError} from '../../../utils/errors'; +import {useBrowseNewsletters, useVerifyNewsletterEmail} from '../../../api/newsletters'; import {withErrorBoundary} from '../../../admin-x-ds/global/ErrorBoundary'; +const NavigateToNewsletter = ({id, children}: {id: string; children: ReactNode}) => { + const modal = useModal(); + const {updateRoute} = useRouting(); + + return ; +}; + const Newsletters: React.FC<{ keywords: string[] }> = ({keywords}) => { const {updateRoute} = useRouting(); const openNewsletterModal = () => { @@ -15,6 +30,45 @@ const Newsletters: React.FC<{ keywords: string[] }> = ({keywords}) => { const [selectedTab, setSelectedTab] = useState('active-newsletters'); const {data: {newsletters, meta, isEnd} = {}, fetchNextPage} = useBrowseNewsletters(); + const verifyEmailToken = useQueryParams().getParam('verifyEmail'); + const {mutateAsync: verifyEmail} = useVerifyNewsletterEmail(); + const handleError = useHandleError(); + + useEffect(() => { + if (!verifyEmailToken) { + return; + } + + const verify = async () => { + try { + const {newsletters: [updatedNewsletter]} = await verifyEmail({token: verifyEmailToken}); + + NiceModal.show(ConfirmationModal, { + title: 'Email address verified', + prompt: <>Success! From address for newsletter {updatedNewsletter.name} changed to {updatedNewsletter.sender_email}, + okLabel: 'Close', + cancelLabel: '', + onOk: confirmModal => confirmModal?.remove() + }); + } catch (e) { + let prompt = 'There was an error verifying your email address. Please try again.'; + + if (e instanceof APIError && e.message === 'Token expired') { + prompt = 'The verification link has expired. Please try again.'; + } + NiceModal.show(ConfirmationModal, { + title: 'Error verifying email address', + prompt: prompt, + okLabel: 'Close', + cancelLabel: '', + onOk: confirmModal => confirmModal?.remove() + }); + handleError(e, {withToast: false}); + } + }; + verify(); + }, [verifyEmailToken, handleError, verifyEmail]); + const buttons = (