@bcrs-shared-components/staff-payment 1.1.4 → 2.0.2

package/StaffPayment.vue

@@ -1,19 +1,20 @@
 <template>
-  <v-card flat id="staff-payment-container" class="mt-4 py-8 pr-6 rounded-0">
+  <div id="staff-payment-container">
     <v-row no-gutters>
-      <v-col cols="3" class="pl-5" v-if="displaySideLabel">
-        <label class="side-label" :class="{'error-text': invalidSection}">Payment</label>
+      <v-col v-if="displaySideLabel" cols="12" sm="3" class="pr-4 pb-4">
+        <label class="title-label" :class="{'error-text': invalidSection}">Payment</label>
       </v-col>
 
-      <v-col :cols="displaySideLabel ? 9 : 12" class="pl-2">
-        <v-radio-group class="payment-group" v-model="paymentOption" hide-details>
+      <v-col cols="12" :sm="displaySideLabel ? 9 : 12">
+        <v-radio-group class="payment-group" v-model="paymentOption">
           <!-- Cash or Cheque radio button and form -->
-          <v-radio id="fas-radio" label="Cash or Cheque" :value="StaffPaymentOptions.FAS" />
-          <v-form class="ml-8" ref="fasForm" v-model="fasFormValid">
+          <v-radio id="fas-radio" class="mb-0" label="Cash or Cheque" :value="StaffPaymentOptions.FAS" />
+          <v-form class="mt-4 ml-8" ref="fasForm" v-model="fasFormValid">
             <v-text-field
               filled
               id="routing-slip-number-textfield"
               label="Routing Slip Number"
+              v-model.trim="staffPaymentData.routingSlipNumber"
               :value="staffPaymentData.routingSlipNumber"
               :rules="validate ? routingSlipNumberRules : []"
               :disabled="paymentOption === StaffPaymentOptions.BCOL || paymentOption === StaffPaymentOptions.NO_FEE"
@@ -23,12 +24,13 @@
           </v-form>
 
           <!-- BC Online radio button and form -->
-          <v-radio id="bcol-radio" label="BC Online" :value="StaffPaymentOptions.BCOL" />
-          <v-form class="ml-8" ref="bcolForm" v-model="bcolFormValid">
+          <v-radio id="bcol-radio" class="mb-0 pt-2" label="BC Online" :value="StaffPaymentOptions.BCOL" />
+          <v-form class="mt-4 ml-8" ref="bcolForm" v-model="bcolFormValid">
             <v-text-field
               filled
               id="bcol-account-number-textfield"
               label="BC Online Account Number"
+              v-model.trim="staffPaymentData.bcolAccountNumber"
               :value="staffPaymentData.bcolAccountNumber"
               :rules="validate ? bcolAccountNumberRules : []"
               :disabled="paymentOption === StaffPaymentOptions.FAS || paymentOption === StaffPaymentOptions.NO_FEE"
@@ -39,6 +41,7 @@
               filled
               id="dat-number-textfield"
               label="DAT Number"
+              v-model.trim="staffPaymentData.datNumber"
               :value="staffPaymentData.datNumber"
               :rules="validate ? datNumberRules : []"
               :disabled="paymentOption === StaffPaymentOptions.FAS || paymentOption === StaffPaymentOptions.NO_FEE"
@@ -57,15 +60,15 @@
           </v-form>
 
           <!-- No Fee radio button -->
-          <v-radio id="no-fee-radio" label="No Fee" :value="StaffPaymentOptions.NO_FEE" />
+          <v-radio id="no-fee-radio" class="mb-0 pt-2" label="No Fee" :value="StaffPaymentOptions.NO_FEE" />
 
           <template v-if="displayPriorityCheckbox">
-            <v-divider class="mt-5"></v-divider>
+            <v-divider class="mt-6"></v-divider>
 
             <!-- Priority checkbox -->
             <v-checkbox
-              class="mt-2"
               id="priority-checkbox"
+              class="priority-checkbox mt-6 pt-0"
               label="Priority (add $100.00)"
               hide-details
               :input-value="staffPaymentData.isPriority"
@@ -76,7 +79,7 @@
         </v-radio-group>
       </v-col>
     </v-row>
-  </v-card>
+  </div>
 </template>
 
 <script lang="ts">
@@ -230,10 +233,10 @@ export default class StaffPayment extends Vue {
   @Emit('update:staffPaymentData')
   private emitStaffPaymentData ({
     option = this.staffPaymentData.option,
-    routingSlipNumber = this.staffPaymentData.routingSlipNumber || '',
-    bcolAccountNumber = this.staffPaymentData.bcolAccountNumber || '',
-    datNumber = this.staffPaymentData.datNumber || '',
-    folioNumber = this.staffPaymentData.folioNumber || '',
+    routingSlipNumber = this.staffPaymentData.routingSlipNumber?.trim() || '',
+    bcolAccountNumber = this.staffPaymentData.bcolAccountNumber?.trim() || '',
+    datNumber = this.staffPaymentData.datNumber?.trim() || '',
+    folioNumber = this.staffPaymentData.folioNumber?.trim() || '',
     isPriority = this.staffPaymentData.isPriority || false
   }): StaffPaymentIF {
     // return only the appropriate fields for each option
@@ -264,36 +267,28 @@ export default class StaffPayment extends Vue {
 @import '@/assets/styles/theme.scss';
 
 #staff-payment-container {
-  margin-top: 1rem;
-  padding-bottom: 0.5rem;
-  padding-top: 1rem;
   line-height: 1.2rem;
-  font-size: 1rem;
+  font-size: $px-16;
 }
 
-.payment-group {
-  margin-top: 0;
-  padding-top: 0;
-  width: 100%;
+.title-label {
+  font-weight: bold;
+  color: $gray9;
 }
 
-// radio buttons
-::v-deep .v-input--selection-controls__input >.v-icon {
-  color: $gray7 !important;
-}
-
-// radio labels and checkbox labels
-::v-deep .v-input--selection-controls__input + .v-label {
-  color: $gray7 !important;
+.payment-container {
+  > label:first-child {
+    font-weight: 700;
+    margin-bottom: 2rem;
+  }
 }
 
-// text field labels
-::v-deep .v-text-field__slot .theme--light.v-label {
-  color: $gray7 !important;
-}
+.payment-group {
+  margin-top: 0;
+  padding-top: 0;
 
-// text input
-::v-deep .v-text-field__slot input {
-  color: $gray9 !important;
+  ::v-deep > .v-input__control {
+    margin-bottom: -12px;
+  }
 }
 </style>

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "@bcrs-shared-components/staff-payment",
-    "version": "1.1.4",
+    "version": "2.0.2",
     "publishConfig": {
         "access": "public"
     },
     "dependencies": {
         "@bcrs-shared-components/enums": "^1.0.17",
-        "@bcrs-shared-components/folio-number-input": "^1.0.14",
-        "@bcrs-shared-components/interfaces": "^1.0.32",
+        "@bcrs-shared-components/folio-number-input": "^1.0.15",
+        "@bcrs-shared-components/interfaces": "^1.0.33",
         "vue-property-decorator": "^8.4.0"
     },
-    "gitHead": "c6b5073d1508693aa68d2e9f88e04114444fcec9"
+    "gitHead": "89ee25c1031faa8c55be52170afaff5a5327f4bd"
 }