Emailer: Load HTML templates from S3

src/api/protectedApiClient.ts

@@ -32,6 +32,8 @@ import {
 import {
   FilterSitesParams,
   FilterSitesResponse,
+  TemplateNamesResponse,
+  LoadTemplateResponse,
 } from '../containers/email/types';
 
 export interface ProtectedApiExtraArgs {
@@ -131,6 +133,10 @@ export interface ProtectedApiClient {
   readonly filterSites: (
     params: FilterSitesParams,
   ) => Promise<FilterSitesResponse>;
+  readonly getEmailTemplateNames: () => Promise<TemplateNamesResponse>;
+  readonly loadEmailTemplateContent: (
+    templateName: string,
+  ) => Promise<LoadTemplateResponse>;
 }
 
 export enum ProtectedApiClientRoutes {
@@ -161,6 +167,7 @@ export enum AdminApiClientRoutes {
   GET_STEWARDSHIP_REPORT_CSV = '/api/v1/protected/report/csv/adoption',
   ADD_SITES = '/api/v1/protected/sites/add_sites',
   SEND_EMAIL = '/api/v1/protected/neighborhoods/send_email',
+  GET_TEMPLATE_NAMES = 'api/v1/protected/emailer/template_names',
 }
 
 const baseTeamRoute = '/api/v1/protected/teams/';
@@ -228,6 +235,8 @@ export const ParameterizedAdminApiRoutes = {
         ? `&activityCountMax=${params.activityCountMax}`
         : ''
     }`,
+  LOAD_TEMPLATE: (templateName: string): string =>
+    `api/v1/protected/emailer/load_template/${templateName}`,
 };
 
 const makeReservation = (blockId: number, teamId?: number): Promise<void> => {
@@ -573,6 +582,20 @@ const filterSites = (
   ).then((res) => res.data);
 };
 
+const getEmailTemplateNames = (): Promise<TemplateNamesResponse> => {
+  return AppAxiosInstance.get(AdminApiClientRoutes.GET_TEMPLATE_NAMES).then(
+    (res) => res.data,
+  );
+};
+
+const loadEmailTemplateContent = (
+  templateName: string,
+): Promise<LoadTemplateResponse> => {
+  return AppAxiosInstance.get(
+    ParameterizedAdminApiRoutes.LOAD_TEMPLATE(templateName),
+  ).then((res) => res.data);
+};
+
 const Client: ProtectedApiClient = Object.freeze({
   makeReservation,
   completeReservation,
@@ -622,6 +645,8 @@ const Client: ProtectedApiClient = Object.freeze({
   sendEmail,
   deleteImage,
   filterSites,
+  getEmailTemplateNames,
+  loadEmailTemplateContent,
 });
 
 export default Client;

src/components/forms/sendEmailForm/index.tsx

@@ -8,6 +8,7 @@ import {
   SendEmailRequest,
 } from '../../../components/forms/ducks/types';
 import { requiredRule } from '../../../utils/formRules';
+import { FormInstance } from 'antd/es/form';
 import { site } from '../../../constants';
 import { useTranslation } from 'react-i18next';
 import { n } from '../../../utils/stringFormat';
@@ -33,9 +34,14 @@ const EmailPreview = styled.div`
 
 interface SendEmailFormProps {
   readonly emails: string[];
+  readonly sendEmailForm: FormInstance<SendEmailRequest>;
 }
 
-const SendEmailForm: React.FC<SendEmailFormProps> = ({ emails }) => {
+const SendEmailForm: React.FC<SendEmailFormProps> = ({
+  emails,
+  sendEmailForm,
+}) => {
+  const SendEmailForm: React.FC<SendEmailFormProps> = ({ emails }) => {
   const { t } = useTranslation(n(site, ['forms']), {
     keyPrefix: 'volunteer_emailer',
     nsMode: 'fallback',
@@ -62,7 +68,6 @@ const SendEmailForm: React.FC<SendEmailFormProps> = ({ emails }) => {
       ...values,
       emails,
     };
-
     ProtectedApiClient.sendEmail(sendEmailRequest)
       .then(() => {
         message.success(t('success'));
@@ -71,7 +76,6 @@ const SendEmailForm: React.FC<SendEmailFormProps> = ({ emails }) => {
         message.error(t('response_error', { error: err.response.data })),
       );
   };
-
   return (
     <Form
       name="sendEmail"
@@ -98,6 +102,11 @@ const SendEmailForm: React.FC<SendEmailFormProps> = ({ emails }) => {
         rules={requiredRule(t('body_required'))}
         hidden={showPreview}
       >
+        <Input.TextArea
+          name="emailContent"
+          rows={6}
+          placeholder={'Email Body'}
+        />
         <Input.TextArea rows={8} placeholder={t('body_placeholder')} />
       </Form.Item>
       {showPreview && (

src/containers/email/index.tsx

@@ -11,6 +11,7 @@ import {
   Alert,
   Divider,
   SelectProps,
+  Form,
 } from 'antd';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 
@@ -19,10 +20,10 @@ import PageLayout from '../../components/pageLayout';
 import { ReturnButton } from '../../components/themedComponents';
 import PageHeader from '../../components/pageHeader';
 import {
-  EmailType,
   EmailerFilters,
   FilteredSite,
   FilterSitesParams,
+  LoadTemplateResponse,
 } from './types';
 import EmailerFilterControls from '../../components/emailerFilterControls';
 import AdoptedSitesTable from '../../components/adoptedSitesTable';
@@ -63,6 +64,8 @@ const defaultFilters: EmailerFilters = {
   lastActivityEnd: null,
 };
 
+const defaultTemplate = 'Pick a Template';
+
 enum LoadingState {
   SUCCESS = 'success',
   LOADING = 'loading',
@@ -76,13 +79,37 @@ function neighborhoodToId(neighborhood: Neighborhoods): number {
 }
 
 const Email: React.FC = () => {
-  const [emailType, setEmailType] = useState<EmailType>(EmailType.INACTIVE);
+  const [emailType, setEmailType] = useState<string>(defaultTemplate);
+  const [templateNames, setTemplateNames] = useState<string[]>([]);
   const [filters, setFilters] = useState<EmailerFilters>(defaultFilters);
   const [fetchData, setFetchData] = useState<FilteredSite[]>([]);
   const [fetchSitesState, setFetchSitesState] = useState<LoadingState>(
     LoadingState.SUCCESS,
   );
   const [selectedEmails, setSelectedEmails] = useState<string[]>([]);
+  const [sendEmailForm] = Form.useForm();
+
+  function fetchTemplateNames() {
+    protectedApiClient
+      .getEmailTemplateNames()
+      .then((res) => {
+        setTemplateNames(res.templates);
+      })
+      .catch((err) => {
+        setTemplateNames([defaultTemplate]);
+      });
+  }
+
+  function fetchTemplateData(templateName: string) {
+    protectedApiClient
+      .loadEmailTemplateContent(templateName)
+      .then((res) => {
+        sendEmailForm.setFieldValue('emailBody', res.template);
+      })
+      .catch((err) => {
+        sendEmailForm.setFieldValue('emailBody', '');
+      });
+  }
 
   function onClickSearch() {
     setFetchSitesState(LoadingState.LOADING);
@@ -188,16 +215,22 @@ const Email: React.FC = () => {
           </Typography.Title>
           <EmailTypeSelect
             value={emailType}
-            defaultValue={EmailType.INACTIVE}
-            options={Object.entries(EmailType).map(([key, value]) => ({
-              value: key,
-              label: value,
+            defaultValue={defaultTemplate}
+            onClick={fetchTemplateNames}
+            options={templateNames.map((e) => ({
+              value: e,
+              label: e,
             }))}
-            onChange={(value: EmailType) => setEmailType(value)}
-            disabled // TODO uncomment when ready
+            onChange={(value: string) => {
+              setEmailType(value);
+              fetchTemplateData(value);
+            }}
           />
           <Typography.Title level={3}>Email</Typography.Title>
-          <SendEmailForm emails={selectedEmails} />
+          <SendEmailForm
+            emails={selectedEmails}
+            sendEmailForm={sendEmailForm}
+          />
         </EmailPageContainer>
       </PageLayout>
     </>

src/containers/email/types.ts

@@ -1,8 +1,13 @@
 import { Neighborhoods } from '../../assets/content';
 
-export enum EmailType {
-  INACTIVE = 'Inactive',
-  NEIGHBORHOOD = 'Neighborhood',
+export interface TemplateNamesResponse {
+  templates: string[];
+}
+
+export interface LoadTemplateResponse {
+  name : string,
+  template : string,
+  author : number;
 }
 
 export interface EmailerFilters {