form-craft-package 1.8.2-dev.2 → 1.8.2-dev.3

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

@@ -13,35 +13,49 @@ import { Checkbox, Form, Input, Select, Radio, InputNumber, DatePicker, Modal, S
 interface ILayoutRenderer_FieldElement {
   children: () => IMapperFieldObj | IMapperFieldObj[]
   formRef?: FormInstance
+  elementKey?: string
+  formId?: number
 }
 
-export const LayoutRenderer_FieldElement = memo(({ children, formRef }: ILayoutRenderer_FieldElement): JSX.Element => {
-  const elems = children()
-  if (Array.isArray(elems)) {
-    return (
-      <>
-        {elems
-          .filter(({ isHidden = false }) => !isHidden)
-          .map((field: IMapperFieldObj, idx: Key) => (
-            <FieldFormItemWrapper key={idx} field={field} fieldIdx={idx} formRef={formRef} />
-          ))}
-      </>
-    )
-  }
+export const LayoutRenderer_FieldElement = memo(
+  ({ children, formRef, elementKey, formId }: ILayoutRenderer_FieldElement): JSX.Element => {
+    const elems = children()
+    if (Array.isArray(elems))
+      return (
+        <>
+          {elems
+            .filter(({ isHidden = false }) => !isHidden)
+            .map((field: IMapperFieldObj, idx: Key) => (
+              <FieldFormItemWrapper
+                key={idx}
+                field={field}
+                fieldIdx={idx}
+                formRef={formRef}
+                elementKey={elementKey}
+                formId={formId}
+              />
+            ))}
+        </>
+      )
 
-  if (elems.isHidden) return <></>
+    if (elems.isHidden) return <></>
 
-  return <FieldFormItemWrapper field={elems} fieldIdx={1} formRef={formRef} />
-})
+    return <FieldFormItemWrapper field={elems} fieldIdx={1} formRef={formRef} elementKey={elementKey} formId={formId} />
+  },
+)
 
 const FieldFormItemWrapper = ({
   field,
   fieldIdx,
   formRef,
+  elementKey,
+  formId,
 }: {
   field: IMapperFieldObj
   fieldIdx: Key
   formRef?: FormInstance
+  elementKey?: string
+  formId?: number
 }) => {
   const { name, nameFullPath, label, hasNoLabel, type, validations, sanitization, disabled } = field
 
@@ -53,7 +67,7 @@ const FieldFormItemWrapper = ({
         labelAlign="left"
         messageVariables={{ [String(name)]: formRef?.getFieldValue(name) }}
         valuePropName={type && [ElementTypeEnum.Checkbox, ElementTypeEnum.Switch].includes(type) ? 'checked' : 'value'}
-        rules={mapToFormItemRules(validations ?? [], String(name))}
+        rules={mapToFormItemRules(elementKey, validations ?? [], formId)}
         normalize={(value) => {
           if (!sanitization || sanitization.type === DataSanitizationTypeEnum.Default) return value
 

package/src/components/form/layout-renderer/3-element/3-read-field-data.tsx

@@ -2,13 +2,21 @@ import { Form } from 'antd'
 import { renderData } from '../../../../functions/forms'
 import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
 import { memo, useMemo } from 'react'
-import { DataRenderTypeEnum, ReadFieldDataValueTypeEnum } from '../../../../enums'
+import { DataRenderTypeEnum, ReadFieldDataValueTypeEnum, TranslationTextTypeEnum } from '../../../../enums'
 import { IReadFieldDataElementProps } from '../../../../types'
 import { IFormContext } from '../1-row'
 import { evaluateValue } from '../../../../functions/forms/evaluate-value'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
+import { IElementBaseProps } from '.'
+import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
 
-function LayoutRenderer_ReadFieldData({ formContext, elementProps, style = {} }: ILayoutRenderer_ReadFieldData) {
+function LayoutRenderer_ReadFieldData({
+  formContext,
+  elementProps,
+  style = {},
+  elementKey,
+}: ILayoutRenderer_ReadFieldData) {
+  const { t } = useTranslation(formContext.formId)
   const { formRef, companyKey } = formContext
   const fieldValue =
     elementProps.valueType === ReadFieldDataValueTypeEnum.Evaluated
@@ -31,9 +39,10 @@ function LayoutRenderer_ReadFieldData({ formContext, elementProps, style = {} }:
     return 0
   }, [formValues, elementProps])
 
+  const label = t({ key: elementKey, type: TranslationTextTypeEnum.Label })
   return (
     <div className={`${ELEMENTS_DEFAULT_CLASS.ReadFieldData} flex items-center gap-2`}>
-      {elementProps.label && <span>{elementProps.label}: </span>}
+      {label && <span>{label}: </span>}
       <span style={style}>
         {renderData(
           elementProps.renderConfig?.type === DataRenderTypeEnum.Image
@@ -56,4 +65,4 @@ type ILayoutRenderer_ReadFieldData = {
   formContext: IFormContext
   elementProps: IReadFieldDataElementProps
   style?: { [key: string]: any }
-}
+} & IElementBaseProps

package/src/components/form/layout-renderer/3-element/4-rich-text-editor.tsx

@@ -5,9 +5,10 @@ import { IElementBaseProps } from '.'
 import { IInputElementProps, IValidationRule } from '../../../../types'
 import { IFormContext } from '../1-row'
 import { mapToFormItemRules } from '../../../../functions'
-import { FieldValidationEnum } from '../../../../enums'
+import { FieldValidationEnum, TranslationTextTypeEnum } from '../../../../enums'
 import { ELEMENTS_DEFAULT_CLASS, REGEX_PATTERNS } from '../../../../constants'
 import { memo } from 'react'
+import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
 
 function LayoutRenderer_RichEditor({
   formContext,
@@ -15,30 +16,30 @@ function LayoutRenderer_RichEditor({
   formItem,
   validations,
   isDisabled,
+  elementKey,
 }: ILayoutRenderer_RichEditor) {
-  const { formRef } = formContext
+  const { formRef, formId } = formContext
+  const { t } = useTranslation(formId)
   const fieldValue = Form.useWatch(formItem.path, { form: formRef, preserve: true })
   const requiredValidation = validations?.find((v) => v.rule === FieldValidationEnum.Required)
 
+  const label = t({ key: elementKey, type: TranslationTextTypeEnum.Label })
   return (
     <Form.Item
       name={formItem.name}
       rules={
         requiredValidation
           ? mapToFormItemRules(
+              elementKey,
               [
                 requiredValidation,
-                {
-                  rule: FieldValidationEnum.Regex,
-                  value: REGEX_PATTERNS.NonEmptyHtmlString.toString(),
-                  message: requiredValidation.message,
-                },
+                { rule: FieldValidationEnum.Regex, value: REGEX_PATTERNS.NonEmptyHtmlString.toString() },
               ],
-              formItem.name,
+              formId,
             )
           : []
       }
-      label={elementProps.hasNoLabel ? '' : elementProps.label}
+      label={elementProps.hasNoLabel ? '' : label}
       labelAlign="left"
     >
       <ReactQuill

package/src/components/form/layout-renderer/3-element/6-signature.tsx

@@ -1,7 +1,7 @@
 import { Form } from 'antd'
 import { memo, useEffect, useMemo, useRef } from 'react'
 import SignatureCanvas from 'react-signature-canvas'
-import { FormPreservedItemKeys } from '../../../../enums'
+import { FormPreservedItemKeys, TranslationTextTypeEnum } from '../../../../enums'
 import { Button_FillerPortal } from '../../../common/button'
 import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
 import { IElementBaseProps } from '.'
@@ -9,6 +9,7 @@ import { ISignatureElementProps, IValidationRule } from '../../../../types'
 import { IFormContext } from '../1-row'
 import { isNewFormDataPage, mapToFormItemRules } from '../../../../functions'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
+import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
 
 function LayoutRenderer_Signature({
   formItem,
@@ -16,8 +17,10 @@ function LayoutRenderer_Signature({
   isDisabled,
   formContext,
   validations,
+  elementKey,
 }: ILayoutRenderer_Signature) {
-  const { formRef, formDataId, companyKey } = formContext
+  const { formRef, formDataId, companyKey, formId } = formContext
+  const { t } = useTranslation(formId)
   const sigCanvasRef = useRef<SignatureCanvas>(null)
   const savedSignatureBlobName = Form.useWatch(formItem.path, formRef)
   const { isGeneratingPdf, baseServerUrl } = useFormPreservedItemValues(formRef)
@@ -35,11 +38,11 @@ function LayoutRenderer_Signature({
   return (
     <Form.Item
       name={formItem.name}
-      rules={Array.isArray(validations) ? mapToFormItemRules(validations, formItem.name) : []}
+      rules={Array.isArray(validations) ? mapToFormItemRules(elementKey, validations, formId) : []}
       label={
         !elementProps.hasNoLabel && (
           <div className="flex items-center gap-1">
-            <span>{elementProps.label}</span>
+            <span>{t({ key: elementKey, type: TranslationTextTypeEnum.Label })}</span>
             <Button_FillerPortal
               link
               onClick={() => {

package/src/components/form/layout-renderer/3-element/7-file-upload.tsx

@@ -10,6 +10,9 @@ import { saveFile } from '../../../../functions/forms/form'
 import { IElementBaseProps } from '.'
 import { IFormContext } from '../1-row'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
+import { TranslationTextSubTypeEnum, TranslationTextTypeEnum } from '../../../../enums'
+import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
+import { translationStore } from '../../../common/custom-hooks/use-translation.hook/store'
 
 const { VITE_API_BASE_URL } = import.meta.env
 
@@ -19,7 +22,9 @@ function LayoutRenderer_FileUpload({
   elementProps,
   uploadRules,
   isDisabled,
+  elementKey,
 }: ILayoutRenderer_FileUpload) {
+  const { t } = useTranslation(formContext.formId)
   const { formRef, companyKey } = formContext
   const { warningModal, confirmModal } = useNotification()
   const [loading, setLoading] = useState(false)
@@ -56,7 +61,7 @@ function LayoutRenderer_FileUpload({
   }
 
   const beforeUpload = useCallback((file: any) => {
-    const ruleMsg = getUploadRuleErrorMsg(file, uploadRules)
+    const ruleMsg = getUploadRuleErrorMsg(elementKey, file, uploadRules, formContext.formId)
     if (ruleMsg) {
       warningModal({ title: '', content: ruleMsg, okText: 'Okay' })
       return false
@@ -65,17 +70,23 @@ function LayoutRenderer_FileUpload({
     return true
   }, [])
 
+  const [label, placeholder, hint] = t([
+    { key: elementKey, type: TranslationTextTypeEnum.Label },
+    { key: elementKey, type: TranslationTextTypeEnum.Placeholder },
+    { key: elementKey, type: TranslationTextTypeEnum.Description, subType: TranslationTextSubTypeEnum.Secondary },
+  ])
+
   return (
     <>
       <Form.Item name={formItem.name} labelAlign="left" className="hidden">
         <Input />
       </Form.Item>
-      {!elementProps.hasNoLabel && elementProps.label && <span>{elementProps.label}</span>}
+      {!elementProps.hasNoLabel && label && <span>{label}</span>}
       {savedSignatureBlobName ? (
         elementProps.isDragger ? (
           <div className="flex flex-col items-center p-4 bg-background rounded-md">
             <FaFileCircleCheck size={24} className="text-success" />
-            <span className="text-secondary">{elementProps.placeholder ?? 'Uploaded'}:</span>
+            <span className="text-secondary">{placeholder ?? 'Uploaded'}:</span>
             <div className="flex gap-2 items-center">
               <u className="text-neutral">{savedSignatureBlobName}</u>
               <Button_FillerPortal
@@ -109,7 +120,7 @@ function LayoutRenderer_FileUpload({
         ) : (
           <div className="flex items-center gap-2 px-4 py-1 bg-background rounded-md">
             <FaFileCircleCheck size={16} className="text-success" />
-            <span className="text-secondary">{elementProps.placeholder ?? 'Uploaded'}:</span>
+            <span className="text-secondary">{placeholder ?? 'Uploaded'}:</span>
             <u className="text-neutral">{savedSignatureBlobName}</u>
             <div className="flex gap-2 items-center ml-auto">
               <Button_FillerPortal
@@ -146,8 +157,8 @@ function LayoutRenderer_FileUpload({
           <Upload.Dragger {...uploadProps} disabled={isDisabled} beforeUpload={(file) => beforeUpload(file)}>
             <div className="flex flex-col items-center">
               <FaUpload size={24} className="text-primary" />
-              <span className="font-semibold mt-2 text-secondary">{elementProps.placeholder}</span>
-              <span className="text-opacity-50 text-neutral text-12">{elementProps.hint}</span>
+              <span className="font-semibold mt-2 text-secondary">{placeholder}</span>
+              <span className="text-opacity-50 text-neutral text-12">{hint}</span>
             </div>
           </Upload.Dragger>
         </Spin>
@@ -156,7 +167,7 @@ function LayoutRenderer_FileUpload({
           <Upload {...uploadProps} disabled={isDisabled} beforeUpload={(file) => beforeUpload(file)}>
             <Button_FillerPortal disabled={isDisabled} outline onClick={() => {}} className="w-full">
               <FaUpload />
-              {elementProps.placeholder}
+              {placeholder}
             </Button_FillerPortal>
           </Upload>
         </Spin>
@@ -173,7 +184,12 @@ type ILayoutRenderer_FileUpload = {
   elementProps: IFileUploadElementProps
 } & IElementBaseProps
 
-const getUploadRuleErrorMsg = (file: any, uploadRules?: IFileUploadElementRules): null | string => {
+const getUploadRuleErrorMsg = (
+  elementKey: string = '',
+  file: any,
+  uploadRules?: IFileUploadElementRules,
+  formId?: number,
+): null | string => {
   if (!uploadRules) return null
 
   if (
@@ -181,12 +197,30 @@ const getUploadRuleErrorMsg = (file: any, uploadRules?: IFileUploadElementRules)
     uploadRules.allowedTypes.types.length > 0 &&
     !uploadRules.allowedTypes.types.includes(file.type)
   ) {
-    return uploadRules.allowedTypes.errorMsg ?? 'Invalid file type!'
+    const errorMsg = translationStore.translate(
+      {
+        key: elementKey,
+        type: TranslationTextTypeEnum.ValidationError,
+        subType: TranslationTextSubTypeEnum.UploadFileType,
+      },
+      formId,
+    )
+    return errorMsg ?? 'Invalid file type!'
   }
 
   if (uploadRules.maxSize && uploadRules.maxSize.size > 0) {
     const fileSizeInMb = file.size / 1024 / 1024
-    if (fileSizeInMb > uploadRules.maxSize.size) return uploadRules.maxSize.errorMsg ?? 'File is too large!'
+    if (fileSizeInMb > uploadRules.maxSize.size) {
+      const errorMsg = translationStore.translate(
+        {
+          key: elementKey,
+          type: TranslationTextTypeEnum.ValidationError,
+          subType: TranslationTextSubTypeEnum.UploadSizeLimit,
+        },
+        formId,
+      )
+      return errorMsg ?? 'File is too large!'
+    }
   }
 
   return null

package/src/components/form/layout-renderer/3-element/8-fields-with-options.tsx

@@ -1,5 +1,10 @@
 import { memo, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { PageViewTypEnum, FieldElementOptionSourceEnum, FilterConfigTypeEnum } from '../../../../enums'
+import {
+  PageViewTypEnum,
+  FieldElementOptionSourceEnum,
+  FilterConfigTypeEnum,
+  TranslationTextTypeEnum,
+} from '../../../../enums'
 import { IElementBaseProps } from '.'
 import { LayoutRenderer_FieldElement } from './2-field-element'
 import { getElementGeneralizedProps } from '../../../../functions/forms/get-element-props'
@@ -24,13 +29,16 @@ import {
   ISelectElement,
   ISelectElementProps,
 } from '../../../../types'
+import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
 
 function LayoutRenderer_FieldsWithOptions({
   formContext,
   formItem,
   elementData,
   isDisabled,
+  elementKey,
 }: ILayoutRenderer_FieldsWithOptions) {
+  const { t } = useTranslation(formContext.formId)
   const navigate = useNavigate()
   const { getFormById } = useFindDynamiForm()
 
@@ -194,7 +202,12 @@ function LayoutRenderer_FieldsWithOptions({
     if (!props.optionSource) return
 
     if (props.optionSource.type === FieldElementOptionSourceEnum.Static) {
-      setOptions(props.optionSource.options.map((op: IFormLayoutFieldOption) => ({ value: op.id, label: op.value })))
+      setOptions(
+        props.optionSource.options.map((op: IFormLayoutFieldOption) => ({
+          value: op.id,
+          label: t({ key: elementKey, type: TranslationTextTypeEnum.OptionValue, subType: op.id }),
+        })),
+      )
       setLoading(false)
     } else {
       switch (props.optionSource.type) {
@@ -213,7 +226,7 @@ function LayoutRenderer_FieldsWithOptions({
           return
       }
     }
-  }, [props.optionSource, fetchLinkedFormData, fetchFormData, cachedConfig])
+  }, [props.optionSource, fetchLinkedFormData, fetchFormData, cachedConfig, elementKey])
 
   useEffect(() => {
     return () => {
@@ -223,14 +236,20 @@ function LayoutRenderer_FieldsWithOptions({
     }
   }, [])
 
+  const [label, placeholder] = t([
+    { key: elementData.key, type: TranslationTextTypeEnum.Label },
+    { key: elementData.key, type: TranslationTextTypeEnum.Placeholder },
+  ])
+
   return (
     <div className="relative">
-      <LayoutRenderer_FieldElement formRef={formRef}>
+      <LayoutRenderer_FieldElement formRef={formRef} elementKey={elementData.key} formId={formContext.formId}>
         {() => ({
           ...props,
-          label: props.label && (
+          placeholder,
+          label: label && (
             <div className="flex items-center gap-2 w-full">
-              <span>{props.label}</span>
+              <span>{label}</span>
               {(props as ISelectElementProps).goToDetails?.enabled &&
                 (props as ISelectElementProps).goToDetails?.text &&
                 selectedValue && (

package/src/components/form/layout-renderer/3-element/9-form-data-render.tsx

@@ -14,6 +14,7 @@ import {
   IFormRelationshipConfig,
   IFormRelationshipConfig_OneToMany,
 } from '../../../../types'
+import { translationStore } from '../../../common/custom-hooks/use-translation.hook/store'
 
 function LayoutRenderer_LoadFormData({ formContext, elementProps }: ILayoutRenderer_LoadFormData) {
   const { formId, formRef, formDataId } = formContext
@@ -68,6 +69,12 @@ function LayoutRenderer_LoadFormData({ formContext, elementProps }: ILayoutRende
     [joins, baseFormId, initialFilter],
   )
 
+  useEffect(() => {
+    if (!cachedConfig?.id || !cachedConfig?.translations) return
+
+    translationStore.setTranslations(cachedConfig.id, cachedConfig.translations)
+  }, [cachedConfig])
+
   useEffect(() => {
     if (isNewFormDataPage(formDataId) || !cachedConfig) return
 

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

@@ -1,13 +1,14 @@
 import { Divider, Spin } from 'antd'
 import { lazy, memo, ReactElement, useMemo } from 'react'
 import { getElementGeneralizedProps } from '../../../../functions/forms/get-element-props'
-import { ElementTypeEnum, TextElementTypeEnum } from '../../../../enums'
+import { ElementTypeEnum, TextElementTypeEnum, TranslationTextTypeEnum } from '../../../../enums'
 import useGetCurrentBreakpoint from '../../../common/custom-hooks/use-window-width.hook'
 import { findMaxAndMinValues, kebabCaseToCamelCase } from '../../../../functions/forms'
 import { IFormContext } from '../1-row'
 import { LayoutRenderer_FieldElement } from './2-field-element'
 import { IDynamicButton_DisplayStateProps } from './1-dynamic-button'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
+import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
 import {
   useIsNodeDisabled,
   useIsNodeHidden,
@@ -17,7 +18,6 @@ import {
   IFormDataLoadElementProps,
   IDndLayoutElement,
   IReadFieldDataElementProps,
-  IBreadcrumbElementProps,
   IFileUploadElement,
   IReadFieldDataElement,
   ITextElement,
@@ -37,6 +37,7 @@ const LayoutRenderer_LoadFormData = lazy(() => import('./9-form-data-render'))
 const LayoutRenderer_CurrencyField = lazy(() => import('./10-currency'))
 const LayoutRenderer_Breadcrumb = lazy(() => import('./11-breadcrumb'))
 const LayoutRenderer_PickerField = lazy(() => import('./12-picker-field'))
+const LayoutRenderer_LanguageSelector = lazy(() => import('./13-language-selector'))
 
 interface ILayoutRendererElement {
   basePath: (string | number)[]
@@ -46,18 +47,20 @@ interface ILayoutRendererElement {
   renderButton?: (props: IDynamicButton_DisplayStateProps) => ReactElement
 }
 
-function LayoutRendererElementWrapper({ ...restProps }: ILayoutRendererElement) {
-  const isHidden = useIsNodeHidden(restProps.elementData.key)
+function LayoutRendererElementWrapper(props: ILayoutRendererElement) {
+  const { t } = useTranslation(props.formContext.formId)
+  const isHidden = useIsNodeHidden(props.elementData.key)
 
+  const description = t({ key: props.elementData.key, type: TranslationTextTypeEnum.Description })
   return (
     <div
       className={`${ELEMENTS_DEFAULT_CLASS.ElementContainer} flex flex-col ${isHidden ? 'hidden' : ''}`}
-      id={restProps.elementData.key}
+      id={props.elementData.key}
     >
-      <LayoutRendererElement {...restProps} />
-      {restProps.elementData.props && 'description' in restProps.elementData.props && (
+      <LayoutRendererElement {...props} />
+      {description && (
         <span className={`${ELEMENTS_DEFAULT_CLASS.ElementDescription} text-neutral text-12 italic`}>
-          {restProps.elementData.props.description}
+          {description}
         </span>
       )}
     </div>
@@ -76,6 +79,7 @@ function LayoutRendererElement({
   const currentBreakpoint = useGetCurrentBreakpoint()
   const props = getElementGeneralizedProps(elementData.props)
   const { elementType, key, validations } = elementData
+  const { t } = useTranslation(formContext.formId)
   const { maxValue, minValue } = useMemo(() => findMaxAndMinValues(validations), [validations])
   const isElementDisabled = useIsNodeDisabled(key)
 
@@ -89,9 +93,17 @@ function LayoutRendererElement({
   }, [basePath, key])
 
   const elementBaseProps = useMemo(
-    () => ({ formItem: { name: formItemName, path: fullPath }, isDisabled: isElementDisabled }),
-    [formItemName, fullPath, isElementDisabled],
+    () => ({
+      formItem: { name: formItemName, path: fullPath },
+      isDisabled: isElementDisabled,
+      elementKey: key,
+    }),
+    [formItemName, fullPath, isElementDisabled, key],
   )
+  const [label, placeholder] = t([
+    { key, type: TranslationTextTypeEnum.Label },
+    { key, type: TranslationTextTypeEnum.Placeholder },
+  ])
 
   const renderers: Partial<Record<ElementTypeEnum, () => ReactElement>> = {
     [ElementTypeEnum.RichTextEditor]: () => {
@@ -140,12 +152,13 @@ function LayoutRendererElement({
         elementProps={props as IReadFieldDataElementProps}
         style={(elementData as IReadFieldDataElement).style?.[currentBreakpoint]}
         formContext={formContext}
+        {...elementBaseProps}
       />
     ),
 
     [ElementTypeEnum.Divider]: () => (
       <Divider className="m-0" orientation={props.labelPlacement}>
-        {props.label && <span className="text-12">{props.label}</span>}
+        {label && <span className="text-12">{label}</span>}
       </Divider>
     ),
 
@@ -157,13 +170,13 @@ function LayoutRendererElement({
       if (props.type === TextElementTypeEnum.Plain)
         return (
           <div style={textStyle}>
-            {props.label}{' '}
+            {label}{' '}
             {(typeof dataCount === 'number' || dataCount === 'pending') && (
               <>{dataCount === 'pending' ? <Spin size="small" /> : `(${dataCount})`}</>
             )}
           </div>
         )
-      return <div dangerouslySetInnerHTML={{ __html: props.label }} style={textStyle} />
+      return <div dangerouslySetInnerHTML={{ __html: label }} style={textStyle} />
     },
 
     [ElementTypeEnum.Select]: () => (
@@ -198,7 +211,7 @@ function LayoutRendererElement({
       />
     ),
 
-    [ElementTypeEnum.Breadcrumb]: () => <LayoutRenderer_Breadcrumb elementProps={props as IBreadcrumbElementProps} />,
+    [ElementTypeEnum.Breadcrumb]: () => <LayoutRenderer_Breadcrumb formId={formContext.formId} {...elementBaseProps} />,
 
     [ElementTypeEnum.Placeholder]: () => <div />,
 
@@ -225,15 +238,21 @@ function LayoutRendererElement({
         {...elementBaseProps}
       />
     ),
+
+    [ElementTypeEnum.LanguageSwitch]: () => (
+      <LayoutRenderer_LanguageSelector formId={formContext.formId} {...elementBaseProps} />
+    ),
   }
 
   const renderer = renderers[elementType]
   return renderer ? (
     renderer()
   ) : (
-    <LayoutRenderer_FieldElement formRef={formContext.formRef}>
+    <LayoutRenderer_FieldElement formRef={formContext.formRef} elementKey={key} formId={formContext.formId}>
       {() => ({
         ...props,
+        label,
+        placeholder,
         numberFieldMax: maxValue,
         numberFieldMin: minValue,
         type: elementType,
@@ -250,4 +269,5 @@ function LayoutRendererElement({
 export interface IElementBaseProps {
   formItem: { name: string | (string | number)[]; path: string | (string | number)[] }
   isDisabled: boolean
+  elementKey: string
 }

package/src/constants.ts

@@ -133,7 +133,7 @@ export const DEFAULT_CONFIG = {
   },
   siteIdentity: { logoUrl: '/favicon.png', iconUrl: '/favicon.png', title: 'Site Title' },
   siteMenus: [],
-  siteLanguages: [{ value: 'en', label: 'English', defaultSelected: true }],
+  siteLanguages: [{ value: CountryEnum.US, label: 'English', defaultSelected: true }],
   loginLayout: {
     layout: 'center',
     backgroundType: 'color',
@@ -182,6 +182,7 @@ export const DEFAULT_FORM_SCHEMA_DATA: IFormSchema = {
   },
   generateConfig: { submissionPdf: { enabled: false } },
   relationships: [],
+  translations: {},
 }
 export const REACT_QUERY_CLIENT = new QueryClient({
   defaultOptions: {

package/src/enums/index.ts

@@ -36,6 +36,7 @@ export enum ElementTypeEnum {
   OrderedList = 'OrderedList',
   UnorderedList = 'UnorderedList',
   Image = 'Image',
+  LanguageSwitch = 'LanguageSwitch',
 }
 export enum TextElementTypeEnum {
   Plain = 'Plain',
@@ -63,6 +64,10 @@ export enum LOCAL_STORAGE_KEYS_ENUM {
   Breadcrumb = '83dead30755d4b2555a44a62c1de87a7',
   DisabledElements = '46ef33c492a6abccc4c89dcb485ffdf9',
   HiddenElements = 'c268df125295ca301609b3984d370c3e',
+  Languages = '63597792947dcaed2025e9b61aa57e88',
+  SelectedLanguage = 'b7cce86301b745f05631bf5c24524e23',
+  DefaultLanguage = '848ec029fe071913b5cfa0231493eff3',
+  FormTranslations = 'adeac05cba725ab79bf7075a66db6c05',
 }
 export enum CountryEnum {
   US = 'us',
@@ -109,3 +114,26 @@ export enum RelationalOperatorsEnum {
   In = '@in',
   NotIn = '@nin',
 }
+export enum TranslationTextTypeEnum {
+  Label = 'L',
+  Placeholder = 'P',
+  Description = 'D',
+  ValidationError = 'VE',
+  OptionValue = 'OP',
+}
+export enum TranslationTextSubTypeEnum {
+  RepeatButtonAdd = 'RepeatAdd',
+  RepeatButtonRemove = 'RepeatRemove',
+  Secondary = '2',
+  UploadFileType = 'FileType',
+  UploadSizeLimit = 'SizeLimit',
+  BreadcrumbDetail = 'Detail',
+  BreadcrumbNew = 'New',
+  BreadcrumbList = 'List',
+  ConfirmationMsg = 'BtnConfMsg',
+  ConfirmationOk = 'BtnConfOk',
+  ConfirmationCancel = 'BtnConfCcl',
+  SuccessMsg = 'BtnSucMsg',
+  ErrorMsg = 'BtnErrMsg',
+  ButtonsGroup = 'BtnsGroup',
+}