From 4cee36caec545210c31033380468dcc88a1d1a11 Mon Sep 17 00:00:00 2001
From: CameronFreshworks <53542131+cameron-freshworks@users.noreply.github.com>
Date: Wed, 9 Sep 2020 12:02:21 -0700
Subject: [PATCH] 4602 Name Request Correct Component (#15)

* initial commit

* Updated for initial PR

* Removed padding class

* Pr Comments Update

* Initial Commit. Form Implementation

* Wrap up NameRequest UI correction

* import clean up

* Console clean up

* Pr Updates
---
 src/App.vue                                   |  26 ++--
 .../CompanyName/CorrectNameOptions.vue        |  53 +++++--
 .../CompanyName/CorrectNameRequest.vue        | 141 ++++++++++++++++++
 src/components/Company/CompanyName/index.ts   |   1 +
 src/components/DefineCompany/YourCompany.vue  |  35 ++++-
 src/components/common/Actions.vue             |  23 ---
 .../dialogs/NameRequestErrorDialog.vue        |  83 +++++++++++
 src/components/dialogs/index.ts               |   1 +
 .../correct-name-interface.ts                 |   5 +
 src/mixins/legal-api-mixin.ts                 |  24 ---
 src/mixins/name-request-mixin.ts              |  58 ++++++-
 11 files changed, 372 insertions(+), 78 deletions(-)
 create mode 100644 src/components/Company/CompanyName/CorrectNameRequest.vue
 create mode 100644 src/components/dialogs/NameRequestErrorDialog.vue

diff --git a/src/App.vue b/src/App.vue
index 729aac0fa..024dfefe0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -57,6 +57,13 @@
       @okay="saveErrorDialog = false"
     />
 
+    <name-request-error-dialog
+      attach="#app"
+      :type="nameRequestErrorType"
+      :dialog="nameRequestErrorDialog"
+      @close="nameRequestErrorDialog = false"
+    />
+
     <confirm-dialog
       ref="confirm"
       attach="#app"
@@ -136,7 +143,8 @@ import * as Views from '@/views'
 
 // Dialogs, mixins, interfaces, etc
 import { AccountAuthorizationDialog, BcolErrorDialog, NameRequestInvalidErrorDialog, ConfirmDialog, FetchErrorDialog,
-  InvalidIncorporationApplicationDialog, PaymentErrorDialog, SaveErrorDialog, FileAndPayInvalidNameRequestDialog
+  InvalidIncorporationApplicationDialog, PaymentErrorDialog, SaveErrorDialog, FileAndPayInvalidNameRequestDialog,
+  NameRequestErrorDialog
 } from '@/components/dialogs'
 import { BcolMixin, DateMixin, FilingTemplateMixin, LegalApiMixin } from '@/mixins'
 import { FilingDataIF, ActionBindingIF, ConfirmDialogType } from '@/interfaces'
@@ -155,6 +163,7 @@ import { SessionStorageKeys } from 'sbc-common-components/src/util/constants'
     AccountAuthorizationDialog,
     FetchErrorDialog,
     InvalidIncorporationApplicationDialog,
+    NameRequestErrorDialog,
     PaymentErrorDialog,
     SaveErrorDialog,
     ConfirmDialog,
@@ -200,6 +209,8 @@ export default class App extends Mixins(BcolMixin, DateMixin, FilingTemplateMixi
   private saveErrorDialog: boolean = false
   private nameRequestInvalidErrorDialog: boolean = false
   private nameRequestInvalidType: string = ''
+  private nameRequestErrorDialog: boolean = false
+  private nameRequestErrorType: string = ''
   private saveErrors: Array<object> = []
   private saveWarnings: Array<object> = []
   private fileAndPayInvalidNameRequestDialog: boolean = false
@@ -290,15 +301,10 @@ export default class App extends Mixins(BcolMixin, DateMixin, FilingTemplateMixi
     })
 
     // listen for name request invalid error events
-    this.$root.$on('name-request-invalid-error', async error => {
-      console.log('NR error during File and Pay =', error) // eslint-disable-line no-console
-      this.fileAndPayInvalidNameRequestDialog = true
-    })
-
-    // listen for name request retrieve error events
-    this.$root.$on('name-request-retrieve-error', async () => {
-      console.log('Error while retrieving NR during File and Pay') // eslint-disable-line no-console
-      this.nameRequestInvalidErrorDialog = true
+    this.$root.$on('invalid-name-request', async error => {
+      console.log('Name request error:', error) // eslint-disable-line no-console
+      this.nameRequestErrorType = error
+      this.nameRequestErrorDialog = true
     })
 
     // if we are already authenticated then go right to init
diff --git a/src/components/Company/CompanyName/CorrectNameOptions.vue b/src/components/Company/CompanyName/CorrectNameOptions.vue
index 14b66ea06..436c5cb8f 100644
--- a/src/components/Company/CompanyName/CorrectNameOptions.vue
+++ b/src/components/Company/CompanyName/CorrectNameOptions.vue
@@ -9,16 +9,28 @@
         <v-expansion-panel-header class="name-options-header">{{item.description}}</v-expansion-panel-header>
         <v-expansion-panel-content class="name-options-content">
           <v-container>
-            <component :is="item.component" :key="item.id" />
+            <component
+              :is="item.component"
+              :key="item.id"
+              :submit="submit"
+              @done="emitDone($event)"
+              @isValid="isFormValid = $event"
+            />
           </v-container>
         </v-expansion-panel-content>
       </v-expansion-panel>
     </v-expansion-panels>
 
     <div class="action-btns my-3">
-      <v-fade-transition hide-on-leave>
-        <v-btn id="done-btn" large color="primary" @click="emitSave()"><span>Done</span></v-btn>
-      </v-fade-transition>
+      <v-btn
+        id="done-btn"
+        large color="primary"
+        @click="submitNameCorrection"
+        :disabled="!isFormValid"
+        :loading="isLoading"
+      >
+        <span>Done</span>
+      </v-btn>
 
       <v-btn id="cancel-btn" large @click="emitCancel"><span>Cancel</span></v-btn>
     </div>
@@ -29,6 +41,9 @@
 // Libraries
 import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
 
+// Components
+import CorrectNameRequest from './CorrectNameRequest.vue'
+
 // Interfaces & Enums
 import { CorrectNameOptionIF } from '@/interfaces'
 import { CorrectionTypes } from '@/enums'
@@ -40,14 +55,21 @@ import { CorrectionTypes } from '@/enums'
  * 2. If this options list is only passed one value the option panel will be open by default.
  * 3. The parent component will have to watch for the 'save' and 'cancel' events and handle them accordingly.
  */
-@Component({})
+@Component({
+  components: {
+    CorrectNameRequest
+  }
+})
 export default class CorrectNameOptions extends Vue {
   /** The options to display */
-  @Prop() private correctionNameChoices: Array<string>
+  @Prop() correctionNameChoices: Array<string>
 
   // local properties
   private displayedOptions: Array<CorrectNameOptionIF> = []
   private panel = null as number
+  private submit = false
+  private isLoading = false
+  private isFormValid = false
   private correctionNameOptions: Array<CorrectNameOptionIF> = [
     {
       id: CorrectionTypes.CORRECT_NAME,
@@ -62,7 +84,7 @@ export default class CorrectNameOptions extends Vue {
     {
       id: CorrectionTypes.CORRECT_NEW_NR,
       description: 'Use a new name request number',
-      component: '' // CorrectNameRequest
+      component: CorrectNameRequest
     }
   ]
 
@@ -74,16 +96,23 @@ export default class CorrectNameOptions extends Vue {
     if (this.correctionNameChoices.length === 1) this.panel = 0 // open by default if only 1 option
   }
 
-  /** save name correction */
-  @Emit('save')
-  private emitSave (): void {
-    // Pass up event data for parent to handle setting to store etc
+  /** Trigger form submission */
+  private submitNameCorrection (): void {
+    this.isLoading = true
+    this.submit = !this.submit
+  }
+
+  /** Inform Parent name correction process is done. */
+  @Emit('done')
+  private emitDone (isSaved: boolean): void {
+    this.isLoading = false
+    if (isSaved) this.panel = null
   }
 
   /** cancel name correction */
   @Emit('cancel')
   private emitCancel (): void {
-    this.panel = 0
+    this.panel = null
   }
 }
 </script>
diff --git a/src/components/Company/CompanyName/CorrectNameRequest.vue b/src/components/Company/CompanyName/CorrectNameRequest.vue
new file mode 100644
index 000000000..9c4b3f494
--- /dev/null
+++ b/src/components/Company/CompanyName/CorrectNameRequest.vue
@@ -0,0 +1,141 @@
+<template>
+  <v-form ref="correctNrForm" v-model="valid" lazy-validation>
+    <v-text-field
+      v-model="nameRequestNumber"
+      filled
+      label="Enter a Name Request Number"
+      hint="Example: NR 1234567"
+      req
+      persistent-hint
+      :rules="entityNumRules"
+      data-test="business-identifier"
+    ></v-text-field>
+    <v-text-field
+      v-model="entityPhone"
+      filled
+      label="Enter the Applicant Phone Number"
+      hint="Example: 555-555-5555"
+      persistent-hint
+      type="tel"
+      :rules="entityPhoneNumberRules"
+      data-test="entity-phone"
+    ></v-text-field>
+    <div class="font-weight-bold ml-3 mb-2">or</div>
+    <v-text-field
+      v-model="entityEmail"
+      filled
+      label="Enter the Applicant Email Address"
+      hint="Example: name@email.com"
+      persistent-hint
+      :rules="entityEmailRules"
+      data-test="entity-email"
+    >
+    </v-text-field>
+  </v-form>
+</template>
+
+<script lang="ts">
+// Libraries
+import { Component, Prop, Watch, Emit, Mixins } from 'vue-property-decorator'
+import { Action } from 'vuex-class'
+
+// Mixins
+import { NameRequestMixin } from '@/mixins'
+
+// Interfaces
+import { NrCorrectionIF } from '@/interfaces/correction-interfaces'
+import { ActionBindingIF } from '@/interfaces'
+
+@Component({})
+export default class CorrectNameRequest extends Mixins(NameRequestMixin) {
+  /** Form Submission Prop */
+  @Prop({ default: false }) submit: boolean
+
+  @Action setNameRequest!: ActionBindingIF
+
+  private valid = false
+  private nameRequestNumber: string = ''
+  private entityPhone: string = ''
+  private entityEmail: string = ''
+
+  // Form Ref
+  $refs: { correctNrForm: HTMLFormElement }
+
+  // Rules
+  private entityNumRules = [
+    v => !!v || 'Name Request Number is required',
+    v => this.validateNameRequestNumber(v) || 'Name Request Number is invalid'
+  ]
+  private entityPhoneNumberRules = [
+    v => this.isInputEntered(v, 'phone') || 'Phone number is required',
+    v => !(v.length > 12) || 'Phone number is invalid'
+  ]
+  private entityEmailRules = [
+    v => this.isInputEntered(v, 'email') || 'Email is required',
+    v => this.isValidateEmail(v) || 'Email is Invalid'
+  ]
+
+  // Validations
+  private get isFormValid (): boolean {
+    return this.valid && !!this.nameRequestNumber &&
+      (!!this.entityPhone || !!this.entityEmail)
+  }
+
+  private isInputEntered (value: any, inputType: string) {
+    return (!!((inputType === 'email') ? this.entityPhone : this.entityEmail) || !!value)
+  }
+
+  private isValidateEmail (value: any) {
+    return ((!!this.entityPhone && !!value) || !!this.validateEmailFormat(value))
+  }
+
+  private validateNameRequestNumber (value: string): boolean {
+    const VALID_FORMAT = new RegExp(/^(NR )?\d+$/)
+    return VALID_FORMAT.test(value.toUpperCase())
+  }
+
+  private validateEmailFormat (value: string): boolean {
+    const VALID_FORMAT = new RegExp(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)
+    return VALID_FORMAT.test(value)
+  }
+
+  private resetForm () {
+    this.nameRequestNumber = ''
+    this.entityPhone = ''
+    this.entityEmail = ''
+    this.$refs.correctNrForm.resetValidation()
+  }
+
+  /** Watch for form submission and emit results. */
+  @Watch('submit')
+  private async onSubmit (): Promise<any> {
+    await this.validateNameRequest(this.nameRequestNumber, this.entityPhone, this.entityEmail)
+      .then(response => {
+        const nrCorrection: NrCorrectionIF = {
+          nrNumber: this.nameRequestNumber,
+          legalName: this.getApprovedName(response)
+        }
+        this.setNameRequest(nrCorrection)
+        this.emitDone(true)
+      }).catch(() => {
+        this.emitDone()
+      })
+  }
+
+  /** Inform parent the process is complete. */
+  @Emit('done')
+  private emitDone (isSaved: boolean = false): void {
+    if (!isSaved) this.resetForm()
+  }
+
+  /** Inform parent when form is valid and ready for submission. */
+  @Watch('valid')
+  @Emit('isValid')
+  private emitValid (): boolean {
+    return this.isFormValid
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/components/Company/CompanyName/index.ts b/src/components/Company/CompanyName/index.ts
index c9f7c3866..e79f3a95d 100644
--- a/src/components/Company/CompanyName/index.ts
+++ b/src/components/Company/CompanyName/index.ts
@@ -1 +1,2 @@
 export { default as CorrectNameOptions } from './CorrectNameOptions.vue'
+export { default as CorrectNameRequest } from './CorrectNameRequest.vue'
diff --git a/src/components/DefineCompany/YourCompany.vue b/src/components/DefineCompany/YourCompany.vue
index 237a12d63..851fcbf78 100644
--- a/src/components/DefineCompany/YourCompany.vue
+++ b/src/components/DefineCompany/YourCompany.vue
@@ -11,13 +11,20 @@
         <v-flex md4>
           <label><strong>Company Name</strong></label>
         </v-flex>
-        <v-flex md6>
+        <v-flex md6 v-if="!companyNameChanges">
           <div class="company-name">{{ companyName }}</div>
           <div class="company-type">
             <span v-if="entityFilter(EntityTypes.BCOMP)">BC Benefit Company</span>
             <span v-else-if="entityFilter(EntityTypes.COOP)">BC Cooperative Association</span>
           </div>
         </v-flex>
+        <v-flex md6 v-else>
+          <correct-name-options
+            :correction-name-choices="correctNameChoices"
+            @done="nameChangeHandler($event)"
+            @cancel="companyNameChanges = false"
+          />
+        </v-flex>
         <v-flex md2 class="align-right">
           <!-- only show buttons for named company -->
           <template v-if="getApprovedName || true">
@@ -126,25 +133,27 @@ import { Component, Emit, Mixins, Prop, Watch } from 'vue-property-decorator'
 import { Getter, State } from 'vuex-class'
 
 // Interfaces
-import { BusinessContactIF, GetterIF, IncorporationAddressIf } from '@/interfaces'
+import { BusinessContactIF, GetterIF } from '@/interfaces'
 
 // Components
-import { FolioNumber, BusinessContactInfo, OfficeAddresses } from '@/components/DefineCompany'
+import { BusinessContactInfo, FolioNumber, OfficeAddresses } from '@/components/DefineCompany'
+import { CorrectNameOptions } from '@/components/Company/CompanyName'
 
 // Mixins
-import { DateMixin, EntityFilterMixin } from '@/mixins'
+import { DateMixin, EntityFilterMixin, LegalApiMixin } from '@/mixins'
 
 // Enums
-import { EntityTypes } from '@/enums'
+import { CorrectionTypes, EntityTypes } from '@/enums'
 
 @Component({
   components: {
+    CorrectNameOptions,
     BusinessContactInfo,
     OfficeAddresses,
     FolioNumber
   }
 })
-export default class YourCompany extends Mixins(DateMixin, EntityFilterMixin) {
+export default class YourCompany extends Mixins(DateMixin, EntityFilterMixin, LegalApiMixin) {
   // Getters
   @Getter getApprovedName!: string
   @Getter getBusinessNumber!: string
@@ -164,7 +173,8 @@ export default class YourCompany extends Mixins(DateMixin, EntityFilterMixin) {
   @Prop({ default: false })
   private isSummary: boolean
 
-  // Entity Enum
+  // Enums
+  readonly CorrectionTypes = CorrectionTypes
   readonly EntityTypes = EntityTypes
 
   // whether components have changes
@@ -173,6 +183,11 @@ export default class YourCompany extends Mixins(DateMixin, EntityFilterMixin) {
   private folioNumberChanges = false
   private nameTranslationChanges = false
   private officeAddressChanges = false
+  private correctNameChoices = [
+    CorrectionTypes.CORRECT_NEW_NR,
+    CorrectionTypes.CORRECT_NAME_TO_NUMBER,
+    CorrectionTypes.CORRECT_NAME
+  ]
 
   /** The company name (from NR, or incorporation number). */
   private get companyName (): string {
@@ -188,6 +203,12 @@ export default class YourCompany extends Mixins(DateMixin, EntityFilterMixin) {
       : 'Unknown'
   }
 
+  /** Handle the company name change data */
+  private async nameChangeHandler (isSaved: boolean): Promise<any> {
+    // Handle name corrections vs a snapshot of the original IA here for UI indicators.
+    if (isSaved) this.companyNameChanges = false
+  }
+
   // watchers for component change flags
   @Watch('companyNameChanges') private onCompanyNameChanges ():void { this.emitHaveChanges() }
   @Watch('contactInfoChanges') private onContactInfoChanges ():void { this.emitHaveChanges() }
diff --git a/src/components/common/Actions.vue b/src/components/common/Actions.vue
index dbc76d45f..772f68322 100644
--- a/src/components/common/Actions.vue
+++ b/src/components/common/Actions.vue
@@ -54,9 +54,6 @@ import { StateModelIF, GetterIF, ActionBindingIF } from '@/interfaces'
 // Mixins
 import { DateMixin, FilingTemplateMixin, LegalApiMixin, NameRequestMixin } from '@/mixins'
 
-// Enums
-import { NameRequestStates } from '@/enums'
-
 @Component({})
 export default class Actions extends Mixins(DateMixin, FilingTemplateMixin, LegalApiMixin, NameRequestMixin) {
   // Global state
@@ -197,26 +194,6 @@ export default class Actions extends Mixins(DateMixin, FilingTemplateMixin, Lega
     }
   }
 
-  /** Fetches NR and validates it. */
-  private async validateNameRequest (nrNumber: string): Promise<void> {
-    let nrResponse = await this.fetchNameRequest(nrNumber).catch(error => {
-      this.$root.$emit('name-request-retrieve-error')
-      throw new Error(error)
-    })
-
-    if (!nrResponse || !this.isNrValid(nrResponse)) {
-      this.$root.$emit('name-request-invalid-error', NameRequestStates.INVALID)
-      throw new Error('Invalid Name Request')
-    }
-
-    // ensure NR is consumable
-    const state = this.getNrState(nrResponse)
-    if (state !== NameRequestStates.APPROVED && state !== NameRequestStates.CONDITIONAL) {
-      this.$root.$emit('name-request-invalid-error', state || NameRequestStates.INVALID)
-      throw new Error('Invalid Name request')
-    }
-  }
-
   /** Emits Go To Dashboard event. */
   @Emit('goToDashboard')
   private emitGoToDashboard (): void { }
diff --git a/src/components/dialogs/NameRequestErrorDialog.vue b/src/components/dialogs/NameRequestErrorDialog.vue
new file mode 100644
index 000000000..973334270
--- /dev/null
+++ b/src/components/dialogs/NameRequestErrorDialog.vue
@@ -0,0 +1,83 @@
+<template>
+  <v-dialog v-model="dialog" persistent :attach="attach" max-width="600px">
+    <v-card class="notify-dialog">
+      <v-card-title>
+        <slot name="icon">
+          <v-icon large color="error">mdi-alert</v-icon>
+        </slot>
+        <span>
+          <slot name="title">Error Adding Name Request</slot>
+        </span>
+      </v-card-title>
+      <v-card-text>
+        <slot name="text">
+          <p class="genErr" v-if="type === NameRequestStates.EXPIRED">
+            The specified name request has expired.</p>
+
+          <p class="genErr" v-else-if="type === NameRequestStates.NOT_APPROVED">
+            The specified name request has not been approved.</p>
+
+          <p class="genErr" v-else-if="type === NameRequestStates.NEED_CONSENT">
+            The specified name request is awaiting consent.</p>
+
+          <p class="genErr" v-else-if="type === NameRequestStates.NOT_FOUND">
+            The specified name request could not be found.</p>
+
+          <p class="genErr" v-else-if="type === NameRequestStates.CONSUMED">
+            The specified name request has already been consumed.</p>
+
+          <p class="genErr" v-else-if="type === NameRequestStates.INVALID">
+            The specified name request data is invalid.</p>
+
+          <p class="genErr" v-else>An unexpected error has occurred.</p>
+        </slot>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn large color="error" @click="emitClose" data-test="dialog-ok-button">OK</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
+import { NameRequestStates } from '@/enums/nameRequestStates'
+
+@Component({})
+export default class InvalidNrDialog extends Vue {
+  /** Prop to display the dialog. */
+  @Prop() private dialog: boolean
+
+  /** Prop to provide attachment selector. */
+  @Prop() private attach: string
+
+  /** Prop to provide message type. */
+  @Prop({ default: null }) private type: NameRequestStates
+
+  /** Enum definition for use in template. */
+  readonly NameRequestStates = NameRequestStates
+
+  @Emit('close')
+  private emitClose (): void {}
+}
+</script>
+
+<style lang="scss" scoped>
+  .notify-dialog .v-card__title {
+    flex-direction: column;
+
+    ::v-deep i {
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+    }
+  }
+
+  .notify-dialog .v-card__text {
+    text-align: center;
+  }
+
+  .notify-dialog .v-card__actions {
+    justify-content: center;
+    padding: 1.5rem;
+  }
+</style>
diff --git a/src/components/dialogs/index.ts b/src/components/dialogs/index.ts
index 9ff6a55d0..a076f3123 100644
--- a/src/components/dialogs/index.ts
+++ b/src/components/dialogs/index.ts
@@ -5,6 +5,7 @@ export { default as ConfirmRemoveDialog } from './ConfirmRemoveDialog.vue'
 export { default as FetchErrorDialog } from './FetchErrorDialog.vue'
 export { default as FileAndPayInvalidNameRequestDialog } from './FileAndPayInvalidNameRequestDialog.vue'
 export { default as InvalidIncorporationApplicationDialog } from './InvalidIncorporationApplicationDialog.vue'
+export { default as NameRequestErrorDialog } from './NameRequestErrorDialog.vue'
 export { default as NameRequestInvalidErrorDialog } from './NameRequestInvalidErrorDialog.vue'
 export { default as PaymentErrorDialog } from './PaymentErrorDialog.vue'
 export { default as SaveErrorDialog } from './SaveErrorDialog.vue'
diff --git a/src/interfaces/correction-interfaces/correct-name-interface.ts b/src/interfaces/correction-interfaces/correct-name-interface.ts
index ad46a65fb..6aa99016a 100644
--- a/src/interfaces/correction-interfaces/correct-name-interface.ts
+++ b/src/interfaces/correction-interfaces/correct-name-interface.ts
@@ -3,3 +3,8 @@ export interface CorrectNameOptionIF {
   description?: string,
   component: any
 }
+
+export interface NrCorrectionIF {
+  nrNumber: string,
+  legalName: string
+}
diff --git a/src/mixins/legal-api-mixin.ts b/src/mixins/legal-api-mixin.ts
index cd6d3e743..0412a3bca 100644
--- a/src/mixins/legal-api-mixin.ts
+++ b/src/mixins/legal-api-mixin.ts
@@ -160,28 +160,4 @@ export default class LegalApiMixin extends Mixins(FilingTemplateMixin) {
     const config = { baseURL: authUrl }
     return axios.get('users/@me', config)
   }
-
-  /**
-   * Fetches name request data.
-   * @param nrNumber the name request number (eg, NR 1234567)
-   * @returns a promise to return the NR data, or null if not found
-   */
-  fetchNameRequest (nrNumber: string): Promise<any> {
-    if (!nrNumber) throw new Error('Invalid parameter \'nrNumber\'')
-
-    const url = `nameRequests/${nrNumber}`
-    return axios.get(url)
-      .then(response => {
-        const data = response?.data
-        if (!data) {
-          throw new Error('Invalid API response')
-        }
-        return data
-      }).catch(error => {
-        if (error?.response?.status === NOT_FOUND) {
-          return null // NR not found
-        }
-        throw error
-      })
-  }
 }
diff --git a/src/mixins/name-request-mixin.ts b/src/mixins/name-request-mixin.ts
index fc6359f6b..05d561f0f 100644
--- a/src/mixins/name-request-mixin.ts
+++ b/src/mixins/name-request-mixin.ts
@@ -1,4 +1,6 @@
 // Libraries
+import { axios } from '@/utils'
+import { AxiosResponse } from 'axios'
 import { Component, Mixins } from 'vue-property-decorator'
 import { NameRequestStates, EntityTypes } from '@/enums'
 import { NameRequestIF } from '@/interfaces'
@@ -9,6 +11,58 @@ import { DateMixin } from '@/mixins'
  */
 @Component({})
 export default class NameRequestMixin extends Mixins(DateMixin) {
+  /** Fetches NR and validates it against the applicants information.
+   * @param nrNumber The name request number to validate
+   * @param phone The applicants phone
+   * @param email The applicants email
+   * */
+  async validateNameRequest (nrNumber: string, phone?: string, email?: string): Promise<AxiosResponse> {
+    let nrResponse = await this.fetchNameRequest(nrNumber).catch(error => {
+      this.$root.$emit('invalid-name-request', NameRequestStates.NOT_FOUND)
+      throw new Error(`Fetch Name Request error: ${error}`)
+    })
+
+    // Validate email / phone
+    if ((phone && nrResponse.applicants?.phoneNumber !== phone) ||
+      (email && nrResponse.applicants?.emailAddress !== email)) {
+      this.$root.$emit('invalid-name-request', NameRequestStates.NOT_FOUND)
+      throw new Error(`Invalid Phone or Email`)
+    }
+
+    if (!nrResponse || !this.isNrValid(nrResponse)) {
+      this.$root.$emit('invalid-name-request', NameRequestStates.INVALID)
+      throw new Error('Invalid Name Request')
+    }
+    // ensure NR is consumable
+    const state = this.getNrState(nrResponse)
+    if (state !== NameRequestStates.APPROVED) {
+      this.$root.$emit('invalid-name-request', state)
+      throw new Error(`Invalid Name request state: ${state}`)
+    }
+    return nrResponse
+  }
+
+  /**
+   * Fetches name request data.
+   * @param nrNumber the name request number (eg, NR 1234567)
+   * @returns a promise to return the NR data, or null if not found
+   */
+  async fetchNameRequest (nrNumber: string): Promise<any> {
+    if (!nrNumber) throw new Error('Invalid parameter \'nrNumber\'')
+
+    const url = `nameRequests/${nrNumber}`
+    return axios.get(url)
+      .then(response => {
+        const data = response?.data
+        if (!data) {
+          throw new Error('Invalid API response')
+        }
+        return data
+      }).catch(error => {
+        throw error
+      })
+  }
+
   /**
    * Generates Name Request state for the store.
    * @param nr the name request response payload
@@ -40,7 +94,7 @@ export default class NameRequestMixin extends Mixins(DateMixin) {
         lastName: nr.applicants.lastName
       },
       details: {
-        approvedName: this._getApprovedName(nr),
+        approvedName: this.getApprovedName(nr),
         consentFlag: nr.consentFlag,
         expirationDate: nr.expirationDate,
         status: nr.state
@@ -105,7 +159,7 @@ export default class NameRequestMixin extends Mixins(DateMixin) {
    * Returns the Name Request's approved name.
    * @param nr the name request response payload
    */
-  private _getApprovedName (nr: any): string {
+  getApprovedName (nr: any): string {
     if (nr.state === NameRequestStates.APPROVED) {
       return nr.names.find(name => name.state === NameRequestStates.APPROVED).name
     }