Add link timestamp and link in localstorage

__tests__/components/AppBase/index.spec.jsx

@@ -7,7 +7,7 @@ import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import mockio, { serverSocket, cleanup, io } from 'socket.io-client';
 import { initialConfig, history as defaultHistory, historyWithLink, historyWithEmailIntent, historyWithPaymentIntent, pd, streamedMessage, streamedMessageWithLink, streamedMessageWithEmailIntent, streamedMessageWithPaymentIntent } from '@/chatMocks';
-import { CHAT_SEEN_KEY, STORING_CHECKER_INTERVAL } from '@/config/env';
+import { CHAT_SEEN_KEY, LINK_CLICKED_KEY, STORING_CHECKER_INTERVAL } from '@/config/env';
 import { intent } from '@/main';
 import initialState from '@/store/initialState';
 
@@ -88,7 +88,7 @@ describe('AppBase, chat-history event and execute properly', () => {
 
     // Assert
     const { chat } = root.store.getState();
-    expect(localStorage.getItem(CHAT_SEEN_KEY)).toBeTruthy();
+    expect(localStorage.getItem(LINK_CLICKED_KEY)).toBeTruthy();
     expect(document.querySelector).toHaveBeenCalledWith('#chatbot-container');
     expect(nodeElem.remove).toHaveBeenCalled();
     expect(chat.closed).toBeTruthy();

src/components/Layout/base.jsx

@@ -1,25 +1,14 @@
 import { node } from 'prop-types';
-import { useEffect } from 'react';
-import { useAppDispatch, useAppSelector, useWindowSize } from '@/hooks';
+import { useAppSelector, useWindowSize } from '@/hooks';
 
 import { getConfig } from '@/store/slices/config';
-import { mustHideChat, setClosed } from '@/store/slices/chat';
 import { layoutBase as variant } from './variants';
 
 export const LayoutBase = ({ head, stream, foot }) => {
-  const dispatch = useAppDispatch();
-  const redirectLink = useAppSelector(mustHideChat);
   const { themeId: theme, isPluginMode } = useAppSelector(getConfig);
   const { base, wrapper } = variant({ theme });
   const [_, height] = useWindowSize();
 
-  useEffect(() => {
-    if (redirectLink) {
-      window.location.href = redirectLink;
-      dispatch(setClosed(true));
-    }
-  });
-
   return (
     <div
       data-e2e="base-container"

src/components/Layout/foot.jsx

@@ -12,7 +12,7 @@ import { track } from '@/services/tracking';
 import { customEvents } from '@/config/analytics';
 import { getMeta } from '@/store/slices/meta';
 import { Ellipsis } from '@/components/Stream/ellipsis';
-import { CHAT_SEEN_KEY } from '@/config/env';
+import { LINK_CLICKED_KEY } from '@/config/env';
 
 export const LayoutFoot = () => {
   const dispatch = useAppDispatch();
@@ -63,7 +63,7 @@ export const LayoutFoot = () => {
   };
 
   const onClickCta = (e) => {
-    localStorage.setItem(CHAT_SEEN_KEY, e.currentTarget.href || true);
+    localStorage.setItem(LINK_CLICKED_KEY, e.currentTarget.href);
     track({
       eventType: customEvents.linkClicked,
       systemType,

src/components/Stream/modifiers.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { customEvents } from '@/config/analytics';
-import { CHAT_SEEN_KEY } from '@/config/env';
+import { LINK_CLICKED_KEY } from '@/config/env';
 import { curlyBraces, link } from '@/config/patterns';
 import { useAppDispatch, useAppSelector } from '@/hooks';
 import { track } from '@/services/tracking';
@@ -18,7 +18,7 @@ export const replaceLinksWithAnchors = (val) => {
   const parts = val.split(link);
 
   const onClick = (e) => {
-    localStorage.setItem(CHAT_SEEN_KEY, e.currentTarget.href || true);
+    localStorage.setItem(LINK_CLICKED_KEY, e.currentTarget.href);
     track({
       eventType: customEvents.linkClicked,
       systemType,

src/config/env.js

@@ -1,6 +1,8 @@
-// DEV Note: will be depricated, replace with env vars
+// DEV Note: will be deprecated, replace with env vars
 export const STORAGE_KEY = 'history';
 export const CHAT_SEEN_KEY = 'chatSeen';
+export const LINK_CLICKED_KEY = 'linkClickedFromChat';
+export const CHAT_FINISHED_TIMESTAMP = 'chatConversationFinishedTimeStamp';
 export const ALREADY_REGISTERED_KEY = 'showAlreadyRegisteredUser';
 export const SHOW_PAYMENT_BUTTON_KEY = 'showPaymentButton';
 export const SOCKET_IO_URL = 'http://localhost:5000';

src/middleware/socket.js

@@ -25,6 +25,7 @@ import { setConfig } from '@/store/slices/config';
 import { track } from '@/services/tracking';
 import { baseEvents, customEvents } from '@/config/analytics';
 import { setRegion } from '@/store/slices/meta';
+import { CHAT_FINISHED_TIMESTAMP } from '@/config/env';
 
 const specialMessages = [intent.type.email, intent.type.payment];
 let socket;
@@ -128,6 +129,7 @@ const chatMiddleware = store => next => action => {
   if (setClosed.match(action)) {
     document.querySelector('#chatbot-container')?.remove();
     document.body.classList?.remove('scroll-stop');
+    localStorage.setItem(CHAT_FINISHED_TIMESTAMP, new Date().getTime());
     socket.close();
   }
 

src/store/slices/chat.js

@@ -1,9 +1,8 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { chat as initialState } from '@/store/initialState';
 import { extractOptionSet } from '@/utils/formatting';
-import { getQueryParam, hasExpired } from '@/utils';
+import { getQueryParam } from '@/utils';
 import { roles } from '@/config';
-import { CHAT_SEEN_KEY } from '@/config/env';
 
 const configSlice = createSlice({
   name: 'chat',
@@ -150,27 +149,6 @@ const configSlice = createSlice({
 
 export const getChat = state => state.chat;
 
-export const mustHideChat = (state) => {
-  const userMessages = state.chat.history.filter(it => it.role === roles.user);
-
-  if (userMessages.length === 0) return false;
-
-  const { time, role } = userMessages[userMessages.length - 1];
-  let hasToStayOpen;
-
-  if (role === roles.user && time) {
-    hasToStayOpen = hasExpired(time);
-  }
-
-  if (hasToStayOpen) {
-    localStorage.removeItem(CHAT_SEEN_KEY);
-  }
-
-  const chatSeen = localStorage.getItem(CHAT_SEEN_KEY);
-
-  return chatSeen;
-};
-
 export const { setOutgoing, setIncoming,
   resetIncoming, addIncomingChunk,
   resetOutgoing, setHistory, resetHistory,

src/utils/index.js

@@ -227,22 +227,6 @@ export const getQueryParam = (url, param) => {
   return urlParams.get(param);
 };
 
-/**
- * Checks if 24 hours have passed since the given date.
- *
- * @function hasExpired
- * @param {string} date - The date to compare in ISO 8601 format (e.g., "2023-07-04T14:11:00.097Z").
- * @returns {boolean} Returns true if 24 hours have passed since the given date, or false otherwise.
- */
-export const hasExpired = (date, maxHours = 24) => {
-  const currentDate = new Date();
-  const givenDate = new Date(date);
-  const elapsedMilliseconds = currentDate - givenDate;
-  const elapsedHours = elapsedMilliseconds / (1000 * 60 * 60); // Convert milliseconds to hours
-
-  return elapsedHours >= maxHours;
-};
-
 /**
  * Formats a date string according to the locale, including the date and time.
  *