form-craft-package 1.10.7 → 1.10.8-dev.1

package/package.json

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

package/src/components/common/custom-hooks/use-duplicate-on-blur.hook.ts

@@ -1,88 +1,131 @@
-import { FormInstance } from 'antd'
-import { useEffect, useMemo, useRef } from 'react'
-import { useBlurEventBus } from '../duplicate-entry-checker/blur-event-bus-provider'
-import { IDuplicateCheckConfigGroup } from '../../../types'
-import apiClient from '../../../api/client'
-import { FormPreservedItemKeys } from '../../../enums'
-
-interface IUseDuplicateOnBlur {
-  formRef: FormInstance
-  formKey?: string
-  formDataId?: string
-  groups?: IDuplicateCheckConfigGroup[]
-  debounceMs?: number
-}
-
-export function useDuplicateOnBlur(
-  { formRef, formKey, formDataId, groups, debounceMs = 0 }: IUseDuplicateOnBlur,
-  onResult: (isDuplicateFound: boolean) => void,
-) {
-  const { subscribeBlurEvent: subscribe } = useBlurEventBus()
-
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const abortRef = useRef<AbortController | null>(null)
-
-  const relevantFieldGroups = useMemo(() => {
-    if (!Array.isArray(groups)) return []
-
-    return groups.map((group) => group.fields)
-  }, [groups])
-
-  useEffect(() => {
-    if (!formKey) return
-
-    const unsub = subscribe((blurredField) => {
-      const fieldClone: string = Array.isArray(blurredField) ? blurredField.join('.') : (blurredField as string)
-
-      const fieldGroup = relevantFieldGroups.find((g) => g.includes(`Data.${fieldClone}`))
-
-      if (!fieldGroup) return
-
-      const formValues = formRef.getFieldsValue(true)
-
-      if (fieldGroup.some((f) => !formValues[f.replace('Data.', '')])) return
-
-      if (timerRef.current) clearTimeout(timerRef.current)
-
-      timerRef.current = setTimeout(async () => {
-        formRef.setFieldValue([FormPreservedItemKeys.DuplicateCheckPending], true)
-
-        // cancel previous request
-        if (abortRef.current) abortRef.current.abort()
-        abortRef.current = new AbortController()
-
-        const matchKeyValuePairs = {
-          DeletedDate: null,
-          ...fieldGroup.reduce((acc, f) => ({ ...acc, [f]: formValues[f.replace('Data.', '')] }), {}),
-        }
-        const reqData = { project: JSON.stringify({ _id: '$_id' }), match: JSON.stringify(matchKeyValuePairs) }
-
-        try {
-          const res = await apiClient.post(`/api/site/${formKey}/get`, reqData)
-          if (res.status === 200) {
-            const isRecordFound = res.data.data.filter(({ _id }: { _id: string }) => _id !== formDataId).length > 0
-
-            const matchFilterKeysOnly = Object.keys(matchKeyValuePairs).join('::')
-
-            // set the match filter with the result to display error upon submit button
-            formRef.setFieldsValue({
-              [FormPreservedItemKeys.DuplicateDataFound]: { [matchFilterKeysOnly]: isRecordFound },
-            })
-
-            onResult(isRecordFound)
-          }
-        } catch (e: any) {
-          if (e?.name === 'AbortError') return
-        }
-
-        formRef.setFieldValue([FormPreservedItemKeys.DuplicateCheckPending], false)
-      }, debounceMs)
-    })
-
-    return () => {
-      unsub()
-      if (timerRef.current) clearTimeout(timerRef.current)
-      if (abortRef.current) abortRef.current.abort()
-    }
-  }, [subscribe, relevantFieldGroups, formKey, formDataId, formRef, debounceMs])
-}
+import { FormInstance } from 'antd'
+import { useEffect, useMemo, useRef } from 'react'
+import { useBlurEventBus } from '../duplicate-entry-checker/blur-event-bus-provider'
+import { IDuplicateCheckConfigGroup } from '../../../types'
+import apiClient from '../../../api/client'
+import { FormPreservedItemKeys } from '../../../enums'
+
+interface IUseDuplicateOnBlur {
+  formRef: FormInstance
+  formKey?: string
+  formDataId?: string
+  groups?: IDuplicateCheckConfigGroup[]
+  debounceMs?: number
+  functionName?: string
+  onCustomFunctionCall?: CustomFunctionCall
+}
+
+export function useDuplicateOnBlur(
+  { formRef, formKey, formDataId, groups, debounceMs = 0, functionName, onCustomFunctionCall }: IUseDuplicateOnBlur,
+  onResult: (isDuplicateFound: boolean, data?: unknown) => void,
+) {
+  const { subscribeBlurEvent: subscribe } = useBlurEventBus()
+
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const abortRef = useRef<AbortController | null>(null)
+
+  const relevantFieldGroups = useMemo(() => {
+    if (!Array.isArray(groups)) return []
+
+    return groups.map((group) => group.fields)
+  }, [groups])
+
+  useEffect(() => {
+    const shouldUseCustomFunction = Boolean(functionName && onCustomFunctionCall)
+    if (!formKey && !shouldUseCustomFunction) return
+
+    const unsub = subscribe((blurredField) => {
+      const fieldClone: string = Array.isArray(blurredField) ? blurredField.join('.') : (blurredField as string)
+
+      const fieldGroup = relevantFieldGroups.find((g) => g.includes(`Data.${fieldClone}`))
+
+      if (!fieldGroup) return
+
+      const formValues = formRef.getFieldsValue(true)
+
+      if (fieldGroup.some((f) => !formValues[f.replace('Data.', '')])) return
+
+      if (timerRef.current) clearTimeout(timerRef.current)
+
+      timerRef.current = setTimeout(async () => {
+        formRef.setFieldValue([FormPreservedItemKeys.DuplicateCheckPending], true)
+
+        // cancel previous request
+        if (abortRef.current) abortRef.current.abort()
+        abortRef.current = shouldUseCustomFunction ? null : new AbortController()
+
+        const matchKeyValuePairs = {
+          DeletedDate: null,
+          ...fieldGroup.reduce((acc, f) => ({ ...acc, [f]: formValues[f.replace('Data.', '')] }), {}),
+        }
+
+        try {
+          const duplicateRecords = shouldUseCustomFunction
+            ? normalizeDuplicateRecords(
+                await onCustomFunctionCall?.({
+                  fnName: functionName as string,
+                  formData: { ...formValues },
+                }),
+              )
+            : normalizeDuplicateRecords(
+                (
+                  await apiClient.post(
+                    `/api/site/${formKey}/get`,
+                    {
+                      project: JSON.stringify({ _id: '$_id' }),
+                      match: JSON.stringify(matchKeyValuePairs),
+                    },
+                    abortRef.current ? { signal: abortRef.current.signal } : undefined,
+                  )
+                ).data,
+              )
+
+          const filteredRecords = filterDuplicateRecords(duplicateRecords, formDataId)
+          const isRecordFound = filteredRecords.length > 0
+
+          const matchFilterKeysOnly = Object.keys(matchKeyValuePairs).join('::')
+
+          formRef.setFieldsValue({
+            [FormPreservedItemKeys.DuplicateDataFound]: { [matchFilterKeysOnly]: isRecordFound },
+          })
+
+          onResult(isRecordFound, filteredRecords.length ? filteredRecords[0] : undefined)
+        } catch (e: any) {
+          if (e?.name === 'AbortError') return
+        }
+
+        formRef.setFieldValue([FormPreservedItemKeys.DuplicateCheckPending], false)
+      }, debounceMs)
+    })
+
+    return () => {
+      unsub()
+      if (timerRef.current) clearTimeout(timerRef.current)
+      if (abortRef.current) abortRef.current.abort()
+    }
+  }, [subscribe, relevantFieldGroups, formKey, formDataId, formRef, debounceMs, functionName, onCustomFunctionCall])
+}
+
+const normalizeDuplicateRecords = (payload: any): any[] => {
+  if (!payload) return []
+  const data = payload?.data?.data ?? payload?.data ?? payload
+  if (!data) return []
+  return Array.isArray(data) ? data : [data]
+}
+
+const filterDuplicateRecords = (records: any[], formDataId?: string) => {
+  if (!Array.isArray(records)) return []
+  return records.filter((record) => {
+    if (!record) return false
+    if (!formDataId) return true
+    if (record._id && record._id === formDataId) return false
+    if (record.id && String(record.id) === formDataId) return false
+    return true
+  })
+}
+
+type CustomFunctionCall = (params: {
+  fnName: string
+  messages?: { success?: string; error?: string }
+  formData?: { [key: string]: any }
+}) => Promise<any> | any

