feat: Add an option to delete campaigns (#2402)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/controllers/api/v1/accounts/campaigns_controller.rb

@@ -10,6 +10,11 @@ class Api::V1::Accounts::CampaignsController < Api::V1::Accounts::BaseController
     @campaign = Current.account.campaigns.create!(campaign_params)
   end
 
+  def destroy
+    @campaign.destroy
+    head :ok
+  end
+
   def show; end
 
   def update

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

@@ -42,6 +42,19 @@
         "ERROR_MESSAGE": "There was an error. Please try again."
       }
     },
+    "DELETE": {
+      "BUTTON_TEXT": "Delete",
+      "CONFIRM": {
+        "TITLE": "Confirm Deletion",
+        "MESSAGE": "Are you sure to delete?",
+        "YES": "Yes, Delete ",
+        "NO": "No, Keep "
+      },
+      "API": {
+        "SUCCESS_MESSAGE": "Campaign deleted successfully",
+        "ERROR_MESSAGE": "Could not delete the campaign. Please try again later."
+      }
+    },
     "EDIT": {
       "TITLE": "Edit campaign",
       "UPDATE_BUTTON_TEXT": "Update",

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

@@ -1,5 +1,4 @@
 <template>
-  <modal :show.sync="show" :on-close="onClose">
   <div class="column content-box">
     <woot-modal-header
       :header-title="$t('CAMPAIGN.ADD.TITLE')"
@@ -7,31 +6,30 @@
     />
     <form class="row" @submit.prevent="addCampaign">
       <div class="medium-12 columns">
-          <label :class="{ error: $v.title.$error }">
+        <woot-input
-            {{ $t('CAMPAIGN.ADD.FORM.TITLE.LABEL') }}
+          v-model="title"
-            <input
+          :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
-              v-model.trim="title"
           type="text"
+          :class="{ error: $v.title.$error }"
+          :error="$v.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
           :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
-              @input="$v.title.$touch"
+          @blur="$v.title.$touch"
         />
-          </label>
-        </div>
 
-        <div class="medium-12 columns">
         <label :class="{ error: $v.message.$error }">
           {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
           <textarea
-              v-model.trim="message"
+            v-model="message"
             rows="5"
             type="text"
             :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-              @input="$v.message.$touch"
+            @blur="$v.message.$touch"
           />
+          <span v-if="$v.message.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
+          </span>
         </label>
-        </div>
 
-        <div class="medium-12 columns">
         <label :class="{ error: $v.selectedSender.$error }">
           {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
           <select v-model="selectedSender">
@@ -47,38 +45,31 @@
             {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
           </span>
         </label>
-        </div>
 
-        <div class="medium-12 columns">
+        <woot-input
-          <label :class="{ error: $v.endPoint.$error }">
+          v-model="endPoint"
-            {{ $t('CAMPAIGN.ADD.FORM.END_POINT.LABEL') }}
+          :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
-            <input
-              v-model.trim="endPoint"
           type="text"
+          :class="{ error: $v.endPoint.$error }"
+          :error="
+            $v.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
+          "
           :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
-              @input="$v.endPoint.$touch"
+          @blur="$v.endPoint.$touch"
         />
-            <span v-if="$v.endPoint.$error" class="message">
+        <woot-input
-              {{ $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') }}
+          v-model="timeOnPage"
-            </span>
+          :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
-          </label>
+          type="text"
-        </div>
+          :class="{ error: $v.timeOnPage.$error }"
-        <div class="medium-12 columns">
+          :error="
-          <label :class="{ error: $v.timeOnPage.$error }">
+            $v.timeOnPage.$error
-            {{ $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL') }}
+              ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
-            <input
+              : ''
-              v-model.trim="timeOnPage"
+          "
-              type="number"
           :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
-              @input="$v.timeOnPage.$touch"
+          @blur="$v.timeOnPage.$touch"
         />
-            <span v-if="$v.timeOnPage.$error" class="message">
-              {{ $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR') }}
-            </span>
-          </label>
-        </div>
-
-        <div class="medium-12 columns">
         <label>
           <input
             v-model="enabled"
@@ -91,42 +82,31 @@
       </div>
 
       <div class="modal-footer">
-          <div class="medium-12 columns">
+        <woot-button
-            <woot-submit-button
+          :is-disabled="buttonDisabled"
-              :disabled="buttonDisabled"
+          :is-loading="uiFlags.isCreating"
-              :loading="uiFlags.isCreating"
+        >
-              :button-text="$t('CAMPAIGN.ADD.CREATE_BUTTON_TEXT')"
+          {{ $t('CAMPAIGN.ADD.CREATE_BUTTON_TEXT') }}
-            />
+        </woot-button>
-            <button class="button clear" @click.prevent="onClose">
+        <woot-button variant="clear" @click.prevent="onClose">
           {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
-            </button>
+        </woot-button>
-          </div>
       </div>
     </form>
   </div>
-  </modal>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 import { required, url, minLength } from 'vuelidate/lib/validators';
-import Modal from 'dashboard/components/Modal';
 import alertMixin from 'shared/mixins/alertMixin';
-
 export default {
-  components: {
-    Modal,
-  },
   mixins: [alertMixin],
   props: {
     senderList: {
       type: Array,
       default: () => [],
     },
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
   },
   data() {
     return {
@@ -158,7 +138,6 @@ export default {
       required,
     },
   },
-
   computed: {
     ...mapGetters({
       uiFlags: 'campaigns/getUIFlags',
@@ -183,8 +162,10 @@ export default {
       ];
     },
   },
-
   methods: {
+    onClose() {
+      this.$emit('on-close');
+    },
     async addCampaign() {
       try {
         await this.$store.dispatch('campaigns/create', {

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

@@ -9,33 +9,44 @@
       :campaigns="records"
       :show-empty-result="showEmptyResult"
       :is-loading="uiFlags.isFetching"
-      :on-edit-click="openEditPopup"
+      @on-edit-click="openEditPopup"
+      @on-delete-click="openDeletePopup"
     />
 
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-campaign :on-close="hideAddPopup" :sender-list="selectedAgents" />
+      <add-campaign :sender-list="selectedAgents" @on-close="hideAddPopup" />
     </woot-modal>
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
       <edit-campaign
-        :on-close="hideEditPopup"
         :selected-campaign="selectedCampaign"
         :sender-list="selectedAgents"
+        @on-close="hideEditPopup"
       />
     </woot-modal>
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('CAMPAIGN.DELETE.CONFIRM.TITLE')"
+      :message="$t('CAMPAIGN.DELETE.CONFIRM.MESSAGE')"
+      :confirm-text="$t('CAMPAIGN.DELETE.CONFIRM.YES')"
+      :reject-text="$t('CAMPAIGN.DELETE.CONFIRM.NO')"
+    />
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
 import AddCampaign from './AddCampaign';
 import CampaignsTable from './CampaignsTable';
 import EditCampaign from './EditCampaign';
-
 export default {
   components: {
     AddCampaign,
     CampaignsTable,
     EditCampaign,
   },
+  mixins: [alertMixin],
   props: {
     selectedAgents: {
       type: Array,
@@ -48,6 +59,7 @@ export default {
       showAddPopup: false,
       showEditPopup: false,
       selectedCampaign: {},
+      showDeleteConfirmationPopup: false,
     };
   },
   computed: {
@@ -81,6 +93,28 @@ export default {
     hideEditPopup() {
       this.showEditPopup = false;
     },
+    openDeletePopup(response) {
+      this.showDeleteConfirmationPopup = true;
+      this.selectedCampaign = response;
+    },
+    closeDeletePopup() {
+      this.showDeleteConfirmationPopup = false;
+    },
+    confirmDeletion() {
+      this.closeDeletePopup();
+      const {
+        row: { id },
+      } = this.selectedCampaign;
+      this.deleteCampaign(id);
+    },
+    async deleteCampaign(id) {
+      try {
+        await this.$store.dispatch('campaigns/delete', id);
+        this.showAlert(this.$t('CAMPAIGN.DELETE.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        this.showAlert(this.$t('CAMPAIGN.DELETE.API.ERROR_MESSAGE'));
+      }
+    },
   },
 };
 </script>
@@ -91,4 +125,8 @@ export default {
   justify-content: flex-end;
   padding-bottom: var(--space-one);
 }
+
+.content-box .page-top-bar::v-deep {
+  padding: var(--space-large) var(--space-large) var(--space-zero);
+}
 </style>

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

@@ -44,10 +44,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    onEditClick: {
-      type: Function,
-      default: () => {},
-    },
   },
 
   data() {
@@ -140,10 +136,18 @@ export default {
                 icon="ion-edit"
                 color-scheme="secondary"
                 classNames="grey-btn"
-                onClick={() => this.onEditClick(row)}
+                onClick={() => this.$emit('on-edit-click', row)}
               >
                 {this.$t('CAMPAIGN.LIST.BUTTONS.EDIT')}
               </WootButton>
+              <WootButton
+                variant="link"
+                icon="ion-close-circled"
+                color-scheme="secondary"
+                onClick={() => this.$emit('on-delete-click', row)}
+              >
+                {this.$t('CAMPAIGN.LIST.BUTTONS.DELETE')}
+              </WootButton>
             </div>
           ),
         },

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

@@ -1,24 +1,17 @@
 <template>
-  <modal :show.sync="show" :on-close="onClose">
   <div class="column content-box">
     <woot-modal-header :header-title="pageTitle" />
     <form class="row" @submit.prevent="editCampaign">
       <div class="medium-12 columns">
-          <label :class="{ error: $v.title.$error }">
+        <woot-input
-            {{ $t('CAMPAIGN.ADD.FORM.TITLE.LABEL') }}
+          v-model="title"
-            <input
+          :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
-              v-model.trim="title"
           type="text"
+          :class="{ error: $v.title.$error }"
+          :error="$v.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
           :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
-              @input="$v.title.$touch"
+          @blur="$v.title.$touch"
         />
-            <span v-if="$v.title.$error" class="message">
-              {{ $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') }}
-            </span>
-          </label>
-        </div>
-
-        <div class="medium-12 columns">
         <label :class="{ error: $v.message.$error }">
           {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
           <textarea
@@ -32,9 +25,6 @@
             {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
           </span>
         </label>
-        </div>
-
-        <div class="medium-12 columns">
         <label :class="{ error: $v.selectedSender.$error }">
           {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
           <select v-model="selectedSender">
@@ -50,38 +40,30 @@
             {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
           </span>
         </label>
-        </div>
+        <woot-input
-
+          v-model="endPoint"
-        <div class="medium-12 columns">
+          :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
-          <label :class="{ error: $v.endPoint.$error }">
-            {{ $t('CAMPAIGN.ADD.FORM.END_POINT.LABEL') }}
-            <input
-              v-model.trim="endPoint"
           type="text"
+          :class="{ error: $v.endPoint.$error }"
+          :error="
+            $v.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
+          "
           :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
-              @input="$v.endPoint.$touch"
+          @blur="$v.endPoint.$touch"
         />
-            <span v-if="$v.endPoint.$error" class="message">
+        <woot-input
-              {{ $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') }}
+          v-model="timeOnPage"
-            </span>
+          :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
-          </label>
+          type="text"
-        </div>
+          :class="{ error: $v.timeOnPage.$error }"
-        <div class="medium-12 columns">
+          :error="
-          <label :class="{ error: $v.timeOnPage.$error }">
+            $v.timeOnPage.$error
-            {{ $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL') }}
+              ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
-            <input
+              : ''
-              v-model.trim="timeOnPage"
+          "
-              type="number"
           :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
-              @input="$v.timeOnPage.$touch"
+          @blur="$v.timeOnPage.$touch"
         />
-            <span v-if="$v.timeOnPage.$error" class="message">
-              {{ $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR') }}
-            </span>
-          </label>
-        </div>
-
-        <div class="medium-12 columns">
         <label>
           <input
             v-model="enabled"
@@ -92,41 +74,28 @@
           {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
         </label>
       </div>
-
       <div class="modal-footer">
-          <woot-button :disabled="buttonDisabled" :loading="uiFlags.isCreating">
+        <woot-button
+          :is-disabled="buttonDisabled"
+          :is-loading="uiFlags.isCreating"
+        >
           {{ $t('CAMPAIGN.EDIT.UPDATE_BUTTON_TEXT') }}
         </woot-button>
-          <woot-button
+        <woot-button variant="clear" @click.prevent="onClose">
-            class="button clear"
-            :disabled="buttonDisabled"
-            :loading="uiFlags.isCreating"
-            @click.prevent="onClose"
-          >
           {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
         </woot-button>
       </div>
     </form>
   </div>
-  </modal>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 import { required, url, minLength } from 'vuelidate/lib/validators';
-import Modal from 'dashboard/components/Modal';
 import alertMixin from 'shared/mixins/alertMixin';
-
 export default {
-  components: {
-    Modal,
-  },
   mixins: [alertMixin],
   props: {
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
     selectedCampaign: {
       type: Object,
       default: () => {},
@@ -166,7 +135,6 @@ export default {
       required,
     },
   },
-
   computed: {
     ...mapGetters({
       uiFlags: 'campaigns/getUIFlags',
@@ -200,6 +168,9 @@ export default {
     this.setFormValues();
   },
   methods: {
+    onClose() {
+      this.$emit('on-close');
+    },
     setFormValues() {
       const {
         title,
@@ -215,7 +186,6 @@ export default {
       this.selectedSender = (sender && sender.id) || 0;
       this.enabled = enabled;
     },
-
     async editCampaign() {
       try {
         await this.$store.dispatch('campaigns/update', {

app/javascript/dashboard/store/modules/campaigns.js

@@ -54,6 +54,17 @@ export const actions = {
       commit(types.SET_CAMPAIGN_UI_FLAG, { isUpdating: false });
     }
   },
+  delete: async ({ commit }, id) => {
+    commit(types.SET_CAMPAIGN_UI_FLAG, { isDeleting: true });
+    try {
+      await CampaignsAPI.delete(id);
+      commit(types.DELETE_CAMPAIGN, id);
+    } catch (error) {
+      throw new Error(error);
+    } finally {
+      commit(types.SET_CAMPAIGN_UI_FLAG, { isDeleting: false });
+    }
+  },
 };
 
 export const mutations = {
@@ -67,6 +78,7 @@ export const mutations = {
   [types.ADD_CAMPAIGN]: MutationHelpers.create,
   [types.SET_CAMPAIGNS]: MutationHelpers.set,
   [types.EDIT_CAMPAIGN]: MutationHelpers.update,
+  [types.DELETE_CAMPAIGN]: MutationHelpers.destroy,
 };
 
 export default {

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

@@ -68,4 +68,26 @@ describe('#actions', () => {
       ]);
     });
   });
+
+  describe('#delete', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({ data: campaignList[0] });
+      await actions.delete({ commit }, campaignList[0].id);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isDeleting: true }],
+        [types.default.DELETE_CAMPAIGN, campaignList[0].id],
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.delete({ commit }, campaignList[0].id)
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isDeleting: true }],
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
 });

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

@@ -30,4 +30,12 @@ describe('#mutations', () => {
       expect(state.records[0].message).toEqual('Hey, What brings you today');
     });
   });
+
+  describe('#DELETE_LABEL', () => {
+    it('delete campaign record', () => {
+      const state = { records: [campaigns[0]] };
+      mutations[types.DELETE_CAMPAIGN](state, 1);
+      expect(state.records).toEqual([]);
+    });
+  });
 });

app/javascript/dashboard/store/mutation-types.js

@@ -158,6 +158,7 @@ export default {
   SET_CAMPAIGNS: 'SET_CAMPAIGNS',
   ADD_CAMPAIGN: 'ADD_CAMPAIGN',
   EDIT_CAMPAIGN: 'EDIT_CAMPAIGN',
+  DELETE_CAMPAIGN: 'DELETE_CAMPAIGN',
 
   // Contact notes
   SET_CONTACT_NOTES_UI_FLAG: 'SET_CONTACT_NOTES_UI_FLAG',

config/routes.rb

@@ -49,7 +49,7 @@ Rails.application.routes.draw do
             end
           end
           resources :canned_responses, except: [:show, :edit, :new]
-          resources :campaigns, only: [:index, :create, :show, :update]
+          resources :campaigns, only: [:index, :create, :show, :update, :destroy]
 
           namespace :channels do
             resource :twilio_channel, only: [:create]

spec/controllers/api/v1/accounts/campaigns_controller_spec.rb

@@ -145,4 +145,40 @@ RSpec.describe 'Campaigns API', type: :request do
       end
     end
   end
+
+  describe 'DELETE /api/v1/accounts/{account.id}/campaigns/:id' do
+    let(:inbox) { create(:inbox, account: account) }
+    let!(:campaign) { create(:campaign, account: account) }
+
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        delete "/api/v1/accounts/#{account.id}/campaigns/#{campaign.display_id}",
+               as: :json
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an authenticated user' do
+      let(:agent) { create(:user, account: account, role: :agent) }
+      let(:administrator) { create(:user, account: account, role: :administrator) }
+
+      it 'return unauthorized if agent' do
+        delete "/api/v1/accounts/#{account.id}/campaigns/#{campaign.display_id}",
+               headers: agent.create_new_auth_token,
+               as: :json
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+
+      it 'delete campaign if admin' do
+        delete "/api/v1/accounts/#{account.id}/campaigns/#{campaign.display_id}",
+               headers: administrator.create_new_auth_token,
+               as: :json
+
+        expect(response).to have_http_status(:success)
+        expect(::Campaign.exists?(campaign.display_id)).to eq false
+      end
+    end
+  end
 end