chore: Add bot in campaign add/edit form (#2246)

* fix empty message condition in campaign table

* add bot in campaign

* locale changes

* review fixes

app/javascript/dashboard/i18n/locale/en/campaign.json

@@ -52,6 +52,7 @@
     },
     "LIST": {
       "LOADING_MESSAGE": "Loading campaigns...",
+      "404": "There are no campaigns created for this inbox.",
       "TABLE_HEADER": {
         "TITLE": "Title",
         "MESSAGE": "Message",
@@ -69,6 +70,9 @@
       "STATUS": {
         "ENABLED": "Enabled",
         "DISABLED": "Disabled"
+      },
+      "SENDER": {
+        "BOT": "Bot"
       }
     }
   }

app/javascript/dashboard/routes/dashboard/settings/inbox/components/AddCampaign.vue

@@ -36,7 +36,7 @@
             {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
             <select v-model="selectedSender">
               <option
-                v-for="sender in senderList"
+                v-for="sender in sendersAndBotList"
                 :key="sender.name"
                 :value="sender.id"
               >
@@ -132,7 +132,7 @@ export default {
     return {
       title: '',
       message: '',
-      selectedSender: '',
+      selectedSender: 0,
       endPoint: '',
       timeOnPage: 10,
       show: true,
@@ -173,7 +173,17 @@ export default {
         this.uiFlags.isCreating
       );
     },
+    sendersAndBotList() {
+      return [
+        {
+          id: 0,
+          name: 'Bot',
+        },
+        ...this.senderList,
+      ];
+    },
   },
+
   methods: {
     async addCampaign() {
       try {
@@ -181,7 +191,7 @@ export default {
           title: this.title,
           message: this.message,
           inbox_id: this.$route.params.inboxId,
-          sender_id: this.selectedSender,
+          sender_id: this.selectedSender || null,
           enabled: this.enabled,
           trigger_rules: {
             url: this.endPoint,

app/javascript/dashboard/routes/dashboard/settings/inbox/components/Campaign.vue

@@ -7,7 +7,7 @@
     </div>
     <campaigns-table
       :campaigns="records"
-      :show-empty-state="showEmptyResult"
+      :show-empty-result="showEmptyResult"
       :is-loading="uiFlags.isFetching"
       :on-edit-click="openEditPopup"
     />
@@ -56,7 +56,8 @@ export default {
       uiFlags: 'campaigns/getUIFlags',
     }),
     showEmptyResult() {
-      const hasEmptyResults = this.records.length === 0;
+      const hasEmptyResults =
+        !this.uiFlags.isFetching && this.records.length === 0;
       return hasEmptyResults;
     },
   },

app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignsTable.vue

@@ -93,7 +93,6 @@ export default {
             return <Label title={labelText} colorScheme={colorScheme} />;
           },
         },
-
         {
           field: 'sender',
           key: 'sender',
@@ -101,7 +100,7 @@ export default {
           align: 'left',
           renderBodyCell: ({ row }) => {
             if (row.sender) return <CampaignSender sender={row.sender} />;
-            return '---';
+            return this.$t('CAMPAIGN.LIST.SENDER.BOT');
           },
         },
         {

app/javascript/dashboard/routes/dashboard/settings/inbox/components/EditCampaign.vue

@@ -39,7 +39,7 @@
             {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
             <select v-model="selectedSender">
               <option
-                v-for="sender in senderList"
+                v-for="sender in sendersAndBotList"
                 :key="sender.name"
                 :value="sender.id"
               >
@@ -186,6 +186,15 @@ export default {
         this.selectedCampaign.title
       }`;
     },
+    sendersAndBotList() {
+      return [
+        {
+          id: 0,
+          name: 'Bot',
+        },
+        ...this.senderList,
+      ];
+    },
   },
   mounted() {
     this.setFormValues();
@@ -197,15 +206,16 @@ export default {
         message,
         enabled,
         trigger_rules: { url: endPoint, time_on_page: timeOnPage },
-        sender: { id: selectedSender },
+        sender,
       } = this.selectedCampaign;
       this.title = title;
       this.message = message;
       this.endPoint = endPoint;
       this.timeOnPage = timeOnPage;
-      this.selectedSender = selectedSender;
+      this.selectedSender = (sender && sender.id) || 0;
       this.enabled = enabled;
     },
+
     async editCampaign() {
       try {
         await this.$store.dispatch('campaigns/update', {
@@ -213,7 +223,7 @@ export default {
           title: this.title,
           message: this.message,
           inbox_id: this.$route.params.inboxId,
-          sender_id: this.selectedSender,
+          sender_id: this.selectedSender || null,
           enabled: this.enabled,
           trigger_rules: {
             url: this.endPoint,