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

package/package.json

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

package/src/components/common/custom-hooks/index.ts

@@ -4,3 +4,4 @@ export * from './use-lazy-modal-opener.hook'
 export * from './use-breadcrumb.hook'
 export * from './use-dayjs-extender.hook'
 export * from './use-set-persistent-domain.hook'
+export * from './use-translation.hook/hook'

package/src/components/common/custom-hooks/use-translation.hook/hook.ts

@@ -0,0 +1,28 @@
+import { useCallback } from 'react'
+import { useSyncExternalStore } from 'react'
+import { translationStore } from './store'
+import { TranslationTextTypeEnum } from '../../../../enums'
+
+export interface ITranslateFuncParam {
+  key?: string
+  type: TranslationTextTypeEnum
+  subType?: string
+}
+
+export function useTranslation(formId?: number) {
+  const { selectedLanguage, translations } = useSyncExternalStore(
+    translationStore.subscribe.bind(translationStore),
+    translationStore.getSnapshot.bind(translationStore),
+  )
+
+  const t = useCallback(
+    (params: ITranslateFuncParam | ITranslateFuncParam[]) => {
+      if (Array.isArray(params)) return params.map((p) => (p.key ? translationStore.translate(p, formId) : ''))
+
+      return params.key ? translationStore.translate(params, formId) : ''
+    },
+    [selectedLanguage, translations, formId],
+  )
+
+  return { t, selectedLanguage }
+}

package/src/components/common/custom-hooks/use-translation.hook/store.ts

@@ -0,0 +1,130 @@
+import { CountryEnum, LOCAL_STORAGE_KEYS_ENUM } from '../../../../enums'
+import { ITranslations } from '../../../../types'
+import { ITranslateFuncParam } from './hook'
+
+interface Snapshot {
+  selectedLanguage: string
+  translations: ITranslations
+}
+
+type Listener = () => void
+const listeners = new Set<Listener>()
+
+// —— Monkey-patch localStorage.setItem to fire translationUpdate & storage events ——
+;(function () {
+  const originalSetItem = localStorage.setItem
+  localStorage.setItem = function (key: string, value: string) {
+    const oldValue = localStorage.getItem(key)
+    originalSetItem.call(this, key, value)
+    if (key === LOCAL_STORAGE_KEYS_ENUM.SelectedLanguage || key === LOCAL_STORAGE_KEYS_ENUM.FormTranslations) {
+      // fire native StorageEvent for useSyncExternalStore cross-tab compatibility
+      window.dispatchEvent(
+        new StorageEvent('storage', {
+          key,
+          oldValue,
+          newValue: value,
+          storageArea: localStorage,
+          url: window.location.href,
+        }),
+      )
+      // fire custom update for same-tab subscribers
+      window.dispatchEvent(new Event('translationUpdate'))
+    }
+  }
+})()
+
+// —— Internal cache for memoized snapshots ——
+let lastLanguage = ''
+let lastRaw = ''
+let lastTranslations: ITranslations = {}
+let lastSnapshot: Snapshot = { selectedLanguage: '', translations: {} }
+
+function readLanguage(): string {
+  return localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.SelectedLanguage) ?? ''
+}
+
+function readRawTranslations(): string {
+  return localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.FormTranslations) ?? ''
+}
+
+function parseTranslations(raw: string): ITranslations {
+  try {
+    return raw ? JSON.parse(raw) : {}
+  } catch {
+    console.error('[translationStore] invalid JSON in FormTranslations')
+    return {}
+  }
+}
+
+function notifyAll() {
+  listeners.forEach((fn) => fn())
+}
+
+// Cross-tab storage events
+window.addEventListener('storage', (e) => {
+  if (
+    e.storageArea === localStorage &&
+    (e.key === LOCAL_STORAGE_KEYS_ENUM.SelectedLanguage || e.key === LOCAL_STORAGE_KEYS_ENUM.FormTranslations)
+  ) {
+    notifyAll()
+  }
+})
+// Same-tab custom events
+window.addEventListener('translationUpdate', notifyAll)
+
+export const translationStore = {
+  getSnapshot(): Snapshot {
+    const currentLanguage = readLanguage()
+    const currentRaw = readRawTranslations()
+
+    if (currentLanguage !== lastLanguage || currentRaw !== lastRaw) {
+      lastLanguage = currentLanguage
+      lastRaw = currentRaw
+      lastTranslations = parseTranslations(currentRaw)
+      lastSnapshot = { selectedLanguage: lastLanguage, translations: lastTranslations }
+    }
+
+    return lastSnapshot
+  },
+
+  subscribe(fn: Listener): () => void {
+    listeners.add(fn)
+    return () => {
+      listeners.delete(fn)
+    }
+  },
+
+  translate({ key = '', type, subType }: ITranslateFuncParam, formId?: number): string {
+    const { selectedLanguage, translations } = this.getSnapshot()
+    const formTranslations = formId ? (translations[formId] as ITranslations) : undefined
+    const lookup = `${key}__${type}${subType ? `__${subType}` : ''}`
+
+    if (formTranslations && selectedLanguage) {
+      const lookupTranslation = formTranslations[lookup]
+      const inSelected = lookupTranslation?.[selectedLanguage as CountryEnum]
+      if (inSelected) return inSelected
+
+      // fallback to default language
+      const defaultLang = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.DefaultLanguage)
+      return lookupTranslation?.[defaultLang as CountryEnum] ?? ''
+    }
+    return ''
+  },
+
+  getLanguages() {
+    const languages = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.Languages)
+
+    if (languages) return JSON.parse(languages)
+    return []
+  },
+
+  setTranslations(formId: number, obj: ITranslations) {
+    const raw = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.FormTranslations) || ''
+    const parsed = raw ? JSON.parse(raw) : {}
+    localStorage.setItem(LOCAL_STORAGE_KEYS_ENUM.FormTranslations, JSON.stringify({ ...parsed, [formId]: obj }))
+  },
+
+  setLanguage(lang: CountryEnum) {
+    localStorage.setItem(LOCAL_STORAGE_KEYS_ENUM.SelectedLanguage, lang)
+  },
+}

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

