WIP Do not merge.

src/layouts/vin-lookup/vin-lookup.vue

@@ -1,9 +1,8 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+  <div class="container-fluid shadow rounded-3 px-5 position-relative make-tall">
     <funnelHeader ref="funnelHeader" />
     <vehicleBanner ref="vehicleBanner" />
     <funnelSubHeader ref="funnelSubHeader" />
-    <h1>VIN Lookup Placeholder Page</h1>
     <Form
       @submit="onSubmit"
       @invalid-submit="onInvalidSubmit"
@@ -11,6 +10,27 @@
       v-slot="{ meta }"
       class="d-flex flex-column h-100"
     >
+    <textboxQuestion
+      labelText="Enter your VIN"
+      placeholderText=""
+      inputId="vin-input"
+      class="mt-5 mb-2"
+    />
+    <vinInformation
+      class="mb-5"
+    />
+    <textboxQuestion
+      labelText="Service ZIP"
+      placeholderText=""
+      inputID="zip-input"
+      class="mb-5"
+    />
+    <textboxQuestion
+      labelText="Email address"
+      placeholderText=""
+      inputID="email-input"
+      class="mb-5"
+    />
     <funnel-footer
       ref="funnelFooter"
       :isDisabled="!meta.valid"
@@ -27,6 +47,8 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+import vinInformation from "@/common-components/vin-information/vin-information";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -97,11 +119,63 @@ export default {
         this.$route
       );
     },
+    async forwardButtonAction(zip, plate) {
+      const zipValidation = await this.validateZip(zip);
+      const vinLookup = await this.lookupVin(plate);
+      if (!zipValidation.isServiceable) {
+        this.newServiceZipRequired = true;
+        return;
+      }
+      if (!vinLookup.vin) {
+        this.vinNotValid = true;
+        return;
+      }
+      if (vinLookup.vehicle.carId !== store.getters.vehicle.carId) {
+        this.vinDoesNotMatchCarId = true;
+        return;
+      }
+      const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
+        this.storeActions.GET_PARTS_OR_QUESTIONS,
+        {
+          carId: store.getters.vehicle.carId,
+          glassArray: store.getters.damage.glassToReplace,
+          zipCode: zip,
+          vin: vinLookup.vin
+        },
+        false
+      );
+      this.navigateForward(partsData);
+    },
+    navigateForward(partsData){
+        if(partsData.data.partsOrQuestions.partQuestions.length){
+            this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_PARTS_QUESTION, this.$route, {}, {}, partsData.data);
+            return;
+        } else if(!partsData.data.partsOrQuestions.partQuestions.length && partsData.data.partsOrQuestions.parts.length > 1) {
+           this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data);
+           return;
+        } else {
+            this.$router.navigate(this.navigationScenarios.CONTINUING_WITH_SINGLE_PART, this.$route);
+        }
+    },
+    validateZip(zip) {
+      return baseMixin.methods.dispatchNonBlockingStoreAction(
+        storeActions.VALIDATE_ZIP,
+        { zip }
+      );
+    },
+    lookupVin(plate, state) {
+      return baseMixin.methods.dispatchNonBlockingStoreAction(
+        storeActions.LOOKUP_VIN_BY_PLATE,
+        { plate, state }
+      );
+    },
   },
   components: {
     funnelHeader,
     vehicleBanner,
     funnelSubHeader,
+    textboxQuestion,
+    vinInformation,
     funnelFooter,
     Form,
   },