form-craft-package 1.10.11 → 1.10.12-dev.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.10.11",
+  "version": "1.10.12-dev.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

@@ -8,6 +8,7 @@ export const useFormPreservedItemValues = (formRef?: FormInstance): IFormValues
   const isPublic = Form.useWatch(FormPreservedItemKeys.IsPublic, { form: formRef, preserve: true })
   const formNotifications = Form.useWatch(FormPreservedItemKeys.FormNotifications, { form: formRef, preserve: true })
   const isUserForm = Form.useWatch(FormPreservedItemKeys.IsUserForm, { form: formRef, preserve: true })
+  const userFormNotificationId = Form.useWatch(FormPreservedItemKeys.UserFormNotificationId, { form: formRef, preserve: true })
   const formTemplateReports = Form.useWatch(FormPreservedItemKeys.FormTemplateReports, {
     form: formRef,
     preserve: true,
@@ -37,6 +38,7 @@ export const useFormPreservedItemValues = (formRef?: FormInstance): IFormValues
       duplicateDataMatches && Object.values(duplicateDataMatches).some((result) => result),
     [FormPreservedItemKeys.DuplicateCheckPending]: isDuplicateCheckPending,
     [FormPreservedItemKeys.IsUserForm]: isUserForm,
+    [FormPreservedItemKeys.UserFormNotificationId]: userFormNotificationId,
   }
 }
 

package/src/components/common/disabled-field-indicator.tsx

