Changes to use fullscreen modal on reviews and also support feedback …

…via email

.env

@@ -4,3 +4,5 @@ VUE_APP_UNSAFE_STATUSBAR_COLOR=#FF5C5D
 VUE_APP_SAFE_STATUSBAR_COLOR=#47BD8F
 VUE_APP_STORE_REVIEWS_ENABLED=true
 VUE_APP_IOS_APP_ID = 'id1434675665'
+VUE_APP_SUPPORT_EMAIL = 'beep@moduscreate.com'
+VUE_APP_SUPPORT_EMAIL_SUBJECT = 'Feedback: About beep'

src/components/ReviewAppModal.vue

@@ -0,0 +1,57 @@
+<template>
+  <modal>
+    <div>
+      <h1>Did you like using BEEP?</h1>
+      <h3 @click="goToReview">
+        <span>Would you mind rating BEEP?</span>
+      </h3>
+      <h3 @click="provideFeedback">
+        <span>We would love to learn from your experience. Can you give us feedback, please? </span>
+      </h3>
+    </div>
+  </modal>
+</template>
+
+<script>
+import Modal from './Modal.vue'
+
+export default {
+  name: 'ReviewAppModal',
+  components: {
+    Modal,
+  },
+  methods: {
+    async goToReview() {
+      await this.$reviewAppService.suggestAppReview()
+      this.$ionic.modalController.dismiss()
+    },
+    async provideFeedback() {
+      await this.$reviewAppService.provideAppFeedback()
+      this.$ionic.modalController.dismiss()
+    },
+  },
+}
+</script>
+
+<style scoped>
+h1 {
+  color: var(--beep-dark);
+  font-size: 24px;
+  font-weight: bold;
+  letter-spacing: -0.6px;
+  line-height: 1.5;
+  margin-bottom: 25px; 
+}
+h3 {
+  margin: 0 auto;
+  height: 5vh;
+  font-size: 16px;
+  font-weight: 300;
+  letter-spacing: -0.48px;
+  line-height: 22px;
+}
+
+h3 span {
+  border-bottom: 1px solid var(--beep-dark);
+}
+</style>

src/mixins/hasModal.js

