From d84c2666530e2956a2256acc14ff314529e0e793 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Sat, 26 Jul 2025 21:17:23 +0100
Subject: [PATCH] fixed input fields

---
 src/component/product/ProductActive.jsx       | 10 +++----
 .../product/settingsTab/GeneralTab.jsx        | 29 ++++++++++++++-----
 .../settingsTab/SiteTemplateSelector.jsx      |  2 +-
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/component/product/ProductActive.jsx b/src/component/product/ProductActive.jsx
index 67d7590..444975f 100644
--- a/src/component/product/ProductActive.jsx
+++ b/src/component/product/ProductActive.jsx
@@ -24,8 +24,8 @@ export default function ProductActive({productData}){
     }
 
     const homeFields ={
-        banner_text: { name: 'Main Banner Text', controls: 'TEXT', active: true },
-        banner_description: { name: 'Main Banner Text', controls: 'TEXTAREA', active: true },
+        banner_text: { name: 'Banner Text', controls: 'TEXT', active: true },
+        banner_description: { name: 'Banner Description', controls: 'TEXTAREA', active: true },
     }
 
     const footerFields ={
@@ -101,7 +101,7 @@ export default function ProductActive({productData}){
                                     </div>
                                 </div>
                                 <div className="card-body">
-                                    <iframe ref={iframe} style={{borderWidth: '0px;'}} src={externalUrl} width="100%" height="600" title={externalUrl}></iframe>
+                                    <iframe ref={iframe} style={{borderWidth: '0px'}} src={externalUrl} width="100%" height="600" title={externalUrl}></iframe>
                                 </div>
                                 <div className="p-4 ml-auto">
                                     <button type="button" onClick={handleRefresh} className="btn btn-primary">{refresh.isPending ? 'Loading...' : 'Refresh Site'}
@@ -121,7 +121,7 @@ export default function ProductActive({productData}){
                                         <ul className="nav nav-tabs" role="tablist">
                                             <>
                                                 {Object.entries(settingsObject).map(([key, value]) => (
-                                                    <li className="nav-item">
+                                                    <li key={key} className="nav-item">
                                                     <a className={`nav-link ${activeTab == value.controls && 'active show'}`}
                                                         id={key} data-bs-toggle="pill"
                                                         // data-bs-target={`#${value.controls}`}
@@ -139,7 +139,7 @@ export default function ProductActive({productData}){
                                         <div className="tab-content">
                                             <>
                                                 {Object.entries(settingsObject).map(([key, value]) => (
-                                                    <div className={`tab-pane fade  ${activeTab == value.controls && 'active show'}`}
+                                                    <div key={key} className={`tab-pane fade  ${activeTab == value.controls && 'active show'}`}
                                                         // id={value.controls} role="tabpanel"
                                                         // aria-labelledby={key}
                                                     >
diff --git a/src/component/product/settingsTab/GeneralTab.jsx b/src/component/product/settingsTab/GeneralTab.jsx
index 316d86f..d982cad 100644
--- a/src/component/product/settingsTab/GeneralTab.jsx
+++ b/src/component/product/settingsTab/GeneralTab.jsx
@@ -1,26 +1,41 @@
-import React, {memo} from 'react'
+import React, {memo, useState} from 'react'
 import SiteTemplateSelector from './SiteTemplateSelector';
 
 const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{
       console.log("Page data == ", data)
+
+      const fieldData = {}
+      Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
+        fieldData[value.name] = ''
+      })
+      const [fields, setFields] = useState(fieldData)
+      const handleChange = ({target:{name, value}}) => {
+        setFields(prev => ({...prev, [name]:value}))
+      }
+
+      const handleSubmit = () => {
+        console.log('formInfo', fields)
+      }
+
       if (isCustom ===  true){
           return  <SiteTemplateSelector  name={name} data={data} isCustom={isCustom} productData={productData} />
       }
 
+
       return (
         <div className="page-account-form">
-            <div className="p-0" style={{ minHeight: '500px;'}}>
+            <div className="p-0" style={{ minHeight: '500px'}}>
 
-                <form>
+                <form id='tab_form'>
                     <div className="form-row">
                         <>
                             {Object.entries(data)?.map(([key, value]) => (
-                                <div className="form-group col-md-12">
+                                <div key={key} className="form-group col-md-12">
                                     <label htmlFor="name1">{value.name}</label>
                                     {value.controls == 'TEXT' ?
-                                        <input type="text" className="form-control" id={key} value="" />
+                                        <input name={value.name} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
                                         :value.controls == 'TEXTAREA' ?
-                                        <textarea rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value="" />
+                                        <textarea name={value.name} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
                                         :
                                         null
                                     }
@@ -28,7 +43,7 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{
                             ))}
                         </>
                         <div className="form-group col-md-12" style={{textAlign:'right'}}>
-                            <button type="submit" className="btn btn-primary">Update</button>
+                            <button onClick={handleSubmit} type="button" className="btn btn-primary">Update</button>
                         </div>
                     </div>
                 </form>
diff --git a/src/component/product/settingsTab/SiteTemplateSelector.jsx b/src/component/product/settingsTab/SiteTemplateSelector.jsx
index 4bb497c..44efd49 100644
--- a/src/component/product/settingsTab/SiteTemplateSelector.jsx
+++ b/src/component/product/settingsTab/SiteTemplateSelector.jsx
@@ -8,7 +8,7 @@ const SiteTemplateSelector = memo(({name='Full Name', data}) =>{
                     <div className="row">
                         <>
                             {Object.entries(data)?.map(([key, value]) => (
-                                <div className="col-xl-6 col-sm-6">
+                                <div key={key} className="col-xl-6 col-sm-6">
                                     <div className="card card-statistics">
                                         <div className="card-body">
                                             <div className="text-center p-2">
-- 
2.34.1