fix(dashboard): Add FE validation for conditional prices (medusajs#10523

) * fix(dashboard): Add FE validation for conditional prices * fix(dashboard): Add FE validation for conditional prices * lint * only set error on one field * fix which field shows error
bhardwajRahul · Dec 10, 2024 · de81187 · de81187
1 parent 69f4c4f
commit de81187
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 79 deletions.
diff --git a/.changeset/selfish-coats-pull.md b/.changeset/selfish-coats-pull.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+fix(dashboard): Add FE validation for conditional prices
diff --git a/packages/admin/dashboard/src/i18n/translations/$schema.json b/packages/admin/dashboard/src/i18n/translations/$schema.json
@@ -2978,15 +2978,11 @@
                   "type": "string"
                 }
               },
-              "required": [
-                "stockedQuantity"
-              ],
+              "required": ["stockedQuantity"],
               "additionalProperties": false
             }
           },
-          "required": [
-            "errors"
-          ],
+          "required": ["errors"],
           "additionalProperties": false
         },
         "toast": {
@@ -3792,10 +3788,7 @@
                   "type": "string"
                 }
               },
-              "required": [
-                "title",
-                "requestSuccess"
-              ],
+              "required": ["title", "requestSuccess"],
               "additionalProperties": false
             },
             "shippingAddress": {
@@ -3808,10 +3801,7 @@
                   "type": "string"
                 }
               },
-              "required": [
-                "title",
-                "requestSuccess"
-              ],
+              "required": ["title", "requestSuccess"],
               "additionalProperties": false
             },
             "billingAddress": {
@@ -3824,18 +3814,11 @@
                   "type": "string"
                 }
               },
-              "required": [
-                "title",
-                "requestSuccess"
-              ],
+              "required": ["title", "requestSuccess"],
               "additionalProperties": false
             }
           },
-          "required": [
-            "email",
-            "shippingAddress",
-            "billingAddress"
-          ],
+          "required": ["email", "shippingAddress", "billingAddress"],
           "additionalProperties": false
         },
         "returns": {
@@ -4987,11 +4970,7 @@
                       "type": "string"
                     }
                   },
-                  "required": [
-                    "shipping_address",
-                    "billing_address",
-                    "email"
-                  ],
+                  "required": ["shipping_address", "billing_address", "email"],
                   "additionalProperties": false
                 }
               },
@@ -5560,9 +5539,7 @@
                       "type": "string"
                     }
                   },
-                  "required": [
-                    "cartItemTotal"
-                  ],
+                  "required": ["cartItemTotal"],
                   "additionalProperties": false
                 },
                 "summaries": {
@@ -5578,11 +5555,7 @@
                       "type": "string"
                     }
                   },
-                  "required": [
-                    "range",
-                    "greaterThan",
-                    "lessThan"
-                  ],
+                  "required": ["range", "greaterThan", "lessThan"],
                   "additionalProperties": false
                 },
                 "actions": {
@@ -5595,10 +5568,7 @@
                       "type": "string"
                     }
                   },
-                  "required": [
-                    "addPrice",
-                    "manageConditionalPrices"
-                  ],
+                  "required": ["addPrice", "manageConditionalPrices"],
                   "additionalProperties": false
                 },
                 "rules": {
@@ -5614,11 +5584,7 @@
                       "type": "string"
                     }
                   },
-                  "required": [
-                    "amount",
-                    "gte",
-                    "lte"
-                  ],
+                  "required": ["amount", "gte", "lte"],
                   "additionalProperties": false
                 },
                 "customRules": {
@@ -5640,13 +5606,7 @@
                       "type": "string"
                     }
                   },
-                  "required": [
-                    "label",
-                    "tooltip",
-                    "eq",
-                    "gt",
-                    "lt"
-                  ],
+                  "required": ["label", "tooltip", "eq", "gt", "lt"],
                   "additionalProperties": false
                 },
                 "errors": {
@@ -5660,12 +5620,20 @@
                     },
                     "minGreaterThanMax": {
                       "type": "string"
+                    },
+                    "duplicateAmount": {
+                      "type": "string"
+                    },
+                    "overlappingConditions": {
+                      "type": "string"
                     }
                   },
                   "required": [
                     "amountRequired",
                     "minOrMaxRequired",
-                    "minGreaterThanMax"
+                    "minGreaterThanMax",
+                    "duplicateAmount",
+                    "overlappingConditions"
                   ],
                   "additionalProperties": false
                 }
