Implement mobile Intercom using vuex store

android/app/src/main/assets/capacitor.config.json

@@ -7,7 +7,9 @@
   "plugins": {
     "IntercomPlugin": {
       "android-apiKey": "android_sdk-xxxx",
-      "android-appId": "yyyy"
+      "android-appId": "yyyy",
+      "ios-apiKey": "ios_sdk-xxxx",
+      "ios-appId": "yyyy"
     }
   }
 }

capacitor.config.json

@@ -3,5 +3,13 @@
   "appName": "Lunie",
   "bundledWebRuntime": false,
   "npmClient": "yarn",
-  "webDir": "dist"
+  "webDir": "dist",
+  "plugins": {
+    "IntercomPlugin": {
+      "android-apiKey": "android_sdk-xxxx",
+      "android-appId": "yyyy",
+      "ios-apiKey": "ios_sdk-xxxx",
+      "ios-appId": "yyyy"
+    }
+  }
 }

changes/mario_3423-mobile-intercom-store

@@ -0,0 +1 @@
+[Added] [#3423](https://github.com/cosmos/lunie/issues/3423) Implement mobile Intercom using vuex store @mariopino

jest.config.js

@@ -6,7 +6,7 @@ module.exports = {
       "jest-transform-stub",
     "^.+\\.jsx?$": "babel-jest"
   },
-  transformIgnorePatterns: ["/node_modules/"],
+  transformIgnorePatterns: ["/node_modules/?!(capacitor-intercom)"],
   moduleNameMapper: {
     "^src/(.*)$": `<rootDir>/src/$1`,
     "^assets/(.*)$": `<rootDir>/src/assets/$1`,

src/components/common/TmConnectedNetwork.vue

@@ -71,7 +71,7 @@
   </div>
 </template>
 <script>
-import { mapGetters } from "vuex"
+import { mapState, mapGetters } from "vuex"
 import { prettyInt } from "scripts/num"
 import TmBtn from "common/TmBtn"
 import gql from "graphql-tag"
@@ -89,6 +89,7 @@ export default {
     block: {}
   }),
   computed: {
+    ...mapState([`intercom`]),
     ...mapGetters([`network`]),
     networkTooltip() {
       return `You're connected to ${this.block.chainId}.`
@@ -101,7 +102,7 @@ export default {
     },
     handleIntercom() {
       if (config.mobileApp) {
-        this.$mobileIntercom.displayMessenger()
+        this.$store.dispatch(`displayMessenger`)
       }
     }
   },

src/components/common/TmDataError.vue

@@ -18,13 +18,17 @@
 <script>
 import TmDataMsg from "common/TmDataMsg"
 import config from "src/../config"
+import { mapState } from "vuex"
 export default {
   name: `tm-data-error`,
   components: { TmDataMsg },
+  computed: {
+    ...mapState([`intercom`])
+  },
   methods: {
     handleIntercom() {
       if (config.mobileApp) {
-        this.$mobileIntercom.displayMessenger()
+        this.$store.dispatch(`displayMessenger`)
       }
     }
   }

src/main.js

@@ -16,7 +16,6 @@ import config from "src/../config"
 import * as Sentry from "@sentry/browser"
 import * as Integrations from "@sentry/integrations"
 import "material-design-icons-iconfont/dist/material-design-icons.css"
-import { Intercom } from "capacitor-intercom"
 
 if (config.sentryDSN) {
   Sentry.init({
@@ -44,14 +43,6 @@ const urlParams = getURLParams(window)
 const { store, router, apolloProvider } = init(urlParams)
 const { SplashScreen, StatusBar } = Plugins
 
-// Mobile Intercom
-if (config.mobileApp) {
-  const intercom = new Intercom()
-  const userId = "lunie-app-" + Math.floor(Math.random() * 10000 + 1).toString()
-  intercom.registerIdentifiedUser({ userId })
-  Vue.prototype.$mobileIntercom = intercom
-}
-
 new Vue({
   router,
   ...App,

src/vuex/modules/index.js

@@ -7,5 +7,6 @@ export default opts => ({
   keystore: require(`./keystore.js`).default(opts),
   extension: require(`./extension.js`).default(opts),
   signup: require(`./signup.js`).default(opts),
-  recover: require(`./recover.js`).default(opts)
+  recover: require(`./recover.js`).default(opts),
+  intercom: require(`./intercom.js`).default(opts)
 })

src/vuex/modules/intercom.js

@@ -0,0 +1,34 @@
+import config from "src/../config"
+import { Intercom } from "capacitor-intercom"
+
+let intercom = null
+/* istanbul ignore next */
+if (config.mobileApp) {
+  intercom = new Intercom()
+  const userId = "lunie-app-" + Math.floor(Math.random() * 10000 + 1).toString()
+  intercom.registerIdentifiedUser({ userId })
+}
+
+export default () => {
+  return {
+    state: {
+      intercom
+    },
+    mutations: {
+      displayMessenger(state) {
+        state.intercom.displayMessenger()
+      },
+      displayHelpCenter(state) {
+        state.intercom.displayHelpCenter()
+      }
+    },
+    actions: {
+      displayMessenger({ commit }) {
+        commit(`displayMessenger`)
+      },
+      displayHelpCenter({ commit }) {
+        commit(`displayHelpCenter`)
+      }
+    }
+  }
+}

tests/unit/specs/store/intercom.spec.js

@@ -0,0 +1,45 @@
+import recoverModule from "src/vuex/modules/intercom.js"
+
+describe(`Module: Intercom`, () => {
+  let module, state, actions, mutations, node
+
+  const intercom = {
+    displayMessenger: jest.fn(),
+    displayHelpCenter: jest.fn()
+  }
+
+  const spydisplayMessenger = jest.spyOn(intercom, "displayMessenger")
+  const spydisplayHelpCenter = jest.spyOn(intercom, "displayHelpCenter")
+
+  beforeEach(() => {
+    node = {}
+    module = recoverModule({ node })
+    state = { intercom }
+    actions = module.actions
+    mutations = module.mutations
+  })
+
+  describe(`mutations`, () => {
+    it(`should display Intercom Messenger`, () => {
+      mutations.displayMessenger(state)
+      expect(spydisplayMessenger).toHaveBeenCalled()
+    })
+    it(`should display Help Center`, () => {
+      mutations.displayHelpCenter(state)
+      expect(spydisplayHelpCenter).toHaveBeenCalled()
+    })
+  })
+
+  describe(`actions`, () => {
+    it(`should display Intercom Messenger`, async () => {
+      const commit = jest.fn()
+      await actions.displayMessenger({ commit })
+      expect(commit).toHaveBeenCalledWith(`displayMessenger`)
+    })
+    it(`should display Help Center`, async () => {
+      const commit = jest.fn()
+      await actions.displayHelpCenter({ commit })
+      expect(commit).toHaveBeenCalledWith(`displayHelpCenter`)
+    })
+  })
+})