From 1ef8d03e186c4df2e9ffb717634abfbc790fd110 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Mon, 22 Jun 2020 13:19:26 +0530
Subject: [PATCH] Feature: Slack - receive messages, create threads, send
 replies (#974)

Co-authored-by: Pranav Raj S <pranav@thoughtwoot.com>
---
 .circleci/config.yml                          |  28 +++--
 .env.example                                  |  10 +-
 .../accounts/integrations/apps_controller.rb  |   2 +-
 .../accounts/integrations/slack_controller.rb |  20 +--
 app/javascript/dashboard/api/ApiClient.js     |   7 +-
 app/javascript/dashboard/api/integrations.js  |  21 ++++
 .../scss/views/settings/integrations.scss     |   7 +-
 .../dashboard/components/layout/Sidebar.vue   |   1 -
 .../components/widgets/BackButton.vue         |  18 ++-
 .../dashboard/i18n/default-sidebar.js         |   1 +
 .../i18n/locale/en/generalSettings.json       |   1 +
 .../i18n/locale/en/integrations.json          |  11 +-
 .../dashboard/settings/SettingsHeader.vue     |   6 +-
 .../routes/dashboard/settings/Wrapper.vue     |   5 +
 .../dashboard/settings/integrations/Index.vue |  60 +++------
 .../settings/integrations/Integration.vue     | 114 ++++++++++++++++++
 .../settings/integrations/ShowIntegration.vue |  70 +++++++++++
 .../settings/integrations/Webhook.vue         |   7 +-
 .../integrations/integrations.routes.js       |  18 +++
 app/javascript/dashboard/store/index.js       |   2 +
 .../dashboard/store/modules/auth.js           |  16 ---
 .../dashboard/store/modules/integrations.js   |  83 +++++++++++++
 .../specs/integrations/actions.spec.js        |  72 +++++++++++
 .../modules/specs/integrations/fixtures.js    |  16 +++
 .../specs/integrations/getters.spec.js        |  51 ++++++++
 .../specs/integrations/mutations.spec.js      |  26 ++++
 .../dashboard/store/mutation-types.js         |   6 +
 .../shared/helpers/vuex/mutationHelpers.js    |   9 ++
 app/models/integrations/app.rb                |  33 ++++-
 app/models/integrations/hook.rb               |   2 +-
 .../integrations/apps/index.json.jbuilder     |  15 ++-
 .../integrations/apps/show.json.jbuilder      |   2 +-
 .../integrations/slack/create.json.jbuilder   |   2 +
 config/environments/test.rb                   |   1 +
 config/integration/apps.yml                   |  15 ++-
 config/routes.rb                              |   2 +-
 db/seeds.rb                                   |   1 +
 .../project-setup/slack-integration-setup.md  |  39 ++++++
 lib/integrations/slack/channel_builder.rb     |   9 +-
 lib/integrations/slack/hook_builder.rb        |  11 +-
 .../slack/incoming_message_builder.rb         |  29 ++++-
 .../slack/outgoing_message_builder.rb         |  28 ++++-
 public/admin/avatar_square.png                | Bin 0 -> 4514 bytes
 .../assets/dashboard}/integrations/cable.svg  |   0
 .../assets/dashboard/integrations/slack.png   | Bin 0 -> 1320 bytes
 .../integrations/apps_controller_spec.rb      |  12 +-
 spec/factories/integrations/hooks.rb          |   2 +-
 .../integrations/slack/hook_builder_spec.rb   |   2 +-
 .../slack/incoming_message_builder_spec.rb    |   4 +-
 .../slack/outgoing_message_builder_spec.rb    |  11 +-
 .../integrations/slack_request_spec.rb        |  27 +++--
 .../v1/integrations/webhooks_request_spec.rb  |   2 +-
 spec/support/slack_stubs.rb                   |  66 +++++-----
 53 files changed, 815 insertions(+), 188 deletions(-)
 create mode 100644 app/javascript/dashboard/api/integrations.js
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
 create mode 100644 app/javascript/dashboard/store/modules/integrations.js
 create mode 100644 app/javascript/dashboard/store/modules/specs/integrations/actions.spec.js
 create mode 100644 app/javascript/dashboard/store/modules/specs/integrations/fixtures.js
 create mode 100644 app/javascript/dashboard/store/modules/specs/integrations/getters.spec.js
 create mode 100644 app/javascript/dashboard/store/modules/specs/integrations/mutations.spec.js
 create mode 100644 app/views/api/v1/accounts/integrations/slack/create.json.jbuilder
 create mode 100644 docs/development/project-setup/slack-integration-setup.md
 create mode 100644 public/admin/avatar_square.png
 rename {app/javascript/dashboard/assets/images => public/assets/dashboard}/integrations/cable.svg (100%)
 create mode 100644 public/assets/dashboard/integrations/slack.png

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 9579c23a8..07f4a7991 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -16,7 +16,7 @@ defaults: &defaults
     - image: circleci/redis:alpine
   environment:
       - CC_TEST_REPORTER_ID: b1b5c4447bf93f6f0b06a64756e35afd0810ea83649f03971cbf303b4449456f
-
+      - RAILS_LOG_TO_STDOUT: false
 jobs:
   build:
     <<: *defaults
@@ -69,11 +69,11 @@ jobs:
       - run:
           name:  Download cc-test-reporter
           command: |
-            mkdir -p tmp/
-            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./tmp/cc-test-reporter
-            chmod +x ./tmp/cc-test-reporter
+            mkdir -p ~/tmp
+            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ~/tmp/cc-test-reporter
+            chmod +x ~/tmp/cc-test-reporter
       - persist_to_workspace:
-          root: tmp
+          root: ~/tmp
           paths:
             - cc-test-reporter
 
@@ -99,9 +99,9 @@ jobs:
           name: Run backend tests
           command: |
             bundle exec rspec $(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)
-            ./tmp/cc-test-reporter format-coverage -t simplecov -o tmp/codeclimate.backend.json coverage/backend/.resultset.json
+            ~/tmp/cc-test-reporter format-coverage -t simplecov -o ~/tmp/codeclimate.backend.json coverage/backend/.resultset.json
       - persist_to_workspace:
-          root: tmp
+          root: ~/tmp
           paths:
             - codeclimate.backend.json
 
@@ -109,21 +109,23 @@ jobs:
           name: Run frontend tests
           command: |
             yarn test:coverage
-            ./tmp/cc-test-reporter format-coverage -t lcov -o tmp/codeclimate.frontend.json buildreports/lcov.info
+            ~/tmp/cc-test-reporter format-coverage -t lcov -o ~/tmp/codeclimate.frontend.json buildreports/lcov.info
       - persist_to_workspace:
-          root: tmp
+          root: ~/tmp
           paths:
             - codeclimate.frontend.json
 
       # collect reports
       - store_test_results:
-          path: /tmp/test-results
+          path: ~/tmp/test-results
       - store_artifacts:
-          path: /tmp/test-results
+          path: ~/tmp/test-results
           destination: test-results
+      - store_artifacts:
+          path: log
 
       - run:
           name: Upload coverage results to Code Climate
           command: |
-            ./tmp/cc-test-reporter sum-coverage tmp/codeclimate.*.json -p 2 -o tmp/codeclimate.total.json
-            ./tmp/cc-test-reporter upload-coverage -i tmp/codeclimate.total.json
+            ~/tmp/cc-test-reporter sum-coverage ~/tmp/codeclimate.*.json -p 2 -o ~/tmp/codeclimate.total.json
+            ~/tmp/cc-test-reporter upload-coverage -i ~/tmp/codeclimate.total.json
diff --git a/.env.example b/.env.example
index 06a39d17f..5adb4a848 100644
--- a/.env.example
+++ b/.env.example
@@ -59,6 +59,7 @@ MANDRILL_INGRESS_API_KEY=
 ACTIVE_STORAGE_SERVICE=local
 
 # Amazon S3
+# documentation: https://www.chatwoot.com/docs/configuring-s3-bucket-as-cloud-storage
 S3_BUCKET_NAME=
 AWS_ACCESS_KEY_ID=
 AWS_SECRET_ACCESS_KEY=
@@ -74,20 +75,23 @@ LOG_LEVEL=info
 LOG_SIZE=500
 
 ### This environment variables are only required if you are setting up social media channels
-#facebook
+
+# Facebook
+# documentation: https://www.chatwoot.com/docs/facebook-setup
 FB_VERIFY_TOKEN=
 FB_APP_SECRET=
 FB_APP_ID=
 
 # Twitter
+# documentation: https://www.chatwoot.com/docs/twitter-app-setup
 TWITTER_APP_ID=
 TWITTER_CONSUMER_KEY=
 TWITTER_CONSUMER_SECRET=
 TWITTER_ENVIRONMENT=
 
-#slack
+#slack integration
 SLACK_CLIENT_ID=
