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

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2021-06-15 14:14:59 +05:30 · 2021-06-15 14:14:59 +05:30 · 0f377da109
commit 0f377da109
parent a56aa5656d
12 changed files with 334 additions and 244 deletions
--- 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
--- 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",
--- 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', {
--- 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>
--- 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>
          ),
        },
--- 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', {
--- 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 {
--- 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 }],
+      ]);
+    });
+  });
 });
--- 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([]);
+    });
+  });
 });
--- 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',
--- 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]
--- 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