package/src/components/common/duplicate-entry-checker/duplicate-warning.modal.tsx

@@ -7,7 +7,12 @@ import { FaExclamationTriangle } from 'react-icons/fa'
 import { useNavigate } from 'react-router-dom'
 import { DUPLICATE_CHECK_TRANSLATION_KEY } from '../../../constants'
 
-export default function DuplicateWarningModal({ formRef, formId, closeModal }: IDuplicateWarningModal) {
+export default function DuplicateWarningModal({
+  formRef,
+  formId,
+  duplicateRecord,
+  closeModal,
+}: IDuplicateWarningModal) {
   const navigate = useNavigate()
   const { t } = useTranslation(formId)
 
@@ -92,9 +97,11 @@ export default function DuplicateWarningModal({ formRef, formId, closeModal }: I
         <div className="text-16 text-center">
           {primaryMessage || 'We’ve found an existing record with the same details.'}
         </div>
-        <div className="text-gray-500 text-[15px] text-center">
-          {secondaryMessage || 'Duplicate entries are not allowed in the system.'}
-        </div>
+        {secondaryMessage && (
+          <div className="text-gray-500 text-[15px] text-center">
+            {secondaryMessage || 'Duplicate entries are not allowed in the system.'}
+          </div>
+        )}
       </div>
       {fieldLabels.length > 0 && (
         <>
@@ -102,6 +109,7 @@ export default function DuplicateWarningModal({ formRef, formId, closeModal }: I
           <div className="bg-background w-full rounded-md p-2 flex flex-col gap-1">
             <span className="font-bold text-primary">Duplicate data found on the following field(s):</span>
             <div className="flex gap-2">{fieldLabels.join(', ')}</div>
+            {typeof duplicateRecord === 'object' && <pre>{JSON.stringify(duplicateRecord, null, 2)}</pre>}
           </div>
         </>
       )}
@@ -112,7 +120,6 @@ export default function DuplicateWarningModal({ formRef, formId, closeModal }: I
 interface IDuplicateWarningModal {
   formRef?: FormInstance
   formId?: number
+  duplicateRecord?: unknown
   closeModal: () => void
 }
-
-

package/src/components/common/duplicate-entry-checker/index.tsx

@@ -1,34 +1,62 @@
-import { FormInstance } from 'antd'
-import { useLazyModalOpener } from '../custom-hooks'
-import { IDuplicateCheckConfig } from '../../../types'
-import { useDuplicateOnBlur } from '../custom-hooks/use-duplicate-on-blur.hook'
-import { lazy } from 'react'
-
-const DuplicateWarningModal = lazy(() => import('./duplicate-warning.modal'))
-
-export default function DuplicateEntryChecker({
-  formRef,
-  formId,
-  formKey,
-  formDataId,
-  duplicateCheckConfig,
-}: IDuplicateEntryChecker) {
-  const { isModalOpen, openModal, closeModal } = useLazyModalOpener()
-
-  useDuplicateOnBlur({ formRef, formKey, formDataId, groups: duplicateCheckConfig?.groups }, (isDuplicateFound) => {
-    if (isDuplicateFound) openModal()
-    else closeModal()
-  })
-
-  if (!isModalOpen) return
-
-  return <DuplicateWarningModal formRef={formRef} formId={formId} closeModal={closeModal} />
-}
-
-interface IDuplicateEntryChecker {
-  formRef: FormInstance
-  formId?: number
-  formKey?: string
-  formDataId: string
-  duplicateCheckConfig?: IDuplicateCheckConfig
-}
+import { FormInstance } from 'antd'
+import { useLazyModalOpener } from '../custom-hooks'
+import { IDuplicateCheckConfig } from '../../../types'
+import { useDuplicateOnBlur } from '../custom-hooks/use-duplicate-on-blur.hook'
+import { lazy, useRef } from 'react'
+
+const DuplicateWarningModal = lazy(() => import('./duplicate-warning.modal'))
+
+export default function DuplicateEntryChecker({
+  formRef,
+  formId,
+  formKey,
+  formDataId,
+  duplicateCheckConfig,
+  onCustomFunctionCall,
+}: IDuplicateEntryChecker) {
+  const { isModalOpen, openModal, closeModal } = useLazyModalOpener()
+  const duplicateDataRef = useRef<unknown>()
+
+  useDuplicateOnBlur(
+    {
+      formRef,
+      formKey,
+      formDataId,
+      groups: duplicateCheckConfig?.groups,
+      functionName: duplicateCheckConfig?.functionName,
+      onCustomFunctionCall,
+    },
+    (isDuplicateFound, data) => {
+      if (isDuplicateFound) {
+        duplicateDataRef.current = data
+        openModal()
+      } else closeModal()
+    },
+  )
+
+  if (!isModalOpen) return
+
+  return (
+    <DuplicateWarningModal
+      formRef={formRef}
+      formId={formId}
+      closeModal={closeModal}
+      duplicateRecord={duplicateDataRef.current}
+    />
+  )
+}
+
+interface IDuplicateEntryChecker {
+  formRef: FormInstance
+  formId?: number
+  formKey?: string
+  formDataId: string
+  duplicateCheckConfig?: IDuplicateCheckConfig
+  onCustomFunctionCall?: CustomFunctionCall
+}
+
+type CustomFunctionCall = (params: {
+  fnName: string
+  messages?: { success?: string; error?: string }
+  formData?: { [key: string]: any }
+}) => Promise<any> | any

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

@@ -45,18 +45,18 @@ export default function FormDataDetailsComponent(props: IFormDataDetailsComponen
   )
 }
 
-function FormDataDetailsComponentChild({
-  isPublic,
-  formId,
-  formKey,
-  formDataId,
-  formName,
-  baseServerUrl,
-  initialValues,
-  companyKey,
-  customComponents,
-  onCustomFunctionCall,
-}: IFormDataDetailsComponent) {
+function FormDataDetailsComponentChild({
+  isPublic,
+  formId,
+  formKey,
+  formDataId,
+  formName,
+  baseServerUrl,
+  initialValues,
+  companyKey,
+  customComponents,
+  onCustomFunctionCall,
+}: IFormDataDetailsComponent) {
   const { pushCrumb, breadcrumbs } = useBreadcrumb()
 
   const location = useLocation()
@@ -242,19 +242,20 @@ function FormDataDetailsComponentChild({
     return deviceLayout
   }, [cachedConfig?.detailsConfig, currentBreakpoint])
 
-  if (isConfigLoading || !cachedConfig) return <FormDataListSkeleton_Details />
+  if (isConfigLoading || !cachedConfig) return <FormDataListSkeleton_Details />
 
   if (isNotFound) return <NotFound />
 
   return (
     <>
-      <DuplicateEntryChecker
-        formRef={formDataRef}
-        formId={formId}
-        formKey={formKey}
-        formDataId={formDataId}
-        duplicateCheckConfig={cachedConfig.detailsConfig.duplicateCheckConfig}
-      />
+      <DuplicateEntryChecker
+        formRef={formDataRef}
+        formId={formId}
+        formKey={formKey}
+        formDataId={formDataId}
+        duplicateCheckConfig={cachedConfig.detailsConfig.duplicateCheckConfig}
+        onCustomFunctionCall={onCustomFunctionCall}
+      />
       <Form
         layout="vertical"
         name="dynamic_form_data_form"
@@ -301,15 +302,15 @@ function FormDataDetailsComponentChild({
   )
 }
 
-type IFormDataDetailsComponent = {
-  baseServerUrl?: string
-  companyKey?: string
-  formDataId: string
-  formName?: string
-  initialValues?: Record<string, any>
-} & (IDataDetailsPublicProps | IDataDetailsPrivateProps) &
-  ICustomFunctionCall &
-  ICustomComponents
+type IFormDataDetailsComponent = {
+  baseServerUrl?: string
+  companyKey?: string
+  formDataId: string
+  formName?: string
+  initialValues?: Record<string, any>
+} & (IDataDetailsPublicProps | IDataDetailsPrivateProps) &
+  ICustomFunctionCall &
+  ICustomComponents
 
 interface IDataDetailsPublicProps {
   isPublic: true

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

@@ -513,13 +513,13 @@ export interface IDynamicButton_DisplayStateProps {
   btnProps: IButtonElementProps
 }
 
-export interface ICustomFunctionCall {
-  onCustomFunctionCall?: (params: {
-    fnName: string
-    messages?: { success?: string; error?: string }
-    formData?: { [key: string]: any }
-  }) => void
-}
+export interface ICustomFunctionCall {
+  onCustomFunctionCall?: (params: {
+    fnName: string
+    messages?: { success?: string; error?: string }
+    formData?: { [key: string]: any }
+  }) => Promise<any> | any
+}
 export interface IOnSuccessFunctions {
   onSuccess: (formDataId?: string) => void
   onError: () => void

package/src/types/forms/index.ts

@@ -45,10 +45,11 @@ export interface IFormSchema {
   }
 }
 
-export interface IDuplicateCheckConfig {
-  isEnabled?: boolean
-  groups?: IDuplicateCheckConfigGroup[]
-}
+export interface IDuplicateCheckConfig {
+  isEnabled?: boolean
+  functionName?: string
+  groups?: IDuplicateCheckConfigGroup[]
+}
 
 export interface ISubmissionTemplateReportConfig {
   enabled?: boolean