From aa47bad4c14f58358202baf7749f78e64a6528ed Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Wed, 28 Apr 2021 18:57:47 +0530
Subject: [PATCH] chore: Add campaign empty page (#2173)

* Enhancement: Create route for contact details page

* add campaign page, add button, campaign description

* add locale texts

* update locale texts

* update grid

Co-authored-by: Nithin David <webofnithin@gmail.com>
---
 .../dashboard/i18n/locale/en/campaign.json    |  9 +++++
 .../dashboard/i18n/locale/en/inboxMgmt.json   |  1 +
 .../dashboard/i18n/locale/en/index.js         |  3 ++
 .../dashboard/settings/inbox/Settings.vue     | 13 ++++++-
 .../settings/inbox/components/Campaign.vue    | 37 +++++++++++++++++++
 5 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/dashboard/i18n/locale/en/campaign.json
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/inbox/components/Campaign.vue

diff --git a/app/javascript/dashboard/i18n/locale/en/campaign.json b/app/javascript/dashboard/i18n/locale/en/campaign.json
new file mode 100644
index 000000000..675fe0cd8
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/en/campaign.json
@@ -0,0 +1,9 @@
+{
+  "CAMPAIGN": {
+    "HEADER": "Campaigns",
+    "HEADER_BTN_TXT": "Create Campaign",
+    "LIST": {
+      "404": "There are no campaigns attached to this inbox"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index a1184f5db..4d0fcdffc 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -227,6 +227,7 @@
       "SETTINGS": "Settings",
       "COLLABORATORS": "Collaborators",
       "CONFIGURATION": "Configuration",
+      "CAMPAIGN": "Campaigns",
       "PRE_CHAT_FORM": "Pre Chat Form",
       "BUSINESS_HOURS": "Business Hours"
     },
diff --git a/app/javascript/dashboard/i18n/locale/en/index.js b/app/javascript/dashboard/i18n/locale/en/index.js
index 53d1438c2..c298159c6 100644
--- a/app/javascript/dashboard/i18n/locale/en/index.js
+++ b/app/javascript/dashboard/i18n/locale/en/index.js
@@ -15,6 +15,8 @@ import { default as _integrations } from './integrations.json';
 import { default as _generalSettings } from './generalSettings.json';
 import { default as _teamsSettings } from './teamsSettings.json';
 
+import { default as _campaign } from './campaign.json';
+
 export default {
   ..._agentMgmt,
   ..._cannedMgmt,
@@ -32,4 +34,5 @@ export default {
   ..._integrations,
   ..._generalSettings,
   ..._teamsSettings,
+  ..._campaign,
 };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index 93820a9ac..2105101bb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -257,6 +257,9 @@
     <div v-if="selectedTabKey === 'businesshours'">
       <weekly-availability :inbox="inbox" />
     </div>
+    <div v-if="selectedTabKey === 'campaign'">
+      <campaign />
+    </div>
   </div>
 </template>
 
@@ -270,6 +273,7 @@ import inboxMixin from 'shared/mixins/inboxMixin';
 import FacebookReauthorize from './facebook/Reauthorize';
 import PreChatFormSettings from './PreChatForm/Settings';
 import WeeklyAvailability from './components/WeeklyAvailability';
+import Campaign from './components/Campaign';
 
 export default {
   components: {
@@ -277,6 +281,7 @@ export default {
     FacebookReauthorize,
     PreChatFormSettings,
     WeeklyAvailability,
+    Campaign,
   },
   mixins: [alertMixin, configMixin, inboxMixin],
   data() {
@@ -330,6 +335,10 @@ export default {
       if (this.isAWebWidgetInbox) {
         return [
           ...visibleToAllChannelTabs,
+          {
+            key: 'campaign',
+            name: this.$t('INBOX_MGMT.TABS.CAMPAIGN'),
+          },
           {
             key: 'preChatForm',
             name: this.$t('INBOX_MGMT.TABS.PRE_CHAT_FORM'),
@@ -392,7 +401,7 @@ export default {
     },
     toggleInput(selected, current) {
       if (selected.includes(current)) {
-        const newSelectedFlags = selected.filter(flag => flag !== current);
+        const newSelectedFlags = selected.filter((flag) => flag !== current);
         return newSelectedFlags;
       }
       return [...selected, current];
@@ -433,7 +442,7 @@ export default {
       }
     },
     async updateAgents() {
-      const agentList = this.selectedAgents.map(el => el.id);
+      const agentList = this.selectedAgents.map((el) => el.id);
       this.isAgentListUpdating = true;
       try {
         await this.$store.dispatch('inboxMembers/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
new file mode 100644
index 000000000..77844d8dc
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/Campaign.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="column content-box">
+    <div class="row">
+      <a class="button icon success nice button--fixed-right-top">
+        <i class="icon ion-android-add-circle"></i>
+        {{ $t('CAMPAIGN.HEADER_BTN_TXT') }}
+      </a>
+    </div>
+
+    <div class="row">
+      <div class="small-8 columns">
+        <p class="no-items-error-message">
+          {{ $t('CAMPAIGN.LIST.404') }}
+          <a>
+            {{ $t('CAMPAIGN.HEADER_BTN_TXT') }}
+          </a>
+        </p>
+      </div>
+
+      <div class="small-4 columns">
+        <span>
+          <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>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>