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/components/layout/config/sidebarItems/campaigns.js

@@ -2,23 +2,23 @@ import { frontendURL } from '../../../../helper/URLHelper';
 
 const campaigns = accountId => ({
   parentNav: 'campaigns',
-  routes: ['ongoing_campaigns', 'one_off'],
+  routes: ['campaigns_sms_index', 'campaigns_livechat_index'],
   menuItems: [
     {
       icon: 'arrow-swap',
-      label: 'ONGOING',
+      label: 'LIVE_CHAT',
       key: 'ongoingCampaigns',
       hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/campaigns/ongoing`),
-      toStateName: 'ongoing_campaigns',
+      toState: frontendURL(`accounts/${accountId}/campaigns/live_chat`),
+      toStateName: 'campaigns_livechat_index',
     },
     {
       key: 'oneOffCampaigns',
       icon: 'sound-source',
-      label: 'ONE_OFF',
+      label: 'SMS',
       hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/campaigns/one_off`),
-      toStateName: 'one_off',
+      toState: frontendURL(`accounts/${accountId}/campaigns/sms`),
+      toStateName: 'campaigns_sms_index',
     },
   ],
 });

app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js

@@ -47,7 +47,7 @@ const primaryMenuItems = accountId => [
     label: 'CAMPAIGNS',
     featureFlag: FEATURE_FLAGS.CAMPAIGNS,
     toState: frontendURL(`accounts/${accountId}/campaigns`),
-    toStateName: 'ongoing_campaigns',
+    toStateName: 'campaigns_ongoing_index',
   },
   {
     icon: 'library',

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -65,6 +65,7 @@ const props = defineProps({
   modelValue: { type: String, default: '' },
   editorId: { type: String, default: '' },
   placeholder: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
   isPrivate: { type: Boolean, default: false },
   enableSuggestions: { type: Boolean, default: true },
   overrideLineBreaks: { type: Boolean, default: false },
@@ -299,6 +300,8 @@ function handleEmptyBodyWithSignature() {
 }
 
 function focusEditor(content) {
+  if (props.disabled) return;
+
   const unrefContent = unref(content);
   if (isBodyEmpty(unrefContent) && sendWithSignature.value) {
     // reload state can be called when switching between conversations, or when drafts is loaded
@@ -561,6 +564,7 @@ function onKeydown(event) {
 function createEditorView() {
   editorView = new EditorView(editor.value, {
     state: state,
+    editable: () => !props.disabled,
     dispatchTransaction: tx => {
       state = state.apply(tx);
       editorView.updateState(state);
@@ -570,17 +574,21 @@ function createEditorView() {
     },
     handleDOMEvents: {
       keyup: () => {
-        typingIndicator.start();
-        updateImgToolbarOnDelete();
+        if (!props.disabled) {
+          typingIndicator.start();
+          updateImgToolbarOnDelete();
+        }
       },
-      keydown: (view, event) => onKeydown(event),
-      focus: () => emit('focus'),
-      click: isEditorMouseFocusedOnAnImage,
+      keydown: (view, event) => !props.disabled && onKeydown(event),
+      focus: () => !props.disabled && emit('focus'),
+      click: () => !props.disabled && isEditorMouseFocusedOnAnImage(),
       blur: () => {
+        if (props.disabled) return;
         typingIndicator.stop();
         emit('blur');
       },
       paste: (_view, event) => {
+        if (props.disabled) return;
         const data = event.clipboardData.files;
         if (data.length > 0) {
           event.preventDefault();