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/inbox.js

@@ -1,4 +1,28 @@
-import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
+export const INBOX_TYPES = {
+  WEB: 'Channel::WebWidget',
+  FB: 'Channel::FacebookPage',
+  TWITTER: 'Channel::TwitterProfile',
+  TWILIO: 'Channel::TwilioSms',
+  WHATSAPP: 'Channel::Whatsapp',
+  API: 'Channel::Api',
+  EMAIL: 'Channel::Email',
+  TELEGRAM: 'Channel::Telegram',
+  LINE: 'Channel::Line',
+  SMS: 'Channel::Sms',
+};
+
+const INBOX_ICON_MAP = {
+  [INBOX_TYPES.WEB]: 'i-ri-global-fill',
+  [INBOX_TYPES.FB]: 'i-ri-messenger-fill',
+  [INBOX_TYPES.TWITTER]: 'i-ri-twitter-x-fill',
+  [INBOX_TYPES.WHATSAPP]: 'i-ri-whatsapp-fill',
+  [INBOX_TYPES.API]: 'i-ri-cloudy-fill',
+  [INBOX_TYPES.EMAIL]: 'i-ri-mail-fill',
+  [INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-fill',
+  [INBOX_TYPES.LINE]: 'i-ri-line-fill',
+};
+
+const DEFAULT_ICON = 'i-ri-chat-1-fill';
 
 export const getInboxSource = (type, phoneNumber, inbox) => {
   switch (type) {
@@ -86,6 +110,17 @@ export const getInboxClassByType = (type, phoneNumber) => {
   }
 };
 
+export const getInboxIconByType = (type, phoneNumber) => {
+  // Special case for Twilio (whatsapp and sms)
+  if (type === INBOX_TYPES.TWILIO) {
+    return phoneNumber?.startsWith('whatsapp')
+      ? 'i-ri-whatsapp-fill'
+      : 'i-ri-chat-1-fill';
+  }
+
+  return INBOX_ICON_MAP[type] ?? DEFAULT_ICON;
+};
+
 export const getInboxWarningIconClass = (type, reauthorizationRequired) => {
   const allowedInboxTypes = [INBOX_TYPES.FB, INBOX_TYPES.EMAIL];
   if (allowedInboxTypes.includes(type) && reauthorizationRequired) {

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(