fixed product url refresh on successful subscription

.env

@@ -2,14 +2,14 @@ SKIP_PREFLIGHT_CHECK=true
 REACT_APP_NODE_ENV="development"
 REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
 REACT_APP_MAIN_API="https://devapi.mermsemr.com"
-REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
-REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
 
 # login footer links
-REACT_APP_HOME_LINK='https://dev-www.mermsemr.com/'
+REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
-REACT_APP_ABOUT_LINK='https://dev-www.mermsemr.com/about'
+REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
-REACT_APP_CONTACTS_LINK='https://dev-www.mermsemr.com/contacts'
+REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
-REACT_APP_TERMS_LINK='https://dev-www.mermsemr.com/terms'
+REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
 
 # Inactivity timeout/logout AT 10MINS
 REACT_APP_TIMEOUT=600000

.env.development

@@ -2,14 +2,15 @@ SKIP_PREFLIGHT_CHECK=true
 REACT_APP_NODE_ENV="development"
 REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
 REACT_APP_MAIN_API="https://devapi.mermsemr.com"
-REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
-REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
 
 # login footer links
-REACT_APP_HOME_LINK='https://dev-www.mermsemr.com/'
+REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
-REACT_APP_ABOUT_LINK='https://dev-www.mermsemr.com/about'
+REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
-REACT_APP_CONTACTS_LINK='https://dev-www.mermsemr.com/contacts'
+REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
-REACT_APP_TERMS_LINK='https://dev-www.mermsemr.com/terms'
+REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
 
 # Inactivity timeout/logout AT 10MINS
 REACT_APP_TIMEOUT=600000
+

.env.production

@@ -3,6 +3,7 @@ REACT_APP_NODE_ENV="production"
 REACT_APP_SOCKET_URL="https://socket.mermsemr.com"
 REACT_APP_MAIN_API="https://devapi.mermsemr.com"
 REACT_APP_MEDIA_SERVER="https://media.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://socket.mermsemr.com"
 
 # login footer links
 REACT_APP_HOME_LINK='https://www.mermsemr.com/'

.env.qa

@@ -0,0 +1,15 @@
+SKIP_PREFLIGHT_CHECK=true
+REACT_APP_NODE_ENV="development"
+REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
+REACT_APP_MAIN_API="https://devapi.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://qa-media.mermsemr.com"
+REACT_APP_MAIN_SOCKET="https://devsocket.mermsemr.com"
+
+# login footer links
+REACT_APP_HOME_LINK='https://qa-www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://qa-www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://qa-www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://qa-www.mermsemr.com/terms'
+
+# Inactivity timeout/logout AT 10MINS
+REACT_APP_TIMEOUT=600000

docker-compose.yml

@@ -20,7 +20,7 @@ services:
     extra_hosts:
       - api.mermsemr.com:10.10.33.15
       - devapi.mermsemr.com:10.10.33.15
-      - dev-socket.mermsemr.com:10.10.33.15
+      - devsocket.mermsemr.com:10.10.33.15
       - socket.mermsemr.com:10.10.33.15
       - dev-media.mermsemr.com:10.10.33.15
       - media.mermsemr.com:10.10.33.15

src/component/home/ProductsURL.jsx

@@ -64,10 +64,13 @@ export default function ProductsURL() {
                                     return (
                                         <tr key={index}>
                                             <td>{Number(item?.id)}</td>
-                                            <td>{item?.description} - <a href={productUrl} target='_blank'>{item?.external_url}</a></td>
+                                            <td>
+                                                {item?.description} - 
+                                                {/* <a href={productUrl} target='_blank'>{item?.external_url}</a> */}
+                                            </td>
 
                                             <td><span className={`badge ${statusColor}`}>{item?.status}</span></td>
-                                            <td><a className="mr-3" href=""><i className="fe fe-edit"></i></a></td>
+                                            <td><a className="mr-3" href={productUrl} target='_blank'><i className="fe fe-edit"></i></a></td>
                                         </tr>
                                     )
                                 })}

src/component/product/ProductFactory.jsx

@@ -61,21 +61,20 @@ export default function ProductFactory(){
                                 <p className='text-danger'>{getProductData?.error?.message}</p>
                             </div>
                         </div>
-                        :
+                    :
-                <div>
+                    <div>
-                    {(product_status <= productConst.PRODUCT_AVAILABLE)?
+                        {(product_status <= productConst.PRODUCT_AVAILABLE)?
-                        <ProductStart productData={myproduct_data} />
+                            <ProductStart productData={myproduct_data} />
-                        :<></> }
+                            :<></> }
 
-                     {(product_status === productConst.PRODUCT_PROVISIONING)?
+                        {(product_status === productConst.PRODUCT_PROVISIONING)?
-                        <ProductProvision productData={myproduct_data} />
+                            <ProductProvision productData={myproduct_data} />
-                        :<></> }
+                            :<></> }
 
-                    {(product_status === productConst.PRODUCT_ACTIVE)?
+                        {(product_status === productConst.PRODUCT_ACTIVE)?
-                        <ProductActive productData={myproduct_data} />
+                            <ProductActive productData={myproduct_data} />
-                        :<></> }
+                            :<></> }
-
+                    </div>
-                </div>
                }
             </div>
         </>

