Merge pull request #287 from Safelite/feature/CSR-319

CSR-319: add final special validation for preventSplitAndSingleTogether

src/common-components/button-question/button-question.vue

@@ -37,8 +37,8 @@
           </div>
       </fieldset>
     </div>
-    <div class="row mt-2 form-test-error" v-if="!suppressError">
-        <error-message :name="groupName"></error-message>
+    <div class="row mt-2 form-test-error">
+        <error-message :name="groupName" v-if="!suppressError"></error-message>
     </div>
   </div>
 </template>
@@ -133,6 +133,7 @@ export default {
       if(this.isMultiSelect && this.selectedValues) {
         // Add or remove item to array of data to emit
         const newSelectedValues = this.selectedValues;
+
         if(Array.isArray(this.selectedValues)) {
           val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
           this.selectedValues = newSelectedValues;

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -10,6 +10,7 @@
                 buttonType="listCard"
                 v-model="selectedValues"
                 :validationRules="validationRules"
+                :suppressError="suppressError"
             />
         </div>
     </transition>
@@ -35,6 +36,7 @@ export default ({
         modelValue: Array,
         isMultiSelect: Boolean,
         validationRules: String,
+        suppressError: Boolean,
     },
     methods: {
         initializeComponent(cmsContent, replaceOptions){

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

@@ -19,6 +19,7 @@
             ref="windshieldOptions"
             v-model="selectedWindshieldOptions"
             :hasRepairReplaceConflict="hasRepairReplaceConflict"
+            :hasSplitSingleConflict="hasSplitSingleConflict"
             :selectedDamageLocations="selectedDamageLocations"
           />
           <alert
@@ -392,6 +393,23 @@ export default {
     hasRepairReplaceConflict() {
       return this.isWindshieldDamageLocation && this.selectedDamageLocations.length > 1 && this.isWindshieldRepair;
     },
+    hasSplitSingleConflict() {
+      if (!this.selectedWindshieldOptions.selectedWindshieldReplaceOptions) return false;
+
+      return this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedSingleWindshield => 
+        {
+            return selectedSingleWindshield.toUpperCase() === damageLocationsSelected.SINGLE.toUpperCase();
+        }) && 
+        (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedDriverWindshield => 
+        {
+            return selectedDriverWindshield.toUpperCase() === damageLocationsSelected.DRIVER.toUpperCase();
+        }) ||
+        this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedPassengerWindshield => 
+        {
+            return selectedPassengerWindshield.toUpperCase() === damageLocationsSelected.PASSENGER.toUpperCase();
+        })
+        );
+    },
   },
 
   components: {

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

@@ -2,14 +2,14 @@
     <div class="windshield-options">
         <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion"
             :isAvailable=isWindshieldDamageLocation
-            :suppressError="hasRepairReplaceConflict || showNoReplaceAvailableError"
+            :suppressError="hasRepairReplaceConflict || showNoReplacementAvailableError"
             groupName="WindshieldDamageTypeQuestion"
             v-model="selectedWindshieldDamageTypeValues"
-            :validationRules="isWindshieldReplaceAvailable ? 'windshield-damage-type-required|checkForRepairAndReplace:@DamageLocationQuestion' : 'windshield-damage-type-required|checkForRepairAndReplace:@DamageLocationQuestion|repairOnly'"
+            :validationRules="windshieldDamageTypeQuestionValidationRules"
         />
         <alert
             class="my-3"
-            v-show="showNoReplaceAvailableError"
+            v-show="showNoReplacementAvailableError"
             alertClass="alert-danger"
             alertHeadline="Service not available"
             alertCopy="We're sorry, but we currently offer only repair service for your vehicle type. Need help with next steps? Call us at 800-394-0288."
@@ -26,8 +26,17 @@
             isMultiSelect
             groupName="WindshieldReplaceOptions"
             v-model="selectedWindshieldReplaceOptionsValues"
-            validationRules="windshield-replace-options-required"
+            validationRules="windshield-replace-options-required|preventSplitAndSingleTogether"
+            :suppressError="hasSplitSingleConflict"
         />
+        <alert
+            class="my-3"
+            v-show="hasSplitSingleConflict"
+            alertClass="alert-danger"
+            alertHeadline="Single-piece or split?"
+            alertCopy="Please select just one windshield option: single-piece or split."
+            :isDismissible="false"
+          />
     </div>
 </template>
 
@@ -53,17 +62,25 @@ defineRule("checkForRepairAndReplace", (value, [otherFieldValue]) => {
         Array.isArray(otherFieldValue) && 
         otherFieldValue.length > 1) 
     {
-        return "checkForRepairAndReplace error"
+        return false;
     }
     return true;
 });
-
 defineRule("repairOnly", (value) => {
     if (value.toString().toUpperCase() === damageLocationsSelected.REPAIR.toUpperCase()) {
         return true;
     }
     return false;
 });
+defineRule("preventSplitAndSingleTogether", (value) => {
+    if (value.toString().toUpperCase().includes(damageLocationsSelected.SINGLE.toUpperCase()) && 
+        (value.toString().toUpperCase().includes(damageLocationsSelected.DRIVER.toUpperCase()) || 
+        value.toString().toUpperCase().includes(damageLocationsSelected.PASSENGER.toUpperCase())))
+    {
+        return false;
+    }
+    return true;
+});
 
 export default ({
     name: "windshieldOptions",
@@ -77,7 +94,8 @@ export default ({
     props: {
         modelValue: Array,
         selectedDamageLocations: Array,
-        hasRepairReplaceConflict: Boolean
+        hasRepairReplaceConflict: Boolean,
+        hasSplitSingleConflict: Boolean,
     },
 
     methods: {
@@ -151,12 +169,28 @@ export default ({
         isWindshieldReplaceAvailable() {
             return !(Array.isArray(this.windshieldAvailableReplacementOptions) && this.windshieldAvailableReplacementOptions.length < 1);
         },
-        showNoReplaceAvailableError() {
+        isSplitWindshieldOption() {
+            const options = this.windshieldAvailableReplacementOptions.toString().toUpperCase();
+            if (options.includes('DRIVER') && options.includes('PASSENGER')) {
+                return true;
+            }
+            return false;
+        },
+        showNoReplacementAvailableError() {
             if (this.isReplaceOptionSelected && !this.isWindshieldReplaceAvailable) {
                 return true;
             }
             return false;
         },
+        windshieldDamageTypeQuestionValidationRules() {
+            // Note: the validation rules string is not dynamic (it cannot be changed once component has been created)
+            let validationRules = "windshield-damage-type-required|checkForRepairAndReplace:@DamageLocationQuestion";
+            // if vehicle has no windshield replacement option
+            if (!this.isWindshieldReplaceAvailable) {
+                validationRules = validationRules.concat('|repairOnly');
+            }
+            return validationRules;
+        }
     },
     components: {
         windshieldDamageTypeQuestion,