feat: add media view for contacts (#14393)

app/javascript/dashboard/store/modules/specs/contacts/actions.spec.js

@@ -438,4 +438,48 @@ describe('#actions', () => {
       ]);
     });
   });
+
+  describe('#fetchAttachments', () => {
+    const attachments = [
+      { id: 11, message_id: 21, file_type: 'image' },
+      { id: 12, message_id: 22, file_type: 'file' },
+    ];
+
+    it('fetches and stores attachments on the contact record', async () => {
+      axios.get.mockResolvedValue({ data: { payload: attachments } });
+      const state = { records: { 1: { id: 1 } } };
+      await actions.fetchAttachments({ commit, state }, 1);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isFetchingAttachments: true }],
+        [types.SET_CONTACT_ATTACHMENTS, { id: 1, data: attachments }],
+        [types.SET_CONTACT_UI_FLAG, { isFetchingAttachments: false }],
+      ]);
+    });
+
+    it('refetches even when attachments are already cached', async () => {
+      axios.get.mockResolvedValue({ data: { payload: attachments } });
+      const state = {
+        records: { 1: { id: 1, attachments: [{ id: 99 }] } },
+      };
+      await actions.fetchAttachments({ commit, state }, 1);
+      expect(axios.get).toHaveBeenCalled();
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isFetchingAttachments: true }],
+        [types.SET_CONTACT_ATTACHMENTS, { id: 1, data: attachments }],
+        [types.SET_CONTACT_UI_FLAG, { isFetchingAttachments: false }],
+      ]);
+    });
+
+    it('clears the loading flag and rethrows when the API errors', async () => {
+      axios.get.mockRejectedValue(new Error('Network error'));
+      const state = { records: { 1: { id: 1 } } };
+      await expect(
+        actions.fetchAttachments({ commit, state }, 1)
+      ).rejects.toThrow('Network error');
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONTACT_UI_FLAG, { isFetchingAttachments: true }],
+        [types.SET_CONTACT_UI_FLAG, { isFetchingAttachments: false }],
+      ]);
+    });
+  });
 });

app/javascript/dashboard/store/modules/specs/contacts/getters.spec.js

@@ -50,4 +50,22 @@ describe('#getters', () => {
     };
     expect(getters.getAppliedContactFilters(state)).toEqual(filters);
   });
+
+  describe('getContactAttachments', () => {
+    it('returns the attachments stored on the contact record', () => {
+      const data = [{ id: 11, file_type: 'image' }];
+      const state = { records: { 1: { id: 1, attachments: data } } };
+      expect(getters.getContactAttachments(state)(1)).toEqual(data);
+    });
+
+    it('returns an empty array when the contact has no cached attachments', () => {
+      const state = { records: { 1: { id: 1 } } };
+      expect(getters.getContactAttachments(state)(1)).toEqual([]);
+    });
+
+    it('returns an empty array when the contact is not in the store', () => {
+      const state = { records: {} };
+      expect(getters.getContactAttachments(state)(99)).toEqual([]);
+    });
+  });
 });

app/javascript/dashboard/store/modules/specs/contacts/mutations.spec.js

@@ -63,6 +63,21 @@ describe('#mutations', () => {
         1: { id: 1, name: 'contact2', email: 'contact2@chatwoot.com' },
       });
     });
+
+    it('preserves a cached attachments list across edits', () => {
+      const attachments = [{ id: 11, file_type: 'image' }];
+      const state = {
+        records: {
+          1: { id: 1, name: 'contact1', attachments },
+        },
+      };
+      mutations[types.EDIT_CONTACT](state, { id: 1, name: 'contact2' });
+      expect(state.records[1]).toEqual({
+        id: 1,
+        name: 'contact2',
+        attachments,
+      });
+    });
   });
 
   describe('#SET_CONTACT_FILTERS', () => {
@@ -102,4 +117,33 @@ describe('#mutations', () => {
       expect(state.appliedFilters).toEqual([]);
     });
   });
+
+  describe('#SET_CONTACT_ATTACHMENTS', () => {
+    it('attaches the list to the existing contact record', () => {
+      const state = { records: { 1: { id: 1, name: 'Sivin' } } };
+      const data = [{ id: 11, file_type: 'image' }];
+      mutations[types.SET_CONTACT_ATTACHMENTS](state, { id: 1, data });
+      expect(state.records[1]).toEqual({
+        id: 1,
+        name: 'Sivin',
+        attachments: data,
+      });
+    });
+
+    it('creates a record shell when the contact is not yet loaded', () => {
+      const state = { records: {} };
+      const data = [{ id: 12, file_type: 'file' }];
+      mutations[types.SET_CONTACT_ATTACHMENTS](state, { id: 5, data });
+      expect(state.records[5]).toEqual({ attachments: data });
+    });
+
+    it('replaces an existing attachment list', () => {
+      const state = {
+        records: { 1: { id: 1, attachments: [{ id: 99 }] } },
+      };
+      const data = [{ id: 11 }];
+      mutations[types.SET_CONTACT_ATTACHMENTS](state, { id: 1, data });
+      expect(state.records[1].attachments).toEqual(data);
+    });
+  });
 });