Merge branch 'develop' into feature/Digital/SSR-39

# Conflicts:
#	src/router/index.js

src/App.vue

@@ -9,7 +9,6 @@
   </router-view>
 -->
 </template>
-
 <style lang="scss">
   @import "./node_modules/bootstrap/scss/bootstrap";
   @import "@/styles/common-animations.scss";

src/constants/store-actions.js

@@ -27,7 +27,7 @@ const storeActions = {
     VALIDATE_ZIP: "validateZip",
     CLEAR_VIN: "clearVin",
 
-     // VEHICLE MUTATIONS
+     // VEHICLE Actions
      UPDATE_YEAR: "updateYear",
      UPDATE_MAKE: "updateMake",
      UPDATE_MODEL: "updateModel",
@@ -39,11 +39,6 @@ const storeActions = {
      UPDATE_VEHICLE_IMAGE_COLOR: "updateVehicleImageColor",
      UPDATE_VEHICLE_VIN: "updateVehicleVin",
      UPDATE_VEHICLE: "updateVehicle",
-   
-  
-    // DEPENDENCY MUTATIONS
-    
-    // SAVE COMPONENT STATE
 
   };
   

src/layouts/vehicle-make/vehicle-make.vue

@@ -1,9 +1,29 @@
 <template>
-    Vehicle Make Placeholder
+    <div>
+        <input type="text" v-model="year"/>
+        <span> Vehicle Make Placeholder </span>
+        <span>{{returnVehicleYear}}</span> 
+        <button @click="addYear(year)">Add</button>
+    </div>
 </template>
 
 <script>
+    import { storeActions } from "@/constants/store-actions";
     export default {
-        name: 'vehicle-make'
+        name: 'vehicle-make',
+        methods:
+        {
+            addYear(item) 
+            {
+               this.$store.saveVehicleYear(item);
+            }
+        },
+        computed:
+        {
+            returnVehicleYear()
+            {
+               return this.$store.order.vehicle.year;
+            }
+        }
     }
 </script>

src/main.js

@@ -1,10 +1,16 @@
 import { createApp } from 'vue';
+import { createPinia } from "pinia";
 import App from './App.vue';
 import router from './router';
 import "../node_modules/bootstrap/dist/js/bootstrap.js";
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+import { useMainStore } from './store';
 
 const vueApp = createApp(App);
-
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
+vueApp.use(pinia);
+vueApp.config.globalProperties.$store = useMainStore();
 vueApp.use(router);
 vueApp.mount("#app");
 

src/router/index.js

@@ -22,7 +22,7 @@ const routes = [
 
                 if(routeData[0].name.toLowerCase() === "error")
                 {
-                    throw("Page not found!")
+                    throw("Page not found!");
                 }
 
                 // Add our dynamic route.
@@ -51,6 +51,7 @@ const router = createRouter({
     routes,
 });
 
+
 // Get route information by page name.
 // This will reach out to the Cms and there is a 1:1 relationship between page names and route names.
 async function GetRouteInfoFromPageName(pageName) {

src/store/index.js

@@ -0,0 +1,88 @@
+import { defineStore } from "pinia";
+import { endpoints } from "@/constants/endpoints.js";
+import globalMethods from "@/global-methods";
+import { storeActions } from "@/constants/store-actions";
+
+export const useMainStore = defineStore({
+    id: 'main',
+    state()  {
+      return {
+        order: {
+          vehicle: {
+            year: null,
+            make: null,
+            model: null,
+            style: null,
+            carId: null,
+            category: null,
+            vin: null,
+            imageUrl: null,
+            imageVifNumber: null,
+            imageColor: null,
+            registration: {
+              licensePlate: null,
+              address: null,
+              city: null,
+              state: null,
+              zipCode: null,
+              firstName: null,
+              lastName: null,
+            },
+          },
+          serviceLocation: {
+            address: null,
+            city: null,
+            state: null,
+            zipCode: null,
+          },
+          customer: {
+            emailAddress: null,
+          },
+          damage: {
+            isRepair: null,
+            numberOfChips: null,
+            glassToReplace: null,
+            partQuestionAnswers: null,
+            moldingQuestionAnswers: null,
+            capabilityQuestionAnswers: null
+          },
+          lineItems: {
+            glassParts: null
+          },
+          payment: {
+            isInsurance: null,
+            insuranceCoverage: {
+              isVerified: null
+            }
+          },
+          referralNumber: null,
+          referralDate: null,
+          referralCorrelationId: null,
+          accountNumber: 0,
+          eon: null
+        },
+      };
+    },
+    getters: {},
+    actions:
+    {
+      updateYear(year) {
+        this.order.vehicle.year = year;
+      },
+      updateMake(make) {
+        this.order.vehicle.make = make;
+      },
+      updateModel(model) {
+        this.order.vehicle.model = model;
+      },
+      // Vehicle
+      saveVehicleYear(year) 
+      {
+          if (this.order.vehicle.year !== year) {
+            this.updateYear(year);
+          }
+      },
+    },
+    persist: true
+});
+