From 97d7f643107fde003e6e20c2358a8b1bf6973d77 Mon Sep 17 00:00:00 2001 From: Avery Huang <68914997+huang0h@users.noreply.github.com> Date: Wed, 5 Jun 2024 21:13:21 -0400 Subject: [PATCH] Ah.emailer fix (#365) * testing * draft: add template content, better preview * cleanups * switch source of truth to form value --- src/components/forms/sendEmailForm/content.ts | 385 ++++++++++++++++++ src/components/forms/sendEmailForm/index.tsx | 32 +- src/containers/email/index.tsx | 13 +- 3 files changed, 408 insertions(+), 22 deletions(-) create mode 100644 src/components/forms/sendEmailForm/content.ts diff --git a/src/components/forms/sendEmailForm/content.ts b/src/components/forms/sendEmailForm/content.ts new file mode 100644 index 00000000..f194bd27 --- /dev/null +++ b/src/components/forms/sendEmailForm/content.ts @@ -0,0 +1,385 @@ +// This is a super hacky way of loading HTML to use as dangerouslySetInnerHTML +// The content corresponds to Email.html in the backend +const html = (body: string) => ` + + + + + + + + + + Neighborhood Notification Email + + + + + + + + + + + + + + + + +`; + +export default html; diff --git a/src/components/forms/sendEmailForm/index.tsx b/src/components/forms/sendEmailForm/index.tsx index 5cfc6689..6583e84d 100644 --- a/src/components/forms/sendEmailForm/index.tsx +++ b/src/components/forms/sendEmailForm/index.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import styled from 'styled-components'; -import { Form, Input, Switch, message, Button } from 'antd'; +import { Form, Input, Switch, message } from 'antd'; import { Flex, SubmitButton, @@ -18,6 +18,7 @@ import { useTranslation } from 'react-i18next'; import { n } from '../../../utils/stringFormat'; import DOMPurify from 'isomorphic-dompurify'; import SaveMenu from '../../saveMenu'; +import templateContent from './content'; const PreviewSwitch = styled(Switch)` display: flex; @@ -60,13 +61,15 @@ const SendEmailForm: React.FC = ({ }); const [showPreview, setShowPreview] = useState(false); - const [bodyContent, setBodyContent] = useState(''); const [showSave, setShowSave] = useState(false); const [sanitizedBodyContent, setSanitizedBodyContent] = useState(''); const togglePreview = (isShowPreview: boolean) => { setShowPreview(isShowPreview); - if (isShowPreview) setSanitizedBodyContent(DOMPurify.sanitize(bodyContent)); + if (isShowPreview) + setSanitizedBodyContent( + DOMPurify.sanitize(sendEmailForm.getFieldValue('emailBody')), + ); }; const onFinishSendEmail = (values: SendEmailFormValues) => { @@ -76,7 +79,8 @@ const SendEmailForm: React.FC = ({ } const sendEmailRequest: SendEmailRequest = { - ...values, + emailSubject: values.emailSubject, + emailBody: DOMPurify.sanitize(values.emailBody), emails, }; ProtectedApiClient.sendEmail(sendEmailRequest) @@ -89,15 +93,7 @@ const SendEmailForm: React.FC = ({ }; return ( -
{ - if (changedValues.emailBody !== undefined) - setBodyContent(changedValues.emailBody); - }} - > + = ({ {showPreview && ( )} @@ -138,7 +136,11 @@ const SendEmailForm: React.FC = ({ > {t('save')} - {showSave && } + {showSave && ( + + )} ); diff --git a/src/containers/email/index.tsx b/src/containers/email/index.tsx index 627f1c0f..45498b93 100644 --- a/src/containers/email/index.tsx +++ b/src/containers/email/index.tsx @@ -20,12 +20,7 @@ import { Routes } from '../../App'; import PageLayout from '../../components/pageLayout'; import { ReturnButton } from '../../components/themedComponents'; import PageHeader from '../../components/pageHeader'; -import { - EmailerFilters, - FilteredSite, - FilterSitesParams, - LoadTemplateResponse, -} from './types'; +import { EmailerFilters, FilteredSite, FilterSitesParams } from './types'; import EmailerFilterControls from '../../components/emailerFilterControls'; import AdoptedSitesTable from '../../components/adoptedSitesTable'; import protectedApiClient from '../../api/protectedApiClient'; @@ -34,6 +29,7 @@ import SendEmailForm from '../../components/forms/sendEmailForm'; import { site } from '../../constants'; import { n } from '../../utils/stringFormat'; import { useTranslation } from 'react-i18next'; +import DOMPurify from 'isomorphic-dompurify'; const EmailPageContainer = styled.div` width: 90vw; @@ -117,7 +113,10 @@ const Email: React.FC = () => { protectedApiClient .loadEmailTemplateContent(templateName) .then((res) => { - sendEmailForm.setFieldValue('emailBody', res.template); + sendEmailForm.setFieldValue( + 'emailBody', + DOMPurify.sanitize(res.template), + ); }) .catch((err) => { sendEmailForm.setFieldValue('emailBody', '');