Implement mobile Intercom using vuex store (#3424)

* Intercom mobile implemented using vuex store

* changelog

* Lint

* Mutations

* Fix test

* Intercom store module testing

* Better code coverage

* Cleanup

* Fix

* Cleanup

* Mock capacitor-intercom

* Cleanup

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

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`)
       }
     }
   },
@@ -116,6 +117,7 @@ export default {
         }
       `,
       variables() {
+        /* istanbul ignore next */
         return {
           networkId: this.network
         }
@@ -124,6 +126,7 @@ export default {
     $subscribe: {
       blockAdded: {
         variables() {
+          /* istanbul ignore next */
           return {
             networkId: this.network
           }
@@ -139,6 +142,7 @@ export default {
           `
         },
         result({ data }) {
+          /* istanbul ignore next */
           this.block = data.blockAdded
         }
       }

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,24 @@
+import config from "src/../config"
+import { Intercom } from "capacitor-intercom"
+
+let intercom = null
+/* istanbul ignore next */
+if (config.mobileApp) {
+  intercom = new Intercom()
+  intercom.registerIdentifiedUser({
+    userId: `lunie-app-${Math.floor(Math.random() * 10000 + 1).toString()}`
+  })
+}
+
+export default () => {
+  return {
+    state: {
+      intercom
+    },
+    actions: {
+      displayMessenger({ state }) {
+        state.intercom.displayMessenger()
+      }
+    }
+  }
+}

tests/unit/specs/components/common/TmConnectedNetwork.spec.js

@@ -4,16 +4,23 @@ import TmConnectedNetwork from "common/TmConnectedNetwork"
 const localVue = createLocalVue()
 localVue.directive(`tooltip`, () => {})
 
+jest.mock(`src/../config.js`, () => ({
+  mobileApp: true
+}))
+
 describe(`TmConnectedNetwork`, () => {
-  let wrapper, $store, $apollo
+  let wrapper, $store, $apollo, dispatch
 
   beforeEach(() => {
+    dispatch = jest.fn()
     $store = {
+      commit: jest.fn(),
       state: {
         connection: {
           network: "networkId"
         }
-      }
+      },
+      dispatch
     }
 
     $apollo = {
@@ -78,4 +85,22 @@ describe(`TmConnectedNetwork`, () => {
       /#6,001/
     )
   })
+
+  it(`handleClick should emit a close-menu event and scroll to 0,0`, () => {
+    global.window = Object.create(window)
+    Object.defineProperty(window, `scrollTo`, {
+      value: jest.fn()
+    })
+    const self = {
+      $emit: jest.fn()
+    }
+    TmConnectedNetwork.methods.handleClick.call(self)
+    expect(self.$emit).toHaveBeenCalledWith("close-menu")
+    expect(window.scrollTo).toHaveBeenCalledWith(0, 0)
+  })
+
+  it(`handleIntercom should dispatch displayMessenger action`, () => {
+    wrapper.vm.handleIntercom()
+    expect(dispatch).toHaveBeenCalledWith(`displayMessenger`)
+  })
 })

tests/unit/specs/components/common/TmDataError.spec.js

@@ -1,6 +1,10 @@
 import { mount } from "@vue/test-utils"
 import TmDataError from "common/TmDataError"
 
+jest.mock(`src/../config.js`, () => ({
+  mobileApp: true
+}))
+
 describe(`TmDataError`, () => {
   let wrapper
   beforeEach(() => {
@@ -39,4 +43,13 @@ describe(`TmDataError`, () => {
       `Even though you're connected a full node, we can't display this data`
     )
   })
+
+  it(`handleIntercom should dispatch displayMessenger action`, () => {
+    const $store = { dispatch: jest.fn() }
+    const self = {
+      $store
+    }
+    TmDataError.methods.handleIntercom.call(self)
+    expect($store.dispatch).toHaveBeenCalledWith(`displayMessenger`)
+  })
 })

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

@@ -1,3 +1,4 @@
+jest.mock(`capacitor-intercom`, () => ({}))
 const Modules = require(`src/vuex/modules`).default
 
 describe(`Module Index`, () => {

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

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

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

@@ -1,5 +1,6 @@
 import store from "src/vuex/store"
 import { Store } from "vuex"
+jest.mock(`capacitor-intercom`, () => ({}))
 
 describe(`Store`, () => {
   it(`check defaults`, () => {