From ca0b266efae93412f6732ee398bc753954343602 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 1 Mar 2022 14:12:05 -0500
Subject: [PATCH] CSR-319: move validation into vehicle-damage page

---
 .../replace-options-question.vue              |  49 ++++-----
 src/layouts/vehicle-damage/vehicle-damage.vue | 102 +++++++++++++-----
 .../windshield-options/windshield-options.vue |   3 +-
 .../list-button-horizontal.vue                |   2 +-
 src/ux-components/list-button/list-button.vue |   2 +-
 src/ux-components/list-card/list-card.vue     |   4 +-
 6 files changed, 107 insertions(+), 55 deletions(-)

diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index bc42364d2..63c72f7ce 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -1,6 +1,7 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-noneXXXXXXXXXXXXXXXXX' : ''" aria-live="polite">
+        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-noneXXXXconsole.logXXXXXXXXXXXXX' : ''" aria-live="polite">
+            answersToDisplay.length: {{answersToDisplay.length}}
             <buttonQuestion
                 isWide
                 :questionText="questionText"
@@ -42,27 +43,27 @@ export default ({
             this.answersFromCms = cmsContent.Answers;
             this.replaceOptions = replaceOptions;
         },
-        // updateSelectedValues() {
-        //     // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
-        //     console.log('    ROQ     updateSelectedValues, this.answersToDisplay: ', this.answersToDisplay);
-        //     console.log('    ROQ     updateSelectedValues, this.selectedValues: ', this.selectedValues);
+        updateSelectedValues() {
+            // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
+            console.log('    ROQ     updateSelectedValues, this.answersToDisplay: ', this.answersToDisplay);
+            console.log('    ROQ     updateSelectedValues, this.selectedValues: ', this.selectedValues);
 
-        //     if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
-        //         console.log('  ROQ  ONLY ONE ANSWER!')
-        //         this.selectedValues = [this.answersToDisplay[0].Name];
-        //     }
-        // },
-    },
-    mounted() {
-        console.log('**** MOUJNTED *****.  ')
-        console.log('    ROQ     **** MOUJNTED *****, this.answersToDisplay: ', this.answersToDisplay);
-            console.log('    ROQ     **** MOUJNTED *****, this.selectedValues: ', this.selectedValues);
-
-        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+            if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
                 console.log('  ROQ  ONLY ONE ANSWER!')
                 this.selectedValues = [this.answersToDisplay[0].Name];
             }
+        },
     },
