CSR-319: update form test page

src/layouts/form-test/form-test.vue

@@ -16,13 +16,13 @@
             />
             <windshieldOptions
               ref="windshieldOptions" 
-              v-model="selectedWindshieldOptions" 
-              :suppressError="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
+              v-model="selectedWindshieldOptions"
+              :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,11 +32,12 @@
               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"
@@ -44,6 +45,8 @@
             <funnel-footer
               ref="funnelFooter"
               :isDisabled="!meta.valid"
+              @back-clicked="backButtonAction"
+              @ForwardClicked="forwardButtonAction"
             />
 
             <!-- KEEP TEMPORARILY FOR TROUBLESHOOTING VALIDATION  -->
@@ -79,14 +82,13 @@ import { storeActions } from "@/constants/store-actions";
 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 { damageLocationsParts } from "@/constants/damage-locations-parts.js";
+import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
 
 // DEFINE VALIDATION RULES
-defineRule("replace-options-required", (value) => {
-    if (!value || value.length < 1) {
-        return "Please select rear window type";
-    }
-    return true;
-});
+defineRule("replace-options-required", required(errorMessages.REPLACE_OPTIONS_REQUIRED));
 
 export default {
   name: "form-test",
@@ -113,8 +115,6 @@ export default {
 
     const resultMap = await settleAllPromises(promiseResultMap);
 
-    console.log('resultMap: ', resultMap);
-
     // Call the "next" function to complete the transition to this page.
     next((vm) => {
       vm.$refs.funnelHeader.initializeComponent(
@@ -156,32 +156,11 @@ export default {
       selectedRearReplaceOptions: [],
     }
   },
-  computed: {
-    isRearWindowDamageLocation() {
-      return this.selectedDamageLocations.some(selectedDamages => 
-        {
-          return selectedDamages.toUpperCase() === "REARWINDOW";
-        });
-    },
-  },
-  components: {
-    Form,
-    funnelHeader,
-    vehicleBanner,
-    funnelSubHeader,
-    sideDoorOptions,
-    damageLocationQuestion,
-    replaceOptionsQuestion,
-    funnelFooter,
-    windshieldOptions,
-    alert,
-  },
   methods: {
     arePagePrerequisitesValid() {
       return store.getters.vehicle.carId !== null;
     },
     resetDependentState() {
-      // Invokes
       store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
     },
     onSubmit(values) {
@@ -203,5 +182,64 @@ export default {
       }
     },
   },
+  computed: {
+    isWindshieldDamageLocation() {
+      return this.selectedDamageLocations.some(selectedDamages => 
+        {
+            return selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD;
+        });
+    },
+    isSideDoorDamageLocation() {
+      return this.selectedDamageLocations.some(selectedDamages => 
+        {
+            return selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR;
+        });
+    },
+    isRearWindowDamageLocation() {
+      return this.selectedDamageLocations.some(selectedDamages => 
+        {
+            return selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW;
+        });
+    },
+    isWindshieldRepair() {
+      if (!this.isWindshieldDamageLocation) return false;
+      
+      return this.selectedWindshieldOptions.selectedWindshieldDamageType && this.selectedWindshieldOptions.selectedWindshieldDamageType.some(selectedDamageType => 
+        {
+            return selectedDamageType.toUpperCase() === "REPAIR";
+        });
+    },
+    isDriverSideReplace() {
+      if (!this.isSideDoorDamageLocation) return false;
+
+      return this.sideDoorOptionsData.selectedDoorSides.some(selectedDriverSide => 
+        {
+            return selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE;
+        });
+    },
+    isPassengerSideReplace() {
+      if (!this.isSideDoorDamageLocation) return false;
+
+      return this.sideDoorOptionsData.selectedDoorSides.some(selectedPassengerSide => 
+        {
+            return selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE;
+        });
+    },
+    hasRepairReplaceConflict() {
+      return this.isWindshieldDamageLocation && this.selectedDamageLocations.length > 1 && this.isWindshieldRepair;
+    },
+  },
+  components: {
+    funnelHeader,
+    funnelFooter,
+    vehicleBanner,
+    funnelSubHeader,
+    sideDoorOptions,
+    damageLocationQuestion,
+    windshieldOptions,
+    replaceOptionsQuestion,
+    Form,
+    alert,
+  },
 };
 </script>