@@ -8842,16 +8810,6 @@
         "deleteSalesChannelWarning": {
           "type": "string"
         },
-        "tooltip": {
-          "type": "object",
-          "properties": {
-            "cannotDeleteDefault": {
-              "type": "string"
-            }
-          },
-          "required": ["cannotDeleteDefault"],
-          "additionalProperties": false
-        },
         "toast": {
           "type": "object",
           "properties": {
@@ -8868,6 +8826,16 @@
           "required": ["create", "update", "delete"],
           "additionalProperties": false
         },
+        "tooltip": {
+          "type": "object",
+          "properties": {
+            "cannotDeleteDefault": {
+              "type": "string"
+            }
+          },
+          "required": ["cannotDeleteDefault"],
+          "additionalProperties": false
+        },
         "products": {
           "type": "object",
           "properties": {
@@ -8916,6 +8884,7 @@
         "productAlreadyAdded",
         "deleteSalesChannelWarning",
         "toast",
+        "tooltip",
         "products"
       ],
       "additionalProperties": false

diff --git a/packages/admin/dashboard/src/i18n/translations/en.json b/packages/admin/dashboard/src/i18n/translations/en.json
@@ -1493,7 +1493,9 @@
         "errors": {
           "amountRequired": "Shipping option price is required",
           "minOrMaxRequired": "At least one of minimum or maximum cart item total must be provided",
-          "minGreaterThanMax": "Minimum cart item total must be less than or equal to maximum cart item total"
+          "minGreaterThanMax": "Minimum cart item total must be less than or equal to maximum cart item total",
+          "duplicateAmount": "Shipping option price must be unique for each condition",
+          "overlappingConditions": "Conditions must be unique across all price rules"
         }
       },
       "fields": {

diff --git a/.../src/routes/locations/common/components/conditional-price-form/conditional-price-form.tsx b/.../src/routes/locations/common/components/conditional-price-form/conditional-price-form.tsx
@@ -9,6 +9,7 @@ import {
 import {
   Badge,
   Button,
+  clx,
   CurrencyInput,
   Heading,
   IconButton,
@@ -110,14 +111,28 @@ export const ConditionalPriceForm = ({
     remove(index)
   }
 
-  const handleOnSubmit = conditionalPriceForm.handleSubmit((values) => {
-    setFormValue(name, values.prices, {
-      shouldDirty: true,
-      shouldValidate: true,
-      shouldTouch: true,
-    })
-    onCloseConditionalPricesModal()
-  })
+  const handleOnSubmit = conditionalPriceForm.handleSubmit(
+    (values) => {
+      setFormValue(name, values.prices, {
+        shouldDirty: true,
+        shouldValidate: true,
+        shouldTouch: true,
+      })
+      onCloseConditionalPricesModal()
+    },
+    (e) => {
+      const indexesWithErrors = Object.keys(e.prices || {})
+      setValue((prev) => {
+        const values = new Set(prev)
+
+        indexesWithErrors.forEach((index) => {
+          values.add(getRuleValue(Number(index)))
+        })
+
+        return Array.from(values)
+      })
+    }
+  )
 
   // Intercept the Cmd + Enter key to only save the inner form.
   const handleOnKeyDown = (event: React.KeyboardEvent<HTMLFormElement>) => {
@@ -255,7 +270,9 @@ const ConditionalPriceItem = ({
   return (
     <Accordion.Item
       value={getRuleValue(index)}
-      className="bg-ui-bg-component shadow-elevation-card-rest rounded-lg"
+      className={clx(
+        "bg-ui-bg-component shadow-elevation-card-rest rounded-lg"
+      )}
     >
       <Accordion.Trigger asChild>
         <div className="group/trigger flex w-full cursor-pointer items-start justify-between gap-x-2 p-3">