form-craft-package 1.10.2 → 1.10.3-dev.0

package/.env.production

@@ -1,5 +1,5 @@
 # .env
-VITE_API_BASE_URL=https://formcraftmaster-backend-ecgtewb6cag8faeq.centralus-01.azurewebsites.net/
+VITE_API_BASE_URL=https://formcraftmaster-backend-ecgtewb6cag8faeq.centralus-01.azurewebsites.net
 VITE_LOG_LEVEL=error
 VITE_COOKIE_DOMAIN=localhost
 VITE_ENV=production

package/package.json

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

package/src/components/common/custom-hooks/use-node-condition.hook/visibility-utils.ts

@@ -1,139 +1,19 @@
-import { NEW_FORM_DATA_IDENTIFIER, REGEX_PATTERNS } from '../../../../constants'
-import { IFormContext } from '../../../form/layout-renderer/1-row'
-import { isNewFormDataPage } from '../../../../functions'
-import {
-  ConditionDependencyTypeEnum,
-  DeviceBreakpointEnum,
-  FieldValidationEnum,
-  FormElementConditionalKeyEnum,
-  FormStateEnum,
-} from '../../../../enums'
-import {
-  IConditionalValidation,
-  IConditionalValidation_AuthUser,
-  IConditionalValidation_Field,
-  IConditionalValidation_FormState,
-  IFormLayoutElementConditions,
-} from '../../../../types'
-
-const getValidationConfigs = (validationConfigs: IConditionalValidation[]) =>
-  validationConfigs.reduce<{
-    fieldValidations: IConditionalValidation_Field[]
-    authUserValidations: IConditionalValidation_AuthUser[]
-    hasDataIdValidation: IConditionalValidation_FormState | undefined
-    alwaysDisabled: boolean
-    hideScreens: DeviceBreakpointEnum[]
-  }>(
-    (curr, v) => {
-      if (v.dependentType === ConditionDependencyTypeEnum.Field)
-        return { ...curr, fieldValidations: [...curr.fieldValidations, v] }
-      else if (v.dependentType === ConditionDependencyTypeEnum.AuthUser)
-        return { ...curr, authUserValidations: [...curr.authUserValidations, v] }
-      else if (v.dependentType === ConditionDependencyTypeEnum.FormState) return { ...curr, hasDataIdValidation: v }
-      else if (v.dependentType === ConditionDependencyTypeEnum.AlwaysFalse) return { ...curr, alwaysDisabled: true }
-      else if (v.dependentType === ConditionDependencyTypeEnum.Screen) return { ...curr, hideScreens: v.hideScreens }
-
-      return curr
-    },
-    {
-      fieldValidations: [],
-      authUserValidations: [],
-      hasDataIdValidation: undefined,
-      alwaysDisabled: false,
-      hideScreens: [],
-    },
-  )
-
-/** If any of the validations fails, the function returns false */
-const validateConditions = (validations: IConditionalValidation_Field[], data: Record<string, any>): boolean => {
-  return validations.every((validation) => {
-    const { field, rule, value: configuredValue } = validation
-    const formValue = data[field]
-
-    switch (rule) {
-      case FieldValidationEnum.Required:
-        if (!!formValue) return true
-        return false
-
-      case FieldValidationEnum.DataLength:
-        return (
-          typeof formValue === 'string' && typeof configuredValue === 'number' && formValue.length === configuredValue
-        )
-
-      case FieldValidationEnum.MaxDataLength:
-        return (
-          typeof formValue === 'string' && typeof configuredValue === 'number' && formValue.length <= configuredValue
-        )
-
-      case FieldValidationEnum.MinDataLength:
-        return (
-          typeof formValue === 'string' && typeof configuredValue === 'number' && formValue.length >= configuredValue
-        )
-
-      case FieldValidationEnum.MinValue:
-        return typeof formValue === 'number' && typeof configuredValue === 'number' && formValue >= configuredValue
-
-      case FieldValidationEnum.MaxValue:
-        return typeof formValue === 'number' && typeof configuredValue === 'number' && formValue <= configuredValue
-
-      case FieldValidationEnum.Regex:
-        return (
-          typeof formValue === 'string' &&
-          typeof configuredValue === 'string' &&
-          new RegExp(configuredValue).test(formValue)
-        )
-
-      case FieldValidationEnum.Email:
-        return typeof formValue === 'string' && REGEX_PATTERNS.Email.test(formValue)
-
-      case FieldValidationEnum.StrictlyEquals:
-        if (!configuredValue)
-          // equals no value
-          return !formValue || [null, undefined, ''].includes(formValue)
-
-        return Array.isArray(formValue) ? formValue.includes(configuredValue) : formValue === configuredValue
-
-      default:
-        return false
-    }
-  })
-}
-
-export const isValidationsMet = (
-  type: FormElementConditionalKeyEnum,
-  dataValues: { [key: string]: any },
-  configs?: IFormLayoutElementConditions,
-  contextValues: { currentBreakpoint?: DeviceBreakpointEnum } & IFormContext = {},
-) => {
-  const validations = configs?.[type] ?? []
-
-  if (validations.length === 0) return true
-
-  const { fieldValidations, authUserValidations, hasDataIdValidation, alwaysDisabled, hideScreens } =
-    getValidationConfigs(validations)
-
-  if (alwaysDisabled) return false
-
-  // Dependent on other fields
-  const isFieldsConditionsMet =
-    dataValues && typeof dataValues === 'object' && fieldValidations.length > 0
-      ? validateConditions(fieldValidations as IConditionalValidation_Field[], dataValues)
-      : true
-
-  // Dependent on auth user
-  const isAuthUserConditionsMet = authUserValidations.length > 0 ? false : true
-
-  // Dependent on data id
-  const isDataIdConditionsMet = hasDataIdValidation
-    ? hasDataIdValidation.state === FormStateEnum.New
-      ? isNewFormDataPage(contextValues.formDataId)
-      : contextValues.formDataId !== NEW_FORM_DATA_IDENTIFIER
-    : true
-
-  // Dependent on screen
-  const isScreenConditionsMet = contextValues?.currentBreakpoint
-    ? !hideScreens.includes(contextValues.currentBreakpoint)
-    : true
-
-  return isFieldsConditionsMet && isAuthUserConditionsMet && isDataIdConditionsMet && isScreenConditionsMet
+import { IFormContext } from '../../../form/layout-renderer/1-row'
+import { DeviceBreakpointEnum, FormElementConditionalKeyEnum } from '../../../../enums'
+import { IConditionalValidation, IFormLayoutElementConditions } from '../../../../types'
+import { areConditionalRulesMet } from '../../../../functions/forms/conditional-rule.utils'
+
+export const isValidationsMet = (
+  type: FormElementConditionalKeyEnum,
+  dataValues: { [key: string]: any },
+  configs?: IFormLayoutElementConditions,
+  contextValues: { currentBreakpoint?: DeviceBreakpointEnum } & IFormContext = {},
+) => {
+  const validations: IConditionalValidation[] = configs?.[type] ?? []
+
+  return areConditionalRulesMet(validations, {
+    fieldValues: dataValues,
+    currentBreakpoint: contextValues.currentBreakpoint,
+    formDataId: contextValues.formDataId,
+  })
 }

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

@@ -7,6 +7,7 @@ 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 isUserForm = Form.useWatch(FormPreservedItemKeys.IsUserForm, { form: formRef, preserve: true })
   const formTemplateReports = Form.useWatch(FormPreservedItemKeys.FormTemplateReports, {
     form: formRef,
     preserve: true,
@@ -35,6 +36,7 @@ export const useFormPreservedItemValues = (formRef?: FormInstance): IFormValues
     [FormPreservedItemKeys.DuplicateDataFound]:
       duplicateDataMatches && Object.values(duplicateDataMatches).some((result) => result),
     [FormPreservedItemKeys.DuplicateCheckPending]: isDuplicateCheckPending,
+    [FormPreservedItemKeys.IsUserForm]: isUserForm,
   }
 }
 

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

@@ -36,6 +36,7 @@ export default function FormDataListHeaderComponent({
   const { formId, detailPageFormId, parentFormJoins, formDataId, manyToManyRelInfo, onCustomFunctionCall } =
     headerLayoutContext
   const isInitialFetchRef = useRef(true)
+  const lastSerializedFiltersRef = useRef<string | null>(null)
 
   const currentBreakpoint = useGetCurrentBreakpoint()
 
@@ -95,12 +96,22 @@ export default function FormDataListHeaderComponent({
     [filterConfigs],
   )
 
+
   useEffect(() => {
-    if (filterValues) {
-      if (!isInitialFetchRef.current) organizeFilterData(filterValues)
-      else isInitialFetchRef.current = false
+    if (!filterValues) return
+
+    const serialized = JSON.stringify(filterValues)
+    if (lastSerializedFiltersRef.current === serialized) return
+
+    lastSerializedFiltersRef.current = serialized
+
+    if (isInitialFetchRef.current) {
+      isInitialFetchRef.current = false
+      return
     }
-  }, [filterValues])
+
+    organizeFilterData(filterValues)
+  }, [filterValues, organizeFilterData])
 
   const formContext = useMemo(
     () => ({

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

@@ -35,6 +35,7 @@ import {
   isValidMongoDbId,
   queryParamsToObject,
 } from '../../../functions/forms'
+import { ICustomComponents } from '../layout-renderer/3-element'
 
 export default function FormDataDetailsComponent(props: IFormDataDetailsComponent) {
   return (
@@ -53,6 +54,7 @@ function FormDataDetailsComponentChild({
   baseServerUrl,
   initialValues,
   companyKey,
+  customComponents,
   onCustomFunctionCall,
 }: IFormDataDetailsComponent) {
   const { pushCrumb, breadcrumbs } = useBreadcrumb()
@@ -176,6 +178,7 @@ function FormDataDetailsComponentChild({
               }
             } else setIsNotFound(true)
           })
+          .catch(() => setIsNotFound(true))
       }
     },
     [formDataId, formDataRef, breadcrumbs],
@@ -206,6 +209,12 @@ function FormDataDetailsComponentChild({
     translationStore.setTranslations(cachedConfig.id, cachedConfig.translations)
   }, [cachedConfig])
 
+  useEffect(() => {
+    if (!cachedConfig) return
+
+    formDataRef.setFieldValue(FormPreservedItemKeys.IsUserForm, true)
+  }, [cachedConfig])
+
   useEffect(() => {
     if (!cachedConfig?.detailsConfig) return
 
@@ -269,6 +278,7 @@ function FormDataDetailsComponentChild({
               formRef: formDataRef,
               companyKey,
             }}
+            customComponents={customComponents}
             elements={cachedConfig.detailsConfig.elements}
             renderButton={(btnProps) => (
               <DynamicFormButtonRender
@@ -298,7 +308,8 @@ type IFormDataDetailsComponent = {
   formName?: string
   initialValues?: Record<string, any>
 } & (IDataDetailsPublicProps | IDataDetailsPrivateProps) &
-  ICustomFunctionCall
+  ICustomFunctionCall &
+  ICustomComponents
 
 interface IDataDetailsPublicProps {
   isPublic: true

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

@@ -9,6 +9,7 @@ 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'
 
 export const LayoutRendererRow = memo(
   ({
@@ -18,6 +19,7 @@ export const LayoutRendererRow = memo(
     formContext,
     elements,
     isTopLevel = false,
+    customComponents,
     renderButton,
   }: ILayoutRendererRow) => {
     const hiddenIds = useHiddenIds()
@@ -83,6 +85,7 @@ export const LayoutRendererRow = memo(
                     formContext={formContext}
                     colStyle={getColumnStyle(colIdx, rowData.display)}
                     renderButton={renderButton}
+                    customComponents={customComponents}
                   />
                 ))}
                 {formListItemProps?.removeButton}
@@ -95,7 +98,7 @@ export const LayoutRendererRow = memo(
   },
 )
 
-interface ILayoutRendererRow {
+type ILayoutRendererRow = {
   basePath?: (string | number)[]
   rowData: IDndLayoutRow
   isTopLevel?: boolean
@@ -103,8 +106,7 @@ interface ILayoutRendererRow {
   formContext: IFormContext
   elements: { [key: string]: IDndLayoutElement }
   renderButton?: (btnProps: IDynamicButton_DisplayStateProps) => ReactElement
-  hideCol?: (bool: boolean) => void
-}
+} & ICustomComponents
 
 export interface IFormContext {
   formDataId?: string

package/src/components/form/layout-renderer/2-col/index.tsx

@@ -1,7 +1,7 @@
 import { memo, ReactElement } from 'react'
 import { IFormContext, LayoutRendererRow } from '../1-row'
 import { DndLayoutNodeEnum } from '../../../../enums'
-import LayoutRendererElementWrapper from '../3-element'
+import LayoutRendererElementWrapper, { ICustomComponents } from '../3-element'
 import { useIsNodeHidden } from '../../../common/custom-hooks/use-node-condition.hook/use-node-condition.hook'
 import { IDndLayoutCol, IDndLayoutElement, IDndLayoutRow } from '../../../../types'
 import { IDynamicButton_DisplayStateProps } from '../3-element/1-dynamic-button'
@@ -14,6 +14,7 @@ function LayoutRendererCol({
   elements,
   formContext,
   colStyle,
+  customComponents,
   renderButton,
 }: ILayoutRendererCol) {
   const isHidden = useIsNodeHidden(colData.id)
@@ -33,6 +34,7 @@ function LayoutRendererCol({
             formContext={formContext}
             dataCount={dataCount}
             elements={elements}
+            customComponents={customComponents}
             renderButton={renderButton}
           />
         ) : (
@@ -43,6 +45,7 @@ function LayoutRendererCol({
             formContext={formContext}
             dataCount={dataCount}
             renderButton={renderButton}
+            customComponents={customComponents}
           />
         ),
       )}
@@ -51,7 +54,7 @@ function LayoutRendererCol({
 }
 
 export default memo(LayoutRendererCol)
-interface ILayoutRendererCol {
+type ILayoutRendererCol = {
   basePath: (string | number)[]
   colData: IDndLayoutCol
   dataCount?: 'pending' | number
@@ -59,4 +62,4 @@ interface ILayoutRendererCol {
   formContext: IFormContext
   colStyle: { [key: string]: number | string }
   renderButton?: (btnProps: IDynamicButton_DisplayStateProps) => ReactElement
-}
+} & ICustomComponents

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

@@ -1,5 +1,4 @@
 import { useCallback } from 'react'
-import { FormLoadingModalTypeEnum, TranslationTextTypeEnum } from '../../../../../enums'
 import { useFormPreservedItemValues } from '../../../../common/custom-hooks/use-preserved-form-items.hook'
 import { toMongoDbExtendedJSON } from '../../../../../functions/forms/extended-json-handlers'
 import client from '../../../../../api/client'
@@ -8,9 +7,15 @@ import { useNotification, useTranslation } from '../../../../common/custom-hooks
 import { useNavigate } from 'react-router-dom'
 import { IFormContext } from '../../1-row'
 import { IOnSuccessFunctions } from '.'
-import { IFormTemplateReport } from '../../../../../types'
+import { IFormTemplateReport, ISystemRole, SystemRolePermissionEnum } from '../../../../../types'
 import { useBreadcrumb } from '../../../../common/custom-hooks/use-breadcrumb.hook'
 import { FORM_SUBMISSION_PDF_KEY } from '../../../../../constants'
+import {
+  FormLoadingModalTypeEnum,
+  LOCAL_STORAGE_KEYS_ENUM,
+  TranslationTextTypeEnum,
+  UserFormPlaceholders,
+} from '../../../../../enums'
 
 /* --------------------------------------------------------------------------
   - Creates new form data.
@@ -33,83 +38,132 @@ export const useCreateDataWithPdfActions = ({
   const { t } = useTranslation(formId)
   const navigate = useNavigate()
   const { errorModal, warning } = useNotification()
-  const { baseServerUrl, submissionTemplateReportConfig, formTemplateReports, isPublic } =
+  const { baseServerUrl, submissionTemplateReportConfig, formTemplateReports, isPublic, isUserForm } =
     useFormPreservedItemValues(formRef)
   const { breadcrumbs } = useBreadcrumb()
 
   const onCreateNewData = useCallback(
-    (generatedPdfBlobName?: string) => {
+    async (generatedPdfBlobName?: string) => {
       try {
-        formRef
-          ?.validateFields()
-          .then(async (values) => {
-            setDataLoadingType(FormLoadingModalTypeEnum.SavingChanges)
-            const submissionValues = { ...values }
-
-            const shouldGenerateSubmissionPdf =
-              isNewFormDataPage(formDataId) &&
-              submissionTemplateReportConfig?.enabled &&
-              submissionTemplateReportConfig.template &&
-              formId &&
-              (isPublic ? !!companyKey : true)
-
-            if (shouldGenerateSubmissionPdf) {
-              const templateReportsForForm = formTemplateReports?.[formId]
-              const templateInfo = Array.isArray(templateReportsForForm?.templates)
-                ? (templateReportsForForm?.templates.find(
-                    (report: IFormTemplateReport) => report.fileBlobName === submissionTemplateReportConfig.template,
-                  ) as IFormTemplateReport | undefined)
-                : undefined
-
-              if (templateInfo) {
-                const generatedTemplate = await replaceTemplateReportAndUpload({
-                  templateInfo,
-                  formData: { Data: submissionValues },
-                  companyKey,
-                  formId,
-                  isPublic,
-                  fileNameHint: submissionTemplateReportConfig.fileName || 'SubmissionProofPdf.pdf',
-                })
-
-                if (generatedTemplate?.blobName) submissionValues[FORM_SUBMISSION_PDF_KEY] = generatedTemplate.blobName
-              }
+        if (!formRef) return
+
+        const values = await formRef.validateFields()
+        let submissionValues = { ...values }
+
+        if (isUserForm) {
+          setDataLoadingType(FormLoadingModalTypeEnum.CreatingUserAccount)
+
+          const systemRoles = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.UserRoles) || '[]') || []
+          const selectedRoles = values?.[UserFormPlaceholders.ROLES_FIELD_KEY] || []
+          const selectedPermissions = systemRoles.reduce(
+            (accR: SystemRolePermissionEnum[], r: ISystemRole) =>
+              selectedRoles.includes(r.name) ? [...accR, ...r.permissions] : accR,
+            [],
+          )
+          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,
+          }
+
+          try {
+            const userResponse = await client.post('/api/user', userPayload)
+
+            if (userResponse.status >= 300 || !userResponse.data) {
+              setDataLoadingType(FormLoadingModalTypeEnum.ErrorOccured)
+              errorModal({
+                title: 'User account creation failed',
+                content: 'An error occurred while creating the user account.',
+              })
+              onCreateError()
+              return
             }
 
-            const reqData = {
-              name: '', // TODO: maybe later, make it dynamic
-              data: JSON.stringify(toMongoDbExtendedJSON({ ...submissionValues, generatedPdfBlobName })),
-              ...(isPublic ? { private: false } : { version: 1 }),
+            submissionValues = {
+              ...submissionValues,
+              [UserFormPlaceholders.AspUserId]: userResponse.data,
             }
+          } catch (_error) {
+            setDataLoadingType(FormLoadingModalTypeEnum.ErrorOccured)
+            errorModal({
+              title: 'User account creation failed',
+              content: 'An error occurred while creating the user account.',
+            })
+            onCreateError()
+            return
+          }
+        }
+
+        setDataLoadingType(FormLoadingModalTypeEnum.SavingChanges)
+
+        const shouldGenerateSubmissionPdf =
+          isNewFormDataPage(formDataId) &&
+          submissionTemplateReportConfig?.enabled &&
+          submissionTemplateReportConfig.template &&
+          formId &&
+          (isPublic ? !!companyKey : true)
+
+        if (shouldGenerateSubmissionPdf) {
+          const templateReportsForForm = formTemplateReports?.[formId]
+          const templateInfo = Array.isArray(templateReportsForForm?.templates)
+            ? (templateReportsForForm?.templates.find(
+                (report: IFormTemplateReport) => report.fileBlobName === submissionTemplateReportConfig.template,
+              ) as IFormTemplateReport | undefined)
+            : undefined
+
+          if (templateInfo) {
+            const generatedTemplate = await replaceTemplateReportAndUpload({
+              templateInfo,
+              formData: { Data: submissionValues },
+              companyKey,
+              formId,
+              isPublic,
+              fileNameHint: submissionTemplateReportConfig.fileName || 'SubmissionProofPdf.pdf',
+            })
 
-            const endpoint = isPublic ? `/api/site/${formKey}` : `/api/formdata/${formId}`
-            const res = await client.post(endpoint, reqData)
-
-            if (res.status === 200) onCreateSuccess(res.data)
+            if (generatedTemplate?.blobName) submissionValues[FORM_SUBMISSION_PDF_KEY] = generatedTemplate.blobName
+          }
+        }
+
+        const reqData = {
+          name: '', // TODO: maybe later, make it dynamic
+          data: JSON.stringify(toMongoDbExtendedJSON({ ...submissionValues, generatedPdfBlobName })),
+          ...(isPublic ? { private: false } : { version: 1 }),
+        }
+
+        const endpoint = isPublic ? `/api/site/${formKey}` : `/api/formdata/${formId}`
+        const res = await client.post(endpoint, reqData)
+
+        if (res.status === 200) onCreateSuccess(res.data)
+      } catch (err: any) {
+        if (err?.errorFields) {
+          const firstErrorField = Array.isArray(err.errorFields) && err.errorFields.length > 0 && err.errorFields[0]
+          const labels = firstErrorField
+            ? (t(
+                err.errorFields
+                  .filter((f: { name?: string[] }) => Array.isArray(f.name) && f.name.length === 1)
+                  .map((f: { name: string[] }) => ({ key: f.name[0], type: TranslationTextTypeEnum.Label })),
+              ) as string[])
+            : []
+
+          warning({
+            message: 'Please fill out all the required fields!',
+            description: labels.length > 5 ? `${labels.length} required fields are missing.` : labels.join(', '),
           })
-          .catch((err) => {
-            const firstErrorField = Array.isArray(err?.errorFields) && err.errorFields.length > 0 && err.errorFields[0]
-            const labels = firstErrorField
-              ? (t(
-                  err.errorFields
-                    .filter((f: { name?: string[] }) => Array.isArray(f.name) && f.name.length === 1)
-                    .map((f: { name: string[] }) => ({ key: f.name[0], type: TranslationTextTypeEnum.Label })),
-                ) as string[])
-              : []
-
-            warning({
-              message: 'Please fill out all the required fields!',
-              description: labels.length > 5 ? `${labels.length} required fields are missing.` : labels.join(', '),
-            })
 
-            const firstFieldName =
-              Array.isArray(firstErrorField?.name) && firstErrorField.name.length > 0 && firstErrorField?.name[0]
+          const firstFieldName =
+            Array.isArray(firstErrorField?.name) && firstErrorField.name.length > 0 && firstErrorField?.name[0]
 
-            if (!firstFieldName) return
+          if (!firstFieldName) return
+
+          const element = document.getElementById(firstFieldName)
+          if (element) element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+          return
+        }
 
-            const element = document.getElementById(firstFieldName)
-            if (element) element.scrollIntoView({ behavior: 'smooth', block: 'start' })
-          })
-      } catch (err) {
         onCreateError()
       } finally {
         onCreateFinal()
@@ -125,10 +179,17 @@ export const useCreateDataWithPdfActions = ({
       formTemplateReports,
       submissionTemplateReportConfig,
       isPublic,
+      isUserForm,
       baseServerUrl,
       companyKey,
       navigate,
       errorModal,
+      setDataLoadingType,
+      onCreateSuccess,
+      onCreateError,
+      onCreateFinal,
+      t,
+      warning,
     ],
   )
 

package/src/components/form/layout-renderer/3-element/10-currency.tsx

@@ -44,7 +44,7 @@ function LayoutRenderer_CurrencyField({
   )
 
   return (
-    <LayoutRenderer_FieldElement formRef={formRef} elementKey={elementData.key} formId={formContext.formId}>
+    <LayoutRenderer_FieldElement formRef={formRef} elementKey={elementData.key} formId={formContext.formId} formContext={formContext}>
       {() => ({
         ...props,
         label,

package/src/components/form/layout-renderer/3-element/12-picker-field.tsx

@@ -9,6 +9,7 @@ import { findMaxAndMinValues } from '../../../../functions'
 import { VALIDATION_CURRENT_DATE_IDENTIFIER } from '../../../../constants'
 import dayjs from 'dayjs'
 import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
+import useGetCurrentBreakpoint from '../../../common/custom-hooks/use-window-width.hook'
 
 function LayoutRenderer_PickerField({ formContext, formItem, elementData, isDisabled }: ILayoutRenderer_PickerField) {
   const { t } = useTranslation(formContext.formId)
@@ -32,10 +33,15 @@ function LayoutRenderer_PickerField({ formContext, formItem, elementData, isDisa
       ? [placeholder1, placeholder2]
       : placeholder1
 
-  let { maxValue, minValue } = useMemo(() => findMaxAndMinValues(elementData.validations), [elementData.validations])
+  const currentBreakpoint = useGetCurrentBreakpoint()
+  let { maxValue, minValue } = findMaxAndMinValues(elementData.validations, {
+    fieldValues: (formContext.formRef?.getFieldsValue(true) ?? {}) as Record<string, any>,
+    formDataId: formContext.formDataId,
+    currentBreakpoint,
+  })
 
   return (
-    <LayoutRenderer_FieldElement formRef={formContext.formRef} elementKey={elementData.key} formId={formContext.formId}>
+    <LayoutRenderer_FieldElement formRef={formContext.formRef} elementKey={elementData.key} formId={formContext.formId} formContext={formContext}>
       {() => ({
         ...props,
         label,
@@ -65,3 +71,4 @@ type ILayoutRenderer_PickerField = {
   elementData: IPickerElement
 } & IElementBaseProps
 
+