From 84b0257de26d91610cf3e7f2a787739669ee73c7 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 4 Mar 2022 15:02:39 -0500
Subject: [PATCH] CSR-319: improve repair/replace logic

---
 src/constants/error-messages.js               |  2 +-
 .../damage-location-question.vue              |  2 +-
 .../side-door-options/side-door-options.vue   |  2 +-
 src/layouts/vehicle-damage/vehicle-damage.vue | 51 ++++++++-----------
 .../windshield-options/windshield-options.vue |  8 +--
 5 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 963840bda..ba2b0e585 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -9,4 +9,4 @@ const errorMessages = {
     REPLACE_OPTIONS_REQUIRED: "Please select rear window type",
 };
   
-export default { errorMessages };
\ No newline at end of file
+export { errorMessages };
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
index ec32273f0..dff518342 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/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));
diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
index d58f986f7..9366954ec 100644
--- a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
+++ b/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));
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 1f7fa0996..7d68961d9 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/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: {
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index c381d4995..216ba623e 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/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: {