@@ -7,6 +7,7 @@ import { IFormJoin, IFormDataListData, IFormDataListConfig } from '../../../type
 import { getProjectionKey, mergeJoins } from '../../../functions'
 import { useCacheFormLayoutConfig } from '../../common/custom-hooks/use-cache-form-layout-config.hook'
 import { useNotification } from '../../common/custom-hooks'
+import { translationStore } from '../../common/custom-hooks/use-translation.hook/store'
 
 export function FormDataListComponent({
   formId,
@@ -41,6 +42,12 @@ export function FormDataListComponent({
     defaultFilterReqDataRef.current = undefined
   }, [location.pathname])
 
+  useEffect(() => {
+    if (!cachedConfig?.id || !cachedConfig?.translations) return
+
+    translationStore.setTranslations(cachedConfig.id, cachedConfig.translations)
+  }, [cachedConfig])
+
   useEffect(() => {
     if (!formId || !cachedConfig) return
 

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

@@ -33,6 +33,7 @@ import {
   isValidMongoDbId,
   queryParamsToObject,
 } from '../../../functions/forms'
+import { translationStore } from '../../common/custom-hooks/use-translation.hook/store'
 
 export default function FormDataDetailsComponent({
   isPublic,
@@ -133,6 +134,12 @@ export default function FormDataDetailsComponent({
     [formDataId, formDataRef],
   )
 
+  useEffect(() => {
+    if (!cachedConfig?.id || !cachedConfig?.translations) return
+
+    translationStore.setTranslations(cachedConfig.id, cachedConfig.translations)
+  }, [cachedConfig])
+
   useEffect(() => {
     if (!cachedConfig?.detailsConfig) return
 

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

@@ -2,17 +2,26 @@ import { ReactNode, useState, useTransition } from 'react'
 import { IFormDndLayoutRowHeader } from '../../../../types'
 import { Collapse, Spin } from 'antd'
 import RowHeader from './header'
+import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
+import { TranslationTextTypeEnum } from '../../../../enums'
 
 export const LayoutRowConditionalHeaderRenderer = ({
+  formId,
   children,
   header,
+  rowId,
 }: {
+  formId?: number
   children: ReactNode
   header: IFormDndLayoutRowHeader | undefined
+  rowId: string
 }) => {
+  const { t } = useTranslation(formId)
   const [isCollapsed, setIsCollapsed] = useState(false)
   const [isPendingTransition, startTransition] = useTransition()
 
+  const headerTitle = t({ key: rowId, type: TranslationTextTypeEnum.Label })
+
   if (header?.isCollapsible)
     return (
       <Spin spinning={isPendingTransition}>
@@ -26,6 +35,7 @@ export const LayoutRowConditionalHeaderRenderer = ({
               label: (
                 <RowHeader
                   {...header}
+                  name={headerTitle as string}
                   isCollapsed={isCollapsed}
                   setIsCollapsed={() => startTransition(() => setIsCollapsed((c) => !c))}
                 />
@@ -37,10 +47,10 @@ export const LayoutRowConditionalHeaderRenderer = ({
       </Spin>
     )
 
-  if (header?.name)
+  if (headerTitle)
     return (
       <>
-        <RowHeader {...header} />
+        <RowHeader {...header} name={headerTitle as string} />
         {children}
       </>
     )

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

@@ -35,6 +35,7 @@ export default function RowHeader({
 }
 
 interface IRowHeader extends IFormDndLayoutRowHeader {
+  name: string
   isCollapsed?: boolean
   setIsCollapsed?: () => void
 }

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

@@ -27,8 +27,14 @@ export const LayoutRendererRow = memo(
         id={rowData.id}
         className={ELEMENTS_DEFAULT_CLASS.LayoutRowContainer}
       >
-        <LayoutRowConditionalHeaderRenderer header={rowData.props?.header}>
+        <LayoutRowConditionalHeaderRenderer
+          formId={formContext.formId}
+          rowId={rowData.id}
+          header={rowData.props?.header}
+        >
           <LayoutRowRepeatableRenderer
+            formId={formContext.formId}
+            rowId={rowData.id}
             basePath={basePath}
             formRef={formContext.formRef}
             repeatingSection={rowData.props?.repeatingSection}

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

@@ -5,23 +5,37 @@ import { FaTimes } from 'react-icons/fa'
 import { FaPlus } from 'react-icons/fa6'
 import { getButtonRenderProps } from '../../../../functions/forms/get-element-props'
 import { useNotification } from '../../../common/custom-hooks'
-import { RepeatingSectionTabTitleTypeEnum } from '../../../../enums'
+import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
+import {
+  RepeatingSectionTabTitleTypeEnum,
+  TranslationTextSubTypeEnum,
+  TranslationTextTypeEnum,
+} from '../../../../enums'
 
 /** This component return its children as function to feed the children with dynamic base path */
 export const LayoutRowRepeatableRenderer = ({
   children,
+  formId,
+  rowId,
   formRef,
   basePath,
   repeatingSection,
 }: {
   children: (props?: { updatedBasePath: (string | number)[]; removeButton: JSX.Element }) => JSX.Element
+  formId?: number
+  rowId: string
   formRef?: FormInstance
   basePath: (string | number)[]
   repeatingSection: IRepeatingSectionConfig | undefined
 }) => {
+  const { t } = useTranslation(formId)
   const { confirmModal } = useNotification()
 
   if (!!repeatingSection?.name) {
+    const [addButtonLabel, removeButtonLabel] = t([
+      { key: rowId, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.RepeatButtonAdd },
+      { key: rowId, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.RepeatButtonRemove },
+    ])
     return (
       <Form.List name={[...basePath, repeatingSection.name]} initialValue={[{}]}>
         {(repeatItems, { add, remove }) => (
@@ -36,7 +50,7 @@ export const LayoutRowRepeatableRenderer = ({
                   {...getButtonRenderProps(repeatingSection.addButton ?? ({} as IButtonPropsBase))}
                   onClick={() => add()}
                 >
-                  {repeatingSection.addButton?.label ?? <FaPlus className="text-primary" />}
+                  {addButtonLabel ?? <FaPlus className="text-primary" />}
                 </Button_FillerPortal>
               ),
             }}
@@ -73,7 +87,7 @@ export const LayoutRowRepeatableRenderer = ({
                                 })
                               }
                             >
-                              {repeatingSection.removeButton?.label || <FaTimes className="text-danger" />}
+                              {removeButtonLabel || <FaTimes className="text-danger" />}
                             </Button_FillerPortal>
                           </div>
                         ) : (

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

@@ -1,5 +1,5 @@
 import { useFindDynamiForm, useNotification } from '../../../../common/custom-hooks'
-import { memo, useCallback, useState } from 'react'
+import { memo, useCallback, useMemo, useState } from 'react'
 import { useFormPreservedItemValues } from '../../../../common/custom-hooks/use-preserved-form-items.hook'
 import { useDuplicateDataAction } from './use-duplicate-data.hook'
 import { useDeleteDataAction } from './use-delete-data.hook'
@@ -13,12 +13,18 @@ import { getButtonRenderProps } from '../../../../../functions/forms/get-element
 import WarningIcon from '../../../../common/warning-icon'
 import FormDataLoadingIndicatorModal from '../../../../modals/form-data-loading.modal'
 import { IFormContext } from '../../1-row'
-import { ButtonActionCategoryEnum, FormLoadingModalTypeEnum } from '../../../../../enums'
+import {
+  ButtonActionCategoryEnum,
+  FormLoadingModalTypeEnum,
+  TranslationTextSubTypeEnum,
+  TranslationTextTypeEnum,
+} from '../../../../../enums'
 import { useButtonNavigateAction } from './use-button-navigate.hook'
 import { constructDynamicFormHref, isNewFormDataPage } from '../../../../../functions'
 import { useCustomFunctionCallAction } from './use-custom-function-call.hook'
 import { IButtonElementProps, IButtonProps_Other, IButtonProps_Navigate } from '../../../../../types'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../../../constants'
+import { useTranslation } from '../../../../common/custom-hooks/use-translation.hook/hook'
 import {
   useIsNodeDisabled,
   useIsNodeHidden,
@@ -35,6 +41,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
   const [dataLoadingType, setDataLoadingType] = useState<FormLoadingModalTypeEnum | undefined>()
   const { isPublic = false, submissionPdfConfig } = useFormPreservedItemValues(formRef)
 
+  const { t } = useTranslation(formContext.formId)
   const isElementHidden = useIsNodeHidden(btnKey)
   const isElementDisabled = useIsNodeDisabled(btnKey)
 
@@ -42,12 +49,23 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
   formContext.formId = btnProps.formId
   formContext.formName = formInfo?.name
 
+  const [content, okText, cancelText, successMsg, errorMsg] = useMemo(
+    () =>
+      t([
+        { key: btnKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.ConfirmationMsg },
+        { key: btnKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.ConfirmationOk },
+        { key: btnKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.ConfirmationCancel },
+        { key: btnKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.SuccessMsg },
+        { key: btnKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.ErrorMsg },
+      ]),
+    [btnKey],
+  )
+
   const displayResultMessage = useCallback(
     (isSuccess: boolean = true) => {
-      if (!btnProps.messages) return
-      isSuccess ? success({ message: btnProps.messages.success }) : error({ message: btnProps.messages.error })
+      isSuccess ? successMsg && success({ message: successMsg }) : errorMsg && error({ message: errorMsg })
     },
-    [btnProps.messages, success, error],
+    [successMsg, errorMsg, success, error],
   )
 
   const onButtonNavigate = useButtonNavigateAction({
@@ -75,7 +93,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
       const { category } = btnProps.secondaryAction
       if (category === ButtonActionCategoryEnum.Navigate) onButtonNavigate(btnProps.secondaryAction)
       else if (category === ButtonActionCategoryEnum.CustomFunction) {
-        onFunctionCall(btnProps.secondaryAction.functionName, btnProps.messages ?? defaultMessage)
+        onFunctionCall(btnProps.secondaryAction.functionName)
         setTimeout(() => setLoading(false), 500)
       }
     },
@@ -189,7 +207,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
         break
 
       case ButtonActionCategoryEnum.CustomFunction:
-        onFunctionCall(btnProps.functionName, btnProps.messages)
+        onFunctionCall(btnProps.functionName)
         setTimeout(() => setLoading(false), 500)
         break
 
@@ -236,11 +254,11 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
           e.stopPropagation()
           setLoading(true)
 
-          if (btnProps.confirmation?.enabled) {
+          if (btnProps.confirmationEnabled) {
             confirmModal({
-              content: btnProps.confirmation.message,
-              okText: btnProps.confirmation.okLabel,
-              cancelText: btnProps.confirmation.cancelLabel,
+              content,
+              okText,
+              cancelText,
               onOk: handleButtonClick,
             })
           } else handleButtonClick()
@@ -251,13 +269,13 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
           btnProps.category !== ButtonActionCategoryEnum.SaveDataChanges && (
             <WarningIcon tooltip={BUTTON_CUSTOM_ERROR_MESSAGES.UnavailableForPublic} />
           )}
-        {btnProps.label}
+        {t({ key: btnKey, type: TranslationTextTypeEnum.Label })}
       </Button_FillerPortal>
       {!!dataLoadingType && (
         <FormDataLoadingIndicatorModal
           currentType={dataLoadingType}
           closeModal={() => setDataLoadingType(undefined)}
-          errorMessage={btnProps.messages?.error}
+          errorMessage={errorMsg}
         />
       )}
       {ChooseTemplateReportModal}
@@ -288,7 +306,7 @@ export interface IOnSuccessFunctions {
   onFinal: () => void
 }
 
-const defaultMessage = { success: 'Successfully completed!', error: 'Error occured' }
+// const defaultMessage = { success: 'Successfully completed!', error: 'Error occured' }
 
 export const BUTTON_CUSTOM_ERROR_MESSAGES = {
   DataIdNotFound: 'Data id was not found!',

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

@@ -6,13 +6,17 @@ import { getElementGeneralizedProps } from '../../../../functions/forms/get-elem
 import { Form } from 'antd'
 import { memo, useEffect, useMemo } from 'react'
 import { evaluateValue } from '../../../../functions/forms/evaluate-value'
+import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
+import { TranslationTextTypeEnum } from '../../../../enums'
 
 function LayoutRenderer_CurrencyField({
   formContext,
   formItem,
   elementData,
   isDisabled,
+  elementKey,
 }: ILayoutRenderer_CurrencyField) {
+  const { t } = useTranslation(formContext.formId)
   const { formRef } = formContext
   const props = getElementGeneralizedProps(elementData.props)
 
@@ -30,10 +34,17 @@ function LayoutRenderer_CurrencyField({
     if (evaluatedValue > -1 && isDisabled) formRef?.setFieldValue(formItem.path, evaluatedValue)
   }, [evaluatedValue, isDisabled, formItem.path])
 
+  const [label, placeholder] = t([
+    { key: elementKey, type: TranslationTextTypeEnum.Label },
+    { key: elementKey, type: TranslationTextTypeEnum.Placeholder },
+  ])
+
   return (
-    <LayoutRenderer_FieldElement formRef={formRef}>
+    <LayoutRenderer_FieldElement formRef={formRef} elementKey={elementData.key} formId={formContext.formId}>
       {() => ({
         ...props,
+        label,
+        placeholder,
         type: elementData.elementType,
         name: formItem.name,
         validations: elementData.validations,

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

@@ -3,14 +3,22 @@ import { Button_FillerPortal } from '../../../common/button'
 import { useNavigate } from 'react-router-dom'
 import { FaChevronRight } from 'react-icons/fa6'
 import React, { memo } from 'react'
-import { PageViewTypEnum } from '../../../../enums'
-import { IBreadcrumbElementProps } from '../../../../types'
+import { PageViewTypEnum, TranslationTextSubTypeEnum, TranslationTextTypeEnum } from '../../../../enums'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
+import { IElementBaseProps } from '.'
+import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
 
-function LayoutRenderer_Breadcrumb({ elementProps }: { elementProps: IBreadcrumbElementProps }) {
+function LayoutRenderer_Breadcrumb({ formId, elementKey }: { formId?: number } & IElementBaseProps) {
+  const { t } = useTranslation(formId)
   const navigate = useNavigate()
   const { breadcrumbs, sliceAt } = useBreadcrumb()
 
+  const [detailText, newText, listText] = t([
+    { key: elementKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.BreadcrumbDetail },
+    { key: elementKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.BreadcrumbNew },
+    { key: elementKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.BreadcrumbList },
+  ])
+
   return (
     <div className={`${ELEMENTS_DEFAULT_CLASS.Breadcrumb} flex items-center text-12`}>
       {breadcrumbs.map((bc, bcIdx) => (
@@ -24,12 +32,12 @@ function LayoutRenderer_Breadcrumb({ elementProps }: { elementProps: IBreadcrumb
             }}
           >
             <span className="font-normal italic">
-              {bc.type === PageViewTypEnum.New ? `${elementProps.newText} ` : ''}
+              {bc.type === PageViewTypEnum.New ? `${newText} ` : ''}
               {bc.label}
               {bc.type === PageViewTypEnum.Details
-                ? ` ${elementProps.detailText}`
+                ? ` ${detailText}`
                 : bc.type === PageViewTypEnum.List
-                ? ` ${elementProps.listText}`
+                ? ` ${listText}`
                 : ''}
             </span>
           </Button_FillerPortal>

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

@@ -3,24 +3,28 @@ import { IFormContext } from '../1-row'
 import { IPickerElement } from '../../../../types'
 import { IElementBaseProps } from '.'
 import { getElementGeneralizedProps } from '../../../../functions/forms/get-element-props'
-import { ElementTypeEnum } from '../../../../enums'
+import { ElementTypeEnum, TranslationTextSubTypeEnum, TranslationTextTypeEnum } from '../../../../enums'
 import { memo, useMemo } from 'react'
 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'
 
 function LayoutRenderer_PickerField({ formContext, formItem, elementData, isDisabled }: ILayoutRenderer_PickerField) {
+  const { t } = useTranslation(formContext.formId)
   const props = getElementGeneralizedProps(elementData.props)
 
-  const placeholder =
-    props.elementType === ElementTypeEnum.RangePicker && props.placeholder2
-      ? [props.placeholder, props.placeholder2]
-      : props.placeholder
+  const [placeholder1, placeholder2] = t([
+    { key: elementData.key, type: TranslationTextTypeEnum.Placeholder },
+    { key: elementData.key, type: TranslationTextTypeEnum.Placeholder, subType: TranslationTextSubTypeEnum.Secondary },
+  ])
+  const placeholder: string | [string, string] =
+    props.elementType === ElementTypeEnum.RangePicker && placeholder2 ? [placeholder1, placeholder2] : placeholder1
 
   let { maxValue, minValue } = useMemo(() => findMaxAndMinValues(elementData.validations), [elementData.validations])
 
   return (
-    <LayoutRenderer_FieldElement formRef={formContext.formRef}>
+    <LayoutRenderer_FieldElement formRef={formContext.formRef} elementKey={elementData.key} formId={formContext.formId}>
       {() => ({
         ...props,
         placeholder,

package/src/components/form/layout-renderer/3-element/13-language-selector.tsx

@@ -0,0 +1,42 @@
+import { IElementBaseProps } from '.'
+import { CountryEnum, LOCAL_STORAGE_KEYS_ENUM, TranslationTextTypeEnum } from '../../../../enums'
+import { memo, useEffect, useState } from 'react'
+import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
+import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
+import { translationStore } from '../../../common/custom-hooks/use-translation.hook/store'
+import { Select } from 'antd'
+import { FaCaretDown } from 'react-icons/fa6'
+
+function LayoutRenderer_LanguageSelector({ formId, isDisabled, elementKey }: ILayoutRenderer_LanguageSelector) {
+  const { t } = useTranslation(formId)
+  const [languages, setLanguages] = useState<{ value: CountryEnum; label: string }[]>([])
+
+  useEffect(() => {
+    setLanguages(translationStore.getLanguages())
+  }, [])
+
+  const [label, placeholder] = t([
+    { key: elementKey, type: TranslationTextTypeEnum.Label },
+    { key: elementKey, type: TranslationTextTypeEnum.Placeholder },
+  ])
+
+  return (
+    <div className="flex flex-col min-w-max">
+      {label && <span>{label}</span>}
+      <Select
+        placeholder={placeholder}
+        suffixIcon={<FaCaretDown />}
+        options={languages}
+        defaultValue={localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.SelectedLanguage)}
+        disabled={isDisabled}
+        allowClear={false}
+        className={`${ELEMENTS_DEFAULT_CLASS.Select} min-w-max`}
+        onChange={(lang) => translationStore.setLanguage(lang as CountryEnum)}
+      />
+    </div>
+  )
+}
+
+export default memo(LayoutRenderer_LanguageSelector)
+
+type ILayoutRenderer_LanguageSelector = { formId?: number } & IElementBaseProps