Added PDF preview option.

src/components/Dashboard/common/TemplatePreview.jsx

@@ -1,6 +1,6 @@
 import { useState, useContext, useEffect, useRef, useCallback } from 'react'
 import PropTypes from 'prop-types'
-import { Flex, Button, Input } from 'antd'
+import { Flex, Button, Input, Select } from 'antd'
 import PlusIcon from '../../Icons/PlusIcon.jsx'
 import MinusIcon from '../../Icons/MinusIcon.jsx'
 import InfoCircleIcon from '../../Icons/InfoCircleIcon.jsx'
@@ -14,22 +14,26 @@ const TemplatePreview = ({
   isEditing,
   onTestObjectOpen,
   onPreviewMessage,
-  showTestObject = false
+  showTestObject = false,
+  showPreviewSwitch = true
 }) => {
   const iframeRef = useRef(null)
-  const { fetchTemplatePreview } = useContext(ApiServerContext)
+  const { fetchTemplatePreview, fetchTemplatePDF } =
-  const [previewContent, setPreviewContent] = useState('')
+    useContext(ApiServerContext)
+  const [previewContentHTML, setPreviewContentHTML] = useState('')
+  const [pdfBlob, setPDFBlob] = useState(null)
   const [reloadLoading, setReloadLoading] = useState(false)
   const [previewScale, setPreviewScale] = useState(1)
+  const [previewType, setPreviewType] = useState('HTML')
 
-  const updatePreviewContent = (html) => {
+  const updatePreviewContentHTML = (html) => {
     if (iframeRef.current) {
       // Save current scroll position
       const scrollY = iframeRef.current.contentWindow.scrollY
       const scrollX = iframeRef.current.contentWindow.scrollX
 
       // Update srcDoc
-      setPreviewContent(html)
+      setPreviewContentHTML(html)
 
       // Restore scroll position after iframe loads new content
       const handleLoad = () => {
@@ -40,6 +44,23 @@ const TemplatePreview = ({
     }
   }
 
+  const reloadPreviewPDF = (content, testObject = {}) => {
+    setReloadLoading(true)
+    fetchTemplatePDF(documentTemplate._id, content, testObject, (result) => {
+      setReloadLoading(false)
+      if (result?.error) {
+        // Handle error through parent component
+        onPreviewMessage(result.error, true)
+      } else {
+        const pdfBlob = new Blob([result.pdf], { type: 'application/pdf' })
+        const pdfUrl = URL.createObjectURL(pdfBlob)
+
+        setPDFBlob(pdfUrl)
+        onPreviewMessage('No issues found.', false)
+      }
+    })
+  }
+
   const reloadPreview = useCallback(
     (content, testObject = {}, scale = 1) => {
       setReloadLoading(true)
@@ -54,7 +75,7 @@ const TemplatePreview = ({
             // Handle error through parent component
             onPreviewMessage(result.error, true)
           } else {
-            updatePreviewContent(result.html)
+            updatePreviewContentHTML(result.html)
             onPreviewMessage('No issues found.', false)
           }
         }
@@ -66,9 +87,13 @@ const TemplatePreview = ({
   // Move useEffect to component level and use state to track objectData changes
   useEffect(() => {
     if (documentTemplate?.content) {
-      reloadPreview(documentTemplate.content, objectData, previewScale)
+      if (previewType == 'HTML') {
+        reloadPreview(documentTemplate.content, objectData, previewScale)
+      } else {
+        reloadPreviewPDF(documentTemplate.content, objectData)
+      }
     }
-  }, [objectData, documentTemplate, previewScale, reloadPreview])
+  }, [objectData, documentTemplate, previewScale, previewType])
 
   return (
     <Flex vertical gap={'middle'} style={{ height: '100%' }}>
@@ -98,34 +123,51 @@ const TemplatePreview = ({
             />
           </>
         ) : null}
+
         <Button
           icon={<PlusIcon />}
           onClick={() => {
             setPreviewScale((prev) => prev + 0.05)
           }}
+          disabled={loading || reloadLoading || previewType == 'PDF'}
         />
         <Button
           icon={<MinusIcon />}
           onClick={() => {
             setPreviewScale((prev) => prev - 0.05)
           }}
+          disabled={loading || reloadLoading || previewType == 'PDF'}
         />
         <Button
           readOnly={true}
           style={{ width: '65px' }}
-          loading={loading || reloadLoading}
+          disabled={loading || reloadLoading || previewType == 'PDF'}
-          disabled={loading || reloadLoading}
           onClick={() => {
             setPreviewScale(1)
           }}
         >
           {previewScale.toFixed(2)}x
         </Button>
+        {showPreviewSwitch == true ? (
+          <Select
+            options={[
+              { value: 'HTML', label: 'HTML' },
+              { value: 'PDF', label: 'PDF' }
+            ]}
+            loading={loading || reloadLoading}
+            disabled={loading || reloadLoading}
+            value={previewType}
+            onChange={(value) => {
+              setPreviewType(value)
+            }}
+          />
+        ) : null}
       </Flex>
 
       <iframe
         ref={iframeRef}
-        srcDoc={previewContent}
+        srcDoc={previewType == 'HTML' ? previewContentHTML : undefined}
+        src={previewType == 'PDF' ? pdfBlob : undefined}
         frameBorder='0'
         style={{
           width: '100%',
@@ -146,7 +188,8 @@ TemplatePreview.propTypes = {
   style: PropTypes.object,
   showTestObject: PropTypes.bool,
   onTestObjectOpen: PropTypes.func.isRequired,
-  onPreviewMessage: PropTypes.func.isRequired
+  onPreviewMessage: PropTypes.func.isRequired,
+  showPreviewSwitch: PropTypes.bool
 }
 
 export default TemplatePreview