add the staff role error dialog

Signed-off-by: Qin <Arwen.Qin@gov.bc.ca>

src/components/NoticeOfWithdrawal/StaffRoleErrorDialog.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-dialog
+    v-model="dialog"
+    width="45rem"
+    persistent
+    :attach="attach"
+    content-class="staff-role-error-dialog"
+  >
+    <v-card>
+      <v-card-title>{{ title }}</v-card-title>
+      <v-card-text class="pre-wrap">
+        <div
+          v-show="!!text"
+          class="font-15"
+          v-html="text"
+        />
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          id="dialog-exit-button"
+          color="primary"
+          text
+          @click="exit()"
+        >
+          Return to dashboard
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
+import ContactInfo from '@/components/common/ContactInfo.vue'
+
+@Component({
+  components: {
+    ContactInfo
+  }
+})
+export default class StaffRoleErrorDialog extends Vue {
+    @Prop({ default: '' }) readonly attach!: string
+    @Prop({ default: false }) readonly dialog!: boolean
+    @Prop({ default: '' }) readonly text!: string
+    @Prop({ default: '' }) readonly title!: string
+
+    @Emit() exit (): void {}
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+
+.v-card__text {
+color: $gray7 !important;
+}
+</style>

src/views/NoticeOfWithdrawal.vue

@@ -5,6 +5,14 @@
       attach="#notice-of-withdrawal"
     />
 
+    <StaffRoleErrorDialog
+      attach="#notice-of-withdrawal"
+      :dialog="staffRoleErrorDialog"
+      :title="'Access Restricted'"
+      :text="`Only BC Registries staff can access this information.`"
+      @exit="goToDashboard(true)"
+    />
+
     <PaymentErrorDialog
       attach="#notice-of-withdrawal"
       filingName="Notice of Withdrawal"
@@ -308,6 +316,7 @@ import PlanOfArrangement from '@/components/NoticeOfWithdrawal/PlanOfArrangement
 import RecordToBeWithdrawn from '@/components/NoticeOfWithdrawal/RecordToBeWithdrawn.vue'
 import ReferenceNumber from '@/components/NoticeOfWithdrawal/ReferenceNumber.vue'
 import StaffPayment from '@/components/NoticeOfWithdrawal/StaffPayment.vue'
+import StaffRoleErrorDialog from '@/components/NoticeOfWithdrawal/StaffRoleErrorDialog.vue'
 import { ConfirmDialog, PaymentErrorDialog, ResumeErrorDialog, SaveErrorDialog }
   from '@/components/dialogs'
 import { CommonMixin, DateMixin, FilingMixin, ResourceLookupMixin } from '@/mixins'
@@ -324,6 +333,7 @@ import { useBusinessStore, useConfigurationStore, useRootStore } from '@/stores'
       ConfirmDialog,
       PlanOfArrangement,
       DocumentDelivery,
+      StaffRoleErrorDialog,
       PaymentErrorDialog,
       ResumeErrorDialog,
       RecordToBeWithdrawn,
@@ -372,6 +382,7 @@ export default class NoticeOfWithdrawal extends Mixins(CommonMixin, DateMixin, F
     staffPaymentData = { option: StaffPaymentOptions.NONE } as StaffPaymentIF
 
     // variables for displaying dialogs
+    staffRoleErrorDialog = false
     resumeErrorDialog = false
     saveErrorReason = null as SaveErrorReasons
     paymentErrorDialog = false
@@ -422,7 +433,7 @@ export default class NoticeOfWithdrawal extends Mixins(CommonMixin, DateMixin, F
     created (): void {
       // do not proceed if user is not staff
       if (!this.isRoleStaff) {
-        this.resumeErrorDialog = true
+        this.staffRoleErrorDialog = true
         throw new Error('This is a Staff only Filing.')
       }