14429 Filing Survey dialog and launch filing survey (#503)

* - added js-cookie package
- added hotjar-shared config for IA_SURVEY_ID
- fetch IA_SURVEY_ID
- added code to launch filing survey
- added code to set/get/remove cookie
- app version = 4.5.8

* - updated unit tests

devops/vaults.json

@@ -57,5 +57,11 @@
             "base",
             "business-create-ui"
         ]
+    },
+    {
+        "vault": "hotjar",
+        "application": [
+            "shared"
+        ]
     }
 ]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "business-create-ui",
-  "version": "4.5.7",
+  "version": "4.5.8",
   "private": true,
   "appName": "Create UI",
   "sbcName": "SBC Common Components",
@@ -38,6 +38,7 @@
     "axios": "^0.27.2",
     "core-js": "^3.25.2",
     "http-status-codes": "^2.2.0",
+    "js-cookie": "^3.0.1",
     "launchdarkly-js-client-sdk": "^2.22.1",
     "lodash": "^4.17.21",
     "pdfjs-dist": "2.0.943",

public/config/configuration.json

@@ -8,6 +8,7 @@
   "BUSINESS_CREATE_LD_CLIENT_ID": "5e6142dd29b3030a850285b3",
   "DASHBOARD_URL": "https://dev.bcregistry.ca/business/",
   "HOTJAR_ID": "",
+  "IA_SURVEY_ID": "",
   "KEYCLOAK_CONFIG_PATH": "/local-keycloak-config-url/keycloak.json",
   "LEGAL_API_URL": "https://legal-api-dev.apps.silver.devops.gov.bc.ca",
   "LEGAL_API_VERSION_2": "/api/v2",

src/App.vue

@@ -45,7 +45,8 @@
       attach="#app"
       :dialog="filingSurveyDialog"
       @no="filingSurveyDialog = false"
-      @yes="filingSurveyDialog = false"
+      @yes="filingSurveyDialog = false; launchFilingSurvey()"
+      @doNotShow="updateSurveyCookie($event)"
     />
 
     <PaymentErrorDialog
@@ -169,6 +170,7 @@
 // Libraries
 import Vue from 'vue'
 import axios from 'axios'
+import Cookies from 'js-cookie'
 import { Component, Watch } from 'vue-property-decorator'
 import { Action, Getter } from 'vuex-class'
 import { StatusCodes } from 'http-status-codes'
@@ -301,6 +303,7 @@ export default class App extends Vue {
   // Local constants
   readonly STAFF_ROLE = 'STAFF'
   readonly GOV_ACCOUNT_USER = 'GOV_ACCOUNT_USER'
+  readonly IA_SURVEY_KEY = 'IA-SURVEY'
 
   // declarations for template
   readonly RouteNames = RouteNames
@@ -527,6 +530,28 @@ export default class App extends Vue {
     })
   }
 
