core-outline 1.1.3 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "core-outline",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "A React component for Core&Outline",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -46,6 +46,7 @@
   "dependencies": {
     "react-error-boundary": "^5.0.0",
     "react-tracking": "^9.3.2",
-    "rrweb": "^2.0.0-alpha.4"
+    "rrweb": "^2.0.0-alpha.4",
+    "socket.io-client": "^4.8.1"
   }
 }

package/src/components/CoreOutline/CoreOutline.js

@@ -1,15 +1,118 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { record } from 'rrweb';
+import { v4 } from 'uuid';
+import socket from './socket';
 
-const CoreOutline = ({ children }) => {
+import {
+  EventType,
+  eventWithTime,
+  IncrementalSource,
+  MouseInteractions,
+} from 'rrweb';
+
+const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
   const [events, setEvents] = useState([]);
+  const [replayEvents, setReplayEvents] = useState([]);
   const recorderActive = useRef(false);
   const [currentPage, setCurrentPage] = useState(window.location.href);
+  const [location, setLocation] = useState({ latitude: null, longitude: null });
+  const [browser, setBrowser] = useState(getBrowserInfo());
+  const [appToken, setAppToken] = useState('');
+  const [sessionId, setSessionId] = 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;
+  }
+  useEffect(async () => {
+    await authorizeApp(data_source_id, data_source_secret);
+    setSessionId(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',
+    });
+
+    return () => {
+      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',
+      });
+    };
+  }, []);
 
   useEffect(() => {
-    console.log(currentPage);
+    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.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,
+        page_name: window.location.href,
+        event_id: 'PAGE_NAVIGATION',
+      });
       saveEvents(events);
     };
 
@@ -26,13 +129,60 @@ const CoreOutline = ({ children }) => {
     };
   }, [currentPage]);
 
+  useEffect(() => {
+    console.log('Location', location);
+    getLocation();
+  }, []);
+
   useEffect(() => {
     let stopFn;
     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;
+      }
+    };
+  }, []);
+
+  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;
@@ -48,6 +198,74 @@ const CoreOutline = ({ children }) => {
     };
   }, []);
 
+  useEffect(() => {
+    const handleClick = (event) => {
+      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,
+      });
+    };
+
+    document.addEventListener('click', handleClick);
+
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, []);
+
   function saveEvents(events) {
     const requestOptions = {
       method: 'PUT',
@@ -56,8 +274,9 @@ const CoreOutline = ({ children }) => {
       },
       body: JSON.stringify(events),
     };
-
-    fetch('http://localhost:8000/generate-s3-url')
+    fetch(
+      `http://localhost:5000/generate-s3-url/${data_source_id}/${sessionId}`
+    )
       .then((response) => response.json())
       .then((data) => {
         const uploadURL = data.signed_url;
@@ -65,7 +284,113 @@ const CoreOutline = ({ children }) => {
       });
   }
 
-  return <div>{children}</div>;
+  function saveEventsLocally(type = 'formatted' || 'raw') {
+    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';
+    }
+
+    return browserName;
+  }
+
+  function getLocation() {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          setLocation({
+            latitude: position.coords.latitude,
+            longitude: position.coords.longitude,
+          });
+        },
+        (error) => {
+          console.error('Error getting location:', error);
+        }
+      );
+    } else {
+      console.error('Geolocation is not supported by this browser.');
+    }
+  }
+
+  return (
+    <div>
+      <button
+        onClick={() => {
+          saveEventsLocally('formatted');
+          saveEventsLocally('raw');
+        }}
+      >
+        Save Events Locally
+      </button>
+      {children}
+    </div>
+  );
+};
+
+export 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.' };
+};
+
+export 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.' };
 };
 
 export default CoreOutline;

package/src/components/CoreOutline/socket.js

@@ -0,0 +1,3 @@
+import { io } from 'socket.io-client';
+const socket = io('http://localhost:8000');
+export default socket;