feat: Add campaign (#2177)

app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue

@@ -335,10 +335,10 @@ export default {
       if (this.isAWebWidgetInbox) {
         return [
           ...visibleToAllChannelTabs,
-          {
-            key: 'campaign',
-            name: this.$t('INBOX_MGMT.TABS.CAMPAIGN'),
-          },
+          // {
+          //   key: 'campaign',
+          //   name: this.$t('INBOX_MGMT.TABS.CAMPAIGN'),
+          // },
           {
             key: 'preChatForm',
             name: this.$t('INBOX_MGMT.TABS.PRE_CHAT_FORM'),

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

@@ -0,0 +1,205 @@
+<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="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>
+
+        <div class="medium-12 columns">
+          <label :class="{ error: $v.selectedAgent.$error }">
+            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
+            <select v-model="selectedAgent">
+              <option
+                v-for="agent in agentsList"
+                :key="agent.name"
+                :value="agent.name"
+              >
+                {{ agent.name }}
+              </option>
+            </select>
+            <span v-if="$v.selectedAgent.$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">
+          <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>
+</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: () => {},
+    },
+  },
+  data() {
+    return {
+      title: '',
+      message: '',
+      selectedAgent: '',
+      endPoint: '',
+      timeOnPage: 10,
+      show: true,
+      enabled: true,
+    };
+  },
+  validations: {
+    title: {
+      required,
+    },
+    message: {
+      required,
+    },
+    selectedAgent: {
+      required,
+    },
+    endPoint: {
+      required,
+      minLength: minLength(7),
+      url,
+    },
+    timeOnPage: {
+      required,
+    },
+  },
+
+  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.endPoint.$invalid ||
+        this.$v.timeOnPage.$invalid ||
+        this.uiFlags.isCreating
+      );
+    },
+  },
+  methods: {
+    async addCampaign() {
+      try {
+        await this.$store.dispatch('campaigns/create', {
+          title: this.title,
+          message: this.message,
+          inbox_id: this.$route.params.inboxId,
+          sender_id: this.selectedAgent,
+          enabled: this.enabled,
+          trigger_rules: {
+            url: this.endPoint,
+            time_on_page: this.timeOnPage,
+          },
+        });
+        this.showAlert(this.$t('CAMPAIGN.ADD.API.SUCCESS_MESSAGE'));
+        this.onClose();
+      } catch (error) {
+        this.showAlert(this.$t('CAMPAIGN.ADD.API.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.content-box .page-top-bar::v-deep {
+  padding: var(--space-large) var(--space-large) var(--space-zero);
+}
+</style>

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

@@ -1,17 +1,17 @@
 <template>
   <div class="column content-box">
-    <div class="row">
-      <a class="button icon success nice button--fixed-right-top">
+    <div v-if="campaigns.length" class="row button-wrapper">
+      <woot-button @click="openAddPopup">
         <i class="icon ion-android-add-circle"></i>
         {{ $t('CAMPAIGN.HEADER_BTN_TXT') }}
-      </a>
+      </woot-button>
     </div>
 
-    <div class="row">
+    <div v-if="!campaigns.length" class="row">
       <div class="small-8 columns">
         <p class="no-items-error-message">
           {{ $t('CAMPAIGN.LIST.404') }}
-          <a>
+          <a @click="openAddPopup">
             {{ $t('CAMPAIGN.HEADER_BTN_TXT') }}
           </a>
         </p>
@@ -22,16 +22,41 @@
           <p>
             <b> {{ $t('CAMPAIGN.HEADER') }}</b>
           </p>
-          <p>
-            Proactive messages allows customer send outbound messages to their
-            contacts which would trigger more conversations. Campaigns are tied
-            to inbox. Click on
-            <b>Add Campaign</b>
-            to create a new campaign. You can also edit or delete an existing
-            campaigns Response by clicking on the Edit or Delete button.
-          </p>
+          <p v-html="$t('CAMPAIGN.SIDEBAR_TXT')" />
         </span>
       </div>
     </div>
+    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+      <add-campaign :on-close="hideAddPopup" />
+    </woot-modal>
   </div>
 </template>
+<script>
+import AddCampaign from './AddCampaign';
+export default {
+  components: {
+    AddCampaign,
+  },
+  data() {
+    return {
+      campaigns: [],
+      showAddPopup: false,
+    };
+  },
+  methods: {
+    openAddPopup() {
+      this.showAddPopup = true;
+    },
+    hideAddPopup() {
+      this.showAddPopup = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.button-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>