feat: Implement reply to for reply editor (#8063)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/shared/components/EmojiOrIcon.vue

@@ -9,6 +9,7 @@
 </template>
 
 <script>
+// 🚨 This component is deprecated. Please use fluent-icon instead.
 import { hasEmojiSupport } from 'shared/helpers/emoji';
 import { mapGetters } from 'vuex';
 

app/javascript/shared/constants/busEvents.js

@@ -8,6 +8,7 @@ export const BUS_EVENTS = {
   TOGGLE_SIDEMENU: 'TOGGLE_SIDEMENU',
   ON_MESSAGE_LIST_SCROLL: 'ON_MESSAGE_LIST_SCROLL',
   WEBSOCKET_DISCONNECT: 'WEBSOCKET_DISCONNECT',
+  TOGGLE_REPLY_TO_MESSAGE: 'TOGGLE_REPLY_TO_MESSAGE',
   SHOW_TOAST: 'newToastMessage',
   NEW_CONVERSATION_MODAL: 'newConversationModal',
 };

app/javascript/shared/helpers/localStorage.js

@@ -19,7 +19,7 @@ export const LocalStorage = {
     } else {
       window.localStorage.setItem(key, value);
     }
-    window.localStorage.setItem(key + ':ts', Date.now());
+    window.localStorage.setItem(key + ':ts', Date.now().toString());
   },
 
   setFlag(store, accountId, key, expiry = 24 * 60 * 60 * 1000) {
@@ -46,4 +46,39 @@ export const LocalStorage = {
     window.localStorage.removeItem(key);
     window.localStorage.removeItem(key + ':ts');
   },
+
+  updateJsonStore(storeName, key, value) {
+    try {
+      const storedValue = this.get(storeName) || {};
+      storedValue[key] = value;
+      this.set(storeName, storedValue);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('Error updating JSON store in localStorage', e);
+    }
+  },
+
+  getFromJsonStore(storeName, key) {
+    try {
+      const storedValue = this.get(storeName) || {};
+      return storedValue[key] || null;
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('Error getting value from JSON store in localStorage', e);
+      return null;
+    }
+  },
+
+  deleteFromJsonStore(storeName, key) {
+    try {
+      const storedValue = this.get(storeName);
+      if (storedValue && key in storedValue) {
+        delete storedValue[key];
+        this.set(storeName, storedValue);
+      }
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('Error deleting entry from JSON store in localStorage', e);
+    }
+  },
 };

app/javascript/shared/helpers/specs/localStorage.spec.js

@@ -0,0 +1,107 @@
+import { LocalStorage } from '../localStorage';
+
+// Mocking localStorage
+const localStorageMock = (() => {
+  let store = {};
+  return {
+    getItem: key => store[key] || null,
+    setItem: (key, value) => {
+      store[key] = String(value);
+    },
+    removeItem: key => delete store[key],
+    clear: () => {
+      store = {};
+    },
+  };
+})();
+
+Object.defineProperty(window, 'localStorage', {
+  value: localStorageMock,
+});
+
+describe('LocalStorage utility', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('set and get methods', () => {
+    LocalStorage.set('testKey', { a: 1 });
+    expect(LocalStorage.get('testKey')).toEqual({ a: 1 });
+  });
+
+  it('remove method', () => {
+    LocalStorage.set('testKey', 'testValue');
+    LocalStorage.remove('testKey');
+    expect(LocalStorage.get('testKey')).toBeNull();
+  });
+
+  it('updateJsonStore method', () => {
+    LocalStorage.updateJsonStore('testStore', 'testKey', 'testValue');
+    expect(LocalStorage.get('testStore')).toEqual({ testKey: 'testValue' });
+  });
+
+  it('getFromJsonStore method', () => {
+    LocalStorage.set('testStore', { testKey: 'testValue' });
+    expect(LocalStorage.getFromJsonStore('testStore', 'testKey')).toBe(
+      'testValue'
+    );
+  });
+
+  it('deleteFromJsonStore method', () => {
+    LocalStorage.set('testStore', { testKey: 'testValue' });
+    LocalStorage.deleteFromJsonStore('testStore', 'testKey');
+    expect(LocalStorage.getFromJsonStore('testStore', 'testKey')).toBeNull();
+  });
+
+  it('setFlag and getFlag methods', () => {
+    const store = 'testStore';
+    const accountId = '123';
+    const key = 'flagKey';
+    const expiry = 1000; // 1 second
+
+    // Set flag and verify it's set
+    LocalStorage.setFlag(store, accountId, key, expiry);
+    expect(LocalStorage.getFlag(store, accountId, key)).toBe(true);
+
+    // Wait for expiry and verify flag is not set
+    return new Promise(resolve => {
+      setTimeout(() => {
+        expect(LocalStorage.getFlag(store, accountId, key)).toBe(false);
+        resolve();
+      }, expiry + 100); // wait a bit more than expiry time to ensure the flag has expired
+    });
+  });
+
+  it('clearAll method', () => {
+    LocalStorage.set('testKey1', 'testValue1');
+    LocalStorage.set('testKey2', 'testValue2');
+    LocalStorage.clearAll();
+    expect(LocalStorage.get('testKey1')).toBeNull();
+    expect(LocalStorage.get('testKey2')).toBeNull();
+  });
+
+  it('set method with non-object value', () => {
+    LocalStorage.set('testKey', 'testValue');
+    expect(LocalStorage.get('testKey')).toBe('testValue');
+  });
+
+  it('set and get methods with null value', () => {
+    LocalStorage.set('testKey', null);
+    expect(LocalStorage.get('testKey')).toBeNull();
+  });
+
+  it('set and get methods with undefined value', () => {
+    LocalStorage.set('testKey', undefined);
+    expect(LocalStorage.get('testKey')).toBe('undefined');
+  });
+
+  it('set and get methods with boolean value', () => {
+    LocalStorage.set('testKey', true);
+    expect(LocalStorage.get('testKey')).toBe(true);
+  });
+
+  it('set and get methods with number value', () => {
+    LocalStorage.set('testKey', 42);
+    expect(LocalStorage.get('testKey')).toBe(42);
+  });
+});