From 43bfaa90cf26c4b5a379554484a761587905b8d1 Mon Sep 17 00:00:00 2001
From: tsng <TrongSon.Nguyen@episerver.com>
Date: Thu, 9 Jun 2022 16:40:56 +0700
Subject: [PATCH] Remove highlight when field validate success

Fixes: MAR-1501
Story: MAR-1503
---
 .../ClientResources/Config/package.json              |  3 ++-
 .../ClientResources/Config/src/ABTestingSettings.tsx | 12 ++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/EPiServer.Marketing.Testing.Web/ClientResources/Config/package.json b/src/EPiServer.Marketing.Testing.Web/ClientResources/Config/package.json
index c3604f686..3d824f593 100644
--- a/src/EPiServer.Marketing.Testing.Web/ClientResources/Config/package.json
+++ b/src/EPiServer.Marketing.Testing.Web/ClientResources/Config/package.json
@@ -13,7 +13,8 @@
   },
   "scripts": {
     "build": "webpack --mode production",
-    "build:debug": "webpack --mode development"
+    "build:debug": "webpack --mode development",
+    "build:config:watch": "webpack --config webpack.config.js --mode development --watch"
   },
   "browserslist": {
     "production": [
diff --git a/src/EPiServer.Marketing.Testing.Web/ClientResources/Config/src/ABTestingSettings.tsx b/src/EPiServer.Marketing.Testing.Web/ClientResources/Config/src/ABTestingSettings.tsx
index f46018a6d..dd803eced 100644
--- a/src/EPiServer.Marketing.Testing.Web/ClientResources/Config/src/ABTestingSettings.tsx
+++ b/src/EPiServer.Marketing.Testing.Web/ClientResources/Config/src/ABTestingSettings.tsx
@@ -74,6 +74,14 @@ const ABTestingSettings = () => {
         }
     };
 
+    const hasValidDuration = (duration:number) => {
+        return isNumber(duration?.toString()) && (duration > 0 && duration <= 365)
+    }
+    
+    const hasValidPercent = (percent:number) => {
+        return isNumber(percent?.toString()) && (percent > 0 && percent <= 100)
+    }
+
     const cancel = () =>{
         setABTestingSettingsModel(aBTestingSettingsModelOrg);
     }
@@ -100,8 +108,8 @@ const ABTestingSettings = () => {
                         label={aBTestingSettingsModel.testDurationLabel}
                         value={aBTestingSettingsModel.testDuration?.toString()}
                         onChange={handleChange}
-                        type="number"
                         name="testDuration"
+                        invalid={!hasValidDuration(aBTestingSettingsModel.testDuration)}
                     />
                 </CardContentArea>
                 <CardContentArea>
@@ -109,8 +117,8 @@ const ABTestingSettings = () => {
                         label={aBTestingSettingsModel.participationPercentLabel}
                         value={aBTestingSettingsModel.participationPercent?.toString()}
                         onChange={handleChange}
-                        type="number"
                         name="participationPercent"
+                        invalid={!hasValidPercent(aBTestingSettingsModel.participationPercent)}
                     />
                 </CardContentArea>
                 <CardContentArea>