core-outline 1.1.16 → 1.1.18

package/.babelrc

@@ -1,6 +1,3 @@
-{
-    "presets": [
-        "@babel/preset-env",
-        "@babel/preset-react"
-    ]
-}
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

package/dist/index.es.js

@@ -6347,7 +6347,7 @@ Object.assign(lookup, {
     connect: lookup,
 });
 
-var socket = lookup('http://localhost:8000');
+var socket = lookup('http://streams.coreoutline.com');
 
 var CoreOutline = function CoreOutline(_ref) {
   var children = _ref.children,
@@ -6377,7 +6377,7 @@ var CoreOutline = function CoreOutline(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     browser = _useState10[0];
     _useState10[1];
-  var _useState11 = useState(""),
+  var _useState11 = useState(''),
     _useState12 = _slicedToArray(_useState11, 2);
     _useState12[0];
     var setAppToken = _useState12[1];
@@ -6395,22 +6395,22 @@ var CoreOutline = function CoreOutline(_ref) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
             requestOptions = {
-              method: "POST",
+              method: 'POST',
               headers: {
-                "Content-Type": "application/json"
+                'Content-Type': 'application/json'
               },
               body: JSON.stringify({
                 data_source_id: data_source_id,
                 data_source_secret: data_source_secret
               })
             };
-            response = fetch("http://localhost:4000/data-source/authorize", requestOptions).then(function (response) {
+            response = fetch("http://api.coreoutline.com/data-source/authorize", requestOptions).then(function (response) {
               return response.json();
             }).then(function (data) {
               setAppToken(data.app_token);
               return data;
             })["catch"](function (error) {
-              console.error("Error:", error);
+              console.error('Error:', error);
               return error;
             });
             return _context2.abrupt("return", response);
@@ -6422,39 +6422,88 @@ var CoreOutline = function CoreOutline(_ref) {
     }));
     return _authorizeApp.apply(this, arguments);
   }
+  var offLoadFunctionality = function offLoadFunctionality() {
+    var formattedEvents = events && events.length > 0 ? events : JSON.parse(localStorage.getItem('coreoutlineFormattedEvents') || '[]');
+    var rawEvents = replayEvents && replayEvents.length > 0 ? replayEvents : JSON.parse(localStorage.getItem('coreoutlineRawEvents') || '[]');
+    var data = JSON.stringify({
+      data_source_id: data_source_id,
+      sessionId: sessionId,
+      formatted_events: formattedEvents,
+      raw_events: rawEvents
+    });
+    socket.send({
+      topic: 'session-data',
+      data_source_id: data_source_id,
+      session_id: localStorage.getItem('coreOutlineSessionId'),
+      start_date: new Date().toLocaleString(),
+      latitude: location.latitude,
+      longitude: location.longitude,
+      browser: browser,
+      event_id: 'SESSION_END'
+    });
+    if (navigator.sendBeacon) {
+      navigator.sendBeacon("http://data.coreoutline.com/upload-events", data);
+    } else {
+      fetch("http://data.coreoutline.com/upload-events", {
+        method: 'POST',
+        body: data,
+        keepalive: true,
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })["catch"](function (err) {
+        return console.error('Upload failed:', err);
+      });
+    }
+  };
+  useEffect(function () {}, [events, replayEvents]);
   useEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var handleBeforeUnload, handleVisibilityChange;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          _context.next = 2;
+          handleBeforeUnload = function handleBeforeUnload() {
+            offLoadFunctionality();
+          };
+          handleVisibilityChange = function handleVisibilityChange() {
+            if (document.visibilityState === 'hidden') {
+              offLoadFunctionality();
+            }
+          };
+          window.addEventListener('beforeunload', handleBeforeUnload);
+          document.addEventListener('visibilitychange', handleVisibilityChange);
+          _context.next = 6;
           return authorizeApp(data_source_id, data_source_secret);
-        case 2:
-          localStorage.setItem("coreOutlineSessionId", sessionId);
-          localStorage.setItem("coreOutlineDataSourceIdId", data_source_id);
-          console.log("Session", sessionId);
+        case 6:
+          localStorage.setItem('coreOutlineSessionId', sessionId);
+          localStorage.setItem('coreOutlineDataSourceIdId', data_source_id);
+          console.log('Session', sessionId);
           socket.send({
-            topic: "session-data",
+            topic: 'session-data',
             data_source_id: data_source_id,
-            session_id: localStorage.getItem("coreOutlineSessionId"),
+            session_id: localStorage.getItem('coreOutlineSessionId'),
             start_date: new Date().toLocaleString(),
             latitude: location.latitude,
             longitude: location.longitude,
             browser: browser,
-            event_id: "SESSION_START"
+            event_id: 'SESSION_START'
           });
           return _context.abrupt("return", function () {
+            offLoadFunctionality();
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
             socket.send({
-              topic: "session-data",
+              topic: 'session-data',
               data_source_id: data_source_id,
-              session_id: localStorage.getItem("coreOutlineSessionId"),
+              session_id: localStorage.getItem('coreOutlineSessionId'),
               start_date: new Date().toLocaleString(),
               latitude: location.latitude,
               longitude: location.longitude,
               browser: browser,
-              event_id: "SESSION_END"
+              event_id: 'SESSION_END'
             });
           });
-        case 7:
+        case 11:
         case "end":
           return _context.stop();
       }
