MermsPanelReactJS/src/component/product/settingsTab/Settings.jsx

import React, { memo, useMemo, useState } from 'react'
import GeneralTab from './GeneralTab'
import { getSettingsData } from '../../../services/services';
import queryKeys from '../../../services/queryKeys';
import { useSelector } from 'react-redux';
import { useQuery } from '@tanstack/react-query';

const Settings = memo(({productData}) => {

    const { userDetails: { uid }} = useSelector((state) => state?.userDetails); // GETS USER UID
   
    const dataFields ={
        site_title: { name: 'Title', controls: 'TEXT', active: true },
        site_description: { name: 'Description', controls: 'TEXTAREA', active: true },
        site_logo_text: { name: 'Logo Text', controls: 'TEXT', active: true },
        site_contact_email: { name: 'Email', controls: 'TEXT', active: true },
        site_contact_phone: { name: 'Phone', controls: 'TEXT', active: true },
    }

    const socialFields ={
        facebook: { name: 'Facebook', controls: 'TEXT', active: true },
        twitter: { name: 'Twitter', controls: 'TEXT', active: true },
        youtube: { name: 'Youtube', controls: 'TEXT', active: true },
    }

    const homeFields ={
        banner_text: { name: 'Banner Text', controls: 'TEXT', active: true },
        banner_description: { name: 'Banner Description', controls: 'TEXTAREA', active: true },
    }

    const footerFields ={
        footer_description: { name: 'Footer Description', controls: 'TEXTAREA', active: true },
        boolean_footer_show_email: { name: 'Show email in footer', controls: 'SELECT_NO_YES', active: true },
    }

    const aboutFields ={
        about_title: { name: 'About Title', controls: 'TEXT', active: true },
        about_description: { name: 'About Details', controls: 'TEXTAREA', active: true },
        about_extra_1: { name: 'Extra About us', controls: 'TEXTAREA', active: true },
        about_extra_2: { name: 'More About us', controls: 'TEXTAREA', active: true },
    }

    const templateData = {
        template_16 : { title: 'Template Name-16', template_id: '02af24fd-2b1a-46ed-af21-87018e726408', banner: 'file-icon/svg.png', active: '' },
        template_22 : { title: 'Template Name-22', template_id: '8b296894-42e4-4f2e-abd1-7c2a38d6e07b', banner: 'file-icon/svg.png', active: '' },
        template_47 : { title: 'Template Name-47', template_id: 'ef2ffa1c-9272-42cd-9d33-0e614047b4f8', banner: 'file-icon/svg.png', active: '' },
        template_25 : { title: 'Template Name-25', template_id: 'b3a7ba31-dc47-4a40-a5cc-fd1ff27d6b78', banner: 'file-icon/svg.png', active: '' },
        template_49 : { title: 'Template Name-49', template_id: '60959c69-6672-4f69-a006-eeb7d210e605', banner: 'file-icon/svg.png', active: '' },
        template_27 : { title: 'Template Name-27', template_id: 'e4acb98a-c584-45f2-bece-af677dcf0a1f', banner: 'file-icon/svg.png', active: '' },
        template_51 : { title: 'Template Name-51', template_id: '975ee42e-3169-4978-92d7-d28e7e2ac014', banner: 'file-icon/svg.png', active: '' },
        template_9 : { title: 'Template Name-9',   template_id: 'fc8f0738-6500-4775-9895-2047cd275302', banner: 'file-icon/svg.png', active: '' },
    }

    const contactFields ={
        contact_title : { name: 'Contact Title', controls: 'TEXT', active: true },
        contact_introduction: { name: 'Extra Introduction', controls: 'TEXTAREA', active: true },
    }

    const settingsObject = useMemo(()=>{
        return {
           settings: { title: 'Settings', controls: 'settings', active: 'active show' , custom: false, data: dataFields},
           home_tab: { title: 'Home Page', controls: 'home', active: '', custom: false,  data: homeFields},
           footer_tab: { title: 'Footer', controls: 'footer', active: '', custom: false, data: footerFields },
           about_tab: { title: 'About Page', controls: 'about', active: '', custom: false, data: aboutFields },
           contact_tab: { title: 'Contact Page', controls: 'contact', active: '', custom: false, data: contactFields },
           social_tab: { title: 'Socials', controls: 'social', active: '', custom: false, data: socialFields },
           template_tab: { title: 'Template', controls: 'template', active: '', custom: true, data: templateData },
           color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', custom: true, data: {} },
       };
    },[])


    const [fieldsChanged, setFieldsChanged] = useState(false)

    const [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)

    const handleChangeTab = (value) => {
        // if(fieldsChanged){
        //     const proceed = confirm('Continue without saving changes')
        //     if(proceed){
        //         setActiveTab(value)
        //         setFieldsChanged(false)
        //     }
        // }else{
        //     setActiveTab(value)
        // }
        setActiveTab(value)
    }


    const {data, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.settingsData,
        queryFn: () => {
            let reqData = {
                token: localStorage.getItem('token'), // USER TOKEN
                uid: localStorage.getItem('uid'), // USER UID
                product_id: productData?.product_id
            }
           return getSettingsData(reqData)
        }
    })

    const settingsData = data?.data?.settings
    // console.log('data', settingsData)

      return (
        <>
        {isFetching ? 
            <>
                <div className="row">
                    <div className="col-12">
                        <p className='text-mute'>Loading...</p>
                    </div>
                </div>
            </>
            : isError ?
            <div className="row">
                <div className="col-12">
                    <p className='text-danger'>{error.message}</p>
                </div>
            </div>
            :
            <div className="tab tab-vertical">
                <ul className="nav nav-tabs" role="tablist">
                    <>
                        {Object.entries(settingsObject).map(([key, value]) => (
                            <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}`}
                                type="button" 
                                // role="tab"
                                // aria-controls={value.controls}
                                // aria-selected="true"
                                onClick={()=>handleChangeTab(value.controls)}
                            >
                                {value.title}
                            </a>
                            </li>
                        ))}
                    </>
                </ul>
                <div className="tab-content">
                    <>
                        {Object.entries(settingsObject).map(([key, value]) => (
                            <div key={key} className={`tab-pane fade  ${activeTab == value.controls && 'active show'}`}
                                // id={value.controls} role="tabpanel"
                                // aria-labelledby={key}
                            >
                                <GeneralTab name={value.title} data={value.data} isCustom={value.custom} productData={productData} backendValues={settingsData} setFieldsChanged={setFieldsChanged} />
                            </div>
                        ))}
                    </>
                </div>
            </div>
            }
        </>
      )
    }
)

export default Settings