Creating license plate lookup page

src/constants/endpoints.js

@@ -47,6 +47,10 @@ const endpoints = {
     url: "/parts/api/v1/parts/parts-or-questions",
     method: "POST",
   },
+  ValidateZip: {
+    url: "/location/api/v1/location/zip",
+    method: "GET",
+  },
 };
 
 export { endpoints };

src/constants/store-mutations.js

@@ -14,6 +14,14 @@ const storeMutations = {
   UPDATE_NUMBER_OF_CHIPS: "updateNumberOfChips",
   UPDATE_GLASS_TO_REPLACE: "updateGlassToReplace",
   UPDATE_PARTS: "updateParts",
+  UPDATE_REGISTRATION_ADDRESS: "updateRegistrationAddress",
+  UPDATE_REGISTRATION_CITY: "updateRegistrationCity",
+  UPDATE_REGISTRATION_STATE: "updateRegistrationState",
+  UPDATE_REGISTRATION_ZIP_CODE: "updateRegistrationZipCode",
+  UPDATE_REGISTRATION_FIRST_NAME: "updateRegistrationFirstName",
+  UPDATE_REGISTRATION_LAST_NAME: "updateRegistrationLastName",
+  UPDATE_SERVICE_LOCATION_ZIP: "updateServiceLocationZip",
+  UPDATE_CUSTOMER_EMAIL_ADDRESS: "updateCustomerEmailAddress",
 
   // EVENT BUS MUTATIONS
   ADD_EVENT_TO_BUS: "addEventToBus",

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -0,0 +1,96 @@
+<template>
+    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+        <funnelHeader ref="funnelHeader" />
+        <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
+        <funnelSubHeader ref="funnelSubHeader" />
+        <textboxQuestion ref="licensePlateNumber" />
+        <funnel-footer
+            ref="funnelFooter"
+            @back-clicked="backButtonAction"
+            @ForwardClicked="forwardButtonAction"
+        />
+    </div>
+</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 textboxQuestion from "@/common-components/textbox-question/textbox-question"
+
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions";
+import { storeMutations } from "@/constants/store-mutations";
+
+export default {
+    name: "license-plate-lookup",
+    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);
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.$refs.funnelHeader.initializeComponent(
+                resultMap.cmsContent.FunnelHeaderWidget
+            );
+            vm.$refs.vehicleBanner.initializeComponent(
+                resultMap.cmsContent.VehicleBannerWidget
+            );
+            vm.$refs.funnelSubHeader.initializeComponent(
+                resultMap.cmsContent.FunnelSubHeaderWidget
+            );
+            vm.$refs.funnelFooter.initializeComponent(
+                resultMap.cmsContent.FunnelFooterWidget
+            );
+            vm.$refs.licensePlateNumber.initializeComponent(
+                resultMap.cmsContent.LicensePlateNumber
+            );
+            console.log(resultMap)
+        });
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            return store.getters.vehicle.carId !== null;
+        },
+        resetDependentState() {
+            store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null);
+            store.commit(storeMutations.UPDATE_REGISTRATION_CITY, null);
+            store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, null);
+            store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null);
+            store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
+        },
+        backButtonAction() {
+            // route to move backwards
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_BACK,
+                this.$route
+            );
+        },
+        forwardButtonAction(){
+
+        }
+    },
+    components: {
+        funnelHeader,
+        funnelFooter,
+        vehicleBanner,
+        textboxQuestion,
+        funnelSubHeader,
+    }
+}
+</script>

src/router/router-constants/fmgPage-values.js

@@ -7,7 +7,9 @@ const fmgPageValues = {
   VIN_LOOKUP: "vin-lookup",
   VEHICLE_PARTS: "vehicle-parts",
   PART_QUESTIONS: "part-questions",
-  REVEAL : "reveal",
+  LICENSE_PLATE_LOOKUP: "license-plate-lookup",
+  REVEAL: "reveal",
+  ESTIMATE: "estimate",
 };
 
 export { fmgPageValues };

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

@@ -97,6 +97,15 @@ const routingTable = [
       },
     ],
   },
+  {
+    fmgPageValue: fmgPageValues.LICENSE_PLATE_LOOKUP,
+    maps: [
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.ESTIMATE,
+      },
+    ],
+  },
 ];
 
 export { routingTable };

src/store/index.js

@@ -19,6 +19,15 @@ export const state = {
       imageUrl: null,
       imageVifNumber: null,
       imageColor: null,
+      registration: {
+        licensePlate: null,
+        address: null,
+        city: null,
+        state: null,
+        zipCode: null,
+        firstName: null,
+        lastName: null,
+      },
     },
     damage: {
       isRepair: null,
@@ -34,6 +43,12 @@ export const state = {
     eventBus: [],
     pageData: {}
   },
+  serviceLocation: {
+    zip: null,
+  },
+  customer: {
+    emailAddress: null,
+  },
 }
 
 // Export Mutations
@@ -81,6 +96,30 @@ export const mutations = {
   updatePageData(state, pageData){
     state.applicationUser.pageData[pageData.page] = pageData.data;
   },
+  updateRegistrationAddress(state, registrationAddress){
+    state.order.vehicle.registration.address = registrationAddress;
+  },
+  updateRegistrationCity(state, registrationCity){
+    state.order.vehicle.registration.city = registrationCity;
+  },
+  updateRegistrationState(state, registrationState){
+    state.order.vehicle.registration.state = registrationState;
+  },
+  updateRegistrationZipCode(state, registrationZipCode){
+    state.order.vehicle.registration.zipCode = registrationZipCode;
+  },
+  updateRegistrationFirstName(state, registrationFirstName){
+    state.order.vehicle.registration.firstName = registrationFirstName;
+  },
+  updateRegistrationLastName(state, registrationLastName){
+    state.order.vehicle.registration.lastName = registrationLastName;
+  },
+  updateServiceLocationZip(state, ServiceLocationZip){
+    state.order.vehicle.serviceLocation.zip = ServiceLocationZip;
+  },
+  updateCustomerEmailAddress(state, CustomerEmailAddress){
+    state.order.vehicle.customer.emailAddress = CustomerEmailAddress;
+  },
 
   // EVENT BUS MUTATIONS
   addEventToBus(state, event) {