CSR-319: improve repair/replace logic

src/constants/error-messages.js

@@ -9,4 +9,4 @@ const errorMessages = {
     REPLACE_OPTIONS_REQUIRED: "Please select rear window type",
 };
   
-export default { errorMessages };
+export { errorMessages };

src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue

@@ -17,7 +17,7 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 import store from "@/store";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
-import errorMessages from "@/constants/error-messages";
+import { errorMessages } from "@/constants/error-messages";
 
 // DEFINE VALIDATION RULES
 defineRule("damage-location-required", required(errorMessages.DAMAGE_LOCATION_REQUIRED));

src/layouts/vehicle-damage/side-door-options/side-door-options.vue

@@ -40,7 +40,7 @@ import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-que
 import store from "@/store";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
-import errorMessages from "@/constants/error-messages";
+import { errorMessages } from "@/constants/error-messages";
 
 // DEFINE VALIDATION RULES
 defineRule("damage-side-required", required(errorMessages.DAMAGE_SIDE_REQUIRED));

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -7,7 +7,7 @@
           @submit="onSubmit"
           @invalid-submit="onInvalidSubmit"
           ref="theForm"
-          v-slot="{ values, meta, errors }"
+          v-slot="{ meta }"
         >
           <damageLocationQuestion
             ref="damageLocation"
@@ -17,12 +17,12 @@
           <windshieldOptions
             ref="windshieldOptions" 
             v-model="selectedWindshieldOptions"
-            :suppressError="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+            :hasRepairReplaceConflict="hasRepairReplaceConflict"
             :selectedDamageLocations="selectedDamageLocations"
           />
           <alert
             class="my-3"
-            v-if="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+            v-show="hasRepairReplaceConflict"
             alertClass="alert-danger"
             alertHeadline="You'll need to schedule separate appointments"
             alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians. Continue scheduling your first service now, and then come back to schedule the second service."
@@ -32,32 +32,22 @@
             ref="sideDoorOptions"
             groupName="SideDoorSideQuestion"
             v-model="sideDoorOptionsData"
+            v-show="!hasRepairReplaceConflict"
             :selectedDamageLocations="selectedDamageLocations"
           />
           <replaceOptionsQuestion
             ref="backGlassOptions"
-            :isAvailable="isRearWindowDamageLocation"
+            :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
             v-model="selectedRearReplaceOptions"
             groupName="BackGlassReplaceOptionsQuestion"
             validationRules="replace-options-required"
           />
           <funnel-footer
-              ref="funnelFooter"
-              :isDisabled="!meta.valid"
-              @back-clicked="backButtonAction"
-              @ForwardClicked="forwardButtonAction"
+            ref="funnelFooter"
+            :isDisabled="!meta.valid"
+            @back-clicked="backButtonAction"
+            @ForwardClicked="forwardButtonAction"
           />
-
-          <!-- KEEP TEMPORARILY FOR TROUBLESHOOTING VALIDATION  -->
-              <div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
-              <p>Current Form, values:</p>
-              <pre>{{ values }}</pre>
-              <p>Errors:</p>
-              <pre>{{ errors }}</pre>
-              <p>Is Form Valid? (Meta.valid):</p>
-              <pre>{{ meta.valid }}</pre>
-            </div>
-
         </Form>
     </div>
 </template>
@@ -82,7 +72,7 @@ import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
 import { Form, defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
-import errorMessages from "@/constants/error-messages";
+import { errorMessages } from "@/constants/error-messages";
 import { damageLocationsParts } from "@/constants/damage-locations-parts.js";
 import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
 
@@ -169,12 +159,12 @@ export default {
         this.$route
       );
     },
-    onSubmit(values) {
-      // window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
-      // TODO - ADD IN SAVING OF DATA
-      // TODO - ADD IN ADVANCING TO NEXT PAGE
-      console.log('submitted: ', JSON.stringify(values, null, 2));
-    },
+    // onSubmit(values) {
+    //   // window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
+    //   // TODO - ADD IN SAVING OF DATA
+    //   // TODO - ADD IN ADVANCING TO NEXT PAGE
+    //   console.log('submitted: ', JSON.stringify(values, null, 2));
+    // },
     onInvalidSubmit({ values, errors, results }) {
       // identify the first error field and put focus on it
       // get error names array
@@ -260,7 +250,7 @@ export default {
       return selectedGlassToReplace;
     },
   },
-  computed:{
+  computed: {
     isWindshieldDamageLocation() {
       return this.selectedDamageLocations.some(selectedDamages => 
         {
@@ -282,7 +272,7 @@ export default {
     isWindshieldRepair() {
       if (!this.isWindshieldDamageLocation) return false;
       
-      return this.selectedWindshieldOptions.selectedWindshieldDamageType.some(selectedDamageType => 
+      return this.selectedWindshieldOptions.selectedWindshieldDamageType && this.selectedWindshieldOptions.selectedWindshieldDamageType.some(selectedDamageType => 
         {
             return selectedDamageType.toUpperCase() === "REPAIR";
         });
@@ -302,7 +292,10 @@ export default {
         {
             return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE;
         });
-    }
+    },
+    hasRepairReplaceConflict() {
+      return this.isWindshieldDamageLocation && this.selectedDamageLocations.length > 1 && this.isWindshieldRepair;
+    },
   },
 
   components: {

src/layouts/vehicle-damage/windshield-options/windshield-options.vue

@@ -2,13 +2,13 @@
     <div class="windshield-options">
         <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
             :isAvailable=isWindshieldDamageLocation
-            :suppressError="suppressError"
+            :suppressError="hasRepairReplaceConflict"
             groupName="WindshieldDamageTypeQuestion"
             v-model="selectedWindshieldDamageTypeValues"
             validationRules="windshield-damage-type-required|checkForRepairAndReplace:@DamageLocationQuestion"
         />
         <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
-            :isAvailable=isRepairOptionSelected
+            :isAvailable="isRepairOptionSelected && !hasRepairReplaceConflict"
             groupName="WindshieldChipCountQuestion"
             v-model="selectedWindshieldChipCountValues"
             validationRules="windshield-chip-count-required"
@@ -29,7 +29,7 @@ import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-opti
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
-import errorMessages from "@/constants/error-messages";
+import { errorMessages } from "@/constants/error-messages";
 
 // DEFINE VALIDATION RULES
 defineRule("windshield-damage-type-required", required(errorMessages.WINDSHIELD_DAMAGE_TYPE_REQUIRED));
@@ -49,7 +49,7 @@ export default ({
     props: {
         modelValue: Array,
         selectedDamageLocations: Array,
-        suppressError: Boolean
+        hasRepairReplaceConflict: Boolean
     },
 
     methods: {