-SLACK_CLIENT_SECRET
+SLACK_CLIENT_SECRET=
 
 ### Change this env variable only if you are using a custom build mobile app
 ## Mobile app env variables
diff --git a/app/controllers/api/v1/accounts/integrations/apps_controller.rb b/app/controllers/api/v1/accounts/integrations/apps_controller.rb
index 35b6f7c4d..f88cc7c5f 100644
--- a/app/controllers/api/v1/accounts/integrations/apps_controller.rb
+++ b/app/controllers/api/v1/accounts/integrations/apps_controller.rb
@@ -9,7 +9,7 @@ class Api::V1::Accounts::Integrations::AppsController < Api::V1::Accounts::BaseC
   private
 
   def fetch_apps
-    @apps = Integrations::App.all
+    @apps = Integrations::App.all.select(&:active?)
   end
 
   def fetch_app
diff --git a/app/controllers/api/v1/accounts/integrations/slack_controller.rb b/app/controllers/api/v1/accounts/integrations/slack_controller.rb
index 023deaa97..77cf05ade 100644
--- a/app/controllers/api/v1/accounts/integrations/slack_controller.rb
+++ b/app/controllers/api/v1/accounts/integrations/slack_controller.rb
@@ -7,18 +7,12 @@ class Api::V1::Accounts::Integrations::SlackController < Api::V1::Accounts::Base
       code: params[:code],
       inbox_id: params[:inbox_id]
     )
-
     @hook = builder.perform
-
-    render json: @hook
+    create_chatwoot_slack_channel
   end
 
   def update
-    builder = Integrations::Slack::ChannelBuilder.new(
-      hook: @hook, channel: params[:channel]
-    )
-    builder.perform
-
+    create_chatwoot_slack_channel
     render json: @hook
   end
 
@@ -31,6 +25,14 @@ class Api::V1::Accounts::Integrations::SlackController < Api::V1::Accounts::Base
   private
 
   def fetch_hook
-    @hook = Integrations::Hook.find(params[:id])
+    @hook = Integrations::Hook.find_by(app_id: 'slack')
+  end
+
+  def create_chatwoot_slack_channel
+    channel = params[:channel] || 'customer-conversations'
+    builder = Integrations::Slack::ChannelBuilder.new(
+      hook: @hook, channel: channel
+    )
+    builder.perform
   end
 end
