coverage-statement navigation scenarios and content

src/layouts/coverage-statement/coverage-statement.vue

@@ -7,26 +7,31 @@
                   <div class="container-fluid pb-2">
                       <div class="row px-3">
                           <div class="col">
-                              <div class="select-car-form rounded pb-1 mt-4">
+                              <div class="pb-1 mt-4">
                                   <h5
                                     v-html="coverageStatementSubHeader"
-                                    class="d-flex justify-content-center text-black">
+                                    class="text-center text-black">
                                   </h5>
-                                  <div>
+                                  <div
-                                    <p class="d-flex justify-content-center">
+                                    v-html="explanatoryText"
-                                      <span v-html="secondaryText"></span>
+                                    class="body-text text-center mt-4">
-                                      <span class="text"></span>
-                                    </p>
                                   </div>
-                                  <div>
+                                  <div
-                                    <p class="d-flex justify-content-center secondary-text" v-if="verifiedDeductible">
+                                    v-html="secondaryText"
-                                      {{ formattedDeductible }}
+                                    class="text-center mt-4 fw-bold text-black">
-                                    </p>
+                                  </div>
-                                  <div>
+                                  <div
-                                    <p class="d-flex justify-content-center secondary-text" v-if="verifiedITAC">
+                                    v-if="verifiedDeductible"
-                                      {{ formattedServicePrice }}
+                                    class="d-flex justify-content-center cost">
-                                    </p>
+                                    {{ formattedDeductible }}
-                                    <p v-if="verifiedITAC">Your deductible is: {{ formattedDeductible }}</p>
+                                  <div
+                                    v-if="displayQuote"
+                                    class="d-flex justify-content-center cost" >
+                                    {{ formattedServicePrice }}
+                                  </div>
+                                  <div
+                                    v-if="verifiedITAC">Your deductible is:
+                                    {{ formattedDeductible }}
                                   </div>
                                   </div>
                                   <alert
@@ -37,36 +42,26 @@
                                     alertClass="alert-success"
                                     v-bind:isDismissible="false">
                                   </alert>
-                                  <p
-                                    v-html="explanatoryText"
-                                    id="explanatory">
-                                  </p>
                                   <div
                                     v-html="nextStepsHeader"
                                     class="fw-bold text-black mb-2">
                                   </div>
                                   <div
                                     v-html="nextStepsBody"
-                                    id="nextStepsBody">
+                                    class="body-text">
-                                  </div>
-                                  <!-- <textBlock
-                                    cmsWidgetName="verifyingCoverageStatement"
-                                    typeStyle="h5"
-                                    justifyText="center"
-                                    class="mt-4 mb-4"
-                                    id="coverage-statement-text-block" /> -->
-                                  <!-- <div>
-                                    <p v-html="continueWithSchedulingBodyText" class="mt-0 small" ></p>
-                                  </div> -->
-                                  <!-- <textBlock
-                                    cmsWidgetName="whatHappensNextCopy"
-                                    class="mt-4 mb-2 fw-bold"
-                                    id="coverage-statement-text-block" /> -->
-                                  <div>
-                                    <!-- <p class="small" v-html="bodyText" ref="coverageStatementBodyText"></p> -->
                                   </div>
                                   <steeringText  cmsWidgetName="MASteeringText" ></steeringText>
-                                  
+                                  <buttonQuestion
+                                    v-if="displayQuote"
+                                    cmsWidgetName="ServiceProviderQuestion"
+                                    :questionText="questionText"
+                                    :answers="answersFromCms"
+                                    buttonTypeString="listButton"
+                                    isRequired
+                                    v-model="selectedProvider"
+                                    validationRules="selection-required"
+                                    id="coverage-button-question">
+                                  </buttonQuestion>
                               </div>
                               <siteFooter
                                 class="mt-5"
@@ -89,7 +84,7 @@
 
 // Import Component
 import baseFormMixin from '@/mixins/base-form-mixin';
-import { Form } from 'vee-validate';
+import { Form, defineRule } from 'vee-validate';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import siteHeader from '@/iss-components/site-header/site-header.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
@@ -97,7 +92,8 @@ import textBlock from "@/digital-components/text-block/text-block";
 import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
 import steeringText from "@/iss-components/steering-text/steering-text.vue";
 import alert from "@/ux-components/alert/alert";
-import contentGroupModal          from '@/iss-components/content-group-modal/content-group-modal';
+import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal';
+import buttonQuestion from "@/digital-components/button-question/button-question";
 
 // Import Supporting Files
 import { fetchCmsContentForPage, setupModalLinks } from '@/helpers/cms-content-helper';