+  /** Opens Auth Web in a new tab with the survey query param. */
+  protected launchFilingSurvey (): void {
+    const iaSurveyId = sessionStorage.getItem('IA_SURVEY_ID')
+
+    // safety check
+    if (iaSurveyId) {
+      const url = `${sessionStorage.getItem('AUTH_WEB_URL')}?survey=${iaSurveyId}`
+      this.window.open(url, '_blank', 'noreferrer')
+    }
+  }
+
+  /** Called to save or delete "hide survey" cookie. */
+  protected updateSurveyCookie (doNotShow: boolean): void {
+    const domain = window.location.hostname
+    if (doNotShow) {
+      // hide survey for 30 days
+      Cookies.set(this.IA_SURVEY_KEY, 'do-not-show', { domain, expires: 30 })
+    } else {
+      Cookies.remove(this.IA_SURVEY_KEY, { domain })
+    }
+  }
+
   /** The list of completing parties. */
   private getCompletingParties (): CompletingPartyIF {
     let completingParty = null as CompletingPartyIF
@@ -563,9 +588,15 @@ export default class App extends Vue {
     // reset errors in case this method is invoked more than once (ie, retry)
     this.resetFlags()
 
-    // *** TODO: read cookie; if it doesn't exist or is expired then show survey
-    // for now do this temporarily
-    if (this.$route.hash.includes('#show-survey')) this.filingSurveyDialog = true
+    // check if IA Survey ID is configured
+    const iaSurveyId = sessionStorage.getItem('IA_SURVEY_ID')
+    if (iaSurveyId) {
+      // check for cookie; if it doesn't exist then show survey dialog
+      // NB: cookie is auto-removed when it expires
+      const domain = window.location.hostname
+      const cookie = Cookies.get(this.IA_SURVEY_KEY, { domain })
+      if (!cookie) this.filingSurveyDialog = true
+    }
 
     // check that current route matches a supported filing type
     const supportedFilings = await GetFeatureFlag('supported-filings')

src/dialogs/FilingSurveyDialog.vue

@@ -21,11 +21,10 @@
         </p>
 
         <v-checkbox
-          id="dialog-checkbox"
           hide-details
           label="Do not show this message again"
-          class="mt-6"
-          @change="updateCookie($event)"
+          class="dialog-checkbox mt-6"
+          @change="doNotShow($event)"
         />
       </v-card-text>
 
@@ -63,15 +62,10 @@ export default class FilingSurveyDialog extends Vue {
   /** Prop to provide attachment selector. */
   @Prop({ default: '' }) readonly attach!: string
 
-  // Pass click events to parent.
+  // Pass events to parent.
   @Emit() protected no (): void {}
   @Emit() protected yes (): void {}
-
-  /** Saves a cookie to prevent showing this dialog for a while. */
-  protected updateCookie (val: boolean) {
-    // *** TODO: save a cookie with an expiry date
-    // and maybe delete cookie if not needed?
-  }
+  @Emit('doNotShow') protected doNotShow (val: boolean): void {}
 }
 </script>
 

src/utils/FetchConfig.ts

@@ -94,6 +94,9 @@ export async function FetchConfig (): Promise<any> {
     console.info('Set Siteminder Logout URL to: ' + siteminderLogoutUrl)
   }
 
+  const iaSurveyId: string = response.data.IA_SURVEY_ID
+  sessionStorage.setItem('IA_SURVEY_ID', iaSurveyId)
+
   const hotjarId: string = response.data.HOTJAR_ID;
   (<any>window).hotjarId = hotjarId
 

tests/unit/FilingSurveyDialog.spec.ts

@@ -31,7 +31,28 @@ describe('Filing Survey Dialog', () => {
     wrapper.destroy()
   })
 
-  it('emits an event when No button is clicked', async () => {
+  it('emits an event when "Do not show" button is clicked', async () => {
+    const wrapper = mount(FilingSurveyDialog,
+      {
+        vuetify,
+        store,
+        propsData: { dialog: true }
+      })
+
+    expect(wrapper.emitted('doNotShow')).toBeUndefined()
+
+    // verify and click checkbox
+    const checkbox = wrapper.find('.dialog-checkbox')
+    expect(checkbox.text()).toBe('Do not show this message again')
+    checkbox.find('input').trigger('click')
+    await Vue.nextTick()
+
+    expect(wrapper.emitted('doNotShow').length).toBe(1)
+
+    wrapper.destroy()
+  })
+
+  it('emits an event when "No" button is clicked', async () => {
     const wrapper = mount(FilingSurveyDialog,
       {
         vuetify,
@@ -41,18 +62,18 @@ describe('Filing Survey Dialog', () => {
 
     expect(wrapper.emitted('no')).toBeUndefined()
 
-    // verify and click No button
-    const exitButton = wrapper.find('#dialog-no-button')
-    expect(exitButton.text()).toBe('NOT RIGHT NOW')
-    exitButton.trigger('click')
+    // verify and click button
+    const button = wrapper.find('#dialog-no-button')
+    expect(button.text()).toBe('NOT RIGHT NOW')
+    button.trigger('click')
     await Vue.nextTick()
 
     expect(wrapper.emitted('no').length).toBe(1)
 
     wrapper.destroy()
   })
 
-  it('emits an event when Yes button is clicked', async () => {
+  it('emits an event when "Yes" button is clicked', async () => {
     const wrapper = mount(FilingSurveyDialog,
       {
         vuetify,
@@ -62,10 +83,10 @@ describe('Filing Survey Dialog', () => {
 
     expect(wrapper.emitted('yes')).toBeUndefined()
 
-    // verify and click retry button
-    const retryButton = wrapper.find('#dialog-yes-button')
-    expect(retryButton.text()).toBe('YES, I\'LL PARTICIPATE')
-    retryButton.trigger('click')
+    // verify and click button
+    const button = wrapper.find('#dialog-yes-button')
+    expect(button.text()).toBe('YES, I\'LL PARTICIPATE')
+    button.trigger('click')
     await Vue.nextTick()
 
     expect(wrapper.emitted('yes').length).toBe(1)