feat: Campaign table (#2212)

* code cleanup * add campaign table * update locale texts * locale text cleanup * Rename selectedAgent with selectedSender in add campaign form * code cleanup * remove timer mixin * update avatar size to 20px * add border for table * add campaigns get action specs * rename campaign table component * fix style issues * update sender list based on inbox permission * style fixes * review fixes * add campaign sender component * replace wootsubmit button with wootbutton * update scroll width * replace campaign status with woot label * changes as per review * style fixes * remove unused code * disable campaign in inbox settings page * review fixes
2025-11-02 20:18:08 +00:00 · 2021-05-06 10:46:59 +05:30
parent 381c358ffd
commit 6245a10a70
7 changed files with 344 additions and 41 deletions
--- a/app/javascript/dashboard/i18n/locale/en/campaign.json
+++ b/app/javascript/dashboard/i18n/locale/en/campaign.json
@@ -3,9 +3,6 @@
    "HEADER": "Campaigns",
    "SIDEBAR_TXT": "Proactive messages allow the customer to send outbound messages to their contacts which would trigger more conversations. Click on <b>Add Campaign</b> to create a new campaign. You can also edit or delete an existing campaign by clicking on the Edit or Delete button.",
    "HEADER_BTN_TXT": "Create a campaign",
-    "LIST": {
-      "404": "There are no campaigns created for this inbox."
-    },
    "ADD": {
      "TITLE": "Create a campaign",
      "DESC": "Proactive messages allow the customer to send outbound messages to their contacts which would trigger more conversations.",
@@ -44,6 +41,27 @@
        "SUCCESS_MESSAGE": "Campaign created successfully",
        "ERROR_MESSAGE": "There was an error. Please try again."
      }
+    },
+    "LIST": {
+      "LOADING_MESSAGE": "Loading campaigns...",
+      "TABLE_HEADER": {
+        "TITLE": "Title",
+        "MESSAGE": "Message",
+        "STATUS": "Status",
+        "SENDER": "Sender",
+        "URL": "URL",
+        "TIME_ON_PAGE": "Time(Seconds)",
+        "CREATED_AT": "Created at"
+      },
+      "BUTTONS": {
+        "ADD": "Add",
+        "EDIT": "Edit",
+        "DELETE": "Delete"
+      },
+      "STATUS": {
+        "ENABLED": "Enabled",
+        "DISABLED": "Disabled"
+      }
    }
  }
 }
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -258,7 +258,7 @@
      <weekly-availability :inbox="inbox" />
    </div>
    <div v-if="selectedTabKey === 'campaign'">
-      <campaign />
+      <campaign :selected-agents="selectedAgents" />
    </div>
  </div>
 </template>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/AddCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/AddCampaign.vue
@@ -32,18 +32,18 @@
        </div>

        <div class="medium-12 columns">
-          <label :class="{ error: $v.selectedAgent.$error }">
+          <label :class="{ error: $v.selectedSender.$error }">
            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
-            <select v-model="selectedAgent">
+            <select v-model="selectedSender">
              <option
-                v-for="agent in agentsList"
-                :key="agent.name"
-                :value="agent.name"
+                v-for="sender in senderList"
+                :key="sender.name"
+                :value="sender.id"
              >
-                {{ agent.name }}
+                {{ sender.name }}
              </option>
            </select>
