diff --git a/packages/client/src/app/components/form-controls/control-types/field/field.tsx b/packages/client/src/app/components/form-controls/control-types/field/field.tsx index 6f8b2d0ad..b1dd18d3b 100644 --- a/packages/client/src/app/components/form-controls/control-types/field/field.tsx +++ b/packages/client/src/app/components/form-controls/control-types/field/field.tsx @@ -1,7 +1,9 @@ import { Dropdown } from "@components/elements/custom-dropdown/dropdown"; import { Control } from "@components/form-controls/control"; import type { ControlType } from "@components/form-controls/types"; +import type { RootState } from "@editor/store"; import { fieldSelectors } from "@editor/store/slices/layout/fields/fields.selectors"; +import { useSiteContext } from "@ff-client/contexts/site/site.context"; import { useFieldTypeSearch } from "@ff-client/queries/field-types"; import type { FieldProperty } from "@ff-client/types/properties"; import type React from "react"; @@ -15,6 +17,10 @@ const Field: React.FC> = ({ }) => { const fields = useSelector(fieldSelectors.all); const findType = useFieldTypeSearch(); + const { current: currentSite } = useSiteContext(); + const fieldTranslations = useSelector( + (state: RootState) => state.translations?.[currentSite?.id]?.fields, + ); const options = fields .filter((field) => { @@ -33,7 +39,9 @@ const Field: React.FC> = ({ }) .map((field) => ({ value: field.uid, - label: field.properties.label, + label: + (fieldTranslations?.[field.uid]?.label as string | undefined) ?? + field.properties.label, })); return ( diff --git a/packages/client/src/app/components/form-controls/control-types/namespaced/notifications/notification-template/modal/inputs/html-body/tokens/operations/suggestions.ts b/packages/client/src/app/components/form-controls/control-types/namespaced/notifications/notification-template/modal/inputs/html-body/tokens/operations/suggestions.ts index 72dc2360c..5c31bae14 100644 --- a/packages/client/src/app/components/form-controls/control-types/namespaced/notifications/notification-template/modal/inputs/html-body/tokens/operations/suggestions.ts +++ b/packages/client/src/app/components/form-controls/control-types/namespaced/notifications/notification-template/modal/inputs/html-body/tokens/operations/suggestions.ts @@ -1,4 +1,5 @@ import type { RootState } from "@editor/store"; +import { useSiteContext } from "@ff-client/contexts/site/site.context"; import type { Suggestion, SuggestionCategory, @@ -11,12 +12,21 @@ import type { TokenBackend } from "../tokens.types"; let fetchedSuggestions: SuggestionCategory[]; -const compileStoreSuggestions = (store: Store): Suggestion[] => { +const compileStoreSuggestions = ( + store: Store, + siteId?: number, +): Suggestion[] => { const fields: Suggestion[] = []; + const fieldTranslations = store.getState().translations?.[siteId]?.fields; + store.getState().layout.fields.forEach((field) => { + const label = + (fieldTranslations?.[field.uid]?.label as string | undefined) ?? + field.properties.label; + fields.push({ - shortName: field.properties.label, - name: field.properties.label, + shortName: label, + name: label, token: `fieldUids['${field.uid}']`, }); }); @@ -26,6 +36,7 @@ const compileStoreSuggestions = (store: Store): Suggestion[] => { export const useSuggestions = (backend: TokenBackend): SuggestionCategory[] => { const { store } = backend; + const { current: currentSite } = useSiteContext(); const [compiled, setCompiled] = useState([]); @@ -35,7 +46,7 @@ export const useSuggestions = (backend: TokenBackend): SuggestionCategory[] => { ...fetchedSuggestions, { name: "Fields", - items: compileStoreSuggestions(store), + items: compileStoreSuggestions(store, currentSite?.id), }, ]); } else { @@ -44,7 +55,7 @@ export const useSuggestions = (backend: TokenBackend): SuggestionCategory[] => { setCompiled(fetchedSuggestions); }); } - }, [store]); + }, [store, currentSite]); return compiled; }; diff --git a/packages/client/src/app/pages/forms/edit/builder/tabs/layout/property-editor/editors/fields/favorite/favorite.form.tsx b/packages/client/src/app/pages/forms/edit/builder/tabs/layout/property-editor/editors/fields/favorite/favorite.form.tsx index 5d5558e4e..9a1919a12 100644 --- a/packages/client/src/app/pages/forms/edit/builder/tabs/layout/property-editor/editors/fields/favorite/favorite.form.tsx +++ b/packages/client/src/app/pages/forms/edit/builder/tabs/layout/property-editor/editors/fields/favorite/favorite.form.tsx @@ -2,13 +2,16 @@ import { ApiErrorsBlock } from "@components/errors/api-errors"; import { ControlWrapper } from "@components/form-controls/control.styles"; import StringInput from "@components/form-controls/control-types/string/string"; import { LoadingText } from "@components/loaders/loading-text/loading-text"; +import type { RootState } from "@editor/store"; import type { Field } from "@editor/store/slices/layout/fields"; +import { useSiteContext } from "@ff-client/contexts/site/site.context"; import type { FieldType } from "@ff-client/types/fields"; import { PropertyType } from "@ff-client/types/properties"; import classes from "@ff-client/utils/classes"; import translate from "@ff-client/utils/translations"; import type React from "react"; import { useEffect, useState } from "react"; +import { useSelector } from "react-redux"; import { ButtonContainer, FavoriteFormWrapper } from "./favorite.form.styles"; import type { FavoriteMutationResult } from "./favorite.queries"; @@ -22,9 +25,17 @@ type Props = { export const FavoriteForm: React.FC = ({ field, type, mutation }) => { const [label, setLabel] = useState(""); + const { current: currentSite } = useSiteContext(); + const fieldTranslations = useSelector( + (state: RootState) => state.translations?.[currentSite?.id]?.fields, + ); + const translatedLabel = + (fieldTranslations?.[field.uid]?.label as string | undefined) ?? + field.properties.label; + // biome-ignore lint/correctness/useExhaustiveDependencies: We only want to reset the label when the field changes, not when the type changes useEffect(() => { - setLabel(field.properties.label || type?.name); + setLabel(translatedLabel || type?.name); mutation.reset(); }, [field.uid, type?.name]); @@ -36,7 +47,7 @@ export const FavoriteForm: React.FC = ({ field, type, mutation }) => { label: translate("Create a favorite"), handle: field.properties?.handle, flags: [], - placeholder: field.properties?.label, + placeholder: translatedLabel, type: PropertyType.String, }} value={label} diff --git a/packages/client/src/app/pages/forms/edit/builder/tabs/rules/sidebar/field/field.tsx b/packages/client/src/app/pages/forms/edit/builder/tabs/rules/sidebar/field/field.tsx index 54d4b1810..7184928d9 100644 --- a/packages/client/src/app/pages/forms/edit/builder/tabs/rules/sidebar/field/field.tsx +++ b/packages/client/src/app/pages/forms/edit/builder/tabs/rules/sidebar/field/field.tsx @@ -1,10 +1,12 @@ import config from "@config/freeform/freeform.config"; import { useLastTab } from "@editor/builder/tabs/tabs.hooks"; +import type { RootState } from "@editor/store"; import type { Field as FieldTypeProp } from "@editor/store/slices/layout/fields"; import { buttonRuleSelectors } from "@editor/store/slices/rules/buttons/buttons.selectors"; import { fieldRuleSelectors } from "@editor/store/slices/rules/fields/field-rules.selectors"; import { pageRuleSelectors } from "@editor/store/slices/rules/pages/page-rules.selectors"; import { submitFormRuleSelectors } from "@editor/store/slices/rules/submit-form/submit-form.selectors"; +import { useSiteContext } from "@ff-client/contexts/site/site.context"; import { useFieldType } from "@ff-client/queries/field-types"; import type { PageButtonType } from "@ff-client/types/rules"; import { operatorTypes } from "@ff-client/types/rules"; @@ -35,6 +37,11 @@ export const Field: React.FC = ({ field }) => { const location = useLocation(); const { setLastTab } = useLastTab("rules"); + const { current: currentSite } = useSiteContext(); + const fieldTranslations = useSelector( + (state: RootState) => state.translations?.[currentSite?.id]?.fields, + ); + const type = useFieldType(field?.typeClass); const currentField = activeFieldUid === field.uid; @@ -97,7 +104,11 @@ export const Field: React.FC = ({ field }) => { />