added online_name

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -68,7 +68,7 @@ export default function PersonalInfoTab({
     pref_email: 0,
     pref_phone: 0,
     accept_promo: false,
-    online_name: userDetails?.username
+    online_name: "",
   };
 
   let [profile, setProfile] = useState({
@@ -156,12 +156,12 @@ export default function PersonalInfoTab({
                     <div className="field w-full mb-6">
                       <InputCom
                         fieldClass="px-6"
-                        label="User Name (change if it's an email)"
+                        label="User Name"
                         type="text"
                         name="online_name"
                         placeholder="Username"
-                        value={props.values.online_name}
+                        value={userDetails?.username}
-                        inputHandler={props.handleChange}
+                        disable={true}
                       />
                     </div>
 
@@ -220,6 +220,25 @@ export default function PersonalInfoTab({
                         )}
                       </div>
                     </div>
+                    {/* Online Name */}
+                    <div className="field w-full mb-6">
+                      <InputCom
+                        fieldClass="px-6"
+                        label="Online Name (optional)"
+                        type="text"
+                        name="online_name"
+                        placeholder=""
+                        value={props.values.online_name}
+                        inputHandler={props.handleChange}
+                        blurHandler={props.handleBlur}
+                      />
+                      {props.errors.online_name &&
+                        props.touched.online_name && (
+                          <p className="text-sm text-red-500">
+                            {props.errors.online_name}
+                          </p>
+                        )}
+                    </div>
 
                     {/* Country */}
                     <div className="field w-full mb-6">