feat: add plain html email template editor

dashboard/src/components/UpdateEmailTemplateModal.tsx

@@ -29,6 +29,10 @@ import {
   Tbody,
   Td,
   Code,
+  Radio,
+  RadioGroup,
+  Stack,
+  Textarea,
 } from '@chakra-ui/react';
 import { FaPlus, FaAngleDown, FaAngleUp } from 'react-icons/fa';
 import { useClient } from 'urql';
@@ -38,6 +42,7 @@ import {
   EmailTemplateInputDataFields,
   emailTemplateEventNames,
   emailTemplateVariables,
+  EmailTemplateEditors,
 } from '../constants';
 import { capitalizeFirstLetter } from '../utils';
 import { AddEmailTemplate, EditEmailTemplate } from '../graphql/mutation';
@@ -66,6 +71,8 @@ interface templateVariableDataTypes {
 interface emailTemplateDataType {
   [EmailTemplateInputDataFields.EVENT_NAME]: string;
   [EmailTemplateInputDataFields.SUBJECT]: string;
+  [EmailTemplateInputDataFields.TEMPLATE]: string;
+  [EmailTemplateInputDataFields.DESIGN]: string;
 }
 
 interface validatorDataType {
@@ -75,6 +82,8 @@ interface validatorDataType {
 const initTemplateData: emailTemplateDataType = {
   [EmailTemplateInputDataFields.EVENT_NAME]: emailTemplateEventNames.Signup,
   [EmailTemplateInputDataFields.SUBJECT]: '',
+  [EmailTemplateInputDataFields.TEMPLATE]: '',
+  [EmailTemplateInputDataFields.DESIGN]: '',
 };
 
 const initTemplateValidatorData: validatorDataType = {
@@ -91,6 +100,9 @@ const UpdateEmailTemplate = ({
   const emailEditorRef = useRef(null);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [loading, setLoading] = useState<boolean>(false);
+  const [editor, setEditor] = useState<string>(
+    EmailTemplateEditors.PLAIN_HTML_EDITOR,
+  );
   const [templateVariables, setTemplateVariables] = useState<
     templateVariableDataTypes[]
   >([]);
@@ -107,9 +119,11 @@ const UpdateEmailTemplate = ({
     if (selectedTemplate) {
       const { design } = selectedTemplate;
       try {
+        if (design) {
           const designData = JSON.parse(design);
           // @ts-ignore
           emailEditorRef.current.editor.loadDesign(designData);
+        }
       } catch (error) {
         console.error(error);
         onClose();
@@ -136,24 +150,7 @@ const UpdateEmailTemplate = ({
     );
   };
 
-	const saveData = async () => {
+  const updateTemplate = async (params: emailTemplateDataType) => {
-		if (!validateData()) return;
-		setLoading(true);
-		// @ts-ignore
-		return await emailEditorRef.current.editor.exportHtml(async (data) => {
-			const { design, html } = data;
-			if (!html || !design) {
-				setLoading(false);
-				return;
-			}
-			const params = {
-				[EmailTemplateInputDataFields.EVENT_NAME]:
-					templateData[EmailTemplateInputDataFields.EVENT_NAME],
-				[EmailTemplateInputDataFields.SUBJECT]:
-					templateData[EmailTemplateInputDataFields.SUBJECT],
-				[EmailTemplateInputDataFields.TEMPLATE]: html.trim(),
-				[EmailTemplateInputDataFields.DESIGN]: JSON.stringify(design),
-			};
     let res: any = {};
     if (
       view === UpdateModalViews.Edit &&
@@ -197,9 +194,41 @@ const UpdateEmailTemplate = ({
       setValidator({ ...initTemplateValidatorData });
       fetchEmailTemplatesData();
     }
-			view === UpdateModalViews.ADD && onClose();
-		});
   };
+
+  const saveData = async () => {
+    if (!validateData()) return;
+    setLoading(true);
+    let params: emailTemplateDataType = {
+      [EmailTemplateInputDataFields.EVENT_NAME]:
+        templateData[EmailTemplateInputDataFields.EVENT_NAME],
+      [EmailTemplateInputDataFields.SUBJECT]:
+        templateData[EmailTemplateInputDataFields.SUBJECT],
+      [EmailTemplateInputDataFields.TEMPLATE]:
+        templateData[EmailTemplateInputDataFields.TEMPLATE],
+      [EmailTemplateInputDataFields.DESIGN]: '',
+    };
+    if (editor === EmailTemplateEditors.UNLAYER_EDITOR) {
+      // @ts-ignore
+      await emailEditorRef.current.editor.exportHtml(async (data) => {
+        const { design, html } = data;
+        if (!html || !design) {
+          setLoading(false);
+          return;
+        }
+        params = {
+          ...params,
+          [EmailTemplateInputDataFields.TEMPLATE]: html.trim(),
+          [EmailTemplateInputDataFields.DESIGN]: JSON.stringify(design),
+        };
+        await updateTemplate(params);
+      });
+    } else {
+      await updateTemplate(params);
+    }
+    view === UpdateModalViews.ADD && onClose();
+  };
+
   const resetData = () => {
     if (selectedTemplate) {
       setTemplateData(selectedTemplate);
@@ -207,6 +236,8 @@ const UpdateEmailTemplate = ({
       setTemplateData({ ...initTemplateData });
     }
   };
+
+  // set template data if edit modal is open
   useEffect(() => {
     if (
       isOpen &&
@@ -214,10 +245,12 @@ const UpdateEmailTemplate = ({
       selectedTemplate &&
       Object.keys(selectedTemplate || {}).length
     ) {
-			const { id, created_at, template, design, ...rest } = selectedTemplate;
+      const { id, created_at, ...rest } = selectedTemplate;
       setTemplateData(rest);
     }
   }, [isOpen]);
+
+  // set template variables
   useEffect(() => {
     const updatedTemplateVariables = Object.entries(
       emailTemplateVariables,
@@ -244,6 +277,51 @@ const UpdateEmailTemplate = ({
     setTemplateVariables(updatedTemplateVariables);
   }, [templateData[EmailTemplateInputDataFields.EVENT_NAME]]);
 
+  // change editor
+  useEffect(() => {
+    if (isOpen && selectedTemplate) {
+      const { design } = selectedTemplate;
+      if (design) {
+        setEditor(EmailTemplateEditors.UNLAYER_EDITOR);
+      } else {
+        setEditor(EmailTemplateEditors.PLAIN_HTML_EDITOR);
+      }
+    }
+  }, [isOpen, selectedTemplate]);
+
+  // reset fields when editor is changed
+  useEffect(() => {
+    if (selectedTemplate?.design) {
+      if (editor === EmailTemplateEditors.UNLAYER_EDITOR) {
+        setTemplateData({
+          ...templateData,
+          [EmailTemplateInputDataFields.TEMPLATE]: selectedTemplate.template,
+          [EmailTemplateInputDataFields.DESIGN]: selectedTemplate.design,
+        });
+      } else {
+        setTemplateData({
+          ...templateData,
+          [EmailTemplateInputDataFields.TEMPLATE]: '',
+          [EmailTemplateInputDataFields.DESIGN]: '',
+        });
+      }
+    } else if (selectedTemplate?.template) {
+      if (editor === EmailTemplateEditors.UNLAYER_EDITOR) {
+        setTemplateData({
+          ...templateData,
+          [EmailTemplateInputDataFields.TEMPLATE]: '',
+          [EmailTemplateInputDataFields.DESIGN]: '',
+        });
+      } else {
+        setTemplateData({
+          ...templateData,
+          [EmailTemplateInputDataFields.TEMPLATE]: selectedTemplate?.template,
+          [EmailTemplateInputDataFields.DESIGN]: '',
+        });
+      }
+    }
+  }, [editor]);
+
   return (
     <>
       {view === UpdateModalViews.ADD ? (
@@ -414,7 +492,22 @@ const UpdateEmailTemplate = ({
                 alignItems="center"
                 marginBottom="2%"
               >
-								Template Body
+                <Flex flex="1">Template Body</Flex>
+                <Flex flex="3">
+                  <RadioGroup
+                    onChange={(value) => setEditor(value)}
+                    value={editor}
+                  >
+                    <Stack direction="row" spacing="50px">
+                      <Radio value={EmailTemplateEditors.PLAIN_HTML_EDITOR}>
+                        Plain HTML
+                      </Radio>
+                      <Radio value={EmailTemplateEditors.UNLAYER_EDITOR}>
+                        Unlayer Editor
+                      </Radio>
+                    </Stack>
+                  </RadioGroup>
+                </Flex>
               </Flex>
               <Flex
                 width="100%"
@@ -423,7 +516,22 @@ const UpdateEmailTemplate = ({
                 border="1px solid"
                 borderColor="gray.200"
               >
+                {editor === EmailTemplateEditors.UNLAYER_EDITOR ? (
                   <EmailEditor ref={emailEditorRef} onReady={onReady} />
+                ) : (
+                  <Textarea
+                    value={templateData.template}
+                    onChange={(e) => {
+                      setTemplateData({
+                        ...templateData,
+                        [EmailTemplateInputDataFields.TEMPLATE]: e.target.value,
+                      });
+                    }}
+                    placeholder="Template HTML"
+                    border="0"
+                    height="500px"
+                  />
+                )}
               </Flex>
             </Flex>
           </ModalBody>

dashboard/src/constants.ts

@@ -337,3 +337,8 @@ export const webhookPayloadExample: string = `{
 	},
 	"auth_recipe":"google"
  }`;
+
+export enum EmailTemplateEditors {
+  UNLAYER_EDITOR = 'unlayer_editor',
+  PLAIN_HTML_EDITOR = 'plain_html_editor',
+}