fixed bug

src/App.css

@@ -40,3 +40,11 @@ button{
   font-size: 1rem!important;
   font-weight: 700!important;
 }
+
+.font-600 {
+  font-weight: 600;
+}
+
+.accordion-button, .accordion-button:not(.collapsed) {
+  background-color: transparent!important;
+}

src/App.js

@@ -1,23 +1,28 @@
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
+import { Provider } from 'react-redux';
+import store from './store/store'
 import AppRouters from './AppRouters';
 
 import './App.css';
 
 
-function App() {
+const queryClient = new QueryClient({
-  const queryClient = new QueryClient({
+  defaultOptions: {
-    defaultOptions: {
+    queries: {
-      queries: {
+      refetchOnWindowFocus: false,
-        refetchOnWindowFocus: false,
+      retry: 3,
-        retry: 3,
+      // refetchOnMount: false,
-        // refetchOnMount: false,
+      staleTime: 360000 // can also be a number in millisecond
-        staleTime: Infinity // can also be a number in millisecond
-      },
     },
-  })
+  },
+})
+
+function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <AppRouters />
+      <Provider store={store}>
+        <AppRouters />
+      </Provider>
     </QueryClientProvider>
   );
 }

src/AppRouters.jsx

@@ -18,6 +18,7 @@ import SettingsPage from './views/SettingsPage'
 import ProductPage from './views/ProductPage'
 import SocketIOContextProvider from './component/context/SocketIOContext';
 import CSignupPage from './views/CSignupPage';
