form-craft-package 1.7.9-dev.0 → 1.7.9-dev.2

package/src/components/companies/2-unauthenticated/reset-password.tsx

@@ -0,0 +1,128 @@
+import { Button, Col, Form, Input, Row, Spin } from 'antd'
+import { useEffect, useState } from 'react'
+import { useNavigate, useLocation } from 'react-router-dom'
+import { useLoginHandler } from '../../common/custom-hooks/use-login-handler'
+import { useConfigContext } from '../context'
+import { useRef } from 'react'
+
+export const ResetPassword = () => {
+  const { config } = useConfigContext()
+  const [loading, setLoading] = useState<boolean>(false)
+  const location = useLocation()
+  const { handleVerifyToken, handleResetPassword } = useLoginHandler()
+  const searchParams = new URLSearchParams(location.search)
+  const token = searchParams.get('token') || ''
+  const domain = searchParams.get('domain') || ''
+  const email = searchParams.get('email') || ''
+  const [error, setError] = useState<string>('')
+  const navigate = useNavigate()
+  const [tokenValid, setTokenValid] = useState(false)
+
+  const formPadding = config?.loginLayout?.form?.padding
+  const titleColor = config?.loginLayout.form.color
+  const background = config?.loginLayout?.background
+  const logoUrl = config?.siteIdentity?.logoUrl
+  const primaryColor = config?.siteLayout?.siteConfigs?.colors?.primary
+  const isFirstLoad = useRef(true)
+  useEffect(() => {
+    const checkToken = async () => {
+      setLoading(true)
+      if (isFirstLoad.current) {
+        isFirstLoad.current = false
+        const isValid = await handleVerifyToken(domain!, email!, token.replaceAll(' ', '+'))
+        setTokenValid(!!isValid)
+        setLoading(false)
+      }
+    }
+
+    if (token) {
+      checkToken()
+    }
+  }, [domain, email, token, handleVerifyToken])
+
+  const onReset = async (values: { password: string; confirm: string }) => {
+    setLoading(true)
+    if (values.password !== values.confirm) {
+      return setError('Passwords do not match')
+    }
+    const resetResponse = await handleResetPassword(domain!, email!, token.replaceAll(' ', '+'), values.password)
+    if (resetResponse) {
+      setError('')
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Spin spinning={!config && loading}>
+      <div className="h-screen w-full flex items-center justify-center overflow-hidden" style={{ background }}>
+        <div
+          className="overflow-auto text-center shadow"
+          style={{
+            padding: formPadding,
+            background: '#fff',
+            width: 400,
+            maxWidth: '100%',
+          }}
+        >
+          {logoUrl && (
+            <div className="flex justify-center mb-4">
+              <img src={logoUrl} alt="Logo" className="h-10 object-contain" />
+            </div>
+          )}
+
+          <div className="font-bold mb-2" style={{ color: titleColor }}>
+            Reset Password
+          </div>
+
+          {tokenValid ? (
+            <>
+              <Form layout="vertical" onFinish={onReset}>
+                <Row gutter={[0, 10]}>
+                  <Col span={24}>
+                    <Form.Item
+                      label="New Password"
+                      name="password"
+                      rules={[{ required: true, message: 'Enter your new password' }]}
+                    >
+                      <Input.Password />
+                    </Form.Item>
+                  </Col>
+                  <Col span={24}>
+                    <Form.Item
+                      label="Confirm Password"
+                      name="confirm"
+                      rules={[{ required: true, message: 'Confirm your new password' }]}
+                    >
+                      <Input.Password />
+                    </Form.Item>
+                  </Col>
+                  <Col span={24}>{error && <div className="text-danger">{error}</div>}</Col>
+                </Row>
+
+                <div className="flex justify-center mt-5">
+                  <Button
+                    htmlType="submit"
+                    className="w-full"
+                    style={{
+                      color: '#fff',
+                      backgroundColor: primaryColor,
+                    }}
+                  >
+                    Reset Password
+                  </Button>
+                </div>
+              </Form>
+            </>
+          ) : (
+            <div className="flex flex-col items-center gap-2">
+              <div className="text-red-500">Token is invalid or has expired. Please request a new reset link.</div>
+              <div>
+                <Button onClick={() => navigate('/forgot-password')}>Reset Link</Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </Spin>
+  )
+}

package/src/components/companies/index.tsx

@@ -1,4 +1,6 @@
 export * from './1-authenticated'
 export * from './2-unauthenticated'
 export * from './3-config-provider'
+export * from './1-authenticated/change-password'
 export * from './2-unauthenticated/forgot-password'
+export * from './2-unauthenticated/reset-password'

package/src/components/form/1-list/index.tsx

@@ -3,10 +3,10 @@ import { cancelableClient } from '../../../api/client'
 import FormDataListSkeleton_Table from '../../common/loading-skeletons/table'
 import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import FormDataListTableComponent, { IDataListLayoutConfig } from './table'
-import { IFormSchema, IFormJoin, IFormDataListData } from '../../../types'
+import { IFormJoin, IFormDataListData, IFormDataListConfig } from '../../../types'
+import { getProjectionKey } from '../../../functions'
 
 function FormDataListComponent({
-  formName,
   formId,
   userId,
   companyKey,
@@ -23,7 +23,7 @@ function FormDataListComponent({
   const defaultFilterReqDataRef = useRef<IDataListReqData | undefined>(undefined)
 
   const attachmentBaseUrl = useMemo(() => `${baseServerUrl}/api/attachment/${companyKey}`, [baseServerUrl, companyKey])
-  const headerLayoutContext = { formId, userId, attachmentBaseUrl, formName, companyKey, onCustomFunctionCall }
+  const headerLayoutContext = { formId, userId, attachmentBaseUrl, companyKey, onCustomFunctionCall }
 
   useEffect(() => {
     setLoadings({ initial: true, data: true })
@@ -35,43 +35,43 @@ function FormDataListComponent({
 
   useEffect(() => {
     if (!formId) return
-    const { request, cancel } = cancelableClient.get(`/api/form/${formId}`)
+    const { request, cancel } = cancelableClient.post(`/api/form/${formId}`, {
+      project: JSON.stringify({ 'Data.dataListConfig': 1 }),
+    })
     request.then(async (res) => {
       if (res.status === 200) {
-        const parsedData: IFormSchema | null = JSON.parse(res.data.data)
-        if (parsedData) {
-          const { columns, formJoins, pagination, defaultFilter, defaultSorter } = parsedData.dataListConfig
-
-          if (Array.isArray(columns))
-            dataProjectRef.current = columns.reduce(
-              (curr, c) => (c.key ? { ...curr, [c.key.replace(/\./g, '_')]: `$${c.key}` } : curr),
-              {},
-            )
-          if (Array.isArray(formJoins)) formJoinsRef.current = formJoins
-
-          const defaultReqData: IDataListReqData = {}
-          if (!pagination?.hasNoPagination) {
-            defaultReqData.current = 1
-            defaultReqData.limit = pagination?.defaultPageSize ?? 10
-          }
-          if (defaultSorter) defaultReqData.sort = JSON.stringify({ [defaultSorter.field]: defaultSorter.order })
-          if (defaultFilter?.config && Object.values(defaultFilter.config).length)
-            // The operators are stored using @, and here it replaces @ with $. Otherwise, MongoDB's JSON-to-BSON conversion driver was detecting certain operators, especially $regex, and automatically modified them. To prevent data manipulation by the MongoDB driver, @ is used instead of $.
-            defaultReqData.match = JSON.stringify(defaultFilter.config).replaceAll('@', '$')
-
-          defaultFilterReqDataRef.current = defaultReqData
-
-          fetchFormDataList(defaultReqData)
-
-          // configForFormId is passed to ensure that the table shows the correct data list when the forms are switched quickly
-          setListLayoutConfig({
-            configForFormId: formId,
-            dataListConfig: {
-              ...parsedData.dataListConfig,
-              columns: columns.map((c) => (c.key ? { ...c, key: c.key.replace(/\./g, '_') } : c)),
-            },
-          })
+        const dataListConfig: IFormDataListConfig = res.data.Data.dataListConfig
+        const { columns, formJoins, pagination, defaultFilter, defaultSorter } = dataListConfig
+
+        if (Array.isArray(columns))
+          dataProjectRef.current = columns.reduce(
+            (curr, c) => (c.key ? { ...curr, [getProjectionKey(c.key)]: `$${c.key}` } : curr),
+            {},
+          )
+        if (Array.isArray(formJoins)) formJoinsRef.current = formJoins
+
+        const defaultReqData: IDataListReqData = {}
+        if (!pagination?.hasNoPagination) {
+          defaultReqData.current = 1
+          defaultReqData.limit = pagination?.defaultPageSize ?? 10
         }
+        if (defaultSorter) defaultReqData.sort = JSON.stringify({ [defaultSorter.field]: defaultSorter.order })
+        if (defaultFilter?.config && Object.values(defaultFilter.config).length)
+          // The operators are stored using @, and here it replaces @ with $. Otherwise, MongoDB's JSON-to-BSON conversion driver was detecting certain operators, especially $regex, and automatically modified them. To prevent data manipulation by the MongoDB driver, @ is used instead of $.
+          defaultReqData.match = JSON.stringify(defaultFilter.config).replaceAll('@', '$')
+
+        defaultFilterReqDataRef.current = defaultReqData
+
+        fetchFormDataList(defaultReqData)
+
+        // configForFormId is passed to ensure that the table shows the correct data list when the forms are switched quickly
+        setListLayoutConfig({
+          configForFormId: formId,
+          dataListConfig: {
+            ...dataListConfig,
+            columns: columns.map((c) => (c.key ? { ...c, key: getProjectionKey(c.key) } : c)),
+          },
+        })
       }
     })
 
@@ -127,7 +127,6 @@ function FormDataListComponent({
 export { FormDataListComponent }
 
 type IFormDataListComponent = {
-  formName?: string
   baseServerUrl?: string
   companyKey?: string
   formId?: number

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

@@ -1,7 +1,7 @@
 import { Form } from 'antd'
 import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import dayjs from 'dayjs'
-import { extractFiltersFromLayout } from '../../../functions/forms'
+import { extractFiltersFromLayout, getIdEqualsQuery } from '../../../functions/forms'
 import { DeviceBreakpointEnum, FilterConfigTypeEnum, FormPreservedItemKeys } from '../../../enums'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
 import { VALUE_REPLACEMENT_PLACEHOLDER } from '../../../constants'
@@ -26,7 +26,7 @@ export default function FormDataListHeaderComponent({
 }: IFormDataListHeaderComponent) {
   const [filtersFormRef] = Form.useForm()
   const [filterConfigs, setFilterConfigs] = useState<IFilterNested>({})
-  const { userId, formId, formName, parentInfo, formDataId, onCustomFunctionCall } = headerLayoutContext
+  const { userId, formId, parentFormJoins, formDataId, manyToManyRelInfo, onCustomFunctionCall } = headerLayoutContext
   const isInitialFetchRef = useRef(true)
 
   const currentBreakpoint = useGetCurrentBreakpoint()
@@ -108,8 +108,8 @@ export default function FormDataListHeaderComponent({
   }, [filterValues])
 
   const formContext = useMemo(
-    () => ({ formRef: filtersFormRef, formName, formId, formDataId, linkedParentsDataIds: parentInfo?.dataIds }),
-    [filtersFormRef, formName, formId, formDataId, parentInfo],
+    () => ({ formRef: filtersFormRef, formId, formDataId, parentFormJoins, manyToManyRelInfo }),
+    [filtersFormRef, formId, formDataId, parentFormJoins, manyToManyRelInfo],
   )
 
   return (
@@ -123,7 +123,7 @@ export default function FormDataListHeaderComponent({
           elements={layoutConfig?.elements ?? {}}
           renderButton={(btnProps, conditions) => (
             <DynamicFormButtonRender
-              displayStateProps={{ btnProps, conditions, stateToPass: { parentInfo } }}
+              displayStateProps={{ btnProps, conditions }}
               formContext={formContext}
               onCustomFunctionCall={onCustomFunctionCall}
             />
@@ -172,7 +172,7 @@ const handleFilterValues = async (
 
     return {
       customFilter: {},
-      dynamicFilter: JSON.stringify({ $expr: { $eq: [`$${lastRel.formId}._id`, { $toObjectId: value }] } }),
+      dynamicFilter: JSON.stringify(getIdEqualsQuery(lastRel.formId, value)),
     }
   }
 }

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

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import FormDataListHeaderComponent from './table-header'
 import useDebounced from '../../common/custom-hooks/use-debounce.hook'
-import { FormInstance, Table } from 'antd'
+import { Table } from 'antd'
 import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import { SorterResult } from 'antd/es/table/interface'
 import { generateTableColumns } from '../../../functions/forms'
@@ -9,8 +9,9 @@ import { useLocation } from 'react-router-dom'
 import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
 import { DeviceBreakpointEnum, FormDataListViewTypeEnum, MongoDbSortOrderEnum } from '../../../enums'
 import { IDataListReqData } from '.'
-import { IDataListParentInfo, IFormDataListConfig, IFormDataListData, IFormDataTableColumn } from '../../../types'
+import { IFormDataListConfig, IFormDataListData, IFormDataTableColumn } from '../../../types'
 import { processOptions } from '../../../functions/forms/get-data-list-option-value'
+import { IFormContext } from '../layout-renderer/1-row'
 
 export default function FormDataListTableComponent({
   layoutsConfigs,
@@ -33,7 +34,9 @@ export default function FormDataListTableComponent({
   )
   const [otherConfigs, setOtherConfigs] = useState<Partial<IFormDataListConfig> | undefined>(undefined)
 
-  const { formId } = headerLayoutContext
+  useEffect(() => {
+    setFilterReqData(undefined)
+  }, [location.pathname])
 
   useEffect(() => {
     if (Array.isArray(layoutsConfigs?.dataListConfig.columns)) {
@@ -64,7 +67,7 @@ export default function FormDataListTableComponent({
     async (layoutsConfigs: IDataListLayoutConfig) => {
       const { configForFormId, dataListConfig } = layoutsConfigs!
 
-      if (configForFormId !== formId) {
+      if (configForFormId !== headerLayoutContext.formId) {
         setLoading(false)
         return
       }
@@ -82,7 +85,7 @@ export default function FormDataListTableComponent({
 
       setLoading(false)
     },
-    [formId, headerLayoutContext, layoutsConfigs],
+    [headerLayoutContext, layoutsConfigs],
   )
 
   useEffect(() => {
@@ -170,14 +173,9 @@ type IFormDataListTableComponent = {
 
 export type IDataListHeaderLayoutContext = {
   userId?: string | number
-  formId?: number
   attachmentBaseUrl?: string
-  formDataId?: string
-  formName?: string
-  parentInfo?: IDataListParentInfo
-  formRef?: FormInstance
-  companyKey?: string
-} & ICustomFunctionCall
+} & ICustomFunctionCall &
+  IFormContext
 
 export type IDataListLayoutConfig =
   | {

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

@@ -2,16 +2,17 @@ import { Form } from 'antd'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { IDndLayoutStructure_Responsive, IFormSchema } from '../../../types'
 import { NEW_FORM_DATA_IDENTIFIER } from '../../../constants'
-import { parseJSON } from '../../../functions/forms/json-handlers'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
 import { DynamicFormButtonRender, ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import FormDataListSkeleton_Details from '../../common/loading-skeletons/details'
 import { useLocation } from 'react-router-dom'
-import { extractDateFields, queryParamsToObject } from '../../../functions/forms'
-import { DeviceBreakpointEnum, FormPreservedItemKeys } from '../../../enums'
-import dayjs from 'dayjs'
+import { fromMongoDbExtendedJSON, isValidMongoDbId, queryParamsToObject } from '../../../functions/forms'
+import { DeviceBreakpointEnum, FormPreservedItemKeys, LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
 import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
 import client from '../../../api/client'
+import { useBreadcrumb } from '../../common/custom-hooks/use-breadcrumb.hook'
+import NotFound from '../../common/not-found'
+import { useManyToManyConnector } from '../../common/custom-hooks/use-many-to-many-connector.hook'
 
 export default function FormDataDetailsComponent({
   isPublic,
@@ -21,21 +22,44 @@ export default function FormDataDetailsComponent({
   formName,
   companyKey,
   baseServerUrl,
-  onCustomFunctionCall,
   initialValues,
+  onCustomFunctionCall,
 }: IFormDataDetailsComponent) {
+  const { push } = useBreadcrumb()
   const location = useLocation()
   const [formDataRef] = Form.useForm()
   const [loadings, setLoadings] = useState({ layout: true, data: true })
   const [layoutConfig, setLayoutConfig] = useState<IDndLayoutStructure_Responsive>({ elements: {}, layouts: {} })
+  const [isNotFound, setIsNotFound] = useState(false)
+  useManyToManyConnector(formDataRef)
 
   const currentBreakpoint = useGetCurrentBreakpoint()
 
+  useEffect(() => {
+    // for public forms, setting the details form into localStorage, so that buttons work correctly
+    if (isPublic)
+      localStorage.setItem(LOCAL_STORAGE_KEYS_ENUM.DynamicForms, JSON.stringify([{ id: formId, name: formName }]))
+  }, [isPublic, formId, formName])
+
+  useEffect(() => {
+    if (!formDataId || !isValidMongoDbId(formDataId)) setIsNotFound(true)
+  }, [formDataId])
+
+  useEffect(() => {
+    const isNewDataPage = formDataId === NEW_FORM_DATA_IDENTIFIER
+    const splittedFormName = formName?.split(' ')?.[0] ?? ''
+    push({
+      label: isNewDataPage ? `New ${splittedFormName.toLowerCase()}` : `${splittedFormName} details`,
+      href: location.pathname,
+    })
+  }, [location.pathname, formName, formDataId])
+
   const layout = useMemo(
     () => layoutConfig.layouts[currentBreakpoint] ?? layoutConfig.layouts[DeviceBreakpointEnum.Default] ?? [],
     [layoutConfig.layouts, currentBreakpoint],
   )
-  // Apply initialValues
+
+  // Apply initialValues from parent
   useEffect(() => {
     if (initialValues && formDataId === NEW_FORM_DATA_IDENTIFIER) {
       formDataRef.setFieldsValue(initialValues)
@@ -60,8 +84,9 @@ export default function FormDataDetailsComponent({
   }, [formDataRef, baseServerUrl, isPublic])
 
   const fetchFormData = useCallback(
-    (dFormId?: number, dateFields: string[] = []) => {
-      if (formDataId === NEW_FORM_DATA_IDENTIFIER) setLoadings((c) => ({ ...c, data: false }))
+    (dFormId?: number) => {
+      if (formDataId === NEW_FORM_DATA_IDENTIFIER || !isValidMongoDbId(formDataId))
+        setLoadings((c) => ({ ...c, data: false }))
       else {
         if (!dFormId) {
           console.error('Form ID is required to fetch form data')
@@ -72,18 +97,14 @@ export default function FormDataDetailsComponent({
           .then((res) => {
             if (res.status === 200) {
               const { data: jsonData, ...restFormData } = res.data
-              let parsedFormData = parseJSON(jsonData)
+              let parsedFormData = JSON.parse(jsonData)
               if (parsedFormData) {
-                const fieldsValue: { [key: string]: any } = parsedFormData
-                if (dateFields.length > 0)
-                  Object.entries(parsedFormData).map(([field, value]) => {
-                    if (dateFields.includes(field) && value) fieldsValue[field] = dayjs(value)
-                    else fieldsValue[field] = value
-                  })
+                const fieldsValue: { [key: string]: any } = fromMongoDbExtendedJSON(parsedFormData)
                 formDataRef.setFieldsValue({ ...restFormData, ...fieldsValue })
+
+                console.log('FORM DATA FETCH (PARSED)', fieldsValue)
               }
-              console.log('FORM DATA FETCH (PARSED)', parsedFormData)
-            }
+            } else setIsNotFound(true)
           })
           .finally(() => setLoadings((c) => ({ ...c, data: false })))
       }
@@ -98,7 +119,7 @@ export default function FormDataDetailsComponent({
         .get(endpoint)
         .then((res) => {
           if (res.status === 200) {
-            const parsedData: IFormSchema | null = parseJSON(res.data.data)
+            const parsedData: IFormSchema | null = JSON.parse(res.data.data)
             if (parsedData) {
               console.log('FORM LAYOUT FETCH (PARSED)', parsedData)
               const { layouts: rawLayouts, elements } = parsedData.detailsConfig
@@ -110,11 +131,8 @@ export default function FormDataDetailsComponent({
                     parsedData.generateConfig.submissionPdf,
                   )
                 setLoadings((c) => ({ ...c, data: false }))
-              } else {
-                const dateFields = extractDateFields(elements)
+              } else fetchFormData(formId)
 
-                fetchFormData(formId, dateFields)
-              }
               setLayoutConfig({ elements, layouts: rawLayouts })
             }
           }
@@ -124,30 +142,34 @@ export default function FormDataDetailsComponent({
   }, [formId, formKey, isPublic, formDataRef, fetchFormData])
 
   const formContext = useMemo(
-    () => ({ formId, formKey, formDataId, formRef: formDataRef, formName, companyKey }),
-    [formDataId, formDataRef, formName, formId, formKey, companyKey],
+    () => ({ formId, formKey, formDataId, formRef: formDataRef, companyKey }),
+    [formDataId, formDataRef, formId, formKey, companyKey],
   )
 
   if (loadings.layout || loadings.data) return <FormDataListSkeleton_Details />
 
+  if (isNotFound) return <NotFound />
+
   return (
-    <Form layout="vertical" name="dynamic_form_data_form" form={formDataRef}>
-      {layout.map((row, rowIdx) => (
-        <LayoutRendererRow
-          key={rowIdx}
-          rowData={row}
-          formContext={formContext}
-          elements={layoutConfig.elements}
-          renderButton={(btnProps, conditions) => (
-            <DynamicFormButtonRender
-              displayStateProps={{ btnProps, conditions, defaultDisabled: true }}
-              formContext={formContext}
-              onCustomFunctionCall={onCustomFunctionCall}
-            />
-          )}
-        />
-      ))}
-    </Form>
+    <>
+      <Form layout="vertical" name="dynamic_form_data_form" form={formDataRef}>
+        {layout.map((row, rowIdx) => (
+          <LayoutRendererRow
+            key={rowIdx}
+            rowData={row}
+            formContext={formContext}
+            elements={layoutConfig.elements}
+            renderButton={(btnProps, conditions) => (
+              <DynamicFormButtonRender
+                displayStateProps={{ btnProps, conditions, defaultDisabled: true }}
+                formContext={formContext}
+                onCustomFunctionCall={onCustomFunctionCall}
+              />
+            )}
+          />
+        ))}
+      </Form>
+    </>
   )
 }
 

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

@@ -4,7 +4,13 @@ import LayoutRendererCol from '../2-col'
 import { memo, ReactElement, ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import { LayoutRowConditionalHeaderRenderer } from './header-render'
 import { LayoutRowRepeatableRenderer } from './repeatable-render'
-import { IButtonElementProps, IDndLayoutElement, IFormLayoutElementConditions, IDndLayoutRow } from '../../../../types'
+import {
+  IButtonElementProps,
+  IDndLayoutElement,
+  IFormLayoutElementConditions,
+  IDndLayoutRow,
+  IFormJoin,
+} from '../../../../types'
 
 export const LayoutRendererRow = memo(
   ({ basePath = [], rowData, titleComponent, formContext, elements, renderButton, hideCol }: ILayoutRendererRow) => {
@@ -28,9 +34,9 @@ export const LayoutRendererRow = memo(
               ...styleConfig,
               ...getFlexContainerStyle(rowData.display),
             }
-            
+
             if (hiddenElementCount === rowData.children.length) return <></>
-            
+
             return (
               <div
                 style={{
@@ -93,8 +99,9 @@ export interface IFormContext {
   formDataId?: string
   formRef?: FormInstance
   companyKey?: string
-  formName?: string
+  formName?: string // only passed in DynamicButton component
   formKey?: string
   formId?: number
-  linkedParentsDataIds?: { [key: string]: string[] }
+  parentFormJoins?: IFormJoin[]
+  manyToManyRelInfo?: { middleFormId: number; currentFormId: number; otherFormId: number } | null
 }