fix: preview and send mail validation

Author: anujdecoder

src/lib/components/DndPreview.tsx

@@ -1,11 +1,15 @@
-import { Trans } from '@lingui/macro'
+import { t, Trans } from '@lingui/macro'
 import { ButtonBase, Theme, Tooltip, Typography } from '@material-ui/core'
 import { SendOutlined, VisibilityOutlined } from '@material-ui/icons'
 import { makeStyles } from '@material-ui/styles'
 import React from 'react'
 import { useDndEditorContext } from '../DndEditorProvider'
+import { exportToHtml } from '../utils'
 import DndPreviewDialog from './preview/DndPreviewDialog'
 import DndSendEmailDialog from './preview/DndSendEmailDialog'
+import { Liquid } from 'liquidjs'
+import { setupI18n } from '@lingui/core'
+const engine = new Liquid()
 
 const useStyles = makeStyles(
     ({
@@ -42,7 +46,31 @@ const DndPreview: React.FC<DndPreviewProps> = () => {
     const classes = useStyles()
     const [previewOpen, setPreviewOpen] = React.useState(false)
     const [sendEmailOpen, setSendEmailOpen] = React.useState(false)
-    const { onSendEmail } = useDndEditorContext()
+    const editorContext = useDndEditorContext()
+    const { onSendEmail } = editorContext
+    const i18n = setupI18n()
+
+    const validate = () => {
+        const html = exportToHtml(editorContext)
+        try {
+            engine.parse(html)
+        } catch (_) {
+            window.alert(i18n._(t`Invalid body`))
+            return false
+        }
+
+        return true
+    }
+    const handlePreview = () => {
+        if (validate()) {
+            setPreviewOpen(true)
+        }
+    }
+    const handleSendMail = () => {
+        if (validate()) {
+            setSendEmailOpen(true)
+        }
+    }
 
     return (
         <>
@@ -53,15 +81,15 @@ const DndPreview: React.FC<DndPreviewProps> = () => {
                 <DndSendEmailDialog open={sendEmailOpen} onClose={() => setSendEmailOpen(false)} />
             )}
             <div className={classes.actions}>
-                <ButtonBase onClick={() => setPreviewOpen(true)} className={classes.button}>
+                <ButtonBase onClick={handlePreview} className={classes.button}>
                     <VisibilityOutlined fontSize="small" />
                     &nbsp;
                     <Typography variant="subtitle1">
                         <Trans>Preview</Trans>
                     </Typography>
                 </ButtonBase>
                 {onSendEmail && (
-                    <ButtonBase onClick={() => setSendEmailOpen(true)} className={classes.button}>
+                    <ButtonBase onClick={handleSendMail} className={classes.button}>
                         <SendOutlined fontSize="small" />
                         &nbsp;
                         <Typography variant="subtitle1">