MermsPanelReactJS/src/component/product/ProductActive.jsx

import React, { useRef, useState } from "react";
import getImage from "../../utils/getImage";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import GeneralTab from "./settingsTab/GeneralTab";
import { useMutation } from "@tanstack/react-query";
import { productRefreshSite } from "../../services/services";


export default function ProductActive({productData}){
    const iframe = useRef()
   
    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 },
    }

    const aboutFields ={
        about_description: { name: '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 settingsObject = {
        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: {} },
        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 [activeTab, setActiveTab] = useState(Object.entries(settingsObject)[0][1]?.controls)

    const refresh = useMutation({
        mutationFn: (fields) => {
            return productRefreshSite(fields)
        },
        onSuccess: (res) => {
            iframe.current.src += ''
        }
    })

    const handleRefresh = () => {
        const reqData = {
            token: localStorage.getItem('token'), // USER TOKEN
            uid: localStorage.getItem('uid'), // USER UID
            product_id: productData.product_id,
            subscription_uid: productData.subscription_uid
        }
        refresh.mutate(reqData)
    }
    let externalUrl= 'https://'+productData?.internal_url

    return(
        <>
            {/*<BreadcrumbComBS title='Active Product Name' paths={['Dashboard', 'Product']} />*/}
            {/*<div className="row">*/}
            {/*    <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
            {/*</div>*/}


            <div className="row account-contant">
                <>
                    <div className="row tabs-contant">
                        <div className="col-xxl-6">
                            <div className="card card-statistics">
                                <div className="card-header">
                                    <div className="card-heading d-flex justify-content-between">
                                        <h4 className="card-title">{externalUrl}</h4>
                                        <button type="button" onClick={()=>iframe.current.src += ''} className="btn btn-primary">IC</button>
                                    </div>
                                </div>
                                <div className="card-body">
                                    <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'}
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div className="col-xxl-6">
                            <div className="card card-statistics">
                                <div className="card-header">
                                    <div className="card-heading">
                                        <h4 className="card-title"> Site Settings </h4>
                                    </div>
                                </div>
                                <div className="card-body">
                                    <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={()=>setActiveTab(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} />
                                                    </div>
                                                ))}
                                            </>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </>
            </div>
        </>
    )
}