added settings endpoint

src/component/auth/AccPWDReset.jsx

@@ -38,8 +38,8 @@ export default function AccPWDReset() {
         return verifyResetToken(fields)
     },
     onSuccess: (res) => {
-        // console.log('res', res)
-        if(res.data.resultCode != '0'){
+        // console.log('res', res.data)
+        if(res.data.resultCode != '0' || !res?.data?.pending_uid){
             throw({message: res?.data?.resultDescription})
         }
         // setUser({user:'testaccount', ...res.data})
@@ -76,8 +76,7 @@ export default function AccPWDReset() {
   const handleCompletePWDReset = (values) => {
     let reqData = {
         reset_token: token,
-        // reset_uid: "4733e96b-7031-4684-bec3-f63da4417707",
-        reset_uid: "",
+        reset_uid: user?.pending_uid,
         new_password: values.password,
     }
     resetPWD.mutate(reqData)

src/component/product/__ProductActive.jsx

@@ -0,0 +1,149 @@
+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(
+        <>
+            <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">
+                                            <img src={getImage('refresh.png')} style={{width: '30px', height: 'auto'}} alt='refresh page' />
+                                        </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"
+                                                        type="button" role="tab"
+                                                        onClick={()=>setActiveTab(value.controls)}
+                                                    >
+                                                        {value.title}
+                                                    </a>
+                                                    </li>
+                                                ))}
+                                            </>
+                                        </ul>
+                                        <div className="tab-content">
+                                            <>
+                                                <div key={key} className={`tab-pane fade  ${activeTab == value.controls && 'active show'}`}
+                                                >
+                                                    <GeneralTab name={value.title} data={value.data} isCustom={value.custom} productData={productData} />
+                                                </div>
+                                            </>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </>
+            </div>
+        </>
+    )
+}

src/component/product/settingsTab/GeneralTab.jsx

@@ -1,20 +1,54 @@
 import React, {memo, useState} from 'react'
+import { useMutation } from "@tanstack/react-query";
+import { pageSettings } from "../../../services/services";
 import SiteTemplateSelector from './SiteTemplateSelector';
 
 const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{
-      console.log("Page data == ", data)
+    //   console.log("Page data == ", data)
+
+      const [reqStatus, setReqStatus] = useState({error: null, message: ''})
 
       const fieldData = {}
       Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
-        fieldData[value.name] = ''
+        fieldData[value?.name?.toLowerCase().replace(" ", "_")] = ''
       })
       const [fields, setFields] = useState(fieldData)
       const handleChange = ({target:{name, value}}) => {
         setFields(prev => ({...prev, [name]:value}))
       }
 
+
+    const submitSettings = useMutation({
+        mutationFn: (fields) => {
+            return pageSettings(fields)
+        },
+        onSuccess: (res) => {
+            if(res?.data?.resultCode != '0'){
+                return setReqStatus({error: true, message: 'Unable to complete, try again later'})
+            }
+            setReqStatus({error: false, message: 'Completed successfully'})
+        },
+        onError: (err) => {
+            setReqStatus({error: true, message: 'Unable to complete, try again later'})
+        },
+        onSettled: () => {
+            setTimeout(()=>{
+                setReqStatus({error: null, message: ''})
+            },3000)
+        },
+    })
+
       const handleSubmit = () => {
-        console.log('formInfo', fields)
+        const reqData = {
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid'), // USER UID
+            product_id: productData?.product_id,
+            settings : {
+            ...fields
+            }
+        }
+        // console.log('formInfo', reqData)
+        submitSettings.mutate(reqData)
       }
 
       if (isCustom ===  true){
@@ -33,17 +67,24 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{
                                 <div key={key} className="form-group col-md-12">
                                     <label htmlFor="name1">{value.name}</label>
                                     {value.controls == 'TEXT' ?
-                                        <input name={value.name} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
+                                        <input name={value.name.toLowerCase().replace(" ", "_")} type="text" className="form-control" id={key} value={fields[value.name.toLowerCase().replace(" ", "_")]} onChange={handleChange} />
                                         :value.controls == 'TEXTAREA' ?
-                                        <textarea name={value.name} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
+                                        <textarea name={value.name.toLowerCase().replace(" ", "_")} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fields[value.name.toLowerCase().replace(" ", "_")]} onChange={handleChange} />
                                         :
                                         null
                                     }
                                 </div>
                             ))}
                         </>
+                        {reqStatus.message &&
+                            <>
+                            <div className="col-12">
+                                <p className={reqStatus.error ? 'text-danger' : 'text-success'}>{reqStatus.message}</p>
+                            </div>
+                            </>
+                        }
                         <div className="form-group col-md-12" style={{textAlign:'right'}}>
-                            <button onClick={handleSubmit} type="button" className="btn btn-primary">Update</button>
+                            <button onClick={handleSubmit} type="button" className="btn btn-primary" disabled={submitSettings.isPending}>{submitSettings.isPending ? 'Loading...' : 'Update'}</button>
                         </div>
                     </div>
                 </form>

src/services/services.js

@@ -150,6 +150,16 @@ export const completePWDReset = (reqData) => {
     return postAuxEnd('/panel/auth/resetcomplete', postData, false)
 }
 
+// FUNCTION TO SUBMIT PAGE TAB SETTINGS
+export const pageSettings = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/myproduct/settings`, postData, false)
+}
+
+
+