Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement mobile Intercom using vuex store #3424

Merged
merged 12 commits into from
Jan 16, 2020
Merged

Implement mobile Intercom using vuex store #3424

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a3dbf8c
Intercom mobile implemented using vuex store
mariopino Jan 15, 2020
8564f57
changelog
mariopino Jan 15, 2020
3ceadf7
Lint
mariopino Jan 15, 2020
c1e429e
Mutations
mariopino Jan 15, 2020
a2e46c8
Fix test
mariopino Jan 15, 2020
0597cfb
Intercom store module testing
mariopino Jan 15, 2020
a9f41cd
Better code coverage
mariopino Jan 16, 2020
69c81cc
Cleanup
mariopino Jan 16, 2020
7dcae71
Fix
mariopino Jan 16, 2020
32be543
Cleanup
mariopino Jan 16, 2020
8a3d66e
Mock capacitor-intercom
mariopino Jan 16, 2020
51b3488
Cleanup
mariopino Jan 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion android/app/src/main/assets/capacitor.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
"plugins": {
"IntercomPlugin": {
"android-apiKey": "android_sdk-xxxx",
"android-appId": "yyyy"
"android-appId": "yyyy",
"ios-apiKey": "ios_sdk-xxxx",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

probably don't need to add the ios stuff (or anything) here if it gets overridden by the top level capacitor.config

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's the reason why that file has this content (the top-level config file has it).

"ios-appId": "yyyy"
}
}
}
10 changes: 9 additions & 1 deletion capacitor.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
}
1 change: 1 addition & 0 deletions changes/mario_3423-mobile-intercom-store
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[Added] [#3423](https://github.com/cosmos/lunie/issues/3423) Implement mobile Intercom using vuex store @mariopino
2 changes: 1 addition & 1 deletion jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand Down
5 changes: 3 additions & 2 deletions src/components/common/TmConnectedNetwork.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -89,6 +89,7 @@ export default {
block: {}
}),
computed: {
...mapState([`intercom`]),
...mapGetters([`network`]),
networkTooltip() {
return `You're connected to ${this.block.chainId}.`
Expand All @@ -101,7 +102,7 @@ export default {
},
handleIntercom() {
if (config.mobileApp) {
this.$mobileIntercom.displayMessenger()
this.$store.dispatch(`displayMessenger`)
}
}
},
Expand Down
6 changes: 5 additions & 1 deletion src/components/common/TmDataError.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`)
}
}
}
Expand Down
9 changes: 0 additions & 9 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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,
Expand Down
3 changes: 2 additions & 1 deletion src/vuex/modules/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
})
33 changes: 33 additions & 0 deletions src/vuex/modules/intercom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import config from "src/../config"
import { Intercom } from "capacitor-intercom"

let intercom = null
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()
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what does this do?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It opens the help center (I guess is the same thing you talked about the last demo day conf).

What do you think about? We can remove it if it's not going to be useful.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as long as it is not used, we should not have it in code. But nice to know this is possible.

}
},
actions: {
displayMessenger({ commit }) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess we only need mutations or actions for this ^^ I guess only actions

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It put the mutations there cause I think not having it was causing problems with index.spec.js test, but that wasn't the cause of the problems :-).

I needed to modify transformIgnorePatterns in jest config to whitelist capacitor-intercom package, the problem is that this modification causes the tests to run very slow (>5min to complete). I want to figure out how to fix that.

transformIgnorePatterns: ["/node_modules/?!(capacitor-intercom)"],

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you considered mocking the capacitor-intercom module with jest.mock where it is imported instead of ignoring the transform?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, good point!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is done and great! testing back to normal speed ;-)

commit(`displayMessenger`)
},
displayHelpCenter({ commit }) {
commit(`displayHelpCenter`)
}
}
}
}