From 06109a88279f89f0ca91c268ee52b88414da2c31 Mon Sep 17 00:00:00 2001
From: Dev Singh <88476780+devsingh05298@users.noreply.github.com>
Date: Fri, 20 Dec 2024 07:52:23 +0530
Subject: [PATCH] BAH-4138 | Show Validation rules while creating custom ABHA
 Address (#98)

---
 src/components/creation/CreateABHAAddress.jsx | 11 +++++++++++
 src/components/creation/Footer.jsx            |  4 ++--
 src/components/creation/creation.scss         |  5 +++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/creation/CreateABHAAddress.jsx b/src/components/creation/CreateABHAAddress.jsx
index 8122d1a..790c2b9 100644
--- a/src/components/creation/CreateABHAAddress.jsx
+++ b/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} />
diff --git a/src/components/creation/Footer.jsx b/src/components/creation/Footer.jsx
index c39c0b0..7705812 100644
--- a/src/components/creation/Footer.jsx
+++ b/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">
diff --git a/src/components/creation/creation.scss b/src/components/creation/creation.scss
index 76e8d25..3ce1304 100644
--- a/src/components/creation/creation.scss
+++ b/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;