BAH-4138 | Show Validation rules while creating custom ABHA Address (#98

)

src/components/creation/CreateABHAAddress.jsx

@@ -121,6 +121,17 @@ const CreateABHAAddress = (props) => {
 					Create
 				</button>
 			</div>
+		    <div>
+				<p className="validation-rule">
+				    Abha Address should contain : <br />
+                     1. Minimum 8 characters. <br />
+                     2. Maximum 18 characters. <br />
+                     3. Special characters allowed 1 dot (.) and/or 1 underscore (_). <br />
+                     4. Special character dot and underscore should be in between. <br/>
+					 5. Special characters cannot be in the beginning or at the end.<br />
+                     6. Alphanumeric - only numbers, only letters or any combination of numbers and letters is allowed.
+				</p>
+			</div>
 			{loader && <Spinner />}
 			{error !== "" && <h6 className="error">{error}</h6>}
 			<Footer setBack={props.setBack} />

src/components/creation/Footer.jsx

@@ -13,8 +13,8 @@ const Footer = (props) => {
         setBack(true);
     }
     return (
-        <div className={props.setProceed !== undefined ? 'footer no-right-margin' : 'footer no-left-margin'}>
-            {props.setBack !== undefined && <div className="left-button">
+        <div className={props.setProceed !== undefined ? 'footer no-right-margin' : 'footer no-left-margin'}  >
+            {props.setBack !== undefined && <div className={props.setProceed !== undefined ? 'left-button' : 'center' }>
                 <button type="button" className="back" onClick={goBack}>Back</button>
             </div>}
             {props.setProceed !== undefined && <div className="right-button">

src/components/creation/creation.scss

@@ -86,6 +86,11 @@ button:disabled {
   margin-top: 10px;
 }
 
+.validation-rule {
+  font-size: smaller;
+  font-style: italic;
+}
+
 .note {
   text-align: center;
   font-size: medium;