From 0f377da1091d54fd42d95cd71d59950b086143d6 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Tue, 15 Jun 2021 14:14:59 +0530
Subject: [PATCH] feat: Add an option to delete campaigns (#2402)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .../api/v1/accounts/campaigns_controller.rb   |   5 +
 .../dashboard/i18n/locale/en/campaign.json    |  13 ++
 .../settings/inbox/components/AddCampaign.vue | 207 ++++++++---------
 .../settings/inbox/components/Campaign.vue    |  46 +++-
 .../inbox/components/CampaignsTable.vue       |  14 +-
 .../inbox/components/EditCampaign.vue         | 212 ++++++++----------
 .../dashboard/store/modules/campaigns.js      |  12 +
 .../modules/specs/campaigns/actions.spec.js   |  22 ++
 .../modules/specs/campaigns/mutations.spec.js |   8 +
 .../dashboard/store/mutation-types.js         |   1 +
 config/routes.rb                              |   2 +-
 .../v1/accounts/campaigns_controller_spec.rb  |  36 +++
 12 files changed, 334 insertions(+), 244 deletions(-)

diff --git a/app/controllers/api/v1/accounts/campaigns_controller.rb b/app/controllers/api/v1/accounts/campaigns_controller.rb
index c4555017d..5c58d3f51 100644
--- a/app/controllers/api/v1/accounts/campaigns_controller.rb
+++ b/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
diff --git a/app/javascript/dashboard/i18n/locale/en/campaign.json b/app/javascript/dashboard/i18n/locale/en/campaign.json
index 2eed61b19..f1c249669 100644
--- a/app/javascript/dashboard/i18n/locale/en/campaign.json
+++ b/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",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/AddCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/AddCampaign.vue
index 70be87feb..ea067fa3e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/AddCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/AddCampaign.vue
@@ -1,132 +1,112 @@
 <template>
-  <modal :show.sync="show" :on-close="onClose">
-    <div class="column content-box">
-      <woot-modal-header
-        :header-title="$t('CAMPAIGN.ADD.TITLE')"
-        :header-content="$t('CAMPAIGN.ADD.DESC')"
-      />
-      <form class="row" @submit.prevent="addCampaign">
-        <div class="medium-12 columns">
-          <label :class="{ error: $v.title.$error }">
-            {{ $t('CAMPAIGN.ADD.FORM.TITLE.LABEL') }}
-            <input
-              v-model.trim="title"
-              type="text"
-              :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
-              @input="$v.title.$touch"
-            />
-          </label>
-        </div>
+  <div class="column content-box">
+    <woot-modal-header
+      :header-title="$t('CAMPAIGN.ADD.TITLE')"
+      :header-content="$t('CAMPAIGN.ADD.DESC')"
+    />
+    <form class="row" @submit.prevent="addCampaign">
+      <div class="medium-12 columns">
+        <woot-input
+          v-model="title"
+          :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
+          type="text"
+          :class="{ error: $v.title.$error }"
+          :error="$v.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
+          :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
+          @blur="$v.title.$touch"
+        />
 
-        <div class="medium-12 columns">
-          <label :class="{ error: $v.message.$error }">
-            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
-            <textarea
-              v-model.trim="message"
-              rows="5"
-              type="text"
-              :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-              @input="$v.message.$touch"
-            />
-          </label>
-        </div>
+        <label :class="{ error: $v.message.$error }">
+          {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
+          <textarea
+            v-model="message"
+            rows="5"
+            type="text"
+            :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
+            @blur="$v.message.$touch"
+          />
+          <span v-if="$v.message.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
+          </span>
+        </label>
 
-        <div class="medium-12 columns">
-          <label :class="{ error: $v.selectedSender.$error }">
-            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
-            <select v-model="selectedSender">
-              <option
-                v-for="sender in sendersAndBotList"
-                :key="sender.name"
-                :value="sender.id"
-              >
-                {{ sender.name }}
-              </option>
-            </select>
-            <span v-if="$v.selectedSender.$error" class="message">
-              {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
-            </span>
-          </label>
-        </div>
+        <label :class="{ error: $v.selectedSender.$error }">
+          {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
+          <select v-model="selectedSender">
+            <option
+              v-for="sender in sendersAndBotList"
+              :key="sender.name"
+              :value="sender.id"
+            >
+              {{ sender.name }}
+            </option>
+          </select>
+          <span v-if="$v.selectedSender.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
+          </span>
+        </label>
 
-        <div class="medium-12 columns">
-          <label :class="{ error: $v.endPoint.$error }">
-            {{ $t('CAMPAIGN.ADD.FORM.END_POINT.LABEL') }}
-            <input
-              v-model.trim="endPoint"
-              type="text"
-              :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
-              @input="$v.endPoint.$touch"
-            />
-            <span v-if="$v.endPoint.$error" class="message">
-              {{ $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') }}
-            </span>
-          </label>
-        </div>
-        <div class="medium-12 columns">
-          <label :class="{ error: $v.timeOnPage.$error }">
-            {{ $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL') }}
-            <input
-              v-model.trim="timeOnPage"
-              type="number"
-              :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
-              @input="$v.timeOnPage.$touch"
-            />
-            <span v-if="$v.timeOnPage.$error" class="message">
-              {{ $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR') }}
-            </span>
-          </label>
-        </div>
+        <woot-input
+          v-model="endPoint"
+          :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
+          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')"
+          @blur="$v.endPoint.$touch"
+        />
+        <woot-input
+          v-model="timeOnPage"
+          :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
+          type="text"
+          :class="{ error: $v.timeOnPage.$error }"
+          :error="
+            $v.timeOnPage.$error
+              ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
+              : ''
+          "
+          :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
+          @blur="$v.timeOnPage.$touch"
+        />
+        <label>
+          <input
+            v-model="enabled"
+            type="checkbox"
+            value="enabled"
+            name="enabled"
+          />
+          {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
+        </label>
+      </div>
 
-        <div class="medium-12 columns">
-          <label>
-            <input
-              v-model="enabled"
-              type="checkbox"
-              value="enabled"
-              name="enabled"
-            />
-            {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
-          </label>
-        </div>
-
-        <div class="modal-footer">
-          <div class="medium-12 columns">
-            <woot-submit-button
-              :disabled="buttonDisabled"
-              :loading="uiFlags.isCreating"
-              :button-text="$t('CAMPAIGN.ADD.CREATE_BUTTON_TEXT')"
-            />
-            <button class="button clear" @click.prevent="onClose">
-              {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </modal>
+      <div class="modal-footer">
+        <woot-button
+          :is-disabled="buttonDisabled"
+          :is-loading="uiFlags.isCreating"
+        >
+          {{ $t('CAMPAIGN.ADD.CREATE_BUTTON_TEXT') }}
+        </woot-button>
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
 </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', {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/Campaign.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/Campaign.vue
index 6692384dd..322d15231 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/Campaign.vue
+++ b/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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignsTable.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignsTable.vue
index 9c903183f..3e1855cb4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignsTable.vue
+++ b/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>
           ),
         },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/EditCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/EditCampaign.vue
index 143dc7a5a..7696bc836 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/EditCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/EditCampaign.vue
@@ -1,132 +1,101 @@
 <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 }">
-            {{ $t('CAMPAIGN.ADD.FORM.TITLE.LABEL') }}
-            <input
-              v-model.trim="title"
-              type="text"
-              :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
-              @input="$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
-              v-model.trim="message"
-              rows="5"
-              type="text"
-              :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-              @input="$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">
-              <option
-                v-for="sender in sendersAndBotList"
-                :key="sender.name"
-                :value="sender.id"
-              >
-                {{ sender.name }}
-              </option>
-            </select>
-            <span v-if="$v.selectedSender.$error" class="message">
-              {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
-            </span>
-          </label>
-        </div>
-
-        <div class="medium-12 columns">
-          <label :class="{ error: $v.endPoint.$error }">
-            {{ $t('CAMPAIGN.ADD.FORM.END_POINT.LABEL') }}
-            <input
-              v-model.trim="endPoint"
-              type="text"
-              :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
-              @input="$v.endPoint.$touch"
-            />
-            <span v-if="$v.endPoint.$error" class="message">
-              {{ $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') }}
-            </span>
-          </label>
-        </div>
-        <div class="medium-12 columns">
-          <label :class="{ error: $v.timeOnPage.$error }">
-            {{ $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL') }}
-            <input
-              v-model.trim="timeOnPage"
-              type="number"
-              :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
-              @input="$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"
-              type="checkbox"
-              value="enabled"
-              name="enabled"
-            />
-            {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
-          </label>
-        </div>
-
-        <div class="modal-footer">
-          <woot-button :disabled="buttonDisabled" :loading="uiFlags.isCreating">
-            {{ $t('CAMPAIGN.EDIT.UPDATE_BUTTON_TEXT') }}
-          </woot-button>
-          <woot-button
-            class="button clear"
-            :disabled="buttonDisabled"
-            :loading="uiFlags.isCreating"
-            @click.prevent="onClose"
-          >
-            {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
-          </woot-button>
-        </div>
-      </form>
-    </div>
-  </modal>
+  <div class="column content-box">
+    <woot-modal-header :header-title="pageTitle" />
+    <form class="row" @submit.prevent="editCampaign">
+      <div class="medium-12 columns">
+        <woot-input
+          v-model="title"
+          :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
+          type="text"
+          :class="{ error: $v.title.$error }"
+          :error="$v.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
+          :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
+          @blur="$v.title.$touch"
+        />
+        <label :class="{ error: $v.message.$error }">
+          {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
+          <textarea
+            v-model.trim="message"
+            rows="5"
+            type="text"
+            :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
+            @input="$v.message.$touch"
+          />
+          <span v-if="$v.message.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
+          </span>
+        </label>
+        <label :class="{ error: $v.selectedSender.$error }">
+          {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
+          <select v-model="selectedSender">
+            <option
+              v-for="sender in sendersAndBotList"
+              :key="sender.name"
+              :value="sender.id"
+            >
+              {{ sender.name }}
+            </option>
+          </select>
+          <span v-if="$v.selectedSender.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
+          </span>
+        </label>
+        <woot-input
+          v-model="endPoint"
+          :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
+          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')"
+          @blur="$v.endPoint.$touch"
+        />
+        <woot-input
+          v-model="timeOnPage"
+          :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
+          type="text"
+          :class="{ error: $v.timeOnPage.$error }"
+          :error="
+            $v.timeOnPage.$error
+              ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
+              : ''
+          "
+          :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
+          @blur="$v.timeOnPage.$touch"
+        />
+        <label>
+          <input
+            v-model="enabled"
+            type="checkbox"
+            value="enabled"
+            name="enabled"
+          />
+          {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
+        </label>
+      </div>
+      <div class="modal-footer">
+        <woot-button
+          :is-disabled="buttonDisabled"
+          :is-loading="uiFlags.isCreating"
+        >
+          {{ $t('CAMPAIGN.EDIT.UPDATE_BUTTON_TEXT') }}
+        </woot-button>
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
 </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', {
diff --git a/app/javascript/dashboard/store/modules/campaigns.js b/app/javascript/dashboard/store/modules/campaigns.js
index fd8aa6f97..f0285aa46 100644
--- a/app/javascript/dashboard/store/modules/campaigns.js
+++ b/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 {
diff --git a/app/javascript/dashboard/store/modules/specs/campaigns/actions.spec.js b/app/javascript/dashboard/store/modules/specs/campaigns/actions.spec.js
index ad9b647b2..413d86793 100644
--- a/app/javascript/dashboard/store/modules/specs/campaigns/actions.spec.js
+++ b/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 }],
+      ]);
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/modules/specs/campaigns/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/campaigns/mutations.spec.js
index e01359c78..cb293af8f 100644
--- a/app/javascript/dashboard/store/modules/specs/campaigns/mutations.spec.js
+++ b/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([]);
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js
index 7ccb6bccb..657c6ec57 100755
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/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',
diff --git a/config/routes.rb b/config/routes.rb
index fba20286f..bdeaf7c01 100644
--- a/config/routes.rb
+++ b/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]
diff --git a/spec/controllers/api/v1/accounts/campaigns_controller_spec.rb b/spec/controllers/api/v1/accounts/campaigns_controller_spec.rb
index 5a90929d5..ebe7d4dae 100644
--- a/spec/controllers/api/v1/accounts/campaigns_controller_spec.rb
+++ b/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