@@ -1,15 +1,15 @@
 import { FaPencilAlt, FaSlash } from 'react-icons/fa'
 
 export const DisabledFieldIndicator = ({
-  top = 30,
-  right = 15,
+  bottom = 8,
+  right = 8,
   left,
 }: {
-  top?: number
+  bottom?: number
   right?: number
   left?: number
 }) => (
-  <div className="absolute cursor-nodrop" style={{ top, right, left, color: '#a1a1a1' }}>
+  <div className="absolute cursor-nodrop" style={{ bottom, right, left, color: '#a1a1a1' }}>
     <div className="absolute">
       <FaPencilAlt />
     </div>

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

@@ -1,4 +1,4 @@
-import { Form } from 'antd'
+import { Form, Spin } from 'antd'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { IDndLayoutStructure_Responsive, IFormDataDetailsFetchConfig } from '../../../types'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
@@ -62,12 +62,13 @@ function FormDataDetailsComponentChild({
   const location = useLocation()
   const [formDataRef] = Form.useForm()
   const [isNotFound, setIsNotFound] = useState(false)
+  const [isDataLoading, setIsDataLoading] = useState(false)
   const originalTzFieldsRef = useRef<string[]>([])
   useManyToManyConnector(formDataRef)
 
   const currentBreakpoint = useGetCurrentBreakpoint()
 
-  const { cachedConfig, isConfigLoading } = useCacheFormLayoutConfig(formId, formKey)
+  const { cachedConfig } = useCacheFormLayoutConfig(formId, formKey)
 
   useSetHiddenNodes(cachedConfig?.detailsConfig, formDataRef, formDataId, {
     submissionTemplateReportConfig: cachedConfig?.detailsConfig?.submissionTemplateReportConfig,
@@ -137,14 +138,18 @@ function FormDataDetailsComponentChild({
         }
       }
 
-      if (isNewFormDataPage(formDataIdTemp) || !isValidMongoDbId(formDataIdTemp))
+      if (isNewFormDataPage(formDataIdTemp) || !isValidMongoDbId(formDataIdTemp)) {
         formDataRef.setFieldValue([FormPreservedItemKeys.IsDetailsDataSet], true)
-      else {
+        setIsDataLoading(false)
+      } else {
         if (!formIdTemp) {
           console.error('Form ID is required to fetch form data')
+          setIsDataLoading(false)
           return
         }
 
+        setIsDataLoading(true)
+
         client
           // .get(`/api/formdata/${formIdTemp}/${formDataIdTemp}`)
           .post(`/api/report/${formIdTemp}/${formDataIdTemp}`, { joins: extendedJoins })
@@ -179,6 +184,7 @@ function FormDataDetailsComponentChild({
             } else setIsNotFound(true)
           })
           .catch(() => setIsNotFound(true))
+          .finally(() => setIsDataLoading(false))
       }
     },
     [formDataId, formDataRef, breadcrumbs],
@@ -212,7 +218,11 @@ function FormDataDetailsComponentChild({
   useEffect(() => {
     if (!cachedConfig) return
     // const BaskhuuAjiltnuudFormId = 22
-    // formDataRef.setFieldValue(FormPreservedItemKeys.IsUserForm, cachedConfig.id === BaskhuuAjiltnuudFormId)
+    // formDataRef.setFieldsValue({
+    //   [FormPreservedItemKeys.IsUserForm]: cachedConfig.id === BaskhuuAjiltnuudFormId,
+    //   [FormPreservedItemKeys.UserFormNotificationId]:
+    //     cachedConfig.detailsConfig.userFormNotificationConfig?.notificationId,
+    // })
 
     formDataRef.setFieldValue(FormPreservedItemKeys.IsUserForm, false)
   }, [cachedConfig])
@@ -244,9 +254,34 @@ function FormDataDetailsComponentChild({
     return deviceLayout
   }, [cachedConfig?.detailsConfig, currentBreakpoint])
 
-  if (isConfigLoading || !cachedConfig) return <FormDataListSkeleton_Details />
+  const shouldShowLayoutSkeleton = !cachedConfig?.detailsConfig || !layout.length
+  const skeletonTransitionRef = useRef<number>()
+  const [renderSkeleton, setRenderSkeleton] = useState(true)
+  const [firstLayoutRendered, setFirstLayoutRendered] = useState(false)
+
+  useEffect(() => {
+    if (shouldShowLayoutSkeleton) {
+      if (skeletonTransitionRef.current) cancelAnimationFrame(skeletonTransitionRef.current)
+      setRenderSkeleton(true)
+      return
+    }
+    skeletonTransitionRef.current = requestAnimationFrame(() => setRenderSkeleton(false))
+    return () => {
+      if (skeletonTransitionRef.current) cancelAnimationFrame(skeletonTransitionRef.current)
+    }
+  }, [shouldShowLayoutSkeleton])
+
+  useEffect(() => {
+    if (!renderSkeleton || firstLayoutRendered || shouldShowLayoutSkeleton) return
+    const timer = setTimeout(() => {
+      setRenderSkeleton(false)
+      setFirstLayoutRendered(true)
+    }, 250)
+    return () => clearTimeout(timer)
+  }, [renderSkeleton, firstLayoutRendered, shouldShowLayoutSkeleton])
 
   if (isNotFound) return <NotFound />
+  if (renderSkeleton || shouldShowLayoutSkeleton) return <FormDataListSkeleton_Details />
 
   return (
     <>
@@ -258,48 +293,50 @@ function FormDataDetailsComponentChild({
         duplicateCheckConfig={cachedConfig.detailsConfig.duplicateCheckConfig}
         onCustomFunctionCall={onCustomFunctionCall}
       />
-      <Form
-        layout="vertical"
-        name="dynamic_form_data_form"
-        form={formDataRef}
-        className={ELEMENTS_DEFAULT_CLASS.DataDetailsForm}
-        onValuesChange={(_changed, allValues) => {
-          handleDisabledSet(allValues, currentBreakpoint, cachedConfig?.detailsConfig, formDataId)
-          handleHiddenSet(allValues, currentBreakpoint, cachedConfig?.detailsConfig, formDataId)
-        }}
-      >
-        {layout.map((row, rowIdx) => (
-          <LayoutRendererRow
-            key={rowIdx}
-            rowData={row}
-            isTopLevel
-            formContext={{
-              detailPageFormId: formId,
-              formId,
-              formKey,
-              formDataId,
-              formRef: formDataRef,
-              companyKey,
-            }}
-            customComponents={customComponents}
-            elements={cachedConfig.detailsConfig.elements}
-            renderButton={(btnProps) => (
-              <DynamicFormButtonRender
-                displayStateProps={btnProps as IDynamicButton_DisplayStateProps}
-                formContext={{
-                  detailPageFormId: formId,
-                  formId,
-                  formKey,
-                  formDataId,
-                  formRef: formDataRef,
-                  companyKey,
-                }}
-                onCustomFunctionCall={onCustomFunctionCall}
-              />
-            )}
-          />
-        ))}
-      </Form>
+      <Spin spinning={isDataLoading}>
+        <Form
+          layout="vertical"
+          name="dynamic_form_data_form"
+          form={formDataRef}
+          className={ELEMENTS_DEFAULT_CLASS.DataDetailsForm}
+          onValuesChange={(_changed, allValues) => {
+            handleDisabledSet(allValues, currentBreakpoint, cachedConfig?.detailsConfig, formDataId)
+            handleHiddenSet(allValues, currentBreakpoint, cachedConfig?.detailsConfig, formDataId)
+          }}
+        >
+          {layout.map((row, rowIdx) => (
+            <LayoutRendererRow
+              key={rowIdx}
+              rowData={row}
+              isTopLevel
+              formContext={{
+                detailPageFormId: formId,
+                formId,
+                formKey,
+                formDataId,
+                formRef: formDataRef,
+                companyKey,
+              }}
+              customComponents={customComponents}
+              elements={cachedConfig.detailsConfig.elements}
+              renderButton={(btnProps) => (
+                <DynamicFormButtonRender
+                  displayStateProps={btnProps as IDynamicButton_DisplayStateProps}
+                  formContext={{
+                    detailPageFormId: formId,
+                    formId,
+                    formKey,
+                    formDataId,
+                    formRef: formDataRef,
+                    companyKey,
+                  }}
+                  onCustomFunctionCall={onCustomFunctionCall}
+                />
+              )}
+            />
+          ))}
+        </Form>
+      </Spin>
     </>
   )
 }

package/src/components/form/layout-renderer/1-row/index.tsx

@@ -1,15 +1,14 @@
 import { FormInstance } from 'antd'
 import { getGridContainerStyle, getColumnStyle } from '../../../../functions/forms'
 import LayoutRendererCol from '../2-col'
-import { memo, ReactElement, useLayoutEffect, useMemo, useState } from 'react'
+import { memo, ReactElement, useMemo } from 'react'
 import { LayoutRowConditionalHeaderRenderer } from './header-render'
 import { LayoutRowRepeatableRenderer } from './repeatable-render'
 import { IDndLayoutElement, IDndLayoutRow, IFormJoin } from '../../../../types'
 import { IDynamicButton_DisplayStateProps } from '../3-element/1-dynamic-button'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
 import { useHiddenIds } from '../../../common/custom-hooks/use-node-condition.hook/use-node-condition.hook'
-import FormDataListSkeleton_Details from '../../../common/loading-skeletons/details'
-import { ICustomComponents } from '../3-element'
+import { ICustomComponents } from '../3-element'
 
 export const LayoutRendererRow = memo(
   ({
@@ -22,12 +21,7 @@ export const LayoutRendererRow = memo(
     customComponents,
     renderButton,
   }: ILayoutRendererRow) => {
-    const hiddenIds = useHiddenIds()
-    const [hydrated, setHydrated] = useState(false)
-
-    useLayoutEffect(() => {
-      setTimeout(() => setHydrated(true), 500)
-    }, [])
+    const hiddenIds = useHiddenIds()
 
     const gridStyle = useMemo(() => {
       const baseStyle = { ...(rowData.style || {}), ...getGridContainerStyle(rowData.display) }
@@ -50,10 +44,8 @@ export const LayoutRendererRow = memo(
       return { ...baseStyle, gridTemplateColumns: template }
     }, [rowData, hiddenIds])
 
-    if (!hydrated && isTopLevel) return <FormDataListSkeleton_Details />
-
-    return (
-      <div
+    return (
+      <div
         style={{ display: hiddenIds.includes(rowData.id) ? 'none' : undefined }}
         id={rowData.id}
         className={ELEMENTS_DEFAULT_CLASS.LayoutRowContainer}

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

@@ -2,17 +2,22 @@ import { useCallback } from 'react'
 import { useFormPreservedItemValues } from '../../../../common/custom-hooks/use-preserved-form-items.hook'
 import { toMongoDbExtendedJSON } from '../../../../../functions/forms/extended-json-handlers'
 import client from '../../../../../api/client'
-import { isNewFormDataPage, replaceTemplateReportAndUpload } from '../../../../../functions/forms'
 import { useNotification, useTranslation } from '../../../../common/custom-hooks'
 import { useNavigate } from 'react-router-dom'
 import { IFormContext } from '../../1-row'
 import { IOnSuccessFunctions } from '.'
-import { IFormTemplateReport, ISystemRole, SystemRolePermissionEnum } from '../../../../../types'
+import { IFormNotification, IFormTemplateReport, ISystemRole, SystemRolePermissionEnum } from '../../../../../types'
 import { useBreadcrumb } from '../../../../common/custom-hooks/use-breadcrumb.hook'
 import { FORM_SUBMISSION_PDF_KEY } from '../../../../../constants'
+import {
+  buildNotificationRequests,
+  isNewFormDataPage,
+  replaceTemplateReportAndUpload,
+} from '../../../../../functions/forms'
 import {
   FormLoadingModalTypeEnum,
   LOCAL_STORAGE_KEYS_ENUM,
+  NotificationTypeEnum,
   TranslationTextTypeEnum,
   UserFormPlaceholders,
 } from '../../../../../enums'
@@ -38,8 +43,15 @@ export const useCreateDataWithPdfActions = ({
   const { t } = useTranslation(formId)
   const navigate = useNavigate()
   const { errorModal, warning } = useNotification()
-  const { baseServerUrl, submissionTemplateReportConfig, formTemplateReports, isPublic, isUserForm } =
-    useFormPreservedItemValues(formRef)
+  const {
+    baseServerUrl,
+    submissionTemplateReportConfig,
+    formTemplateReports,
+    isPublic,
+    isUserForm,
+    userFormNotificationId,
+    formNotifications,
+  } = useFormPreservedItemValues(formRef)
   const { breadcrumbs } = useBreadcrumb()
 
   const onCreateNewData = useCallback(
@@ -60,13 +72,61 @@ export const useCreateDataWithPdfActions = ({
               selectedRoles.includes(r.name) ? [...accR, ...r.permissions] : accR,
             [],
           )
+          const showUserNotificationError = (content: string) => {
+            setDataLoadingType(FormLoadingModalTypeEnum.ErrorOccured)
+            errorModal({
+              title: 'User notification error',
+              content,
+            })
+            onCreateError()
+          }
+
+          if (!formId) {
+            showUserNotificationError('Form ID is missing for user notification.')
+            return
+          }
+
+          const formNotificationsForCurrentForm = formNotifications?.[formId]
+          const userFormNotification = formNotificationsForCurrentForm?.notifications?.find(
+            (n: IFormNotification) => n.id === userFormNotificationId,
+          )
+
+          if (!userFormNotificationId || !formNotificationsForCurrentForm || !userFormNotification) {
+            showUserNotificationError('User notification is required. Please configure it before submitting.')
+            return
+          }
+
+          const notifConfigRes = await client.get(`/api/notificationconfig/${userFormNotificationId}/data`)
+          if (notifConfigRes.status !== 200 || typeof notifConfigRes.data.data !== 'string') {
+            showUserNotificationError('Failed to fetch user notification configuration.')
+            return
+          }
+
+          const domain = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.Domain)
+          const fileBaseUrl = baseServerUrl && domain ? `${baseServerUrl}/api/attachment/${domain}` : undefined
+
+          const notificationRequests = await buildNotificationRequests({
+            notificationId: userFormNotificationId,
+            notificationConfig: notifConfigRes.data.data,
+            formNotification: userFormNotification,
+            replacementData: { Data: submissionValues },
+            formId,
+            fileBaseUrl,
+          })
+
+          const emailNotification = notificationRequests.find((req) => req.type === NotificationTypeEnum.Email)?.data
+          if (!emailNotification) {
+            showUserNotificationError('Unable to build the user notification payload.')
+            return
+          }
+
           const userPayload = {
             email: values?.[UserFormPlaceholders.EMAIL_FIELD_KEY],
             phone: values?.[UserFormPlaceholders.PHONE_NUMBER_FIELD_KEY],
             enable2FA: values?.[UserFormPlaceholders.ENABLE_2FA] || false,
             password: values?.[UserFormPlaceholders.PASSWORD_FIELD_KEY],
             roles: [...new Set(selectedPermissions)],
-            notification: null,
+            notification: emailNotification,
           }
 
           try {
@@ -99,10 +159,30 @@ export const useCreateDataWithPdfActions = ({
 
         setDataLoadingType(FormLoadingModalTypeEnum.SavingChanges)
 
+        const templatesByLanguage = submissionTemplateReportConfig?.templatesByLanguage
+        const selectedLanguage = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.SelectedLanguage)
+        const defaultLanguage = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.DefaultLanguage)
+        const getTemplateForLanguage = (language?: string | null) =>
+          language && templatesByLanguage
+            ? templatesByLanguage[language as keyof typeof templatesByLanguage]
+            : undefined
+        const fallbackLanguageTemplate =
+          templatesByLanguage &&
+          Object.entries(templatesByLanguage)
+            .filter(([lang, blob]) => !!blob && lang !== selectedLanguage && lang !== defaultLanguage)
+            .map(([, blob]) => blob)
+            .shift()
+
+        const submissionTemplateBlobName =
+          getTemplateForLanguage(selectedLanguage) ||
+          getTemplateForLanguage(defaultLanguage) ||
+          submissionTemplateReportConfig?.template ||
+          fallbackLanguageTemplate
+
         const shouldGenerateSubmissionPdf =
           isNewFormDataPage(formDataId) &&
           submissionTemplateReportConfig?.enabled &&
-          submissionTemplateReportConfig.template &&
+          submissionTemplateBlobName &&
           formId &&
           (isPublic ? !!companyKey : true)
 
@@ -110,7 +190,7 @@ export const useCreateDataWithPdfActions = ({
           const templateReportsForForm = formTemplateReports?.[formId]
           const templateInfo = Array.isArray(templateReportsForForm?.templates)
             ? (templateReportsForForm?.templates.find(
-                (report: IFormTemplateReport) => report.fileBlobName === submissionTemplateReportConfig.template,
+                (report: IFormTemplateReport) => report.fileBlobName === submissionTemplateBlobName,
               ) as IFormTemplateReport | undefined)
             : undefined
 
@@ -180,6 +260,7 @@ export const useCreateDataWithPdfActions = ({
       submissionTemplateReportConfig,
       isPublic,
       isUserForm,
+      userFormNotificationId,
       baseServerUrl,
       companyKey,
       navigate,
@@ -190,6 +271,7 @@ export const useCreateDataWithPdfActions = ({
       onCreateFinal,
       t,
       warning,
+      formNotifications,
     ],
   )