@@ -14,9 +14,11 @@ export default {
   methods: {
     toggleModal(modalComponent = null) {
       if (!this.isModalOpen) {
-        this.openModal(modalComponent)
+        this.isModalOpen = !this.isModalOpen
+        return this.openModal(modalComponent)
       }
       this.isModalOpen = !this.isModalOpen
+      return Promise.resolve()
     },
     async openModal(modalComponent = null) {
       const modal = await this.$ionic.modalController.create({

src/mixins/reviewAppModal.js

@@ -0,0 +1,17 @@
+import reviewAppModal from '@/components/ReviewAppModal.vue'
+
+export default {
+  data() {
+    return {
+      reviewAppModal,
+    }
+  },
+  methods: {
+    async tryPromptAppReview() {
+      if (this.$reviewAppService.shouldPromptAppReview()) {
+        await this.toggleModal(this.reviewAppModal)
+        this.$reviewAppService.storeReviewRejected = true
+      }
+    },
+  },
+}

src/reviewAppService.js

@@ -1,14 +1,16 @@
 import capacitorConfig from '../capacitor.config.json'
 import { Capacitor, Plugins, Device } from '@capacitor/core'
 import helpers from './helpers'
-const { Modals, Browser, Storage } = Plugins
+const { Browser, Storage } = Plugins
 const { cordova } = window
 
 const iOSAppId = helpers.iOSAppId()
 const DEV_ITUNES_URL = `https://itunes.apple.com/us/app/apple-store/${iOSAppId}`
 const STORE_URL_FORMAT_IOS8 = `https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewContentsUserReviews?pageNumber=0&sortOrdering=1&type=Purple+Software&mt=8&id=${iOSAppId}`
 const STORE_URL_PREFIX_IOS9 = `https://itunes.apple.com/app/viewContentsUserReviews/${iOSAppId}?action=write-review`
 const storeReviewDoneStorageKey = 'storeReviewDone'
+const supportEmail = helpers.env('SUPPORT_EMAIL')
+const supportEmailSubject = helpers.env('SUPPORT_EMAIL_SUBJECT')
 
 export default {
   storeReviewsEnabled: helpers.storeReviewsEnabled(),
@@ -46,40 +48,19 @@ export default {
   registerCheck() {
     this.revisionsDone++
   },
-  tryPromptAppReview(forceReview = false) {
+  shouldPromptAppReview() {
     // We only prompt for an app review if:
     // a. The feature is enabled
     // b. We are on a non web environment
     // c. The user has executed only one account/password review
     // d. The user has not accepted or rejected to provied a review for the app on the app stores yet
-    // OR
-    // a. The feature is enabled
-    // b. The review request is forced (like when is triggered manually by the user, from a global menu for instance)
-    if (
+    return (
       this.storeReviewsEnabled &&
       !helpers.isWeb() &&
-      ((this.revisionsDone === 1 && !this.storeReviewDone && !this.storeReviewRejected) ||
-        forceReview)
-    ) {
-      this.doPromptAppReview()
-    }
-  },
-  doPromptAppReview() {
-    Modals.confirm({
-      title: 'Have some feedback?',
-      message: 'Do you want to review this app?',
-      okButtonTitle: 'Sure',
-      cancelButtonTitle: 'Not now',
-    })
-      .then(({ value }) => {
-        if (value) {
-          this.suggestAppReview()
-        } else {
-          this.storeReviewRejected = true
-        }
-        return
-      })
-      .catch(helpers.err)
+      this.revisionsDone === 1 &&
+      !this.storeReviewDone &&
+      !this.storeReviewRejected
+    )
   },
   async suggestAppReview() {
     const url = this.getStoreHint()
@@ -90,6 +71,7 @@ export default {
       cordova.plugins.market.open(url)
       this.setReviewDone()
     }
+    return Promise.resolve()
   },
   async setReviewDone() {
     await Storage.set({
@@ -98,4 +80,8 @@ export default {
     })
     this.storeReviewDone = true
   },
+  async provideAppFeedback() {
+    await this.setReviewDone()
+    window.location.href = `mailto:${supportEmail}?subject=${supportEmailSubject}`
+  }
 }

src/views/Acc.vue

@@ -46,10 +46,12 @@
 <script>
 import axios from 'axios'
 import network from '@/mixins/network'
+import hasModal from '@/mixins/hasModal'
+import reviewAppModal from '@/mixins/reviewAppModal'
 
 export default {
   name: 'Acc',
-  mixins: [network],
+  mixins: [network, hasModal, reviewAppModal],
   data() {
     return {
       account: '',
@@ -62,7 +64,7 @@ export default {
     },
   },
   mounted() {
-    this.$reviewAppService.tryPromptAppReview()
+    this.tryPromptAppReview()
     this.$breachesService.clear()
   },
   methods: {

src/views/Pwd.vue

@@ -61,12 +61,13 @@ import sha1 from 'sha1'
 import axios from 'axios'
 import hasModal from '@/mixins/hasModal'
 import network from '@/mixins/network'
+import reviewAppModal from '@/mixins/reviewAppModal'
 
 const baseURL = 'https://api.pwnedpasswords.com/range/'
 
 export default {
   name: 'Pwd',
-  mixins: [hasModal, network],
+  mixins: [hasModal, network, reviewAppModal],
   data() {
     return {
       pwd: '',
@@ -87,7 +88,7 @@ export default {
   },
   mounted() {
     this.modal = () => import('@/components/HashProtectedModal.vue')
-    this.$reviewAppService.tryPromptAppReview()
+    this.tryPromptAppReview()
     this.$breachesService.clear()
   },
   methods: {