core-outline 1.1.4 → 1.1.6

package/dist/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 var uuid = require('uuid');
 var engine_ioClient = require('engine.io-client');
@@ -5966,12 +5968,15 @@ Object.assign(lookup, {
     connect: lookup,
 });
 
-const socket = lookup("http://localhost:4000");
+const socket = lookup('http://localhost:8000');
+
 const CoreOutline = ({
   children,
-  data_source_id
+  data_source_id,
+  data_source_secret
 }) => {
   const [events, setEvents] = React.useState([]);
+  const [replayEvents, setReplayEvents] = React.useState([]);
   const recorderActive = React.useRef(false);
   const [currentPage, setCurrentPage] = React.useState(window.location.href);
   const [location, setLocation] = React.useState({
@@ -5979,36 +5984,87 @@ const CoreOutline = ({
     longitude: null
   });
   const [browser, setBrowser] = React.useState(getBrowserInfo());
-  const sessionId = uuid.v4();
-  React.useEffect(() => {
-    socket.emit("dataEvent", {
-      topic: "session-data",
+  const [appToken, setAppToken] = React.useState('');
+  const [sessionId, setSessionId] = React.useState('');
+  async function authorizeApp(data_source_id, data_source_secret) {
+    const requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        data_source_id: data_source_id,
+        data_source_secret: data_source_secret
+      })
+    };
+    const response = fetch(`http://localhost:4000/data-source/authorize`, requestOptions).then(response => response.json()).then(data => {
+      setAppToken(data.app_token);
+      return data;
+    }).catch(error => {
+      console.error('Error:', error);
+      return error;
+    });
+    return response;
+  }
+  React.useEffect(async () => {
+    await authorizeApp(data_source_id, data_source_secret);
+    setSessionId(uuid.v4());
+    localStorage.setItem('coreOutlineSessionId', sessionId);
+    localStorage.setItem('coreOutlineDataSourceIdId', data_source_id);
+    console.log('Session', sessionId);
+    socket.send({
+      topic: 'session-data',
       data_source_id: data_source_id,
       session_id: sessionId,
       start_date: new Date().toLocaleString(),
       latitude: location.latitude,
       longitude: location.longitude,
       browser: browser,
-      event_id: "SESSION_START"
+      event_id: 'SESSION_START'
     });
     return () => {
-      socket.emit("dataEvent", {
-        topic: "session-data",
+      socket.send({
+        topic: 'session-data',
         data_source_id: data_source_id,
         session_id: sessionId,
         start_date: new Date().toLocaleString(),
         latitude: location.latitude,
         longitude: location.longitude,
         browser: browser,
-        event_id: "SESSION_END"
+        event_id: 'SESSION_END'
       });
     };
   }, []);
   React.useEffect(() => {
+    const navigationEvent = {
+      type: 4,
+      data: {
+        href: window.location.href,
+        width: 1536,
+        height: 730
+      },
+      timestamp: Date.now()
+    };
+    const startTime = performance.now();
+    const observer = new MutationObserver(() => {
+      const endTime = performance.now();
+      const loadTime = endTime - startTime;
+      navigationEvent.data.loadTime = loadTime;
+      const hours = Math.floor(loadTime / 3600000);
+      const minutes = Math.floor(loadTime % 3600000 / 60000);
+      const seconds = Math.floor(loadTime % 60000 / 1000);
+      navigationEvent.data.loadTimeFormatted = `${hours} hours ${minutes} minutes ${seconds} seconds`;
+      observer.disconnect();
+    });
+    observer.observe(document, {
+      childList: true,
+      subtree: true
+    });
+    setEvents(prevEvents => [...prevEvents, navigationEvent]);
     const handleNavigation = () => {
       setCurrentPage(window.location.href);
-      socket.emit("dataEvent", {
-        topic: "session-data",
+      socket.send({
+        topic: 'session-data',
         data_source_id: data_source_id,
         session_id: sessionId,
         start_date: new Date().toLocaleString(),
@@ -6016,23 +6072,23 @@ const CoreOutline = ({
         longitude: location.longitude,
         browser: browser,
         page_name: window.location.href,
-        event_id: "PAGE_NAVIGATION"
+        event_id: 'PAGE_NAVIGATION'
       });
       saveEvents(events);
     };
-    window.addEventListener("popstate", handleNavigation);
+    window.addEventListener('popstate', handleNavigation);
     const originalPushState = window.history.pushState;
     window.history.pushState = function (...args) {
       originalPushState.apply(this, args);
       handleNavigation();
     };
     return () => {
-      window.removeEventListener("popstate", handleNavigation);
+      window.removeEventListener('popstate', handleNavigation);
       window.history.pushState = originalPushState;
     };
   }, [currentPage]);
   React.useEffect(() => {
-    console.log("Location", location);
+    console.log('Location', location);
     getLocation();
   }, []);
   React.useEffect(() => {
@@ -6040,8 +6096,46 @@ const CoreOutline = ({
     if (!recorderActive.current) {
       stopFn = record({
         emit(event) {
+          setReplayEvents(prevEvents => [...prevEvents, event]);
+        },
+        maskAllInputs: false,
+        maskTextSelector: null
+      });
+      recorderActive.current = true;
+    }
+    return () => {
+      if (stopFn) {
+        stopFn();
+        saveEvents(events);
+        recorderActive.current = false;
+      }
+    };
+  }, []);
+  React.useEffect(() => {
+    let stopFn;
+    if (!recorderActive.current) {
+      stopFn = record({
+        emit(event) {
+          console.log('Event:', event);
+          if (event.type == 3 && event.data.type == 2) {
+            return;
+          }
+          if (event.type == 4) {
+            return;
+          }
+          if (event.type == 3 && event.data.source == 0) {
+            return;
+          }
+          if (event.type == 3 && event.data.source == 1) {
+            return;
+          }
+          if (event.type == 3 && event.data.type == 3) {
+            console.log('Contextmenu Event:', event);
+          }
           setEvents(prevEvents => [...prevEvents, event]);
-        }
+        },
+        maskAllInputs: false,
+        maskTextSelector: null
       });
       recorderActive.current = true;
     }
@@ -6055,62 +6149,96 @@ const CoreOutline = ({
   }, []);
   React.useEffect(() => {
     const handleClick = event => {
-      console.log("Button clicked:", event.target.id);
-      // const itemId = event.target.id;
-      socket.emit("dataEvent", {
-        topic: "session-data",
+      console.log('Inner text:', event.target.innerText);
+      const clickEvent = {
+        type: EventType.IncrementalSnapshot,
+        data: {
+          source: IncrementalSource.MouseInteraction,
+          type: MouseInteractions.Click,
+          id: event.target.id,
+          x: event.clientX,
+          y: event.clientY
+        },
+        timestamp: Date.now()
+      };
+      const clickedElement = document.elementFromPoint(clickEvent.data.x, clickEvent.data.y);
+      if (clickedElement) {
+        clickEvent.data.metadata = {
+          label: clickedElement.getAttribute('data-label') || clickedElement.innerText || null,
+          value: clickedElement.getAttribute('value') || clickedElement.innerText || null,
+          id: clickedElement.getAttribute('id') || clickedElement.innerText || null,
+          name: clickedElement.getAttribute('name') || clickedElement.innerText || null,
+          class: clickedElement.getAttribute('class') || clickedElement.innerText || null,
+          tag: clickedElement.tagName,
+          html: String(clickedElement.getHTML()),
+          innerText: event.target.innerText
+        };
+      }
+      setEvents(prevEvents => [...prevEvents, clickEvent]);
+      socket.send({
+        topic: 'session-data',
         data_source_id: data_source_id,
         session_id: sessionId,
         start_date: new Date().toLocaleString(),
         latitude: location.latitude,
         longitude: location.longitude,
         browser: browser,
-        event_id: "ITEM_CLICKED",
-        item_clicked: event.target
+        event_id: 'ITEM_CLICKED'
+        // item_clicked: event.target,
       });
     };
-    document.addEventListener("click", handleClick);
+    document.addEventListener('click', handleClick);
     return () => {
-      document.removeEventListener("click", handleClick);
+      document.removeEventListener('click', handleClick);
     };
   }, []);
   function saveEvents(events) {
     const requestOptions = {
-      method: "PUT",
+      method: 'PUT',
       headers: {
-        "Content-Type": "application/json"
+        'Content-Type': 'application/json'
       },
       body: JSON.stringify(events)
     };
-    fetch(`http://localhost:8000/generate-s3-url/${data_source_id}/${sessionId}`).then(response => response.json()).then(data => {
+    fetch(`http://localhost:5000/generate-s3-url/${data_source_id}/${sessionId}`).then(response => response.json()).then(data => {
       const uploadURL = data.signed_url;
       return fetch(uploadURL, requestOptions);
     });
   }
+  function saveEventsLocally(type = 'formatted' ) {
+    let blob = '';
+    if (type === 'formatted') {
+      blob = new Blob([JSON.stringify(events, null, 2)], {
+        type: 'application/json'
+      });
+    } else if (type === 'raw') {
+      blob = new Blob([JSON.stringify(replayEvents, null, 2)], {
+        type: 'application/json'
+      });
+    }
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${type}_events.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
   function getBrowserInfo() {
     const userAgent = navigator.userAgent;
-    let browserName = "Unknown";
-    if (userAgent.indexOf("Firefox") > -1) {
-      browserName = "Firefox";
-    } else if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
-      browserName = "Opera";
-    } else if (userAgent.indexOf("Chrome") > -1) {
-      browserName = "Chrome";
-    } else if (userAgent.indexOf("Safari") > -1) {
-      browserName = "Safari";
-    } else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident/") > -1) {
-      browserName = "Internet Explorer";
+    let browserName = 'Unknown';
+    if (userAgent.indexOf('Firefox') > -1) {
+      browserName = 'Firefox';
+    } else if (userAgent.indexOf('Opera') > -1 || userAgent.indexOf('OPR') > -1) {
+      browserName = 'Opera';
+    } else if (userAgent.indexOf('Chrome') > -1) {
+      browserName = 'Chrome';
+    } else if (userAgent.indexOf('Safari') > -1) {
+      browserName = 'Safari';
+    } else if (userAgent.indexOf('MSIE') > -1 || userAgent.indexOf('Trident/') > -1) {
+      browserName = 'Internet Explorer';
     }
     return browserName;
   }
-  React.useEffect(() => {
-    if (events.length > 0) {
-      socket.emit("record-event", {
-        sessionId,
-        events
-      });
-    }
-  }, [events]);
   function getLocation() {
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(position => {
@@ -6119,13 +6247,56 @@ const CoreOutline = ({
           longitude: position.coords.longitude
         });
       }, error => {
-        console.error("Error getting location:", error);
+        console.error('Error getting location:', error);
       });
     } else {
-      console.error("Geolocation is not supported by this browser.");
+      console.error('Geolocation is not supported by this browser.');
     }
   }
-  return /*#__PURE__*/React__default["default"].createElement("div", null, children);
+  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("button", {
+    onClick: () => {
+      saveEventsLocally('formatted');
+      saveEventsLocally('raw');
+    }
+  }, "Save Events Locally"), children);
+};
+const flag_item_clicked = item_id => {
+  const sessionId = localStorage.getItem('coreOutlineSessionId');
+  const dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
+  console.log('Session', sessionId);
+  console.log('Data Source', dataSourceId);
+  socket.send({
+    topic: 'session-data',
+    data_source_id: dataSourceId,
+    session_id: sessionId,
+    start_date: new Date().toLocaleString(),
+    event_id: 'PRODUCT_CLICKED',
+    item_clicked: item_id
+  });
+  return {
+    status: 'success',
+    message: 'Item click flagged successfully.'
+  };
+};
+const flag_item_purchased = item_id => {
+  const sessionId = localStorage.getItem('coreOutlineSessionId');
+  const dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
+  console.log('Session', sessionId);
+  console.log('Data Source', dataSourceId);
+  socket.send({
+    topic: 'session-data',
+    data_source_id: dataSourceId,
+    session_id: sessionId,
+    start_date: new Date().toLocaleString(),
+    event_id: 'PRODUCT_PURCHASED',
+    item_clicked: item_id
+  });
+  return {
+    status: 'success',
+    message: 'Item purchase flagged successfully.'
+  };
 };
 
-module.exports = CoreOutline;
+exports["default"] = CoreOutline;
+exports.flag_item_clicked = flag_item_clicked;
+exports.flag_item_purchased = flag_item_purchased;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "core-outline",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "A React component for Core&Outline",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
+  "main": "src/index.js",
+  "module": "src/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",