Add translations for static elements to the filters (#4109)

* Support boolean static values

* Add intl for filters

* Add intl for filters

locale/defaultMessages.json

@@ -1524,6 +1524,9 @@
     "context": "button",
     "string": "SETUP END DATE"
   },
+  "9MGrEp": {
+    "string": "Is available"
+  },
   "9Mro3c": {
     "context": "Transaction event status - pending",
     "string": "Pending"
@@ -2290,6 +2293,9 @@
     "context": "change warehouse dialog warehouse list label",
     "string": "Warehouses A to Z"
   },
+  "Eq3GFh": {
+    "string": "Is giftcard"
+  },
   "ErNH3D": {
     "string": "Define where this attribute should be used in Saleor system"
   },
@@ -3970,6 +3976,9 @@
     "context": "table header name col label",
     "string": "Name"
   },
+  "QHDtwH": {
+    "string": "Has category"
+  },
   "QJG+d/": {
     "context": "staff added type order discount",
     "string": "Staff added"
@@ -4057,6 +4066,9 @@
     "context": "dialog content",
     "string": "Add a new address:"
   },
+  "QqnNUm": {
+    "string": "Visible in listing"
+  },
   "QzseV7": {
     "context": "dialog header",
     "string": "Delete Menu"
@@ -5896,6 +5908,9 @@
   "dWK/Ck": {
     "string": "Choose countries, you want voucher to be limited to, from the list below"
   },
+  "da1ebU": {
+    "string": "Product type"
+  },
   "dc5KWn": {
     "context": "products export type label",
     "string": "products"
@@ -7022,6 +7037,9 @@
     "context": "modal button upload",
     "string": "Upload"
   },
+  "mIRBuW": {
+    "string": "Is published"
+  },
   "mIUNgR": {
     "context": "button",
     "string": "Create shipping zone"

src/components/ConditionalFilter/FilterElement/FilterElement.ts

@@ -19,6 +19,10 @@ export class ExpressionValue {
     public type: string,
   ) {}
 
+  public setLabel(label: string) {
+    this.label = label;
+  }
+
   public isEmpty() {
     return this.value.length === 0 || this.label.length === 0;
   }

src/components/ConditionalFilter/FiltersArea.tsx

@@ -11,6 +11,7 @@ import { FilterContainer } from "./FilterElement";
 import { LeftOperand } from "./LeftOperandsProvider";
 import { useFiltersAreaTranslations } from "./messages";
 import { useFilterContainer } from "./useFilterContainer";
+import { useTranslate } from "./useTranslate";
 import { ErrorEntry } from "./Validation";
 
 interface FiltersAreaProps {
@@ -28,6 +29,7 @@ export const FiltersArea: FC<FiltersAreaProps> = ({
 }) => {
   const { apiProvider, leftOperandsProvider } = useConditionalFilterContext();
   const translations = useFiltersAreaTranslations();
+  const { translateOperandOptions, translateSelectedOperands } = useTranslate();
 
   const {
     value,
@@ -79,8 +81,8 @@ export const FiltersArea: FC<FiltersAreaProps> = ({
 
   return (
     <_ExperimentalFilters
-      leftOptions={leftOperandsProvider.operands}
-      value={value as Array<string | Row>}
+      leftOptions={translateOperandOptions(leftOperandsProvider.operands)}
+      value={translateSelectedOperands(value) as Array<string | Row>}
       onChange={handleStateChange}
       error={errors}
       locale={translations.locale}

src/components/ConditionalFilter/constants.ts

@@ -46,37 +46,37 @@ export const STATIC_OPTIONS: LeftOperand[] = [
   { value: "channel", label: "Channel", type: "channel", slug: "channel" },
   {
     value: "productType",
-    label: "Product Type",
+    label: "ProductType",
     type: "productType",
     slug: "productType",
   },
   {
     value: "isAvailable",
-    label: "Is available",
+    label: "IsAvailable",
     type: "isAvailable",
     slug: "isAvailable",
   },
   {
     value: "isPublished",
-    label: "Is published",
+    label: "IsPublished",
     type: "isPublished",
     slug: "isPublished",
   },
   {
     value: "isVisibleInListing",
-    label: "Visible in listing",
+    label: "VisibleInListing",
     type: "isVisibleInListing",
     slug: "isVisibleInListing",
   },
   {
     value: "hasCategory",
-    label: "Has category",
+    label: "HasCategory",
     type: "hasCategory",
     slug: "hasCategory",
   },
   {
     value: "giftCard",
-    label: "Is giftcard",
+    label: "IsGiftcard",
     type: "giftCard",
     slug: "giftCard",
   },

src/components/ConditionalFilter/intl.ts

@@ -0,0 +1,44 @@
+import { defineMessages } from "react-intl";
+
+export const leftOperatorsMessages = defineMessages({
+  Price: {
+    id: "b1zuN9",
+    defaultMessage: "Price",
+  },
+  Category: {
+    id: "ccXLVi",
+    defaultMessage: "Category",
+  },
+  Channel: {
+    id: "KeO51o",
+    defaultMessage: "Channel",
+  },
+  Collection: {
+    id: "phAZoj",
+    defaultMessage: "Collection",
+  },
+  ProductType: {
+    id: "da1ebU",
+    defaultMessage: "Product type",
+  },
+  IsAvailable: {
+    id: "9MGrEp",
+    defaultMessage: "Is available",
+  },
+  IsPublished: {
+    id: "mIRBuW",
+    defaultMessage: "Is published",
+  },
+  VisibleInListing: {
+    id: "QqnNUm",
+    defaultMessage: "Visible in listing",
+  },
+  HasCategory: {
+    id: "QHDtwH",
+    defaultMessage: "Has category",
+  },
+  IsGiftcard: {
+    id: "Eq3GFh",
+    defaultMessage: "Is giftcard",
+  },
+});

src/components/ConditionalFilter/useTranslate.ts

@@ -0,0 +1,33 @@
+import { useIntl } from "react-intl";
+
+import { FilterContainer, FilterElement } from "./FilterElement";
+import { leftOperatorsMessages } from "./intl";
+import { LeftOperand } from "./LeftOperandsProvider";
+
+type TranslationKeys = keyof typeof leftOperatorsMessages;
+
+export const useTranslate = () => {
+  const intl = useIntl();
+
+  return {
+    translateOperandOptions: (operands: LeftOperand[]) =>
+      operands.map(el => ({
+        ...el,
+        label: intl.formatMessage(
+          leftOperatorsMessages[el.label as TranslationKeys],
+        ),
+      })),
+    translateSelectedOperands: (container: FilterContainer) =>
+      container.map(el => {
+        if (FilterElement.isCompatible(el)) {
+          el.value.setLabel(
+            intl.formatMessage(
+              leftOperatorsMessages[el.value.label as TranslationKeys],
+            ),
+          );
+        }
+
+        return el;
+      }),
+  };
+};