@@ -106,6 +102,11 @@ import { getDamageString } from '@/helpers/damage-helper.js';
 import { useMainStore } from "@/store";
 import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 import { processIfStatements } from '@/helpers/cms-content-helper';
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+
+// DEFINE VALIDATION RULES
+defineRule("selection-required", required(errorMessages.OPTION_REQUIRED));
 
 const store = useMainStore();
 
@@ -167,7 +168,8 @@ export default {
       recalModal,
       steeringText,
       alert,
-      contentGroupModal
+      contentGroupModal,
+      buttonQuestion
   },
   mounted() { 
     setupModalLinks(this);
@@ -179,6 +181,7 @@ export default {
       supportingItems: [],
       pricedGlassParts: [],
       availableLineItems: [],
+      selectedProvider: "",
     }
   },
   computed: {
@@ -202,44 +205,6 @@ export default {
       let body = this.getBodyTextFromCms("NextStepsWidget").replaceAll("{custom:damage}", this.damageText);
       return body;
     },
-    // coverageStatementContent() {
-    //   if (!this.cmsWidgetName) return [];
-    //   const cmsContent = [];
-    //   cmsContent.push(
-    //     {
-    //       Name: 'SubHeader',
-    //       cmsWidgetName: 'SiteSubHeaderWidget'
-    //     },
-    //     {
-    //       Name: 'ExplanatoryText',
-    //       cmsWidgetName: 'ExplanatoryTextWidget'
-    //     },
-    //     {
-    //       Name: 'NextSteps',
-    //       cmsWidgetName: 'NextStepsWidget'
-    //     }
-    //   );
-    //   //if cms content has not yet loaded, skip
-    //   if (this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText') == '') {
-    //       return {};
-    //   }
-      // bodyText() {
-      //     if (useMainStore().damage.isRepair) {
-      //         return this.unverifiedNonADASRepairBodyText;
-      //     }
-      //     else {
-      //         let parts = useMainStore().lineItems.glassParts;
-
-      //         // if ADAS, display ADASNextSteps
-      //         if (parts != null && parts.filter(part => part.requiresRecalibration).length > 0) {
-      //             return this.unverifiedADASNextStepsBodyText;
-      //         }
-      //         // if non-ADAS, display NonADASNextSteps
-      //         else {
-      //             return this.unverifiedNonADASNextStepsBodyText;
-      //         }
-      //     }
-      // },
       continueWithSchedulingBodyText() {
         return this.getCmsContent("continueWithSchedulingCopy", "BodyText");
       },
@@ -256,12 +221,6 @@ export default {
         var damageString = getDamageString();
         return damageString == "match" ? "" : damageString;
       },
-      // selectedVehiclePolicyInfo() {
-      //   const matchingVehicle = this.policyVehicles.filter(
-      //     (vehicle) => vehicle.vin === store.order.vehicle.vin
-      //   )
-      //   return matchingVehicle;
-      // },
       vehicleDeductible() {
         if (this.coverageVerified) {
           if (store.order.damage.isRepair) {
@@ -273,19 +232,19 @@ export default {
             return replaceDeductible;
           }
         }
-        //console.log(this.selectedVehicle[0].coverages[0].deductible);
-        //const deductible = this.selectedVehiclePolicyInfo[0].coverages[0].deductible;
-        //console.log(!this.selectedVehiclePolicyInfo[0].coverages[0]);
-        //return deductible;
       },
       formattedDeductible() {
         return this.getDeductibleString(this.vehicleDeductible);
       },
       isDeductibleZero() {
-        return this.vehicleDeductible === 0;
+        if (this.coverageVerified && !this.verifiedNoComp) {
+          return this.vehicleDeductible === 0;
+        }
       },
       deductibleOverZero() {
-        return this.vehicleDeductible > 0;
+        if (this.coverageVerified && !this.verifiedNoComp) {
+          return !this.isDeductibleZero;
+        }
       },
       coverageVerified() {
         return true;
@@ -301,14 +260,14 @@ export default {
         }
       },
       verifiedITAC() {
-        if (this.coverageVerified) {
+        if (this.coverageVerified && !this.verifiedNoComp) {
           if (this.vehicleDeductible > this.totalServicePrice) {
             return true;
           }
         }
       },
       verifiedDeductible() {
-        if (this.coverageVerified) {
+        if (this.coverageVerified && !this.verifiedNoComp) {
           if (this.totalServicePrice > this.vehicleDeductible) {
             return true;
           }
@@ -344,9 +303,19 @@ export default {
         return this.getServicePriceString(this.totalServicePrice);
       },
       costSavings() {
-        
         return this.getITACCostSavings(this.vehicleDeductible, this.totalServicePrice);
 
+      },
+      questionText() {
+        return this.getCmsContent("ServiceProviderQuestion", "QuestionText");
+      },
+      answersFromCms() {
+        return this.getCmsContent("ServiceProviderQuestion", "Answers");
+      },
+      displayQuote() {
+        if (this.verifiedITAC || this.verifiedNoComp) {
+          return true;
+        }
       }
 },
   methods: {
@@ -356,6 +325,35 @@ export default {
       }
       return false;
     },
+    async forwardButtonAction() {
+      return await this.navigateForward();
+
+    },
+    async navigateForward() {
+      if (this.coverageUnverified || this.verifiedDeductible) {
+        this.$router.navigate(
+            this.navigationScenarios.CLICKED_FORWARD,
+            this.$route
+        )
+      }
+      else if (this.verifiedITAC || this.verifiedNoComp) {
+        if (this.selectedProvider === "Safelite") {
+          this.$router.navigate(
+            this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
+            this.$route
+          )
+        }
+        else if (store.issConfig.enableTPAFlow){
+          this.$router.navigate(
+            this.navigationScenarios.CLICKED_FORWARD_WITH_THIRD_PARTY,
+            this.$route
+          )
+        }
+        else {
+          //display TPA bailout modal
+        }
+      }
+    },
     openModalAction(modalName) {
       this.$refs[modalName.args].openModal();
     },
@@ -396,6 +394,10 @@ export default {
           return this.nonADASReplace;
         case 'nonADASRepair':
           return this.nonADASRepair;
+        case 'deductibleOverZero':
+          return this.deductibleOverZero
+        case 'isDeductibleZero':
+          return this.isDeductibleZero
         default:
           return null;
       }
@@ -404,8 +406,6 @@ export default {
       return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
     },
     getDeductibleString(deductible) {
-      console.log(this.vehicleDeductible);
-      console.log(this.deductibleOverZero);
       const formattedDeductibleFloat = parseFloat(deductible).toFixed(2);
         return '$' + formattedDeductibleFloat;
     },
@@ -418,38 +418,44 @@ export default {
       return savings;
     }
   },
+  watch: {
+    selectedProvider() {
+      if (this.selectedProvider === "Safelite") {
+        this.$refs.siteFooter.updateButtonText('Continue with Safelite');
+      }
+      else {
+        this.$refs.siteFooter.updateButtonText('Continue');
+      }
+    }
+  }
 };
 </script>
 
 <style lang="scss">
-ol {
+.body-text {
-  margin-left: -1rem;
+  p {
-  margin-bottom:0;
+    font-size: 14px;
-  li {
+    line-height: 24px;
-      margin-bottom: .5rem;
+    margin-bottom: 8px;
-      line-height: 1.5rem;
-      a {
-          line-height: 1.5rem;
-          padding: 0;
-      }
   }
 }
-#coverage-statement-text-block {
-  color: $black;
-}
-p strong {
-  color: $black;
-  font-weight: 500;
-}
-p.small{
-    margin-bottom:0;
-}
 
-.secondary-text {
+.cost {
   color: $green;
   font-size: 32px;
   font-weight: 300;
   margin-bottom: 24px;
+  line-height: 44px;
+}
+
+#coverage-button-question {
+  .question-text {
+    margin-bottom: 8px;
+  }
+  .question-text > span {
+    text-align: left;
+    line-height: 24px;
+  }
 }
 
 </style>

src/router/router-constants/navigation-scenarios.js

@@ -54,6 +54,8 @@ const navigationScenarios = {
   
     // Coverage Statement
     CLICKED_BACK_WITH_REPAIR: "CLICKED_BACK_WITH_REPAIR",
+    CLICKED_FORWARD_WITH_SAFELITE: "CLICKED_FORWARD_WITH_SAFELITE",
+    CLICKED_FORWARD_WITH_THIRD_PARTY: "CLICKED_FORWARD_WITH_THIRD_PARTY",
 
     //Provider Preference
     CLICKED_FORWARD_WITH_SAFELITE: "CLICKED_FORWARD_WITH_SAFELITE",

src/router/router-constants/routing-table.js

@@ -430,6 +430,14 @@ const routingTable = function(store) {
           scenario: navigationScenarios.CLICKED_FORWARD,
           destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE
         },
+        {
+          scenario: navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE,
+          destinationIssPageValue: issPageValues.SERVICE_LOCATION
+        },
+        {
+          scenario: navigationScenarios.CLICKED_FORWARD_WITH_THIRD_PARTY,
+          destinationIssPageValue: issPageValues.TPA_SEARCH
+        },
       ]
     },
     {