provison room

src/component/product/ProductActive.jsx

@@ -1,14 +1,15 @@
-import React, { useMemo, useRef, useState } from "react";
+import React, {useEffect, useMemo, useRef, useState} from "react";
 import { useSelector } from "react-redux";
 import getImage from "../../utils/getImage";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { productRefreshSite, getSettingsData } from "../../services/services";
 import Settings from "./settingsTab/Settings";
 import queryKeys from "../../services/queryKeys";
+import {SocketContextValues} from "../context/SocketIOContext";
 
 
 export default function ProductActive({productData}){
-
+    const {joinRoom} = SocketContextValues() // Destructures values from socket context
     const iframe = useRef()
 
     const refresh = useMutation({
@@ -31,6 +32,13 @@ export default function ProductActive({productData}){
     }
     let externalUrl= 'https://'+productData?.internal_url
 
+    const productSubUID = productData.subscription_uid;
+    useEffect(() => {
+        const provision_room  = "PROVISION_"+productSubUID;
+        console.log("JOINING ROOM ON ACTIVE *** ", provision_room);
+        joinRoom(provision_room); // provision subscription room
+    }, [])
+
     return(
         <>
             {/*<BreadcrumbComBS title='Active Product Name' paths={['Dashboard', 'Product']} />*/}