feat(v4): Update the campaigns page design (#10371)

<img width="1439" alt="Screenshot 2024-10-30 at 8 58 12 PM"
src="https://github.com/user-attachments/assets/26231270-5e73-40fb-9efa-c661585ebe7c">


Fixes
https://linear.app/chatwoot/project/campaign-redesign-f82bede26ca7/overview

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/dashboard/helper/specs/inbox.spec.js

@@ -1,4 +1,9 @@
-import { getInboxClassByType, getInboxWarningIconClass } from '../inbox';
+import {
+  INBOX_TYPES,
+  getInboxClassByType,
+  getInboxIconByType,
+  getInboxWarningIconClass,
+} from '../inbox';
 
 describe('#Inbox Helpers', () => {
   describe('getInboxClassByType', () => {
@@ -35,6 +40,74 @@ describe('#Inbox Helpers', () => {
     });
   });
 
+  describe('getInboxIconByType', () => {
+    it('returns correct icon for web widget', () => {
+      expect(getInboxIconByType(INBOX_TYPES.WEB)).toBe('i-ri-global-fill');
+    });
+
+    it('returns correct icon for Facebook', () => {
+      expect(getInboxIconByType(INBOX_TYPES.FB)).toBe('i-ri-messenger-fill');
+    });
+
+    it('returns correct icon for Twitter', () => {
+      expect(getInboxIconByType(INBOX_TYPES.TWITTER)).toBe(
+        'i-ri-twitter-x-fill'
+      );
+    });
+
+    describe('Twilio cases', () => {
+      it('returns WhatsApp icon for Twilio WhatsApp number', () => {
+        expect(
+          getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp:+1234567890')
+        ).toBe('i-ri-whatsapp-fill');
+      });
+
+      it('returns SMS icon for regular Twilio number', () => {
+        expect(getInboxIconByType(INBOX_TYPES.TWILIO, '+1234567890')).toBe(
+          'i-ri-chat-1-fill'
+        );
+      });
+
+      it('returns SMS icon when phone number is undefined', () => {
+        expect(getInboxIconByType(INBOX_TYPES.TWILIO, undefined)).toBe(
+          'i-ri-chat-1-fill'
+        );
+      });
+    });
+
+    it('returns correct icon for WhatsApp', () => {
+      expect(getInboxIconByType(INBOX_TYPES.WHATSAPP)).toBe(
+        'i-ri-whatsapp-fill'
+      );
+    });
+
+    it('returns correct icon for API', () => {
+      expect(getInboxIconByType(INBOX_TYPES.API)).toBe('i-ri-cloudy-fill');
+    });
+
+    it('returns correct icon for Email', () => {
+      expect(getInboxIconByType(INBOX_TYPES.EMAIL)).toBe('i-ri-mail-fill');
+    });
+
+    it('returns correct icon for Telegram', () => {
+      expect(getInboxIconByType(INBOX_TYPES.TELEGRAM)).toBe(
+        'i-ri-telegram-fill'
+      );
+    });
+
+    it('returns correct icon for Line', () => {
+      expect(getInboxIconByType(INBOX_TYPES.LINE)).toBe('i-ri-line-fill');
+    });
+
+    it('returns default icon for unknown type', () => {
+      expect(getInboxIconByType('UNKNOWN_TYPE')).toBe('i-ri-chat-1-fill');
+    });
+
+    it('returns default icon for undefined type', () => {
+      expect(getInboxIconByType(undefined)).toBe('i-ri-chat-1-fill');
+    });
+  });
+
   describe('getInboxWarningIconClass', () => {
     it('should return correct class for warning', () => {
       expect(getInboxWarningIconClass('Channel::FacebookPage', true)).toEqual(