src/component/product/ProductStart.jsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
+import {useNavigate} from 'react-router-dom'
 import getImage from "../../utils/getImage";
-// import { Modal } from "bootstrap";
+import { Modal } from "bootstrap";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { subscribe } from '../../services/services'
 import queryKeys from "../../services/queryKeys";
@@ -8,26 +9,27 @@ import queryKeys from "../../services/queryKeys";
 export default function ProductStart(props){
 
     const queryClient = useQueryClient()
+    const navigate = useNavigate()
 
     const [requestStatus, setRequestStatus] = useState({status:false, message: ''})
-
     const product_uid = props?.productData?.product_uid;
     const product_id = props?.productData?.product_id;
-    const productBanner = "product/"+props.productData?.banner;
+    const productBanner = `product/${props.productData?.banner}`;
-    const productTitle  = props.productData?.title;
+    const productTitle  = props?.productData?.title;
-    const productDescription  = props.productData?.description;
+    const productDescription  = props?.productData?.description;
-    const promotion_text  = props.productData?.promotion_text;
+    const promotion_text  = props?.productData?.promotion_text;
-    const product_status  = props.productData?.status;
+    const product_status  = props?.productData?.status;
-    const saleText  = props.productData?.sale_text;
+    const saleText  = props?.productData?.sale_text;
 
-    const modalRef = useRef()
+    const modalRef = useRef(null)
 
-    const refetch = () => {
+    const invalidate = () => {
-        queryClient.refetchQueries({
+        // queryClient.refetchQueries({
-            queryKey: [...queryKeys.product],
+        //     queryKey: [...queryKeys.product],
-            // type: 'active',
+        //     // type: 'active',
-            // exact: true,
+        //     // exact: true,
-        })
+        // })
+        queryClient.invalidateQueries({ queryKey: [...queryKeys.product_url] })
     }
 
     const mutation = useMutation({
@@ -40,9 +42,12 @@ export default function ProductStart(props){
         },
           onSuccess: (res) => {
             setRequestStatus({status:true, message:'successful'})
+            navigate(`/product/${product_id}`, {replace: true}) //'/product/'+ product_id
+            dismissModal()
             console.log(res)
         },
         onSettled: () => {
+            invalidate() // Invalidates selected queries
             setTimeout(()=>{
                 setRequestStatus({status:false, message:''})
             },4000)
@@ -53,6 +58,22 @@ export default function ProductStart(props){
         mutation.mutate({product_id: product_id})
     }
 
+    const dismissModal = () => {
+        const body = document.querySelector('body')
+        body.removeAttribute('style')
+        // body.classList.toggle('modal-open')
+
+        const modalBackdrop = document.querySelectorAll('.modal-backdrop')
+        modalBackdrop.forEach(item => {
+            if (item) {
+                item.remove();
+            }
+        })
+        
+        const modal = Modal.getInstance(modalRef.current);
+        modal && modal.hide();
+    };
+
     return (
         <>
             <div className="row">
@@ -113,7 +134,7 @@ export default function ProductStart(props){
                     <div className="modal-content">
                         <div className="modal-header">
                             <h5 className="modal-title" id="verticalCenterTitle">{productTitle}</h5>
-                            <button onClick={refetch} type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
+                            <button type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
                                 <span aria-hidden="true">&times;</span>
                             </button>
                         </div>
@@ -140,7 +161,7 @@ export default function ProductStart(props){
                             )}
                         </div>
                         <div className="modal-footer">
-                            <button onClick={refetch} type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
+                            <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
                             <button type="button" className="btn btn-success" disabled={mutation.isSuccess} onClick={handleSubscribe}>{mutation.isPending ? 'loading...' : 'Start'}</button>
                         </div>
                     </div>

src/services/queryKeys.js

@@ -1,11 +1,11 @@
 const queryKeys = {
     user_details: ['user_details'],
+    product_url: ['product_url'],
+    product: ['product-data'],
     
     dashboard: ['dashboard'],
     topBar: ['top-bar'],
     recentAction: ['recent-action'],
-    product: ['product-data'],
-    product_url: ['product_url'],
     myproduct_provision: ['myproduct_provision'],
     calendar_events: ['calendar_events'],
     contacts: ['contacts']