estimate page

src/constants/error-messages.js

@@ -21,6 +21,7 @@ const errorMessages = {
     SERVICE_ZIP_FORMAT: "Please enter a valid Service ZIP",
     VIN_REQUIRED: "Please enter your VIN",
     VIN_FORMAT: "Please enter a valid VIN",
+    OPTION_REQUIRED: "Please select an option",
 };
 
 export { errorMessages };

src/constants/vin-lookup-method-selections.js

@@ -0,0 +1,7 @@
+const vinLookupMethodSelections = {
+    MANUALVIN: "ManualVin", 
+    LICENSEPLATE: "LicensePlate", 
+    HOMEADDRESS: "HomeAddress", 
+}; 
+
+export { vinLookupMethodSelections }; 

src/helpers/heritage-integration/navigation-helper.js

@@ -93,9 +93,9 @@ async function getLatestPageForRedirection() {
         return fmgPageValues.VEHICLE_DAMAGE;
     } else {
         if (store.getters.vehicle.vin) {
-            return fmgPageValues.LICENSE_PLATE_LOOKUP;
-        } else {
             return fmgPageValues.VIN_LOOKUP;
+        } else {
+            return fmgPageValues.ESTIMATE;
         }
     }
 }

src/layouts/estimate/estimate.vue

@@ -1,13 +1,156 @@
 <template>
-    <p> Estimate </p>
+  <Form
+    @submit="onSubmit"
+    @invalid-submit="onInvalidSubmit"
+    ref="theForm"
+    v-slot="{ meta }"
+  >
+    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
+      <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+      <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
+      <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+      <buttonQuestion
+        cmsWidgetName="VinLookupMethod"
+        class="button-question-overflow"
+        :questionText="questionText"
+        :answers="answersToDisplay"
+        :groupName="groupName"
+        buttonType="listButton"
+        v-model="selectedValues"
+        isRequired
+        validationRules="option-required"
+      />
+
+      <funnel-footer
+        cmsWidgetName="FunnelFooterWidget"
+        :isForwardActionDisabled="!meta.valid"
+        @isDisabled="!meta.valid"
+        @back-clicked="backButtonAction"
+        @ForwardClicked="forwardButtonAction"
+      />
+    </div>
+  </Form>
 </template>
+
 <script>
+// Components
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import buttonQuestion from "@/common-components/button-question/button-question";
+//Supporting Files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import { Form, defineRule } from "vee-validate";
+import store from "@/store";
+import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js";
+// Define Validation Rules
+defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
 export default {
-    name: "estimate",
+  name: "estimate",
-    methods: {
+  data() {
-        arePagePrerequisitesValid() {
+    return {
-            return true;
+      groupName: "vinLookupMethodOptions",
-        },
+      selectedValues: [],
-    }
+    };
+  },
+  props: {
+    name: String,
+  },
+  async beforeRouteEnter(to, from, next) {
+    //Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    //Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+    ];
+    const resultMap = await settleAllPromises(promiseResultMap);
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+    });
+  },
+  methods: {
+    arePagePrerequisitesValid() {
+      if(store.getters.damage.isRepair!=null){
+        return true;
+      }
+      return false; 
+    },
+    resetDependentState() {},
+    backButtonAction() {
+      // route to move backwards
+      this.$router.navigate(
+        this.navigationScenarios.CLICKED_BACK, 
+        this.$route
+      );
+    },
+    forwardButtonAction() {
+      if (this.selectedValues[0]===vinLookupMethodSelections.MANUALVIN) {
+        this.$router.navigate(
+          this.navigationScenarios.SELECTED_MANUAL_VIN,
+          this.$route
+        );
+        return; 
+      }
+      if (this.selectedValues[0]===vinLookupMethodSelections.LICENSEPLATE) {
+        this.$router.navigate(
+          this.navigationScenarios.SELECTED_LICENSE_PLATE,
+          this.$route
+        );
+        return; 
+      }
+      if (this.selectedValues[0]===vinLookupMethodSelections.HOMEADDRESS) {
+        this.$router.navigate(
+          this.navigationScenarios.SELECTED_HOME_ADDRESS,
+          this.$route
+        );
+        return; 
+      }
+    },
+  },
+  computed: {
+    questionText() {
+      return this.getCmsContent("VinLookupMethod", "QuestionText");
+    },
+    answersFromCms() {
+      return this.getCmsContent("VinLookupMethod", "Answers");
+    },
+    vinLookupMethodOptionsMap() {
+      return {
+        ManualVin: true,
+        LicensePlate: true,
+        HomeAddress: true,
+      };
+    },
+    answersToDisplay() {
+      const filteredAnswers = Array.isArray(this.answersFromCms)
+        ? this.answersFromCms.filter((ans) => {
+            const name = ans.Name.split("-");
+            return name[0];
+          })
+        : [];
+      return filteredAnswers.map((ans) => {
+        const newName = ans.Name.includes("-")
+          ? ans.Name.split("-")[1]
+          : ans.Name;
+        ans.Name = newName;
+        return ans;
+      });
+    },
+  },
+  components: {
+    funnelHeader,
+    vehicleBanner,
+    funnelSubHeader,
+    funnelFooter,
+    buttonQuestion,
+    Form,
+  },
 };
