src/component/product/ProductActive.jsx

@@ -66,7 +66,7 @@ export default function ProductActive({productData}){
                                         </button>
                                     </div>
                                 </div>
-                                <div className="card-body" style={{minHeight: '680px'}}>
+                                <div className="card-body" style={{minHeight: '600px', maxHeight: '600px'}}>
                                     <iframe ref={iframe} style={{borderWidth: '0px'}} src={externalUrl} width="100%" height="600" title={externalUrl}></iframe>
                                 </div>
                                 <div className="p-4 ml-auto">

src/component/product/settingsTab/Settings.jsx

@@ -5,6 +5,7 @@ import queryKeys from '../../../services/queryKeys';
 import { useSelector } from 'react-redux';
 import { useQuery } from '@tanstack/react-query';
 import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder'
+import TemplateConfigure from './TemplateConfigure';
 
 const Settings = memo(({productData}) => {
 
@@ -24,7 +25,7 @@ const Settings = memo(({productData}) => {
     })
     const settingsConfig = configData?.data?.settings_items
     // console.log('CONFIG DATA...', settingsConfig)
-
+    // console.log('configData', configData?.data?.subscription_template)
 
     const [fieldsChanged, setFieldsChanged] = useState(false)
 
@@ -81,12 +82,12 @@ const Settings = memo(({productData}) => {
                 </div>
             </div>
             :
-            <div className="tab tab-vertical">
+            <div className="d-flex">
-                <ul className="nav nav-tabs" role="tablist">
+                <ul className="bg-body-secondary flex-column nav" role="tablist" style={{width: '25%', minHeight: '670px', maxHeight: '670px'}}>
                     <>
                         {Object.entries(sortedSettingsConfig).map(([key, value], index) => (
                             <li key={key} className="nav-item">
-                            <a className={`nav-link ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
+                            <p className={`text-black nav-link ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show bg-primary text-white'}`}
                                 id={key} 
                                 // data-bs-toggle="pill"
                                 // data-bs-target={`#${value.controls}`}
@@ -97,12 +98,27 @@ const Settings = memo(({productData}) => {
                                 onClick={()=>handleChangeTab(value.controls)}
                             >
                                 {value.title}
-                            </a>
+                            </p>
                             </li>
                         ))}
+                        {configData?.data?.subscription_template &&
+                            <li className="mt-auto nav-item">
+                                <p className={`text-black nav-link ${(activeTab == 'config_temp') && 'active show bg-primary text-white'}`}
+                                    // data-bs-toggle="pill"
+                                    // data-bs-target={`#${value.controls}`}
+                                    type="button" 
+                                    // role="tab"
+                                    // aria-controls={value.controls}
+                                    // aria-selected="true"
+                                    onClick={()=>handleChangeTab('config_temp')}
+                                >
+                                    Configure Template
+                                </p>
+                            </li>
+                        }
                     </>
                 </ul>
-                <div className="tab-content">
+                <div className="p-3 tab-content" style={{width: '75%'}}>
                     <>
                         {Object.entries(sortedSettingsConfig).map(([key, value], index) => (
                             <div key={key} className={`tab-pane fade  ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
@@ -112,6 +128,10 @@ const Settings = memo(({productData}) => {
                                 <GeneralTab tabKey={key} name={value.title} data={value.data} isCustom={value.custom} productData={productData} backendValues={settingsData} setFieldsChanged={setFieldsChanged} />
                             </div>
                         ))}
+                        <div className={`tab-pane fade  ${(activeTab == 'config_temp') && 'active show'}`}
+                        >
+                            <TemplateConfigure />
+                        </div>
                     </>
                 </div>
             </div>