form-craft-package 1.9.10 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.9.10",
+  "version": "1.10.0",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/common/custom-hooks/use-preserved-form-items.hook.ts

@@ -7,6 +7,10 @@ export const useFormPreservedItemValues = (formRef?: FormInstance): IFormValues
   const signatureFields = Form.useWatch(FormPreservedItemKeys.SignatureFields, { form: formRef, preserve: true })
   const isPublic = Form.useWatch(FormPreservedItemKeys.IsPublic, { form: formRef, preserve: true })
   const formNotifications = Form.useWatch(FormPreservedItemKeys.FormNotifications, { form: formRef, preserve: true })
+  const formTemplateReports = Form.useWatch(FormPreservedItemKeys.FormTemplateReports, {
+    form: formRef,
+    preserve: true,
+  })
   const submissionPdfConfig = Form.useWatch(FormPreservedItemKeys.SubmissionPdfConfig, {
     form: formRef,
     preserve: true,
@@ -27,6 +31,7 @@ export const useFormPreservedItemValues = (formRef?: FormInstance): IFormValues
     [FormPreservedItemKeys.SignatureFields]: signatureFields,
     [FormPreservedItemKeys.IsPublic]: isPublic,
     [FormPreservedItemKeys.FormNotifications]: formNotifications,
+    [FormPreservedItemKeys.FormTemplateReports]: formTemplateReports,
     [FormPreservedItemKeys.DuplicateDataFound]:
       duplicateDataMatches && Object.values(duplicateDataMatches).some((result) => result),
     [FormPreservedItemKeys.DuplicateCheckPending]: isDuplicateCheckPending,

package/src/components/form/1-list/table-header.tsx

@@ -9,6 +9,7 @@ import { IDataListHeaderLayoutContext } from './table'
 import {
   BSON_DATA_IDENTIFIER_PREFIXES,
   ELEMENTS_DEFAULT_CLASS,
+  MongoDbExtendedJsonObjectKeys,
   VALUE_REPLACEMENT_PLACEHOLDER,
   VALUE_REPLACEMENT_PLACEHOLDER2,
 } from '../../../constants'
@@ -179,9 +180,9 @@ const handleFilterValues = async (config: IFilterConfig, value: any) => {
         : dayjs.utc().endOf('day').toISOString()
     } else value = dayjs.utc(value as Date).toISOString()
   } else if ((config as IFilterCustom).bsonDataType === BSON_DATA_IDENTIFIER_PREFIXES.Number) {
-    value = { $numberDecimal: value }
+    value = { [MongoDbExtendedJsonObjectKeys.Number]: value }
   } else if ((config as IFilterCustom).bsonDataType === BSON_DATA_IDENTIFIER_PREFIXES.ObjectId) {
-    value = { $oid: value }
+    value = { [MongoDbExtendedJsonObjectKeys.ObjectId]: value }
   }
 
   if (config.type === FilterConfigTypeEnum.Custom && (config as IFilterCustom).config) {

package/src/components/form/2-details/index.tsx

@@ -160,6 +160,7 @@ function FormDataDetailsComponentChild({
   )
 
   useEffect(() => {
+    // set form notifications
     if (!cachedConfig?.notificationsConfig || !Array.isArray(cachedConfig.notificationsConfig.notifications)) return
 
     formDataRef.setFieldValue(FormPreservedItemKeys.FormNotifications, {
@@ -168,6 +169,16 @@ function FormDataDetailsComponentChild({
   }, [cachedConfig])
 
   useEffect(() => {
+    // set form template reports
+    if (!cachedConfig?.templateReportConfig || !Array.isArray(cachedConfig.templateReportConfig.templates)) return
+
+    formDataRef.setFieldValue(FormPreservedItemKeys.FormTemplateReports, {
+      [cachedConfig.id]: cachedConfig.templateReportConfig,
+    })
+  }, [cachedConfig])
+
+  useEffect(() => {
+    // set form text translations
     if (!cachedConfig?.id || !cachedConfig?.translations) return
 
     translationStore.setTranslations(cachedConfig.id, cachedConfig.translations)
@@ -180,8 +191,8 @@ function FormDataDetailsComponentChild({
     originalTzFieldsRef.current = getPickerFieldsWithOriginalTz(elements)
 
     if (isPublic) {
-      if (cachedConfig.generateConfig?.submissionPdf?.enabled)
-        formDataRef.setFieldValue(FormPreservedItemKeys.SubmissionPdfConfig, cachedConfig.generateConfig.submissionPdf)
+      if (cachedConfig.submissionPdfConfig?.enabled)
+        formDataRef.setFieldValue(FormPreservedItemKeys.SubmissionPdfConfig, cachedConfig.submissionPdfConfig)
       formDataRef.setFieldValue(FormPreservedItemKeys.IsDetailsDataSet, true)
     } else fetchFormData(formId, cachedConfig.detailsConfig.dataFetchConfig)
   }, [cachedConfig, formId, isPublic, formDataRef, fetchFormData])

package/src/components/form/layout-renderer/3-element/1-dynamic-button/index.tsx

@@ -114,9 +114,15 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
     },
   })
 
-  const handleSecondaryAction = useCallback(
-    (formDataId?: string) => {
-      if (!btnProps.secondaryAction || Object.values(btnProps.secondaryAction).length === 0) {
+  const handleFollowUpAction = useCallback(
+    ({
+      actionLevel = 'secondaryAction',
+      formDataId,
+    }: {
+      actionLevel?: 'secondaryAction' | 'tertiaryAction'
+      formDataId?: string
+    }) => {
+      if (!btnProps[actionLevel] || Object.values(btnProps[actionLevel]).length === 0) {
         if (formInfo?.name && formDataId) {
           const detailsUrl = `${constructDynamicFormHref(formInfo.name)}/${formDataId}`
 
@@ -129,36 +135,41 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
         return
       }
 
-      const { category } = btnProps.secondaryAction
-      if (category === ButtonActionCategoryEnum.Navigate) onButtonNavigate(btnProps.secondaryAction, btnProps.formId)
+      const hasTertiaryAction = actionLevel === 'secondaryAction' && !!btnProps.tertiaryAction
+      if (hasTertiaryAction) handleFollowUpAction({ actionLevel: 'tertiaryAction', formDataId })
+
+      const { category } = btnProps[actionLevel]
+      if (category === ButtonActionCategoryEnum.Navigate) onButtonNavigate(btnProps[actionLevel], btnProps.formId)
       else if (category === ButtonActionCategoryEnum.CustomFunction) {
         setLoading(false)
-        onFunctionCall({ functionName: btnProps.secondaryAction.functionName, newFormDataId: formDataId })
-      } else if (category === ButtonActionCategoryEnum.SendNotification) onSendNotification(btnProps.secondaryAction)
+        onFunctionCall({ functionName: btnProps[actionLevel].functionName, newFormDataId: formDataId })
+      } else if (category === ButtonActionCategoryEnum.SendNotification) onSendNotification(btnProps[actionLevel])
       else {
         // fallback
+        if (hasTertiaryAction) return
+
         setLoading(false)
         setDataLoadingType(undefined)
       }
     },
-    [btnProps, onButtonNavigate, formInfo, formDataId, onSendNotification],
+    [btnProps, onButtonNavigate, formInfo, onSendNotification],
   )
 
   const onDuplicateData = useDuplicateDataAction({
     ...formContext,
-    onSuccess: () => handleSecondaryAction(),
+    onSuccess: () => handleFollowUpAction({}),
     onError: () => displayResultMessage(false),
     onFinal: () => setLoading(false),
   })
   const onDeleteData = useDeleteDataAction({
     ...formContext,
-    onSuccess: () => handleSecondaryAction(),
+    onSuccess: () => handleFollowUpAction({}),
     onError: () => displayResultMessage(false),
     onFinal: () => setLoading(false),
   })
   const onPublishData = usePublishDataAction({
     ...formContext,
-    onSuccess: () => handleSecondaryAction(),
+    onSuccess: () => handleFollowUpAction({}),
     onError: () => displayResultMessage(false),
     onFinal: () => setLoading(false),
   })
@@ -169,7 +180,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
       setDataLoadingType(undefined)
       setLoading(false)
     },
-    onSuccess: (formDataId?: string) => handleSecondaryAction(formDataId),
+    onSuccess: (formDataId?: string) => handleFollowUpAction({ formDataId }),
     onError: () => {
       setDataLoadingType(undefined)
       displayResultMessage(false)
@@ -181,7 +192,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
     setDataLoadingType,
     onSuccess: () => {
       displayResultMessage()
-      handleSecondaryAction()
+      handleFollowUpAction({})
     },
     onError: () => {
       setDataLoadingType(undefined)

package/src/components/form/layout-renderer/3-element/1-dynamic-button/use-generate-report.hook.tsx

@@ -1,14 +1,15 @@
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useState } from 'react'
 import { Modal, Select, Spin } from 'antd'
 import { FaCaretDown } from 'react-icons/fa6'
-import { IDynamicForm, IFormSchema, IFormTemplateReport } from '../../../../../types'
+import { IDynamicForm, IFormTemplateReport } from '../../../../../types'
 import { Button_FillerPortal } from '../../../../common/button'
 import { useNotification } from '../../../../common/custom-hooks'
-import { fetchFormDataAsLookup, getIdEqualsQuery, renderData } from '../../../../../functions/forms'
+import { replaceAndGetFileBlob } from '../../../../../functions/forms'
 import client from '../../../../../api/client'
-import { FieldElementOptionSourceEnum, LOCAL_STORAGE_KEYS_ENUM } from '../../../../../enums'
+import { LOCAL_STORAGE_KEYS_ENUM } from '../../../../../enums'
 import { IFormContext } from '../../1-row'
 import { IOnSuccessFunctions } from '.'
+import { useFormPreservedItemValues } from '../../../../common/custom-hooks/use-preserved-form-items.hook'
 
 /* --------------------------------------------------------------------------
   Generates a report by logging current form values.
@@ -17,6 +18,7 @@ export const useGenerateReportAction = ({
   onSuccess,
   onError,
   onFinal,
+  formRef,
   ...formContext
 }: IOnSuccessFunctions & IFormContext) => {
   const { companyKey, formName, formDataId } = formContext
@@ -26,49 +28,72 @@ export const useGenerateReportAction = ({
   const [templateReports, setTemplateReports] = useState<IFormTemplateReport[]>([])
   const [loading, setLoading] = useState(false)
   const [formData, setFormData] = useState<{ [key: string]: any }>({})
-  const selectedDataFormIdRef = useRef<number | undefined>()
+  const { formTemplateReports } = useFormPreservedItemValues(formRef)
 
   const onGenerateReport = useCallback(async () => {
     setLoading(true)
     setIsModalOpen(true)
     try {
       const storedData = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.DynamicForms)
-      if (storedData) {
-        const parsedData: IDynamicForm[] = JSON.parse(storedData)
-        const form = parsedData.find((entry) => entry.name.toLowerCase() === formName?.toLowerCase())
+      if (!storedData) {
+        setLoading(false)
+        return
+      }
+      const parsedData: IDynamicForm[] = JSON.parse(storedData)
+      const form = parsedData.find((entry) => entry.name.toLowerCase() === formName?.toLowerCase())
 
-        if (form) {
-          selectedDataFormIdRef.current = form.id
-          client
-            .get(`/api/form/${form.id}`)
-            .then((res) => {
-              if (res.status === 200) {
-                const parsedFormData: IFormSchema | null = JSON.parse(res.data.data)
-                if (parsedFormData) {
-                  const reports = parsedFormData.generateConfig.templateReports ?? []
-                  if (reports.length)
-                    client
-                      .post(`/api/report/data/${form.id}`, {
-                        joins: parsedFormData.generateConfig.formJoins,
-                        match: JSON.stringify(getIdEqualsQuery('_id', formDataId)),
-                      })
-                      .then((res) => {
-                        if (res.status === 200) {
-                          setFormData(res.data.data[0])
-                          setTemplateReports(reports)
-                        }
-                      })
-                }
-              }
-            })
-            .finally(() => setLoading(false))
-        } else setLoading(false)
-      } else setLoading(false)
+      if (!form) {
+        setLoading(false)
+        return
+      }
+      const { templates = [], joins = [] } = formTemplateReports?.[form.id] || { templates: [], joins: [] }
+
+      if (templates.length === 0) {
+        setLoading(false)
+        return
+      }
+
+      client
+        .post(`/api/report/${form.id}/${formDataId}`, { joins })
+        .then((res) => {
+          if (res.status === 200) {
+            setFormData(res.data)
+            setTemplateReports(templates)
+          }
+        })
+        .finally(() => setLoading(false))
     } catch (error) {
       console.error('Error reading or parsing localStorage data', error)
       setLoading(false)
     }
-  }, [templateReports, formName, formDataId])
+  }, [formTemplateReports, formName, formDataId])
+
+  const handleDataReplacement = useCallback(async () => {
+    setLoading(true)
+    const selectedTemplateInfo: IFormTemplateReport = templateReports.find(
+      (t: IFormTemplateReport) => t.fileBlobName === selectedTemplate,
+    )!
+
+    const replacedFileBlob = await replaceAndGetFileBlob(selectedTemplateInfo, formData, companyKey)
+    if (replacedFileBlob) {
+      const url = window.URL.createObjectURL(new Blob([replacedFileBlob]))
+      const link = document.createElement('a')
+      link.href = url
+      link.setAttribute(
+        'download',
+        selectedTemplateInfo.templateName.includes('.pdf')
+          ? selectedTemplateInfo.templateName
+          : `${selectedTemplateInfo.templateName}.pdf`,
+      ) //or any other extension
+      document.body.appendChild(link)
+      link.click()
+      onSuccess()
+    } else onError()
+
+    onFinal()
+    setLoading(false)
+    setIsModalOpen(false)
+  }, [templateReports, selectedTemplate])
 
   const ChooseTemplateReportModal = isModalOpen ? (
     <Modal
@@ -93,74 +118,7 @@ export const useGenerateReportAction = ({
                 return
               }
 
-              setLoading(true)
-              const selectedTemplateInfo: IFormTemplateReport = templateReports.find(
-                (t: IFormTemplateReport) => t.fileBlobName === selectedTemplate,
-              )!
-
-              const replacements = await Promise.all(
-                selectedTemplateInfo.replacements.map(async (rep) => {
-                  const value = rep.field.split('.').reduce((curr, n) => curr[n] ?? {}, formData)
-
-                  if (!!rep.optionSource) {
-                    if (rep.optionSource.type === FieldElementOptionSourceEnum.Static) {
-                      return {
-                        placeholder: rep.placeholder,
-                        value: renderData(
-                          rep.optionSource.options.find((op) => op.id === (value as unknown as string))?.value,
-                          rep.renderConfig,
-                        ),
-                      }
-                    } else if (rep.optionSource.type === FieldElementOptionSourceEnum.DynamicForm) {
-                      const formDataResData = await fetchFormDataAsLookup(rep.optionSource.baseFormId)
-
-                      const field = rep.optionSource.optionRender?.fields?.[0].field
-                      return {
-                        placeholder: rep.placeholder,
-                        value: renderData(
-                          formDataResData.find((data) => data.id === (value as unknown as string))?.[
-                            field ? `Data.${field}` : field
-                          ],
-                          rep.renderConfig,
-                        ),
-                      }
-                    }
-                  }
-                  return {
-                    placeholder: rep.placeholder,
-                    value: renderData(value, rep.renderConfig),
-                    type: rep.type,
-                  }
-                }),
-              )
-
-              client
-                .post(
-                  `/api/template/${companyKey}/${selectedTemplateInfo.fileBlobName}`,
-                  replacements.map((r) => ({
-                    key: r.placeholder,
-                    value: r.value?.toString() ?? '-',
-                    type: r.type,
-                  })),
-                  { responseType: 'blob' },
-                )
-                .then((res) => {
-                  if (res.status === 200) {
-                    const url = window.URL.createObjectURL(new Blob([res.data]))
-                    const link = document.createElement('a')
-                    link.href = url
-                    link.setAttribute('download', `${selectedTemplateInfo.templateName}.pdf`) //or any other extension
-                    document.body.appendChild(link)
-                    link.click()
-                    onSuccess()
-                  }
-                })
-                .catch(() => onError())
-                .finally(() => {
-                  onFinal()
-                  setLoading(false)
-                  setIsModalOpen(false)
-                })
+              handleDataReplacement()
             }}
           >
             Continue

package/src/components/form/layout-renderer/3-element/1-dynamic-button/use-send-notification.hook.ts

@@ -1,12 +1,25 @@
-import { useCallback, useMemo } from 'react'
-import { NotificationTypeEnum } from '../../../../../enums'
+import { useCallback, useMemo, useRef } from 'react'
 import client from '../../../../../api/client'
 import { IFormContext } from '../../1-row'
 import { IOnSuccessFunctions } from '.'
 import { useNotification } from '../../../../common/custom-hooks'
-import { IButtonProps_SendNotification, IEmail_Attachment, IFormJoin, IFormNotification } from '../../../../../types'
 import { useFormPreservedItemValues } from '../../../../common/custom-hooks/use-preserved-form-items.hook'
-import { REGEX_PATTERNS } from '../../../../../constants'
+import { MongoDbExtendedJsonObjectKeys, REGEX_PATTERNS } from '../../../../../constants'
+import { renderData, replaceAndGetFileBlob } from '../../../../../functions'
+import {
+  CountryEnum,
+  DataRenderTypeEnum,
+  LOCAL_STORAGE_KEYS_ENUM,
+  NotificationTypeEnum,
+  TranslationTextTypeEnum,
+} from '../../../../../enums'
+import {
+  IButtonProps_SendNotification,
+  IEmail_Attachment,
+  IFormJoin,
+  IFormNotification,
+  IFormTemplateReport,
+} from '../../../../../types'
 
 /* --------------------------------------------------------------------------
    Send notification: Email | Text | Push
@@ -16,20 +29,78 @@ export const useSendNotificationAction = ({
   formRef,
   formDataId,
   formId,
+  companyKey,
   onSuccess,
   onError,
   onFinal,
 }: IOnSuccessFunctions & IFormContext) => {
-  const { warning } = useNotification()
-  const { formNotifications: allNotificaitons } = useFormPreservedItemValues(formRef)
+  const { success, warning } = useNotification()
+  const {
+    baseServerUrl,
+    formNotifications: allNotifications,
+    formTemplateReports,
+  } = useFormPreservedItemValues(formRef)
+  const blobDataToDeleteRef = useRef<string[]>([])
+
+  const fileBaseUrl = useMemo(() => {
+    const domain = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.Domain)
+    return `${baseServerUrl}/api/attachment/${domain}`
+  }, [baseServerUrl])
 
   const formNotifications: { joins: IFormJoin[]; notifications: IFormNotification[] } = useMemo(() => {
     const defaultNotifs = { joins: [], notifications: [] }
 
-    if (!formId || !allNotificaitons || !allNotificaitons[formId]) return defaultNotifs
+    if (!formId || !allNotifications || !allNotifications[formId]) return defaultNotifs
+
+    return allNotifications[formId]
+  }, [allNotifications, formId])
+
+  const handleTemplateReport = useCallback(
+    async (attachments: IEmail_Attachment[]): Promise<IEmail_Attachment[]> => {
+      try {
+        if (!formId) return []
+
+        const templateReports = formTemplateReports[formId]
+
+        const joinedFormData = await client
+          .post(`/api/report/${formId}/${formDataId}`, { joins: templateReports.joins })
+          .then((res) => (res.status === 200 ? res.data : {}))
+          .catch(() => ({}))
 
-    return allNotificaitons[formId]
-  }, [allNotificaitons, formId])
+        const dataReplacedFormAttachments: IEmail_Attachment[] = []
+
+        for (const attachment of attachments) {
+          const selectedTemplateInfo = templateReports.templates.find(
+            (tR: IFormTemplateReport) => tR.fileBlobName === attachment.blobName,
+          )
+          if (!selectedTemplateInfo) continue
+
+          const replacedFileBlob = await replaceAndGetFileBlob(selectedTemplateInfo, joinedFormData, companyKey)
+
+          if (replacedFileBlob) {
+            const formData = new FormData()
+            formData.append('file', replacedFileBlob)
+            const blobName = await client
+              .post('/api/attachment', formData)
+              .then((res) => (res.status === 200 ? res.data : ''))
+              .catch(() => '')
+
+            blobDataToDeleteRef.current = [...blobDataToDeleteRef.current, blobName]
+            dataReplacedFormAttachments.push({
+              ...attachment,
+              blobName,
+              fileName: attachment.fileName.replace('.docx', '.pdf'),
+            })
+          }
+        }
+        return dataReplacedFormAttachments
+      } catch (err) {
+        console.error('handleTemplateReport failed: ', err)
+        return []
+      }
+    },
+    [formTemplateReports, formId, formDataId, companyKey],
+  )
 
   const onSendNotification = useCallback(
     async (notifActionProps: IButtonProps_SendNotification) => {
@@ -44,6 +115,10 @@ export const useSendNotificationAction = ({
         return
       }
 
+      let formTemplateReportAttachments: IEmail_Attachment[] = []
+      if (Array.isArray(formNotif?.attachments) && formNotif.attachments.length > 0)
+        formTemplateReportAttachments = await handleTemplateReport(formNotif?.attachments)
+
       try {
         const notifConfigRes = await client.get(`/api/notificationconfig/${notificationId}/data`)
         const formDataRes = await client.post(`/api/report/${formId}/${formDataId}`, { joins })
@@ -55,19 +130,63 @@ export const useSendNotificationAction = ({
         ) {
           let notifConfig = notifConfigRes.data.data || ''
 
-          for (const [placeholderKey, placeholderValue] of Object.entries(formNotif.replacements)) {
-            const repValue = placeholderValue
-              .split('.')
-              .reduce((accData, path) => accData[path] || accData, formDataRes.data)
+          for (const [placeholderKey, placeholderReplacement] of Object.entries(formNotif.replacements)) {
+            const { field: fieldPath, renderConfig } = placeholderReplacement
+
+            if (renderConfig?.type === DataRenderTypeEnum.Image) {
+              const imgTag = buildImageTag(`${fileBaseUrl}/${encodeURIComponent(fieldPath)}`, {
+                width: renderConfig.style?.width,
+                height: renderConfig.style?.height,
+                alt: 'Image is attached as attachment!',
+              })
+              notifConfig = notifConfig.replace(placeholderKey, imgTag)
+            } else if (fieldPath) {
+              let repValue = fieldPath.split('.').reduce((accData, path) => accData[path] || accData, formDataRes.data)
+
+              if (typeof repValue === 'object' && MongoDbExtendedJsonObjectKeys.Date in repValue)
+                repValue = repValue[MongoDbExtendedJsonObjectKeys.Date]
+              else if (typeof repValue === 'object' && MongoDbExtendedJsonObjectKeys.Number in repValue)
+                repValue = repValue[MongoDbExtendedJsonObjectKeys.Number]
+
+              if (renderConfig?.type === DataRenderTypeEnum.FieldOption) {
+                try {
+                  const fieldPathParts = fieldPath.split('.')
+                  const fieldFormId = !isNaN(Number(fieldPathParts[0])) ? Number(fieldPathParts[0]) : formId
+                  const fieldKey = fieldPathParts[fieldPathParts.length - 1]
+
+                  const tKey = `${fieldKey}__${TranslationTextTypeEnum.OptionValue}__${repValue}`
+                  const selectedLanguage =
+                    localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.SelectedLanguage) || CountryEnum.US
+                  const projectPath = `Data.translations.${tKey}`
+
+                  await client
+                    .post(`/api/form/${fieldFormId}`, { project: JSON.stringify({ [projectPath]: 1 }) })
+                    .then((res) => {
+                      if (res.status === 200) {
+                        const translationsPerCountry =
+                          projectPath.split('.').reduce((acc, p) => acc[p] || acc, res.data) || {}
+                        if (typeof translationsPerCountry[selectedLanguage] === 'string')
+                          repValue = translationsPerCountry[selectedLanguage]
+                      }
+                    })
+                } catch {}
+              }
 
-            if (['string', 'boolean', 'number'].includes(typeof repValue))
-              notifConfig = notifConfig.replaceAll(placeholderKey, repValue)
+              if (['string', 'boolean', 'number'].includes(typeof repValue))
+                notifConfig = notifConfig.replaceAll(
+                  placeholderKey,
+                  renderConfig ? renderData(repValue, renderConfig) : repValue,
+                )
+            }
           }
 
           const parsedNotifConfig = JSON.parse(notifConfig) || {}
-          const notifTypes = Object.keys(parsedNotifConfig) || []
+          const notifTypes =
+            Object.keys(parsedNotifConfig).filter((key) =>
+              Object.values(NotificationTypeEnum).includes(key as NotificationTypeEnum),
+            ) || []
 
-          await Promise.all(
+          const notifRes = await Promise.all(
             notifTypes.map((type) => {
               let endpoint = '/api/notification/email'
               if (type === NotificationTypeEnum.Push) endpoint = '/api/notification/push'
@@ -75,20 +194,27 @@ export const useSendNotificationAction = ({
 
               const typeReqData = parsedNotifConfig[type] || {}
 
+              const selectedLanguage = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.SelectedLanguage) || CountryEnum.US
+
               if (type === NotificationTypeEnum.Email) {
                 if (!typeReqData.subject) typeReqData.subject = ''
+                else typeReqData.subject = typeReqData.subject[selectedLanguage]
+
                 if (!typeReqData.to) typeReqData.to = ''
+
                 if (!typeReqData.body) typeReqData.body = ''
                 else {
                   // used safeNormalizeForEmail, otherwise, it's received with big line heights
-                  typeReqData.body = safeNormalizeForEmail(typeReqData.body)
+                  typeReqData.body = safeNormalizeForEmail(typeReqData.body[selectedLanguage])
                 }
 
                 if (Array.isArray(typeReqData.attachments))
-                  typeReqData.attachments = typeReqData.attachments.map((att: IEmail_Attachment) => {
-                    const { type, ...restAtt } = att
-                    return restAtt
-                  })
+                  typeReqData.attachments = [...typeReqData.attachments, ...formTemplateReportAttachments].map(
+                    (att: IEmail_Attachment) => {
+                      const { type, ...restAtt } = att
+                      return restAtt
+                    },
+                  )
 
                 const emailFields = ['to', 'from', 'cc', 'bcc']
                 emailFields.forEach((f) => {
@@ -99,11 +225,28 @@ export const useSendNotificationAction = ({
               }
 
               const reqData = { notificationId: formNotif.id, ...typeReqData }
-              client.post(endpoint, reqData)
+
+              return client.post(endpoint, reqData).then((res) => {
+                if (res.status === 200) return type
+              })
             }),
           )
 
-          onSuccess()
+          if (notifRes.filter(Boolean).length > 0) {
+            if (blobDataToDeleteRef.current.length)
+              setTimeout(async () => {
+                await Promise.all(
+                  blobDataToDeleteRef.current.map((blobName) => client.delete(`/api/attachment/${blobName}`)),
+                )
+                blobDataToDeleteRef.current = []
+              }, 500)
+            success({
+              message: `Successfully sent out the ${notifRes.join(', ').toLowerCase()} notification${
+                notifRes.length === 1 ? '' : 's'
+              }!`,
+            })
+            onSuccess()
+          }
         }
 
         onFinal()
@@ -112,7 +255,7 @@ export const useSendNotificationAction = ({
         onError()
       }
     },
-    [onSuccess, onError, onFinal, formNotifications, formId, formDataId],
+    [onSuccess, onError, onFinal, formNotifications, formId, formDataId, handleTemplateReport, fileBaseUrl],
   )
 
   return onSendNotification
@@ -140,6 +283,8 @@ function safeNormalizeForEmail(
     listIndentPx?: number // default 20
   } = {},
 ) {
+  if (!html) return ''
+
   const baseFontPx = opts.baseFontPx ?? 14
   const lineHeightPx = opts.lineHeightPx ?? 20
   const listIndentPx = opts.listIndentPx ?? 20
@@ -188,3 +333,74 @@ function safeNormalizeForEmail(
 
   return out
 }
+type Dim = number | string | undefined
+
+function normCssDim(v: Dim, fallback: string): string {
+  if (v == null) return fallback
+  if (typeof v === 'number') return `${v}px`
+  return v
+}
+
+function pxNumber(v: Dim): number | undefined {
+  if (v == null) return undefined
+  if (typeof v === 'number') return v
+  if (v.endsWith('px')) {
+    const n = parseInt(v, 10)
+    return Number.isFinite(n) ? n : undefined
+  }
+  return undefined // don't emit % as attributes
+}
+
+function escAttrSingle(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+/**
+ * Email-safe <img> generator (single-quoted attributes).
+ * - If height (px) is provided and width is not, we emit:
+ *   height='N' + style 'height:Npx;width:auto;max-width:100%' => closest to "contain by height"
+ * - If width is % (e.g., '100%'), it's emitted only in CSS (not as an attribute).
+ * - If width/height are numeric (px), attributes + matching CSS are emitted for Outlook reliability.
+ */
+export function buildImageTag(
+  src: string,
+  opts?: {
+    alt?: string
+    width?: Dim // 300 | '300px' | '100%'
+    height?: Dim // 30 | '30px' | '50%'
+    extraStyle?: string
+    className?: string
+  },
+): string {
+  const { alt = '', width, height, extraStyle, className } = opts || {}
+
+  const cssW = normCssDim(width, 'auto')
+  const cssH = normCssDim(height, 'auto')
+
+  const wAttrNum = pxNumber(width)
+  const hAttrNum = pxNumber(height)
+
+  let attrs = ` src='${escAttrSingle(src)}' alt='${alt}'`
+  if (wAttrNum !== undefined) attrs += ` width='${wAttrNum}'`
+  if (hAttrNum !== undefined) attrs += ` height='${hAttrNum}'`
+  if (className) attrs += ` class='${escAttrSingle(className)}'`
+
+  const styles = [
+    'display:block',
+    'border:0',
+    'outline:0',
+    'text-decoration:none',
+    '-ms-interpolation-mode:bicubic',
+    `width:${cssW}`,
+    `height:${cssH}`,
+  ]
+
+  // If we're constraining by height only, keep width fluid but prevent overflow
+  if (height && !width) styles.push('max-width:100%')
+
+  if (extraStyle?.trim()) styles.push(extraStyle.trim())
+
+  attrs += ` style='${styles.join(';')}'`
+
+  return `<img${attrs} />`
+}

package/src/constants.ts

@@ -174,6 +174,11 @@ export const BSON_DATA_IDENTIFIER_PREFIXES = {
   Date: 'Date__',
   Number: 'Number__',
 }
+export enum MongoDbExtendedJsonObjectKeys {
+  Date = '$date',
+  ObjectId = '$oid',
+  Number = '$numberDecimal',
+}
 export const DEFAULT_FORM_SCHEMA_DATA: IFormSchema = {
   detailsConfig: {
     elements: {},
@@ -186,7 +191,8 @@ export const DEFAULT_FORM_SCHEMA_DATA: IFormSchema = {
     columns: [],
     header: { elements: {}, layouts: { [DeviceBreakpointEnum.Default]: [] } },
   },
-  generateConfig: { submissionPdf: { enabled: false } },
+  submissionPdfConfig: { enabled: false },
+  templateReportConfig: { templates: [], joins: [] },
   relationships: [],
   translations: {},
   notificationsConfig: { notifications: [] },

package/src/enums/form.enum.ts

@@ -48,6 +48,7 @@ export enum DataRenderTypeEnum {
   Image = 'Image',
   // PhoneNumber = 'PhoneNumber',
   Date = 'Date',
+  FieldOption = 'FieldOption',
   Buttons = 'Buttons',
   Conditional = 'Conditional',
   // Concatenation = 'Concatenation',
@@ -142,6 +143,7 @@ export enum FormPreservedItemKeys {
   FormNotifications = 'formNotifications',
   DuplicateDataFound = 'isDuplicateDataFound',
   DuplicateCheckPending = 'isDuplicateCheckPending',
+  FormTemplateReports = 'formTemplateReports',
 }
 export enum DataCategoryEnum {
   Number = 'Number',

package/src/enums/index.ts

@@ -140,4 +140,4 @@ export enum TranslationTextSubTypeEnum {
   ErrorMsg = 'ErrMsg',
   ButtonsGroup = 'BtnsGroup',
   NotFound = 'NotFound',
-}
+}

package/src/functions/forms/extended-json-handlers.ts

@@ -1,4 +1,4 @@
-import { BSON_DATA_IDENTIFIER_PREFIXES } from '../../constants'
+import { BSON_DATA_IDENTIFIER_PREFIXES, MongoDbExtendedJsonObjectKeys } from '../../constants'
 import { isValidMongoDbId } from '..'
 import dayjs from 'dayjs'
 
@@ -7,21 +7,21 @@ export function toMongoDbExtendedJSON(input: Record<string, any>): Record<string
 
   for (const [key, val] of Object.entries(input)) {
     if (key.startsWith(BSON_DATA_IDENTIFIER_PREFIXES.ObjectId)) {
-      if (typeof val === 'string' && isValidMongoDbId(val)) out[key] = { $oid: val }
+      if (typeof val === 'string' && isValidMongoDbId(val)) out[key] = { [MongoDbExtendedJsonObjectKeys.ObjectId]: val }
       else {
         console.warn(`Invalid ObjectId for "${key}":`, val)
         out[key] = val
       }
     } else if (key.startsWith(BSON_DATA_IDENTIFIER_PREFIXES.Date)) {
       if (val && dayjs(val).isValid()) {
-        out[key] = { $date: dayjs(val).utc().toISOString() }
+        out[key] = { [MongoDbExtendedJsonObjectKeys.Date]: dayjs(val).utc().toISOString() }
       } else {
         console.warn(`Invalid Date for "${key}":`, val)
         out[key] = val
       }
     } else if (key.startsWith(BSON_DATA_IDENTIFIER_PREFIXES.Number)) {
       const num = typeof val === 'number' ? val : Number(val)
-      if (!isNaN(num)) out[key] = { $numberDecimal: num }
+      if (!isNaN(num)) out[key] = { [MongoDbExtendedJsonObjectKeys.Number]: num }
       else {
         console.warn(`Invalid Number for "${key}":`, val)
         out[key] = val
@@ -39,18 +39,28 @@ export function fromMongoDbExtendedJSON(
   const out: Record<string, any> = {}
 
   for (const [key, val] of Object.entries(input)) {
-    if (key.startsWith(BSON_DATA_IDENTIFIER_PREFIXES.ObjectId) && val && typeof val === 'object' && '$oid' in val) {
-      out[key] = (val as any).$oid
-    } else if (key.startsWith(BSON_DATA_IDENTIFIER_PREFIXES.Date) && val && typeof val === 'object' && '$date' in val) {
-      const date = (val as any).$date
+    if (
+      key.startsWith(BSON_DATA_IDENTIFIER_PREFIXES.ObjectId) &&
+      val &&
+      typeof val === 'object' &&
+      MongoDbExtendedJsonObjectKeys.ObjectId in val
+    ) {
+      out[key] = (val as any)[MongoDbExtendedJsonObjectKeys.ObjectId]
+    } else if (
+      key.startsWith(BSON_DATA_IDENTIFIER_PREFIXES.Date) &&
+      val &&
+      typeof val === 'object' &&
+      MongoDbExtendedJsonObjectKeys.Date in val
+    ) {
+      const date = (val as any)[MongoDbExtendedJsonObjectKeys.Date]
       out[key] = date ? (originalTzFields.includes(key) ? dayjs(date).utc() : dayjs(date)) : date
     } else if (
       key.startsWith(BSON_DATA_IDENTIFIER_PREFIXES.Number) &&
       val &&
       typeof val === 'object' &&
-      '$numberDecimal' in val
+      MongoDbExtendedJsonObjectKeys.Number in val
     ) {
-      const n = (val as any).$numberDecimal
+      const n = (val as any)[MongoDbExtendedJsonObjectKeys.Number]
       out[key] = typeof n === 'number' ? n : Number(n)
     } else out[key] = val
   }

package/src/functions/forms/index.ts

@@ -15,7 +15,9 @@ import {
   IGridContainerConfig,
   IDynamicForm,
   IFormDataApiReqConfig,
+  IFormTemplateReport,
 } from '../../types'
+import { renderData } from '..'
 
 export const extractFiltersFromLayout = (elements: { [key: string]: IDndLayoutElement }) => {
   const filters: IFilterNested = {}
@@ -197,4 +199,66 @@ export const isNewFormDataPage = (formDataId?: string) => !formDataId || formDat
 
 /** ---------------------------------------------------------------------------------------------------------  */
 
+export const replaceAndGetFileBlob = async (
+  tInfo: IFormTemplateReport,
+  formData: any,
+  companyKey?: string,
+): Promise<string> => {
+  if (!companyKey) return ''
+
+  try {
+    const replacements = await Promise.all(
+      tInfo.replacements.map(async (rep) => {
+        const value = rep.field.split('.').reduce((curr, n) => curr?.[n] ?? {}, formData)
+
+        if (rep.optionSource) {
+          if (rep.optionSource.type === FieldElementOptionSourceEnum.Static) {
+            return {
+              placeholder: rep.placeholder,
+              value: renderData(
+                rep.optionSource.options.find((op) => op.id === (value as unknown as string))?.value,
+                rep.renderConfig,
+              ),
+            }
+          } else if (rep.optionSource.type === FieldElementOptionSourceEnum.DynamicForm) {
+            const formDataResData = await fetchFormDataAsLookup(rep.optionSource.baseFormId)
+            const field = rep.optionSource.optionRender?.fields?.[0]?.field
+
+            return {
+              placeholder: rep.placeholder,
+              value: renderData(
+                formDataResData.find((data) => data.id === (value as unknown as string))?.[
+                  field ? `Data.${field}` : field
+                ],
+                rep.renderConfig,
+              ),
+            }
+          }
+        }
+
+        return {
+          placeholder: rep.placeholder,
+          value: renderData(value, rep.renderConfig),
+          type: rep.type,
+        }
+      }),
+    )
+
+    return await client
+      .post(
+        `/api/template/${companyKey}/${tInfo.fileBlobName}`,
+        replacements.map((r) => ({ key: r.placeholder, value: r.value?.toString() ?? '-', type: r.type })),
+        { responseType: 'blob' },
+      )
+      .then((res) => (res.status === 200 ? res.data : ''))
+  } catch (err) {
+    console.error('replaceAndGetFileBlob failed:', err)
+    return ''
+  }
+}
+
+/** ---------------------------------------------------------------------------------------------------------  */
+
+/** ---------------------------------------------------------------------------------------------------------  */
+
 /** ---------------------------------------------------------------------------------------------------------  */

package/src/types/forms/generate/index.ts

@@ -1,7 +1,7 @@
 import { TemplateDataReplacementFieldTypesEnum } from '../../../enums'
 import { IDataRenderConfig, IFieldElementOptionSource } from '../layout-elements'
 
-export interface IFormSubmissionPdf {
+export interface IFormSubmissionPdfConfig { // only for public forms
   enabled: false
   title?: { values: { value: string; isDynamic: boolean; order: number }[]; delimiter: string }
   showDownloadModal?: boolean

package/src/types/forms/index.ts

@@ -4,9 +4,9 @@ export * from './generate'
 export * from './relationship'
 
 import { IDataListSorter, IFormDataListColumn, IFormDataListPagination } from './data-list'
-import { IFormSubmissionPdf, IFormTemplateReport } from './generate'
+import { IFormSubmissionPdfConfig, IFormTemplateReport } from './generate'
 import { IFormRelationshipConfig } from './relationship'
-import { IDndLayoutStructure_Responsive, IEmail_Attachment } from '..'
+import { IDataRenderConfig, IDndLayoutStructure_Responsive, IEmail_Attachment } from '..'
 import {
   ButtonElementSizeEnum,
   ButtonElementTypeEnum,
@@ -32,7 +32,11 @@ export interface IFormSchema {
     duplicateCheckConfig?: IDuplicateCheckConfig
   }
   dataListConfig: IFormDataListConfig
-  generateConfig: IFormGenerateConfig
+  submissionPdfConfig?: IFormSubmissionPdfConfig
+  templateReportConfig?: {
+    templates?: IFormTemplateReport[]
+    joins?: IFormJoin[]
+  }
   relationships?: IFormRelationshipConfig[]
   translations?: IFormTranslations
   notificationsConfig?: {
@@ -58,7 +62,7 @@ export type IFormTranslations = { [key: string]: { [key in CountryEnum]?: string
 export interface IFormNotification {
   id: number
   name?: string
-  replacements?: { [key: string]: string }
+  replacements?: { [key: string]: { field: string; renderConfig: IDataRenderConfig } }
   attachments?: IEmail_Attachment[]
 }
 
@@ -74,12 +78,6 @@ export interface IFormDataListConfig {
   noDataText?: string
 }
 
-export interface IFormGenerateConfig {
-  submissionPdf?: IFormSubmissionPdf
-  templateReports?: IFormTemplateReport[]
-  formJoins?: IFormJoin[]
-}
-
 export interface IFormDndLayoutRowHeader {
   isCollapsible?: boolean
   defaultCollapsed?: boolean

package/src/types/forms/layout-elements/button.ts

@@ -12,8 +12,9 @@ export type IButtonElementProps = IButtonPropsBase & {
     | IButtonProps_CustomFunctionCall
     | IButtonProps_SendNotification
     | IButtonProps_Other
-  // secondaryAction only applies if category is NOT [CustomFunction, SendNotification, Navigate]
+  // secondaryAction & tertiaryAction only applies if category is NOT [CustomFunction, SendNotification, Navigate]
   secondaryAction?: IButtonProps_Navigate | IButtonProps_CustomFunctionCall | IButtonProps_SendNotification
+  tertiaryAction?: IButtonProps_Navigate | IButtonProps_CustomFunctionCall | IButtonProps_SendNotification
 }
 
 export interface IButtonPropsBase {

package/src/types/forms/layout-elements/data-render-config.ts

@@ -8,6 +8,7 @@ export type IDataRenderConfig =
   | IDataRender_Image
   // | IDataRender_PhoneNumber
   | IDataRender_Date
+  | IDataRender_FieldOption
   | IDataRender_Buttons
   | IDataRender_Conditional
   | IDataRender_Tags
@@ -48,6 +49,10 @@ export interface IDataRender_Date {
   displayInOriginalTz?: boolean
 }
 
+export interface IDataRender_FieldOption {
+  type: DataRenderTypeEnum.FieldOption
+}
+
 export interface IDataRender_Conditional {
   type: DataRenderTypeEnum.Conditional
   conditions: { [key: string]: any } // similar to filter conditions

package/src/types/notifications/index.ts

@@ -7,7 +7,7 @@ export type INotificationConfig = {
   [NotificationTypeEnum.Push]: INotificationConfig_Push
 }
 
-interface INotificationConfig_Email {
+export interface INotificationConfig_Email {
   type: NotificationTypeEnum.Email
   subject: Record<CountryEnum, string>
   body: Record<CountryEnum, string>