@@ -6488,22 +6537,24 @@ var CoreOutline = function CoreOutline(_ref) {
     setEvents(function (prevEvents) {
       return [].concat(_toConsumableArray(prevEvents), [navigationEvent]);
     });
+    localStorage.setItem('coreoutlineFormattedEvents', JSON.stringify(function (prevEvents) {
+      return [].concat(_toConsumableArray(prevEvents), [navigationEvent]);
+    }));
     var handleNavigation = function handleNavigation() {
       setCurrentPage(window.location.href);
       socket.send({
-        topic: "session-data",
+        topic: 'session-data',
         data_source_id: data_source_id,
-        session_id: localStorage.getItem("coreOutlineSessionId"),
+        session_id: localStorage.getItem('coreOutlineSessionId'),
         start_date: new Date().toLocaleString(),
         latitude: location.latitude,
         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);
     var originalPushState = window.history.pushState;
     window.history.pushState = function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -6513,12 +6564,12 @@ var CoreOutline = function CoreOutline(_ref) {
       handleNavigation();
     };
     return function () {
-      window.removeEventListener("popstate", handleNavigation);
+      window.removeEventListener('popstate', handleNavigation);
       window.history.pushState = originalPushState;
     };
   }, [currentPage]);
   useEffect(function () {
-    console.log("Location", location);
+    console.log('Location', location);
     getLocation();
   }, []);
   useEffect(function () {
@@ -6529,6 +6580,9 @@ var CoreOutline = function CoreOutline(_ref) {
           setReplayEvents(function (prevEvents) {
             return [].concat(_toConsumableArray(prevEvents), [event]);
           });
+          localStorage.setItem('coreoutlineRawEvents', JSON.stringify(function (prevEvents) {
+            return [].concat(_toConsumableArray(replayEvents), [event]);
+          }));
         },
         maskAllInputs: false,
         maskTextSelector: null
@@ -6538,7 +6592,6 @@ var CoreOutline = function CoreOutline(_ref) {
     return function () {
       if (stopFn) {
         stopFn();
-        saveEvents(events);
         recorderActive.current = false;
       }
     };
@@ -6548,7 +6601,7 @@ var CoreOutline = function CoreOutline(_ref) {
     if (!recorderActive.current) {
       stopFn = record({
         emit: function emit(event) {
-          console.log("Event:", event);
+          console.log('Event:', event);
           if (event.type == 3 && event.data.type == 2) {
             return;
           }
@@ -6562,11 +6615,14 @@ var CoreOutline = function CoreOutline(_ref) {
             return;
           }
           if (event.type == 3 && event.data.type == 3) {
-            console.log("Contextmenu Event:", event);
+            console.log('Contextmenu Event:', event);
           }
           setEvents(function (prevEvents) {
             return [].concat(_toConsumableArray(prevEvents), [event]);
           });
+          localStorage.setItem('coreoutlineFormattedEvents', JSON.stringify(function (prevEvents) {
+            return [].concat(_toConsumableArray(prevEvents), [event]);
+          }));
         },
         maskAllInputs: false,
         maskTextSelector: null
@@ -6576,14 +6632,13 @@ var CoreOutline = function CoreOutline(_ref) {
     return function () {
       if (stopFn) {
         stopFn();
-        saveEvents(events);
         recorderActive.current = false;
       }
     };
   }, []);
   useEffect(function () {
     var handleClick = function handleClick(event) {
-      console.log("Inner text:", event.target.innerText);
+      console.log('Inner text:', event.target.innerText);
       var clickEvent = {
         type: EventType.IncrementalSnapshot,
         data: {
@@ -6598,11 +6653,11 @@ var CoreOutline = function CoreOutline(_ref) {
       var 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,
+          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
@@ -6611,52 +6666,40 @@ var CoreOutline = function CoreOutline(_ref) {
       setEvents(function (prevEvents) {
         return [].concat(_toConsumableArray(prevEvents), [clickEvent]);
       });
+      localStorage.setItem('coreoutlineFormattedEvents', JSON.stringify(function (prevEvents) {
+        return [].concat(_toConsumableArray(prevEvents), [clickEvent]);
+      }));
       socket.send({
-        topic: "session-data",
+        topic: 'session-data',
         data_source_id: data_source_id,
-        session_id: localStorage.getItem("coreOutlineSessionId"),
+        session_id: localStorage.getItem('coreOutlineSessionId'),
         start_date: new Date().toLocaleString(),
         latitude: location.latitude,
         longitude: location.longitude,
         browser: browser,
-        event_id: "ITEM_CLICKED"
+        event_id: 'ITEM_CLICKED'
         // item_clicked: event.target,
       });
     };
-    document.addEventListener("click", handleClick);
+    document.addEventListener('click', handleClick);
     return function () {
-      document.removeEventListener("click", handleClick);
+      document.removeEventListener('click', handleClick);
     };
   }, []);
-  function saveEvents(events) {
-    var requestOptions = {
-      method: "PUT",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(events)
-    };
-    fetch("http://localhost:5000/generate-s3-url/".concat(data_source_id, "/").concat(sessionId)).then(function (response) {
-      return response.json();
-    }).then(function (data) {
-      var uploadURL = data.signed_url;
-      return fetch(uploadURL, requestOptions);
-    });
-  }
   function saveEventsLocally() {
-    var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "formatted" ;
-    var blob = "";
-    if (type === "formatted") {
+    var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'formatted' ;
+    var blob = '';
+    if (type === 'formatted') {
       blob = new Blob([JSON.stringify(events, null, 2)], {
-        type: "application/json"
+        type: 'application/json'
       });
-    } else if (type === "raw") {
+    } else if (type === 'raw') {
       blob = new Blob([JSON.stringify(replayEvents, null, 2)], {
-        type: "application/json"
+        type: 'application/json'
       });
     }
     var url = URL.createObjectURL(blob);
-    var a = document.createElement("a");
+    var a = document.createElement('a');
     a.href = url;
     a.download = "".concat(type, "_events.json");
     a.click();
@@ -6664,17 +6707,17 @@ var CoreOutline = function CoreOutline(_ref) {
   }
   function getBrowserInfo() {
     var userAgent = navigator.userAgent;
-    var 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";
+    var 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;
   }
@@ -6686,53 +6729,53 @@ var CoreOutline = function CoreOutline(_ref) {
           longitude: position.coords.longitude
         });
       }, function (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.createElement("div", null, /*#__PURE__*/React.createElement("button", {
     onClick: function onClick() {
-      saveEventsLocally("formatted");
-      saveEventsLocally("raw");
+      saveEventsLocally('formatted');
+      saveEventsLocally('raw');
     }
   }, "Save Events Locally"), children);
 };
 var flag_item_clicked = function flag_item_clicked(item_id) {
-  var sessionId = localStorage.getItem("coreOutlineSessionId");
-  var dataSourceId = localStorage.getItem("coreOutlineDataSourceIdId");
-  console.log("Session", sessionId);
-  console.log("Data Source", dataSourceId);
+  var sessionId = localStorage.getItem('coreOutlineSessionId');
+  var dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
+  console.log('Session', sessionId);
+  console.log('Data Source', dataSourceId);
   socket.send({
-    topic: "session-data",
+    topic: 'session-data',
     data_source_id: dataSourceId,
-    session_id: localStorage.getItem("coreOutlineSessionId"),
+    session_id: localStorage.getItem('coreOutlineSessionId'),
     start_date: new Date().toLocaleString(),
-    event_id: "PRODUCT_CLICKED",
+    event_id: 'PRODUCT_CLICKED',
     item_clicked: item_id
   });
   return {
-    status: "success",
-    message: "Item click flagged successfully."
+    status: 'success',
+    message: 'Item click flagged successfully.'
   };
 };
 var flag_item_purchased = function flag_item_purchased(item_id) {
-  var sessionId = localStorage.getItem("coreOutlineSessionId");
-  var dataSourceId = localStorage.getItem("coreOutlineDataSourceIdId");
-  console.log("Session", sessionId);
-  console.log("Data Source", dataSourceId);
+  var sessionId = localStorage.getItem('coreOutlineSessionId');
+  var dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
+  console.log('Session', sessionId);
+  console.log('Data Source', dataSourceId);
   socket.send({
-    topic: "session-data",
+    topic: 'session-data',
     data_source_id: dataSourceId,
-    session_id: localStorage.getItem("coreOutlineSessionId"),
+    session_id: localStorage.getItem('coreOutlineSessionId'),
     start_date: new Date().toLocaleString(),
-    event_id: "PRODUCT_PURCHASED",
+    event_id: 'PRODUCT_PURCHASED',
     item_clicked: item_id
   });
   return {
-    status: "success",
-    message: "Item purchase flagged successfully."
+    status: 'success',
+    message: 'Item purchase flagged successfully.'
   };
 };