diff --git a/src/component/product/ProductActive.jsx b/src/component/product/ProductActive.jsx index 3115fac..d21acc5 100644 --- a/src/component/product/ProductActive.jsx +++ b/src/component/product/ProductActive.jsx @@ -1,65 +1,15 @@ -import React, { useRef, useState } from "react"; +import React, { useMemo, useRef, useState } from "react"; +import { useSelector } from "react-redux"; 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"; +import { useMutation, useQuery } from "@tanstack/react-query"; +import { productRefreshSite, getSettingsData } from "../../services/services"; +import Settings from "./settingsTab/Settings"; +import queryKeys from "../../services/queryKeys"; 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) => { @@ -119,38 +69,7 @@ export default function ProductActive({productData}){
-
- -
- <> - {Object.entries(settingsObject).map(([key, value]) => ( -
- -
- ))} - -
-
+
diff --git a/src/component/product/__ProductActive.jsx b/src/component/product/__ProductActive.jsx deleted file mode 100644 index 23202b2..0000000 --- a/src/component/product/__ProductActive.jsx +++ /dev/null @@ -1,149 +0,0 @@ -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( - <> -
- <> -
-
-
-
-
-

{externalUrl}

- -
-
-
- -
-
- -
-
-
-
-
-
-
-

Site Settings

-
-
-
-
- -
- <> -
- -
- -
-
-
-
-
-
- -
- - ) -} \ No newline at end of file diff --git a/src/component/product/settingsTab/GeneralTab.jsx b/src/component/product/settingsTab/GeneralTab.jsx index 4358384..5d34092 100644 --- a/src/component/product/settingsTab/GeneralTab.jsx +++ b/src/component/product/settingsTab/GeneralTab.jsx @@ -17,7 +17,6 @@ const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{ setFields(prev => ({...prev, [name]:value})) } - const submitSettings = useMutation({ mutationFn: (fields) => { return pageSettings(fields) diff --git a/src/component/product/settingsTab/Settings.jsx b/src/component/product/settingsTab/Settings.jsx new file mode 100644 index 0000000..c3b5320 --- /dev/null +++ b/src/component/product/settingsTab/Settings.jsx @@ -0,0 +1,137 @@ +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 }, + } + + 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 = 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: {} }, + 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 {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 + // console.log('data', settingsData) + + return ( + <> + {isFetching ? + <> +
+
+

Loading...

+
+
+ + : isError ? +
+
+

{error.message}

+
+
+ : +
+ +
+ <> + {Object.entries(settingsObject).map(([key, value]) => ( +
+ +
+ ))} + +
+
+ } + + ) + } +) + +export default Settings diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js index b6ebd42..c641312 100644 --- a/src/services/queryKeys.js +++ b/src/services/queryKeys.js @@ -5,6 +5,7 @@ const queryKeys = { myproduct_provision: ['myproduct_provision'], product_page: ['product_page'], recentAction: ['recent-action'], + settingsData: ['settings_data'], dashboard: ['dashboard'], topBar: ['top-bar'], diff --git a/src/services/services.js b/src/services/services.js index 3e2af15..644b4b3 100644 --- a/src/services/services.js +++ b/src/services/services.js @@ -158,6 +158,13 @@ export const pageSettings = (reqData) => { return postAuxEnd(`/panel/myproduct/settings`, postData, false) } +// FUNCTION TO GET SETTINGS DATA +export const getSettingsData = (reqData) => { + let postData = { + ...reqData, + } + return postAuxEnd(`/panel/myproduct/settings/values`, postData, false) +}