diff --git a/app/javascript/dashboard/api/ApiClient.js b/app/javascript/dashboard/api/ApiClient.js
index 9199109a1..097caa906 100644
--- a/app/javascript/dashboard/api/ApiClient.js
+++ b/app/javascript/dashboard/api/ApiClient.js
@@ -10,6 +10,10 @@ class ApiClient {
   }
 
   get url() {
+    return `${this.baseUrl()}/${this.resource}`;
+  }
+
+  baseUrl() {
     let url = this.apiVersion;
     if (this.options.accountScoped) {
       const isInsideAccountScopedURLs = window.location.pathname.includes(
@@ -21,7 +25,8 @@ class ApiClient {
         url = `${url}/accounts/${accountId}`;
       }
     }
-    return `${url}/${this.resource}`;
+
+    return url;
   }
 
   get() {
diff --git a/app/javascript/dashboard/api/integrations.js b/app/javascript/dashboard/api/integrations.js
new file mode 100644
index 000000000..587c94d43
--- /dev/null
+++ b/app/javascript/dashboard/api/integrations.js
@@ -0,0 +1,21 @@
+/* global axios */
+
+import ApiClient from './ApiClient';
+
+class IntegrationsAPI extends ApiClient {
+  constructor() {
+    super('integrations/apps', { accountScoped: true });
+  }
+
+  connectSlack(code) {
+    return axios.post(`${this.baseUrl()}/integrations/slack`, {
+      code: code,
+    });
+  }
+
+  delete(integrationId) {
+    return axios.delete(`${this.baseUrl()}/integrations/${integrationId}`);
+  }
+}
+
+export default new IntegrationsAPI();
diff --git a/app/javascript/dashboard/assets/scss/views/settings/integrations.scss b/app/javascript/dashboard/assets/scss/views/settings/integrations.scss
index e791f4cd7..b43bbb4bc 100644
--- a/app/javascript/dashboard/assets/scss/views/settings/integrations.scss
+++ b/app/javascript/dashboard/assets/scss/views/settings/integrations.scss
@@ -3,16 +3,17 @@
     background: $color-white;
     border: 1px solid $color-border;
     border-radius: $space-smaller;
+    margin-bottom: $space-normal;
     padding: $space-normal;
 
     .integration--image {
       display: flex;
       margin-right: $space-normal;
-      width: 8rem;
+      width: 10rem;
 
       img {
-        max-width: 8rem;
-        padding: $space-small;
+        max-width: 100%;
+        padding: $space-medium;
       }
     }
 
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index b2ccf1697..88578e635 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -121,7 +121,6 @@ export default {
   computed: {
     ...mapGetters({
       currentUser: 'getCurrentUser',
-      daysLeft: 'getTrialLeft',
       globalConfig: 'globalConfig/get',
       inboxes: 'inboxes/getInboxes',
       accountId: 'getCurrentAccountId',
diff --git a/app/javascript/dashboard/components/widgets/BackButton.vue b/app/javascript/dashboard/components/widgets/BackButton.vue
index 9b5085983..9bf87d131 100644
--- a/app/javascript/dashboard/components/widgets/BackButton.vue
+++ b/app/javascript/dashboard/components/widgets/BackButton.vue
@@ -1,14 +1,26 @@
 <template>
-  <span class="back-button ion-ios-arrow-left" @click.capture="goBack">Back</span>
+  <span class="back-button ion-ios-arrow-left" @click.capture="goBack">
+    {{ $t('GENERAL_SETTINGS.BACK') }}
+  </span>
 </template>
 <script>
 import router from '../../routes/index';
 
 export default {
+  props: {
+    backUrl: {
+      type: [String, Object],
+      default: '',
+    },
+  },
   methods: {
     goBack() {
-      router.go(-1);
+      if (this.backUrl !== '') {
+        router.push(this.backUrl);
+      } else {
+        router.go(-1);
+      }
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/app/javascript/dashboard/i18n/default-sidebar.js b/app/javascript/dashboard/i18n/default-sidebar.js
index 5ada97da4..4b479f5f6 100644
--- a/app/javascript/dashboard/i18n/default-sidebar.js
+++ b/app/javascript/dashboard/i18n/default-sidebar.js
@@ -52,6 +52,7 @@ export const getSidebarItems = accountId => ({
       'settings_inbox_finish',
       'settings_integrations',
       'settings_integrations_webhook',
+      'settings_integrations_integration',
       'general_settings',
       'general_settings_index',
     ],
diff --git a/app/javascript/dashboard/i18n/locale/en/generalSettings.json b/app/javascript/dashboard/i18n/locale/en/generalSettings.json
index 702680b92..31b5f9fe2 100644
--- a/app/javascript/dashboard/i18n/locale/en/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/en/generalSettings.json
@@ -2,6 +2,7 @@
   "GENERAL_SETTINGS": {
     "TITLE": "Account settings",
     "SUBMIT": "Update settings",
+    "BACK": "Back",
     "UPDATE": {
       "ERROR": "Could not update settings, try again!",
       "SUCCESS": "Successfully updated account settings"
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index 7259c038e..21df315bc 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -49,6 +49,15 @@
           "NO": "No, Keep it"
         }
       }
-    }
+    },
+    "DELETE": {
+      "BUTTON_TEXT": "Delete",
+      "API": {
+        "SUCCESS_MESSAGE": "Integration deleted successfully"
+      }
+    },
+    "CONNECT": {
+      "BUTTON_TEXT": "Connect"
+    }  
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index 442d14360..37374f03b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -2,7 +2,7 @@
   <div class="settings-header">
     <h1 class="page-title">
       <woot-sidemenu-icon></woot-sidemenu-icon>
-      <back-button v-if="showBackButton"></back-button>
+      <back-button v-if="showBackButton" :back-url="backUrl"></back-button>
       <i :class="iconClass"></i>
       <span>{{ headerTitle }}</span>
     </h1>
@@ -45,6 +45,10 @@ export default {
     },
     showBackButton: { type: Boolean, default: false },
     showNewButton: { type: Boolean, default: false },
+    backUrl: {
+      type: [String, Object],
+      default: '',
+    },
   },
   computed: {
     ...mapGetters({
diff --git a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
index 04138cea1..c0aa1eae9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -6,6 +6,7 @@
       :header-title="$t(headerTitle)"
       :button-text="$t(headerButtonText)"
       :show-back-button="showBackButton"
+      :back-url="backUrl"
       :show-new-button="showNewButton"
     />
     <keep-alive>
@@ -34,6 +35,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    backUrl: {
+      type: [String, Object],
+      default: '',
+    },
   },
   data() {
     return {};
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
index 5652677cd..6d8ca1895 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
@@ -3,38 +3,19 @@
     <div class="row">
       <div class="small-8 columns integrations-wrap">
         <div class="row integrations">
-          <div class="small-12 columns integration">
-            <div class="row">
-              <div class="integration--image">
-                <img src="~dashboard/assets/images/integrations/cable.svg" />
-              </div>
-              <div class="column">
-                <h3 class="integration--title">
-                  {{ $t('INTEGRATION_SETTINGS.WEBHOOK.TITLE') }}
-                </h3>
-                <p class="integration--description">
-                  {{
-                    useInstallationName(
-                      $t('INTEGRATION_SETTINGS.WEBHOOK.INTEGRATION_TXT'),
-                      globalConfig.installationName
-                    )
-                  }}
-                </p>
-              </div>
-              <div class="small-2 column button-wrap">
-                <router-link
-                  :to="
-                    frontendURL(
-                      `accounts/${accountId}/settings/integrations/webhook`
-                    )
-                  "
-                >
-                  <button class="button success nice">
-                    {{ $t('INTEGRATION_SETTINGS.WEBHOOK.CONFIGURE') }}
-                  </button>
-                </router-link>
-              </div>
-            </div>
+          <div
+            v-for="item in integrationsList"
+            :key="item.id"
+            class="small-12 columns integration"
+          >
+            <integration
+              :integration-id="item.id"
+              :integration-logo="item.logo"
+              :integration-name="item.name"
+              :integration-description="item.description"
+              :integration-enabled="item.enabled"
+              :integration-action="item.action"
+            />
           </div>
         </div>
       </div>
@@ -43,20 +24,19 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import { frontendURL } from '../../../../helper/URLHelper';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import Integration from './Integration';
 
 export default {
-  mixins: [globalConfigMixin],
+  components: {
+    Integration,
+  },
   computed: {
     ...mapGetters({
-      currentUser: 'getCurrentUser',
-      globalConfig: 'globalConfig/get',
-      accountId: 'getCurrentAccountId',
+      integrationsList: 'integrations/getIntegrations',
     }),
   },
-  methods: {
-    frontendURL,
+  mounted() {
+    this.$store.dispatch('integrations/get');
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
new file mode 100644
index 000000000..cdab7ceee
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="row">
+    <div class="integration--image">
+      <img :src="'/assets/dashboard/integrations/' + integrationLogo" />
+    </div>
+    <div class="column">
+      <h3 class="integration--title">
+        {{ integrationName }}
+      </h3>
+      <p class="integration--description">
+        {{ integrationDescription }}
+      </p>
+    </div>
+    <div class="small-2 column button-wrap">
+      <router-link
+        :to="
+          frontendURL(
+            `accounts/${accountId}/settings/integrations/` + integrationId
+          )
+        "
+      >
+        <div v-if="integrationEnabled">
+          <div v-if="integrationAction === 'disconnect'">
+            <div @click="openDeletePopup()">
+              <woot-submit-button
+                :button-text="
+                  $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')
+                "
+                icon-class="ion-close-circled"
+                button-class="nice alert"
+              />
+            </div>
+          </div>
+          <div v-else>
+            <button class="button nice">
+              {{ $t('INTEGRATION_SETTINGS.WEBHOOK.CONFIGURE') }}
+            </button>
+          </div>
+        </div>
+      </router-link>
+      <div v-if="!integrationEnabled">
+        <a :href="integrationAction" class="button success nice">
+          {{ $t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT') }}
+        </a>
+      </div>
+    </div>
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.TITLE')"
+      :message="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.MESSAGE')"
+      :confirm-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.YES')"
+      :reject-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.NO')"
+    />
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import { frontendURL } from '../../../../helper/URLHelper';
+import alertMixin from 'shared/mixins/alertMixin';
+
+export default {
+  mixins: [alertMixin],
+  props: [
+    'integrationId',
+    'integrationLogo',
+    'integrationName',
+    'integrationDescription',
+    'integrationEnabled',
+    'integrationAction',
+  ],
+  data() {
+    return {
+      showDeleteConfirmationPopup: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      currentUser: 'getCurrentUser',
+      accountId: 'getCurrentAccountId',
+    }),
+  },
+  methods: {
+    frontendURL,
+    openDeletePopup() {
+      this.showDeleteConfirmationPopup = true;
+    },
+    closeDeletePopup() {
+      this.showDeleteConfirmationPopup = false;
+    },
+    confirmDeletion() {
+      this.closeDeletePopup();
+      this.deleteIntegration(this.deleteIntegration);
+      this.$router.push({ name: 'settings_integrations' });
+    },
+    async deleteIntegration() {
+      try {
+        await this.$store.dispatch(
+          'integrations/deleteIntegration',
+          this.integrationId
+        );
+        this.showAlert(
+          this.$t('INTEGRATION_SETTINGS.DELETE.API.SUCCESS_MESSAGE')
+        );
+      } catch (error) {
+        this.showAlert(
+          this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE')
+        );
+      }
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
new file mode 100644
index 000000000..3185f17b0
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/ShowIntegration.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="column content-box">
+    <div class="row">
+      <div class="small-8 columns integrations-wrap">
+        <div class="row integrations">
+          <div v-if="integrationLoaded" class="small-12 columns integration">
+            <integration
+              :integration-id="integration.id"
+              :integration-logo="integration.logo"
+              :integration-name="integration.name"
+              :integration-description="integration.description"
+              :integration-enabled="integration.enabled"
+              :integration-action="integrationAction()"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import Integration from './Integration';
+
+export default {
+  components: {
+    Integration,
+  },
+  mixins: [globalConfigMixin],
+  props: ['integrationId', 'code'],
+  data() {
+    return {
+      integrationLoaded: false,
+    };
+  },
+  computed: {
+    integration() {
+      return this.$store.getters['integrations/getIntegration'](
+        this.integrationId
+      );
+    },
+    ...mapGetters({
+      currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
+      accountId: 'getCurrentAccountId',
+    }),
+  },
+  mounted() {
+    this.intializeSlackIntegration();
+  },
+  methods: {
+    integrationAction() {
+      if (this.integration.enabled) {
+        return 'disconnect';
+      }
+      return this.integration.action;
+    },
+    async intializeSlackIntegration() {
+      await this.$store.dispatch('integrations/get', this.integrationId);
+      if (this.code) {
+        await this.$store.dispatch('integrations/connectSlack', this.code);
+        // we are clearing code from the path as subsequent request would throw error
+        this.$router.replace(this.$route.path);
+      }
+      this.integrationLoaded = true;
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
index 980f16b05..6f2ce7f40 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
@@ -82,16 +82,16 @@
   </div>
 </template>
 <script>
-/* global bus */
 import { mapGetters } from 'vuex';
 import NewWebhook from './New';
+import alertMixin from 'shared/mixins/alertMixin';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 
 export default {
   components: {
     NewWebhook,
   },
-  mixins: [globalConfigMixin],
+  mixins: [alertMixin, globalConfigMixin],
   data() {
     return {
       loading: {},
@@ -111,9 +111,6 @@ export default {
     this.$store.dispatch('webhooks/get');
   },
   methods: {
-    showAlert(message) {
-      bus.$emit('newToastMessage', message);
-    },
     openAddPopup() {
       this.showAddPopup = true;
     },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
index 2a1485080..0439033be 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
@@ -1,6 +1,7 @@
 import Index from './Index';
 import SettingsContent from '../Wrapper';
 import Webhook from './Webhook';
+import ShowIntegration from './ShowIntegration';
 import { frontendURL } from '../../../../helper/URLHelper';
 
 export default {
@@ -10,10 +11,15 @@ export default {
       component: SettingsContent,
       props: params => {
         const showBackButton = params.name !== 'settings_integrations';
+        const backUrl =
+          params.name === 'settings_integrations_integration'
+            ? { name: 'settings_integrations' }
+            : '';
         return {
           headerTitle: 'INTEGRATION_SETTINGS.HEADER',
           icon: 'ion-flash',
           showBackButton,
+          backUrl,
         };
       },
       children: [
@@ -29,6 +35,18 @@ export default {
           name: 'settings_integrations_webhook',
           roles: ['administrator'],
         },
+        {
+          path: ':integration_id',
+          name: 'settings_integrations_integration',
+          component: ShowIntegration,
+          roles: ['administrator'],
+          props: route => {
+            return {
+              integrationId: route.params.integration_id,
+              code: route.query.code,
+            };
+          },
+        },
       ],
     },
   ],
diff --git a/app/javascript/dashboard/store/index.js b/app/javascript/dashboard/store/index.js
index be0328178..de33bddb4 100755
--- a/app/javascript/dashboard/store/index.js
+++ b/app/javascript/dashboard/store/index.js
@@ -17,6 +17,7 @@ import conversationTypingStatus from './modules/conversationTypingStatus';
 import globalConfig from 'shared/store/globalConfig';
 import inboxes from './modules/inboxes';
 import inboxMembers from './modules/inboxMembers';
+import integrations from './modules/integrations';
 import reports from './modules/reports';
 import userNotificationSettings from './modules/userNotificationSettings';
 import webhooks from './modules/webhooks';
@@ -40,6 +41,7 @@ export default new Vuex.Store({
     globalConfig,
     inboxes,
     inboxMembers,
+    integrations,
     reports,
     userNotificationSettings,
     webhooks,
diff --git a/app/javascript/dashboard/store/modules/auth.js b/app/javascript/dashboard/store/modules/auth.js
index b4ea0ecba..6486eb956 100644
--- a/app/javascript/dashboard/store/modules/auth.js
+++ b/app/javascript/dashboard/store/modules/auth.js
@@ -1,6 +1,5 @@
 /* eslint no-param-reassign: 0 */
 import axios from 'axios';
-import moment from 'moment';
 import Vue from 'vue';
 import * as types from '../mutation-types';
 import authAPI from '../../api/auth';
@@ -50,21 +49,6 @@ export const getters = {
   getCurrentUser(_state) {
     return _state.currentUser;
   },
-
-  getSubscription(_state) {
-    return _state.currentUser.subscription === undefined
-      ? null
-      : _state.currentUser.subscription;
-  },
-
-  getTrialLeft(_state) {
-    const createdAt =
-      _state.currentUser.subscription === undefined
-        ? moment()
-        : _state.currentUser.subscription.expiry * 1000;
-    const daysLeft = moment(createdAt).diff(moment(), 'days');
-    return daysLeft < 0 ? 0 : daysLeft;
-  },
 };
 
 // actions
diff --git a/app/javascript/dashboard/store/modules/integrations.js b/app/javascript/dashboard/store/modules/integrations.js
new file mode 100644
index 000000000..7c8d62ef8
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/integrations.js
@@ -0,0 +1,83 @@
+/* eslint no-param-reassign: 0 */
+import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
+import * as types from '../mutation-types';
+import IntegrationsAPI from '../../api/integrations';
+
+const state = {
+  records: [],
+  uiFlags: {
+    isFetching: false,
+    isFetchingItem: false,
+    isUpdating: false,
+  },
+};
+
+export const getters = {
+  getIntegrations($state) {
+    return $state.records;
+  },
+  getIntegration: $state => integrationId => {
+    const [integration] = $state.records.filter(
+      record => record.id === integrationId
+    );
+    return integration || {};
+  },
+  getUIFlags($state) {
+    return $state.uiFlags;
+  },
+};
+
+export const actions = {
+  get: async ({ commit }) => {
+    commit(types.default.SET_INTEGRATIONS_UI_FLAG, { isFetching: true });
+    try {
+      const response = await IntegrationsAPI.get();
+      commit(types.default.SET_INTEGRATIONS, response.data.payload);
+      commit(types.default.SET_INTEGRATIONS_UI_FLAG, { isFetching: false });
+    } catch (error) {
+      commit(types.default.SET_INTEGRATIONS_UI_FLAG, { isFetching: false });
+    }
+  },
+
+  connectSlack: async ({ commit }, code) => {
+    commit(types.default.SET_INTEGRATIONS_UI_FLAG, { isUpdating: true });
+    try {
+      const response = await IntegrationsAPI.connectSlack(code);
+      commit(types.default.ADD_INTEGRATION, response.data);
+      commit(types.default.SET_INTEGRATIONS_UI_FLAG, { isUpdating: false });
+    } catch (error) {
+      commit(types.default.SET_INTEGRATIONS_UI_FLAG, { isUpdating: false });
+    }
+  },
+
+  deleteIntegration: async ({ commit }, integrationId) => {
+    commit(types.default.SET_INTEGRATIONS_UI_FLAG, { isDeleting: true });
+    try {
+      await IntegrationsAPI.delete(integrationId);
+      commit(types.default.DELETE_INTEGRATION, {
+        id: integrationId,
+        enabled: false,
+      });
+      commit(types.default.SET_INTEGRATIONS_UI_FLAG, { isDeleting: false });
+    } catch (error) {
+      commit(types.default.SET_INTEGRATIONS_UI_FLAG, { isDeleting: false });
+    }
+  },
+};
+
+export const mutations = {
+  [types.default.SET_INTEGRATIONS_UI_FLAG]($state, uiFlag) {
+    $state.uiFlags = { ...$state.uiFlags, ...uiFlag };
+  },
+  [types.default.SET_INTEGRATIONS]: MutationHelpers.set,
+  [types.default.ADD_INTEGRATION]: MutationHelpers.updateAttributes,
+  [types.default.DELETE_INTEGRATION]: MutationHelpers.updateAttributes,
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};
diff --git a/app/javascript/dashboard/store/modules/specs/integrations/actions.spec.js b/app/javascript/dashboard/store/modules/specs/integrations/actions.spec.js
new file mode 100644
index 000000000..cc0dd9d22
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/integrations/actions.spec.js
@@ -0,0 +1,72 @@
+import axios from 'axios';
+import { actions } from '../../integrations';
+import * as types from '../../../mutation-types';
+import integrationsList from './fixtures';
+
+const commit = jest.fn();
+global.axios = axios;
+jest.mock('axios');
+
+describe('#actions', () => {
+  describe('#get', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({ data: integrationsList });
+      await actions.get({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INTEGRATIONS_UI_FLAG, { isFetching: true }],
+        [types.default.SET_INTEGRATIONS, integrationsList.payload],
+        [types.default.SET_INTEGRATIONS_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_INTEGRATIONS_UI_FLAG, { isFetching: true }],
+        [types.default.SET_INTEGRATIONS_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+
+  describe('#connectSlack:', () => {
+    it('sends correct actions if API is success', async () => {
+      let data = { id: 'slack', enabled: true };
+      axios.post.mockResolvedValue({ data: data });
+      await actions.connectSlack({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INTEGRATIONS_UI_FLAG, { isUpdating: true }],
+        [types.default.ADD_INTEGRATION, data],
+        [types.default.SET_INTEGRATIONS_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.connectSlack({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INTEGRATIONS_UI_FLAG, { isUpdating: true }],
+        [types.default.SET_INTEGRATIONS_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+  });
+
+  describe('#deleteIntegration:', () => {
+    it('sends correct actions if API is success', async () => {
+      let data = { id: 'slack', enabled: false };
+      axios.delete.mockResolvedValue({ data: data });
+      await actions.deleteIntegration({ commit }, data.id);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INTEGRATIONS_UI_FLAG, { isDeleting: true }],
+        [types.default.DELETE_INTEGRATION, data],
+        [types.default.SET_INTEGRATIONS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.deleteIntegration({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INTEGRATIONS_UI_FLAG, { isDeleting: true }],
+        [types.default.SET_INTEGRATIONS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
+});
diff --git a/app/javascript/dashboard/store/modules/specs/integrations/fixtures.js b/app/javascript/dashboard/store/modules/specs/integrations/fixtures.js
new file mode 100644
index 000000000..96bc0d50b
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/integrations/fixtures.js
@@ -0,0 +1,16 @@
+export default {
+  payload: [
+    {
+      id: 1,
+      name: 'test1',
+      logo: 'test',
+      enabled: true,
+    },
+    {
+      id: 2,
+      name: 'test2',
+      logo: 'test',
+      enabled: true,
+    },
+  ],
+};
diff --git a/app/javascript/dashboard/store/modules/specs/integrations/getters.spec.js b/app/javascript/dashboard/store/modules/specs/integrations/getters.spec.js
new file mode 100644
index 000000000..7ec4657a6
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/integrations/getters.spec.js
@@ -0,0 +1,51 @@
+import { getters } from '../../integrations';
+
+describe('#getters', () => {
+  it('getIntegrations', () => {
+    const state = {
+      records: [
+        {
+          id: 1,
+          name: 'test1',
+          logo: 'test',
+          enabled: true,
+        },
+        {
+          id: 2,
+          name: 'test2',
+          logo: 'test',
+          enabled: true,
+        },
+      ],
+    };
+    expect(getters.getIntegrations(state)).toEqual([
+      {
+        id: 1,
+        name: 'test1',
+        logo: 'test',
+        enabled: true,
+      },
+      {
+        id: 2,
+        name: 'test2',
+        logo: 'test',
+        enabled: true,
+      },
+    ]);
+  });
+
+  it('getUIFlags', () => {
+    const state = {
+      uiFlags: {
+        isFetching: true,
+        isFetchingItem: false,
+        isUpdating: false,
+      },
+    };
+    expect(getters.getUIFlags(state)).toEqual({
+      isFetching: true,
+      isFetchingItem: false,
+      isUpdating: false,
+    });
+  });
+});
diff --git a/app/javascript/dashboard/store/modules/specs/integrations/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/integrations/mutations.spec.js
new file mode 100644
index 000000000..c485b5018
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/integrations/mutations.spec.js
@@ -0,0 +1,26 @@
+import * as types from '../../../mutation-types';
+import { mutations } from '../../integrations';
+
+describe('#mutations', () => {
+  describe('#GET_INTEGRATIONS', () => {
+    it('set integrations records', () => {
+      const state = { records: [] };
+      mutations[types.default.SET_INTEGRATIONS](state, [
+        {
+          id: 1,
+          name: 'test1',
+          logo: 'test',
+          enabled: true,
+        },
+      ]);
+      expect(state.records).toEqual([
+        {
+          id: 1,
+          name: 'test1',
+          logo: 'test',
+          enabled: true,
+        },
+      ]);
+    });
+  });
+});
diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js
index 98731d2bc..c65c4f829 100755
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@@ -67,6 +67,12 @@ export default {
   EDIT_CANNED: 'EDIT_CANNED',
   DELETE_CANNED: 'DELETE_CANNED',
 
+  // Integrations
+  SET_INTEGRATIONS_UI_FLAG: 'SET_INTEGRATIONS_UI_FLAG',
+  SET_INTEGRATIONS: 'SET_INTEGRATIONS',
+  ADD_INTEGRATION: 'ADD_INTEGRATION',
+  DELETE_INTEGRATION: 'DELETE_INTEGRATION',
+
   // WebHook
   SET_WEBHOOK_UI_FLAG: 'SET_WEBHOOK_UI_FLAG',
   SET_WEBHOOK: 'SET_WEBHOOK',
diff --git a/app/javascript/shared/helpers/vuex/mutationHelpers.js b/app/javascript/shared/helpers/vuex/mutationHelpers.js
index a965c8f8a..577d02bef 100644
--- a/app/javascript/shared/helpers/vuex/mutationHelpers.js
+++ b/app/javascript/shared/helpers/vuex/mutationHelpers.js
@@ -25,6 +25,15 @@ export const update = (state, data) => {
   });
 };
 
+/* when you don't want to overwrite the whole object */
+export const updateAttributes = (state, data) => {
+  state.records.forEach((element, index) => {
+    if (element.id === data.id) {
+      Vue.set(state.records, index, { ...state.records[index], ...data });
+    }
+  });
+};
+
 export const destroy = (state, id) => {
   state.records = state.records.filter(record => record.id !== id);
 };
diff --git a/app/models/integrations/app.rb b/app/models/integrations/app.rb
index 324b34b98..645ff3d92 100644
--- a/app/models/integrations/app.rb
+++ b/app/models/integrations/app.rb
@@ -25,12 +25,39 @@ class Integrations::App
     params[:fields]
   end
 
-  def button
-    params[:button]
+  def action
+    case params[:id]
+    when 'slack'
+      "#{params[:action]}&client_id=#{ENV['SLACK_CLIENT_ID']}&redirect_uri=#{self.class.slack_integration_url}"
+    else
+      params[:action]
+    end
+  end
+
+  def active?
+    case params[:id]
+    when 'slack'
+      ENV['SLACK_CLIENT_SECRET'].present?
+    else
+      true
+    end
   end
 
   def enabled?(account)
-    account.hooks.where(app_id: id).exists?
+    case params[:id]
+    when 'slack'
+      account.hooks.where(app_id: id).exists?
+    else
+      true
+    end
+  end
+
+  def hooks
+    Current.account.hooks.where(app_id: id)
+  end
+
+  def self.slack_integration_url
+    "#{ENV['FRONTEND_URL']}/app/accounts/#{Current.account.id}/settings/integrations/slack"
   end
 
   class << self
diff --git a/app/models/integrations/hook.rb b/app/models/integrations/hook.rb
index bd9768624..82796a2f5 100644
--- a/app/models/integrations/hook.rb
+++ b/app/models/integrations/hook.rb
@@ -31,6 +31,6 @@ class Integrations::Hook < ApplicationRecord
   end
 
   def slack?
-    app_id == 'cw_slack'
+    app_id == 'slack'
   end
 end
diff --git a/app/views/api/v1/accounts/integrations/apps/index.json.jbuilder b/app/views/api/v1/accounts/integrations/apps/index.json.jbuilder
index dc314f008..dca7a4fdc 100644
--- a/app/views/api/v1/accounts/integrations/apps/index.json.jbuilder
+++ b/app/views/api/v1/accounts/integrations/apps/index.json.jbuilder
@@ -1,7 +1,10 @@
-json.array! @apps do |app|
-  json.id app.id
-  json.name app.name
-  json.logo app.logo
-  json.enabled app.enabled?(@current_account)
-  json.button app.button
+json.payload do
+  json.array! @apps do |app|
+    json.id app.id
+    json.name app.name
+    json.description app.description
+    json.logo app.logo
+    json.enabled app.enabled?(@current_account)
+    json.action app.action
+  end
 end
diff --git a/app/views/api/v1/accounts/integrations/apps/show.json.jbuilder b/app/views/api/v1/accounts/integrations/apps/show.json.jbuilder
index 9970e9b0d..93d139e9a 100644
--- a/app/views/api/v1/accounts/integrations/apps/show.json.jbuilder
+++ b/app/views/api/v1/accounts/integrations/apps/show.json.jbuilder
@@ -4,4 +4,4 @@ json.logo @app.logo
 json.description @app.description
 json.fields @app.fields
 json.enabled @app.enabled?(@current_account)
-json.button @app.button
+json.button @app.action
diff --git a/app/views/api/v1/accounts/integrations/slack/create.json.jbuilder b/app/views/api/v1/accounts/integrations/slack/create.json.jbuilder
new file mode 100644
index 000000000..0e96489fd
--- /dev/null
+++ b/app/views/api/v1/accounts/integrations/slack/create.json.jbuilder
@@ -0,0 +1,2 @@
+json.id @hook.app_id
+json.enabled true
diff --git a/config/environments/test.rb b/config/environments/test.rb
index 29018c894..1dbfa63ef 100644
--- a/config/environments/test.rb
+++ b/config/environments/test.rb
@@ -50,4 +50,5 @@ Rails.application.configure do
 
   # Raises error for missing translations.
   # config.action_view.raise_on_missing_translations = true
+  config.log_level = ENV.fetch('LOG_LEVEL', 'debug').to_sym
 end
diff --git a/config/integration/apps.yml b/config/integration/apps.yml
index b95d5e16b..30397e6bb 100644
--- a/config/integration/apps.yml
+++ b/config/integration/apps.yml
@@ -1,6 +1,13 @@
 slack:
-  id: cw_slack
+  id: slack
   name: Slack
-  logo: https://a.slack-edge.com/80588/marketing/img/media-kit/img-logos@2x.png
-  description: "'Be less busy' -  Slack is the chat tool that brings all your communication together in one place. By integrating Slack with SupportBee, you can get notified in your Slack channels for important events in your support desk"
-  button: <a href="https://slack.com/oauth/v2/authorize?scope=incoming-webhook,commands,chat:write&client_id=706921004289.1094198503990"><img alt=""Add to Slack"" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcset="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x" /></a>
\ No newline at end of file
+  logo: slack.png
+  description: "Slack is a chat tool that brings all your communication together in one place. By integrating Slack, you can get notified of all the new conversations in your account right inside your Slack."
+  action: https://slack.com/oauth/v2/authorize?scope=commands,chat:write,channels:manage,channels:join,groups:write,im:write,mpim:write,users:read,users:read.email,chat:write.customize 
+webhooks: 
+  id: webhook
+  name: Webhooks
+  logo: cable.svg
+  description: Webhook events provide you the realtime information about what's happening in your account. You can make use of the webhooks to communicate the events to your favourite apps like Slack or Github. Click on Configure to set up your webhooks.
+  action: /webhook
+   
\ No newline at end of file
diff --git a/config/routes.rb b/config/routes.rb
index c4b6aeb62..7c41848a4 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -90,7 +90,7 @@ Rails.application.routes.draw do
           resources :webhooks, except: [:show]
           namespace :integrations do
             resources :apps, only: [:index, :show]
-            resources :slack, only: [:create, :update, :destroy]
+            resource :slack, only: [:create, :update, :destroy], controller: 'slack'
           end
         end
       end
diff --git a/db/seeds.rb b/db/seeds.rb
index 1a169c966..62eddc327 100644
--- a/db/seeds.rb
+++ b/db/seeds.rb
@@ -1,4 +1,5 @@
 # loading installation configs
+GlobalConfig.clear_cache
 ConfigLoader.new.process
 
 account = Account.create!(
diff --git a/docs/development/project-setup/slack-integration-setup.md b/docs/development/project-setup/slack-integration-setup.md
new file mode 100644
index 000000000..75e0ed0fa
--- /dev/null
+++ b/docs/development/project-setup/slack-integration-setup.md
@@ -0,0 +1,39 @@
+---
+path: "/docs/slack-integration-setup"
+title: "Setting Up Slack Intergration"
+---
+
+### Register A Facebook App
+
+To use Slack Integration, you have to create an Slack app in developer portal. You can find more details about creating Slack apps [here](https://api.slack.com/)
+
+Once you register your Slack App, you will have to obtain the `Client Id` and `Client Secret` . These values will be available in the app settings and will be required while setting up Chatwoot environment variables.
+
+### Configure the Slack App
+
+1) Create a slack app and add it to your development workspace. 
+2) Obtain the `Client Id` and `Client Secret` for the app and configure it in your Chatwoot environment variables.
+3) Head over to the `oauth & permissions` section under `features` tab. 
+4) In the redirect urls, Add your Chatwoot installation base url. 
+5) In the scopes section configure the given scopes for bot token scopes.
+ `commands,chat:write,channels:manage,channels:join,groups:write,im:write,mpim:write,users:read,users:read.email,chat:write.customize`
+6) Head over to the `events subscriptions` section under `features` tab.
+7) Enable events and configure the the given request url `{chatwoot installation url}/api/v1/integrations/webhooks`
+8) Subscribe to the following bot events `message.channels` , `message.groups`, `message.im`, `message.mpim`
+9) Connect slack integration on Chatwoot app and  get productive. 
+
+### Configuring the Environment Variables in Chatwoot
+
+Configure the following Chatwoot environment variables with the values you have obtained during the slack app setup.
+
+```bash
+SLACK_CLIENT_ID=
+SLACK_CLIENT_SECRET=
+```
+
+### Test your Setup
+
+1. Ensure that you are recieving the Chatwoot messages in `customer-conversations` channel
+2. Add a message to that thread and ensure its coming back on to Chatwoot
+3. Add `note:` or `private:` in front on the slack message see if its coming out as private notes
+4. If your slack member email matches their email on Chatwoot, the messages will be associated with their Chatwoot user account.
diff --git a/lib/integrations/slack/channel_builder.rb b/lib/integrations/slack/channel_builder.rb
index e5d7e6679..79e167598 100644
--- a/lib/integrations/slack/channel_builder.rb
+++ b/lib/integrations/slack/channel_builder.rb
@@ -6,7 +6,7 @@ class Integrations::Slack::ChannelBuilder
   end
 
   def perform
-    create_channel
+    find_or_create_channel
     update_reference_id
   end
 
@@ -23,11 +23,12 @@ class Integrations::Slack::ChannelBuilder
     Slack::Web::Client.new
   end
 
-  def create_channel
-    @channel = slack_client.conversations_create(name: params[:channel])
+  def find_or_create_channel
+    exisiting_channel = slack_client.conversations_list.channels.find { |channel| channel['name'] == params[:channel] }
+    @channel = exisiting_channel || slack_client.conversations_create(name: params[:channel])['channel']
   end
 
   def update_reference_id
-    @hook.reference_id = channel['channel']['id']
+    @hook.update(reference_id: channel['id'])
   end
 end
diff --git a/lib/integrations/slack/hook_builder.rb b/lib/integrations/slack/hook_builder.rb
index 8900b2a5a..93bff9656 100644
--- a/lib/integrations/slack/hook_builder.rb
+++ b/lib/integrations/slack/hook_builder.rb
@@ -13,7 +13,7 @@ class Integrations::Slack::HookBuilder
       status: 'enabled',
       inbox_id: params[:inbox_id],
       hook_type: hook_type,
-      app_id: 'cw_slack'
+      app_id: 'slack'
     )
 
     hook.save!
@@ -32,11 +32,12 @@ class Integrations::Slack::HookBuilder
 
   def fetch_access_token
     client = Slack::Web::Client.new
-
-    client.oauth_access(
+    slack_access = client.oauth_v2_access(
       client_id: ENV.fetch('SLACK_CLIENT_ID', 'TEST_CLIENT_ID'),
       client_secret: ENV.fetch('SLACK_CLIENT_SECRET', 'TEST_CLIENT_SECRET'),
-      code: params[:code]
-    )['bot']['bot_access_token']
+      code: params[:code],
+      redirect_uri: Integrations::App.slack_integration_url
+    )
+    slack_access['access_token']
   end
 end
diff --git a/lib/integrations/slack/incoming_message_builder.rb b/lib/integrations/slack/incoming_message_builder.rb
index 3236739ba..3b46db3d8 100644
--- a/lib/integrations/slack/incoming_message_builder.rb
+++ b/lib/integrations/slack/incoming_message_builder.rb
@@ -34,7 +34,7 @@ class Integrations::Slack::IncomingMessageBuilder
   end
 
   def supported_message?
-    SUPPORTED_MESSAGE_TYPES.include?(message[:type])
+    SUPPORTED_MESSAGE_TYPES.include?(message[:type]) if message.present?
   end
 
   def hook_verification?
@@ -46,7 +46,7 @@ class Integrations::Slack::IncomingMessageBuilder
   end
 
   def message
-    params[:event][:blocks].first
+    params[:event][:blocks]&.first
   end
 
   def verify_hook
@@ -56,23 +56,42 @@ class Integrations::Slack::IncomingMessageBuilder
   end
 
   def integration_hook
-    @integration_hook ||= Integrations::Hook.where(reference_id: params[:event][:channel])
+    @integration_hook ||= Integrations::Hook.find_by(reference_id: params[:event][:channel])
   end
 
   def conversation
     @conversation ||= Conversation.where(identifier: params[:event][:thread_ts]).first
   end
 
+  def sender
+    user_email = slack_client.users_info(user: params[:event][:user])[:user][:profile][:email]
+    conversation.account.users.find_by(email: user_email)
+  end
+
+  def private_note?
+    params[:event][:text].strip.starts_with?('note:', 'private:')
+  end
+
   def create_message
     return unless conversation
 
     conversation.messages.create(
-      message_type: 0,
+      message_type: :outgoing,
       account_id: conversation.account_id,
       inbox_id: conversation.inbox_id,
-      content: message[:elements].first[:elements].first[:text]
+      content: params[:event][:text],
+      source_id: "slack_#{params[:event][:ts]}",
+      private: private_note?,
+      user: sender
     )
 
     { status: 'success' }
   end
+
+  def slack_client
+    Slack.configure do |config|
+      config.token = integration_hook.access_token
+    end
+    Slack::Web::Client.new
+  end
 end
diff --git a/lib/integrations/slack/outgoing_message_builder.rb b/lib/integrations/slack/outgoing_message_builder.rb
index 61754d816..d3bbfb952 100644
--- a/lib/integrations/slack/outgoing_message_builder.rb
+++ b/lib/integrations/slack/outgoing_message_builder.rb
@@ -11,6 +11,8 @@ class Integrations::Slack::OutgoingMessageBuilder
   end
 
   def perform
+    return if message.source_id.present?
+
     send_message
     update_reference_id
   end
@@ -25,12 +27,32 @@ class Integrations::Slack::OutgoingMessageBuilder
     @contact ||= conversation.contact
   end
 
+  def agent
+    @agent ||= message.user
+  end
+
+  def message_content
+    if conversation.identifier.present?
+      message.content
+    else
+      "*Inbox: #{message.inbox.name}* \n\n #{message.content}"
+    end
+  end
+
+  def avatar_url(sender)
+    sender.try(:avatar_url) || "#{ENV['FRONTEND_URL']}/admin/avatar_square.png"
+  end
+
   def send_message
+    sender = message.outgoing? ? agent : contact
+    sender_type = sender.class == Contact ? 'Contact' : 'Agent'
+
     @slack_message = slack_client.chat_postMessage(
       channel: hook.reference_id,
-      text: message.content,
-      username: contact.try(:name),
-      thread_ts: conversation.identifier
+      text: message_content,
+      username: "#{sender_type}: #{sender.try(:name)}",
+      thread_ts: conversation.identifier,
+      icon_url: avatar_url(sender)
     )
   end
 
diff --git a/public/admin/avatar_square.png b/public/admin/avatar_square.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9eb765c9cedd10a6e69932c952868493d10ef6d
GIT binary patch
literal 4514
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
DxyJlg

literal 0
HcmV?d00001

diff --git a/app/javascript/dashboard/assets/images/integrations/cable.svg b/public/assets/dashboard/integrations/cable.svg
similarity index 100%
rename from app/javascript/dashboard/assets/images/integrations/cable.svg
rename to public/assets/dashboard/integrations/cable.svg
diff --git a/public/assets/dashboard/integrations/slack.png b/public/assets/dashboard/integrations/slack.png
new file mode 100644
index 0000000000000000000000000000000000000000..41fc5e45c6a3e1e89ee498a22e199c5537f0aac6
GIT binary patch
literal 1320
zcmV+@1=sqCP)<h;3K|Lk000e1NJLTq004Xd004Xl0{{R3oWLZE00004XF*Lt006O%
z3;baP00001b5ch_0Itp)=>Px#W>8F2MF0Q*;2&8nw|(uhE$*=|Ew+8&9a%HKx9qYl
zHOBBY#qi)AS~0n^>Ucsn#qsR2F5w<pF1CH(9$7ZU@GiD};T>7*vM%hhE-toxHpTGZ
z9$GfV@aT3zGQGDhwte6pS~kV-?6NN6%%P<K0016zQchC<AXQi+zrP{GzG7Yy6O*K%
zq1`{+Kk|Hc*?jL_*o*x?CjbBhHc3Q5RA}Dqnc23gFbsyFfMuRR(6tcW|0R#QK?^jU
zC~z+PFD>>XY1$^iFvNum-!Cvc9%6(LHg-@E-}|@Pm^y#hINe)ihBTwG*At4@4>TPi
zN2~e%y`QOF%#O=$E{(?f{Ze!KirsaMw&m{EYC~eV*KBRJhj$9R_r4Eg9ZjJYc-&J}
zOyh{k?lLWbPG^5jcj)jA?-FgJ#>qo~ttI9>2<}sMIH^(t9AZyLO$Na`4Y3ZwJsv#V
zE#5wG2ZZDOE#DJvoC^2Og!^a0@tJVwY(EB0zts+cQ}6S`;6ThB1YhNFhr$=x>%nj$
zZ$AS*RxE^yL*aD&;6J!3Jj7gWgNK-&*J0ng_X29;LJf|`0={gPFBQhUxV%Ch9+F9J
zHp3V9UP`en9F<@V>-Vzq<lqRdpyk;lT>y^Y`W@dD;8Ue00>_L|uU8TlhSQ&L7)g?F
z&~f2F^Wg3HSP|Zbf^evke6=p_s&HQrUc&V|R%K6q=fN>!yx1F#z;UFs$)$3*li(p2
zzS-@(o(u~fZiVx@QHZrHttz}Q*wLJE;N^xxrkxJ=l5v8u;0>b!7QR`4*&Txe4^?ke
z!f?oR#DS09(RRa%gR9<f95XdXal66k!2FKEhL@jAL!R!>^H0QRwj(xMGI?Ep-&uWS
zY1nS*vU&Pmi03n{Ps{s>{B)ifui*}&R1LAmSG=ql$f_W7oGe3&q69glvaC6vg!}2I
z|5#>_rWaDx;(_4y98Yf*G=Y6h5|^hWx!S9LR+q<8!R*!2&+mCaLtE}3D%YC*GfE#1
zCOnvp<mSq1ar8?`M3|L7*zlC;m8aSDASc&mvk5@Tc8ffF80v{mXMg9v(MAc++w$zE
z?Tonzctst}zi@X@(e)i{4-Wjoag3$J9_ol;_%wS34CmVn|1&-3z*A^^JZ)@6_G{Ha
zuTOCB<!*oDS5^36gI@i>!SVEOJW+;Qi?eGDhdp!IA8zvC?glvQ_DT%C#d32id`rNA
z(LC;BF5FUO*NlCf3c`(A5uPwkuu2r3C@(p9c286D;Zd!6z=6}7!f>@!pDy%(b!Q2{
zl^k!;Gc@Ad7KAI%uSD*egGrJQTz0e97MQ-KWO6D7mrGxhW$JF;{-Qp=&GTYG_^W0R
z<GYlq;cdSetqU1Z_<I7Ir%0}fl7VY4;ePNRe087CWgiM(?(RCV&V$bi;1l4Bv-@E9
z?AAISK3HeM>*z%IJ2^cKKG<i%uV=#DGvULj@aRnV_K1tr+aelvx;k9LM!#^nQPz&p
z4mSzM{65-opMw#1;dLOjT<R&ac>uN`b)4-_zvhf^14FLXl+Dl@Cpoc?B6qL*oL;}r
zzp_wD)T?3aMPGj5S<-8L3G6H6FZ8~}w>wbpk-dHvJ{{w3S-?*VKb7Y?^LEnwDhMi*
eu`O)Lisc_YTc7LDS|8m20000<MNUMnLSTXm29KHm

literal 0
HcmV?d00001

diff --git a/spec/controllers/api/v1/accounts/integrations/apps_controller_spec.rb b/spec/controllers/api/v1/accounts/integrations/apps_controller_spec.rb
index 78c72db7e..37b6dc254 100644
--- a/spec/controllers/api/v1/accounts/integrations/apps_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/integrations/apps_controller_spec.rb
@@ -20,9 +20,9 @@ RSpec.describe 'Integration Apps API', type: :request do
             as: :json
 
         expect(response).to have_http_status(:success)
-        app = JSON.parse(response.body).first
-        expect(app['id']).to eql('cw_slack')
-        expect(app['name']).to eql('Slack')
+        app = JSON.parse(response.body)['payload'].first
+        expect(app['id']).to eql('webhook')
+        expect(app['name']).to eql('Webhooks')
       end
     end
   end
@@ -30,7 +30,7 @@ RSpec.describe 'Integration Apps API', type: :request do
   describe 'GET /api/v1/integrations/apps/:id' do
     context 'when it is an unauthenticated user' do
       it 'returns unauthorized' do
-        get api_v1_account_integrations_app_url(account_id: account.id, id: 'cw_slack')
+        get api_v1_account_integrations_app_url(account_id: account.id, id: 'slack')
         expect(response).to have_http_status(:unauthorized)
       end
     end
@@ -39,13 +39,13 @@ RSpec.describe 'Integration Apps API', type: :request do
       let(:agent) { create(:user, account: account, role: :agent) }
 
       it 'returns details of the app' do
-        get api_v1_account_integrations_app_url(account_id: account.id, id: 'cw_slack'),
+        get api_v1_account_integrations_app_url(account_id: account.id, id: 'slack'),
             headers: agent.create_new_auth_token,
             as: :json
 
         expect(response).to have_http_status(:success)
         app = JSON.parse(response.body)
-        expect(app['id']).to eql('cw_slack')
+        expect(app['id']).to eql('slack')
         expect(app['name']).to eql('Slack')
       end
     end
diff --git a/spec/factories/integrations/hooks.rb b/spec/factories/integrations/hooks.rb
index 6d6ed4a1b..6af74af9c 100644
--- a/spec/factories/integrations/hooks.rb
+++ b/spec/factories/integrations/hooks.rb
@@ -3,7 +3,7 @@ FactoryBot.define do
     status { 1 }
     inbox_id { 1 }
     account_id { 1 }
-    app_id { 'cw_slack' }
+    app_id { 'slack' }
     settings { 'MyText' }
     hook_type { 1 }
     access_token { SecureRandom.hex }
diff --git a/spec/lib/integrations/slack/hook_builder_spec.rb b/spec/lib/integrations/slack/hook_builder_spec.rb
index 948b14fae..c3670b723 100644
--- a/spec/lib/integrations/slack/hook_builder_spec.rb
+++ b/spec/lib/integrations/slack/hook_builder_spec.rb
@@ -10,7 +10,7 @@ describe Integrations::Slack::HookBuilder do
       hooks_count = account.hooks.count
 
       builder = described_class.new(account: account, code: code)
-      builder.stub(:fetch_access_token) { token }
+      allow(builder).to receive(:fetch_access_token).and_return(token)
 
       builder.perform
       expect(account.hooks.count).to eql(hooks_count + 1)
diff --git a/spec/lib/integrations/slack/incoming_message_builder_spec.rb b/spec/lib/integrations/slack/incoming_message_builder_spec.rb
index 7d38a9ac7..fbbffb687 100644
--- a/spec/lib/integrations/slack/incoming_message_builder_spec.rb
+++ b/spec/lib/integrations/slack/incoming_message_builder_spec.rb
@@ -5,7 +5,7 @@ describe Integrations::Slack::IncomingMessageBuilder do
   let(:message_params) { slack_message_stub }
   let(:verification_params) { slack_url_verification_stub }
 
-  let(:hook) { create(:integrations_hook, account: account, reference_id: message_params[:event][:channel]) }
+  let!(:hook) { create(:integrations_hook, account: account, reference_id: message_params[:event][:channel]) }
   let!(:conversation) { create(:conversation, identifier: message_params[:event][:thread_ts]) }
 
   describe '#perform' do
@@ -19,8 +19,10 @@ describe Integrations::Slack::IncomingMessageBuilder do
 
     context 'when message creation' do
       it 'creates message' do
+        expect(hook).not_to eq nil
         messages_count = conversation.messages.count
         builder = described_class.new(message_params)
+        allow(builder).to receive(:sender).and_return(nil)
         builder.perform
         expect(conversation.messages.count).to eql(messages_count + 1)
       end
diff --git a/spec/lib/integrations/slack/outgoing_message_builder_spec.rb b/spec/lib/integrations/slack/outgoing_message_builder_spec.rb
index d52ed33aa..47fd5ba41 100644
--- a/spec/lib/integrations/slack/outgoing_message_builder_spec.rb
+++ b/spec/lib/integrations/slack/outgoing_message_builder_spec.rb
@@ -14,15 +14,16 @@ describe Integrations::Slack::OutgoingMessageBuilder do
       builder = described_class.new(hook, message)
       stub_request(:post, 'https://slack.com/api/chat.postMessage')
         .to_return(status: 200, body: '', headers: {})
+      slack_client = double
+      expect(builder).to receive(:slack_client).and_return(slack_client)
 
-      # rubocop:disable RSpec/AnyInstance
-      allow_any_instance_of(Slack::Web::Client).to receive(:chat_postMessage).with(
+      expect(slack_client).to receive(:chat_postMessage).with(
         channel: hook.reference_id,
         text: message.content,
-        username: contact.name,
-        thread_ts: conversation.identifier
+        username: "Contact: #{contact.name}",
+        thread_ts: conversation.identifier,
+        icon_url: anything
       )
-      # rubocop:enable RSpec/AnyInstance
 
       builder.perform
     end
diff --git a/spec/requests/api/v1/accounts/integrations/slack_request_spec.rb b/spec/requests/api/v1/accounts/integrations/slack_request_spec.rb
index 71f8c1d18..e68eabf73 100644
--- a/spec/requests/api/v1/accounts/integrations/slack_request_spec.rb
+++ b/spec/requests/api/v1/accounts/integrations/slack_request_spec.rb
@@ -3,7 +3,7 @@ require 'rails_helper'
 RSpec.describe 'Api::V1::Accounts::Integrations::Slacks', type: :request do
   let(:account) { create(:account) }
   let(:agent) { create(:user, account: account, role: :agent) }
-  let(:hook) { create(:integrations_hook, account: account) }
+  let!(:hook) { create(:integrations_hook, account: account) }
 
   describe 'POST /api/v1/accounts/{account.id}/integrations/slack' do
     context 'when it is an unauthenticated user' do
@@ -16,24 +16,27 @@ RSpec.describe 'Api::V1::Accounts::Integrations::Slacks', type: :request do
     context 'when it is an authenticated user' do
       it 'creates hook' do
         hook_builder = Integrations::Slack::HookBuilder.new(account: account, code: SecureRandom.hex)
-        hook_builder.stub(:fetch_access_token) { SecureRandom.hex }
-
+        expect(hook_builder).to receive(:fetch_access_token).and_return(SecureRandom.hex)
         expect(Integrations::Slack::HookBuilder).to receive(:new).and_return(hook_builder)
 
+        channel_builder = Integrations::Slack::ChannelBuilder.new(hook: hook, channel: 'channel')
+        expect(channel_builder).to receive(:perform)
+        expect(Integrations::Slack::ChannelBuilder).to receive(:new).and_return(channel_builder)
+
         post "/api/v1/accounts/#{account.id}/integrations/slack",
              params: { code: SecureRandom.hex },
              headers: agent.create_new_auth_token
 
         expect(response).to have_http_status(:success)
         json_response = JSON.parse(response.body)
-        expect(json_response['app_id']).to eql('cw_slack')
+        expect(json_response['id']).to eql('slack')
       end
     end
 
-    describe 'PUT /api/v1/accounts/{account.id}/integrations/slack/{id}' do
+    describe 'PUT /api/v1/accounts/{account.id}/integrations/slack/' do
       context 'when it is an unauthenticated user' do
         it 'returns unauthorized' do
-          put "/api/v1/accounts/#{account.id}/integrations/slack/#{hook.id}", params: {}
+          put "/api/v1/accounts/#{account.id}/integrations/slack/", params: {}
           expect(response).to have_http_status(:unauthorized)
         end
       end
@@ -41,32 +44,32 @@ RSpec.describe 'Api::V1::Accounts::Integrations::Slacks', type: :request do
       context 'when it is an authenticated user' do
         it 'updates hook' do
           channel_builder = Integrations::Slack::ChannelBuilder.new(hook: hook, channel: 'channel')
-          channel_builder.stub(:perform)
+          expect(channel_builder).to receive(:perform)
 
           expect(Integrations::Slack::ChannelBuilder).to receive(:new).and_return(channel_builder)
 
-          put "/api/v1/accounts/#{account.id}/integrations/slack/#{hook.id}",
+          put "/api/v1/accounts/#{account.id}/integrations/slack",
               params: { channel: SecureRandom.hex },
               headers: agent.create_new_auth_token
 
           expect(response).to have_http_status(:success)
           json_response = JSON.parse(response.body)
-          expect(json_response['app_id']).to eql('cw_slack')
+          expect(json_response['app_id']).to eql('slack')
         end
       end
     end
 
-    describe 'DELETE /api/v1/accounts/{account.id}/integrations/slack/{id}' do
+    describe 'DELETE /api/v1/accounts/{account.id}/integrations/slack' do
       context 'when it is an unauthenticated user' do
         it 'returns unauthorized' do
-          delete "/api/v1/accounts/#{account.id}/integrations/slack/#{hook.id}", params: {}
+          delete "/api/v1/accounts/#{account.id}/integrations/slack", params: {}
           expect(response).to have_http_status(:unauthorized)
         end
       end
 
       context 'when it is an authenticated user' do
         it 'deletes hook' do
-          delete "/api/v1/accounts/#{account.id}/integrations/slack/#{hook.id}",
+          delete "/api/v1/accounts/#{account.id}/integrations/slack",
                  headers: agent.create_new_auth_token
           expect(response).to have_http_status(:success)
           expect(Integrations::Hook.find_by(id: hook.id)).to be nil
diff --git a/spec/requests/api/v1/integrations/webhooks_request_spec.rb b/spec/requests/api/v1/integrations/webhooks_request_spec.rb
index 1a29f2695..ea870d45c 100644
--- a/spec/requests/api/v1/integrations/webhooks_request_spec.rb
+++ b/spec/requests/api/v1/integrations/webhooks_request_spec.rb
@@ -4,7 +4,7 @@ RSpec.describe 'Api::V1::Integrations::Webhooks', type: :request do
   describe 'POST /api/v1/integrations/webhooks' do
     it 'consumes webhook' do
       builder = Integrations::Slack::IncomingMessageBuilder.new({})
-      builder.stub(:perform) { true }
+      expect(builder).to receive(:perform).and_return(true)
 
       expect(Integrations::Slack::IncomingMessageBuilder).to receive(:new).and_return(builder)
 
diff --git a/spec/support/slack_stubs.rb b/spec/support/slack_stubs.rb
index 971803f4e..18af884ed 100644
--- a/spec/support/slack_stubs.rb
+++ b/spec/support/slack_stubs.rb
@@ -7,41 +7,12 @@ module SlackStubs
     }
   end
 
-  # rubocop:disable  Metrics/MethodLength
   def slack_message_stub
     {
       "token": '[FILTERED]',
       "team_id": 'TLST3048H',
       "api_app_id": 'A012S5UETV4',
-      "event": {
-        "client_msg_id": 'ffc6e64e-6f0c-4a3d-b594-faa6b44e48ab',
-        "type": 'message',
-        "text": 'this is test',
-        "user": 'ULYPAKE5S',
-        "ts": '1588623033.006000',
-        "team": 'TLST3048H',
-        "blocks": [
-          {
-            "type": 'rich_text',
-            "block_id": 'jaIv3',
-            "elements": [
-              {
-                "type": 'rich_text_section',
-                "elements": [
-                  {
-                    "type": 'text',
-                    "text": 'this is test'
-                  }
-                ]
-              }
-            ]
-          }
-        ],
-        "thread_ts": '1588623023.005900',
-        "channel": 'G01354F6A6Q',
-        "event_ts": '1588623033.006000',
-        "channel_type": 'group'
-      },
+      "event": message_event,
       "type": 'event_callback',
       "event_id": 'Ev013QUX3WV6',
       "event_time": 1_588_623_033,
@@ -49,5 +20,38 @@ module SlackStubs
       "webhook": {}
     }
   end
-  # rubocop:enable  Metrics/MethodLength
+
+  def message_event
+    { "client_msg_id": 'ffc6e64e-6f0c-4a3d-b594-faa6b44e48ab',
+      "type": 'message',
+      "text": 'this is test',
+      "user": 'ULYPAKE5S',
+      "ts": '1588623033.006000',
+      "team": 'TLST3048H',
+      "blocks": message_blocks,
+      "thread_ts": '1588623023.005900',
+      "channel": 'G01354F6A6Q',
+      "event_ts": '1588623033.006000',
+      "channel_type": 'group' }
+  end
+
+  def message_blocks
+    [
+      {
+        "type": 'rich_text',
+        "block_id": 'jaIv3',
+        "elements": [
+          {
+            "type": 'rich_text_section',
+            "elements": [
+              {
+                "type": 'text',
+                "text": 'this is test'
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  end
 end