form-craft-package 1.10.8-dev.1 → 1.10.9-dev.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.10.8-dev.1",
+  "version": "1.10.9-dev.0",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -13,7 +13,6 @@
   "dependencies": {
     "@tanstack/query-sync-storage-persister": "^5.77.2",
     "@tanstack/react-query-persist-client": "^5.77.2",
-    "ajv": "^8.17.1",
     "axios": "^1.9.0",
     "crypto-js": "^4.2.0",
     "js-cookie": "^3.0.5",

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

@@ -1,7 +1,7 @@
 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 { DuplicateCheckOrder, IDuplicateCheckConfigGroup } from '../../../types'
 import apiClient from '../../../api/client'
 import { FormPreservedItemKeys } from '../../../enums'
 
@@ -12,11 +12,23 @@ interface IUseDuplicateOnBlur {
   groups?: IDuplicateCheckConfigGroup[]
   debounceMs?: number
   functionName?: string
+  isEnabled?: boolean
+  checkOrder?: DuplicateCheckOrder[]
   onCustomFunctionCall?: CustomFunctionCall
 }
 
 export function useDuplicateOnBlur(
-  { formRef, formKey, formDataId, groups, debounceMs = 0, functionName, onCustomFunctionCall }: IUseDuplicateOnBlur,
+  {
+    formRef,
+    formKey,
+    formDataId,
+    groups,
+    debounceMs = 0,
+    functionName,
+    isEnabled,
+    checkOrder,
+    onCustomFunctionCall,
+  }: IUseDuplicateOnBlur,
   onResult: (isDuplicateFound: boolean, data?: unknown) => void,
 ) {
   const { subscribeBlurEvent: subscribe } = useBlurEventBus()
@@ -27,12 +39,31 @@ export function useDuplicateOnBlur(
   const relevantFieldGroups = useMemo(() => {
     if (!Array.isArray(groups)) return []
 
-    return groups.map((group) => group.fields)
+    return groups
+      .map((group) => (Array.isArray(group.fields) ? group.fields.filter(Boolean) : []))
+      .filter((fields) => fields.length)
   }, [groups])
 
   useEffect(() => {
-    const shouldUseCustomFunction = Boolean(functionName && onCustomFunctionCall)
-    if (!formKey && !shouldUseCustomFunction) return
+    const canUseDatabase = Boolean(formKey)
+    const canUseFunction = Boolean(functionName && onCustomFunctionCall)
+    const resolvedOrder = (
+      Array.isArray(checkOrder)
+        ? checkOrder.filter((step) => {
+            if (step === 'database') return canUseDatabase
+            if (step === 'function') return canUseFunction
+            return false
+          })
+        : []
+    ) as DuplicateCheckOrder[]
+
+    if (!resolvedOrder.length) {
+      if (canUseDatabase && canUseFunction) resolvedOrder.push('database', 'function')
+      else if (canUseDatabase) resolvedOrder.push('database')
+      else if (canUseFunction) resolvedOrder.push('function')
+    }
+
+    if (!isEnabled || !relevantFieldGroups.length || !resolvedOrder.length) return
 
     const unsub = subscribe((blurredField) => {
       const fieldClone: string = Array.isArray(blurredField) ? blurredField.join('.') : (blurredField as string)
@@ -51,45 +82,56 @@ export function useDuplicateOnBlur(
         formRef.setFieldValue([FormPreservedItemKeys.DuplicateCheckPending], true)
 
         // cancel previous request
-        if (abortRef.current) abortRef.current.abort()
-        abortRef.current = shouldUseCustomFunction ? null : new AbortController()
+        if (abortRef.current) {
+          abortRef.current.abort()
+          abortRef.current = null
+        }
 
         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('::')
-
+        const matchFilterKeysOnly = Object.keys(matchKeyValuePairs).join('::')
+        const updateResult = (found: boolean, record?: unknown) => {
           formRef.setFieldsValue({
-            [FormPreservedItemKeys.DuplicateDataFound]: { [matchFilterKeysOnly]: isRecordFound },
+            [FormPreservedItemKeys.DuplicateDataFound]: { [matchFilterKeysOnly]: found },
           })
+          onResult(found, record)
+        }
 
-          onResult(isRecordFound, filteredRecords.length ? filteredRecords[0] : undefined)
+        try {
+          for (const step of resolvedOrder) {
+            if (step === 'function') {
+              await onCustomFunctionCall?.({
+                fnName: functionName as string,
+                formData: { ...formValues },
+                formRef,
+              })
+              continue
+            }
+
+            abortRef.current = new AbortController()
+            const response = await apiClient.post(
+              `/api/site/${formKey}/get`,
+              {
+                project: JSON.stringify({ _id: '$_id' }),
+                match: JSON.stringify(matchKeyValuePairs),
+              },
+              { signal: abortRef.current.signal },
+            )
+            abortRef.current = null
+            const duplicateRecords = normalizeDuplicateRecords(response.data)
+
+            const filteredRecords = filterDuplicateRecords(duplicateRecords, formDataId)
+            if (filteredRecords.length) {
+              const payload = filteredRecords[0]
+              updateResult(true, payload)
+              formRef.setFieldValue([FormPreservedItemKeys.DuplicateCheckPending], false)
+              return
+            }
+          }
+
+          updateResult(false)
         } catch (e: any) {
           if (e?.name === 'AbortError') return
         }
@@ -103,7 +145,18 @@ export function useDuplicateOnBlur(
       if (timerRef.current) clearTimeout(timerRef.current)
       if (abortRef.current) abortRef.current.abort()
     }
-  }, [subscribe, relevantFieldGroups, formKey, formDataId, formRef, debounceMs, functionName, onCustomFunctionCall])
+  }, [
+    subscribe,
+    relevantFieldGroups,
+    formKey,
+    formDataId,
+    formRef,
+    debounceMs,
+    functionName,
+    onCustomFunctionCall,
+    isEnabled,
+    checkOrder,
+  ])
 }
 
 const normalizeDuplicateRecords = (payload: any): any[] => {
@@ -128,4 +181,5 @@ type CustomFunctionCall = (params: {
   fnName: string
   messages?: { success?: string; error?: string }
   formData?: { [key: string]: any }
+  formRef?: FormInstance
 }) => Promise<any> | any

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

@@ -1,125 +1,100 @@
-import { Divider, FormInstance, Modal } from 'antd'
-import { useMemo } from 'react'
-import { useTranslation } from '../custom-hooks'
-import { Button_FillerPortal } from '../button'
-import { FormPreservedItemKeys, TranslationTextSubTypeEnum, TranslationTextTypeEnum } from '../../../enums'
-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,
-  duplicateRecord,
-  closeModal,
-}: IDuplicateWarningModal) {
-  const navigate = useNavigate()
-  const { t } = useTranslation(formId)
-
-  const [title, primaryMessage, secondaryMessage, okText, cancelText] = useMemo(
-    () =>
-      t([
-        {
-          key: DUPLICATE_CHECK_TRANSLATION_KEY,
-          type: TranslationTextTypeEnum.Label,
-          subType: TranslationTextSubTypeEnum.ConfirmationTitle,
-        },
-        {
-          key: DUPLICATE_CHECK_TRANSLATION_KEY,
-          type: TranslationTextTypeEnum.Label,
-          subType: TranslationTextSubTypeEnum.ConfirmationMsg,
-        },
-        {
-          key: DUPLICATE_CHECK_TRANSLATION_KEY,
-          type: TranslationTextTypeEnum.Description,
-        },
-        {
-          key: DUPLICATE_CHECK_TRANSLATION_KEY,
-          type: TranslationTextTypeEnum.Label,
-          subType: TranslationTextSubTypeEnum.ConfirmationOk,
-        },
-        {
-          key: DUPLICATE_CHECK_TRANSLATION_KEY,
-          type: TranslationTextTypeEnum.Label,
-          subType: TranslationTextSubTypeEnum.ConfirmationCancel,
-        },
-      ]),
-    [t],
-  )
-
-  const fieldLabels: string[] = useMemo(() => {
-    const duplicateDataKeys = formRef?.getFieldValue(FormPreservedItemKeys.DuplicateDataFound)
-    if (!duplicateDataKeys) return []
-
-    const matchFilterKeys = Object.entries(duplicateDataKeys).reduce((acc: string[], [matchKeysString, result]) => {
-      if (acc.length || !result) return acc
-
-      return matchKeysString.replaceAll('Data.', '').split('::')
-    }, [])
-
-    return t(
-      matchFilterKeys
-        .filter((key) => key !== 'DeletedDate')
-        .map((key) => ({ key, type: TranslationTextTypeEnum.Label })),
-    ) as string[]
-  }, [formRef, t])
-
-  return (
-    <Modal
-      open
-      title={
-        <div className="flex items-center gap-2 text-warning font-normal">
-          <FaExclamationTriangle className="text-warning" />
-          {title || 'Duplicate Entry Found'}
-        </div>
-      }
-      width={600}
-      maskClosable={false}
-      closable={false}
-      footer={
-        <div className="grid grid-cols-[max-content_max-content] gap-2 justify-between">
-          <Button_FillerPortal
-            danger
-            outline
-            onClick={() => {
-              navigate(-1)
-            }}
-          >
-            {cancelText || 'Cancel and Discard Entry'}
-          </Button_FillerPortal>
-          <Button_FillerPortal primary outline onClick={closeModal}>
-            {okText || 'Continue Editing Entry'}
-          </Button_FillerPortal>
-        </div>
-      }
-    >
-      <div className="flex flex-col items-center gap-2">
-        <div className="text-16 text-center">
-          {primaryMessage || 'We’ve found an existing record with the same details.'}
-        </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 && (
-        <>
-          <Divider />
-          <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>
-        </>
-      )}
-    </Modal>
-  )
-}
-
-interface IDuplicateWarningModal {
-  formRef?: FormInstance
-  formId?: number
-  duplicateRecord?: unknown
-  closeModal: () => void
-}
+import { Divider, FormInstance, Modal } from 'antd'
+import { useMemo } from 'react'
+import { useTranslation } from '../custom-hooks'
+import { Button_FillerPortal } from '../button'
+import { FormPreservedItemKeys, TranslationTextSubTypeEnum, TranslationTextTypeEnum } from '../../../enums'
+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,
+  duplicateRecord,
+  closeModal,
+}: IDuplicateWarningModal) {
+  const navigate = useNavigate()
+  const { t } = useTranslation(formId)
+
+  const [title, primaryMessage, secondaryMessage, okText, cancelText] = useMemo(
+    () =>
+      t([
+        {
+          key: DUPLICATE_CHECK_TRANSLATION_KEY,
+          type: TranslationTextTypeEnum.Label,
+          subType: TranslationTextSubTypeEnum.ConfirmationTitle,
+        },
+        {
+          key: DUPLICATE_CHECK_TRANSLATION_KEY,
+          type: TranslationTextTypeEnum.Label,
+          subType: TranslationTextSubTypeEnum.ConfirmationMsg,
+        },
+        {
+          key: DUPLICATE_CHECK_TRANSLATION_KEY,
+          type: TranslationTextTypeEnum.Description,
+        },
+        {
+          key: DUPLICATE_CHECK_TRANSLATION_KEY,
+          type: TranslationTextTypeEnum.Label,
+          subType: TranslationTextSubTypeEnum.ConfirmationOk,
+        },
+        {
+          key: DUPLICATE_CHECK_TRANSLATION_KEY,
+          type: TranslationTextTypeEnum.Label,
+          subType: TranslationTextSubTypeEnum.ConfirmationCancel,
+        },
+      ]),
+    [t],
+  )
+
+  return (
+    <Modal
+      open
+      title={
+        <div className="flex items-center gap-2 text-warning font-normal">
+          <FaExclamationTriangle className="text-warning" />
+          {title || 'Duplicate Entry Found'}
+        </div>
+      }
+      width={600}
+      maskClosable={false}
+      closable={false}
+      footer={
+        <div className="grid grid-cols-[max-content_max-content] gap-2 justify-between">
+          <Button_FillerPortal
+            danger
+            outline
+            onClick={() => {
+              navigate(-1)
+            }}
+          >
+            {cancelText || 'Cancel and Discard Entry'}
+          </Button_FillerPortal>
+          <Button_FillerPortal primary outline onClick={closeModal}>
+            {okText || 'Continue Editing Entry'}
+          </Button_FillerPortal>
+        </div>
+      }
+    >
+      <div className="flex flex-col items-center gap-2">
+        <div className="text-16 text-center">
+          {primaryMessage || "We've found an existing record with the same details."}
+        </div>
+        {secondaryMessage && (
+          <div className="text-gray-500 text-[15px] text-center">
+            {secondaryMessage || 'Duplicate entries are not allowed in the system.'}
+          </div>
+        )}
+      </div>
+      <Divider />
+      <div className="bg-background w-full rounded-md p-2 text-center">Please review and update the form data.</div>
+    </Modal>
+  )
+}
+
+interface IDuplicateWarningModal {
+  formRef?: FormInstance
+  formId?: number
+  duplicateRecord?: unknown
+  closeModal: () => void
+}

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

