fix(dashboard): rules form operator change (medusajs#13324)

**What**
- fix condition rules form sometimes rendering multi and single selects unrelated to the attribute operator selected
- reset rule value when operator is changed
- disable selecting rule values untill operator is selected
- translate labels

Author: fPolic

.changeset/orange-bats-sing.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+fix(dashboard): rules form operator change

packages/admin/dashboard/src/i18n/translations/$schema.json

@@ -10818,6 +10818,12 @@
         },
         "loading": {
           "type": "string"
+        },
+        "selectValue": {
+          "type": "string"
+        },
+        "selectValues": {
+          "type": "string"
         }
       },
       "required": [
@@ -10830,7 +10836,9 @@
         "from",
         "to",
         "beaware",
-        "loading"
+        "loading",
+        "selectValue",
+        "selectValues"
       ],
       "additionalProperties": false
     },

packages/admin/dashboard/src/i18n/translations/en.json

@@ -2913,7 +2913,9 @@
     "from": "From",
     "to": "To",
     "beaware": "Be aware",
-    "loading": "Loading"
+    "loading": "Loading",
+    "selectValue": "Select Value",
+    "selectValues": "Select Values"
   },
   "fields": {
     "amount": "Amount",

packages/admin/dashboard/src/routes/promotions/common/edit-rules/components/rule-value-form-field/rule-value-form-field.tsx

@@ -5,6 +5,9 @@ import {
 } from "@medusajs/types"
 import { Input } from "@medusajs/ui"
 import { useWatch } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { useEffect } from "react"
+
 import { Form } from "../../../../../../components/common/form"
 import { Combobox } from "../../../../../../components/inputs/combobox"
 import { useStore } from "../../../../../../hooks/api"
@@ -51,6 +54,8 @@ export const RuleValueFormField = ({
   ruleType,
   applicationMethodTargetType,
 }: RuleValueFormFieldType) => {
+  const { t } = useTranslation()
+
   const attribute = attributes?.find(
     (attr) => attr.value === fieldRule.attribute
   )
@@ -82,6 +87,23 @@ export const RuleValueFormField = ({
     name: operator,
   })
 
+  useEffect(() => {
+    const hasDirtyRules = Object.keys(form.formState.dirtyFields).length > 0
+
+    /**
+     * Don't reset values if fileds didn't change - this is to prevent reset of form on initial render when editing an existing rule
+     */
+    if (!hasDirtyRules) {
+      return
+    }
+
+    if (watchOperator === "eq") {
+      form.setValue(name, "")
+    } else {
+      form.setValue(name, [])
+    }
+  }, [watchOperator])
+
   return (
     <Form.Field
       key={`${identifier}.${scope}.${name}-${fieldRule.attribute}`}
@@ -126,11 +148,13 @@ export const RuleValueFormField = ({
                 <Combobox
                   {...field}
                   {...comboboxData}
-                  multiple={watchOperator !== "eq"}
                   ref={ref}
                   placeholder={
-                    watchOperator === "eq" ? "Select Value" : "Select Values"
+                    watchOperator === "eq"
+                      ? t("labels.selectValue")
+                      : t("labels.selectValues")
                   }
+                  disabled={!watchOperator}
                   onChange={onChange}
                 />
               </Form.Control>