+import HelpPage from './views/HelpPage';
 
 function AppRouters() {
   return (
@@ -45,6 +46,7 @@ function AppRouters() {
               <Route path={siteLinks.user} element={<UserPage />} />
               <Route path={siteLinks.calendar} element={<CalendarPage />} />
               <Route path={siteLinks.settings} element={<SettingsPage />} />
+              <Route path={siteLinks.help} element={<HelpPage />} />
             </Route>
           </Route>
         </Route>

src/component/help/HelpCom.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+
+
+export default function HelpCom(){
+
+    return(
+        <>
+            <BreadcrumbComBS title='Frequesntly Asked Questions' paths={['Dashboard', 'Help']} />
+            {/*<div className="row">*/}
+            {/*    <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
+            {/*</div>*/}
+
+
+            <div className="row account-contant">
+                <div className="col-12">
+                    <div className="card card-statistics">
+                        <div className="card-body p-lg-15" style={{backgroundColor:"#f9f9fb"}}>
+                            
+                                <p className="mb-4">First, a disclaimer – the entire process of writing a blog post often takes more than a couple of hours, even if you can type eighty words as per minute and your writing skills are sharp.</p>
+                            <div className="row">
+                                <div className="accordion" id="accordionExample">
+                                    {['a', 'b', 'c', 'd'].map((item, index)=>{
+                                        return (
+                                            <div className="accordion-item">
+                                                <h2 className="accordion-header">
+                                                <button className="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target={`#${item}`} aria-expanded="true" aria-controls="collapseOne">
+                                                    {`Accordion Item ${item} 1`}
+                                                </button>
+                                                </h2>
+                                                <div id={item} className={`accordion-collapse collapse ${index == 0 && 'show'}`} data-bs-parent="#accordionExample">
+                                                <div className="accordion-body">
+                                                    <strong>This is the first item’s accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the accordion-body, though the transition does limit overflow.
+                                                </div>
+                                                </div>
+                                            </div>
+                                        )
+                                    })}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </>
+    )
+}

src/component/layout/layoutcom/UserHeader.jsx

@@ -74,8 +74,8 @@ export default function UserHeader(){
                                     <div className="bg-gradient px-4 py-3">
                                         <div className="d-flex align-items-center justify-content-between">
                                             <div className="mr-1">
-                                                <h5 className="text-white mb-0">{userDetails?.firstname} {userDetails?.lastname}</h5>
+                                                <h4 className="text-white mb-0 font-600">{userDetails?.firstname} {userDetails?.lastname}</h4>
-                                                <small className="text-white">{userDetails.email}</small>
+                                                <p className="text-white font-600">{userDetails.email}</p>
                                             </div>
                                             <a href="#" onClick={logout} className="text-white font-20 tooltip-wrapper" data-toggle="tooltip"
                                                data-placement="top" title="" data-original-title="Logout"> <i
@@ -92,8 +92,10 @@ export default function UserHeader(){
                                         <Link className="dropdown-item d-flex nav-link" to={siteLinks.settings}>
                                             <i className=" ti ti-settings pr-2 text-info"></i> Settings
                                         </Link>
-                                        <a className="dropdown-item d-flex nav-link" href="#">
+                                        <Link className="dropdown-item d-flex nav-link" to={siteLinks.help}>
-                                            <i className="fa fa-compass pr-2 text-warning"></i> Need help?</a>
+                                            <i className="fa fa-compass pr-2 text-warning"></i> 
+                                            Need help?
+                                        </Link>
 
                                         {/*<div className="row mt-2">*/}
                                         {/*    <div className="col">*/}

src/component/product/ProductProvision.jsx

@@ -25,7 +25,7 @@ export default function ProductProvision(props){
         queryFn: () => productProvision(reqData)
     })
 
-    const provisionData = provision?.data?.provision
+    const provisionData = provision?.data
 
     useEffect(()=>{
         joinRoom(productSubUID); // provision subscription room
@@ -60,7 +60,7 @@ export default function ProductProvision(props){
                                     <div className="card-body">
                                         <div className="progress">
                                             <div className="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
-                                            aria-valuenow={`${provisionData.percent_completed}%`} aria-valuemin="0" aria-valuemax="100" style={{width:`${provisionData.percent_completed}%`}} ></div>
+                                            aria-valuenow={`${provisionData?.percent_completed}%`} aria-valuemin="0" aria-valuemax="100" style={{width:`${provisionData?.percent_completed}%`}} ></div>
                                         </div>
                                 </div>
                             </div>
@@ -111,9 +111,7 @@ export default function ProductProvision(props){
                                 <h4 className="card-title" style={{padding:'10px'}}>Started creating your selection</h4>
                                 <img className="card-img-top" src={getImage('widget/working.jpg')}  alt="Card image cap" />
                                 <div className="card-body">
-                                <p>
+                                    <div className="" dangerouslySetInnerHTML={{__html: productDescription}}/>
-                                    {productDescription}
-                                </p>
                                 </div>
                             </div>
 

src/component/product/ProductStart.jsx

@@ -18,6 +18,8 @@ export default function ProductStart(props){
     const productDescription  = props.productData?.description;
     const promotion_text  = props.productData?.promotion_text;
     const product_status  = props.productData?.status;
+    const saleText  = props.productData?.sale_text;
+    
     const modalRef = useRef()
 
     const refetch = () => {
@@ -59,7 +61,8 @@ export default function ProductStart(props){
                         <img className="card-img-top" src={getImage(productBanner)}  alt="Card image cap" />
                         <div className="card-body">
                             <h4 className="card-title">{productTitle}</h4>
-                            <p className="card-text">{productDescription}</p>
+                            <div className="card-text" dangerouslySetInnerHTML={{__html: productDescription}}/>
+                            {/* <p className="card-text">{productDescription}</p> */}
                         </div>
                     </div>
                 </div>
@@ -115,16 +118,7 @@ export default function ProductStart(props){
                             </button>
                         </div>
                         <div className="modal-body">
-                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+                            <div className="" dangerouslySetInnerHTML={{__html: saleText}}/>
-                                in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at
-                                eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
-                            </p>
-                            <p>
-                                sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia
-                                bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque
-                                nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor
-                                fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-                            </p>
                             {/* {mutation.error &&
                             <>
                                 <div className="col-12">

src/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 // import './index.css';
-import { Provider } from 'react-redux';
+// import { Provider } from 'react-redux';
+// import store from './store/store'
 import { BrowserRouter } from 'react-router-dom';
-import store from './store/store'
 
 import App from './App';
 //import reportWebVitals from './reportWebVitals';
@@ -17,9 +17,7 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <BrowserRouter>
-      <Provider store={store}>
+      <App />
-        <App />
-      </Provider>
     </BrowserRouter>
   </React.StrictMode>
 );

src/links/siteLinks.js

@@ -1,5 +1,6 @@
 const siteLinks = {
     error: '*',
+    help: '/help',
     home: '/',
     dash: '/dash',
     product: '/product/*',

src/views/HelpPage.jsx

@@ -0,0 +1,7 @@
+import HelpCom from '../component/help/HelpCom'
+
+export default function HelpPage() {
+  return (
+    <HelpCom />
+  )
+}