From cf785123a5e3815197b76a7f4ddb58233a69ae67 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Thu, 15 Jul 2021 13:31:43 +0530
Subject: [PATCH] feat: One off campaign UI (#2621)

---
 .../dashboard/assets/scss/_date-picker.scss   |  29 +++
 .../dashboard/assets/scss/_woot.scss          |   1 +
 .../components/ui/DateRangePicker.vue         |  28 +--
 .../components/ui/DateTimePicker.vue          |  47 +++++
 .../ui/stories/DateRangePicker.stories.js     |   4 +-
 .../ui/stories/DateTimePicker.stories.js      |  38 ++++
 .../dashboard/i18n/locale/en/campaign.json    |  16 +-
 .../dashboard/settings/inbox/Settings.vue     |  17 +-
 .../settings/inbox/components/AddCampaign.vue | 119 ++++++++++-
 .../settings/inbox/components/Campaign.vue    |  13 +-
 .../inbox/components/CampaignsTable.vue       | 188 ++++++++++++------
 .../dashboard/settings/reports/Index.vue      |   1 +
 .../reports/components/DateRangeSelector.vue  |   7 +
 app/javascript/shared/constants/campaign.js   |   4 +
 app/javascript/shared/mixins/campaignMixin.js |  19 ++
 .../shared/mixins/specs/campaignMixin.spec.js |  49 +++++
 16 files changed, 473 insertions(+), 107 deletions(-)
 create mode 100644 app/javascript/dashboard/assets/scss/_date-picker.scss
 create mode 100644 app/javascript/dashboard/components/ui/DateTimePicker.vue
 create mode 100644 app/javascript/dashboard/components/ui/stories/DateTimePicker.stories.js
 create mode 100644 app/javascript/shared/constants/campaign.js
 create mode 100644 app/javascript/shared/mixins/campaignMixin.js
 create mode 100644 app/javascript/shared/mixins/specs/campaignMixin.spec.js

diff --git a/app/javascript/dashboard/assets/scss/_date-picker.scss b/app/javascript/dashboard/assets/scss/_date-picker.scss
new file mode 100644
index 000000000..c9b4b7b12
--- /dev/null
+++ b/app/javascript/dashboard/assets/scss/_date-picker.scss
@@ -0,0 +1,29 @@
+@import '~vue2-datepicker/scss/index';
+
+.mx-datepicker-popup {
+  z-index: 99999;
+}
+
+.date-picker {
+  .mx-datepicker {
+    width: 100%;
+  }
+
+  .mx-datepicker-range {
+    width: 320px;
+  }
+
+  .mx-input {
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-normal);
+    box-shadow: none;
+    display: flex;
+    height: 4.6rem;
+  }
+
+  .mx-input:disabled,
+  .mx-input[readonly] {
+    background-color: var(--white);
+    cursor: pointer;
+  }
+}
diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index d156f77b9..e3ad32e2e 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -12,6 +12,7 @@
 @import 'foundation-settings';
 @import 'helper-classes';
 @import 'formulate';
+@import 'date-picker';
 
 @import 'foundation-sites/scss/foundation';
 @import '~bourbon/core/bourbon';
diff --git a/app/javascript/dashboard/components/ui/DateRangePicker.vue b/app/javascript/dashboard/components/ui/DateRangePicker.vue
index 83699a747..08ce0e0c1 100644
--- a/app/javascript/dashboard/components/ui/DateRangePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateRangePicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="woot-date-range-picker">
+  <div class="date-picker">
     <date-picker
       :range="true"
       :confirm="true"
@@ -15,7 +15,6 @@
 
 <script>
 import DatePicker from 'vue2-datepicker';
-import 'vue2-datepicker/index.css';
 export default {
   components: { DatePicker },
   props: {
@@ -33,32 +32,9 @@ export default {
     },
   },
   methods: {
-    updateValue(val) {
-      this.$emit('change', val);
-    },
     handleChange(value) {
-      this.updateValue(value);
+      this.$emit('change', value);
     },
   },
 };
 </script>
