fix(SFT-2789): field labels are site aware

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<ControlType<FieldProperty>> = ({
 }) => {
   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<ControlType<FieldProperty>> = ({
     })
     .map((field) => ({
       value: field.uid,
-      label: field.properties.label,
+      label:
+        (fieldTranslations?.[field.uid]?.label as string | undefined) ??
+        field.properties.label,
     }));
 
   return (

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<RootState>): Suggestion[] => {
+const compileStoreSuggestions = (
+  store: Store<RootState>,
+  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<RootState>): Suggestion[] => {
 
 export const useSuggestions = (backend: TokenBackend): SuggestionCategory[] => {
   const { store } = backend;
+  const { current: currentSite } = useSiteContext();
 
   const [compiled, setCompiled] = useState<SuggestionCategory[]>([]);
 
@@ -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;
 };

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<Props> = ({ 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<Props> = ({ field, type, mutation }) => {
             label: translate("Create a favorite"),
             handle: field.properties?.handle,
             flags: [],
-            placeholder: field.properties?.label,
+            placeholder: translatedLabel,
             type: PropertyType.String,
           }}
           value={label}

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<Props> = ({ 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<Props> = ({ field }) => {
         />
         <Label
           dangerouslySetInnerHTML={{
-            __html: DOMPurify.sanitize(field.properties.label || type?.name),
+            __html: DOMPurify.sanitize(
+              (fieldTranslations?.[field.uid]?.label as string | undefined) ??
+                field.properties.label ??
+                type?.name,
+            ),
           }}
         />
       </FieldInfo>

packages/client/src/app/pages/forms/edit/store/slices/layout/fields/fields.hooks.tsx

@@ -1,6 +1,8 @@
+import type { RootState } from "@editor/store";
 import { useAppStore } from "@editor/store";
 import GroupIcon from "@ff-client/assets/icons/fields/group";
 import PageIcon from "@ff-client/assets/icons/fields/page";
+import { useSiteContext } from "@ff-client/contexts/site/site.context";
 import { useFieldTypeSearch } from "@ff-client/queries/field-types";
 import type { OptionCollection } from "@ff-client/types/properties";
 import { useMemo } from "react";
@@ -15,9 +17,13 @@ export const useFieldOptionCollection = (
 ): OptionCollection => {
   const { getState } = useAppStore();
   const findType = useFieldTypeSearch();
+  const { current: currentSite } = useSiteContext();
 
   const cartographed = useSelector(layoutSelectors.cartographed.pageFieldList);
   const pages = useSelector(pageSelecors.all);
+  const fieldTranslations = useSelector(
+    (state: RootState) => state.translations?.[currentSite?.id]?.fields,
+  );
 
   return useMemo(
     (): OptionCollection =>
@@ -36,29 +42,44 @@ export const useFieldOptionCollection = (
               return null;
             }
 
+            const fieldLabel =
+              (fieldTranslations?.[field.uid]?.label as string | undefined) ??
+              field.properties.label;
+
             if (type?.type === "group") {
               const fields = layoutSelectors.cartographed.layoutFieldList(
                 getState(),
                 field.properties.layout,
               );
 
               return {
-                label: field.properties.label,
+                label: fieldLabel,
                 icon: <GroupIcon />,
                 children: fields.map((subField) => ({
-                  label: subField.properties.label,
+                  label:
+                    (fieldTranslations?.[subField.uid]?.label as
+                      | string
+                      | undefined) ?? subField.properties.label,
                   value: subField.uid,
                 })),
               };
             }
 
             return {
               value: field.uid,
-              label: field.properties.label,
+              label: fieldLabel,
             };
           })
           .filter(Boolean),
       })),
-    [cartographed, pages, excludedUids, excludedTypes, findType, getState],
+    [
+      cartographed,
+      pages,
+      excludedUids,
+      excludedTypes,
+      findType,
+      getState,
+      fieldTranslations,
+    ],
   );
 };

packages/client/src/queries/field-forms.ts

@@ -1,22 +1,30 @@
+import { useSiteContext } from "@ff-client/contexts/site/site.context";
 import type { FieldForm } from "@ff-client/types/fields";
 import type { UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 import axios from "axios";
 
 export const QKForms = {
-  all: ["field-forms"] as const,
+  all: (site?: string) => ["field-forms", site] as const,
 };
 
 type FetchFormsQuery = (options?: {
   select?: (data: FieldForm[]) => FieldForm[];
 }) => UseQueryResult<FieldForm[], AxiosError>;
 
-export const useFetchForms: FetchFormsQuery = ({ select }) =>
-  useQuery<FieldForm[], AxiosError>({
-    queryKey: QKForms.all,
+export const useFetchForms: FetchFormsQuery = ({ select } = {}) => {
+  const { current: currentSite } = useSiteContext();
+
+  return useQuery<FieldForm[], AxiosError>({
+    queryKey: QKForms.all(currentSite?.handle),
     queryFn: () =>
-      axios.get<FieldForm[]>(`/api/fields/forms`).then((res) => res.data),
+      axios
+        .get<FieldForm[]>(`/api/fields/forms`, {
+          params: { site: currentSite?.handle },
+        })
+        .then((res) => res.data),
     staleTime: Infinity,
     select,
   });
+};