reloads config settings endpoint on change of product

src/component/product/ProductFactory.jsx

@@ -2,14 +2,16 @@ import { useQuery } from '@tanstack/react-query'
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 // import getImage from "../../utils/getImage";
 import ProductStart from "./ProductStart";
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import {MyProductData} from "../../services/services";
 import ProductActive from "./ProductActive";
 import ProductProvision from "./ProductProvision";
 import {productConst} from "../../constants/products";
 import queryKeys from "../../services/queryKeys";
+import siteLinks from '../../links/siteLinks';
 
 export default function ProductFactory(){
+    const navigate = useNavigate()
     const location = useLocation();
     const pathname = location.pathname;
 
@@ -45,8 +47,9 @@ export default function ProductFactory(){
                     </>
                     : isError ?
                         <div className="row">
-                            <div className="col-12">
+                            <div className="text-center col-12" style={{minHeight: '500px', placeContent: 'center'}}>
                                 <p className='text-danger'>{error?.message}</p>
+                                <button onClick={() => navigate(siteLinks.home)} className='mt-3 btn btn-primary'>Return Home</button>
                             </div>
                         </div>
                     :

src/component/product/settingsTab/GeneralTab.jsx

@@ -5,6 +5,7 @@ import SiteTemplateSelector from './SiteTemplateSelector';
 import NoYesBooleanDropdown from './NoYesBooleanDropdown';
 import {IoMdArrowDropdown} from 'react-icons/io';
 import queryKeys from '../../../services/queryKeys';
+import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder';
 
 const GeneralTab = memo(({name = 'Full Name', data, isCustom, productData, backendValues, setFieldsChanged}) => {
 
@@ -27,9 +28,11 @@ const GeneralTab = memo(({name = 'Full Name', data, isCustom, productData, backe
 
         const [fields, setFields] = useState({})
 
+        const sortedData = sortObjectByListOrder(data ? data : {}) // SORTED SETTINGSCONFIG
+
         useEffect(() => {
             const fieldData = {}
-            Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
+            Object.entries(sortedData)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
                 fieldData[value?.name?.toLowerCase().replaceAll(" ", "_")] = ''
             })
             backendValues?.data?.forEach(item => { //LOOPING THROUGH USER ALREADY ADDED DATA FROM BACKEND IF ANY AND UPDATING THE FIELDDATA OBJECT
@@ -98,7 +101,7 @@ const GeneralTab = memo(({name = 'Full Name', data, isCustom, productData, backe
                         :
                         <>
                             {isCustom === true ?
-                                <SiteTemplateSelector name={name} data={data} isCustom={isCustom}
+                                <SiteTemplateSelector name={name} data={sortedData} isCustom={isCustom}
                                                       productData={productData}/>
                                 :
                                 <div className="page-account-form">
@@ -107,7 +110,7 @@ const GeneralTab = memo(({name = 'Full Name', data, isCustom, productData, backe
                                         <form id='tab_form'>
                                             <div className="form-row">
                                                 <>
-                                                    {Object.entries(data)?.map(([key, value]) => {
+                                                    {Object.entries(sortedData)?.map(([key, value]) => {
                                                             let fieldName = key; // value.key.toLowerCase().replaceAll(" ", "_")
                                                             let fieldValue = fields[key]; //fields[value.name.toLowerCase().replaceAll(" ", "_")]
                                                             return (

src/component/product/settingsTab/Settings.jsx

@@ -4,6 +4,7 @@ import { getSettingsData, getMyProductConfig } from '../../../services/services'
 import queryKeys from '../../../services/queryKeys';
 import { useSelector } from 'react-redux';
 import { useQuery } from '@tanstack/react-query';
+import sortObjectByListOrder from '../../../helpers/sortObjectByListOrder'
 
 const Settings = memo(({productData}) => {
 
@@ -19,6 +20,7 @@ const Settings = memo(({productData}) => {
             }
            return getMyProductConfig(reqData)
         },
+        staleTime: 0,
     })
     const settingsConfig = configData?.data?.settings_items
     // console.log('CONFIG DATA...', settingsConfig)
@@ -53,12 +55,15 @@ const Settings = memo(({productData}) => {
             }
            return getSettingsData(reqData)
         },
+        staleTime: 0,
         enabled: settingsConfig ? true : false
     })
 
     const settingsData = {data: data?.data?.settings, isFetching, isError, error}
     // console.log('data', settingsData)
 
+    const sortedSettingsConfig = sortObjectByListOrder(settingsConfig ? settingsConfig : {}) // SORTED SETTINGSCONFIG
+
       return (
         <>
         {configIsFetching ? 
@@ -79,7 +84,7 @@ const Settings = memo(({productData}) => {
             <div className="tab tab-vertical">
                 <ul className="nav nav-tabs" role="tablist">
                     <>
-                        {Object.entries(settingsConfig).map(([key, value], index) => (
+                        {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'}`}
                                 id={key} 
@@ -99,7 +104,7 @@ const Settings = memo(({productData}) => {
                 </ul>
                 <div className="tab-content">
                     <>
-                        {Object.entries(settingsConfig).map(([key, value], index) => (
+                        {Object.entries(sortedSettingsConfig).map(([key, value], index) => (
                             <div key={key} className={`tab-pane fade  ${(activeTab == value.controls || (index == 0 & !activeTab)) && 'active show'}`}
                                 // id={value.controls} role="tabpanel"
                                 // aria-labelledby={key}

src/component/start/Start.jsx

@@ -1,30 +1,18 @@
 import React from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import getImage from "../../utils/getImage";
 
+export default function Start() {
 
-export default function Start(){
+    const bgImg = getImage("side-banner.jpg");
 
-    return(
+    return (
         <>
-            <BreadcrumbComBS title='Get Started...' paths={['Dashboard', 'Start']} />
+            <BreadcrumbComBS title='Get Started...' paths={['Dashboard', 'Start']}/>
             <div className="row">
                 <div className="col-xl-3 col-md-6">
-                    <div className="card card-statistics text-center py-3">
+                    <div className="card card-statistics text-center py-3"
-                        <div className="card-body pricing-content">
+                         style={{minHeight: '550px', borderRadius: '10px', backgroundImage: `url(${bgImg})`}}>
-                            {/*<div className="pricing-content-card">*/}
-                            {/*    <h5>Premium</h5>*/}
-                            {/*    <h2 className="text-primary pt-3">$150</h2>*/}
-                            {/*    <p className="text-primary pb-3">/ Monthly</p>*/}
-                            {/*    <ul className="py-2">*/}
-                            {/*        <li>post jobs</li>*/}
-                            {/*        <li>advanced instructors search</li>*/}
-                            {/*        <li>invite candidates</li>*/}
-                            {/*        <li>post events</li>*/}
-                            {/*        <li>cancel any time</li>*/}
-                            {/*    </ul>*/}
-                            {/*    <div className="pt-2"><a href="javascript:void(0)" className="btn btn-primary btn-round btn-sm">go premium</a></div>*/}
-                            {/*</div>*/}
-                        </div>
                     </div>
                 </div>
 
@@ -33,7 +21,7 @@ export default function Start(){
                         <div className="card-body pricing-content">
                             <div className="pricing-content-card">
                                 <h5>Start with</h5>
-                                <h2 className="text-primary pt-3" ><a href="/product/A000001">Personal Website</a></h2>
+                                <h2 className="text-primary pt-3"><a href="/product/A000001">Personal Website</a></h2>
                                 <ul className="py-2">
                                     <li>post jobs</li>
                                     <li>advanced instructors search</li>
@@ -41,7 +29,8 @@ export default function Start(){
                                     <li>post events</li>
                                     <li>cancel any time</li>
                                 </ul>
-                                <div className="pt-2"><a href="/product/A000001" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div>
+                                <div className="pt-2"><a href="/product/A000001"
+                                                         className="btn btn-primary btn-round btn-sm">Start</a></div>
                             </div>
                         </div>
                     </div>
@@ -60,30 +49,31 @@ export default function Start(){
                                     <li>post events</li>
                                     <li>cancel any time</li>
                                 </ul>
-                                <div className="pt-2"><a href="/product/A000001" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div>
+                                <div className="pt-2"><a href="/product/A000001"
+                                                         className="btn btn-primary btn-round btn-sm">Start</a></div>
                             </div>
                         </div>
                     </div>
                 </div>
 
                 <div className="col-xl-3 col-md-6">
-                    <div className="card card-statistics text-center py-3">
+                    {/*<div className="card card-statistics text-center py-3">*/}
-                        <div className="card-body pricing-content">
+                    {/*<div className="card-body pricing-content">*/}
-                            {/*<div className="pricing-content-card">*/}
+                    {/*<div className="pricing-content-card">*/}
-                            {/*    <h5>small</h5>*/}
+                    {/*    <h5>small</h5>*/}
-                            {/*    <h2 className="text-primary pt-3">$80</h2>*/}
+                    {/*    <h2 className="text-primary pt-3">$80</h2>*/}
-                            {/*    <p className="text-primary pb-3">/ Monthly</p>*/}
+                    {/*    <p className="text-primary pb-3">/ Monthly</p>*/}
-                            {/*    <ul className="py-2">*/}
+                    {/*    <ul className="py-2">*/}
-                            {/*        <li>post jobs</li>*/}
+                    {/*        <li>post jobs</li>*/}
-                            {/*        <li>advanced instructors search</li>*/}
+                    {/*        <li>advanced instructors search</li>*/}
-                            {/*        <li>invite candidates</li>*/}
+                    {/*        <li>invite candidates</li>*/}
-                            {/*        <li>post events</li>*/}
+                    {/*        <li>post events</li>*/}
-                            {/*        <li>cancel any time</li>*/}
+                    {/*        <li>cancel any time</li>*/}
-                            {/*    </ul>*/}
+                    {/*    </ul>*/}
-                            {/*    <div className="pt-2"><a href="javascript:void(0)" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div>*/}
+                    {/*    <div className="pt-2"><a href="javascript:void(0)" className="btn btn-inverse-secondary btn-round btn-sm">go premium</a></div>*/}
-                            {/*</div>*/}
+                    {/*</div>*/}
-                        </div>
+                    {/*</div>*/}
-                    </div>
+                    {/*</div>*/}
                 </div>
             </div>
 

src/helpers/sortObjectByListOrder.js

@@ -0,0 +1,14 @@
+const sortObjectByListOrder = (data) => {
+    const sortedEntriesByValue = Object.entries(data).sort((a, b) => {
+        if(a[1].list_order > b[1].list_order){
+            return 1
+        }else{
+            return -1
+        }
+    }); // Sorts numerically by value
+
+    const sortedObjectByValue = Object.fromEntries(sortedEntriesByValue);
+    return sortedObjectByValue
+}
+
+export default sortObjectByListOrder

src/services/services.js

@@ -26,7 +26,8 @@ const postAuxEnd = (path, postData, media=false) => {
     return axios.post(`${basePath}${path}`, postData).then(res => {
         return res
     }).catch(err => {
-        throw new Error(err.response.data.msg);
+        // console.log('res', err.response.data)
+        throw new Error(err.response.data.error_message);
     })
 }