fixed iframe bug

src/component/product/ProductActive.jsx

@@ -1,10 +1,14 @@
-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({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: {} },
@@ -15,6 +19,27 @@ export default function ProductActive({productData}){
         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(
         <>
             {/*<BreadcrumbComBS title='Active Product Name' paths={['Dashboard', 'Product']} />*/}
@@ -25,19 +50,21 @@ export default function ProductActive({productData}){
 
             <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">
-                        <h4 className="card-title">{productData?.internal_url ? productData?.internal_url : 'https://25681.devprov.mermsemr.com/'}</h4>
+                                    <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 style={{borderWidth: '0px;'}} src={productData?.internal_url ? productData?.internal_url : 'https://25681.devprov.mermsemr.com/'} width="100%" height="600" title={productData?.internal_url ? productData?.internal_url : '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>
@@ -80,18 +107,8 @@ export default function ProductActive({productData}){
                             </div>
                         </div>
                     </div>
-
-
-
-
                 </>
-
-
-
-
-
             </div>
-
         </>
     )
 }

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 = {