@@ -2,7 +2,7 @@ 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'
+import { lazy } from 'react'
 
 const DuplicateWarningModal = lazy(() => import('./duplicate-warning.modal'))
 
@@ -15,7 +15,6 @@ export default function DuplicateEntryChecker({
   onCustomFunctionCall,
 }: IDuplicateEntryChecker) {
   const { isModalOpen, openModal, closeModal } = useLazyModalOpener()
-  const duplicateDataRef = useRef<unknown>()
 
   useDuplicateOnBlur(
     {
@@ -24,26 +23,19 @@ export default function DuplicateEntryChecker({
       formDataId,
       groups: duplicateCheckConfig?.groups,
       functionName: duplicateCheckConfig?.functionName,
+      isEnabled: duplicateCheckConfig?.isEnabled,
+      checkOrder: duplicateCheckConfig?.checkOrder,
       onCustomFunctionCall,
     },
-    (isDuplicateFound, data) => {
-      if (isDuplicateFound) {
-        duplicateDataRef.current = data
-        openModal()
-      } else closeModal()
+    (isDuplicateFound) => {
+      if (isDuplicateFound) openModal()
+      else closeModal()
     },
   )
 
-  if (!isModalOpen) return
+  if (!isModalOpen) return null
 
-  return (
-    <DuplicateWarningModal
-      formRef={formRef}
-      formId={formId}
-      closeModal={closeModal}
-      duplicateRecord={duplicateDataRef.current}
-    />
-  )
+  return <DuplicateWarningModal formRef={formRef} formId={formId} closeModal={closeModal} />
 }
 
 interface IDuplicateEntryChecker {

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()
@@ -211,6 +211,8 @@ function FormDataDetailsComponentChild({
 
   useEffect(() => {
     if (!cachedConfig) return
+    // const BaskhuuAjiltnuudFormId = 22
+    // formDataRef.setFieldValue(FormPreservedItemKeys.IsUserForm, cachedConfig.id === BaskhuuAjiltnuudFormId)
 
     formDataRef.setFieldValue(FormPreservedItemKeys.IsUserForm, false)
   }, [cachedConfig])
@@ -242,20 +244,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}
-        onCustomFunctionCall={onCustomFunctionCall}
-      />
+      <DuplicateEntryChecker
+        formRef={formDataRef}
+        formId={formId}
+        formKey={formKey}
+        formDataId={formDataId}
+        duplicateCheckConfig={cachedConfig.detailsConfig.duplicateCheckConfig}
+        onCustomFunctionCall={onCustomFunctionCall}
+      />
       <Form
         layout="vertical"
         name="dynamic_form_data_form"
@@ -302,15 +304,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

@@ -1,4 +1,5 @@
-import { useFindDynamiForm, useLazyModalOpener, useNotification } from '../../../../common/custom-hooks'
+import type { FormInstance } from 'antd'
+import { useFindDynamiForm, useLazyModalOpener, useNotification } from '../../../../common/custom-hooks'
 import { lazy, memo, useCallback, useMemo, useRef, useState } from 'react'
 import { useFormPreservedItemValues } from '../../../../common/custom-hooks/use-preserved-form-items.hook'
 import { useDuplicateDataAction } from './use-duplicate-data.hook'
@@ -518,6 +519,7 @@ export interface ICustomFunctionCall {
     fnName: string
     messages?: { success?: string; error?: string }
     formData?: { [key: string]: any }
+    formRef?: FormInstance
   }) => Promise<any> | any
 }
 export interface IOnSuccessFunctions {

package/src/components/form/layout-renderer/3-element/1-dynamic-button/use-custom-function-call.hook.ts

@@ -31,6 +31,7 @@ export const useCustomFunctionCallAction = ({
           formId,
           formDataId: formDataId === NEW_FORM_DATA_IDENTIFIER ? newFormDataId : formDataId,
         },
+        formRef,
       })
       onFinal?.()
     },

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

@@ -22,7 +22,7 @@ export const useSaveExistingDataAction = ({
   setDataLoadingType: (type: FormLoadingModalTypeEnum) => void
 } & IOnSuccessFunctions &
   IFormContext) => {
-  const { warning } = useNotification()
+  const { warning, destroy } = useNotification()
   const { t } = useTranslation(formId)
 
   const onSaveExistingData = useCallback(() => {
@@ -51,6 +51,7 @@ export const useSaveExistingDataAction = ({
               ) as string[])
             : []
 
+          destroy()
           warning({
             message: 'Please fill out all the required fields!',
             description: labels.length > 5 ? `${labels.length} required fields are missing.` : labels.join(', '),

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

@@ -237,12 +237,10 @@ export const useSendNotificationAction = ({
                 }
 
                 if (Array.isArray(typeReqData.attachments)) {
-                  console.log('typeReqData.attachments', typeReqData.attachments)
 
                   const blobsNotFound = await extractNotFoundBlobNames(
                     typeReqData.attachments.map((att: IEmail_Attachment) => att.blobName),
                   )
-                  console.log('blobsNotFound', blobsNotFound)
                   typeReqData.attachments = [
                     ...typeReqData.attachments.filter(
                       (att: IEmail_Attachment) => !blobsNotFound.includes(att.blobName),