+    // mounted() {
+    //     console.log('**** MOUJNTED *****.  this.groupName: ', this.groupName)
+    //     console.log('    ROQ     **** MOUJNTED *****, this.answersToDisplay: ', this.answersToDisplay);
+    //         console.log('    ROQ     **** MOUJNTED *****, this.selectedValues: ', this.selectedValues);
+
+    //     if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+    //             console.log('  ROQ  ONLY ONE ANSWER!   this.groupName: ', this.groupName)
+    //             this.selectedValues = [this.answersToDisplay[0].Name];
+    //         }
+    // },
     computed: {
         selectedValues: {
             get: function() {
@@ -88,13 +89,13 @@ export default ({
             });
         },
     },
-    // watch: {
-    //     isAvailable(val) {
-    //         console.log('ROQ ^^^    isAvailable changed.')
-    //         // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
-    //         val && this.updateSelectedValues();
-    //     }
-    // },
+    watch: {
+        isAvailable(val) {
+            console.log('ROQ ^^^    isAvailable changed.')
+            // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
+            val && this.updateSelectedValues();
+        }
+    },
     components: {
         buttonQuestion,
     }
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 944c480c5..bf3353b8a 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -3,30 +3,61 @@
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
-        <damageLocationQuestion
-          ref="damageLocation"
-          v-model="selectedDamageLocations"
-          groupName="DamageLocationQuestion"
-        />
-        <windshieldOptions
-          ref="windshieldOptions" 
-          v-model="selectedWindshieldOptions" 
-          :selectedDamageLocations="selectedDamageLocations"
-        />
-        <sideDoorOptions 
-          ref="sideDoorOptions"
-          groupName="SideDoorSideQuestion"
-          v-model="sideDoorOptionsData"
-          :selectedDamageLocations="selectedDamageLocations"
-        />
-        <replaceOptionsQuestion
-          ref="backGlassOptions"
-          :isAvailable="isRearWindowDamageLocation"
-          v-model="selectedRearReplaceOptions"
-          groupName="BackGlassReplaceOptionsQuestion"
-          validationRules="replace-options-required"
-        />
-        <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
+        <Form
+          @submit="onSubmit"
+          @invalid-submit="onInvalidSubmit"
+          ref="theForm"
+          v-slot="{ values, meta, errors }"
+        >
+          <damageLocationQuestion
+            ref="damageLocation"
+            v-model="selectedDamageLocations"
+            groupName="DamageLocationQuestion"
+          />
+          <windshieldOptions
+            ref="windshieldOptions" 
+            v-model="selectedWindshieldOptions"
+            :suppressError="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+            :selectedDamageLocations="selectedDamageLocations"
+          />
+          <alert
+            class="my-3"
+            v-if="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+            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."
+            :isDismissible="false"
+          />
+          <sideDoorOptions 
+            ref="sideDoorOptions"
+            groupName="SideDoorSideQuestion"
+            v-model="sideDoorOptionsData"
+            :selectedDamageLocations="selectedDamageLocations"
+          />
+          <replaceOptionsQuestion
+            ref="backGlassOptions"
+            :isAvailable="isRearWindowDamageLocation"
+            v-model="selectedRearReplaceOptions"
+            groupName="BackGlassReplaceOptionsQuestion"
+            validationRules="replace-options-required"
+          />
+          <funnel-footer
+              ref="funnelFooter"
+              :isDisabled="!meta.valid"
+              @back-clicked="backButtonAction"
+          />
+
+          <!-- 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>
 
@@ -40,6 +71,7 @@ import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-doo
 import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
 import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import alert from "@/ux-components/alert/alert";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -47,7 +79,7 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
-import { defineRule } from "vee-validate";
+import { Form, defineRule } from "vee-validate";
 
 // DEFINE VALIDATION RULES
 defineRule("replace-options-required", (value) => {
@@ -147,6 +179,24 @@ export default {
         this.$route
       );
     },
+    onSubmit(values) {
+      window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
+      console.log('submitted: ', JSON.stringify(values, null ,2));
+    },
+    onInvalidSubmit({ values, errors, results }) {
+      // identify the first error field and put focus on it
+      console.log("values: ", values);
+      console.log("errors: ", errors);
+      console.log("results: ", results);
+      // get error names array
+      const errorNames = errors ? Object.keys(errors) : [];
+      const firstErrorEl = errorNames[0];
+      if (firstErrorEl) {
+        console.log('firstErrorEl: ', firstErrorEl);
+        const qsString = "[data-focus-target='" + firstErrorEl + "']";
+        document.querySelector(qsString).focus();
+      }
+    },
   },
   components: {
     funnelHeader,
@@ -157,6 +207,8 @@ export default {
     damageLocationQuestion,
     windshieldOptions,
     replaceOptionsQuestion,
+    Form,
+    alert,
   },
 };
 </script>
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index fc265fd0a..5a2c2f62e 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="windshield-options">
+        selectedDamageLocations: {{selectedDamageLocations}}
         <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
             :isAvailable=isWindshieldDamageLocation
             :suppressError="suppressError"
@@ -63,8 +64,6 @@ export default ({
     props: {
         modelValue: Array,
         selectedDamageLocations: Array,
-        selectedChipCount: Array,
-        selectedReplaceOptions: Array,
         suppressError: Boolean
     },
 
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 8cd79970a..ca2d261cf 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -10,7 +10,7 @@
       :value="value"
       :aria-required="isRequired"
       :data-focus-target="groupName"
-      @click="handleChange(value)"
+      @click="handleClick(value)"
       v-model="checkValue"
       @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     />
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 0fe0457ee..0db66ee2c 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -10,7 +10,7 @@
       :value="value"
       :aria-required="isRequired"
       :data-focus-target="groupName"
-      @click="handleChange(value)"
+      @click="handleClick(value)"
       v-model="checkValue"
       @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     >
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 7309ca9c3..21b3d79c1 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -111,8 +111,8 @@ export default {
     }
   },
   setup(props) {
-    console.log('RUNNING setup... ... ... props.validationRules: ', props.validationRules)
-    console.log('RUNNING setup... ... ... props.value: ', props.value)
+    // console.log('RUNNING setup... ... ... props.validationRules: ', props.validationRules)
+    // console.log('RUNNING setup... ... ... props.value: ', props.value)
     console.log('RUNNING setup... ... ... props.selectedValues: ', props.selectedValues)
 
     const inputType = props.isMultiSelect ? "checkbox" : "radio";