-</script>
+</script>

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

@@ -309,8 +309,11 @@ export default {
       }      
 
       // If vin already exists, navigate directly to vin-lookup
-      if(this.$store.getters.vehicle.vin){
+      if(store.getters.vehicle.vin){
-        this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_VIN, this.$route);
+        this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD_WITH_VIN, this.$route, {}, {}, partsData.data);
+        return; 
+      }if(store.getters.vehicle.vin == null){
+        this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN, this.$route, {}, {}, partsData.data);
         return;
       }
 

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

@@ -16,6 +16,10 @@ const navigationScenarios = {
   CONTINUING_WITH_SINGLE_PART: "CONTINUING_WITH_SINGLE_PART",
   CONTINUING_WITH_MULTIPLE_VEHICLES: "CONTINUING_WITH_MULTIPLE_VEHICLES",
   TEMPORARY_TO_ADDRESS_LOOKUP: "TEMPORARY_TO_ADDRESS_LOOKUP",
+  CLICKED_FORWARD_WITHOUT_VIN: "CLICKED_FORWARD_WITHOUT_VIN", 
+  SELECTED_MANUAL_VIN: "SELECTED_MANUAL_VIN", 
+  SELECTED_LICENSE_PLATE: "SELECTED_LICENSE_PLATE", 
+  SELECTED_HOME_ADDRESS: "SELECTED_HOME_ADDRESS",
 };
 
 export { navigationScenarios };

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

@@ -77,6 +77,14 @@ const routingTable = [
         scenario: navigationScenarios.TEMPORARY_TO_ADDRESS_LOOKUP,
         destinationFmgPageValue: fmgPageValues.ADDRESS_LOOKUP, //This will be temporary
       },
+      {
+        scenario: navigationScenarios.CLICKED_FORWARD_WITH_VIN,
+        destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
+      },
+      {
+        scenario: navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
+        destinationFmgPageValue: fmgPageValues.ESTIMATE,
+      },
     ],
   },
   {
@@ -172,6 +180,26 @@ const routingTable = [
       },         
     ],
   },  
+    {fmgPageValue: fmgPageValues.ESTIMATE,
+    maps: [
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+      },
+      {
+        scenario: navigationScenarios.SELECTED_MANUAL_VIN,
+        destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
+      },
+      {
+        scenario: navigationScenarios.SELECTED_LICENSE_PLATE,
+        destinationFmgPageValue: fmgPageValues.LICENSE_PLATE_LOOKUP,
+      },
+      {
+        scenario: navigationScenarios.SELECTED_HOME_ADDRESS,
+        destinationFmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
+      },
+    ],
+  },
 ];
 
 export { routingTable };