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

Feature/CSR-319

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

@@ -1,12 +1,20 @@
 <template>
     <div class="windshield-options">
-        <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
+        <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion"
             :isAvailable=isWindshieldDamageLocation
-            :suppressError="hasRepairReplaceConflict"
+            :suppressError="hasRepairReplaceConflict || showNoReplaceAvailableError"
             groupName="WindshieldDamageTypeQuestion"
             v-model="selectedWindshieldDamageTypeValues"
-            validationRules="windshield-damage-type-required|checkForRepairAndReplace:@DamageLocationQuestion"
+            :validationRules="isWindshieldReplaceAvailable ? 'windshield-damage-type-required|checkForRepairAndReplace:@DamageLocationQuestion' : 'windshield-damage-type-required|checkForRepairAndReplace:@DamageLocationQuestion|repairOnly'"
         />
+        <alert
+            class="my-3"
+            v-show="showNoReplaceAvailableError"
+            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."
+            :isDismissible="false"
+          />
         <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
             :isAvailable="isRepairOptionSelected && !hasRepairReplaceConflict"
             groupName="WindshieldChipCountQuestion"
@@ -27,25 +35,45 @@
 import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
 import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import alert from "@/ux-components/alert/alert";
+
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
+import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
 
 // DEFINE VALIDATION RULES
 defineRule("windshield-damage-type-required", required(errorMessages.WINDSHIELD_DAMAGE_TYPE_REQUIRED));
 defineRule("windshield-chip-count-required", required(errorMessages.WINDSHIELD_CHIP_COUNT_REQUIRED));
 defineRule("windshield-replace-options-required", required(errorMessages.WINSHIELD_REPLACE_OPTIONS_REQUIRED));
 
-defineRule("checkForRepairAndReplace", (value, [other]) => {
+defineRule("checkForRepairAndReplace", (value, [otherFieldValue]) => {
-    if (value.toString().toUpperCase().includes("REPAIR") && other.toString().toUpperCase().includes("WINDSHIELD") && other.length > 1) {
+    if (value.toString().toUpperCase().includes(damageLocationsSelected.REPAIR.toUpperCase()) && 
+        otherFieldValue.toString().toUpperCase().includes(damageLocationsSelected.WINDSHIELD.toUpperCase()) && 
+        Array.isArray(otherFieldValue) && 
+        otherFieldValue.length > 1) 
+    {
         return "checkForRepairAndReplace error"
     }
     return true;
 });
 
+defineRule("repairOnly", (value) => {
+    if (value.toString().toUpperCase() === damageLocationsSelected.REPAIR.toUpperCase()) {
+        return true;
+    }
+    return false;
+});
+
 export default ({
     name: "windshieldOptions",
 
+    data(){
+        return {
+            windshieldAvailableReplacementOptions: Object,
+        }
+    },
+
     props: {
         modelValue: Array,
         selectedDamageLocations: Array,
@@ -59,6 +87,8 @@ export default ({
             this.$refs.windshieldDamageTypeQuestion.initializeComponent(windshieldDamageTypeQuestionFromCms);
             this.$refs.windshieldChipCountQuestion.initializeComponent(windshieldChipCountQuestionFromCms);
             this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
+
+            this.windshieldAvailableReplacementOptions = windshieldAvailableReplacementOptions;
         },
         getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
             return {
@@ -102,7 +132,7 @@ export default ({
             }
         },
         isWindshieldDamageLocation() {
-            return  this.selectedDamageLocations.some(selectedDamages => 
+            return this.selectedDamageLocations.some(selectedDamages => 
                 {
                     return Boolean(selectedDamages.toUpperCase() === "WINDSHIELD");
                 });
@@ -117,11 +147,21 @@ export default ({
 
             return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE") && this.isWindshieldDamageLocation;
         },
+        isWindshieldReplaceAvailable() {
+            return !(Array.isArray(this.windshieldAvailableReplacementOptions) && this.windshieldAvailableReplacementOptions.length < 1);
+        },
+        showNoReplaceAvailableError() {
+            if (this.isReplaceOptionSelected && !this.isWindshieldReplaceAvailable) {
+                return true;
+            }
+            return false;
+        },
     },
     components: {
         windshieldDamageTypeQuestion,
         windshieldChipCountQuestion,
-        replaceOptionsQuestion
+        replaceOptionsQuestion,
+        alert,
     },
 })
 </script>