fixed iframe bug

src/App.js

@@ -12,7 +12,7 @@ const queryClient = new QueryClient({
       refetchOnWindowFocus: false,
       retry: 3,
       // refetchOnMount: false,
-      staleTime: 360000 // can also be a number in millisecond
+      staleTime: 10*60*1000 // can also be a number in millisecond
     },
   },
 })

src/component/auth/Forgetpwd2.jsx

@@ -51,7 +51,7 @@ export default function Forgetpwd2() {
                                 <div className="mt-5 d-flex">
                                     <div className="bg-white register p-5">
                                         <h1 className="mb-2">MERMS Panel</h1>
-                                        <p>Please enter your username.</p>
+                                        {!mutation.isSuccess && <p>Please enter your username.</p>}
                                         <Formik
                                         initialValues={initialValues}
                                         validationSchema={validationSchema}

src/component/product/ProductActive.jsx

@@ -1,10 +1,44 @@
-import React from "react";
+import React, { useRef } 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(){
+export default function ProductActive({productData}){
+    const iframe = useRef()
+
+    const settingsObject = {
+        home_tab: { title: 'Home Page', controls: 'home', active: 'active show' , data: {}},
+        footer_tab: { title: 'Footer', controls: 'footer', active: '', data: {} },
+        about_tab: { title: 'About Page', controls: 'about', active: '', data: {} },
+        contact_tab: { title: 'Contact Page', controls: 'contact', active: '', data: {} },
+        social_tab: { title: 'Socials', controls: 'social', active: '', data: {} },
+        template_tab: { title: 'Template', controls: 'template', active: '', data: {} },
+        color_scheme_tab: { title: 'Color Scheme', controls: 'color-scheme', active: '', data: {} },
+    };
+
+    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(
         <>
@@ -15,20 +49,22 @@ export default function ProductActive(){
 
 
             <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">
+                                    <div className="card-heading d-flex justify-content-between">
-                        <h4 className="card-title">https://25681.devprov.mermsemr.com/</h4>
+                                        <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 style={{borderWidth: '0px;'}} src="https://25681.devprov.mermsemr.com/" width="100%" height="600" title="https://25681.devprov.mermsemr.com"></iframe>
+                                    <iframe ref={iframe} style={{borderWidth: '0px;'}} src={externalUrl} width="100%" height="600" title={productData?.internal_url ? productData?.internal_url : 'https://25681.devprov.mermsemr.com/'}></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>
@@ -42,74 +78,37 @@ export default function ProductActive(){
                                 <div className="card-body">
                                     <div className="tab tab-vertical">
                                         <ul className="nav nav-tabs" role="tablist">
+                                            <>
+                                                {Object.entries(settingsObject).map(([key, value]) => (
                                                     <li className="nav-item">
-                                <a className="nav-link active show" id="general-tab" data-bs-toggle="pill" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="true">General</a>
+                                                    <a className={`nav-link ${value.active}`}
-                            </li>
+                                                        id={key} data-bs-toggle="pill"
-                            <li className="nav-item">
+                                                        data-bs-target={`#${value.controls}`}
-                                <a className="nav-link" id="home-tab" data-bs-toggle="pill" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="false">Home Page</a>
+                                                        type="button" role="tab"
-                            </li>
+                                                        aria-controls={value.controls}
-                            <li className="nav-item">
+                                                        aria-selected="true">{value.title}</a>
-                                <a className="nav-link" id="footer-tab" data-bs-toggle="pill" data-bs-target="#footer" type="button" role="tab" aria-controls="footer" aria-selected="false">Footer</a>
-                            </li>
-                            <li className="nav-item">
-                                <a className="nav-link" id="about-tab" data-bs-toggle="pill" data-bs-target="#about" type="button" role="tab" aria-controls="about" aria-selected="false">About Page</a>
-                            </li>
-                           <li className="nav-item">
-                                <a className="nav-link" id="contact-tab" data-bs-toggle="pill" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="true">Contact Page</a>
-                            </li>
-                            <li className="nav-item">
-                                <a className="nav-link" id="social-tab" data-bs-toggle="pill" data-bs-target="#social" type="button" role="tab" aria-controls="social" aria-selected="false">Socials</a>
-                            </li>
-                            <li className="nav-item">
-                                <a className="nav-link" id="template-tab" data-bs-toggle="pill" data-bs-target="#template" type="button" role="tab" aria-controls="template" aria-selected="false">Template</a>
-                            </li>
-                            <li className="nav-item">
-                                <a className="nav-link" id="color-scheme-tab" data-bs-toggle="pill" data-bs-target="#color-scheme" type="button" role="tab" aria-controls="color-scheme" aria-selected="false">Color Scheme</a>
                                                     </li>
+                                                ))}
+                                            </>
                                         </ul>
                                         <div className="tab-content">
-                            <div className="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
+                                            <>
-                                <GeneralTab name='General' />
+                                                {Object.entries(settingsObject).map(([key, value]) => (
+                                                    <div className={`tab-pane fade  ${value.active}`}
+                                                        id={value.controls} role="tabpanel"
+                                                        aria-labelledby={key}>
+                                                        <GeneralTab name={value.title} data={value.data} />
                                                     </div>
-                            <div className="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
+                                                ))}
-                                <GeneralTab name='Home Page' />
+                                            </>
-                            </div>
-                            <div className="tab-pane fade" id="footer" role="tabpanel" aria-labelledby="footer-tab">
-                                <GeneralTab name='Footer' />
-                            </div>
-                            <div className="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">
-                                <GeneralTab name='About Page' />
-                            </div>
-                            <div className="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
-                                <GeneralTab name='Contact Page' />
-                            </div>
-                            <div className="tab-pane fade" id="social" role="tabpanel" aria-labelledby="social-tab">
-                                <GeneralTab name='Socials' />
-                            </div>
-                            <div className="tab-pane fade" id="template" role="tabpanel" aria-labelledby="template-tab">
-                                <GeneralTab name='Template' />
-                            </div>
-                            <div className="tab-pane fade" id="color-scheme" role="tabpanel" aria-labelledby="color-scheme-tab">
-                                <GeneralTab name='Color Scheme' />
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
+                </>
             </div>
-
-
-
-
-</>
-
-
-
-
-
-            </div>
-
         </>
     )
 }

src/component/product/settingsTab/GeneralTab.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 export default function GeneralTab({name='Full Name'}) {
   return (
     <div className="page-account-form">
-        <div className="p-4">
+        <div className="p-0">
             <form>
                 <h4>{name}</h4>
                 <div className="form-row">

src/css/partials/_header.scss

@@ -588,11 +588,11 @@
                     left: 0px;
                 }
             }
-            // .show{
+            .show{
-            //     margin-top: 0!important;
+                margin-top: 0!important;
-            //     visibility: visible!important;
+                visibility: visible!important;
-            //     opacity: 1!important;
+                opacity: 1!important;
-            // }
+            }
             // .show + .dropdown-menu{
             //     margin-top: 0;
             //     visibility: visible;

src/services/services.js

@@ -115,6 +115,14 @@ export const productsData = (reqData) => {
     return postAuxEnd(`/panel/account/products`, postData, false)
 }
 
+// FUNCTION TO REFRESH SITE
+export const productRefreshSite = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/products/refresh`, postData, false)
+}
+
 // FUNCTION TO GET DASHBOARD RECENT ACTIONS SECTION
 export const recentActions = (reqData) => {
     let postData = {