-            <span v-if="$v.selectedAgent.$error" class="message">
+            <span v-if="$v.selectedSender.$error" class="message">
              {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
            </span>
          </label>
@@ -119,6 +119,10 @@ export default {
  },
  mixins: [alertMixin],
  props: {
+    senderList: {
+      type: Array,
+      default: () => [],
+    },
    onClose: {
      type: Function,
      default: () => {},
@@ -128,7 +132,7 @@ export default {
    return {
      title: '',
      message: '',
-      selectedAgent: '',
+      selectedSender: '',
      endPoint: '',
      timeOnPage: 10,
      show: true,
@@ -142,7 +146,7 @@ export default {
    message: {
      required,
    },
-    selectedAgent: {
+    selectedSender: {
      required,
    },
    endPoint: {
@@ -157,18 +161,13 @@ export default {

  computed: {
    ...mapGetters({
-      agentList: 'agents/getAgents',
      uiFlags: 'campaigns/getUIFlags',
    }),
-
-    agentsList() {
-      return this.agentList;
-    },
    buttonDisabled() {
      return (
        this.$v.message.$invalid ||
        this.$v.title.$invalid ||
-        this.$v.selectedAgent.$invalid ||
+        this.$v.selectedSender.$invalid ||
        this.$v.endPoint.$invalid ||
        this.$v.timeOnPage.$invalid ||
        this.uiFlags.isCreating
@@ -182,7 +181,7 @@ export default {
          title: this.title,
          message: this.message,
          inbox_id: this.$route.params.inboxId,
-          sender_id: this.selectedAgent,
+          sender_id: this.selectedSender,
          enabled: this.enabled,
          trigger_rules: {
            url: this.endPoint,
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/Campaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/Campaign.vue
@@ -1,41 +1,37 @@
 <template>
  <div class="column content-box">
-    <div v-if="campaigns.length" class="row button-wrapper">
+    <div class="row button-wrapper">
      <woot-button @click="openAddPopup">
        <i class="icon ion-android-add-circle"></i>
        {{ $t('CAMPAIGN.HEADER_BTN_TXT') }}
      </woot-button>
    </div>
+    <campaigns-table
+      :campaigns="records"
+      :show-empty-state="showEmptyResult"
+      :is-loading="uiFlags.isFetching"
+    />

-    <div v-if="!campaigns.length" class="row">
-      <div class="small-8 columns">
-        <p class="no-items-error-message">
-          {{ $t('CAMPAIGN.LIST.404') }}
-          <a @click="openAddPopup">
-            {{ $t('CAMPAIGN.HEADER_BTN_TXT') }}
-          </a>
-        </p>
-      </div>
-
-      <div class="small-4 columns">
-        <span>
-          <p>
-            <b> {{ $t('CAMPAIGN.HEADER') }}</b>
-          </p>
-          <p v-html="$t('CAMPAIGN.SIDEBAR_TXT')" />
-        </span>
-      </div>
-    </div>
    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-campaign :on-close="hideAddPopup" />
+      <add-campaign :on-close="hideAddPopup" :sender-list="selectedAgents" />
    </woot-modal>
  </div>
 </template>
 <script>
+import { mapGetters } from 'vuex';
 import AddCampaign from './AddCampaign';
+import CampaignsTable from './CampaignsTable';
+
 export default {
  components: {
    AddCampaign,
+    CampaignsTable,
+  },
+  props: {
+    selectedAgents: {
+      type: Array,
+      default: () => [],
+    },
  },
  data() {
    return {
@@ -43,6 +39,19 @@ export default {
      showAddPopup: false,
    };
  },
+  computed: {
+    ...mapGetters({
+      records: 'campaigns/getCampaigns',
+      uiFlags: 'campaigns/getUIFlags',
+    }),
+    showEmptyResult() {
+      const hasEmptyResults = this.records.length === 0;
+      return hasEmptyResults;
+    },
+  },
+  mounted() {
+    this.$store.dispatch('campaigns/get');
+  },
  methods: {
    openAddPopup() {
      this.showAddPopup = true;
@@ -58,5 +67,6 @@ export default {
 .button-wrapper {
  display: flex;
  justify-content: flex-end;
+  padding-bottom: var(--space-one);
 }
 </style>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignSender.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignSender.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="row--user-block">
+    <Thumbnail
+      :src="sender.thumbnail"
+      size="20px"
+      :username="sender.name"
+      :status="sender.availability_status"
+    />
+    <div>
+      <h6 class="text-block-title text-truncate">
+        {{ sender.name }}
+      </h6>
+    </div>
+  </div>
+</template>
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+export default {
+  components: {
+    Thumbnail,
+  },
+  props: {
+    sender: {
+      type: Object,
+      default: () => {},
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '~dashboard/assets/scss/mixins';
+
+.row--user-block {
+  align-items: center;
+  display: flex;
+  text-align: left;
+
+  .user-name {
+    margin: 0;
+    text-transform: capitalize;
+  }
+  .user-thumbnail-box {
+    margin-right: var(--space-small);
+  }
+}
+</style>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignsTable.vue
@@ -0,0 +1,210 @@
+<template>
+  <section class="campaigns-table-wrap">
+    <ve-table
+      :columns="columns"
+      scroll-width="155rem"
+      :table-data="tableData"
+      :border-around="true"
+    />
+
+    <empty-state v-if="showEmptyResult" :title="$t('CAMPAIGN.LIST.404')" />
+    <div v-if="isLoading" class="campaign--loader">
+      <spinner />
+      <span>{{ $t('CAMPAIGN.LIST.LOADING_MESSAGE') }}</span>
+    </div>
+  </section>
+</template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway';
+import { VeTable } from 'vue-easytable';
+import Spinner from 'shared/components/Spinner.vue';
+import Label from 'dashboard/components/ui/Label';
+import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
+import WootButton from 'dashboard/components/ui/WootButton.vue';
+import CampaignSender from './CampaignSender';
+
+export default {
+  components: {
+    EmptyState,
+    Spinner,
+    VeTable,
+  },
+  mixins: [clickaway],
+  props: {
+    campaigns: {
+      type: Array,
+      default: () => [],
+    },
+    showEmptyResult: {
+      type: Boolean,
+      default: false,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      columns: [
+        {
+          field: 'title',
+          key: 'title',
+          title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.TITLE'),
+          fixed: 'left',
+          align: 'left',
+          renderBodyCell: ({ row }) => (
+            <div class="row--title-block">
+              <h6 class="sub-block-title title text-truncate">{row.title}</h6>
+            </div>
+          ),
+        },
+
+        {
+          field: 'message',
+          key: 'message',
+          title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.MESSAGE'),
+          align: 'left',
+          width: 350,
+          renderBodyCell: ({ row }) => {
+            return (
+              <div class="text-truncate">
+                <span title={row.message}>{row.message}</span>
+              </div>
+            );
+          },
+        },
+        {
+          field: 'enabled',
+          key: 'enabled',
+          title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.STATUS'),
+          align: 'left',
+          renderBodyCell: ({ row }) => {
+            const labelText = row.enabled
+              ? this.$t('CAMPAIGN.LIST.STATUS.ENABLED')
+              : this.$t('CAMPAIGN.LIST.STATUS.DISABLED');
+            const colorScheme = row.enabled ? 'success' : 'secondary';
+            return <Label title={labelText} colorScheme={colorScheme} />;
+          },
+        },
+
+        {
+          field: 'sender',
+          key: 'sender',
+          title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.SENDER'),
+          align: 'left',
+          renderBodyCell: ({ row }) => {
+            if (row.sender) return <CampaignSender sender={row.sender} />;
+            return '---';
+          },
+        },
+        {
+          field: 'url',
+          key: 'url',
+          title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.URL'),
+          align: 'left',
+          renderBodyCell: ({ row }) => (
+            <div class="text-truncate">
+              <a
+                target="_blank"
+                rel="noopener noreferrer nofollow"
+                href={row.url}
+                title={row.url}
+              >
+                {row.url}
+              </a>
+            </div>
+          ),
+        },
+        {
+          field: 'timeOnPage',
+          key: 'timeOnPage',
+          title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.TIME_ON_PAGE'),
+          align: 'left',
+        },
+
+        {
+          field: 'buttons',
+          key: 'buttons',
+          title: '',
+          align: 'left',
+          renderBodyCell: () => (
+            <div class="button-wrapper">
+              <WootButton
+                variant="clear"
+                icon="ion-edit"
+                color-scheme="secondary"
+                classNames="hollow grey-btn"
+                click="openEditPopup(label)"
+              >
+                {this.$t('CAMPAIGN.LIST.BUTTONS.EDIT')}
+              </WootButton>
+            </div>
+          ),
+        },
+      ],
+    };
+  },
+  computed: {
+    tableData() {
+      if (this.isLoading) {
+        return [];
+      }
+      return this.campaigns.map((item) => {
+        return {
+          ...item,
+          url: item.trigger_rules.url,
+          timeOnPage: item.trigger_rules.time_on_page,
+        };
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.campaigns-table-wrap::v-deep {
+  .ve-table {
+    padding-bottom: var(--space-large);
+    thead.ve-table-header .ve-table-header-tr .ve-table-header-th {
+      font-size: var(--font-size-mini);
+      padding: var(--space-small) var(--space-two);
+    }
+    tbody.ve-table-body .ve-table-body-tr .ve-table-body-td {
+      padding: var(--space-slab) var(--space-two);
+    }
+  }
+
+  .row--title-block {
+    align-items: center;
+    display: flex;
+    text-align: left;
+
+    .title {
+      font-size: var(--font-size-small);
+      margin: 0;
+      text-transform: capitalize;
+    }
+  }
+  .label {
+    padding: var(--space-smaller) var(--space-small);
+  }
+}
+
+.campaign--loader {
+  align-items: center;
+  display: flex;
+  font-size: var(--font-size-default);
+  justify-content: center;
+  padding: var(--space-big);
+}
+
+.button-wrapper {
+  justify-content: space-evenly;
+  display: flex;
+  flex-direction: row;
+  min-width: 20rem;
+}
+</style>
--- a/app/javascript/dashboard/store/modules/specs/campaigns/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/campaigns/actions.spec.js
@@ -8,6 +8,25 @@ global.axios = axios;
 jest.mock('axios');

 describe('#actions', () => {
+  describe('#get', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({ data: campaignList });
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isFetching: true }],
+        [types.default.SET_CAMPAIGNS, campaignList],
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isFetching: true }],
+        [types.default.SET_CAMPAIGN_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
  describe('#create', () => {
    it('sends correct actions if API is success', async () => {
      axios.post.mockResolvedValue({ data: campaignList[0] });