-
-<style lang="scss">
-.woot-date-range-picker {
-  margin-left: var(--space-smaller);
-
-  .mx-input {
-    display: flex;
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-normal);
-    box-shadow: none;
-    height: 4.6rem;
-  }
-
-  .mx-input:disabled,
-  .mx-input[readonly] {
-    background-color: var(--white);
-    cursor: pointer;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/ui/DateTimePicker.vue b/app/javascript/dashboard/components/ui/DateTimePicker.vue
new file mode 100644
index 000000000..4507edf78
--- /dev/null
+++ b/app/javascript/dashboard/components/ui/DateTimePicker.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="date-picker">
+    <date-picker
+      type="datetime"
+      :confirm="true"
+      :clearable="false"
+      :editable="false"
+      :confirm-text="confirmText"
+      :placeholder="placeholder"
+      :value="value"
+      :disabled-date="disableBeforeToday"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script>
+import addDays from 'date-fns/addDays';
+import DatePicker from 'vue2-datepicker';
+export default {
+  components: { DatePicker },
+  props: {
+    confirmText: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: Date,
+      default: () => [],
+    },
+  },
+
+  methods: {
+    handleChange(value) {
+      this.$emit('change', value);
+    },
+    disableBeforeToday(date) {
+      const yesterdayDate = addDays(new Date(), -1);
+      return date < yesterdayDate;
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/components/ui/stories/DateRangePicker.stories.js b/app/javascript/dashboard/components/ui/stories/DateRangePicker.stories.js
index 91fac6317..8cdaa2461 100644
--- a/app/javascript/dashboard/components/ui/stories/DateRangePicker.stories.js
+++ b/app/javascript/dashboard/components/ui/stories/DateRangePicker.stories.js
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import WootDateRangePicker from '../DateRangePicker';
+import WootDateRangePicker from '../DateRangePicker.vue';
 
 export default {
   title: 'Components/Date Picker/Date Range Picker',
@@ -34,5 +34,5 @@ const Template = (args, { argTypes }) => ({
 export const DateRangePicker = Template.bind({});
 DateRangePicker.args = {
   onChange: action('applied'),
-  value: [new Date(), new Date()],
+  value: new Date(),
 };
diff --git a/app/javascript/dashboard/components/ui/stories/DateTimePicker.stories.js b/app/javascript/dashboard/components/ui/stories/DateTimePicker.stories.js
new file mode 100644
index 000000000..a636fabed
--- /dev/null
+++ b/app/javascript/dashboard/components/ui/stories/DateTimePicker.stories.js
@@ -0,0 +1,38 @@
+import { action } from '@storybook/addon-actions';
+import WootDateTimePicker from '../DateTimePicker.vue';
+
+export default {
+  title: 'Components/Date Picker/Date Time Picker',
+  argTypes: {
+    confirmText: {
+      defaultValue: 'Apply',
+      control: {
+        type: 'text',
+      },
+    },
+    placeholder: {
+      defaultValue: 'Select date time',
+      control: {
+        type: 'text',
+      },
+    },
+    value: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { WootDateTimePicker },
+  template:
+    '<woot-date-time-picker v-bind="$props" @change="onChange"></woot-date-time-picker>',
+});
+
+export const DateTimePicker = Template.bind({});
+DateTimePicker.args = {
+  onChange: action('applied'),
+  value: new Date(),
+};
diff --git a/app/javascript/dashboard/i18n/locale/en/campaign.json b/app/javascript/dashboard/i18n/locale/en/campaign.json
index f1c249669..95ed4d199 100644
--- a/app/javascript/dashboard/i18n/locale/en/campaign.json
+++ b/app/javascript/dashboard/i18n/locale/en/campaign.json
@@ -14,6 +14,17 @@
           "PLACEHOLDER": "Please enter the title of campaign",
           "ERROR": "Title is required"
         },
+        "SCHEDULED_AT": {
+          "LABEL": "Scheduled time",
+          "PLACEHOLDER": "Please select the time",
+          "CONFIRM": "Confirm",
+          "ERROR": "Scheduled time is required"
+        },
+        "AUDIENCE": {
+          "LABEL": "Audience",
+          "PLACEHOLDER": "Select the customer labels",
+          "ERROR": "Audience is required"
+        },
         "MESSAGE": {
           "LABEL": "Message",
           "PLACEHOLDER": "Please enter the message of campaign",
@@ -72,6 +83,7 @@
         "STATUS": "Status",
         "SENDER": "Sender",
         "URL": "URL",
+        "SCHEDULED_AT": "Scheduled time",
         "TIME_ON_PAGE": "Time(Seconds)",
         "CREATED_AT": "Created at"
       },
@@ -82,7 +94,9 @@
       },
       "STATUS": {
         "ENABLED": "Enabled",
-        "DISABLED": "Disabled"
+        "DISABLED": "Disabled",
+        "COMPLETED": "Completed",
+        "ACTIVE": "Active"
       },
       "SENDER": {
         "BOT": "Bot"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index 2515a81a8..66e3ccdd4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -387,7 +387,21 @@ export default {
         ];
       }
 
-      if (this.isATwilioChannel) {
+      if (this.isATwilioSMSChannel) {
+        return [
+          ...visibleToAllChannelTabs,
+          {
+            key: 'campaign',
+            name: this.$t('INBOX_MGMT.TABS.CAMPAIGN'),
+          },
+          {
+            key: 'configuration',
+            name: this.$t('INBOX_MGMT.TABS.CONFIGURATION'),
+          },
+        ];
+      }
+
+      if (this.isATwilioWhatsappChannel) {
         return [
           ...visibleToAllChannelTabs,
           {
@@ -459,6 +473,7 @@ export default {
       this.selectedAgents = [];
       this.$store.dispatch('agents/get');
       this.$store.dispatch('teams/get');
+      this.$store.dispatch('labels/get');
       this.$store.dispatch('inboxes/get').then(() => {
         this.fetchAttachedAgents();
         this.avatarUrl = this.inbox.avatar_url;
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 ea067fa3e..5bd4c84e4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/AddCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/AddCampaign.vue
@@ -30,7 +30,46 @@
           </span>
         </label>
 
-        <label :class="{ error: $v.selectedSender.$error }">
+        <label v-if="isOnOffType">
+          {{ $t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.LABEL') }}
+          <woot-date-time-picker
+            :value="scheduledAt"
+            :confirm-text="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.CONFIRM')"
+            :placeholder="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.PLACEHOLDER')"
+            @change="onChange"
+          />
+        </label>
+
+        <label
+          v-if="isOnOffType"
+          :class="{ error: $v.selectedAudience.$error }"
+        >
+          {{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.LABEL') }}
+          <multiselect
+            v-model="selectedAudience"
+            :options="audienceList"
+            track-by="id"
+            label="title"
+            :multiple="true"
+            :close-on-select="false"
+            :clear-on-select="false"
+            :hide-selected="true"
+            :placeholder="$t('CAMPAIGN.ADD.FORM.AUDIENCE.PLACEHOLDER')"
+            selected-label
+            :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+            :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+            @blur="$v.selectedAudience.$touch"
+            @select="$v.selectedAudience.$touch"
+          />
+          <span v-if="$v.selectedAudience.$error" class="message">
+            {{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.ERROR') }}
+          </span>
+        </label>
+
+        <label
+          v-if="isOngoingType"
+          :class="{ error: $v.selectedSender.$error }"
+        >
           {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
           <select v-model="selectedSender">
             <option
@@ -47,6 +86,7 @@
         </label>
 
         <woot-input
+          v-if="isOngoingType"
           v-model="endPoint"
           :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
           type="text"
@@ -58,6 +98,7 @@
           @blur="$v.endPoint.$touch"
         />
         <woot-input
+          v-if="isOngoingType"
           v-model="timeOnPage"
           :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
           type="text"
@@ -70,7 +111,7 @@
           :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
           @blur="$v.timeOnPage.$touch"
         />
-        <label>
+        <label v-if="isOngoingType">
           <input
             v-model="enabled"
             type="checkbox"
@@ -100,14 +141,23 @@
 import { mapGetters } from 'vuex';
 import { required, url, minLength } from 'vuelidate/lib/validators';
 import alertMixin from 'shared/mixins/alertMixin';
+import campaignMixin from 'shared/mixins/campaignMixin';
+import WootDateTimePicker from 'dashboard/components/ui/DateTimePicker.vue';
+
 export default {
-  mixins: [alertMixin],
+  components: { WootDateTimePicker },
+  mixins: [alertMixin, campaignMixin],
   props: {
     senderList: {
       type: Array,
       default: () => [],
     },
+    audienceList: {
+      type: Array,
+      default: () => [],
+    },
   },
+
   data() {
     return {
       title: '',
@@ -117,8 +167,11 @@ export default {
       timeOnPage: 10,
       show: true,
       enabled: true,
+      scheduledAt: null,
+      selectedAudience: [],
     };
   },
+
   validations: {
     title: {
       required,
@@ -137,18 +190,37 @@ export default {
     timeOnPage: {
       required,
     },
+    selectedAudience: {
+      isEmpty() {
+        return !!this.selectedAudience.length;
+      },
+    },
   },
   computed: {
     ...mapGetters({
       uiFlags: 'campaigns/getUIFlags',
     }),
+    currentInboxId() {
+      return this.$route.params.inboxId;
+    },
+    inbox() {
+      return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
+    },
     buttonDisabled() {
+      if (this.isOngoingType) {
+        return (
+          this.$v.message.$invalid ||
+          this.$v.title.$invalid ||
+          this.$v.selectedSender.$invalid ||
+          this.$v.endPoint.$invalid ||
+          this.$v.timeOnPage.$invalid ||
+          this.uiFlags.isCreating
+        );
+      }
       return (
         this.$v.message.$invalid ||
         this.$v.title.$invalid ||
-        this.$v.selectedSender.$invalid ||
-        this.$v.endPoint.$invalid ||
-        this.$v.timeOnPage.$invalid ||
+        this.$v.selectedAudience.$invalid ||
         this.uiFlags.isCreating
       );
     },
@@ -166,9 +238,13 @@ export default {
     onClose() {
       this.$emit('on-close');
     },
-    async addCampaign() {
-      try {
-        await this.$store.dispatch('campaigns/create', {
+    onChange(value) {
+      this.scheduledAt = value;
+    },
+    getCampaignDetails() {
+      let campaignDetails = null;
+      if (this.isOngoingType) {
+        campaignDetails = {
           title: this.title,
           message: this.message,
           inbox_id: this.$route.params.inboxId,
@@ -178,11 +254,34 @@ export default {
             url: this.endPoint,
             time_on_page: this.timeOnPage,
           },
+        };
+      } else {
+        const audience = this.selectedAudience.map(item => {
+          return {
+            id: item.id,
+            type: 'Label',
+          };
         });
+        campaignDetails = {
+          title: this.title,
+          message: this.message,
+          inbox_id: this.$route.params.inboxId,
+          scheduled_at: this.scheduledAt,
+          audience,
+        };
+      }
+      return campaignDetails;
+    },
+    async addCampaign() {
+      try {
+        const campaignDetails = this.getCampaignDetails();
+        await this.$store.dispatch('campaigns/create', campaignDetails);
         this.showAlert(this.$t('CAMPAIGN.ADD.API.SUCCESS_MESSAGE'));
         this.onClose();
       } catch (error) {
-        this.showAlert(this.$t('CAMPAIGN.ADD.API.ERROR_MESSAGE'));
+        const errorMessage =
+          error?.response?.message || this.$t('CAMPAIGN.ADD.API.ERROR_MESSAGE');
+        this.showAlert(errorMessage);
       }
     },
   },
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 322d15231..d3440f6c5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/Campaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/Campaign.vue
@@ -9,12 +9,18 @@
       :campaigns="records"
       :show-empty-result="showEmptyResult"
       :is-loading="uiFlags.isFetching"
+      :campaign-type="type"
       @on-edit-click="openEditPopup"
       @on-delete-click="openDeletePopup"
     />
 
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-campaign :sender-list="selectedAgents" @on-close="hideAddPopup" />
+      <add-campaign
+        :sender-list="selectedAgents"
+        :audience-list="labelList"
+        :campaign-type="type"
+        @on-close="hideAddPopup"
+      />
     </woot-modal>
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
       <edit-campaign
@@ -52,6 +58,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    type: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -66,6 +76,7 @@ export default {
     ...mapGetters({
       records: 'campaigns/getCampaigns',
       uiFlags: 'campaigns/getUIFlags',
+      labelList: 'labels/getLabels',
     }),
     showEmptyResult() {
       const hasEmptyResults =
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 cfef49dae..7415ba83f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/CampaignsTable.vue
@@ -23,6 +23,8 @@ import Label from 'dashboard/components/ui/Label';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import WootButton from 'dashboard/components/ui/WootButton.vue';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName';
+import campaignMixin from 'shared/mixins/campaignMixin';
+import timeMixin from 'dashboard/mixins/time';
 
 export default {
   components: {
@@ -30,7 +32,7 @@ export default {
     Spinner,
     VeTable,
   },
-  mixins: [clickaway],
+  mixins: [clickaway, timeMixin, campaignMixin],
   props: {
     campaigns: {
       type: Array,
@@ -46,9 +48,30 @@ export default {
     },
   },
 
-  data() {
-    return {
-      columns: [
+  computed: {
+    currentInboxId() {
+      return this.$route.params.inboxId;
+    },
+    inbox() {
+      return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
+    },
+    tableData() {
+      if (this.isLoading) {
+        return [];
+      }
+      return this.campaigns.map(item => {
+        return {
+          ...item,
+          url: item.trigger_rules.url,
+          timeOnPage: item.trigger_rules.time_on_page,
+          scheduledAt: item.scheduled_at
+            ? this.messageStamp(new Date(item.scheduled_at), 'LLL d, h:mm a')
+            : '---',
+        };
+      });
+    },
+    columns() {
+      const visibleToAllTable = [
         {
           field: 'title',
           key: 'title',
@@ -76,54 +99,110 @@ export default {
             );
           },
         },
+      ];
+      if (this.isOngoingType) {
+        return [
+          ...visibleToAllTable,
+          {
+            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 <UserAvatarWithName user={row.sender} />;
+              return this.$t('CAMPAIGN.LIST.SENDER.BOT');
+            },
+          },
+          {
+            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: row => (
+              <div class="button-wrapper">
+                <WootButton
+                  variant="clear"
+                  icon="ion-edit"
+                  color-scheme="secondary"
+                  classNames="grey-btn"
+                  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>
+            ),
+          },
+        ];
+      }
+      return [
+        ...visibleToAllTable,
         {
-          field: 'enabled',
-          key: 'enabled',
+          field: 'campaign_status',
+          key: 'campaign_status',
           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';
+            const labelText =
+              row.campaign_status === 'completed'
+                ? this.$t('CAMPAIGN.LIST.STATUS.COMPLETED')
+                : this.$t('CAMPAIGN.LIST.STATUS.ACTIVE');
+            const colorScheme =
+              row.campaign_status === 'completed' ? 'secondary' : 'success';
             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 <UserAvatarWithName user={row.sender} />;
-            return this.$t('CAMPAIGN.LIST.SENDER.BOT');
-          },
-        },
-        {
-          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'),
+          field: 'scheduledAt',
+          key: 'scheduledAt',
+          title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.SCHEDULED_AT'),
           align: 'left',
         },
-
         {
           field: 'buttons',
           key: 'buttons',
@@ -131,15 +210,6 @@ export default {
           align: 'left',
           renderBodyCell: row => (
             <div class="button-wrapper">
-              <WootButton
-                variant="clear"
-                icon="ion-edit"
-                color-scheme="secondary"
-                classNames="grey-btn"
-                onClick={() => this.$emit('on-edit-click', row)}
-              >
-                {this.$t('CAMPAIGN.LIST.BUTTONS.EDIT')}
-              </WootButton>
               <WootButton
                 variant="link"
                 icon="ion-close-circled"
@@ -151,21 +221,7 @@ export default {
             </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,
-        };
-      });
+      ];
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index 49975d632..947c22ded 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -8,6 +8,7 @@
     >
       {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
     </woot-button>
+
     <report-date-range-selector @date-range-change="onDateRangeChange" />
     <div class="row">
       <woot-report-stats-card
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/DateRangeSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/DateRangeSelector.vue
index 94d27e849..a3e45ade1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/DateRangeSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/DateRangeSelector.vue
@@ -17,6 +17,7 @@
     </div>
     <woot-date-range-picker
       v-if="isDateRangeSelected"
+      show-range
       :value="customDateRange"
       :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
       :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
@@ -89,3 +90,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.date-picker {
+  margin-left: var(--space-smaller);
+}
+</style>
diff --git a/app/javascript/shared/constants/campaign.js b/app/javascript/shared/constants/campaign.js
new file mode 100644
index 000000000..90cd7a202
--- /dev/null
+++ b/app/javascript/shared/constants/campaign.js
@@ -0,0 +1,4 @@
+export const CAMPAIGN_TYPES = {
+  ONGOING: 'ongoing',
+  ONE_OFF: 'one_off',
+};
diff --git a/app/javascript/shared/mixins/campaignMixin.js b/app/javascript/shared/mixins/campaignMixin.js
new file mode 100644
index 000000000..cd5a155dc
--- /dev/null
+++ b/app/javascript/shared/mixins/campaignMixin.js
@@ -0,0 +1,19 @@
+import { CAMPAIGN_TYPES } from '../constants/campaign';
+import inboxMixin from './inboxMixin';
+export default {
+  mixins: [inboxMixin],
+  computed: {
+    campaignType() {
+      if (this.isAWebWidgetInbox) {
+        return CAMPAIGN_TYPES.ONGOING;
+      }
+      return CAMPAIGN_TYPES.ONE_OFF;
+    },
+    isOngoingType() {
+      return this.campaignType === CAMPAIGN_TYPES.ONGOING;
+    },
+    isOnOffType() {
+      return this.campaignType === CAMPAIGN_TYPES.ONE_OFF;
+    },
+  },
+};
diff --git a/app/javascript/shared/mixins/specs/campaignMixin.spec.js b/app/javascript/shared/mixins/specs/campaignMixin.spec.js
new file mode 100644
index 000000000..71bbea7b6
--- /dev/null
+++ b/app/javascript/shared/mixins/specs/campaignMixin.spec.js
@@ -0,0 +1,49 @@
+import { shallowMount } from '@vue/test-utils';
+import campaignMixin from '../campaignMixin';
+import inboxMixin from '../inboxMixin';
+
+describe('campaignMixin', () => {
+  it('returns the correct campaign type', () => {
+    const Component = {
+      render() {},
+      mixins: [campaignMixin, inboxMixin],
+      data() {
+        return {
+          inbox: {
+            channel_type: 'Channel::TwilioSms',
+            phone_number: '+91944444444',
+          },
+        };
+      },
+    };
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.campaignType).toBe('one_off');
+  });
+  it('isOnOffType returns true if campaign type is ongoing', () => {
+    const Component = {
+      render() {},
+      mixins: [campaignMixin, inboxMixin],
+      data() {
+        return { inbox: { channel_type: 'Channel::WebWidget' } };
+      },
+    };
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isOngoingType).toBe(true);
+  });
+  it('isOngoingType returns true if campaign type is one_off', () => {
+    const Component = {
+      render() {},
+      mixins: [campaignMixin, inboxMixin],
+      data() {
+        return {
+          inbox: {
+            channel_type: 'Channel::TwilioSms',
+            phone_number: '+91944444444',
+          },
+        };
+      },
+    };
+    const wrapper = shallowMount(Component);
+    expect(wrapper.vm.isOnOffType).toBe(true);
+  });
+});