Staff Payment validation and UX fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "name-request",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "private": true,
   "appName": "Name Request UI",
   "sbcName": "SBC Common Components",
@@ -14,9 +14,9 @@
   },
   "dependencies": {
     "@babel/compat-data": "^7.12.13",
-    "@bcrs-shared-components/enums": "1.0.11",
-    "@bcrs-shared-components/interfaces": "1.0.20",
-    "@bcrs-shared-components/staff-payment": "1.0.24",
+    "@bcrs-shared-components/enums": "1.0.13",
+    "@bcrs-shared-components/interfaces": "1.0.22",
+    "@bcrs-shared-components/staff-payment": "1.0.26",
     "@mdi/font": "^4.5.95",
     "@sentry/browser": "^6.2.1",
     "@sentry/integrations": "^6.2.1",

src/assets/scss/base.scss

@@ -288,14 +288,6 @@ button.reserve-submit-btn {
   margin: 0 !important;
 }
 
-#submit-back-btn {
-  background-color: white !important;
-  color: $app-blue !important;
-  border: 1px solid $app-blue !important;
-  box-shadow: none !important;
-  text-transform: none !important;
-}
-
 /* CSS TRANSITION/ANIMATION CLASSES */
 .fade-enter, .fade-leave-to {
   opacity: 0;

src/components/common/applicant-info-1.vue

@@ -610,9 +610,9 @@ export default class ApplicantInfo1 extends Mixins(ActionMixin) {
       this.$nextTick(() => {
         if (this.$el?.querySelector instanceof Function) {
           // add classname to button text (for more detail in Sentry breadcrumbs)
-          const applicantBackBtn = this.$el.querySelector('#submit-back-btn > span')
+          const applicantBackBtn = this.$el.querySelector('.submit-back-btn > span')
           if (applicantBackBtn) applicantBackBtn.classList.add('applicant-back-btn')
-          const applicantContinueBtn = this.$el.querySelector('#submit-continue-btn > span')
+          const applicantContinueBtn = this.$el.querySelector('.submit-continue-btn > span')
           if (applicantContinueBtn) applicantContinueBtn.classList.add('applicant-continue-btn')
         }
       })

src/components/common/applicant-info-2.vue

@@ -364,9 +364,9 @@ export default class ApplicantInfo2 extends Vue {
       this.$nextTick(() => {
         if (this.$el?.querySelector instanceof Function) {
           // add classname to button text (for more detail in Sentry breadcrumbs)
-          const selfReviewBackBtn = this.$el.querySelector('#submit-back-btn > span')
+          const selfReviewBackBtn = this.$el.querySelector('.submit-back-btn > span')
           if (selfReviewBackBtn) selfReviewBackBtn.classList.add('self-review-back-btn')
-          const selfReviewConfirmBtn = this.$el.querySelector('#submit-continue-btn > span')
+          const selfReviewConfirmBtn = this.$el.querySelector('.submit-continue-btn > span')
           if (selfReviewConfirmBtn) selfReviewConfirmBtn.classList.add('self-review-confirm-btn')
         }
       })

src/components/common/applicant-info-3.vue

@@ -391,9 +391,9 @@ export default class ApplicantInfo3 extends Vue {
       this.$nextTick(() => {
         if (this.$el?.querySelector instanceof Function) {
           // add classname to button text (for more detail in Sentry breadcrumbs)
-          const clientReviewBackBtn = this.$el.querySelector('#submit-back-btn > span')
+          const clientReviewBackBtn = this.$el.querySelector('.submit-back-btn > span')
           if (clientReviewBackBtn) clientReviewBackBtn.classList.add('client-review-back-btn')
-          const clientReviewConfirmBtn = this.$el.querySelector('#submit-continue-btn > span')
+          const clientReviewConfirmBtn = this.$el.querySelector('.submit-continue-btn > span')
           if (clientReviewConfirmBtn) clientReviewConfirmBtn.classList.add('client-review-confirm-btn')
         }
       })

src/components/common/applicant-info-nav.vue

@@ -1,16 +1,15 @@
 <template>
   <v-col cols="5" class="text-right py-0">
     <v-btn x-large
-           id="submit-back-btn"
-           class="mr-3"
+           class="submit-back-btn mr-3"
            v-if="showBack"
            @click="back()">
       {{ backText }}
     </v-btn>
     <v-btn x-large
            @click="nextAction()"
            :loading="getIsLoadingSubmission"
-           id="submit-continue-btn">
+           class="submit-continue-btn">
       {{ nextText }}
     </v-btn>
   </v-col>
@@ -75,3 +74,15 @@ export default class ApplicantInfoNav extends Vue {
   private nextAction () : void {}
 }
 </script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/theme";
+
+.submit-back-btn {
+  background-color: white !important;
+  color: $app-blue !important;
+  border: 1px solid $app-blue !important;
+  box-shadow: none !important;
+  text-transform: none !important;
+}
+</style>

src/components/common/names-capture.vue

@@ -856,7 +856,7 @@ export default class NamesCapture extends Vue {
       this.$nextTick(() => {
         if (this.$el?.querySelector instanceof Function) {
           // add classname to button text (for more detail in Sentry breadcrumbs)
-          const choicesContinueBtn = this.$el.querySelector('#submit-continue-btn > span')
+          const choicesContinueBtn = this.$el.querySelector('.submit-continue-btn > span')
           if (choicesContinueBtn) choicesContinueBtn.classList.add('choices-continue-btn')
         }
       })

src/components/common/request-details.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="request-details">
-    <div class="mt-4">
+    <section>
       <h4>Requested Name <span v-if="nameChoices.name2">Choices</span></h4>
       <ul class="pl-0">
         <li v-if="name && !nameChoices.name2">{{name}}</li>
@@ -10,7 +10,7 @@
           <li v-if="nameChoices.name3">3. {{nameChoices.name3}}</li>
         </template>
       </ul>
-    </div>
+    </section>
 
     <v-row>
       <v-col col="6">

src/components/dialogs/advanced-search.vue

@@ -96,31 +96,31 @@
       </v-tabs>
 
       <v-card-actions id="advanced-search-actions" class="justify-center pa-0">
-          <v-btn
-            id="adv-search-btn-1"
-            class="mr-2"
-            :class="{ 'button-blue': isTabResultsTable || isTabRetrieve }"
-            text
-            outlined
-            @click="advSearchBtn1Actions()"
-          >
-            <span :class="isTabSearchForm ? 'pl-2' : 'pr-2'">
-              <v-icon v-if="!isTabSearchForm">mdi-chevron-left</v-icon>
-              {{ advSearchBtn1Text }}
-              <v-icon v-if="isTabSearchForm">mdi-chevron-right</v-icon>
-            </span>
-          </v-btn>
-          <v-btn
-            id="adv-search-btn-2"
-            :class="{ 'button-blue' : !isTabRetrieve }"
-            text
-            outlined
-            @click="advSearchBtn2Actions()"
-          >
-            <span class="px-3">
-              {{ advSearchBtn2Text }}<v-icon v-if="isTabRetrieve">mdi-chevron-right</v-icon>
-            </span>
-          </v-btn>
+        <v-btn
+          id="adv-search-btn-1"
+          class="mr-2"
+          :class="{ 'button-blue': isTabResultsTable || isTabRetrieve }"
+          text
+          outlined
+          @click="advSearchBtn1Actions()"
+        >
+          <span :class="isTabSearchForm ? 'pl-2' : 'pr-2'">
+            <v-icon v-if="!isTabSearchForm">mdi-chevron-left</v-icon>
+            {{ advSearchBtn1Text }}
+            <v-icon v-if="isTabSearchForm">mdi-chevron-right</v-icon>
+          </span>
+        </v-btn>
+        <v-btn
+          id="adv-search-btn-2"
+          :class="{ 'button-blue' : !isTabRetrieve }"
+          text
+          outlined
+          @click="advSearchBtn2Actions()"
+        >
+          <span class="px-3">
+            {{ advSearchBtn2Text }}<v-icon v-if="isTabRetrieve">mdi-chevron-right</v-icon>
+          </span>
+        </v-btn>
       </v-card-actions>
     </v-card>
 

src/components/dialogs/payment-complete.vue

@@ -9,7 +9,7 @@
       </v-card-title>
 
       <v-card-text class="copy-normal pt-4">
-        <payment-confirm
+        <PaymentConfirm
           :nrNum="getNrNum"
           :applicant="getApplicant"
           :nameChoices="getNameChoices"
@@ -35,7 +35,6 @@
 import { Component, Mixins, Watch } from 'vue-property-decorator'
 import { Action, Getter } from 'vuex-class'
 import PaymentConfirm from '@/components/payment/payment-confirm.vue'
-import RequestDetails from '@/components/common/request-details.vue'
 import { NameRequestPayment } from '@/modules/payment/models'
 import errorModule from '@/modules/error'
 import { PaymentStatus, SbcPaymentStatus } from '@/enums'
@@ -58,7 +57,6 @@ const DEBUG_RECEIPT = false
 
 @Component({
   components: {
-    RequestDetails,
     PaymentConfirm
   }
 })